@laerdal/life-react-components 1.1.2-dev.8 → 1.2.1-dev.2

package/dist/umd/Tabs/TabLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tabs/TabLink.tsx"],"names":["disabled","requiredLine","optionalLine","onLinkClick","testId","showNotificationDot","StyledTabLink","styled","COLORS","neutral_600","props","white","neutral_20","primary_20","primary_600","primary_100","primary_800","primary_500","neutral_300","OptionalLineWrapper","div","NotificationDot","critical_500","TopWrapper","TabLink","exact","location","ref","React","to","OptionalLineIcon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { BaseProps } from '../icons';\nimport { COLORS } from '../styles';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.FunctionComponent<BaseProps>;\n  onLinkClick?: () => void;\n  testId?: string;\n  showNotificationDot?: boolean;\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n  disabled?: boolean;\n  exact: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n  display: flex;\n  flex-direction: column;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ${COLORS.neutral_600};\n\n  background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    background-color: ${COLORS.white};\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n\n  &.active {\n    background-color: ${COLORS.neutral_20};\n  }\n  &.active:hover {\n    background-color: ${COLORS.primary_20};\n  }\n  &.active:focus {\n    background-color: ${COLORS.white};\n  }\n\n  &:hover {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n  &:active {\n    box-shadow: none;\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ${COLORS.primary_500};\n\n      border-top-left-radius: 2px;\n      border-top-right-radius: 2px;\n      border-bottom-left-radius: 2px;\n      border-bottom-right-radius: 2px;\n    }\n  }\n  &.active:hover {\n    &::after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n  &.active:active {\n    background-color: ${COLORS.primary_100};\n\n    &::after {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n  &:disabled {\n    box-shadow: none;\n    background-color: ${COLORS.white};\n    span {\n      color: ${COLORS.neutral_300};\n    }\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n`;\n\nconst OptionalLineWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  margin: 0 0 0 20px;\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n`;\n\nconst NotificationDot = styled.div`\n  position: absolute;\n  right: 12px;\n  top: calc(50% - 12px);\n  background-color: ${COLORS.critical_500};\n  height: 8px;\n  width: 8px;\n  border-radius: 50%;\n  border: 2px solid ${COLORS.white};\n  margin: 6px;\n`;\n\nconst TopWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TabLink = ({ to, disabled = false, exact = false, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, testId, showNotificationDot }: TabLinkProps) => {\n  const location = useLocation();\n  const ref = React.useRef<any>(null);\n\n  return (\n    <StyledTabLink\n      to={to.toString()}\n      activeClassName=\"active\"\n      disabled={disabled}\n      exact={exact}\n      role=\"tab\"\n      aria-selected={to === location.pathname}\n      onClick={() => {\n        ref?.current?.blur();\n        if (onLinkClick) {\n          onLinkClick();\n        }\n      }}\n      ref={ref}\n      data-testid={testId}>\n      <TopWrapper>\n        <span>{requiredLine}</span>\n        {showNotificationDot && <NotificationDot data-testid=\"NotificationDot\" />}\n      </TopWrapper>\n      {optionalLine && OptionalLineIcon ? (\n        <OptionalLineWrapper>\n          {OptionalLineIcon && <OptionalLineIcon size=\"16px\" />}\n          {optionalLine !== undefined && <span>{optionalLine}</span>}\n        </OptionalLineWrapper>\n      ) : optionalLine ? (\n        <div>\n          <span>{optionalLine}</span>\n        </div>\n      ) : (\n        <></>\n      )}\n    </StyledTabLink>\n  );\n};\n\nexport default TabLink;\n"],"file":"TabLink.js"}
+{"version":3,"sources":["../../../src/Tabs/TabLink.tsx"],"names":["disabled","requiredLine","optionalLine","onLinkClick","testId","showNotificationDot","size","variant","StyledTabLink","styled","COLORS","neutral_600","props","white","neutral_20","primary_20","primary_600","primary_100","primary_800","primary_500","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","TabLink","exact","location","ref","React","to","OptionalLineIcon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { BaseProps } from '../icons';\nimport { COLORS } from '../styles';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.FunctionComponent<BaseProps>;\n  onLinkClick?: () => void;\n  testId?: string;\n  showNotificationDot?: boolean;\n  size?: string;\n  variant?: 'positive' | 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n  disabled?: boolean;\n  exact: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ${COLORS.neutral_600};\n\n  background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    background-color: ${COLORS.white};\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n\n  &.active {\n    background-color: ${COLORS.neutral_20};\n  }\n  &.active:hover {\n    background-color: ${COLORS.primary_20};\n  }\n  &.active:focus {\n    background-color: ${COLORS.white};\n  }\n\n  &:hover {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n  &:active {\n    box-shadow: none;\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ${COLORS.primary_500};\n\n      border-top-left-radius: 2px;\n      border-top-right-radius: 2px;\n      border-bottom-left-radius: 2px;\n      border-bottom-right-radius: 2px;\n    }\n  }\n  &.active:hover {\n    &::after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n  &.active:active {\n    background-color: ${COLORS.primary_100};\n\n    &::after {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n  &:disabled {\n    box-shadow: none;\n    background-color: ${COLORS.white};\n    span {\n      color: ${COLORS.neutral_300};\n    }\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n`;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n`;\n\nconst TopWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n\nconst TabLink = ({ to, disabled = false, exact = false, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, testId, showNotificationDot = false, size = 'small', variant = 'critical' }: TabLinkProps) => {\n  const location = useLocation();\n  const ref = React.useRef<any>(null);\n\n  return (\n    <StyledTabLink\n      to={to.toString()}\n      activeClassName=\"active\"\n      disabled={disabled}\n      exact={exact}\n      role=\"tab\"\n      aria-selected={to === location.pathname}\n      onClick={() => {\n        ref?.current?.blur();\n        if (onLinkClick) {\n          onLinkClick();\n        }\n      }}\n      ref={ref}\n      data-testid={testId}>\n      <TextContainer>  \n      <TopWrapper>\n        <span>{requiredLine}</span>        \n      </TopWrapper>\n      {optionalLine && OptionalLineIcon ? (\n        <OptionalLineWrapperWithIcon>\n          {OptionalLineIcon && <OptionalLineIcon size=\"16px\" />}\n          {optionalLine !== undefined && <span>{optionalLine}</span>}\n        </OptionalLineWrapperWithIcon>\n      ) : optionalLine ? (\n        <OptionalLineWrapper>\n          <span>{optionalLine}</span>\n        </OptionalLineWrapper>\n      ) : (\n        <></>\n      )}\n      </TextContainer>\n      <StyledNotification>\n        {showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}\n      </StyledNotification>\n    </StyledTabLink>\n  );\n};\n\nexport default TabLink;\n"],"file":"TabLink.js"}

package/dist/umd/Tabs/VerticalTabs.js

@@ -96,6 +96,8 @@
       OptionalLineIcon: entry.optionalLineIcon,
       disabled: entry.disabled,
       showNotificationDot: entry.showNotificationDot,
+      size: size,
+      variant: entry.variant,
       onLinkClick: () => {
         if (entry.onClick) {
           entry.onClick();
@@ -113,7 +115,8 @@
       disabled: _propTypes2.default.bool,
       onClick: _propTypes2.default.func,
       exact: _propTypes2.default.bool,
-      showNotificationDot: _propTypes2.default.bool
+      showNotificationDot: _propTypes2.default.bool,
+      variant: _propTypes2.default.oneOf(['critical', 'positive']).isRequired
     })).isRequired
   };
   exports.default = VerticalTabs;

package/dist/umd/Tabs/VerticalTabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tabs/VerticalTabs.tsx"],"names":["requiredLine","optionalLine","to","disabled","onClick","exact","showNotificationDot","size","entries","VerticalTabs","entry"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,QAAMS,YAAY,GAAG,CAAC;AAAA,IAAA,IAAA;AAAQD,IAAAA;AAAR,GAAD,KAA0C;AAC7D,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAM,MAAA,IAAI,EAAED,IAAI,IAAI;AAApB,KAAA,EACG,OAAO,EAAP,GAAA,CAAcG,KAAD,IAAA,aACZ,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA;AACE,MAAA,GAAG,EAAEA,KAAK,CADZ,EAAA;AAEE,MAAA,EAAE,EAAEA,KAAK,CAFX,EAAA;AAGE,MAAA,KAAK,EAAEA,KAAK,CAHd,KAAA;AAIE,MAAA,YAAY,EAAEA,KAAK,CAJrB,YAAA;AAKE,MAAA,YAAY,EAAEA,KAAK,CALrB,YAAA;AAME,MAAA,gBAAgB,EAAEA,KAAK,CANzB,gBAAA;AAOE,MAAA,QAAQ,EAAEA,KAAK,CAPjB,QAAA;AAQE,MAAA,mBAAmB,EAAEA,KAAK,CAR5B,mBAAA;AASE,MAAA,WAAW,EAAE,MAAM;AACjB,YAAIA,KAAK,CAAT,OAAA,EAAmB;AACjBA,UAAAA,KAAK,CAALA,OAAAA;AACD;AACF;AAbH,KAAA,CADD,CADH,CADF;AADF,GAAA;;;AAJEH,IAAAA,I;AACAC,IAAAA,O;AAXAR,MAAAA,Y;AACAC,MAAAA,Y;AAEAC,MAAAA,E;AACAC,MAAAA,Q;AACAC,MAAAA,O;AACAC,MAAAA,K;AACAC,MAAAA,mB;;;oBA8BF,Y","sourcesContent":["import * as React from 'react';\nimport Tabs from './Tabs';\nimport TabLink from './TabLink';\nimport { BaseProps } from '../icons';\n\nexport interface VerticalTabEntry {\n  requiredLine: string;\n  optionalLine?: string;\n  optionalLineIcon?: React.FunctionComponent<BaseProps>;\n  to: string;\n  disabled?: boolean;\n  onClick?: () => void;\n  exact?: boolean;\n  showNotificationDot?: boolean;\n}\ninterface VerticalTabsProps {\n  size?: string;\n  entries: VerticalTabEntry[];\n}\n\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\n  return (\n    <Tabs size={size || 'large'}>\n      {entries?.map((entry: VerticalTabEntry) => (\n        <TabLink\n          key={entry.to}\n          to={entry.to}\n          exact={entry.exact}\n          requiredLine={entry.requiredLine}\n          optionalLine={entry.optionalLine}\n          OptionalLineIcon={entry.optionalLineIcon}\n          disabled={entry.disabled}\n          showNotificationDot={entry.showNotificationDot}\n          onLinkClick={() => {\n            if (entry.onClick) {\n              entry.onClick();\n            }\n          }}></TabLink>\n      ))}\n    </Tabs>\n  );\n};\n\nexport default VerticalTabs;\n"],"file":"VerticalTabs.js"}
+{"version":3,"sources":["../../../src/Tabs/VerticalTabs.tsx"],"names":["requiredLine","optionalLine","to","disabled","onClick","exact","showNotificationDot","variant","size","entries","VerticalTabs","entry"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,QAAMU,YAAY,GAAG,CAAC;AAAA,IAAA,IAAA;AAAQD,IAAAA;AAAR,GAAD,KAA0C;AAC7D,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAM,MAAA,IAAI,EAAED,IAAI,IAAI;AAApB,KAAA,EACG,OAAO,EAAP,GAAA,CAAcG,KAAD,IAAA,aACZ,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA;AACE,MAAA,GAAG,EAAEA,KAAK,CADZ,EAAA;AAEE,MAAA,EAAE,EAAEA,KAAK,CAFX,EAAA;AAGE,MAAA,KAAK,EAAEA,KAAK,CAHd,KAAA;AAIE,MAAA,YAAY,EAAEA,KAAK,CAJrB,YAAA;AAKE,MAAA,YAAY,EAAEA,KAAK,CALrB,YAAA;AAME,MAAA,gBAAgB,EAAEA,KAAK,CANzB,gBAAA;AAOE,MAAA,QAAQ,EAAEA,KAAK,CAPjB,QAAA;AAQE,MAAA,mBAAmB,EAAEA,KAAK,CAR5B,mBAAA;AASE,MAAA,IAAI,EATN,IAAA;AAUE,MAAA,OAAO,EAAEA,KAAK,CAVhB,OAAA;AAWE,MAAA,WAAW,EAAE,MAAM;AACjB,YAAIA,KAAK,CAAT,OAAA,EAAmB;AACjBA,UAAAA,KAAK,CAALA,OAAAA;AACD;AACF;AAfH,KAAA,CADD,CADH,CADF;AADF,GAAA;;;AAJEH,IAAAA,I;AACAC,IAAAA,O;AAZAT,MAAAA,Y;AACAC,MAAAA,Y;AAEAC,MAAAA,E;AACAC,MAAAA,Q;AACAC,MAAAA,O;AACAC,MAAAA,K;AACAC,MAAAA,mB;AACAC,MAAAA,O,6BAAS,U,EAAa,U;;;oBAgCxB,Y","sourcesContent":["import * as React from 'react';\nimport Tabs from './Tabs';\nimport TabLink from './TabLink';\nimport { BaseProps } from '../icons';\n\nexport interface VerticalTabEntry {\n  requiredLine: string;\n  optionalLine?: string;\n  optionalLineIcon?: React.FunctionComponent<BaseProps>;\n  to: string;\n  disabled?: boolean;\n  onClick?: () => void;\n  exact?: boolean;\n  showNotificationDot?: boolean;\n  variant: 'critical' | 'positive';\n}\ninterface VerticalTabsProps {\n  size?: string;\n  entries: VerticalTabEntry[];\n}\n\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\n  return (\n    <Tabs size={size || 'large'}>\n      {entries?.map((entry: VerticalTabEntry) => (\n        <TabLink\n          key={entry.to}\n          to={entry.to}\n          exact={entry.exact}\n          requiredLine={entry.requiredLine}\n          optionalLine={entry.optionalLine}\n          OptionalLineIcon={entry.optionalLineIcon}\n          disabled={entry.disabled}\n          showNotificationDot={entry.showNotificationDot}\n          size={size}\n          variant={entry.variant}\n          onLinkClick={() => {\n            if (entry.onClick) {\n              entry.onClick();\n            }\n          }}></TabLink>\n      ))}\n    </Tabs>\n  );\n};\n\nexport default VerticalTabs;\n"],"file":"VerticalTabs.js"}

package/dist/umd/Toggles/ToggleSwitch.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "./TogglerStyles"], factory);
+    define(["exports", "react", "./TogglerStyles", ".."], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("./TogglerStyles"));
+    factory(exports, require("react"), require("./TogglerStyles"), require(".."));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react, global.TogglerStyles);
+    factory(mod.exports, global.react, global.TogglerStyles, global._);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _react, _TogglerStyles) {
+})(this, function (exports, _react, _TogglerStyles, _) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -86,6 +86,7 @@
     selected,
     label,
     isSemantic,
+    size,
     onToggle
   }) => {
     /**
@@ -101,15 +102,18 @@
       onToggle(!selected);
     };
 
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_TogglerStyles.ToggleSwitchContainer, null, /*#__PURE__*/React.createElement("input", {
-      type: "checkbox",
-      disabled: disabled,
-      checked: selected,
-      id: id,
-      onChange: handleClick
-    }), /*#__PURE__*/React.createElement(_TogglerStyles.ToggleSwitch, {
+    size = size ?? _.Size.Medium;
+    return /*#__PURE__*/React.createElement(_TogglerStyles.StyledSwitch, {
+      onClick: handleClick,
+      className: size.toString().toLowerCase().concat(disabled ? ' disabled' : ''),
+      selected: selected,
+      tabIndex: disabled ? -1 : 0
+    }, /*#__PURE__*/React.createElement(_TogglerStyles.ToggleSwitchContainer, null, /*#__PURE__*/React.createElement(_TogglerStyles.ToggleSwitch, {
       className: isSemantic ? 'semantic' : ''
-    }), label));
+    })), label && /*#__PURE__*/React.createElement("label", {
+      className: 'label',
+      htmlFor: id
+    }, label));
   };
 
   exports.default = ToggleSwitch;

package/dist/umd/Toggles/ToggleSwitch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Toggles/ToggleSwitch.tsx"],"names":["ToggleSwitch","onToggle","handleClick","isSemantic"],"mappings":";;;;;;;;;;;;;;;;;;;MAGA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAGA,QAAMA,YAAY,GAAG,CAAC;AAAA,IAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IAAA,QAAA;AAAA,IAAA,KAAA;AAAA,IAAA,UAAA;AAA6CC,IAAAA;AAA7C,GAAD,KAAgF;AACnG;AACF;AACA;AACE,UAAMC,WAAW,GAAG,MAAM;AACxB;AACA,UAAA,QAAA,EAAc;AACZ;AAHsB,OAAA,CAMxB;;;AACAD,MAAAA,QAAQ,CAAC,CAATA,QAAQ,CAARA;AAPF,KAAA;;AAUA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,oCAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAO,MAAA,IAAI,EAAX,UAAA;AAAuB,MAAA,QAAQ,EAA/B,QAAA;AAA2C,MAAA,OAAO,EAAlD,QAAA;AAA8D,MAAA,EAAE,EAAhE,EAAA;AAAsE,MAAA,QAAQ,EAAEC;AAAhF,KAAA,CADF,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,2BAAA,EAAA;AAAQ,MAAA,SAAS,EAAEC,UAAU,GAAA,UAAA,GAAgB;AAA7C,KAAA,CAFF,EAFJ,KAEI,CADF,CADF;AAdF,GAAA;;oBAyBA,Y","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom types.\n */\nimport { ToggleSwitchProps } from './TogglerTypes';\n\n/**\n * Import custom styles.\n */\nimport { ToggleSwitchContainer, ToggleSwitch as Switch } from './TogglerStyles';\n\nconst ToggleSwitch = ({ id, disabled, selected, label, isSemantic, onToggle }: ToggleSwitchProps) => {\n  /**\n   * Does all required pre-requisites and toggles the switcher state.\n   */\n  const handleClick = () => {\n    // If disabled, don't do anything\n    if (disabled) {\n      return;\n    }\n\n    // Toggle state change\n    onToggle(!selected);\n  };\n\n  return (\n    <div>\n      <ToggleSwitchContainer>\n        <input type=\"checkbox\" disabled={disabled} checked={selected} id={id} onChange={handleClick} />\n        <Switch className={isSemantic ? 'semantic' : ''} />\n        { label }\n      </ToggleSwitchContainer>\n    </div>\n  );\n};\n\nexport default ToggleSwitch;\n"],"file":"ToggleSwitch.js"}
+{"version":3,"sources":["../../../src/Toggles/ToggleSwitch.tsx"],"names":["ToggleSwitch","onToggle","handleClick","size","Size","disabled","isSemantic","label","id"],"mappings":";;;;;;;;;;;;;;;;;;;MAGA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAIA,QAAMA,YAAY,GAAG,CAAC;AAAA,IAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IAAA,QAAA;AAAA,IAAA,KAAA;AAAA,IAAA,UAAA;AAAA,IAAA,IAAA;AAAmDC,IAAAA;AAAnD,GAAD,KAAsF;AACzG;AACF;AACA;AACE,UAAMC,WAAW,GAAG,MAAM;AACxB;AACA,UAAA,QAAA,EAAc;AACZ;AAHsB,OAAA,CAMxB;;;AACAD,MAAAA,QAAQ,CAAC,CAATA,QAAQ,CAARA;AAPF,KAAA;;AAUAE,IAAAA,IAAI,GAAGA,IAAI,IAAIC,OAAfD,MAAAA;AAEA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,2BAAA,EAAA;AACE,MAAA,OAAO,EADT,WAAA;AAEE,MAAA,SAAS,EAAEA,IAAI,CAAJA,QAAAA,GAAAA,WAAAA,GAAAA,MAAAA,CAGDE,QAAQ,GAAA,WAAA,GALpB,EAEaF,CAFb;AAME,MAAA,QAAQ,EANV,QAAA;AAOE,MAAA,QAAQ,EAAEE,QAAQ,GAAG,CAAH,CAAA,GAAQ;AAP5B,KAAA,EAAA,aAQE,KAAA,CAAA,aAAA,CAAA,oCAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,2BAAA,EAAA;AAAQ,MAAA,SAAS,EAAEC,UAAU,GAAA,UAAA,GAAgB;AAA7C,KAAA,CADF,CARF,EAWGC,KAAK,IAAA,aACJ,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAO,MAAA,SAAS,EAAhB,OAAA;AAA2B,MAAA,OAAO,EAAEC;AAApC,KAAA,EAbN,KAaM,CAZJ,CADF;AAhBF,GAAA;;oBAqCA,Y","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom types.\n */\nimport { ToggleSwitchProps } from './TogglerTypes';\n\n/**\n * Import custom styles.\n */\nimport { ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch } from './TogglerStyles';\nimport { Size } from '..';\n\nconst ToggleSwitch = ({ id, disabled, selected, label, isSemantic, size, onToggle }: ToggleSwitchProps) => {\n  /**\n   * Does all required pre-requisites and toggles the switcher state.\n   */\n  const handleClick = () => {\n    // If disabled, don't do anything\n    if (disabled) {\n      return;\n    }\n\n    // Toggle state change\n    onToggle(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledSwitch\n      onClick={handleClick}\n      className={size\n        .toString()\n        .toLowerCase()\n        .concat(disabled ? ' disabled' : '')}\n      selected={selected}\n      tabIndex={disabled ? -1 : 0}>\n      <ToggleSwitchContainer>\n        <Switch className={isSemantic ? 'semantic' : ''} />\n      </ToggleSwitchContainer>\n      {label && (\n        <label className={'label'} htmlFor={id}>\n          {label}\n        </label>\n      )}\n    </StyledSwitch>\n  );\n};\n\nexport default ToggleSwitch;\n"],"file":"ToggleSwitch.js"}

package/dist/umd/Toggles/TogglerStyles.js

@@ -16,7 +16,7 @@
   Object.defineProperty(exports, "__esModule", {
     value: true
   });
-  exports.ToggleSwitch = exports.ToggleSwitchContainer = undefined;
+  exports.ToggleSwitch = exports.ToggleSwitchContainer = exports.StyledSwitch = undefined;
 
   var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
@@ -33,95 +33,121 @@
   /**
    * Import third-party libraries.
    */
-  const ToggleSwitchContainer = exports.ToggleSwitchContainer = _styledComponents2.default.label`
-  position: relative;
-  display: inline-block;
-  height: 28px;
-  width: auto;
+  const StyledSwitch = exports.StyledSwitch = _styledComponents2.default.div`
+  display: flex;
+  flex-direction: row;
+  width: max-content;
+  min-height: 48px;
+  min-width: 48px;
+  align-items: center;
+  cursor: pointer;
+  &.small {
+    ${(0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black)}
+  }
 
-  ${(0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black)}
+  &.medium {
+    ${(0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black)}
+  }
 
-  input {
-    opacity: 0;
-    width: 0;
-    height: 0;
+  &.large {
+    ${(0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black)}
+  }
+  &.disabled {
+    color: ${_styles.COLORS.neutral_300};
 
-    &:disabled + span {
-      background-color: ${_styles.COLORS.neutral_300} !important;
+    .label {
       cursor: not-allowed;
-
-      &:before {
-        background-color: ${_styles.COLORS.neutral_100} !important;
-        cursor: not-allowed;
-      }
     }
+  }
+  .label {
+    cursor: inherit;
+    margin-left: 8px;
+  }
 
-    &:checked {
-      &:disabled + span {
-        background-color: ${_styles.COLORS.neutral_300} !important;
-        cursor: not-allowed;
-
-        &:before {
-          background-color: ${_styles.COLORS.neutral_200} !important;
-          cursor: not-allowed;
-        }
-      }
-
-      &:hover + span {
-        background-color: ${_styles.COLORS.primary_700};
-
-        &.semantic {
-          background-color: ${_styles.COLORS.correct_500};
-        }
-
-        &:before {
-          background-color: ${_styles.COLORS.primary_100};
-        }
-      }
-
-      & + span {
-        background-color: ${_styles.COLORS.primary_500};
-
-        &.semantic {
-          background-color: ${_styles.COLORS.correct_500};
-        }
-
-        &:before {
-          -webkit-transform: translateX(12px);
-          -ms-transform: translateX(12px);
-          transform: translateX(12px);
-        }
-      }
+  &:not(.disabled):active label:first-of-type span {
+    &:before {
+      background-color: ${_styles.COLORS.primary_100};
     }
+  }
 
-    &:hover + span {
-      background-color: ${_styles.COLORS.neutral_500};
-
-      &.semantic {
-        background-color: ${_styles.COLORS.critical_500};
-      }
-
-      &:before {
-        background-color: ${_styles.COLORS.primary_100};
-      }
-    }
+  ${props => props.selected ? _styledComponents.css`
+          &.disabled label:first-of-type span {
+            background-color: ${_styles.COLORS.neutral_300} !important;
+            cursor: not-allowed;
+
+            &:before {
+              background-color: ${_styles.COLORS.neutral_200} !important;
+              cursor: not-allowed;
+            }
+          }
+          &:hover span {
+            &.semantic {
+              background-color: ${_styles.COLORS.correct_500};
+            }
+
+            &:before {
+              background-color: ${_styles.COLORS.primary_20};
+            }
+          }
+          label:first-of-type span {
+            background-color: ${_styles.COLORS.primary_500};
+
+            &.semantic {
+              background-color: ${_styles.COLORS.correct_500};
+            }
+
+            &:before {
+              -webkit-transform: translateX(20px);
+              -ms-transform: translateX(20px);
+              transform: translateX(20px);
+            }
+          }
+        ` : _styledComponents.css`
+          &.disabled label:first-of-type span {
+            background-color: ${_styles.COLORS.neutral_300} !important;
+            cursor: not-allowed;
+
+            &:before {
+              background-color: ${_styles.COLORS.neutral_100} !important;
+              cursor: not-allowed;
+            }
+          }
+          &:hover label:first-of-type span {
+            &.semantic {
+              background-color: ${_styles.COLORS.critical_500};
+            }
+
+            &:before {
+              background-color: ${_styles.COLORS.primary_20};
+            }
+          }
+        `}
+  &:not(.disabled):focus label:first-of-type span {
+    box-shadow: 0px 4px 12px ${_styles.COLORS.focus_25}, 0px 0px 8px ${_styles.COLORS.focus};
+  }
 
-    &:focus + span {
-      box-shadow: 0px 4px 12px ${_styles.COLORS.focus_25}, 0px 0px 8px ${_styles.COLORS.focus};
-    }
+  &:not(.disabled) label:first-of-type {
+    cursor: inherit;
   }
+`;
+  const ToggleSwitchContainer = exports.ToggleSwitchContainer = _styledComponents2.default.label`
+  position: relative;
+  align-items: center;
+  display: inline-flex;
+  height: 28px;
+  width: auto;
+  padding: 10px 6px;
 `;
   const ToggleSwitch = exports.ToggleSwitch = _styledComponents2.default.span`
   position: relative;
   display: inline-block;
-  margin-right: 10px;
   vertical-align: middle;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  width: 28px;
+  width: 36px;
   height: 16px;
   background-color: ${_styles.COLORS.neutral_500};
   border-radius: 100px;
@@ -136,10 +162,11 @@
     height: 12px;
     width: 12px;
     left: 2px;
-    bottom: 2px;
+    top: calc(50% - 6px);
     background-color: ${_styles.COLORS.white};
-    -webkit-transition: 0.4s;
-    transition: 0.4s;
+    -webkit-transition: background-color 0.1s, transform 0.1s;
+    transition: 0.1s;
+    transition-timing-function: ease-in-out;
     border-radius: 50%;
   }
 `;

package/dist/umd/Toggles/TogglerStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Toggles/TogglerStyles.ts"],"names":["ToggleSwitchContainer","styled","label","ComponentSStyling","ComponentTextStyle","COLORS","neutral_300","neutral_100","neutral_200","primary_700","correct_500","primary_100","primary_500","neutral_500","critical_500","focus_25","focus","ToggleSwitch","span","white"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AAIO,QAAMA,qBAAqB,WAArBA,qBAAqB,GAAGC,2BAAOC,KAAM;AAClD;AACA;AACA;AACA;AACA;AACA,IAAIC,mCAAkBC,+BAAD,OAAjBD,EAA8CE,eAA7B,KAAjBF,CAA4D;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BE,eAAOC,WAAY;AAC7C;AACA;AACA;AACA,4BAA4BD,eAAOE,WAAY;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4BF,eAAOC,WAAY;AAC/C;AACA;AACA;AACA,8BAA8BD,eAAOG,WAAY;AACjD;AACA;AACA;AACA;AACA;AACA,4BAA4BH,eAAOI,WAAY;AAC/C;AACA;AACA,8BAA8BJ,eAAOK,WAAY;AACjD;AACA;AACA;AACA,8BAA8BL,eAAOM,WAAY;AACjD;AACA;AACA;AACA;AACA,4BAA4BN,eAAOO,WAAY;AAC/C;AACA;AACA,8BAA8BP,eAAOK,WAAY;AACjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BL,eAAOQ,WAAY;AAC7C;AACA;AACA,4BAA4BR,eAAOS,YAAa;AAChD;AACA;AACA;AACA,4BAA4BT,eAAOM,WAAY;AAC/C;AACA;AACA;AACA;AACA,iCAAiCN,eAAOU,QAAS,iBAAgBV,eAAOW,KAAM;AAC9E;AACA;AA5EO,CAAA;AA+EA,QAAMC,YAAY,WAAZA,YAAY,GAAGhB,2BAAOiB,IAAK;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBb,eAAOQ,WAAY;AACzC;AACA;AACA;AACA,wBAAwBR,eAAOS,YAAa;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBT,eAAOc,KAAM;AACrC;AACA;AACA;AACA;AA9BO,CAAA","sourcesContent":["/**\n * Import custom styles.\n */\nimport { COLORS } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nexport const ToggleSwitchContainer = styled.label`\n  position: relative;\n  display: inline-block;\n  height: 28px;\n  width: auto;\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  input {\n    opacity: 0;\n    width: 0;\n    height: 0;\n\n    &:disabled + 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\n    &:checked {\n      &:disabled + 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\n      &:hover + span {\n        background-color: ${COLORS.primary_700};\n\n        &.semantic {\n          background-color: ${COLORS.correct_500};\n        }\n\n        &:before {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n\n      & + span {\n        background-color: ${COLORS.primary_500};\n\n        &.semantic {\n          background-color: ${COLORS.correct_500};\n        }\n\n        &:before {\n          -webkit-transform: translateX(12px);\n          -ms-transform: translateX(12px);\n          transform: translateX(12px);\n        }\n      }\n    }\n\n    &:hover + span {\n      background-color: ${COLORS.neutral_500};\n\n      &.semantic {\n        background-color: ${COLORS.critical_500};\n      }\n\n      &:before {\n        background-color: ${COLORS.primary_100};\n      }\n    }\n\n    &:focus + span {\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};\n    }\n  }\n`;\n\nexport const ToggleSwitch = styled.span`\n  position: relative;\n  display: inline-block;\n  margin-right: 10px;\n  vertical-align: middle;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 28px;\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    bottom: 2px;\n    background-color: ${COLORS.white};\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    border-radius: 50%;\n  }\n`;\n"],"file":"TogglerStyles.js"}
+{"version":3,"sources":["../../../src/Toggles/TogglerStyles.ts"],"names":["StyledSwitch","styled","div","ComponentSStyling","ComponentTextStyle","COLORS","ComponentMStyling","ComponentLStyling","neutral_300","primary_100","props","css","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","focus_25","focus","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AAIO,QAAMA,YAAY,WAAZA,YAAY,GAAGC,2BAAOC,GAAuC;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,mCAAkBC,+BAAD,OAAjBD,EAA8CE,eAA7B,KAAjBF,CAA4D;AAClE;AACA;AACA;AACA,MAAMG,mCAAkBF,+BAAD,OAAjBE,EAA8CD,eAA7B,KAAjBC,CAA4D;AAClE;AACA;AACA;AACA,MAAMC,mCAAkBH,+BAAD,OAAjBG,EAA8CF,eAA7B,KAAjBE,CAA4D;AAClE;AACA;AACA,aAAaF,eAAOG,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BH,eAAOI,WAAY;AAC7C;AACA;AACA;AACA,IAAKC,KAAD,IACA,KAAK,CAAL,QAAA,GACIC,qBAAI;AACZ;AACA,gCAAgCN,eAAOG,WAAY;AACnD;AACA;AACA;AACA,kCAAkCH,eAAOO,WAAY;AACrD;AACA;AACA;AACA;AACA;AACA,kCAAkCP,eAAOQ,WAAY;AACrD;AACA;AACA;AACA,kCAAkCR,eAAOS,UAAW;AACpD;AACA;AACA;AACA,gCAAgCT,eAAOU,WAAY;AACnD;AACA;AACA,kCAAkCV,eAAOQ,WAAY;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAhCI,SAAA,GAkCIF,qBAAI;AACZ;AACA,gCAAgCN,eAAOG,WAAY;AACnD;AACA;AACA;AACA,kCAAkCH,eAAOW,WAAY;AACrD;AACA;AACA;AACA;AACA;AACA,kCAAkCX,eAAOY,YAAa;AACtD;AACA;AACA;AACA,kCAAkCZ,eAAOS,UAAW;AACpD;AACA;AACA,SAAU;AACV;AACA,+BAA+BT,eAAOa,QAAS,iBAAgBb,eAAOc,KAAM;AAC5E;AACA;AACA;AACA;AACA;AAlGO,CAAA;AAqGA,QAAMC,qBAAqB,WAArBA,qBAAqB,GAAGnB,2BAAOoB,KAAM;AAClD;AACA;AACA;AACA;AACA;AACA;AANO,CAAA;AASA,QAAMC,YAAY,WAAZA,YAAY,GAAGrB,2BAAOsB,IAAK;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBlB,eAAOmB,WAAY;AACzC;AACA;AACA;AACA,wBAAwBnB,eAAOY,YAAa;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBZ,eAAOoB,KAAM;AACrC;AACA;AACA;AACA;AACA;AA9BO,CAAA","sourcesContent":["/**\n * Import custom styles.\n */\nimport { COLORS } 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 label:first-of-type span {\n    box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};\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/umd/Toggles/TogglerTypes.js

@@ -16,10 +16,5 @@
   Object.defineProperty(exports, "__esModule", {
     value: true
   });
-
-  /**
-   * Types for the table.
-   */
-  ;
 });
 //# sourceMappingURL=TogglerTypes.js.map

package/dist/umd/Toggles/TogglerTypes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Toggles/TogglerTypes.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AAQC","sourcesContent":["/**\n * Types for the table.\n */\nexport interface ToggleSwitchProps {\n  id: string;\n  label?: string;\n  disabled?: boolean;\n  selected?: boolean;\n  isSemantic?: boolean;\n  onToggle: (selected: boolean) => void;\n};\n"],"file":"TogglerTypes.js"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"TogglerTypes.js"}

package/dist/umd/Tooltips/TooltipStyles.js

@@ -0,0 +1,101 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "styled-components", "../types", "../styles", "../styles/typography"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("styled-components"), require("../types"), require("../styles"), require("../styles/typography"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.styledComponents, global.types, global.styles, global.typography);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _styledComponents, _types, _styles, _typography) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.TooltipContainer = exports.TooltipTrigger = exports.Tooltip = undefined;
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  const distanceToEdge = size => {
+    return size == _types.Size.XSmall ? '8px' : !size || size == _types.Size.Small ? '12px' : '16px';
+  };
+
+  const Tooltip = exports.Tooltip = _styledComponents2.default.div`
+
+    pointer-events: none;
+    ${props => props.size == _types.Size.Small || props.size != _types.Size.Medium ? (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.white) : ''}
+    ${props => props.size == _types.Size.XSmall ? (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.white) : ''}
+    ${props => props.size == _types.Size.Medium ? (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.white) : ''}
+    ${props => props.align == 'center' ? 'text-align: center;' : ''}
+    box-shadow: ${_styles.BOXSHADOWS.BOXSHADOW_L2};
+    
+    padding: ${props => props.size == _types.Size.XSmall ? '4px 8px' : props.size == _types.Size.Medium ? '8px 12px' : '6px 10px'};
+    border-radius: 2px;
+    width: max-content;
+    height: ${props => props.height};
+    max-width: 34ems;
+    background: ${_styles.COLORS.primary_800};
+    position: absolute; 
+    opacity: 0; 
+    z-index: 1;
+    ${props => props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : ''}
+
+    ${props => props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : ''}
+    ${props => props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : ''}
+            
+    ${props => props.position == 'left' || props.position == 'right' ? '' : props.align == 'start' ? 'left: 0%;' : props.align == 'end' ? 'right: 0%;' : 'left: 50%; transform: translateX(-50%);'}
+
+
+&::after {
+    ${props => !props.withArrow ? 'display: none;' : ''}
+    content: "";
+    position: absolute;
+    ${props => props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : ''}
+    
+    ${props => props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : ''}
+    ${props => props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : ''}
+
+    ${props => props.position == 'left' || props.position == 'right' ? '' : props.align == 'start' ? `left: ${distanceToEdge(props.size)};` : props.align == 'end' ? `right: ${distanceToEdge(props.size)};` : 'left: 50%;'}
+
+    ${props => props.position == 'left' ? '' : 'margin-left: -5px;'}
+    margin: -0.5px;
+    border-width: 4px;
+    border-style: solid;
+    border-color: ${props => props.position == 'top' ? _styles.COLORS.primary_800 : 'transparent'} 
+                    ${props => props.position == 'right' ? _styles.COLORS.primary_800 : 'transparent'} 
+                    ${props => props.position == 'bottom' ? _styles.COLORS.primary_800 : 'transparent'} 
+                    ${props => props.position == 'left' ? _styles.COLORS.primary_800 : 'transparent'};
+  }
+`;
+  Tooltip.defaultProps = {
+    withArrow: false,
+    size: _types.Size.Small,
+    height: 'auto',
+    align: 'center',
+    position: 'bottom'
+  };
+  const TooltipTrigger = exports.TooltipTrigger = _styledComponents.css`
+  &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {
+    opacity: 1;
+    transition: 0.5s;
+    transition-delay: 1s;
+  }
+`;
+  const TooltipContainer = exports.TooltipContainer = _styledComponents2.default.div`
+  display: inline-block;
+  position: relative;
+
+  ${TooltipTrigger}
+`;
+});
+//# sourceMappingURL=TooltipStyles.js.map

package/dist/umd/Tooltips/TooltipStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Tooltips/TooltipStyles.tsx"],"names":["distanceToEdge","size","Size","Tooltip","styled","div","props","ComponentSStyling","ComponentTextStyle","COLORS","ComponentXSStyling","ComponentMStyling","BOXSHADOWS","BOXSHADOW_L2","height","primary_800","withArrow","align","position","TooltipTrigger","css","TooltipContainer"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport { BOXSHADOWS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\n\nconst distanceToEdge = (size: Size | undefined) => {\n  return size == Size.XSmall ? '8px' : (!size || size == Size.Small) ? '12px' : '16px';\n}\n\nexport const Tooltip = styled.div<{\n  withArrow?: boolean;\n  size?: Size;\n  height?: string;\n  align?: 'start' | 'end' | 'center' | undefined;\n  position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\n}>`\n\n    pointer-events: none;\n    ${props => (props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.XSmall  ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.align == 'center' ? 'text-align: center;' : '')}\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n    \n    padding: ${props => props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px'};\n    border-radius: 2px;\n    width: max-content;\n    height: ${props => props.height};\n    max-width: 34ems;\n    background: ${COLORS.primary_800};\n    position: absolute; \n    opacity: 0; \n    z-index: 1;\n    ${props => (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '')}\n\n    ${props => (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\n    ${props => (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\n            \n    ${props =>\n      props.position == 'left' || props.position == 'right'\n        ? ''\n        : props.align == 'start'\n        ? 'left: 0%;'\n        : props.align == 'end'\n        ? 'right: 0%;'\n        : 'left: 50%; transform: translateX(-50%);'}\n\n\n&::after {\n    ${props => (!props.withArrow ? 'display: none;' : '')}\n    content: \"\";\n    position: absolute;\n    ${props => (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '')}\n    \n    ${props => (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n    ${props => (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n\n    ${props =>\n      props.position == 'left' || props.position == 'right' ? '' : \n      props.align == 'start' ? `left: ${distanceToEdge(props.size)};` : props.align == 'end' ? `right: ${distanceToEdge(props.size)};` : 'left: 50%;'}\n\n    ${props => (props.position == 'left' ? '' : 'margin-left: -5px;')}\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ${props => (props.position == 'top' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'right' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n  }\n`;\n\nTooltip.defaultProps = {\n  withArrow: false,\n  size: Size.Small,\n  height: 'auto',\n  align: 'center',\n  position: 'bottom'\n}\n\nexport const TooltipTrigger = css`\n  &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n    opacity: 1;\n    transition: 0.5s;\n    transition-delay: 1s;\n  }\n`;\n\nexport const TooltipContainer = styled.div`\n  display: inline-block;\n  position: relative;\n\n  ${TooltipTrigger}\n`;\n"],"file":"TooltipStyles.js"}

package/dist/umd/Tooltips/TooltipTypes.js

@@ -0,0 +1,25 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  /**
+   * Types for the table.
+   */
+  ;
+});
+//# sourceMappingURL=TooltipTypes.js.map

package/dist/umd/Tooltips/TooltipTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Tooltips/TooltipTypes.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAEA;AACA;AACA;AAUG","sourcesContent":["import { Size } from \"../types\";\n\n/**\n * Types for the table.\n */\n export interface TooltipProps {\n    label?: string;\n    withArrow?: boolean;\n    width?: string;\n    size?: Size;\n    height?: string;\n    align? : 'start' | 'end' | 'center' | undefined;\n    position? : 'top' | 'right' | 'bottom' | 'left' | undefined;\n    children?: React.ReactNode;\n  };\n  "],"file":"TooltipTypes.js"}