@laerdal/life-react-components 5.1.0 → 6.0.0-dev.1.full

package/dist/Toggles/TogglerStyles.cjs

@@ -5,18 +5,155 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToggleSwitchContainer = exports.ToggleSwitch = exports.StyledSwitch = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styles = require("../styles");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _typography = require("../styles/typography");
-var _templateObject, _templateObject2, _templateObject3;
 /**
  * Import custom styles.
  */
+
 /**
  * Import third-party libraries.
  */
-const StyledSwitch = exports.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  &.disabled[aria-pressed='true'] 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\n  &[aria-pressed='true']:hover span {\n    &.semantic {\n      background-color: ", ";\n    }\n\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  &[aria-pressed='true'] 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\n  &.disabled[aria-pressed='false'] 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\n  &[aria-pressed='false']:hover label:first-of-type span {\n    &.semantic {\n      background-color: ", ";\n    }\n\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  &:not(.disabled).focus-visible {\n    ", "\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n"])), props => (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme)), props => (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme)), props => (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme)), props => _styles.COLORS.getColor('neutral_300', props.theme), props => _styles.COLORS.getColor('primary_100', props.theme), props => _styles.COLORS.getColor('neutral_300', props.theme), props => _styles.COLORS.getColor('neutral_200', props.theme), props => _styles.COLORS.getColor('correct_500', props.theme), props => _styles.COLORS.getColor('primary_20', props.theme), props => _styles.COLORS.getColor('primary_500', props.theme), props => _styles.COLORS.getColor('correct_500', props.theme), props => _styles.COLORS.getColor('neutral_300', props.theme), props => _styles.COLORS.getColor('neutral_100', props.theme), props => _styles.COLORS.getColor('critical_500', props.theme), props => _styles.COLORS.getColor('primary_20', props.theme), _styles.focusStyles);
-const ToggleSwitchContainer = exports.ToggleSwitchContainer = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  align-items: center;\n  display: inline-flex;\n  height: 28px;\n  width: auto;\n  padding: 10px 6px;\n"])));
-const ToggleSwitch = exports.ToggleSwitch = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  display: flex;\n  align-items: center;\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: ", ";\n  border-radius: 100px;\n\n  &.semantic {\n    background-color: ", ";\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: ", ";\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"])), props => _styles.COLORS.getColor('neutral_500', props.theme), props => _styles.COLORS.getColor('critical_500', props.theme), props => _styles.COLORS.getColor('white', props.theme));
+
+const StyledSwitch = exports.StyledSwitch = _styledComponents.default.div`
+  display: flex;
+  flex-direction: row;
+  width: max-content;
+  min-height: 48px;
+  min-width: 48px;
+  align-items: center;
+  cursor: pointer;
+  &.small {
+    ${props => (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+  }
+
+  &.medium {
+    ${props => (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+  }
+
+  &.large {
+    ${props => (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+  }
+  &.disabled {
+    color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+
+    .label {
+      cursor: not-allowed;
+    }
+  }
+  .label {
+    cursor: inherit;
+    margin-left: 8px;
+  }
+
+  &:not(.disabled):active label:first-of-type span {
+    &:before {
+      background-color: ${props => _styles.COLORS.getColor('primary_100', props.theme)};
+    }
+  }
+
+  &.disabled[aria-pressed='true'] label:first-of-type span {
+    background-color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)} !important;
+    cursor: not-allowed;
+
+    &:before {
+      background-color: ${props => _styles.COLORS.getColor('neutral_200', props.theme)} !important;
+      cursor: not-allowed;
+    }
+  }
+
+  &[aria-pressed='true']:hover span {
+    &.semantic {
+      background-color: ${props => _styles.COLORS.getColor('correct_500', props.theme)};
+    }
+
+    &:before {
+      background-color: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
+    }
+  }
+
+  &[aria-pressed='true'] label:first-of-type span {
+    background-color: ${props => _styles.COLORS.getColor('primary_500', props.theme)};
+
+    &.semantic {
+      background-color: ${props => _styles.COLORS.getColor('correct_500', props.theme)};
+    }
+
+    &:before {
+      -webkit-transform: translateX(20px);
+      -ms-transform: translateX(20px);
+      transform: translateX(20px);
+    }
+  }
+
+  &.disabled[aria-pressed='false'] label:first-of-type span {
+    background-color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)} !important;
+    cursor: not-allowed;
+
+    &:before {
+      background-color: ${props => _styles.COLORS.getColor('neutral_100', props.theme)} !important;
+      cursor: not-allowed;
+    }
+  }
+
+  &[aria-pressed='false']:hover label:first-of-type span {
+    &.semantic {
+      background-color: ${props => _styles.COLORS.getColor('critical_500', props.theme)};
+    }
+
+    &:before {
+      background-color: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
+    }
+  }
+
+  &:not(.disabled).focus-visible {
+    ${_styles.focusStyles}
+  }
+
+  &:not(.disabled) label:first-of-type {
+    cursor: inherit;
+  }
+`;
+const ToggleSwitchContainer = exports.ToggleSwitchContainer = _styledComponents.default.label`
+  position: relative;
+  align-items: center;
+  display: inline-flex;
+  height: 28px;
+  width: auto;
+  padding: 10px 6px;
+`;
+const ToggleSwitch = exports.ToggleSwitch = _styledComponents.default.span`
+  position: relative;
+  display: flex;
+  align-items: center;
+  vertical-align: middle;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 36px;
+  height: 16px;
+  background-color: ${props => _styles.COLORS.getColor('neutral_500', props.theme)};
+  border-radius: 100px;
+
+  &.semantic {
+    background-color: ${props => _styles.COLORS.getColor('critical_500', props.theme)};
+  }
+
+  &:before {
+    position: absolute;
+    content: '';
+    height: 12px;
+    width: 12px;
+    left: 2px;
+    top: calc(50% - 6px);
+    background-color: ${props => _styles.COLORS.getColor('white', props.theme)};
+    -webkit-transition: background-color 0.1s, transform 0.1s;
+    transition: 0.1s;
+    transition-timing-function: ease-in-out;
+    border-radius: 50%;
+  }
+`;
 //# sourceMappingURL=TogglerStyles.cjs.map

package/dist/Toggles/TogglerStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TogglerStyles.cjs","names":["_styles","require","_styledComponents","_interopRequireDefault","_typography","_templateObject","_templateObject2","_templateObject3","StyledSwitch","exports","styled","div","_taggedTemplateLiteral2","default","props","ComponentSStyling","ComponentTextStyle","Regular","COLORS","getColor","theme","ComponentMStyling","ComponentLStyling","focusStyles","ToggleSwitchContainer","label","ToggleSwitch","span"],"sources":["../../src/Toggles/TogglerStyles.ts"],"sourcesContent":["/**\r\n * Import custom styles.\r\n */\r\nimport { COLORS, focusStyles } from '../styles';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { css } from 'styled-components';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nexport const StyledSwitch = styled.div<{ $selected: boolean | undefined }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  width: max-content;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n  align-items: center;\r\n  cursor: pointer;\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  }\r\n\r\n  &.large {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  }\r\n  &.disabled {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n\r\n    .label {\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n  .label {\r\n    cursor: inherit;\r\n    margin-left: 8px;\r\n  }\r\n\r\n  &:not(.disabled):active label:first-of-type span {\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    cursor: not-allowed;\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('neutral_200', props.theme)} !important;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true']:hover span {\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('correct_500', props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('correct_500', props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      -webkit-transform: translateX(20px);\r\n      -ms-transform: translateX(20px);\r\n      transform: translateX(20px);\r\n    }\r\n  }\r\n\r\n  &.disabled[aria-pressed='false'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    cursor: not-allowed;\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)} !important;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='false']:hover label:first-of-type span {\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:not(.disabled).focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled) label:first-of-type {\r\n    cursor: inherit;\r\n  }\r\n`;\r\n\r\nexport const ToggleSwitchContainer = styled.label`\r\n  position: relative;\r\n  align-items: center;\r\n  display: inline-flex;\r\n  height: 28px;\r\n  width: auto;\r\n  padding: 10px 6px;\r\n`;\r\n\r\nexport const ToggleSwitch = styled.span`\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  vertical-align: middle;\r\n  cursor: pointer;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  width: 36px;\r\n  height: 16px;\r\n  background-color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n  border-radius: 100px;\r\n\r\n  &.semantic {\r\n    background-color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n  }\r\n\r\n  &:before {\r\n    position: absolute;\r\n    content: '';\r\n    height: 12px;\r\n    width: 12px;\r\n    left: 2px;\r\n    top: calc(50% - 6px);\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    -webkit-transition: background-color 0.1s, transform 0.1s;\r\n    transition: 0.1s;\r\n    transition-timing-function: ease-in-out;\r\n    border-radius: 50%;\r\n  }\r\n`;\r\n"],"mappings":";;;;;;;;AAGA,IAAAA,OAAA,GAAAC,OAAA;AAKA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AAAmH,IAAAI,eAAA,EAAAC,gBAAA,EAAAC,gBAAA;AATnH;AACA;AACA;AAGA;AACA;AACA;AAIO,MAAMC,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAGE,yBAAM,CAACC,GAAG,CAAAN,eAAA,KAAAA,eAAA,OAAAO,uBAAA,CAAAC,OAAA,osDAShCC,KAAK,IAAI,IAAAC,6BAAiB,EAACC,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAC,CAAC,EAI7FN,KAAK,IAAI,IAAAO,6BAAiB,EAACL,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAC,CAAC,EAI7FN,KAAK,IAAI,IAAAQ,6BAAiB,EAACN,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAC,CAAC,EAGtFN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,EAavCN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,EAKtDN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,EAIlDN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,EAOpDN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,EAIpDN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,YAAY,EAAEL,KAAK,CAACM,KAAK,CAAC,EAKrDN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,EAGlDN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,EAWtDN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,EAIlDN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,EAOpDN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,cAAc,EAAEL,KAAK,CAACM,KAAK,CAAC,EAIrDN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,YAAY,EAAEL,KAAK,CAACM,KAAK,CAAC,EAKvEG,mBAAW,CAMhB;AAEM,MAAMC,qBAAqB,GAAAf,OAAA,CAAAe,qBAAA,GAAGd,yBAAM,CAACe,KAAK,CAAAnB,gBAAA,KAAAA,gBAAA,OAAAM,uBAAA,CAAAC,OAAA,0IAOhD;AAEM,MAAMa,YAAY,GAAAjB,OAAA,CAAAiB,YAAA,GAAGhB,yBAAM,CAACiB,IAAI,CAAApB,gBAAA,KAAAA,gBAAA,OAAAK,uBAAA,CAAAC,OAAA,koBAYjBC,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,EAIlDN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,cAAc,EAAEL,KAAK,CAACM,KAAK,CAAC,EAUrDN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAC,CAMrE","ignoreList":[]}
+{"version":3,"file":"TogglerStyles.cjs","names":["_styles","require","_styledComponents","_interopRequireDefault","_typography","StyledSwitch","exports","styled","div","props","ComponentSStyling","ComponentTextStyle","Regular","COLORS","getColor","theme","ComponentMStyling","ComponentLStyling","focusStyles","ToggleSwitchContainer","label","ToggleSwitch","span"],"sources":["../../src/Toggles/TogglerStyles.ts"],"sourcesContent":["/**\r\n * Import custom styles.\r\n */\r\nimport { COLORS, focusStyles } from '../styles';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { css } from 'styled-components';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nexport const StyledSwitch = styled.div<{ $selected: boolean | undefined }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  width: max-content;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n  align-items: center;\r\n  cursor: pointer;\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  }\r\n\r\n  &.large {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  }\r\n  &.disabled {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n\r\n    .label {\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n  .label {\r\n    cursor: inherit;\r\n    margin-left: 8px;\r\n  }\r\n\r\n  &:not(.disabled):active label:first-of-type span {\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    cursor: not-allowed;\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('neutral_200', props.theme)} !important;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true']:hover span {\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('correct_500', props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('correct_500', props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      -webkit-transform: translateX(20px);\r\n      -ms-transform: translateX(20px);\r\n      transform: translateX(20px);\r\n    }\r\n  }\r\n\r\n  &.disabled[aria-pressed='false'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    cursor: not-allowed;\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)} !important;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='false']:hover label:first-of-type span {\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:not(.disabled).focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled) label:first-of-type {\r\n    cursor: inherit;\r\n  }\r\n`;\r\n\r\nexport const ToggleSwitchContainer = styled.label`\r\n  position: relative;\r\n  align-items: center;\r\n  display: inline-flex;\r\n  height: 28px;\r\n  width: auto;\r\n  padding: 10px 6px;\r\n`;\r\n\r\nexport const ToggleSwitch = styled.span`\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  vertical-align: middle;\r\n  cursor: pointer;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  width: 36px;\r\n  height: 16px;\r\n  background-color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n  border-radius: 100px;\r\n\r\n  &.semantic {\r\n    background-color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n  }\r\n\r\n  &:before {\r\n    position: absolute;\r\n    content: '';\r\n    height: 12px;\r\n    width: 12px;\r\n    left: 2px;\r\n    top: calc(50% - 6px);\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    -webkit-transition: background-color 0.1s, transform 0.1s;\r\n    transition: 0.1s;\r\n    transition-timing-function: ease-in-out;\r\n    border-radius: 50%;\r\n  }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Toggles/TogglerStyles.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
-export declare const StyledSwitch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $selected: boolean | undefined;
-}>> & string;
-export declare const ToggleSwitchContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
-export declare const ToggleSwitch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledSwitch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $selected: boolean | undefined;
+}>> & string;
+export declare const ToggleSwitchContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
+export declare const ToggleSwitch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;

package/dist/Toggles/TogglerStyles.js

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
 /**
  * Import custom styles.
  */
@@ -10,7 +8,144 @@ import { COLORS, focusStyles } from '../styles';
  */
 import styled from 'styled-components';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
-export const 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  &.disabled[aria-pressed='true'] 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\n  &[aria-pressed='true']:hover span {\n    &.semantic {\n      background-color: ", ";\n    }\n\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  &[aria-pressed='true'] 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\n  &.disabled[aria-pressed='false'] 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\n  &[aria-pressed='false']:hover label:first-of-type span {\n    &.semantic {\n      background-color: ", ";\n    }\n\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  &:not(.disabled).focus-visible {\n    ", "\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n"])), props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme)), props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme)), props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme)), props => COLORS.getColor('neutral_300', props.theme), props => COLORS.getColor('primary_100', props.theme), props => COLORS.getColor('neutral_300', props.theme), props => COLORS.getColor('neutral_200', props.theme), props => COLORS.getColor('correct_500', props.theme), props => COLORS.getColor('primary_20', props.theme), props => COLORS.getColor('primary_500', props.theme), props => COLORS.getColor('correct_500', props.theme), props => COLORS.getColor('neutral_300', props.theme), props => COLORS.getColor('neutral_100', props.theme), props => COLORS.getColor('critical_500', props.theme), props => COLORS.getColor('primary_20', props.theme), focusStyles);
-export const ToggleSwitchContainer = styled.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  display: inline-flex;\n  height: 28px;\n  width: auto;\n  padding: 10px 6px;\n"])));
-export const ToggleSwitch = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  align-items: center;\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: ", ";\n  border-radius: 100px;\n\n  &.semantic {\n    background-color: ", ";\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: ", ";\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"])), props => COLORS.getColor('neutral_500', props.theme), props => COLORS.getColor('critical_500', props.theme), props => COLORS.getColor('white', props.theme));
+export const StyledSwitch = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: max-content;
+  min-height: 48px;
+  min-width: 48px;
+  align-items: center;
+  cursor: pointer;
+  &.small {
+    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+  }
+
+  &.medium {
+    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+  }
+
+  &.large {
+    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+  }
+  &.disabled {
+    color: ${props => COLORS.getColor('neutral_300', props.theme)};
+
+    .label {
+      cursor: not-allowed;
+    }
+  }
+  .label {
+    cursor: inherit;
+    margin-left: 8px;
+  }
+
+  &:not(.disabled):active label:first-of-type span {
+    &:before {
+      background-color: ${props => COLORS.getColor('primary_100', props.theme)};
+    }
+  }
+
+  &.disabled[aria-pressed='true'] label:first-of-type span {
+    background-color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;
+    cursor: not-allowed;
+
+    &:before {
+      background-color: ${props => COLORS.getColor('neutral_200', props.theme)} !important;
+      cursor: not-allowed;
+    }
+  }
+
+  &[aria-pressed='true']:hover span {
+    &.semantic {
+      background-color: ${props => COLORS.getColor('correct_500', props.theme)};
+    }
+
+    &:before {
+      background-color: ${props => COLORS.getColor('primary_20', props.theme)};
+    }
+  }
+
+  &[aria-pressed='true'] label:first-of-type span {
+    background-color: ${props => COLORS.getColor('primary_500', props.theme)};
+
+    &.semantic {
+      background-color: ${props => COLORS.getColor('correct_500', props.theme)};
+    }
+
+    &:before {
+      -webkit-transform: translateX(20px);
+      -ms-transform: translateX(20px);
+      transform: translateX(20px);
+    }
+  }
+
+  &.disabled[aria-pressed='false'] label:first-of-type span {
+    background-color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;
+    cursor: not-allowed;
+
+    &:before {
+      background-color: ${props => COLORS.getColor('neutral_100', props.theme)} !important;
+      cursor: not-allowed;
+    }
+  }
+
+  &[aria-pressed='false']:hover label:first-of-type span {
+    &.semantic {
+      background-color: ${props => COLORS.getColor('critical_500', props.theme)};
+    }
+
+    &:before {
+      background-color: ${props => COLORS.getColor('primary_20', props.theme)};
+    }
+  }
+
+  &:not(.disabled).focus-visible {
+    ${focusStyles}
+  }
+
+  &:not(.disabled) label:first-of-type {
+    cursor: inherit;
+  }
+`;
+export const ToggleSwitchContainer = styled.label`
+  position: relative;
+  align-items: center;
+  display: inline-flex;
+  height: 28px;
+  width: auto;
+  padding: 10px 6px;
+`;
+export const ToggleSwitch = styled.span`
+  position: relative;
+  display: flex;
+  align-items: center;
+  vertical-align: middle;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 36px;
+  height: 16px;
+  background-color: ${props => COLORS.getColor('neutral_500', props.theme)};
+  border-radius: 100px;
+
+  &.semantic {
+    background-color: ${props => COLORS.getColor('critical_500', props.theme)};
+  }
+
+  &:before {
+    position: absolute;
+    content: '';
+    height: 12px;
+    width: 12px;
+    left: 2px;
+    top: calc(50% - 6px);
+    background-color: ${props => COLORS.getColor('white', props.theme)};
+    -webkit-transition: background-color 0.1s, transform 0.1s;
+    transition: 0.1s;
+    transition-timing-function: ease-in-out;
+    border-radius: 50%;
+  }
+`;
 //# sourceMappingURL=TogglerStyles.js.map

package/dist/Toggles/TogglerStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TogglerStyles.js","names":["COLORS","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","StyledSwitch","div","_templateObject","_taggedTemplateLiteral","props","Regular","getColor","theme","ToggleSwitchContainer","label","_templateObject2","ToggleSwitch","span","_templateObject3"],"sources":["../../src/Toggles/TogglerStyles.ts"],"sourcesContent":["/**\r\n * Import custom styles.\r\n */\r\nimport { COLORS, focusStyles } from '../styles';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { css } from 'styled-components';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nexport const StyledSwitch = styled.div<{ $selected: boolean | undefined }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  width: max-content;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n  align-items: center;\r\n  cursor: pointer;\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  }\r\n\r\n  &.large {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  }\r\n  &.disabled {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n\r\n    .label {\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n  .label {\r\n    cursor: inherit;\r\n    margin-left: 8px;\r\n  }\r\n\r\n  &:not(.disabled):active label:first-of-type span {\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    cursor: not-allowed;\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('neutral_200', props.theme)} !important;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true']:hover span {\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('correct_500', props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('correct_500', props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      -webkit-transform: translateX(20px);\r\n      -ms-transform: translateX(20px);\r\n      transform: translateX(20px);\r\n    }\r\n  }\r\n\r\n  &.disabled[aria-pressed='false'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    cursor: not-allowed;\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)} !important;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='false']:hover label:first-of-type span {\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:not(.disabled).focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled) label:first-of-type {\r\n    cursor: inherit;\r\n  }\r\n`;\r\n\r\nexport const ToggleSwitchContainer = styled.label`\r\n  position: relative;\r\n  align-items: center;\r\n  display: inline-flex;\r\n  height: 28px;\r\n  width: auto;\r\n  padding: 10px 6px;\r\n`;\r\n\r\nexport const ToggleSwitch = styled.span`\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  vertical-align: middle;\r\n  cursor: pointer;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  width: 36px;\r\n  height: 16px;\r\n  background-color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n  border-radius: 100px;\r\n\r\n  &.semantic {\r\n    background-color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n  }\r\n\r\n  &:before {\r\n    position: absolute;\r\n    content: '';\r\n    height: 12px;\r\n    width: 12px;\r\n    left: 2px;\r\n    top: calc(50% - 6px);\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    -webkit-transition: background-color 0.1s, transform 0.1s;\r\n    transition: 0.1s;\r\n    transition-timing-function: ease-in-out;\r\n    border-radius: 50%;\r\n  }\r\n`;\r\n"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,WAAW,QAAQ,WAAW;;AAE/C;AACA;AACA;AACA,OAAOC,MAAM,MAAe,mBAAmB;AAC/C,SAASC,iBAAiB,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAQ,sBAAsB;AAElH,OAAO,MAAMC,YAAY,GAAGL,MAAM,CAACM,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,msDAShCC,KAAK,IAAIN,iBAAiB,CAACC,kBAAkB,CAACM,OAAO,EAAEZ,MAAM,CAACa,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC,EAI7FH,KAAK,IAAIP,iBAAiB,CAACE,kBAAkB,CAACM,OAAO,EAAEZ,MAAM,CAACa,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC,EAI7FH,KAAK,IAAIR,iBAAiB,CAACG,kBAAkB,CAACM,OAAO,EAAEZ,MAAM,CAACa,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC,EAGtFH,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,EAavCH,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,EAKtDH,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,EAIlDH,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,EAOpDH,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,EAIpDH,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,YAAY,EAAEF,KAAK,CAACG,KAAK,CAAC,EAKrDH,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,EAGlDH,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,EAWtDH,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,EAIlDH,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,EAOpDH,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,cAAc,EAAEF,KAAK,CAACG,KAAK,CAAC,EAIrDH,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,YAAY,EAAEF,KAAK,CAACG,KAAK,CAAC,EAKvEb,WAAW,CAMhB;AAED,OAAO,MAAMc,qBAAqB,GAAGb,MAAM,CAACc,KAAK,CAAAC,gBAAA,KAAAA,gBAAA,GAAAP,sBAAA,yIAOhD;AAED,OAAO,MAAMQ,YAAY,GAAGhB,MAAM,CAACiB,IAAI,CAAAC,gBAAA,KAAAA,gBAAA,GAAAV,sBAAA,ioBAYjBC,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,EAIlDH,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,cAAc,EAAEF,KAAK,CAACG,KAAK,CAAC,EAUrDH,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC,CAMrE","ignoreList":[]}
+{"version":3,"file":"TogglerStyles.js","names":["COLORS","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","StyledSwitch","div","props","Regular","getColor","theme","ToggleSwitchContainer","label","ToggleSwitch","span"],"sources":["../../src/Toggles/TogglerStyles.ts"],"sourcesContent":["/**\r\n * Import custom styles.\r\n */\r\nimport { COLORS, focusStyles } from '../styles';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { css } from 'styled-components';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nexport const StyledSwitch = styled.div<{ $selected: boolean | undefined }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  width: max-content;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n  align-items: center;\r\n  cursor: pointer;\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  }\r\n\r\n  &.large {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  }\r\n  &.disabled {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n\r\n    .label {\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n  .label {\r\n    cursor: inherit;\r\n    margin-left: 8px;\r\n  }\r\n\r\n  &:not(.disabled):active label:first-of-type span {\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    cursor: not-allowed;\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('neutral_200', props.theme)} !important;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true']:hover span {\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('correct_500', props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('correct_500', props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      -webkit-transform: translateX(20px);\r\n      -ms-transform: translateX(20px);\r\n      transform: translateX(20px);\r\n    }\r\n  }\r\n\r\n  &.disabled[aria-pressed='false'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    cursor: not-allowed;\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)} !important;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='false']:hover label:first-of-type span {\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:not(.disabled).focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled) label:first-of-type {\r\n    cursor: inherit;\r\n  }\r\n`;\r\n\r\nexport const ToggleSwitchContainer = styled.label`\r\n  position: relative;\r\n  align-items: center;\r\n  display: inline-flex;\r\n  height: 28px;\r\n  width: auto;\r\n  padding: 10px 6px;\r\n`;\r\n\r\nexport const ToggleSwitch = styled.span`\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  vertical-align: middle;\r\n  cursor: pointer;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  width: 36px;\r\n  height: 16px;\r\n  background-color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n  border-radius: 100px;\r\n\r\n  &.semantic {\r\n    background-color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n  }\r\n\r\n  &:before {\r\n    position: absolute;\r\n    content: '';\r\n    height: 12px;\r\n    width: 12px;\r\n    left: 2px;\r\n    top: calc(50% - 6px);\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    -webkit-transition: background-color 0.1s, transform 0.1s;\r\n    transition: 0.1s;\r\n    transition-timing-function: ease-in-out;\r\n    border-radius: 50%;\r\n  }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Toggles/TogglerTypes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TogglerTypes.cjs","names":[],"sources":["../../src/Toggles/TogglerTypes.ts"],"sourcesContent":["import { Size } from '..';\r\n\r\n/**\r\n * Types for the table.\r\n */\r\nexport interface ToggleSwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onKeyDown' | 'onClick' | 'tabIndex'  >{\r\n  /** Required. Id of the ToggleSwitch will be set to top level StyledSwitch div component. */\r\n  id: string;\r\n  /** Optional. Label to be shown on the right side of the toggle. */\r\n  label?: string;\r\n  /** Optional. If set user can not interact with Toggle. */\r\n  disabled?: boolean;\r\n  /** Optional. Initial state of the Toggle, defaults to 'false' */\r\n  selected?: boolean;\r\n  /** Optional. If set then 'critical_500' will be used as color for unselected state.*/\r\n  isSemantic?: boolean;\r\n  /** Optional. Defaults to 'medium' */\r\n  size?: Size;\r\n  /** Required. Handler to handle toggle state change. */\r\n  onToggle: (selected: boolean) => void;\r\n}\r\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"TogglerTypes.cjs","names":[],"sources":["../../src/Toggles/TogglerTypes.ts"],"sourcesContent":["import { Size } from '..';\r\n\r\n/**\r\n * Types for the table.\r\n */\r\nexport interface ToggleSwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onToggle' | 'onKeyDown' | 'onClick' | 'tabIndex'  >{\r\n  /** Required. Id of the ToggleSwitch will be set to top level StyledSwitch div component. */\r\n  id: string;\r\n  /** Optional. Label to be shown on the right side of the toggle. */\r\n  label?: string;\r\n  /** Optional. If set user can not interact with Toggle. */\r\n  disabled?: boolean;\r\n  /** Optional. Initial state of the Toggle, defaults to 'false' */\r\n  selected?: boolean;\r\n  /** Optional. If set then 'critical_500' will be used as color for unselected state.*/\r\n  isSemantic?: boolean;\r\n  /** Optional. Defaults to 'medium' */\r\n  size?: Size;\r\n  /** Required. Handler to handle toggle state change. */\r\n  onToggle: (selected: boolean) => void;\r\n}\r\n"],"mappings":"","ignoreList":[]}

package/dist/Toggles/TogglerTypes.d.ts

@@ -1,21 +1,20 @@
-/// <reference types="react" />
-import { Size } from '..';
-/**
- * Types for the table.
- */
-export interface ToggleSwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onKeyDown' | 'onClick' | 'tabIndex'> {
-    /** Required. Id of the ToggleSwitch will be set to top level StyledSwitch div component. */
-    id: string;
-    /** Optional. Label to be shown on the right side of the toggle. */
-    label?: string;
-    /** Optional. If set user can not interact with Toggle. */
-    disabled?: boolean;
-    /** Optional. Initial state of the Toggle, defaults to 'false' */
-    selected?: boolean;
-    /** Optional. If set then 'critical_500' will be used as color for unselected state.*/
-    isSemantic?: boolean;
-    /** Optional. Defaults to 'medium' */
-    size?: Size;
-    /** Required. Handler to handle toggle state change. */
-    onToggle: (selected: boolean) => void;
-}
+import { Size } from '..';
+/**
+ * Types for the table.
+ */
+export interface ToggleSwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onToggle' | 'onKeyDown' | 'onClick' | 'tabIndex'> {
+    /** Required. Id of the ToggleSwitch will be set to top level StyledSwitch div component. */
+    id: string;
+    /** Optional. Label to be shown on the right side of the toggle. */
+    label?: string;
+    /** Optional. If set user can not interact with Toggle. */
+    disabled?: boolean;
+    /** Optional. Initial state of the Toggle, defaults to 'false' */
+    selected?: boolean;
+    /** Optional. If set then 'critical_500' will be used as color for unselected state.*/
+    isSemantic?: boolean;
+    /** Optional. Defaults to 'medium' */
+    size?: Size;
+    /** Required. Handler to handle toggle state change. */
+    onToggle: (selected: boolean) => void;
+}

package/dist/Toggles/TogglerTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"TogglerTypes.js","names":[],"sources":["../../src/Toggles/TogglerTypes.ts"],"sourcesContent":["import { Size } from '..';\r\n\r\n/**\r\n * Types for the table.\r\n */\r\nexport interface ToggleSwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onKeyDown' | 'onClick' | 'tabIndex'  >{\r\n  /** Required. Id of the ToggleSwitch will be set to top level StyledSwitch div component. */\r\n  id: string;\r\n  /** Optional. Label to be shown on the right side of the toggle. */\r\n  label?: string;\r\n  /** Optional. If set user can not interact with Toggle. */\r\n  disabled?: boolean;\r\n  /** Optional. Initial state of the Toggle, defaults to 'false' */\r\n  selected?: boolean;\r\n  /** Optional. If set then 'critical_500' will be used as color for unselected state.*/\r\n  isSemantic?: boolean;\r\n  /** Optional. Defaults to 'medium' */\r\n  size?: Size;\r\n  /** Required. Handler to handle toggle state change. */\r\n  onToggle: (selected: boolean) => void;\r\n}\r\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"TogglerTypes.js","names":[],"sources":["../../src/Toggles/TogglerTypes.ts"],"sourcesContent":["import { Size } from '..';\r\n\r\n/**\r\n * Types for the table.\r\n */\r\nexport interface ToggleSwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onToggle' | 'onKeyDown' | 'onClick' | 'tabIndex'  >{\r\n  /** Required. Id of the ToggleSwitch will be set to top level StyledSwitch div component. */\r\n  id: string;\r\n  /** Optional. Label to be shown on the right side of the toggle. */\r\n  label?: string;\r\n  /** Optional. If set user can not interact with Toggle. */\r\n  disabled?: boolean;\r\n  /** Optional. Initial state of the Toggle, defaults to 'false' */\r\n  selected?: boolean;\r\n  /** Optional. If set then 'critical_500' will be used as color for unselected state.*/\r\n  isSemantic?: boolean;\r\n  /** Optional. Defaults to 'medium' */\r\n  size?: Size;\r\n  /** Required. Handler to handle toggle state change. */\r\n  onToggle: (selected: boolean) => void;\r\n}\r\n"],"mappings":"","ignoreList":[]}

package/dist/Toggles/index.d.ts

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

package/dist/Tooltips/TooltipOverflow.cjs

@@ -45,9 +45,8 @@ const TooltipOverflow = _ref => {
     checkIfOverflowed();
   }, [customW, customH]);
   const checkIfOverflowed = () => {
-    var _ref2;
     //adding +3 offset to offsetWidth, because sometimes when there is no overflow, scrollWidth can be equal to offsetWidth + 1
-    const over = (_ref2 = input && !focused && input.current && input.current.offsetWidth + 3 < input.current.scrollWidth) !== null && _ref2 !== void 0 ? _ref2 : false;
+    const over = (input && !focused && input.current && input.current.offsetWidth + 3 < input.current.scrollWidth) ?? false;
     setTextOverflowed(over);
   };
   React.useEffect(() => {
@@ -62,9 +61,9 @@ const TooltipOverflow = _ref => {
   };
   React.useEffect(() => {
     return () => {
-      if (input !== null && input !== void 0 && input.current) {
-        input === null || input === void 0 || input.current.removeEventListener("focus", onFocus);
-        input === null || input === void 0 || input.current.removeEventListener("blur", onBlur);
+      if (input?.current) {
+        input?.current.removeEventListener("focus", onFocus);
+        input?.current.removeEventListener("blur", onBlur);
       }
     };
   }, []);

package/dist/Tooltips/TooltipOverflow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipOverflow.cjs","names":["React","_interopRequireWildcard","require","_reactResizeDetector","_TooltipStyles","_","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","TooltipOverflow","_ref","label","children","input","withArrow","maxWidth","width","value","size","Size","Small","height","align","position","props","_objectWithoutProperties2","textOverflowed","setTextOverflowed","useState","focused","setFocused","customW","customH","useResizeDetector","targetRef","useEffect","checkIfOverflowed","_ref2","over","current","offsetWidth","scrollWidth","onFocus","onBlur","removeEventListener","renderedCallback","useCallback","addEventListener","jsx","ref","Tooltip","$align","$height","role","$maxWidth","$width","$size","$withArrow","$position","jsxs","propTypes","_propTypes","string","_default","exports"],"sources":["../../src/Tooltips/TooltipOverflow.tsx"],"sourcesContent":["\r\nimport * as React from 'react';\r\n\r\nimport { TooltipProps } from './TooltipTypes';\r\nimport { useResizeDetector } from 'react-resize-detector';\r\n\r\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\r\nimport { Size } from '..';\r\n \r\ninterface TooltipOverflowProps extends TooltipProps {\r\n    input?: React.MutableRefObject<HTMLInputElement | null>;\r\n    maxWidth?: string;\r\n    width?: string;\r\n    value?: string;\r\n}\r\n\r\n const TooltipOverflow = ({\r\n   label, children,\r\n   input,\r\n   withArrow,\r\n   maxWidth,\r\n   width,\r\n   value,\r\n   size = Size.Small,\r\n   height = 'auto',\r\n   align = 'center', \r\n   position = 'top',\r\n   ...props } : TooltipOverflowProps) => {\r\n\r\n  const [textOverflowed, setTextOverflowed] = React.useState<boolean>(false);\r\n  const [focused, setFocused] = React.useState<boolean>(false);\r\n  const {width: customW, height: customH} = useResizeDetector({ targetRef: input });\r\n\r\n  React.useEffect(() => {\r\n    checkIfOverflowed();\r\n  }, [customW, customH]);\r\n\r\n  const checkIfOverflowed = () => {\r\n    //adding +3 offset to offsetWidth, because sometimes when there is no overflow, scrollWidth can be equal to offsetWidth + 1\r\n    const over = (input && !focused && input.current && input.current.offsetWidth + 3 < input.current.scrollWidth) ?? false;\r\n    setTextOverflowed(over);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    checkIfOverflowed();\r\n  });\r\n\r\n  const onFocus = () => {\r\n    checkIfOverflowed();\r\n    setFocused(true);\r\n  };\r\n\r\n  const onBlur = () => {\r\n    setFocused(false);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    return () => {\r\n      if(input?.current)\r\n      {\r\n        input?.current.removeEventListener(\"focus\", onFocus);\r\n        input?.current.removeEventListener(\"blur\", onBlur);\r\n      }\r\n    }\r\n  }, []);\r\n\r\n  const renderedCallback = React.useCallback(() => {\r\n    if(input && input.current)\r\n    {\r\n      input.current.addEventListener(\"focus\", onFocus);\r\n      input.current.addEventListener(\"blur\", onBlur);\r\n      checkIfOverflowed();\r\n    }\r\n  }, []);\r\n \r\n    return <div ref={renderedCallback}>{textOverflowed && <Tooltip $align={align}\r\n               $height={height}\r\n               role=\"tooltip\"\r\n               $maxWidth={maxWidth}\r\n               $width={width}\r\n               $size={size}\r\n               $withArrow={withArrow}\r\n               $position={position}\r\n               {...props}>\r\n                <span>\r\n               {children} </span>\r\n            </Tooltip> }</div>;\r\n };\r\n \r\n export default TooltipOverflow;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TooltipOverflow.cjs","names":["React","_interopRequireWildcard","require","_reactResizeDetector","_TooltipStyles","_","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","TooltipOverflow","_ref","label","children","input","withArrow","maxWidth","width","value","size","Size","Small","height","align","position","props","_objectWithoutProperties2","textOverflowed","setTextOverflowed","useState","focused","setFocused","customW","customH","useResizeDetector","targetRef","useEffect","checkIfOverflowed","over","current","offsetWidth","scrollWidth","onFocus","onBlur","removeEventListener","renderedCallback","useCallback","addEventListener","jsx","ref","Tooltip","$align","$height","role","$maxWidth","$width","$size","$withArrow","$position","jsxs","propTypes","_propTypes","string","_default","exports"],"sources":["../../src/Tooltips/TooltipOverflow.tsx"],"sourcesContent":["\r\nimport * as React from 'react';\r\n\r\nimport { TooltipProps } from './TooltipTypes';\r\nimport { useResizeDetector } from 'react-resize-detector';\r\n\r\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\r\nimport { Size } from '..';\r\n \r\ninterface TooltipOverflowProps extends TooltipProps {\r\n    input?: React.MutableRefObject<HTMLInputElement | null>;\r\n    maxWidth?: string;\r\n    width?: string;\r\n    value?: string;\r\n}\r\n\r\n const TooltipOverflow = ({\r\n   label, children,\r\n   input,\r\n   withArrow,\r\n   maxWidth,\r\n   width,\r\n   value,\r\n   size = Size.Small,\r\n   height = 'auto',\r\n   align = 'center', \r\n   position = 'top',\r\n   ...props } : TooltipOverflowProps) => {\r\n\r\n  const [textOverflowed, setTextOverflowed] = React.useState<boolean>(false);\r\n  const [focused, setFocused] = React.useState<boolean>(false);\r\n  const {width: customW, height: customH} = useResizeDetector({ targetRef: input });\r\n\r\n  React.useEffect(() => {\r\n    checkIfOverflowed();\r\n  }, [customW, customH]);\r\n\r\n  const checkIfOverflowed = () => {\r\n    //adding +3 offset to offsetWidth, because sometimes when there is no overflow, scrollWidth can be equal to offsetWidth + 1\r\n    const over = (input && !focused && input.current && input.current.offsetWidth + 3 < input.current.scrollWidth) ?? false;\r\n    setTextOverflowed(over);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    checkIfOverflowed();\r\n  });\r\n\r\n  const onFocus = () => {\r\n    checkIfOverflowed();\r\n    setFocused(true);\r\n  };\r\n\r\n  const onBlur = () => {\r\n    setFocused(false);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    return () => {\r\n      if(input?.current)\r\n      {\r\n        input?.current.removeEventListener(\"focus\", onFocus);\r\n        input?.current.removeEventListener(\"blur\", onBlur);\r\n      }\r\n    }\r\n  }, []);\r\n\r\n  const renderedCallback = React.useCallback(() => {\r\n    if(input && input.current)\r\n    {\r\n      input.current.addEventListener(\"focus\", onFocus);\r\n      input.current.addEventListener(\"blur\", onBlur);\r\n      checkIfOverflowed();\r\n    }\r\n  }, []);\r\n \r\n    return <div ref={renderedCallback}>{textOverflowed && <Tooltip $align={align}\r\n               $height={height}\r\n               role=\"tooltip\"\r\n               $maxWidth={maxWidth}\r\n               $width={width}\r\n               $size={size}\r\n               $withArrow={withArrow}\r\n               $position={position}\r\n               {...props}>\r\n                <span>\r\n               {children} </span>\r\n            </Tooltip> }</div>;\r\n };\r\n \r\n export default TooltipOverflow;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Tooltips/TooltipOverflow.d.ts

@@ -1,10 +1,10 @@
-import * as React from 'react';
-import { TooltipProps } from './TooltipTypes';
-interface TooltipOverflowProps extends TooltipProps {
-    input?: React.MutableRefObject<HTMLInputElement | null>;
-    maxWidth?: string;
-    width?: string;
-    value?: string;
-}
-declare const TooltipOverflow: ({ label, children, input, withArrow, maxWidth, width, value, size, height, align, position, ...props }: TooltipOverflowProps) => React.JSX.Element;
-export default TooltipOverflow;
+import * as React from 'react';
+import { TooltipProps } from './TooltipTypes';
+interface TooltipOverflowProps extends TooltipProps {
+    input?: React.MutableRefObject<HTMLInputElement | null>;
+    maxWidth?: string;
+    width?: string;
+    value?: string;
+}
+declare const TooltipOverflow: ({ label, children, input, withArrow, maxWidth, width, value, size, height, align, position, ...props }: TooltipOverflowProps) => React.JSX.Element;
+export default TooltipOverflow;

package/dist/Tooltips/TooltipOverflow.js

@@ -36,9 +36,8 @@ const TooltipOverflow = _ref => {
     checkIfOverflowed();
   }, [customW, customH]);
   const checkIfOverflowed = () => {
-    var _ref2;
     //adding +3 offset to offsetWidth, because sometimes when there is no overflow, scrollWidth can be equal to offsetWidth + 1
-    const over = (_ref2 = input && !focused && input.current && input.current.offsetWidth + 3 < input.current.scrollWidth) !== null && _ref2 !== void 0 ? _ref2 : false;
+    const over = (input && !focused && input.current && input.current.offsetWidth + 3 < input.current.scrollWidth) ?? false;
     setTextOverflowed(over);
   };
   React.useEffect(() => {
@@ -53,9 +52,9 @@ const TooltipOverflow = _ref => {
   };
   React.useEffect(() => {
     return () => {
-      if (input !== null && input !== void 0 && input.current) {
-        input === null || input === void 0 || input.current.removeEventListener("focus", onFocus);
-        input === null || input === void 0 || input.current.removeEventListener("blur", onBlur);
+      if (input?.current) {
+        input?.current.removeEventListener("focus", onFocus);
+        input?.current.removeEventListener("blur", onBlur);
       }
     };
   }, []);