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

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"}

package/dist/common/FocusVisible.cjs

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useFocusVisibleRef = void 0;
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _react = _interopRequireDefault(require("react"));
 
 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; } } }; }
@@ -22,40 +24,63 @@ var useFocusVisibleRef = function useFocusVisibleRef() {
 
   var suppress = _react.default.useRef(false);
 
-  var handleMouseDown = function handleMouseDown() {
+  var _React$useState = _react.default.useState(false),
+      _React$useState2 = (0, _slicedToArray2.default)(_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.default.useLayoutEffect(function () {
+    if (visible) {
+      addFocusVisibleClasses();
+    } else {
+      removeFocusVisibleClasses();
+    }
+  }, [visible, elementRef, focusWithinList]);
+
   _react.default.useEffect(function () {
     if (!elementRef.current) return;
     var instance = elementRef.current;

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;