@laerdal/life-react-components 1.7.0-dev.9.full → 1.8.0-dev.2

package/dist/Toggles/ToggleButton.js

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1 @@
+{"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/Toggles/ToggleSwitch.cjs

@@ -13,6 +13,8 @@ var _TogglerStyles = require("./TogglerStyles");
 
 var _ = require("..");
 
+var _common = require("../common");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -47,8 +49,10 @@ var ToggleSwitch = function ToggleSwitch(_ref) {
     onToggle(!selected);
   };
 
+  var focusVisibleRef = (0, _common.useFocusVisibleRef)();
   size = (_size = size) !== null && _size !== void 0 ? _size : _.Size.Medium;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TogglerStyles.StyledSwitch, {
+    ref: focusVisibleRef,
     onClick: function onClick(e) {
       return toggle();
     },

package/dist/Toggles/ToggleSwitch.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Toggles/ToggleSwitch.tsx"],"names":["ToggleSwitch","id","disabled","selected","label","isSemantic","size","onToggle","toggle","Size","Medium","e","key","toString","toLowerCase","concat"],"mappings":";;;;;;;;;AAGA;;AAUA;;AACA;;;;;;;;AAdA;AACA;AACA;;AAQA;AACA;AACA;AAIA,IAAMA,YAAY,GAAG,SAAfA,YAAe,OAAsF;AAAA;;AAAA,MAAnFC,EAAmF,QAAnFA,EAAmF;AAAA,MAA/EC,QAA+E,QAA/EA,QAA+E;AAAA,MAArEC,QAAqE,QAArEA,QAAqE;AAAA,MAA3DC,KAA2D,QAA3DA,KAA2D;AAAA,MAApDC,UAAoD,QAApDA,UAAoD;AAAA,MAAxCC,IAAwC,QAAxCA,IAAwC;AAAA,MAAlCC,QAAkC,QAAlCA,QAAkC;;AACzG;AACF;AACA;AACE,MAAMC,MAAM,GAAG,SAATA,MAAS,GAAM;AACnB;AACA,QAAIN,QAAJ,EAAc,OAFK,CAInB;;AACAK,IAAAA,QAAQ,CAAC,CAACJ,QAAF,CAAR;AACD,GAND;;AAQAG,EAAAA,IAAI,YAAGA,IAAH,yCAAWG,OAAKC,MAApB;AAEA,sBACE,sBAAC,2BAAD;AACE,IAAA,OAAO,EAAE,iBAAAC,CAAC;AAAA,aAAIH,MAAM,EAAV;AAAA,KADZ;AAEE,IAAA,OAAO,EAAE,iBAAAG,CAAC;AAAA,aAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBJ,MAAM,EAA/B;AAAA,KAFZ;AAGE,IAAA,SAAS,EAAEF,IAAI,CACZO,QADQ,GAERC,WAFQ,GAGRC,MAHQ,CAGDb,QAAQ,GAAG,WAAH,GAAiB,EAHxB,CAHb;AAOE,IAAA,QAAQ,EAAEC,QAPZ;AAQE,IAAA,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAR5B;AAAA,4BASE,qBAAC,oCAAD;AAAA,6BACE,qBAAC,2BAAD;AAAQ,QAAA,SAAS,EAAEG,UAAU,GAAG,UAAH,GAAgB;AAA7C;AADF,MATF,EAYGD,KAAK,iBACJ;AAAO,MAAA,SAAS,EAAE,OAAlB;AAA2B,MAAA,OAAO,EAAEH,EAApC;AAAA,gBACGG;AADH,MAbJ;AAAA,IADF;AAoBD,CAlCD;;eAoCeJ,Y","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom types.\n */\nimport { ToggleSwitchProps } from './TogglerTypes';\n\n/**\n * Import custom styles.\n */\nimport { ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch } from './TogglerStyles';\nimport { Size } from '..';\n\nconst ToggleSwitch = ({ id, disabled, selected, label, isSemantic, size, onToggle }: ToggleSwitchProps) => {\n  /**\n   * Does all required pre-requisites and toggles the switcher state.\n   */\n  const toggle = () => {\n    // If disabled, don't do anything\n    if (disabled) return;\n\n    // Toggle state change\n    onToggle(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledSwitch\n      onClick={e => toggle()}\n      onKeyUp={e => e.key === 'Enter' && toggle()}\n      className={size\n        .toString()\n        .toLowerCase()\n        .concat(disabled ? ' disabled' : '')}\n      selected={selected}\n      tabIndex={disabled ? -1 : 0}>\n      <ToggleSwitchContainer>\n        <Switch className={isSemantic ? 'semantic' : ''} />\n      </ToggleSwitchContainer>\n      {label && (\n        <label className={'label'} htmlFor={id}>\n          {label}\n        </label>\n      )}\n    </StyledSwitch>\n  );\n};\n\nexport default ToggleSwitch;\n"],"file":"ToggleSwitch.cjs"}
+{"version":3,"sources":["../../src/Toggles/ToggleSwitch.tsx"],"names":["ToggleSwitch","id","disabled","selected","label","isSemantic","size","onToggle","toggle","focusVisibleRef","Size","Medium","e","key","toString","toLowerCase","concat"],"mappings":";;;;;;;;;AAGA;;AAUA;;AACA;;AACA;;;;;;;;AAfA;AACA;AACA;;AAQA;AACA;AACA;AAKA,IAAMA,YAAY,GAAG,SAAfA,YAAe,OAAsF;AAAA;;AAAA,MAAnFC,EAAmF,QAAnFA,EAAmF;AAAA,MAA/EC,QAA+E,QAA/EA,QAA+E;AAAA,MAArEC,QAAqE,QAArEA,QAAqE;AAAA,MAA3DC,KAA2D,QAA3DA,KAA2D;AAAA,MAApDC,UAAoD,QAApDA,UAAoD;AAAA,MAAxCC,IAAwC,QAAxCA,IAAwC;AAAA,MAAlCC,QAAkC,QAAlCA,QAAkC;;AACzG;AACF;AACA;AACE,MAAMC,MAAM,GAAG,SAATA,MAAS,GAAM;AACnB;AACA,QAAIN,QAAJ,EAAc,OAFK,CAInB;;AACAK,IAAAA,QAAQ,CAAC,CAACJ,QAAF,CAAR;AACD,GAND;;AAOA,MAAMM,eAAe,GAAG,iCAAxB;AAEAH,EAAAA,IAAI,YAAGA,IAAH,yCAAWI,OAAKC,MAApB;AAEA,sBACE,sBAAC,2BAAD;AACE,IAAA,GAAG,EAAEF,eADP;AAEE,IAAA,OAAO,EAAE,iBAAAG,CAAC;AAAA,aAAIJ,MAAM,EAAV;AAAA,KAFZ;AAGE,IAAA,OAAO,EAAE,iBAAAI,CAAC;AAAA,aAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBL,MAAM,EAA/B;AAAA,KAHZ;AAIE,IAAA,SAAS,EAAEF,IAAI,CACZQ,QADQ,GAERC,WAFQ,GAGRC,MAHQ,CAGDd,QAAQ,GAAG,WAAH,GAAiB,EAHxB,CAJb;AAQE,IAAA,QAAQ,EAAEC,QARZ;AASE,IAAA,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAT5B;AAAA,4BAUE,qBAAC,oCAAD;AAAA,6BACE,qBAAC,2BAAD;AAAQ,QAAA,SAAS,EAAEG,UAAU,GAAG,UAAH,GAAgB;AAA7C;AADF,MAVF,EAaGD,KAAK,iBACJ;AAAO,MAAA,SAAS,EAAE,OAAlB;AAA2B,MAAA,OAAO,EAAEH,EAApC;AAAA,gBACGG;AADH,MAdJ;AAAA,IADF;AAqBD,CApCD;;eAsCeJ,Y","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom types.\n */\nimport { ToggleSwitchProps } from './TogglerTypes';\n\n/**\n * Import custom styles.\n */\nimport { ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch } from './TogglerStyles';\nimport { Size } from '..';\nimport { useFocusVisibleRef } from '../common';\n\nconst ToggleSwitch = ({ id, disabled, selected, label, isSemantic, size, onToggle }: ToggleSwitchProps) => {\n  /**\n   * Does all required pre-requisites and toggles the switcher state.\n   */\n  const toggle = () => {\n    // If disabled, don't do anything\n    if (disabled) return;\n\n    // Toggle state change\n    onToggle(!selected);\n  };\n  const focusVisibleRef = useFocusVisibleRef();\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledSwitch\n      ref={focusVisibleRef}\n      onClick={e => toggle()}\n      onKeyUp={e => e.key === 'Enter' && toggle()}\n      className={size\n        .toString()\n        .toLowerCase()\n        .concat(disabled ? ' disabled' : '')}\n      selected={selected}\n      tabIndex={disabled ? -1 : 0}>\n      <ToggleSwitchContainer>\n        <Switch className={isSemantic ? 'semantic' : ''} />\n      </ToggleSwitchContainer>\n      {label && (\n        <label className={'label'} htmlFor={id}>\n          {label}\n        </label>\n      )}\n    </StyledSwitch>\n  );\n};\n\nexport default ToggleSwitch;\n"],"file":"ToggleSwitch.cjs"}

package/dist/Toggles/ToggleSwitch.js

@@ -11,6 +11,7 @@ import * as React from 'react';
  */
 import { ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch } from './TogglerStyles';
 import { Size } from '..';
+import { useFocusVisibleRef } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -35,8 +36,10 @@ var ToggleSwitch = function ToggleSwitch(_ref) {
     onToggle(!selected);
   };
 
+  var focusVisibleRef = useFocusVisibleRef();
   size = (_size = size) !== null && _size !== void 0 ? _size : Size.Medium;
   return /*#__PURE__*/_jsxs(StyledSwitch, {
+    ref: focusVisibleRef,
     onClick: function onClick(e) {
       return toggle();
     },

package/dist/Toggles/ToggleSwitch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Toggles/ToggleSwitch.tsx"],"names":["React","ToggleSwitchContainer","ToggleSwitch","Switch","StyledSwitch","Size","id","disabled","selected","label","isSemantic","size","onToggle","toggle","Medium","e","key","toString","toLowerCase","concat"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASC,qBAAT,EAAgCC,YAAY,IAAIC,MAAhD,EAAwDC,YAAxD,QAA4E,iBAA5E;AACA,SAASC,IAAT,QAAqB,IAArB;;;;AAEA,IAAMH,YAAY,GAAG,SAAfA,YAAe,OAAsF;AAAA;;AAAA,MAAnFI,EAAmF,QAAnFA,EAAmF;AAAA,MAA/EC,QAA+E,QAA/EA,QAA+E;AAAA,MAArEC,QAAqE,QAArEA,QAAqE;AAAA,MAA3DC,KAA2D,QAA3DA,KAA2D;AAAA,MAApDC,UAAoD,QAApDA,UAAoD;AAAA,MAAxCC,IAAwC,QAAxCA,IAAwC;AAAA,MAAlCC,QAAkC,QAAlCA,QAAkC;;AACzG;AACF;AACA;AACE,MAAMC,MAAM,GAAG,SAATA,MAAS,GAAM;AACnB;AACA,QAAIN,QAAJ,EAAc,OAFK,CAInB;;AACAK,IAAAA,QAAQ,CAAC,CAACJ,QAAF,CAAR;AACD,GAND;;AAQAG,EAAAA,IAAI,YAAGA,IAAH,yCAAWN,IAAI,CAACS,MAApB;AAEA,sBACE,MAAC,YAAD;AACE,IAAA,OAAO,EAAE,iBAAAC,CAAC;AAAA,aAAIF,MAAM,EAAV;AAAA,KADZ;AAEE,IAAA,OAAO,EAAE,iBAAAE,CAAC;AAAA,aAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBH,MAAM,EAA/B;AAAA,KAFZ;AAGE,IAAA,SAAS,EAAEF,IAAI,CACZM,QADQ,GAERC,WAFQ,GAGRC,MAHQ,CAGDZ,QAAQ,GAAG,WAAH,GAAiB,EAHxB,CAHb;AAOE,IAAA,QAAQ,EAAEC,QAPZ;AAQE,IAAA,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAR5B;AAAA,4BASE,KAAC,qBAAD;AAAA,6BACE,KAAC,MAAD;AAAQ,QAAA,SAAS,EAAEG,UAAU,GAAG,UAAH,GAAgB;AAA7C;AADF,MATF,EAYGD,KAAK,iBACJ;AAAO,MAAA,SAAS,EAAE,OAAlB;AAA2B,MAAA,OAAO,EAAEH,EAApC;AAAA,gBACGG;AADH,MAbJ;AAAA,IADF;AAoBD,CAlCD;;AAoCA,eAAeP,YAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom types.\n */\nimport { ToggleSwitchProps } from './TogglerTypes';\n\n/**\n * Import custom styles.\n */\nimport { ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch } from './TogglerStyles';\nimport { Size } from '..';\n\nconst ToggleSwitch = ({ id, disabled, selected, label, isSemantic, size, onToggle }: ToggleSwitchProps) => {\n  /**\n   * Does all required pre-requisites and toggles the switcher state.\n   */\n  const toggle = () => {\n    // If disabled, don't do anything\n    if (disabled) return;\n\n    // Toggle state change\n    onToggle(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledSwitch\n      onClick={e => toggle()}\n      onKeyUp={e => e.key === 'Enter' && toggle()}\n      className={size\n        .toString()\n        .toLowerCase()\n        .concat(disabled ? ' disabled' : '')}\n      selected={selected}\n      tabIndex={disabled ? -1 : 0}>\n      <ToggleSwitchContainer>\n        <Switch className={isSemantic ? 'semantic' : ''} />\n      </ToggleSwitchContainer>\n      {label && (\n        <label className={'label'} htmlFor={id}>\n          {label}\n        </label>\n      )}\n    </StyledSwitch>\n  );\n};\n\nexport default ToggleSwitch;\n"],"file":"ToggleSwitch.js"}
+{"version":3,"sources":["../../src/Toggles/ToggleSwitch.tsx"],"names":["React","ToggleSwitchContainer","ToggleSwitch","Switch","StyledSwitch","Size","useFocusVisibleRef","id","disabled","selected","label","isSemantic","size","onToggle","toggle","focusVisibleRef","Medium","e","key","toString","toLowerCase","concat"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASC,qBAAT,EAAgCC,YAAY,IAAIC,MAAhD,EAAwDC,YAAxD,QAA4E,iBAA5E;AACA,SAASC,IAAT,QAAqB,IAArB;AACA,SAASC,kBAAT,QAAmC,WAAnC;;;;AAEA,IAAMJ,YAAY,GAAG,SAAfA,YAAe,OAAsF;AAAA;;AAAA,MAAnFK,EAAmF,QAAnFA,EAAmF;AAAA,MAA/EC,QAA+E,QAA/EA,QAA+E;AAAA,MAArEC,QAAqE,QAArEA,QAAqE;AAAA,MAA3DC,KAA2D,QAA3DA,KAA2D;AAAA,MAApDC,UAAoD,QAApDA,UAAoD;AAAA,MAAxCC,IAAwC,QAAxCA,IAAwC;AAAA,MAAlCC,QAAkC,QAAlCA,QAAkC;;AACzG;AACF;AACA;AACE,MAAMC,MAAM,GAAG,SAATA,MAAS,GAAM;AACnB;AACA,QAAIN,QAAJ,EAAc,OAFK,CAInB;;AACAK,IAAAA,QAAQ,CAAC,CAACJ,QAAF,CAAR;AACD,GAND;;AAOA,MAAMM,eAAe,GAAGT,kBAAkB,EAA1C;AAEAM,EAAAA,IAAI,YAAGA,IAAH,yCAAWP,IAAI,CAACW,MAApB;AAEA,sBACE,MAAC,YAAD;AACE,IAAA,GAAG,EAAED,eADP;AAEE,IAAA,OAAO,EAAE,iBAAAE,CAAC;AAAA,aAAIH,MAAM,EAAV;AAAA,KAFZ;AAGE,IAAA,OAAO,EAAE,iBAAAG,CAAC;AAAA,aAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBJ,MAAM,EAA/B;AAAA,KAHZ;AAIE,IAAA,SAAS,EAAEF,IAAI,CACZO,QADQ,GAERC,WAFQ,GAGRC,MAHQ,CAGDb,QAAQ,GAAG,WAAH,GAAiB,EAHxB,CAJb;AAQE,IAAA,QAAQ,EAAEC,QARZ;AASE,IAAA,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAT5B;AAAA,4BAUE,KAAC,qBAAD;AAAA,6BACE,KAAC,MAAD;AAAQ,QAAA,SAAS,EAAEG,UAAU,GAAG,UAAH,GAAgB;AAA7C;AADF,MAVF,EAaGD,KAAK,iBACJ;AAAO,MAAA,SAAS,EAAE,OAAlB;AAA2B,MAAA,OAAO,EAAEH,EAApC;AAAA,gBACGG;AADH,MAdJ;AAAA,IADF;AAqBD,CApCD;;AAsCA,eAAeR,YAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom types.\n */\nimport { ToggleSwitchProps } from './TogglerTypes';\n\n/**\n * Import custom styles.\n */\nimport { ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch } from './TogglerStyles';\nimport { Size } from '..';\nimport { useFocusVisibleRef } from '../common';\n\nconst ToggleSwitch = ({ id, disabled, selected, label, isSemantic, size, onToggle }: ToggleSwitchProps) => {\n  /**\n   * Does all required pre-requisites and toggles the switcher state.\n   */\n  const toggle = () => {\n    // If disabled, don't do anything\n    if (disabled) return;\n\n    // Toggle state change\n    onToggle(!selected);\n  };\n  const focusVisibleRef = useFocusVisibleRef();\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledSwitch\n      ref={focusVisibleRef}\n      onClick={e => toggle()}\n      onKeyUp={e => e.key === 'Enter' && toggle()}\n      className={size\n        .toString()\n        .toLowerCase()\n        .concat(disabled ? ' disabled' : '')}\n      selected={selected}\n      tabIndex={disabled ? -1 : 0}>\n      <ToggleSwitchContainer>\n        <Switch className={isSemantic ? 'semantic' : ''} />\n      </ToggleSwitchContainer>\n      {label && (\n        <label className={'label'} htmlFor={id}>\n          {label}\n        </label>\n      )}\n    </StyledSwitch>\n  );\n};\n\nexport default ToggleSwitch;\n"],"file":"ToggleSwitch.js"}

package/dist/Toggles/TogglerStyles.cjs

@@ -23,7 +23,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var StyledSwitch = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ", "\n  }\n\n  &.medium {\n    ", "\n  }\n\n  &.large {\n    ", "\n  }\n  &.disabled {\n    color: ", ";\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  ", "\n  &:not(.disabled):focus {\n    ", "\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n"])), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.COLORS.neutral_300, _styles.COLORS.primary_100, function (props) {
+var StyledSwitch = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ", "\n  }\n\n  &.medium {\n    ", "\n  }\n\n  &.large {\n    ", "\n  }\n  &.disabled {\n    color: ", ";\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  ", "\n  &:not(.disabled).focus-visible {\n    ", "\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n"])), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.COLORS.neutral_300, _styles.COLORS.primary_100, function (props) {
   return props.selected ? (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n          &.disabled label:first-of-type span {\n            background-color: ", " !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ", " !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover span {\n            &.semantic {\n              background-color: ", ";\n            }\n\n            &:before {\n              background-color: ", ";\n            }\n          }\n          label:first-of-type span {\n            background-color: ", ";\n\n            &.semantic {\n              background-color: ", ";\n            }\n\n            &:before {\n              -webkit-transform: translateX(20px);\n              -ms-transform: translateX(20px);\n              transform: translateX(20px);\n            }\n          }\n        "])), _styles.COLORS.neutral_300, _styles.COLORS.neutral_200, _styles.COLORS.correct_500, _styles.COLORS.primary_20, _styles.COLORS.primary_500, _styles.COLORS.correct_500) : (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n          &.disabled label:first-of-type span {\n            background-color: ", " !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ", " !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover label:first-of-type span {\n            &.semantic {\n              background-color: ", ";\n            }\n\n            &:before {\n              background-color: ", ";\n            }\n          }\n        "])), _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.critical_500, _styles.COLORS.primary_20);
 }, _styles.focusStyles);
 

package/dist/Toggles/TogglerStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Toggles/TogglerStyles.ts"],"names":["StyledSwitch","styled","div","ComponentTextStyle","Regular","COLORS","black","neutral_300","primary_100","props","selected","css","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","focusStyles","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AACA;;;;;;;;AAEO,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,4sBASnB,mCAAkBC,+BAAmBC,OAArC,EAA8CC,eAAOC,KAArD,CATmB,EAanB,mCAAkBH,+BAAmBC,OAArC,EAA8CC,eAAOC,KAArD,CAbmB,EAiBnB,mCAAkBH,+BAAmBC,OAArC,EAA8CC,eAAOC,KAArD,CAjBmB,EAoBZD,eAAOE,WApBK,EAiCCF,eAAOG,WAjCR,EAqCrB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,OACIC,qBADJ,05BAG4BN,eAAOE,WAHnC,EAO8BF,eAAOO,WAPrC,EAa8BP,eAAOQ,WAbrC,EAiB8BR,eAAOS,UAjBrC,EAqB4BT,eAAOU,WArBnC,EAwB8BV,eAAOQ,WAxBrC,QAkCIF,qBAlCJ,2kBAoC4BN,eAAOE,WApCnC,EAwC8BF,eAAOW,WAxCrC,EA8C8BX,eAAOY,YA9CrC,EAkD8BZ,eAAOS,UAlDrC,CADA;AAAA,CArCqB,EA6FnBI,mBA7FmB,CAAlB;;;;AAqGA,IAAMC,qBAAqB,GAAGlB,0BAAOmB,KAAV,sNAA3B;;;;AASA,IAAMC,YAAY,GAAGpB,0BAAOqB,IAAV,8rBAWHjB,eAAOkB,WAXJ,EAeDlB,eAAOY,YAfN,EAyBDZ,eAAOmB,KAzBN,CAAlB","sourcesContent":["/**\n * Import custom styles.\n */\nimport {COLORS, focusStyles} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled, { css } from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nexport const StyledSwitch = styled.div<{ selected: boolean | undefined }>`\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n  &.disabled {\n    color: ${COLORS.neutral_300};\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ${COLORS.primary_100};\n    }\n  }\n\n  ${(props) =>\n    props.selected\n      ? css`\n          &.disabled label:first-of-type span {\n            background-color: ${COLORS.neutral_300} !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ${COLORS.neutral_200} !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover span {\n            &.semantic {\n              background-color: ${COLORS.correct_500};\n            }\n\n            &:before {\n              background-color: ${COLORS.primary_20};\n            }\n          }\n          label:first-of-type span {\n            background-color: ${COLORS.primary_500};\n\n            &.semantic {\n              background-color: ${COLORS.correct_500};\n            }\n\n            &:before {\n              -webkit-transform: translateX(20px);\n              -ms-transform: translateX(20px);\n              transform: translateX(20px);\n            }\n          }\n        `\n      : css`\n          &.disabled label:first-of-type span {\n            background-color: ${COLORS.neutral_300} !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ${COLORS.neutral_100} !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover label:first-of-type span {\n            &.semantic {\n              background-color: ${COLORS.critical_500};\n            }\n\n            &:before {\n              background-color: ${COLORS.primary_20};\n            }\n          }\n        `}\n  &:not(.disabled):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n`;\n\nexport const ToggleSwitchContainer = styled.label`\n  position: relative;\n  align-items: center;\n  display: inline-flex;\n  height: 28px;\n  width: auto;\n  padding: 10px 6px;\n`;\n\nexport const ToggleSwitch = styled.span`\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 36px;\n  height: 16px;\n  background-color: ${COLORS.neutral_500};\n  border-radius: 100px;\n\n  &.semantic {\n    background-color: ${COLORS.critical_500};\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    height: 12px;\n    width: 12px;\n    left: 2px;\n    top: calc(50% - 6px);\n    background-color: ${COLORS.white};\n    -webkit-transition: background-color 0.1s, transform 0.1s;\n    transition: 0.1s;\n    transition-timing-function: ease-in-out;\n    border-radius: 50%;\n  }\n`;\n"],"file":"TogglerStyles.cjs"}
+{"version":3,"sources":["../../src/Toggles/TogglerStyles.ts"],"names":["StyledSwitch","styled","div","ComponentTextStyle","Regular","COLORS","black","neutral_300","primary_100","props","selected","css","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","focusStyles","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AACA;;;;;;;;AAEO,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,otBASnB,mCAAkBC,+BAAmBC,OAArC,EAA8CC,eAAOC,KAArD,CATmB,EAanB,mCAAkBH,+BAAmBC,OAArC,EAA8CC,eAAOC,KAArD,CAbmB,EAiBnB,mCAAkBH,+BAAmBC,OAArC,EAA8CC,eAAOC,KAArD,CAjBmB,EAoBZD,eAAOE,WApBK,EAiCCF,eAAOG,WAjCR,EAqCrB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,OACIC,qBADJ,05BAG4BN,eAAOE,WAHnC,EAO8BF,eAAOO,WAPrC,EAa8BP,eAAOQ,WAbrC,EAiB8BR,eAAOS,UAjBrC,EAqB4BT,eAAOU,WArBnC,EAwB8BV,eAAOQ,WAxBrC,QAkCIF,qBAlCJ,2kBAoC4BN,eAAOE,WApCnC,EAwC8BF,eAAOW,WAxCrC,EA8C8BX,eAAOY,YA9CrC,EAkD8BZ,eAAOS,UAlDrC,CADA;AAAA,CArCqB,EA6FnBI,mBA7FmB,CAAlB;;;;AAqGA,IAAMC,qBAAqB,GAAGlB,0BAAOmB,KAAV,sNAA3B;;;;AASA,IAAMC,YAAY,GAAGpB,0BAAOqB,IAAV,8rBAWHjB,eAAOkB,WAXJ,EAeDlB,eAAOY,YAfN,EAyBDZ,eAAOmB,KAzBN,CAAlB","sourcesContent":["/**\n * Import custom styles.\n */\nimport {COLORS, focusStyles} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled, { css } from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nexport const StyledSwitch = styled.div<{ selected: boolean | undefined }>`\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n  &.disabled {\n    color: ${COLORS.neutral_300};\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ${COLORS.primary_100};\n    }\n  }\n\n  ${(props) =>\n    props.selected\n      ? css`\n          &.disabled label:first-of-type span {\n            background-color: ${COLORS.neutral_300} !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ${COLORS.neutral_200} !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover span {\n            &.semantic {\n              background-color: ${COLORS.correct_500};\n            }\n\n            &:before {\n              background-color: ${COLORS.primary_20};\n            }\n          }\n          label:first-of-type span {\n            background-color: ${COLORS.primary_500};\n\n            &.semantic {\n              background-color: ${COLORS.correct_500};\n            }\n\n            &:before {\n              -webkit-transform: translateX(20px);\n              -ms-transform: translateX(20px);\n              transform: translateX(20px);\n            }\n          }\n        `\n      : css`\n          &.disabled label:first-of-type span {\n            background-color: ${COLORS.neutral_300} !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ${COLORS.neutral_100} !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover label:first-of-type span {\n            &.semantic {\n              background-color: ${COLORS.critical_500};\n            }\n\n            &:before {\n              background-color: ${COLORS.primary_20};\n            }\n          }\n        `}\n  &:not(.disabled).focus-visible {\n    ${focusStyles}\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n`;\n\nexport const ToggleSwitchContainer = styled.label`\n  position: relative;\n  align-items: center;\n  display: inline-flex;\n  height: 28px;\n  width: auto;\n  padding: 10px 6px;\n`;\n\nexport const ToggleSwitch = styled.span`\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 36px;\n  height: 16px;\n  background-color: ${COLORS.neutral_500};\n  border-radius: 100px;\n\n  &.semantic {\n    background-color: ${COLORS.critical_500};\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    height: 12px;\n    width: 12px;\n    left: 2px;\n    top: calc(50% - 6px);\n    background-color: ${COLORS.white};\n    -webkit-transition: background-color 0.1s, transform 0.1s;\n    transition: 0.1s;\n    transition-timing-function: ease-in-out;\n    border-radius: 50%;\n  }\n`;\n"],"file":"TogglerStyles.cjs"}

package/dist/Toggles/TogglerStyles.js

@@ -12,7 +12,7 @@ import { COLORS, focusStyles } from '../styles';
 
 import styled, { css } from 'styled-components';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
-export var StyledSwitch = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ", "\n  }\n\n  &.medium {\n    ", "\n  }\n\n  &.large {\n    ", "\n  }\n  &.disabled {\n    color: ", ";\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  ", "\n  &:not(.disabled):focus {\n    ", "\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentLStyling(ComponentTextStyle.Regular, COLORS.black), COLORS.neutral_300, COLORS.primary_100, function (props) {
+export var StyledSwitch = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ", "\n  }\n\n  &.medium {\n    ", "\n  }\n\n  &.large {\n    ", "\n  }\n  &.disabled {\n    color: ", ";\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  ", "\n  &:not(.disabled).focus-visible {\n    ", "\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentLStyling(ComponentTextStyle.Regular, COLORS.black), COLORS.neutral_300, COLORS.primary_100, function (props) {
   return props.selected ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          &.disabled label:first-of-type span {\n            background-color: ", " !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ", " !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover span {\n            &.semantic {\n              background-color: ", ";\n            }\n\n            &:before {\n              background-color: ", ";\n            }\n          }\n          label:first-of-type span {\n            background-color: ", ";\n\n            &.semantic {\n              background-color: ", ";\n            }\n\n            &:before {\n              -webkit-transform: translateX(20px);\n              -ms-transform: translateX(20px);\n              transform: translateX(20px);\n            }\n          }\n        "])), COLORS.neutral_300, COLORS.neutral_200, COLORS.correct_500, COLORS.primary_20, COLORS.primary_500, COLORS.correct_500) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          &.disabled label:first-of-type span {\n            background-color: ", " !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ", " !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover label:first-of-type span {\n            &.semantic {\n              background-color: ", ";\n            }\n\n            &:before {\n              background-color: ", ";\n            }\n          }\n        "])), COLORS.neutral_300, COLORS.neutral_100, COLORS.critical_500, COLORS.primary_20);
 }, focusStyles);
 export var ToggleSwitchContainer = styled.label(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  display: inline-flex;\n  height: 28px;\n  width: auto;\n  padding: 10px 6px;\n"])));

package/dist/Toggles/TogglerStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Toggles/TogglerStyles.ts"],"names":["COLORS","focusStyles","styled","css","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","StyledSwitch","div","Regular","black","neutral_300","primary_100","props","selected","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"mappings":";;;;AAAA;AACA;AACA;AACA,SAAQA,MAAR,EAAgBC,WAAhB,QAAkC,WAAlC;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,iBAAT,EAA4BC,iBAA5B,EAA+CC,iBAA/C,EAAkEC,kBAAlE,QAA4F,sBAA5F;AAEA,OAAO,IAAMC,YAAY,GAAGN,MAAM,CAACO,GAAV,8rBASnBH,iBAAiB,CAACC,kBAAkB,CAACG,OAApB,EAA6BV,MAAM,CAACW,KAApC,CATE,EAanBN,iBAAiB,CAACE,kBAAkB,CAACG,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAbE,EAiBnBP,iBAAiB,CAACG,kBAAkB,CAACG,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAjBE,EAoBZX,MAAM,CAACY,WApBK,EAiCCZ,MAAM,CAACa,WAjCR,EAqCrB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,GACIZ,GADJ,24BAG4BH,MAAM,CAACY,WAHnC,EAO8BZ,MAAM,CAACgB,WAPrC,EAa8BhB,MAAM,CAACiB,WAbrC,EAiB8BjB,MAAM,CAACkB,UAjBrC,EAqB4BlB,MAAM,CAACmB,WArBnC,EAwB8BnB,MAAM,CAACiB,WAxBrC,IAkCId,GAlCJ,4jBAoC4BH,MAAM,CAACY,WApCnC,EAwC8BZ,MAAM,CAACoB,WAxCrC,EA8C8BpB,MAAM,CAACqB,YA9CrC,EAkD8BrB,MAAM,CAACkB,UAlDrC,CADA;AAAA,CArCqB,EA6FnBjB,WA7FmB,CAAlB;AAqGP,OAAO,IAAMqB,qBAAqB,GAAGpB,MAAM,CAACqB,KAAV,wMAA3B;AASP,OAAO,IAAMC,YAAY,GAAGtB,MAAM,CAACuB,IAAV,grBAWHzB,MAAM,CAAC0B,WAXJ,EAeD1B,MAAM,CAACqB,YAfN,EAyBDrB,MAAM,CAAC2B,KAzBN,CAAlB","sourcesContent":["/**\n * Import custom styles.\n */\nimport {COLORS, focusStyles} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled, { css } from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nexport const StyledSwitch = styled.div<{ selected: boolean | undefined }>`\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n  &.disabled {\n    color: ${COLORS.neutral_300};\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ${COLORS.primary_100};\n    }\n  }\n\n  ${(props) =>\n    props.selected\n      ? css`\n          &.disabled label:first-of-type span {\n            background-color: ${COLORS.neutral_300} !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ${COLORS.neutral_200} !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover span {\n            &.semantic {\n              background-color: ${COLORS.correct_500};\n            }\n\n            &:before {\n              background-color: ${COLORS.primary_20};\n            }\n          }\n          label:first-of-type span {\n            background-color: ${COLORS.primary_500};\n\n            &.semantic {\n              background-color: ${COLORS.correct_500};\n            }\n\n            &:before {\n              -webkit-transform: translateX(20px);\n              -ms-transform: translateX(20px);\n              transform: translateX(20px);\n            }\n          }\n        `\n      : css`\n          &.disabled label:first-of-type span {\n            background-color: ${COLORS.neutral_300} !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ${COLORS.neutral_100} !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover label:first-of-type span {\n            &.semantic {\n              background-color: ${COLORS.critical_500};\n            }\n\n            &:before {\n              background-color: ${COLORS.primary_20};\n            }\n          }\n        `}\n  &:not(.disabled):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n`;\n\nexport const ToggleSwitchContainer = styled.label`\n  position: relative;\n  align-items: center;\n  display: inline-flex;\n  height: 28px;\n  width: auto;\n  padding: 10px 6px;\n`;\n\nexport const ToggleSwitch = styled.span`\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 36px;\n  height: 16px;\n  background-color: ${COLORS.neutral_500};\n  border-radius: 100px;\n\n  &.semantic {\n    background-color: ${COLORS.critical_500};\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    height: 12px;\n    width: 12px;\n    left: 2px;\n    top: calc(50% - 6px);\n    background-color: ${COLORS.white};\n    -webkit-transition: background-color 0.1s, transform 0.1s;\n    transition: 0.1s;\n    transition-timing-function: ease-in-out;\n    border-radius: 50%;\n  }\n`;\n"],"file":"TogglerStyles.js"}
+{"version":3,"sources":["../../src/Toggles/TogglerStyles.ts"],"names":["COLORS","focusStyles","styled","css","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","StyledSwitch","div","Regular","black","neutral_300","primary_100","props","selected","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"mappings":";;;;AAAA;AACA;AACA;AACA,SAAQA,MAAR,EAAgBC,WAAhB,QAAkC,WAAlC;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,iBAAT,EAA4BC,iBAA5B,EAA+CC,iBAA/C,EAAkEC,kBAAlE,QAA4F,sBAA5F;AAEA,OAAO,IAAMC,YAAY,GAAGN,MAAM,CAACO,GAAV,ssBASnBH,iBAAiB,CAACC,kBAAkB,CAACG,OAApB,EAA6BV,MAAM,CAACW,KAApC,CATE,EAanBN,iBAAiB,CAACE,kBAAkB,CAACG,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAbE,EAiBnBP,iBAAiB,CAACG,kBAAkB,CAACG,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAjBE,EAoBZX,MAAM,CAACY,WApBK,EAiCCZ,MAAM,CAACa,WAjCR,EAqCrB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,GACIZ,GADJ,24BAG4BH,MAAM,CAACY,WAHnC,EAO8BZ,MAAM,CAACgB,WAPrC,EAa8BhB,MAAM,CAACiB,WAbrC,EAiB8BjB,MAAM,CAACkB,UAjBrC,EAqB4BlB,MAAM,CAACmB,WArBnC,EAwB8BnB,MAAM,CAACiB,WAxBrC,IAkCId,GAlCJ,4jBAoC4BH,MAAM,CAACY,WApCnC,EAwC8BZ,MAAM,CAACoB,WAxCrC,EA8C8BpB,MAAM,CAACqB,YA9CrC,EAkD8BrB,MAAM,CAACkB,UAlDrC,CADA;AAAA,CArCqB,EA6FnBjB,WA7FmB,CAAlB;AAqGP,OAAO,IAAMqB,qBAAqB,GAAGpB,MAAM,CAACqB,KAAV,wMAA3B;AASP,OAAO,IAAMC,YAAY,GAAGtB,MAAM,CAACuB,IAAV,grBAWHzB,MAAM,CAAC0B,WAXJ,EAeD1B,MAAM,CAACqB,YAfN,EAyBDrB,MAAM,CAAC2B,KAzBN,CAAlB","sourcesContent":["/**\n * Import custom styles.\n */\nimport {COLORS, focusStyles} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled, { css } from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nexport const StyledSwitch = styled.div<{ selected: boolean | undefined }>`\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n  &.disabled {\n    color: ${COLORS.neutral_300};\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ${COLORS.primary_100};\n    }\n  }\n\n  ${(props) =>\n    props.selected\n      ? css`\n          &.disabled label:first-of-type span {\n            background-color: ${COLORS.neutral_300} !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ${COLORS.neutral_200} !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover span {\n            &.semantic {\n              background-color: ${COLORS.correct_500};\n            }\n\n            &:before {\n              background-color: ${COLORS.primary_20};\n            }\n          }\n          label:first-of-type span {\n            background-color: ${COLORS.primary_500};\n\n            &.semantic {\n              background-color: ${COLORS.correct_500};\n            }\n\n            &:before {\n              -webkit-transform: translateX(20px);\n              -ms-transform: translateX(20px);\n              transform: translateX(20px);\n            }\n          }\n        `\n      : css`\n          &.disabled label:first-of-type span {\n            background-color: ${COLORS.neutral_300} !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ${COLORS.neutral_100} !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover label:first-of-type span {\n            &.semantic {\n              background-color: ${COLORS.critical_500};\n            }\n\n            &:before {\n              background-color: ${COLORS.primary_20};\n            }\n          }\n        `}\n  &:not(.disabled).focus-visible {\n    ${focusStyles}\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n`;\n\nexport const ToggleSwitchContainer = styled.label`\n  position: relative;\n  align-items: center;\n  display: inline-flex;\n  height: 28px;\n  width: auto;\n  padding: 10px 6px;\n`;\n\nexport const ToggleSwitch = styled.span`\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 36px;\n  height: 16px;\n  background-color: ${COLORS.neutral_500};\n  border-radius: 100px;\n\n  &.semantic {\n    background-color: ${COLORS.critical_500};\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    height: 12px;\n    width: 12px;\n    left: 2px;\n    top: calc(50% - 6px);\n    background-color: ${COLORS.white};\n    -webkit-transition: background-color 0.1s, transform 0.1s;\n    transition: 0.1s;\n    transition-timing-function: ease-in-out;\n    border-radius: 50%;\n  }\n`;\n"],"file":"TogglerStyles.js"}

package/dist/Toggles/index.cjs

@@ -5,6 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ToggleButton", {
+  enumerable: true,
+  get: function get() {
+    return _ToggleButton.default;
+  }
+});
 Object.defineProperty(exports, "ToggleSwitch", {
   enumerable: true,
   get: function get() {
@@ -13,4 +19,6 @@ Object.defineProperty(exports, "ToggleSwitch", {
 });
 
 var _ToggleSwitch = _interopRequireDefault(require("./ToggleSwitch"));
+
+var _ToggleButton = _interopRequireDefault(require("./ToggleButton"));
 //# sourceMappingURL=index.cjs.map

package/dist/Toggles/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Toggles/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["import ToggleSwitch from './ToggleSwitch';\n\nexport { ToggleSwitch };\n"],"file":"index.cjs"}
+{"version":3,"sources":["../../src/Toggles/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["import ToggleSwitch from './ToggleSwitch';\nimport ToggleButton from './ToggleButton';\n\nexport {ToggleSwitch, ToggleButton};\n"],"file":"index.cjs"}

package/dist/Toggles/index.d.ts

@@ -1,2 +1,3 @@
 import ToggleSwitch from './ToggleSwitch';
-export { ToggleSwitch };
+import ToggleButton from './ToggleButton';
+export { ToggleSwitch, ToggleButton };

package/dist/Toggles/index.js

@@ -1,3 +1,4 @@
 import ToggleSwitch from './ToggleSwitch';
-export { ToggleSwitch };
+import ToggleButton from './ToggleButton';
+export { ToggleSwitch, ToggleButton };
 //# sourceMappingURL=index.js.map

package/dist/Toggles/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Toggles/index.ts"],"names":["ToggleSwitch"],"mappings":"AAAA,OAAOA,YAAP,MAAyB,gBAAzB;AAEA,SAASA,YAAT","sourcesContent":["import ToggleSwitch from './ToggleSwitch';\n\nexport { ToggleSwitch };\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/Toggles/index.ts"],"names":["ToggleSwitch","ToggleButton"],"mappings":"AAAA,OAAOA,YAAP,MAAyB,gBAAzB;AACA,OAAOC,YAAP,MAAyB,gBAAzB;AAEA,SAAQD,YAAR,EAAsBC,YAAtB","sourcesContent":["import ToggleSwitch from './ToggleSwitch';\nimport ToggleButton from './ToggleButton';\n\nexport {ToggleSwitch, ToggleButton};\n"],"file":"index.js"}

package/dist/common/{HoverWithin.cjs → ActionWithin.cjs}

@@ -30,9 +30,11 @@ var useActionWithin = function useActionWithin(ref, children) {
 
     try {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var _child$current3, _child$current4;
+
         var child = _step.value;
-        child.current.addEventListener('mouseenter', handleMouseEnter);
-        child.current.addEventListener('mouseleave', handleMouseLeave);
+        (_child$current3 = child.current) === null || _child$current3 === void 0 ? void 0 : _child$current3.addEventListener('mouseenter', handleMouseEnter);
+        (_child$current4 = child.current) === null || _child$current4 === void 0 ? void 0 : _child$current4.addEventListener('mouseleave', handleMouseLeave);
       }
     } catch (err) {
       _iterator.e(err);
@@ -46,9 +48,11 @@ var useActionWithin = function useActionWithin(ref, children) {
 
       try {
         for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var _child$current, _child$current2;
+
           var child = _step2.value;
-          child.current.removeEventListener('mouseenter', handleMouseEnter);
-          child.current.removeEventListener('mouseleave', handleMouseLeave);
+          (_child$current = child.current) === null || _child$current === void 0 ? void 0 : _child$current.removeEventListener('mouseenter', handleMouseEnter);
+          (_child$current2 = child.current) === null || _child$current2 === void 0 ? void 0 : _child$current2.removeEventListener('mouseleave', handleMouseLeave);
         }
       } catch (err) {
         _iterator2.e(err);
@@ -60,4 +64,4 @@ var useActionWithin = function useActionWithin(ref, children) {
 };
 
 exports.useActionWithin = useActionWithin;
-//# sourceMappingURL=HoverWithin.cjs.map
+//# sourceMappingURL=ActionWithin.cjs.map

package/dist/common/ActionWithin.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/common/ActionWithin.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;;AAAA,YAAnBU,KAAmB;AAC1B,2BAAAA,KAAK,CAACP,OAAN,oEAAeQ,gBAAf,CAAgC,YAAhC,EAA8CV,gBAA9C;AACA,2BAAAS,KAAK,CAACP,OAAN,oEAAeQ,gBAAf,CAAgC,YAAhC,EAA8CL,gBAA9C;AACD;AAJmB;AAAA;AAAA;AAAA;AAAA;;AAMpB,WAAO,YAAM;AAAA,kDACON,QADP;AAAA;;AAAA;AACX,+DAA4B;AAAA;;AAAA,cAAnBU,KAAmB;AAC1B,4BAAAA,KAAK,CAACP,OAAN,kEAAeS,mBAAf,CAAmC,YAAnC,EAAiDX,gBAAjD;AACA,6BAAAS,KAAK,CAACP,OAAN,oEAAeS,mBAAf,CAAmC,YAAnC,EAAiDN,gBAAjD;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":"ActionWithin.cjs"}

package/dist/common/{HoverWithin.js → ActionWithin.js}

@@ -20,9 +20,11 @@ export var useActionWithin = function useActionWithin(ref, children) {
 
     try {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var _child$current3, _child$current4;
+
         var child = _step.value;
-        child.current.addEventListener('mouseenter', handleMouseEnter);
-        child.current.addEventListener('mouseleave', handleMouseLeave);
+        (_child$current3 = child.current) === null || _child$current3 === void 0 ? void 0 : _child$current3.addEventListener('mouseenter', handleMouseEnter);
+        (_child$current4 = child.current) === null || _child$current4 === void 0 ? void 0 : _child$current4.addEventListener('mouseleave', handleMouseLeave);
       }
     } catch (err) {
       _iterator.e(err);
@@ -36,9 +38,11 @@ export var useActionWithin = function useActionWithin(ref, children) {
 
       try {
         for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var _child$current, _child$current2;
+
           var child = _step2.value;
-          child.current.removeEventListener('mouseenter', handleMouseEnter);
-          child.current.removeEventListener('mouseleave', handleMouseLeave);
+          (_child$current = child.current) === null || _child$current === void 0 ? void 0 : _child$current.removeEventListener('mouseenter', handleMouseEnter);
+          (_child$current2 = child.current) === null || _child$current2 === void 0 ? void 0 : _child$current2.removeEventListener('mouseleave', handleMouseLeave);
         }
       } catch (err) {
         _iterator2.e(err);
@@ -48,4 +52,4 @@ export var useActionWithin = function useActionWithin(ref, children) {
     };
   }, [children]);
 };
-//# sourceMappingURL=HoverWithin.js.map
+//# sourceMappingURL=ActionWithin.js.map

package/dist/common/ActionWithin.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/common/ActionWithin.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;;AAAA,YAAnBS,KAAmB;AAC1B,2BAAAA,KAAK,CAACN,OAAN,oEAAeO,gBAAf,CAAgC,YAAhC,EAA8CT,gBAA9C;AACA,2BAAAQ,KAAK,CAACN,OAAN,oEAAeO,gBAAf,CAAgC,YAAhC,EAA8CJ,gBAA9C;AACD;AAJmB;AAAA;AAAA;AAAA;AAAA;;AAMpB,WAAO,YAAM;AAAA,kDACON,QADP;AAAA;;AAAA;AACX,+DAA4B;AAAA;;AAAA,cAAnBS,KAAmB;AAC1B,4BAAAA,KAAK,CAACN,OAAN,kEAAeQ,mBAAf,CAAmC,YAAnC,EAAiDV,gBAAjD;AACA,6BAAAQ,KAAK,CAACN,OAAN,oEAAeQ,mBAAf,CAAmC,YAAnC,EAAiDL,gBAAjD;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":"ActionWithin.js"}

package/dist/common/ClickOutside.cjs

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useClickOutsideRef = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var useClickOutsideRef = function useClickOutsideRef(callback) {
+  var relatedRefs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var ref = arguments.length > 2 ? arguments[2] : undefined;
+  var elementRef = ref !== null && ref !== void 0 ? ref : _react.default.useRef(null);
+
+  _react.default.useEffect(function () {
+    if (!elementRef.current) return;
+    var container = elementRef.current;
+
+    var handleClickOutside = function handleClickOutside(event) {
+      if (container && !container.contains(event.target) && !relatedRefs.some(function (ref) {
+        return ref.current && ref.current.contains(event.target);
+      })) {
+        callback();
+      }
+    };
+
+    document.addEventListener('click', handleClickOutside);
+    return function () {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [elementRef]);
+
+  return elementRef;
+};
+
+exports.useClickOutsideRef = useClickOutsideRef;
+//# sourceMappingURL=ClickOutside.cjs.map

package/dist/common/ClickOutside.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/common/ClickOutside.ts"],"names":["useClickOutsideRef","callback","relatedRefs","ref","elementRef","React","useRef","useEffect","current","container","handleClickOutside","event","contains","target","some","document","addEventListener","removeEventListener"],"mappings":";;;;;;;;;AAAA;;AAEO,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,QAAD,EAA8D;AAAA,MAAvCC,WAAuC,uEAAlB,EAAkB;AAAA,MAAdC,GAAc;AAC9F,MAAMC,UAAU,GAAGD,GAAH,aAAGA,GAAH,cAAGA,GAAH,GAAUE,eAAMC,MAAN,CAAkB,IAAlB,CAA1B;;AAEAD,iBAAME,SAAN,CAAgB,YAAM;AACpB,QAAI,CAACH,UAAU,CAACI,OAAhB,EAAyB;AACzB,QAAIC,SAAS,GAAGL,UAAU,CAACI,OAA3B;;AAEA,QAAME,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAgB;AACzC,UAAIF,SAAS,IAAI,CAACA,SAAS,CAACG,QAAV,CAAmBD,KAAK,CAACE,MAAzB,CAAd,IAAkD,CAACX,WAAW,CAACY,IAAZ,CAAiB,UAAAX,GAAG;AAAA,eAAIA,GAAG,CAACK,OAAJ,IAAeL,GAAG,CAACK,OAAJ,CAAYI,QAAZ,CAAqBD,KAAK,CAACE,MAA3B,CAAnB;AAAA,OAApB,CAAvD,EAAmI;AACjIZ,QAAAA,QAAQ;AACT;AACF,KAJD;;AAMAc,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,OAA1B,EAAmCN,kBAAnC;AACA,WAAO,YAAM;AACXK,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,OAA7B,EAAsCP,kBAAtC;AACD,KAFD;AAID,GAfD,EAeG,CAACN,UAAD,CAfH;;AAiBA,SAAOA,UAAP;AACD,CArBM","sourcesContent":["import React from 'react';\n\nexport const useClickOutsideRef = (callback: () => void, relatedRefs: any[] = [], ref?: any) => {\n  const elementRef = ref ?? React.useRef<any>(null);\n\n  React.useEffect(() => {\n    if (!elementRef.current) return;\n    let container = elementRef.current;\n\n    const handleClickOutside = (event: any) => {\n      if (container && !container.contains(event.target) && !relatedRefs.some(ref => ref.current && ref.current.contains(event.target))) {\n        callback();\n      }\n    };\n\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n\n  }, [elementRef]);\n\n  return elementRef;\n};\n"],"file":"ClickOutside.cjs"}

package/dist/common/ClickOutside.d.ts

@@ -0,0 +1 @@
+export declare const useClickOutsideRef: (callback: () => void, relatedRefs?: any[], ref?: any) => any;

package/dist/common/ClickOutside.js

@@ -0,0 +1,25 @@
+import React from 'react';
+export var useClickOutsideRef = function useClickOutsideRef(callback) {
+  var relatedRefs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var ref = arguments.length > 2 ? arguments[2] : undefined;
+  var elementRef = ref !== null && ref !== void 0 ? ref : React.useRef(null);
+  React.useEffect(function () {
+    if (!elementRef.current) return;
+    var container = elementRef.current;
+
+    var handleClickOutside = function handleClickOutside(event) {
+      if (container && !container.contains(event.target) && !relatedRefs.some(function (ref) {
+        return ref.current && ref.current.contains(event.target);
+      })) {
+        callback();
+      }
+    };
+
+    document.addEventListener('click', handleClickOutside);
+    return function () {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [elementRef]);
+  return elementRef;
+};
+//# sourceMappingURL=ClickOutside.js.map

package/dist/common/ClickOutside.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/common/ClickOutside.ts"],"names":["React","useClickOutsideRef","callback","relatedRefs","ref","elementRef","useRef","useEffect","current","container","handleClickOutside","event","contains","target","some","document","addEventListener","removeEventListener"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,QAAD,EAA8D;AAAA,MAAvCC,WAAuC,uEAAlB,EAAkB;AAAA,MAAdC,GAAc;AAC9F,MAAMC,UAAU,GAAGD,GAAH,aAAGA,GAAH,cAAGA,GAAH,GAAUJ,KAAK,CAACM,MAAN,CAAkB,IAAlB,CAA1B;AAEAN,EAAAA,KAAK,CAACO,SAAN,CAAgB,YAAM;AACpB,QAAI,CAACF,UAAU,CAACG,OAAhB,EAAyB;AACzB,QAAIC,SAAS,GAAGJ,UAAU,CAACG,OAA3B;;AAEA,QAAME,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAgB;AACzC,UAAIF,SAAS,IAAI,CAACA,SAAS,CAACG,QAAV,CAAmBD,KAAK,CAACE,MAAzB,CAAd,IAAkD,CAACV,WAAW,CAACW,IAAZ,CAAiB,UAAAV,GAAG;AAAA,eAAIA,GAAG,CAACI,OAAJ,IAAeJ,GAAG,CAACI,OAAJ,CAAYI,QAAZ,CAAqBD,KAAK,CAACE,MAA3B,CAAnB;AAAA,OAApB,CAAvD,EAAmI;AACjIX,QAAAA,QAAQ;AACT;AACF,KAJD;;AAMAa,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,OAA1B,EAAmCN,kBAAnC;AACA,WAAO,YAAM;AACXK,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,OAA7B,EAAsCP,kBAAtC;AACD,KAFD;AAID,GAfD,EAeG,CAACL,UAAD,CAfH;AAiBA,SAAOA,UAAP;AACD,CArBM","sourcesContent":["import React from 'react';\n\nexport const useClickOutsideRef = (callback: () => void, relatedRefs: any[] = [], ref?: any) => {\n  const elementRef = ref ?? React.useRef<any>(null);\n\n  React.useEffect(() => {\n    if (!elementRef.current) return;\n    let container = elementRef.current;\n\n    const handleClickOutside = (event: any) => {\n      if (container && !container.contains(event.target) && !relatedRefs.some(ref => ref.current && ref.current.contains(event.target))) {\n        callback();\n      }\n    };\n\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n\n  }, [elementRef]);\n\n  return elementRef;\n};\n"],"file":"ClickOutside.js"}

package/dist/common/FocusOutside.cjs

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFocusOutsideRef = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var useFocusOutsideRef = function useFocusOutsideRef(callback) {
+  var relatedRefs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var ref = arguments.length > 2 ? arguments[2] : undefined;
+  var elementRef = ref !== null && ref !== void 0 ? ref : _react.default.useRef(null);
+
+  _react.default.useEffect(function () {
+    if (!elementRef.current) return;
+    var container = elementRef.current;
+
+    var handleFocusOutside = function handleFocusOutside(event) {
+      if (container && event.target && !container.contains(event.target) && !relatedRefs.some(function (ref) {
+        return ref.current && ref.current.contains(event.target);
+      })) {
+        callback();
+      }
+    };
+
+    document.addEventListener('focusin', handleFocusOutside);
+    return function () {
+      document.removeEventListener('focusin', handleFocusOutside);
+    };
+  }, [elementRef]);
+
+  return elementRef;
+};
+
+exports.useFocusOutsideRef = useFocusOutsideRef;
+//# sourceMappingURL=FocusOutside.cjs.map

package/dist/common/FocusOutside.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/common/FocusOutside.ts"],"names":["useFocusOutsideRef","callback","relatedRefs","ref","elementRef","React","useRef","useEffect","current","container","handleFocusOutside","event","target","contains","some","document","addEventListener","removeEventListener"],"mappings":";;;;;;;;;AAAA;;AAEO,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,QAAD,EAA8D;AAAA,MAAvCC,WAAuC,uEAAlB,EAAkB;AAAA,MAAdC,GAAc;AAC9F,MAAMC,UAAU,GAAGD,GAAH,aAAGA,GAAH,cAAGA,GAAH,GAAUE,eAAMC,MAAN,CAAkB,IAAlB,CAA1B;;AAEAD,iBAAME,SAAN,CAAgB,YAAM;AACpB,QAAI,CAACH,UAAU,CAACI,OAAhB,EAAyB;AACzB,QAAIC,SAAS,GAAGL,UAAU,CAACI,OAA3B;;AAEA,QAAME,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAgB;AACzC,UAAIF,SAAS,IAAIE,KAAK,CAACC,MAAnB,IAA6B,CAACH,SAAS,CAACI,QAAV,CAAmBF,KAAK,CAACC,MAAzB,CAA9B,IAAkE,CAACV,WAAW,CAACY,IAAZ,CAAiB,UAAAX,GAAG;AAAA,eAAIA,GAAG,CAACK,OAAJ,IAAeL,GAAG,CAACK,OAAJ,CAAYK,QAAZ,CAAqBF,KAAK,CAACC,MAA3B,CAAnB;AAAA,OAApB,CAAvE,EAAmJ;AACjJX,QAAAA,QAAQ;AACT;AACF,KAJD;;AAMAc,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCN,kBAArC;AACA,WAAO,YAAM;AACXK,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCP,kBAAxC;AACD,KAFD;AAID,GAfD,EAeG,CAACN,UAAD,CAfH;;AAiBA,SAAOA,UAAP;AACD,CArBM","sourcesContent":["import React from 'react';\n\nexport const useFocusOutsideRef = (callback: () => void, relatedRefs: any[] = [], ref?: any) => {\n  const elementRef = ref ?? React.useRef<any>(null);\n\n  React.useEffect(() => {\n    if (!elementRef.current) return;\n    let container = elementRef.current;\n\n    const handleFocusOutside = (event: any) => {\n      if (container && event.target && !container.contains(event.target) && !relatedRefs.some(ref => ref.current && ref.current.contains(event.target))) {\n        callback();\n      }\n    };\n\n    document.addEventListener('focusin', handleFocusOutside);\n    return () => {\n      document.removeEventListener('focusin', handleFocusOutside);\n    };\n\n  }, [elementRef]);\n\n  return elementRef;\n};\n\n"],"file":"FocusOutside.cjs"}

package/dist/common/FocusOutside.d.ts

@@ -0,0 +1 @@
+export declare const useFocusOutsideRef: (callback: () => void, relatedRefs?: any[], ref?: any) => any;

package/dist/common/FocusOutside.js

@@ -0,0 +1,25 @@
+import React from 'react';
+export var useFocusOutsideRef = function useFocusOutsideRef(callback) {
+  var relatedRefs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var ref = arguments.length > 2 ? arguments[2] : undefined;
+  var elementRef = ref !== null && ref !== void 0 ? ref : React.useRef(null);
+  React.useEffect(function () {
+    if (!elementRef.current) return;
+    var container = elementRef.current;
+
+    var handleFocusOutside = function handleFocusOutside(event) {
+      if (container && event.target && !container.contains(event.target) && !relatedRefs.some(function (ref) {
+        return ref.current && ref.current.contains(event.target);
+      })) {
+        callback();
+      }
+    };
+
+    document.addEventListener('focusin', handleFocusOutside);
+    return function () {
+      document.removeEventListener('focusin', handleFocusOutside);
+    };
+  }, [elementRef]);
+  return elementRef;
+};
+//# sourceMappingURL=FocusOutside.js.map

package/dist/common/FocusOutside.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/common/FocusOutside.ts"],"names":["React","useFocusOutsideRef","callback","relatedRefs","ref","elementRef","useRef","useEffect","current","container","handleFocusOutside","event","target","contains","some","document","addEventListener","removeEventListener"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,QAAD,EAA8D;AAAA,MAAvCC,WAAuC,uEAAlB,EAAkB;AAAA,MAAdC,GAAc;AAC9F,MAAMC,UAAU,GAAGD,GAAH,aAAGA,GAAH,cAAGA,GAAH,GAAUJ,KAAK,CAACM,MAAN,CAAkB,IAAlB,CAA1B;AAEAN,EAAAA,KAAK,CAACO,SAAN,CAAgB,YAAM;AACpB,QAAI,CAACF,UAAU,CAACG,OAAhB,EAAyB;AACzB,QAAIC,SAAS,GAAGJ,UAAU,CAACG,OAA3B;;AAEA,QAAME,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAgB;AACzC,UAAIF,SAAS,IAAIE,KAAK,CAACC,MAAnB,IAA6B,CAACH,SAAS,CAACI,QAAV,CAAmBF,KAAK,CAACC,MAAzB,CAA9B,IAAkE,CAACT,WAAW,CAACW,IAAZ,CAAiB,UAAAV,GAAG;AAAA,eAAIA,GAAG,CAACI,OAAJ,IAAeJ,GAAG,CAACI,OAAJ,CAAYK,QAAZ,CAAqBF,KAAK,CAACC,MAA3B,CAAnB;AAAA,OAApB,CAAvE,EAAmJ;AACjJV,QAAAA,QAAQ;AACT;AACF,KAJD;;AAMAa,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCN,kBAArC;AACA,WAAO,YAAM;AACXK,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCP,kBAAxC;AACD,KAFD;AAID,GAfD,EAeG,CAACL,UAAD,CAfH;AAiBA,SAAOA,UAAP;AACD,CArBM","sourcesContent":["import React from 'react';\n\nexport const useFocusOutsideRef = (callback: () => void, relatedRefs: any[] = [], ref?: any) => {\n  const elementRef = ref ?? React.useRef<any>(null);\n\n  React.useEffect(() => {\n    if (!elementRef.current) return;\n    let container = elementRef.current;\n\n    const handleFocusOutside = (event: any) => {\n      if (container && event.target && !container.contains(event.target) && !relatedRefs.some(ref => ref.current && ref.current.contains(event.target))) {\n        callback();\n      }\n    };\n\n    document.addEventListener('focusin', handleFocusOutside);\n    return () => {\n      document.removeEventListener('focusin', handleFocusOutside);\n    };\n\n  }, [elementRef]);\n\n  return elementRef;\n};\n\n"],"file":"FocusOutside.js"}