@laerdal/life-react-components 3.5.1-uss.hackathon → 3.5.2

package/dist/Toggles/ToggleButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.cjs","names":["Wrapper","styled","div","IconButtonContentStyles","COLORS","white","primary_500","neutral_300","ToggleButton","React","forwardRef","ref","id","active","onChange","disabled","defaultState","activeState","className","rest","useState","isActive","setIsActive","useEffect","cls","color","icon"],"sources":["../../src/Toggles/ToggleButton.tsx"],"sourcesContent":["import React from 'react';\r\nimport { IconButton } from '../Button';\r\nimport styled from 'styled-components';\r\nimport { IconButtonContentStyles } from '../Button/Iconbutton';\r\nimport { COLORS } from '../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  ${IconButtonContentStyles} {\r\n    transition: all 0.1s ease-in-out;\r\n  }\r\n\r\n  &.disabled,\r\n  &.active:not(.state-change) {\r\n    ${IconButtonContentStyles} {\r\n      background: ${COLORS.white};\r\n    }\r\n  }\r\n\r\n  &.active:not(.state-change) {\r\n    ${IconButtonContentStyles}:after {\r\n      content: '';\r\n      position: absolute;\r\n      left: 12px;\r\n      bottom: 1px;\r\n      background-color: ${COLORS.primary_500};\r\n      border-radius: 4px;\r\n      height: 4px;\r\n      width: 24px;\r\n    }\r\n  }\r\n\r\n  &.disabled:not(.state-change) {\r\n    ${IconButtonContentStyles}:after {\r\n      background: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface ToggleButtonState {\r\n  icon: React.ReactNode;\r\n  color?: string;\r\n}\r\n\r\nexport interface ToggleButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'onClick'> {\r\n  active: boolean;\r\n  onChange?: (value: boolean) => void;\r\n  disabled?: boolean;\r\n\r\n  defaultState: ToggleButtonState;\r\n  activeState?: ToggleButtonState;\r\n}\r\n\r\nexport const ToggleButton = React.forwardRef(({\r\n                                                id,\r\n                                                active,\r\n                                                onChange,\r\n                                                disabled,\r\n                                                defaultState,\r\n                                                activeState,\r\n                                                className,\r\n                                                ...rest\r\n                                              }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement>) => {\r\n  const [isActive, setIsActive] = React.useState(false);\r\n\r\n  React.useEffect(() => setIsActive(active), [active]);\r\n\r\n  const cls = `${className || ''} ${isActive ? 'active' : ''} ${activeState ? 'state-change' : ''} ${disabled ? 'disabled' : ''}`;\r\n\r\n  return (\r\n    <Wrapper className={cls}>\r\n      <IconButton\r\n        variant={'secondary'}\r\n        ref={ref}\r\n        useTransparentBackground={true}\r\n        shape={'circular'}\r\n        action={() => {\r\n          setIsActive(!isActive);\r\n          if (onChange) {\r\n            onChange(!isActive);\r\n          }\r\n        }}\r\n        id={id}\r\n        iconColor={isActive ? activeState?.color ?? defaultState.color : defaultState.color}\r\n        disabled={disabled}\r\n        aria-pressed={isActive}\r\n        {...rest}>\r\n        {isActive ? activeState?.icon ?? defaultState.icon : defaultState.icon}\r\n      </IconButton>\r\n    </Wrapper>\r\n  );\r\n});\r\n\r\nexport default ToggleButton;\r\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAmC;AAAA;AAAA;AAAA;AAAA;AAEnC,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,okBACtBC,mCAAuB,EAMrBA,mCAAuB,EACTC,cAAM,CAACC,KAAK,EAK1BF,mCAAuB,EAKHC,cAAM,CAACE,WAAW,EAQtCH,mCAAuB,EACTC,cAAM,CAACG,WAAW,CAGrC;AAgBM,IAAMC,YAAY,gBAAGC,cAAK,CAACC,UAAU,CAAC,gBASuBC,GAAiC,EAAK;EAAA;EAAA,IAR1DC,EAAE,QAAFA,EAAE;IACFC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;IACZC,WAAW,QAAXA,WAAW;IACXC,SAAS,QAATA,SAAS;IACNC,IAAI;EAErD,sBAAgCV,cAAK,CAACW,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA9CC,QAAQ;IAAEC,WAAW;EAE5Bb,cAAK,CAACc,SAAS,CAAC;IAAA,OAAMD,WAAW,CAACT,MAAM,CAAC;EAAA,GAAE,CAACA,MAAM,CAAC,CAAC;EAEpD,IAAMW,GAAG,aAAMN,SAAS,IAAI,EAAE,cAAIG,QAAQ,GAAG,QAAQ,GAAG,EAAE,cAAIJ,WAAW,GAAG,cAAc,GAAG,EAAE,cAAIF,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE;EAE/H,oBACE,qBAAC,OAAO;IAAC,SAAS,EAAES,GAAI;IAAA,uBACtB,qBAAC,kBAAU;MACT,OAAO,EAAE,WAAY;MACrB,GAAG,EAAEb,GAAI;MACT,wBAAwB,EAAE,IAAK;MAC/B,KAAK,EAAE,UAAW;MAClB,MAAM,EAAE,kBAAM;QACZW,WAAW,CAAC,CAACD,QAAQ,CAAC;QACtB,IAAIP,QAAQ,EAAE;UACZA,QAAQ,CAAC,CAACO,QAAQ,CAAC;QACrB;MACF,CAAE;MACF,EAAE,EAAET,EAAG;MACP,SAAS,EAAES,QAAQ,yBAAGJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEQ,KAAK,mEAAIT,YAAY,CAACS,KAAK,GAAGT,YAAY,CAACS,KAAM;MACpF,QAAQ,EAAEV,QAAS;MACnB,gBAAcM;IAAS,GACnBF,IAAI;MAAA,UACPE,QAAQ,wBAAGJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAES,IAAI,iEAAIV,YAAY,CAACU,IAAI,GAAGV,YAAY,CAACU;IAAI;EAC3D,EACL;AAEd,CAAC,CAAC;AAAC;AAAA;EA9CDb,MAAM;EACNC,QAAQ;EACRC,QAAQ;EAERC,YAAY;IATZU,IAAI;IACJD,KAAK;EAAA;EASLR,WAAW;IAVXS,IAAI;IACJD,KAAK;EAAA;AAAA;AAAA,eAoDQjB,YAAY;AAAA"}
+{"version":3,"file":"ToggleButton.cjs","names":["_react","_interopRequireDefault","require","_Button","_styledComponents","_Iconbutton","_styles","_jsxRuntime","_excluded","_templateObject","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","Wrapper","styled","div","_taggedTemplateLiteral2","IconButtonContentStyles","props","COLORS","getColor","theme","ToggleButton","React","forwardRef","_ref","ref","_activeState$color","_activeState$icon","id","active","onChange","disabled","defaultState","activeState","className","rest","_objectWithoutProperties2","_React$useState","useState","_React$useState2","_slicedToArray2","isActive","setIsActive","useEffect","cls","concat","jsx","children","IconButton","variant","useTransparentBackground","shape","action","iconColor","color","icon","exports","propTypes","_propTypes","bool","isRequired","func","node","string","_default"],"sources":["../../src/Toggles/ToggleButton.tsx"],"sourcesContent":["import React from 'react';\r\nimport { IconButton } from '../Button';\r\nimport styled from 'styled-components';\r\nimport { IconButtonContentStyles } from '../Button/Iconbutton';\r\nimport { COLORS } from '../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  ${IconButtonContentStyles} {\r\n    transition: all 0.1s ease-in-out;\r\n  }\r\n\r\n  &.disabled,\r\n  &.active:not(.state-change) {\r\n    ${IconButtonContentStyles} {\r\n      background: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.active:not(.state-change) {\r\n    ${IconButtonContentStyles}:after {\r\n      content: '';\r\n      position: absolute;\r\n      left: 12px;\r\n      bottom: 1px;\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n      border-radius: 4px;\r\n      height: 4px;\r\n      width: 24px;\r\n    }\r\n  }\r\n\r\n  &.disabled:not(.state-change) {\r\n    ${IconButtonContentStyles}:after {\r\n      background: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface ToggleButtonState {\r\n  icon: React.ReactNode;\r\n  color?: string;\r\n}\r\n\r\nexport interface ToggleButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'onClick'> {\r\n  /** Required. Initial state of the toggle. */\r\n  active: boolean;\r\n  /** Optional. Handler to be called when toggle state changes. */\r\n  onChange?: (value: boolean) => void;\r\n  /** Optional. If set user can not interact with ToggleButton. */\r\n  disabled?: boolean;\r\n  /** Required. Icon and color of toggle in default state. */\r\n  defaultState: ToggleButtonState;\r\n  /** Optional. Icon and color of toggle in active state. */\r\n  activeState?: ToggleButtonState;\r\n}\r\n\r\nexport const ToggleButton = React.forwardRef(({\r\n                                                id,\r\n                                                active,\r\n                                                onChange,\r\n                                                disabled,\r\n                                                defaultState,\r\n                                                activeState,\r\n                                                className,\r\n                                                ...rest\r\n                                              }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement>) => {\r\n  const [isActive, setIsActive] = React.useState(false);\r\n\r\n  React.useEffect(() => setIsActive(active), [active]);\r\n\r\n  const cls = `${className || ''} ${isActive ? 'active' : ''} ${activeState ? 'state-change' : ''} ${disabled ? 'disabled' : ''}`;\r\n\r\n  return (\r\n    <Wrapper className={cls}>\r\n      <IconButton\r\n        variant={'secondary'}\r\n        ref={ref}\r\n        useTransparentBackground={true}\r\n        shape={'circular'}\r\n        action={() => {\r\n          setIsActive(!isActive);\r\n          if (onChange) {\r\n            onChange(!isActive);\r\n          }\r\n        }}\r\n        id={id}\r\n        iconColor={isActive ? activeState?.color ?? defaultState.color : defaultState.color}\r\n        disabled={disabled}\r\n        aria-pressed={isActive}\r\n        {...rest}>\r\n        {isActive ? activeState?.icon ?? defaultState.icon : defaultState.icon}\r\n      </IconButton>\r\n    </Wrapper>\r\n  );\r\n});\r\n\r\nexport default ToggleButton;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Toggles/ToggleButton.d.ts

@@ -4,10 +4,15 @@ export interface ToggleButtonState {
     color?: string;
 }
 export interface ToggleButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'onClick'> {
+    /** Required. Initial state of the toggle. */
     active: boolean;
+    /** Optional. Handler to be called when toggle state changes. */
     onChange?: (value: boolean) => void;
+    /** Optional. If set user can not interact with ToggleButton. */
     disabled?: boolean;
+    /** Required. Icon and color of toggle in default state. */
     defaultState: ToggleButtonState;
+    /** Optional. Icon and color of toggle in active state. */
     activeState?: ToggleButtonState;
 }
 export declare const ToggleButton: React.ForwardRefExoticComponent<ToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/Toggles/ToggleButton.js

@@ -5,15 +5,21 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLit
 import _pt from "prop-types";
 var _excluded = ["id", "active", "onChange", "disabled", "defaultState", "activeState", "className"];
 var _templateObject;
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import { IconButton } from '../Button';
 import styled from 'styled-components';
 import { IconButtonContentStyles } from '../Button/Iconbutton';
 import { COLORS } from '../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &.active:not(.state-change) {\n    ", ":after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ", ";\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ", ":after {\n      background: ", ";\n    }\n  }\n"])), IconButtonContentStyles, IconButtonContentStyles, COLORS.white, IconButtonContentStyles, COLORS.primary_500, IconButtonContentStyles, COLORS.neutral_300);
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &.active:not(.state-change) {\n    ", ":after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ", ";\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ", ":after {\n      background: ", ";\n    }\n  }\n"])), IconButtonContentStyles, IconButtonContentStyles, function (props) {
+  return COLORS.getColor('white', props.theme);
+}, IconButtonContentStyles, function (props) {
+  return COLORS.getColor('primary_500', props.theme);
+}, IconButtonContentStyles, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+});
 export var ToggleButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _activeState$color, _activeState$icon;
   var id = _ref.id,

package/dist/Toggles/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.js","names":["React","IconButton","styled","IconButtonContentStyles","COLORS","Wrapper","div","white","primary_500","neutral_300","ToggleButton","forwardRef","ref","id","active","onChange","disabled","defaultState","activeState","className","rest","useState","isActive","setIsActive","useEffect","cls","color","icon"],"sources":["../../src/Toggles/ToggleButton.tsx"],"sourcesContent":["import React from 'react';\r\nimport { IconButton } from '../Button';\r\nimport styled from 'styled-components';\r\nimport { IconButtonContentStyles } from '../Button/Iconbutton';\r\nimport { COLORS } from '../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  ${IconButtonContentStyles} {\r\n    transition: all 0.1s ease-in-out;\r\n  }\r\n\r\n  &.disabled,\r\n  &.active:not(.state-change) {\r\n    ${IconButtonContentStyles} {\r\n      background: ${COLORS.white};\r\n    }\r\n  }\r\n\r\n  &.active:not(.state-change) {\r\n    ${IconButtonContentStyles}:after {\r\n      content: '';\r\n      position: absolute;\r\n      left: 12px;\r\n      bottom: 1px;\r\n      background-color: ${COLORS.primary_500};\r\n      border-radius: 4px;\r\n      height: 4px;\r\n      width: 24px;\r\n    }\r\n  }\r\n\r\n  &.disabled:not(.state-change) {\r\n    ${IconButtonContentStyles}:after {\r\n      background: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface ToggleButtonState {\r\n  icon: React.ReactNode;\r\n  color?: string;\r\n}\r\n\r\nexport interface ToggleButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'onClick'> {\r\n  active: boolean;\r\n  onChange?: (value: boolean) => void;\r\n  disabled?: boolean;\r\n\r\n  defaultState: ToggleButtonState;\r\n  activeState?: ToggleButtonState;\r\n}\r\n\r\nexport const ToggleButton = React.forwardRef(({\r\n                                                id,\r\n                                                active,\r\n                                                onChange,\r\n                                                disabled,\r\n                                                defaultState,\r\n                                                activeState,\r\n                                                className,\r\n                                                ...rest\r\n                                              }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement>) => {\r\n  const [isActive, setIsActive] = React.useState(false);\r\n\r\n  React.useEffect(() => setIsActive(active), [active]);\r\n\r\n  const cls = `${className || ''} ${isActive ? 'active' : ''} ${activeState ? 'state-change' : ''} ${disabled ? 'disabled' : ''}`;\r\n\r\n  return (\r\n    <Wrapper className={cls}>\r\n      <IconButton\r\n        variant={'secondary'}\r\n        ref={ref}\r\n        useTransparentBackground={true}\r\n        shape={'circular'}\r\n        action={() => {\r\n          setIsActive(!isActive);\r\n          if (onChange) {\r\n            onChange(!isActive);\r\n          }\r\n        }}\r\n        id={id}\r\n        iconColor={isActive ? activeState?.color ?? defaultState.color : defaultState.color}\r\n        disabled={disabled}\r\n        aria-pressed={isActive}\r\n        {...rest}>\r\n        {isActive ? activeState?.icon ?? defaultState.icon : defaultState.icon}\r\n      </IconButton>\r\n    </Wrapper>\r\n  );\r\n});\r\n\r\nexport default ToggleButton;\r\n"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,WAAW;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,uBAAuB,QAAQ,sBAAsB;AAC9D,SAASC,MAAM,QAAQ,WAAW;AAAC;AAEnC,IAAMC,OAAO,GAAGH,MAAM,CAACI,GAAG,sjBACtBH,uBAAuB,EAMrBA,uBAAuB,EACTC,MAAM,CAACG,KAAK,EAK1BJ,uBAAuB,EAKHC,MAAM,CAACI,WAAW,EAQtCL,uBAAuB,EACTC,MAAM,CAACK,WAAW,CAGrC;AAgBD,OAAO,IAAMC,YAAY,gBAAGV,KAAK,CAACW,UAAU,CAAC,gBASuBC,GAAiC,EAAK;EAAA;EAAA,IAR1DC,EAAE,QAAFA,EAAE;IACFC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;IACZC,WAAW,QAAXA,WAAW;IACXC,SAAS,QAATA,SAAS;IACNC,IAAI;EAErD,sBAAgCpB,KAAK,CAACqB,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA9CC,QAAQ;IAAEC,WAAW;EAE5BvB,KAAK,CAACwB,SAAS,CAAC;IAAA,OAAMD,WAAW,CAACT,MAAM,CAAC;EAAA,GAAE,CAACA,MAAM,CAAC,CAAC;EAEpD,IAAMW,GAAG,aAAMN,SAAS,IAAI,EAAE,cAAIG,QAAQ,GAAG,QAAQ,GAAG,EAAE,cAAIJ,WAAW,GAAG,cAAc,GAAG,EAAE,cAAIF,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE;EAE/H,oBACE,KAAC,OAAO;IAAC,SAAS,EAAES,GAAI;IAAA,uBACtB,KAAC,UAAU;MACT,OAAO,EAAE,WAAY;MACrB,GAAG,EAAEb,GAAI;MACT,wBAAwB,EAAE,IAAK;MAC/B,KAAK,EAAE,UAAW;MAClB,MAAM,EAAE,kBAAM;QACZW,WAAW,CAAC,CAACD,QAAQ,CAAC;QACtB,IAAIP,QAAQ,EAAE;UACZA,QAAQ,CAAC,CAACO,QAAQ,CAAC;QACrB;MACF,CAAE;MACF,EAAE,EAAET,EAAG;MACP,SAAS,EAAES,QAAQ,yBAAGJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEQ,KAAK,mEAAIT,YAAY,CAACS,KAAK,GAAGT,YAAY,CAACS,KAAM;MACpF,QAAQ,EAAEV,QAAS;MACnB,gBAAcM;IAAS,GACnBF,IAAI;MAAA,UACPE,QAAQ,wBAAGJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAES,IAAI,iEAAIV,YAAY,CAACU,IAAI,GAAGV,YAAY,CAACU;IAAI;EAC3D,EACL;AAEd,CAAC,CAAC;AAAC;EA9CDb,MAAM;EACNC,QAAQ;EACRC,QAAQ;EAERC,YAAY;IATZU,IAAI;IACJD,KAAK;EAAA;EASLR,WAAW;IAVXS,IAAI;IACJD,KAAK;EAAA;AAAA;AAoDP,eAAehB,YAAY"}
+{"version":3,"file":"ToggleButton.js","names":["React","IconButton","styled","IconButtonContentStyles","COLORS","jsx","_jsx","Wrapper","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","ToggleButton","forwardRef","_ref","ref","_activeState$color","_activeState$icon","id","active","onChange","disabled","defaultState","activeState","className","rest","_objectWithoutProperties","_excluded","_React$useState","useState","_React$useState2","_slicedToArray","isActive","setIsActive","useEffect","cls","concat","children","_objectSpread","variant","useTransparentBackground","shape","action","iconColor","color","icon","propTypes","_pt","bool","isRequired","func","node","string"],"sources":["../../src/Toggles/ToggleButton.tsx"],"sourcesContent":["import React from 'react';\r\nimport { IconButton } from '../Button';\r\nimport styled from 'styled-components';\r\nimport { IconButtonContentStyles } from '../Button/Iconbutton';\r\nimport { COLORS } from '../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  ${IconButtonContentStyles} {\r\n    transition: all 0.1s ease-in-out;\r\n  }\r\n\r\n  &.disabled,\r\n  &.active:not(.state-change) {\r\n    ${IconButtonContentStyles} {\r\n      background: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.active:not(.state-change) {\r\n    ${IconButtonContentStyles}:after {\r\n      content: '';\r\n      position: absolute;\r\n      left: 12px;\r\n      bottom: 1px;\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n      border-radius: 4px;\r\n      height: 4px;\r\n      width: 24px;\r\n    }\r\n  }\r\n\r\n  &.disabled:not(.state-change) {\r\n    ${IconButtonContentStyles}:after {\r\n      background: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface ToggleButtonState {\r\n  icon: React.ReactNode;\r\n  color?: string;\r\n}\r\n\r\nexport interface ToggleButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'onClick'> {\r\n  /** Required. Initial state of the toggle. */\r\n  active: boolean;\r\n  /** Optional. Handler to be called when toggle state changes. */\r\n  onChange?: (value: boolean) => void;\r\n  /** Optional. If set user can not interact with ToggleButton. */\r\n  disabled?: boolean;\r\n  /** Required. Icon and color of toggle in default state. */\r\n  defaultState: ToggleButtonState;\r\n  /** Optional. Icon and color of toggle in active state. */\r\n  activeState?: ToggleButtonState;\r\n}\r\n\r\nexport const ToggleButton = React.forwardRef(({\r\n                                                id,\r\n                                                active,\r\n                                                onChange,\r\n                                                disabled,\r\n                                                defaultState,\r\n                                                activeState,\r\n                                                className,\r\n                                                ...rest\r\n                                              }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement>) => {\r\n  const [isActive, setIsActive] = React.useState(false);\r\n\r\n  React.useEffect(() => setIsActive(active), [active]);\r\n\r\n  const cls = `${className || ''} ${isActive ? 'active' : ''} ${activeState ? 'state-change' : ''} ${disabled ? 'disabled' : ''}`;\r\n\r\n  return (\r\n    <Wrapper className={cls}>\r\n      <IconButton\r\n        variant={'secondary'}\r\n        ref={ref}\r\n        useTransparentBackground={true}\r\n        shape={'circular'}\r\n        action={() => {\r\n          setIsActive(!isActive);\r\n          if (onChange) {\r\n            onChange(!isActive);\r\n          }\r\n        }}\r\n        id={id}\r\n        iconColor={isActive ? activeState?.color ?? defaultState.color : defaultState.color}\r\n        disabled={disabled}\r\n        aria-pressed={isActive}\r\n        {...rest}>\r\n        {isActive ? activeState?.icon ?? defaultState.icon : defaultState.icon}\r\n      </IconButton>\r\n    </Wrapper>\r\n  );\r\n});\r\n\r\nexport default ToggleButton;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Toggles/ToggleSwitch.cjs

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -13,15 +13,24 @@ var React = _interopRequireWildcard(require("react"));
 var _TogglerStyles = require("./TogglerStyles");
 var _ = require("..");
 var _common = require("../common");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["id", "disabled", "selected", "label", "isSemantic", "size", "onToggle", "className"];
 var _templateObject;
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var CheckmarkContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  left: 2px;\n"])));
+/**
+ * Import React libraries.
+ */
+/**
+ * Import custom types.
+ */
+/**
+ * Import custom styles.
+ */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var CheckmarkContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  left: 2px;\n"])));
 var ToggleSwitch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _size;
   var id = _ref.id,
@@ -32,7 +41,7 @@ var ToggleSwitch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size = _ref.size,
     onToggle = _ref.onToggle,
     className = _ref.className,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   /**
    * Does all required pre-requisites and toggles the switcher state.
    */
@@ -43,6 +52,7 @@ var ToggleSwitch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     // Toggle state change
     onToggle(!selected);
   };
+  var theme = (0, _styledComponents.useTheme)();
   var focusVisibleRef = (0, _common.useFocusVisibleRef)([]);
   React.useImperativeHandle(ref, function () {
     return focusVisibleRef.current;
@@ -70,7 +80,7 @@ var ToggleSwitch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         children: selected && /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckmarkContainer, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SystemIcons.CheckMark, {
             size: '14px',
-            color: _.COLORS.white
+            color: _.COLORS.getColor('white', theme)
           })
         })
       })
@@ -82,5 +92,5 @@ var ToggleSwitch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }));
 });
 var _default = ToggleSwitch;
-exports.default = _default;
+exports["default"] = _default;
 //# sourceMappingURL=ToggleSwitch.cjs.map

package/dist/Toggles/ToggleSwitch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleSwitch.cjs","names":["CheckmarkContainer","styled","div","ToggleSwitch","React","forwardRef","ref","id","disabled","selected","label","isSemantic","size","onToggle","className","rest","toggle","focusVisibleRef","useFocusVisibleRef","useImperativeHandle","current","Size","Medium","e","key","toString","toLowerCase","concat","COLORS","white"],"sources":["../../src/Toggles/ToggleSwitch.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {ToggleSwitchProps} from './TogglerTypes';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch} from './TogglerStyles';\r\nimport {COLORS, Size, SystemIcons} from '..';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport styled from \"styled-components\";\r\n\r\nconst CheckmarkContainer =  styled.div`\r\n  position: absolute;\r\n  width: 14px;\r\n  height: 14px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  left: 2px;\r\n`;\r\n\r\nconst ToggleSwitch = React.forwardRef(({\r\n                                         id,\r\n                                         disabled,\r\n                                         selected,\r\n                                         label,\r\n                                         isSemantic,\r\n                                         size,\r\n                                         onToggle,\r\n                                         className,\r\n                                         ...rest\r\n                                       }: ToggleSwitchProps, ref) => {\r\n  /**\r\n   * Does all required pre-requisites and toggles the switcher state.\r\n   */\r\n  const toggle = () => {\r\n    // If disabled, don't do anything\r\n    if (disabled) return;\r\n\r\n    // Toggle state change\r\n    onToggle(!selected);\r\n  };\r\n\r\n  const focusVisibleRef = useFocusVisibleRef([]);\r\n\r\n  React.useImperativeHandle(ref, () => focusVisibleRef.current, [focusVisibleRef]);\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  return (\r\n    <StyledSwitch\r\n      ref={focusVisibleRef}\r\n      onClick={(e) => toggle()}\r\n      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && toggle()}\r\n      className={size\r\n        .toString()\r\n        .toLowerCase()\r\n        .concat(disabled ? ' disabled' : '')\r\n        .concat(className ? ` ${className}` : '')}\r\n      selected={selected}\r\n      id={id}\r\n      role=\"switch\"\r\n      aria-pressed={selected}\r\n      tabIndex={disabled ? -1 : 0}\r\n      {...rest}>\r\n      <ToggleSwitchContainer id=\"switchContainer\">\r\n        <Switch className={isSemantic ? 'semantic' : ''} >\r\n          {selected && <CheckmarkContainer><SystemIcons.CheckMark size={'14px'} color={COLORS.white}/></CheckmarkContainer>}\r\n        </Switch>\r\n      </ToggleSwitchContainer>\r\n      {label && (\r\n        <label className={'label'} htmlFor={id}>\r\n          {label}\r\n        </label>\r\n      )}\r\n    </StyledSwitch>\r\n  );\r\n});\r\n\r\nexport default ToggleSwitch;\r\n"],"mappings":";;;;;;;;;;;AAGA;AAUA;AACA;AACA;AACA;AAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEvC,IAAMA,kBAAkB,GAAIC,yBAAM,CAACC,GAAG,iOAQrC;AAED,IAAMC,YAAY,gBAAGC,KAAK,CAACC,UAAU,CAAC,gBAUuBC,GAAG,EAAK;EAAA;EAAA,IAT5BC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,IAAI;EAE9C;AACF;AACA;EACE,IAAMC,MAAM,GAAG,SAATA,MAAM,GAAS;IACnB;IACA,IAAIR,QAAQ,EAAE;;IAEd;IACAK,QAAQ,CAAC,CAACJ,QAAQ,CAAC;EACrB,CAAC;EAED,IAAMQ,eAAe,GAAG,IAAAC,0BAAkB,EAAC,EAAE,CAAC;EAE9Cd,KAAK,CAACe,mBAAmB,CAACb,GAAG,EAAE;IAAA,OAAMW,eAAe,CAACG,OAAO;EAAA,GAAE,CAACH,eAAe,CAAC,CAAC;EAEhFL,IAAI,YAAGA,IAAI,yCAAIS,MAAI,CAACC,MAAM;EAE1B,oBACE,sBAAC,2BAAY;IACX,GAAG,EAAEL,eAAgB;IACrB,OAAO,EAAE,iBAACM,CAAC;MAAA,OAAKP,MAAM,EAAE;IAAA,CAAC;IACzB,SAAS,EAAE,mBAAAO,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAKR,MAAM,EAAE;IAAA,CAAC;IACjE,SAAS,EAAEJ,IAAI,CACZa,QAAQ,EAAE,CACVC,WAAW,EAAE,CACbC,MAAM,CAACnB,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,CACnCmB,MAAM,CAACb,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAE;IAC5C,QAAQ,EAAEL,QAAS;IACnB,EAAE,EAAEF,EAAG;IACP,IAAI,EAAC,QAAQ;IACb,gBAAcE,QAAS;IACvB,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAC,GAAG;EAAE,GACxBO,IAAI;IAAA,wBACR,qBAAC,oCAAqB;MAAC,EAAE,EAAC,iBAAiB;MAAA,uBACzC,qBAAC,2BAAM;QAAC,SAAS,EAAEJ,UAAU,GAAG,UAAU,GAAG,EAAG;QAAA,UAC7CF,QAAQ,iBAAI,qBAAC,kBAAkB;UAAA,uBAAC,qBAAC,aAAW,CAAC,SAAS;YAAC,IAAI,EAAE,MAAO;YAAC,KAAK,EAAEmB,QAAM,CAACC;UAAM;QAAE;MAAqB;IAC1G,EACa,EACvBnB,KAAK,iBACJ;MAAO,SAAS,EAAE,OAAQ;MAAC,OAAO,EAAEH,EAAG;MAAA,UACpCG;IAAK,EAET;EAAA,GACY;AAEnB,CAAC,CAAC;AAAC,eAEYP,YAAY;AAAA"}
+{"version":3,"file":"ToggleSwitch.cjs","names":["React","_interopRequireWildcard","require","_TogglerStyles","_","_common","_styledComponents","_jsxRuntime","_excluded","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","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","CheckmarkContainer","styled","div","_taggedTemplateLiteral2","ToggleSwitch","forwardRef","_ref","ref","_size","id","disabled","selected","label","isSemantic","size","onToggle","className","rest","_objectWithoutProperties2","toggle","theme","useTheme","focusVisibleRef","useFocusVisibleRef","useImperativeHandle","current","Size","Medium","jsxs","StyledSwitch","onClick","onKeyDown","key","toString","toLowerCase","concat","role","tabIndex","children","jsx","ToggleSwitchContainer","SystemIcons","CheckMark","color","COLORS","getColor","htmlFor","_default","exports"],"sources":["../../src/Toggles/ToggleSwitch.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {ToggleSwitchProps} from './TogglerTypes';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch} from './TogglerStyles';\r\nimport {COLORS, Size, SystemIcons} from '..';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport styled, { useTheme } from \"styled-components\";\r\n\r\nconst CheckmarkContainer =  styled.div`\r\n  position: absolute;\r\n  width: 14px;\r\n  height: 14px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  left: 2px;\r\n`;\r\n\r\nconst ToggleSwitch = React.forwardRef(({\r\n                                         id,\r\n                                         disabled,\r\n                                         selected,\r\n                                         label,\r\n                                         isSemantic,\r\n                                         size,\r\n                                         onToggle,\r\n                                         className,\r\n                                         ...rest\r\n                                       }: ToggleSwitchProps, ref) => {\r\n  /**\r\n   * Does all required pre-requisites and toggles the switcher state.\r\n   */\r\n  const toggle = () => {\r\n    // If disabled, don't do anything\r\n    if (disabled) return;\r\n\r\n    // Toggle state change\r\n    onToggle(!selected);\r\n  };\r\n\r\n  const theme = useTheme();\r\n\r\n  const focusVisibleRef = useFocusVisibleRef([]);\r\n\r\n  React.useImperativeHandle(ref, () => focusVisibleRef.current, [focusVisibleRef]);\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  return (\r\n    <StyledSwitch\r\n      ref={focusVisibleRef}\r\n      onClick={(e) => toggle()}\r\n      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && toggle()}\r\n      className={size\r\n        .toString()\r\n        .toLowerCase()\r\n        .concat(disabled ? ' disabled' : '')\r\n        .concat(className ? ` ${className}` : '')}\r\n      selected={selected}\r\n      id={id}\r\n      role=\"switch\"\r\n      aria-pressed={selected}\r\n      tabIndex={disabled ? -1 : 0}\r\n      {...rest}>\r\n      <ToggleSwitchContainer id=\"switchContainer\">\r\n        <Switch className={isSemantic ? 'semantic' : ''} >\r\n          {selected && <CheckmarkContainer><SystemIcons.CheckMark size={'14px'} color={COLORS.getColor('white', theme)}/></CheckmarkContainer>}\r\n        </Switch>\r\n      </ToggleSwitchContainer>\r\n      {label && (\r\n        <label className={'label'} htmlFor={id}>\r\n          {label}\r\n        </label>\r\n      )}\r\n    </StyledSwitch>\r\n  );\r\n});\r\n\r\nexport default ToggleSwitch;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Toggles/ToggleSwitch.js

@@ -3,8 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _excluded = ["id", "disabled", "selected", "label", "isSemantic", "size", "onToggle", "className"];
 var _templateObject;
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * Import React libraries.
  */
@@ -20,7 +20,7 @@ import * as React from 'react';
 import { ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch } from './TogglerStyles';
 import { COLORS, Size, SystemIcons } from '..';
 import { useFocusVisibleRef } from '../common';
-import styled from "styled-components";
+import styled, { useTheme } from "styled-components";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var CheckmarkContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  left: 2px;\n"])));
@@ -45,6 +45,7 @@ var ToggleSwitch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     // Toggle state change
     onToggle(!selected);
   };
+  var theme = useTheme();
   var focusVisibleRef = useFocusVisibleRef([]);
   React.useImperativeHandle(ref, function () {
     return focusVisibleRef.current;
@@ -72,7 +73,7 @@ var ToggleSwitch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         children: selected && /*#__PURE__*/_jsx(CheckmarkContainer, {
           children: /*#__PURE__*/_jsx(SystemIcons.CheckMark, {
             size: '14px',
-            color: COLORS.white
+            color: COLORS.getColor('white', theme)
           })
         })
       })

package/dist/Toggles/ToggleSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleSwitch.js","names":["React","ToggleSwitchContainer","ToggleSwitch","Switch","StyledSwitch","COLORS","Size","SystemIcons","useFocusVisibleRef","styled","CheckmarkContainer","div","forwardRef","ref","id","disabled","selected","label","isSemantic","size","onToggle","className","rest","toggle","focusVisibleRef","useImperativeHandle","current","Medium","e","key","toString","toLowerCase","concat","white"],"sources":["../../src/Toggles/ToggleSwitch.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {ToggleSwitchProps} from './TogglerTypes';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch} from './TogglerStyles';\r\nimport {COLORS, Size, SystemIcons} from '..';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport styled from \"styled-components\";\r\n\r\nconst CheckmarkContainer =  styled.div`\r\n  position: absolute;\r\n  width: 14px;\r\n  height: 14px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  left: 2px;\r\n`;\r\n\r\nconst ToggleSwitch = React.forwardRef(({\r\n                                         id,\r\n                                         disabled,\r\n                                         selected,\r\n                                         label,\r\n                                         isSemantic,\r\n                                         size,\r\n                                         onToggle,\r\n                                         className,\r\n                                         ...rest\r\n                                       }: ToggleSwitchProps, ref) => {\r\n  /**\r\n   * Does all required pre-requisites and toggles the switcher state.\r\n   */\r\n  const toggle = () => {\r\n    // If disabled, don't do anything\r\n    if (disabled) return;\r\n\r\n    // Toggle state change\r\n    onToggle(!selected);\r\n  };\r\n\r\n  const focusVisibleRef = useFocusVisibleRef([]);\r\n\r\n  React.useImperativeHandle(ref, () => focusVisibleRef.current, [focusVisibleRef]);\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  return (\r\n    <StyledSwitch\r\n      ref={focusVisibleRef}\r\n      onClick={(e) => toggle()}\r\n      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && toggle()}\r\n      className={size\r\n        .toString()\r\n        .toLowerCase()\r\n        .concat(disabled ? ' disabled' : '')\r\n        .concat(className ? ` ${className}` : '')}\r\n      selected={selected}\r\n      id={id}\r\n      role=\"switch\"\r\n      aria-pressed={selected}\r\n      tabIndex={disabled ? -1 : 0}\r\n      {...rest}>\r\n      <ToggleSwitchContainer id=\"switchContainer\">\r\n        <Switch className={isSemantic ? 'semantic' : ''} >\r\n          {selected && <CheckmarkContainer><SystemIcons.CheckMark size={'14px'} color={COLORS.white}/></CheckmarkContainer>}\r\n        </Switch>\r\n      </ToggleSwitchContainer>\r\n      {label && (\r\n        <label className={'label'} htmlFor={id}>\r\n          {label}\r\n        </label>\r\n      )}\r\n    </StyledSwitch>\r\n  );\r\n});\r\n\r\nexport default ToggleSwitch;\r\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;;AAGA;AACA;AACA;AACA,SAAQC,qBAAqB,EAAEC,YAAY,IAAIC,MAAM,EAAEC,YAAY,QAAO,iBAAiB;AAC3F,SAAQC,MAAM,EAAEC,IAAI,EAAEC,WAAW,QAAO,IAAI;AAC5C,SAAQC,kBAAkB,QAAO,WAAW;AAC5C,OAAOC,MAAM,MAAM,mBAAmB;AAAC;AAAA;AAEvC,IAAMC,kBAAkB,GAAID,MAAM,CAACE,GAAG,mNAQrC;AAED,IAAMT,YAAY,gBAAGF,KAAK,CAACY,UAAU,CAAC,gBAUuBC,GAAG,EAAK;EAAA;EAAA,IAT5BC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,IAAI;EAE9C;AACF;AACA;EACE,IAAMC,MAAM,GAAG,SAATA,MAAM,GAAS;IACnB;IACA,IAAIR,QAAQ,EAAE;;IAEd;IACAK,QAAQ,CAAC,CAACJ,QAAQ,CAAC;EACrB,CAAC;EAED,IAAMQ,eAAe,GAAGhB,kBAAkB,CAAC,EAAE,CAAC;EAE9CR,KAAK,CAACyB,mBAAmB,CAACZ,GAAG,EAAE;IAAA,OAAMW,eAAe,CAACE,OAAO;EAAA,GAAE,CAACF,eAAe,CAAC,CAAC;EAEhFL,IAAI,YAAGA,IAAI,yCAAIb,IAAI,CAACqB,MAAM;EAE1B,oBACE,MAAC,YAAY;IACX,GAAG,EAAEH,eAAgB;IACrB,OAAO,EAAE,iBAACI,CAAC;MAAA,OAAKL,MAAM,EAAE;IAAA,CAAC;IACzB,SAAS,EAAE,mBAAAK,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAKN,MAAM,EAAE;IAAA,CAAC;IACjE,SAAS,EAAEJ,IAAI,CACZW,QAAQ,EAAE,CACVC,WAAW,EAAE,CACbC,MAAM,CAACjB,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,CACnCiB,MAAM,CAACX,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAE;IAC5C,QAAQ,EAAEL,QAAS;IACnB,EAAE,EAAEF,EAAG;IACP,IAAI,EAAC,QAAQ;IACb,gBAAcE,QAAS;IACvB,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAC,GAAG;EAAE,GACxBO,IAAI;IAAA,wBACR,KAAC,qBAAqB;MAAC,EAAE,EAAC,iBAAiB;MAAA,uBACzC,KAAC,MAAM;QAAC,SAAS,EAAEJ,UAAU,GAAG,UAAU,GAAG,EAAG;QAAA,UAC7CF,QAAQ,iBAAI,KAAC,kBAAkB;UAAA,uBAAC,KAAC,WAAW,CAAC,SAAS;YAAC,IAAI,EAAE,MAAO;YAAC,KAAK,EAAEX,MAAM,CAAC4B;UAAM;QAAE;MAAqB;IAC1G,EACa,EACvBhB,KAAK,iBACJ;MAAO,SAAS,EAAE,OAAQ;MAAC,OAAO,EAAEH,EAAG;MAAA,UACpCG;IAAK,EAET;EAAA,GACY;AAEnB,CAAC,CAAC;AAEF,eAAef,YAAY"}
+{"version":3,"file":"ToggleSwitch.js","names":["React","ToggleSwitchContainer","ToggleSwitch","Switch","StyledSwitch","COLORS","Size","SystemIcons","useFocusVisibleRef","styled","useTheme","jsx","_jsx","jsxs","_jsxs","CheckmarkContainer","div","_templateObject","_taggedTemplateLiteral","forwardRef","_ref","ref","_size","id","disabled","selected","label","isSemantic","size","onToggle","className","rest","_objectWithoutProperties","_excluded","toggle","theme","focusVisibleRef","useImperativeHandle","current","Medium","_objectSpread","onClick","e","onKeyDown","key","toString","toLowerCase","concat","role","tabIndex","children","CheckMark","color","getColor","htmlFor"],"sources":["../../src/Toggles/ToggleSwitch.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {ToggleSwitchProps} from './TogglerTypes';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch} from './TogglerStyles';\r\nimport {COLORS, Size, SystemIcons} from '..';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport styled, { useTheme } from \"styled-components\";\r\n\r\nconst CheckmarkContainer =  styled.div`\r\n  position: absolute;\r\n  width: 14px;\r\n  height: 14px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  left: 2px;\r\n`;\r\n\r\nconst ToggleSwitch = React.forwardRef(({\r\n                                         id,\r\n                                         disabled,\r\n                                         selected,\r\n                                         label,\r\n                                         isSemantic,\r\n                                         size,\r\n                                         onToggle,\r\n                                         className,\r\n                                         ...rest\r\n                                       }: ToggleSwitchProps, ref) => {\r\n  /**\r\n   * Does all required pre-requisites and toggles the switcher state.\r\n   */\r\n  const toggle = () => {\r\n    // If disabled, don't do anything\r\n    if (disabled) return;\r\n\r\n    // Toggle state change\r\n    onToggle(!selected);\r\n  };\r\n\r\n  const theme = useTheme();\r\n\r\n  const focusVisibleRef = useFocusVisibleRef([]);\r\n\r\n  React.useImperativeHandle(ref, () => focusVisibleRef.current, [focusVisibleRef]);\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  return (\r\n    <StyledSwitch\r\n      ref={focusVisibleRef}\r\n      onClick={(e) => toggle()}\r\n      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && toggle()}\r\n      className={size\r\n        .toString()\r\n        .toLowerCase()\r\n        .concat(disabled ? ' disabled' : '')\r\n        .concat(className ? ` ${className}` : '')}\r\n      selected={selected}\r\n      id={id}\r\n      role=\"switch\"\r\n      aria-pressed={selected}\r\n      tabIndex={disabled ? -1 : 0}\r\n      {...rest}>\r\n      <ToggleSwitchContainer id=\"switchContainer\">\r\n        <Switch className={isSemantic ? 'semantic' : ''} >\r\n          {selected && <CheckmarkContainer><SystemIcons.CheckMark size={'14px'} color={COLORS.getColor('white', theme)}/></CheckmarkContainer>}\r\n        </Switch>\r\n      </ToggleSwitchContainer>\r\n      {label && (\r\n        <label className={'label'} htmlFor={id}>\r\n          {label}\r\n        </label>\r\n      )}\r\n    </StyledSwitch>\r\n  );\r\n});\r\n\r\nexport default ToggleSwitch;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Toggles/TogglerStyles.cjs

@@ -10,10 +10,52 @@ var _styles = require("../styles");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _typography = require("../styles/typography");
 var _templateObject, _templateObject2, _templateObject3;
-var StyledSwitch = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ", "\n  }\n\n  &.medium {\n    ", "\n  }\n\n  &.large {\n    ", "\n  }\n  &.disabled {\n    color: ", ";\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  &.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"])), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.COLORS.neutral_300, _styles.COLORS.primary_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_200, _styles.COLORS.correct_500, _styles.COLORS.primary_20, _styles.COLORS.primary_500, _styles.COLORS.correct_500, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.critical_500, _styles.COLORS.primary_20, _styles.focusStyles);
+/**
+ * Import custom styles.
+ */
+/**
+ * Import third-party libraries.
+ */
+var StyledSwitch = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ", "\n  }\n\n  &.medium {\n    ", "\n  }\n\n  &.large {\n    ", "\n  }\n  &.disabled {\n    color: ", ";\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  &.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"])), function (props) {
+  return (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme));
+}, function (props) {
+  return (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme));
+}, function (props) {
+  return (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme));
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_100', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_200', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('correct_500', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_20', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_500', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('correct_500', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('critical_500', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_20', props.theme);
+}, _styles.focusStyles);
 exports.StyledSwitch = StyledSwitch;
-var 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"])));
+var 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"])));
 exports.ToggleSwitchContainer = ToggleSwitchContainer;
-var 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"])), _styles.COLORS.neutral_500, _styles.COLORS.critical_500, _styles.COLORS.white);
+var 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"])), function (props) {
+  return _styles.COLORS.getColor('neutral_500', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('critical_500', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+});
 exports.ToggleSwitch = ToggleSwitch;
 //# sourceMappingURL=TogglerStyles.cjs.map

package/dist/Toggles/TogglerStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TogglerStyles.cjs","names":["StyledSwitch","styled","div","ComponentSStyling","ComponentTextStyle","Regular","COLORS","black","ComponentMStyling","ComponentLStyling","neutral_300","primary_100","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","focusStyles","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"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    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  }\r\n\r\n  &.large {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  }\r\n  &.disabled {\r\n    color: ${COLORS.neutral_300};\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: ${COLORS.primary_100};\r\n    }\r\n  }\r\n\r\n  &.disabled[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${COLORS.neutral_300} !important;\r\n    cursor: not-allowed;\r\n\r\n    &:before {\r\n      background-color: ${COLORS.neutral_200} !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: ${COLORS.correct_500};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${COLORS.primary_20};\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${COLORS.primary_500};\r\n\r\n    &.semantic {\r\n      background-color: ${COLORS.correct_500};\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: ${COLORS.neutral_300} !important;\r\n    cursor: not-allowed;\r\n\r\n    &:before {\r\n      background-color: ${COLORS.neutral_100} !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: ${COLORS.critical_500};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${COLORS.primary_20};\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: ${COLORS.neutral_500};\r\n  border-radius: 100px;\r\n\r\n  &.semantic {\r\n    background-color: ${COLORS.critical_500};\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: ${COLORS.white};\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;AAKA;AACA;AAAmH;AAE5G,IAAMA,YAAY,GAAGC,yBAAM,CAACC,GAAG,8wDAShC,IAAAC,6BAAiB,EAACC,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,EAI3D,IAAAC,6BAAiB,EAACJ,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,EAI3D,IAAAE,6BAAiB,EAACL,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,EAGpDD,cAAM,CAACI,WAAW,EAaLJ,cAAM,CAACK,WAAW,EAKpBL,cAAM,CAACI,WAAW,EAIhBJ,cAAM,CAACM,WAAW,EAOlBN,cAAM,CAACO,WAAW,EAIlBP,cAAM,CAACQ,UAAU,EAKnBR,cAAM,CAACS,WAAW,EAGhBT,cAAM,CAACO,WAAW,EAWpBP,cAAM,CAACI,WAAW,EAIhBJ,cAAM,CAACU,WAAW,EAOlBV,cAAM,CAACW,YAAY,EAInBX,cAAM,CAACQ,UAAU,EAKrCI,mBAAW,CAMhB;AAAC;AAEK,IAAMC,qBAAqB,GAAGlB,yBAAM,CAACmB,KAAK,sNAOhD;AAAC;AAEK,IAAMC,YAAY,GAAGpB,yBAAM,CAACqB,IAAI,8sBAYjBhB,cAAM,CAACiB,WAAW,EAIhBjB,cAAM,CAACW,YAAY,EAUnBX,cAAM,CAACkB,KAAK,CAMnC;AAAC"}
+{"version":3,"file":"TogglerStyles.cjs","names":["_styles","require","_styledComponents","_interopRequireDefault","_typography","_templateObject","_templateObject2","_templateObject3","StyledSwitch","styled","div","_taggedTemplateLiteral2","props","ComponentSStyling","ComponentTextStyle","Regular","COLORS","getColor","theme","ComponentMStyling","ComponentLStyling","focusStyles","exports","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.js

@@ -10,7 +10,43 @@ import { COLORS, focusStyles } from '../styles';
  */
 import styled from 'styled-components';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
-export var StyledSwitch = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ", "\n  }\n\n  &.medium {\n    ", "\n  }\n\n  &.large {\n    ", "\n  }\n  &.disabled {\n    color: ", ";\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  &.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"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentLStyling(ComponentTextStyle.Regular, COLORS.black), COLORS.neutral_300, COLORS.primary_100, COLORS.neutral_300, COLORS.neutral_200, COLORS.correct_500, COLORS.primary_20, COLORS.primary_500, COLORS.correct_500, COLORS.neutral_300, COLORS.neutral_100, COLORS.critical_500, COLORS.primary_20, focusStyles);
+export var StyledSwitch = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ", "\n  }\n\n  &.medium {\n    ", "\n  }\n\n  &.large {\n    ", "\n  }\n  &.disabled {\n    color: ", ";\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  &.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"])), function (props) {
+  return ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
+}, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
+}, function (props) {
+  return ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
+}, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_200', props.theme);
+}, function (props) {
+  return COLORS.getColor('correct_500', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_20', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_500', props.theme);
+}, function (props) {
+  return COLORS.getColor('correct_500', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('critical_500', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_20', props.theme);
+}, focusStyles);
 export var 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 var 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"])), COLORS.neutral_500, COLORS.critical_500, COLORS.white);
+export var 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"])), function (props) {
+  return COLORS.getColor('neutral_500', props.theme);
+}, function (props) {
+  return COLORS.getColor('critical_500', props.theme);
+}, function (props) {
+  return COLORS.getColor('white', props.theme);
+});
 //# 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","Regular","black","neutral_300","primary_100","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"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    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  }\r\n\r\n  &.large {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  }\r\n  &.disabled {\r\n    color: ${COLORS.neutral_300};\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: ${COLORS.primary_100};\r\n    }\r\n  }\r\n\r\n  &.disabled[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${COLORS.neutral_300} !important;\r\n    cursor: not-allowed;\r\n\r\n    &:before {\r\n      background-color: ${COLORS.neutral_200} !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: ${COLORS.correct_500};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${COLORS.primary_20};\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${COLORS.primary_500};\r\n\r\n    &.semantic {\r\n      background-color: ${COLORS.correct_500};\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: ${COLORS.neutral_300} !important;\r\n    cursor: not-allowed;\r\n\r\n    &:before {\r\n      background-color: ${COLORS.neutral_100} !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: ${COLORS.critical_500};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${COLORS.primary_20};\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: ${COLORS.neutral_500};\r\n  border-radius: 100px;\r\n\r\n  &.semantic {\r\n    background-color: ${COLORS.critical_500};\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: ${COLORS.white};\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,IAAMC,YAAY,GAAGL,MAAM,CAACM,GAAG,gwDAShCH,iBAAiB,CAACC,kBAAkB,CAACG,OAAO,EAAET,MAAM,CAACU,KAAK,CAAC,EAI3DN,iBAAiB,CAACE,kBAAkB,CAACG,OAAO,EAAET,MAAM,CAACU,KAAK,CAAC,EAI3DP,iBAAiB,CAACG,kBAAkB,CAACG,OAAO,EAAET,MAAM,CAACU,KAAK,CAAC,EAGpDV,MAAM,CAACW,WAAW,EAaLX,MAAM,CAACY,WAAW,EAKpBZ,MAAM,CAACW,WAAW,EAIhBX,MAAM,CAACa,WAAW,EAOlBb,MAAM,CAACc,WAAW,EAIlBd,MAAM,CAACe,UAAU,EAKnBf,MAAM,CAACgB,WAAW,EAGhBhB,MAAM,CAACc,WAAW,EAWpBd,MAAM,CAACW,WAAW,EAIhBX,MAAM,CAACiB,WAAW,EAOlBjB,MAAM,CAACkB,YAAY,EAInBlB,MAAM,CAACe,UAAU,EAKrCd,WAAW,CAMhB;AAED,OAAO,IAAMkB,qBAAqB,GAAGjB,MAAM,CAACkB,KAAK,wMAOhD;AAED,OAAO,IAAMC,YAAY,GAAGnB,MAAM,CAACoB,IAAI,gsBAYjBtB,MAAM,CAACuB,WAAW,EAIhBvB,MAAM,CAACkB,YAAY,EAUnBlB,MAAM,CAACwB,KAAK,CAMnC"}
+{"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":"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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  id: string;\r\n  label?: string;\r\n  disabled?: boolean;\r\n  selected?: boolean;\r\n  isSemantic?: boolean;\r\n  size?: Size;\r\n  onToggle: (selected: boolean) => void;\r\n}\r\n"],"mappings":""}
+{"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":[]}

package/dist/Toggles/TogglerTypes.d.ts

@@ -4,11 +4,18 @@ 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;
 }

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  id: string;\r\n  label?: string;\r\n  disabled?: boolean;\r\n  selected?: boolean;\r\n  isSemantic?: boolean;\r\n  size?: Size;\r\n  onToggle: (selected: boolean) => void;\r\n}\r\n"],"mappings":""}
+{"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":[]}

package/dist/Toggles/index.cjs

@@ -7,13 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "ToggleButton", {
   enumerable: true,
   get: function get() {
-    return _ToggleButton.default;
+    return _ToggleButton["default"];
   }
 });
 Object.defineProperty(exports, "ToggleSwitch", {
   enumerable: true,
   get: function get() {
-    return _ToggleSwitch.default;
+    return _ToggleSwitch["default"];
   }
 });
 var _ToggleSwitch = _interopRequireDefault(require("./ToggleSwitch"));