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

package/dist/Toasters/ToastContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastContext.js","names":["React","styled","createUUID","Toast","ToastPosition","Z_INDEXES","jsx","_jsx","jsxs","_jsxs","ToastContext","createContext","ToastBucket","div","_templateObject","_taggedTemplateLiteral","toast","ToastBucketTopLeft","_templateObject2","ToastBucketTopMiddle","_templateObject3","ToastBucketTopRight","_templateObject4","ToastBucketBottomLeft","_templateObject5","ToastBucketBottomMiddle","_templateObject6","ToastBucketBottomRight","_templateObject7","ToastProvider","_ref","children","toasts","setToasts","useState","add","content","options","id","prev","remove","filter","t","functions","useMemo","addToast","removeToast","Provider","value","position","TOPLEFT","map","TOPMIDDLE","TOPRIGHT","BOTTOMLEFT","BOTTOMMIDDLE","BOTTOMRIGHT","propTypes","_pt","any","useToast","useContext"],"sources":["../../src/Toasters/ToastContext.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { createUUID } from '../Services/functions';\r\nimport Toast, { ToastOptions } from './Toast';\r\nimport { ToastPosition } from '../types';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\n\r\nexport type ToastProviderProps = {\r\n  children?: any;\r\n};\r\n\r\nexport interface toast {\r\n  options: ToastOptions;\r\n  id: string;\r\n  content: any;\r\n}\r\nexport type ToasterValueProps = { toasts: toast[]; addToast: (content: any, options: ToastOptions) => string; removeToast: (id: string) => void };\r\n\r\n/*export const ToastContext = React.createContext<ToasterValueProps>(null);*/\r\n\r\nexport const ToastContext = React.createContext({} as ToasterValueProps);\r\n\r\nconst ToastBucket = styled.div`\r\n  position: fixed;\r\n  z-index: ${Z_INDEXES.toast};\r\n  display: flex;\r\n  flex-direction: column-reverse;\r\n`;\r\n\r\nconst ToastBucketTopLeft = styled(ToastBucket)`\r\n  top: 16px;\r\n  left: 5%;\r\n`;\r\n\r\nconst ToastBucketTopMiddle = styled(ToastBucket)`\r\n  top: 16px;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n`;\r\n\r\nconst ToastBucketTopRight = styled(ToastBucket)`\r\n  top: 16px;\r\n  right: 5%;\r\n`;\r\n\r\nconst ToastBucketBottomLeft = styled(ToastBucket)`\r\n  bottom: 16px;\r\n  left: 5%;\r\n`;\r\n\r\nconst ToastBucketBottomMiddle = styled(ToastBucket)`\r\n  bottom: 16px;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n`;\r\n\r\nconst ToastBucketBottomRight = styled(ToastBucket)`\r\n  bottom: 16px;\r\n  right: 5%;\r\n`;\r\n\r\nexport const ToastProvider: React.FC<ToastProviderProps> = ({ children }: ToastProviderProps) => {\r\n  const [toasts, setToasts] = React.useState<toast[]>([]);\r\n\r\n  const add = (content: any, options: ToastOptions) => {\r\n    const id = createUUID();\r\n    setToasts(prev => [...prev, { id, content, options }]);\r\n    return id;\r\n  };\r\n\r\n  const remove = (id: string) => setToasts(toasts.filter(t => t.id !== id));\r\n\r\n  const functions = React.useMemo(() => {\r\n    return { addToast: add, removeToast: remove };\r\n  }, [toasts]);\r\n\r\n  return (\r\n    <ToastContext.Provider value={{ toasts, addToast: add, removeToast: remove }}>\r\n      <ToastBucketTopLeft>\r\n        {toasts\r\n          .filter(t => t.options.position === ToastPosition.TOPLEFT)\r\n          .map(t => (\r\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\r\n          ))}\r\n      </ToastBucketTopLeft>\r\n      <ToastBucketTopMiddle>\r\n        {toasts\r\n          .filter(t => t.options.position === ToastPosition.TOPMIDDLE)\r\n          .map(t => (\r\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\r\n          ))}\r\n      </ToastBucketTopMiddle>\r\n      <ToastBucketTopRight>\r\n        {toasts\r\n          .filter(t => t.options.position === ToastPosition.TOPRIGHT)\r\n          .map(t => (\r\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\r\n          ))}\r\n      </ToastBucketTopRight>\r\n      <ToastBucketBottomLeft>\r\n        {toasts\r\n          .filter(t => t.options.position === ToastPosition.BOTTOMLEFT)\r\n          .map(t => (\r\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\r\n          ))}\r\n      </ToastBucketBottomLeft>\r\n      <ToastBucketBottomMiddle>\r\n        {toasts\r\n          .filter(t => t.options.position === ToastPosition.BOTTOMMIDDLE)\r\n          .map(t => (\r\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\r\n          ))}\r\n      </ToastBucketBottomMiddle>\r\n      <ToastBucketBottomRight>\r\n        {toasts\r\n          .filter(t => t.options.position === ToastPosition.BOTTOMRIGHT)\r\n          .map(t => (\r\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\r\n          ))}\r\n      </ToastBucketBottomRight>\r\n      {children}\r\n    </ToastContext.Provider>\r\n  );\r\n};\r\n\r\nexport function useToast() {\r\n  const { addToast, removeToast } = React.useContext(ToastContext);\r\n  return {\r\n    addToast,\r\n    removeToast\r\n  };\r\n}\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ToastContext.js","names":["React","styled","createUUID","Toast","ToastPosition","Z_INDEXES","jsx","_jsx","jsxs","_jsxs","ToastContext","createContext","ToastBucket","div","toast","ToastBucketTopLeft","ToastBucketTopMiddle","ToastBucketTopRight","ToastBucketBottomLeft","ToastBucketBottomMiddle","ToastBucketBottomRight","ToastProvider","_ref","children","toasts","setToasts","useState","add","content","options","id","prev","remove","filter","t","functions","useMemo","addToast","removeToast","Provider","value","position","TOPLEFT","map","TOPMIDDLE","TOPRIGHT","BOTTOMLEFT","BOTTOMMIDDLE","BOTTOMRIGHT","propTypes","_pt","any","useToast","useContext"],"sources":["../../src/Toasters/ToastContext.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { createUUID } from '../Services/functions';\r\nimport Toast, { ToastOptions } from './Toast';\r\nimport { ToastPosition } from '../types';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\n\r\nexport type ToastProviderProps = {\r\n  children?: any;\r\n};\r\n\r\nexport interface toast {\r\n  options: ToastOptions;\r\n  id: string;\r\n  content: any;\r\n}\r\nexport type ToasterValueProps = { toasts: toast[]; addToast: (content: any, options: ToastOptions) => string; removeToast: (id: string) => void };\r\n\r\n/*export const ToastContext = React.createContext<ToasterValueProps>(null);*/\r\n\r\nexport const ToastContext = React.createContext({} as ToasterValueProps);\r\n\r\nconst ToastBucket = styled.div`\r\n  position: fixed;\r\n  z-index: ${Z_INDEXES.toast};\r\n  display: flex;\r\n  flex-direction: column-reverse;\r\n`;\r\n\r\nconst ToastBucketTopLeft = styled(ToastBucket)`\r\n  top: 16px;\r\n  left: 5%;\r\n`;\r\n\r\nconst ToastBucketTopMiddle = styled(ToastBucket)`\r\n  top: 16px;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n`;\r\n\r\nconst ToastBucketTopRight = styled(ToastBucket)`\r\n  top: 16px;\r\n  right: 5%;\r\n`;\r\n\r\nconst ToastBucketBottomLeft = styled(ToastBucket)`\r\n  bottom: 16px;\r\n  left: 5%;\r\n`;\r\n\r\nconst ToastBucketBottomMiddle = styled(ToastBucket)`\r\n  bottom: 16px;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n`;\r\n\r\nconst ToastBucketBottomRight = styled(ToastBucket)`\r\n  bottom: 16px;\r\n  right: 5%;\r\n`;\r\n\r\nexport const ToastProvider: React.FC<ToastProviderProps> = ({ children }: ToastProviderProps) => {\r\n  const [toasts, setToasts] = React.useState<toast[]>([]);\r\n\r\n  const add = (content: any, options: ToastOptions) => {\r\n    const id = createUUID();\r\n    setToasts(prev => [...prev, { id, content, options }]);\r\n    return id;\r\n  };\r\n\r\n  const remove = (id: string) => setToasts(toasts.filter(t => t.id !== id));\r\n\r\n  const functions = React.useMemo(() => {\r\n    return { addToast: add, removeToast: remove };\r\n  }, [toasts]);\r\n\r\n  return (\r\n    <ToastContext.Provider value={{ toasts, addToast: add, removeToast: remove }}>\r\n      <ToastBucketTopLeft>\r\n        {toasts\r\n          .filter(t => t.options.position === ToastPosition.TOPLEFT)\r\n          .map(t => (\r\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\r\n          ))}\r\n      </ToastBucketTopLeft>\r\n      <ToastBucketTopMiddle>\r\n        {toasts\r\n          .filter(t => t.options.position === ToastPosition.TOPMIDDLE)\r\n          .map(t => (\r\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\r\n          ))}\r\n      </ToastBucketTopMiddle>\r\n      <ToastBucketTopRight>\r\n        {toasts\r\n          .filter(t => t.options.position === ToastPosition.TOPRIGHT)\r\n          .map(t => (\r\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\r\n          ))}\r\n      </ToastBucketTopRight>\r\n      <ToastBucketBottomLeft>\r\n        {toasts\r\n          .filter(t => t.options.position === ToastPosition.BOTTOMLEFT)\r\n          .map(t => (\r\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\r\n          ))}\r\n      </ToastBucketBottomLeft>\r\n      <ToastBucketBottomMiddle>\r\n        {toasts\r\n          .filter(t => t.options.position === ToastPosition.BOTTOMMIDDLE)\r\n          .map(t => (\r\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\r\n          ))}\r\n      </ToastBucketBottomMiddle>\r\n      <ToastBucketBottomRight>\r\n        {toasts\r\n          .filter(t => t.options.position === ToastPosition.BOTTOMRIGHT)\r\n          .map(t => (\r\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\r\n          ))}\r\n      </ToastBucketBottomRight>\r\n      {children}\r\n    </ToastContext.Provider>\r\n  );\r\n};\r\n\r\nexport function useToast() {\r\n  const { addToast, removeToast } = React.useContext(ToastContext);\r\n  return {\r\n    addToast,\r\n    removeToast\r\n  };\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Toasters/index.d.ts

@@ -1,4 +1,4 @@
-import Toast from './Toast';
-import { ToastProvider, useToast, ToastContext } from './ToastContext';
-export * from './Toast';
-export { Toast, ToastProvider, useToast, ToastContext };
+import Toast from './Toast';
+import { ToastProvider, useToast, ToastContext } from './ToastContext';
+export * from './Toast';
+export { Toast, ToastProvider, useToast, ToastContext };

package/dist/Toggles/ToggleButton.cjs

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.ToggleButton = 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"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _Button = require("../Button");
@@ -16,12 +15,40 @@ var _Iconbutton = require("../Button/Iconbutton");
 var _styles = require("../styles");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["id", "active", "onChange", "disabled", "defaultState", "activeState", "className"];
-var _templateObject;
 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; }
-const Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _Iconbutton.IconButtonContentStyles, _Iconbutton.IconButtonContentStyles, props => _styles.COLORS.getColor('white', props.theme), _Iconbutton.IconButtonContentStyles, props => _styles.COLORS.getColor('primary_500', props.theme), _Iconbutton.IconButtonContentStyles, props => _styles.COLORS.getColor('neutral_300', props.theme));
+const Wrapper = _styledComponents.default.div`
+  ${_Iconbutton.IconButtonContentStyles} {
+    transition: all 0.1s ease-in-out;
+  }
+
+  &.disabled,
+  &.active:not(.state-change) {
+    ${_Iconbutton.IconButtonContentStyles} {
+      background: ${props => _styles.COLORS.getColor('white', props.theme)};
+    }
+  }
+
+  &.active:not(.state-change) {
+    ${_Iconbutton.IconButtonContentStyles}:after {
+      content: '';
+      position: absolute;
+      left: 12px;
+      bottom: 1px;
+      background-color: ${props => _styles.COLORS.getColor('primary_500', props.theme)};
+      border-radius: 4px;
+      height: 4px;
+      width: 24px;
+    }
+  }
+
+  &.disabled:not(.state-change) {
+    ${_Iconbutton.IconButtonContentStyles}:after {
+      background: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+    }
+  }
+`;
 const ToggleButton = exports.ToggleButton = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
-  var _activeState$color, _activeState$icon;
   let {
       id,
       active,
@@ -34,7 +61,7 @@ const ToggleButton = exports.ToggleButton = /*#__PURE__*/_react.default.forwardR
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   const [isActive, setIsActive] = _react.default.useState(false);
   _react.default.useEffect(() => setIsActive(active), [active]);
-  const cls = "".concat(className || '', " ").concat(isActive ? 'active' : '', " ").concat(activeState ? 'state-change' : '', " ").concat(disabled ? 'disabled' : '');
+  const cls = `${className || ''} ${isActive ? 'active' : ''} ${activeState ? 'state-change' : ''} ${disabled ? 'disabled' : ''}`;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
     className: cls,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, _objectSpread(_objectSpread({
@@ -49,11 +76,11 @@ const ToggleButton = exports.ToggleButton = /*#__PURE__*/_react.default.forwardR
         }
       },
       id: id,
-      iconColor: isActive ? (_activeState$color = activeState === null || activeState === void 0 ? void 0 : activeState.color) !== null && _activeState$color !== void 0 ? _activeState$color : defaultState.color : defaultState.color,
+      iconColor: isActive ? activeState?.color ?? defaultState.color : defaultState.color,
       disabled: disabled,
       "aria-pressed": isActive
     }, rest), {}, {
-      children: isActive ? (_activeState$icon = activeState === null || activeState === void 0 ? void 0 : activeState.icon) !== null && _activeState$icon !== void 0 ? _activeState$icon : defaultState.icon : defaultState.icon
+      children: isActive ? activeState?.icon ?? defaultState.icon : defaultState.icon
     }))
   });
 });

package/dist/Toggles/ToggleButton.cjs.map

@@ -1 +1 @@
-{"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","default","getOwnPropertyDescriptors","defineProperties","defineProperty","Wrapper","styled","div","_taggedTemplateLiteral2","IconButtonContentStyles","props","COLORS","getColor","theme","ToggleButton","exports","React","forwardRef","_ref","ref","_activeState$color","_activeState$icon","id","active","onChange","disabled","defaultState","activeState","className","rest","_objectWithoutProperties2","isActive","setIsActive","useState","useEffect","cls","concat","jsx","children","IconButton","variant","useTransparentBackground","shape","action","iconColor","color","icon","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":[]}
+{"version":3,"file":"ToggleButton.cjs","names":["_react","_interopRequireDefault","require","_Button","_styledComponents","_Iconbutton","_styles","_jsxRuntime","_excluded","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","Wrapper","styled","div","IconButtonContentStyles","props","COLORS","getColor","theme","ToggleButton","exports","React","forwardRef","_ref","ref","id","active","onChange","disabled","defaultState","activeState","className","rest","_objectWithoutProperties2","isActive","setIsActive","useState","useEffect","cls","jsx","children","IconButton","variant","useTransparentBackground","shape","action","iconColor","color","icon","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

@@ -1,19 +1,19 @@
-import React from 'react';
-export interface ToggleButtonState {
-    icon: React.ReactNode;
-    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>>;
-export default ToggleButton;
+import React from 'react';
+export interface ToggleButtonState {
+    icon: React.ReactNode;
+    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>>;
+export default ToggleButton;

package/dist/Toggles/ToggleButton.js

@@ -1,9 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 const _excluded = ["id", "active", "onChange", "disabled", "defaultState", "activeState", "className"];
-var _templateObject;
 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';
@@ -12,9 +10,38 @@ import styled from 'styled-components';
 import { IconButtonContentStyles } from '../Button/Iconbutton';
 import { COLORS } from '../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const 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, props => COLORS.getColor('white', props.theme), IconButtonContentStyles, props => COLORS.getColor('primary_500', props.theme), IconButtonContentStyles, props => COLORS.getColor('neutral_300', props.theme));
+const Wrapper = styled.div`
+  ${IconButtonContentStyles} {
+    transition: all 0.1s ease-in-out;
+  }
+
+  &.disabled,
+  &.active:not(.state-change) {
+    ${IconButtonContentStyles} {
+      background: ${props => COLORS.getColor('white', props.theme)};
+    }
+  }
+
+  &.active:not(.state-change) {
+    ${IconButtonContentStyles}:after {
+      content: '';
+      position: absolute;
+      left: 12px;
+      bottom: 1px;
+      background-color: ${props => COLORS.getColor('primary_500', props.theme)};
+      border-radius: 4px;
+      height: 4px;
+      width: 24px;
+    }
+  }
+
+  &.disabled:not(.state-change) {
+    ${IconButtonContentStyles}:after {
+      background: ${props => COLORS.getColor('neutral_300', props.theme)};
+    }
+  }
+`;
 export const ToggleButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  var _activeState$color, _activeState$icon;
   let {
       id,
       active,
@@ -27,7 +54,7 @@ export const ToggleButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     rest = _objectWithoutProperties(_ref, _excluded);
   const [isActive, setIsActive] = React.useState(false);
   React.useEffect(() => setIsActive(active), [active]);
-  const cls = "".concat(className || '', " ").concat(isActive ? 'active' : '', " ").concat(activeState ? 'state-change' : '', " ").concat(disabled ? 'disabled' : '');
+  const cls = `${className || ''} ${isActive ? 'active' : ''} ${activeState ? 'state-change' : ''} ${disabled ? 'disabled' : ''}`;
   return /*#__PURE__*/_jsx(Wrapper, {
     className: cls,
     children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
@@ -42,11 +69,11 @@ export const ToggleButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         }
       },
       id: id,
-      iconColor: isActive ? (_activeState$color = activeState === null || activeState === void 0 ? void 0 : activeState.color) !== null && _activeState$color !== void 0 ? _activeState$color : defaultState.color : defaultState.color,
+      iconColor: isActive ? activeState?.color ?? defaultState.color : defaultState.color,
       disabled: disabled,
       "aria-pressed": isActive
     }, rest), {}, {
-      children: isActive ? (_activeState$icon = activeState === null || activeState === void 0 ? void 0 : activeState.icon) !== null && _activeState$icon !== void 0 ? _activeState$icon : defaultState.icon : defaultState.icon
+      children: isActive ? activeState?.icon ?? defaultState.icon : defaultState.icon
     }))
   });
 });

package/dist/Toggles/ToggleButton.js.map

@@ -1 +1 @@
-{"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","isActive","setIsActive","useState","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":[]}
+{"version":3,"file":"ToggleButton.js","names":["React","IconButton","styled","IconButtonContentStyles","COLORS","jsx","_jsx","Wrapper","div","props","getColor","theme","ToggleButton","forwardRef","_ref","ref","id","active","onChange","disabled","defaultState","activeState","className","rest","_objectWithoutProperties","_excluded","isActive","setIsActive","useState","useEffect","cls","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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 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"));
 var React = _interopRequireWildcard(require("react"));
 var _TogglerStyles = require("./TogglerStyles");
 var _ = require("..");
@@ -15,7 +14,6 @@ var _common = require("../common");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["id", "disabled", "selected", "label", "isSemantic", "size", "onToggle", "className"];
-var _templateObject;
 /**
  * Import React libraries.
  */
@@ -29,9 +27,16 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
-const 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"])));
+const CheckmarkContainer = _styledComponents.default.div`
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  left: 2px;
+`;
 const ToggleSwitch = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  var _size;
   let {
       id,
       disabled,
@@ -56,12 +61,12 @@ const ToggleSwitch = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const theme = (0, _styledComponents.useTheme)();
   const focusVisibleRef = (0, _common.useFocusVisibleRef)([]);
   React.useImperativeHandle(ref, () => focusVisibleRef.current, [focusVisibleRef]);
-  size = (_size = size) !== null && _size !== void 0 ? _size : _.Size.Medium;
+  size = size ?? _.Size.Medium;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TogglerStyles.StyledSwitch, _objectSpread(_objectSpread({
     ref: focusVisibleRef,
     onClick: e => toggle(),
     onKeyDown: e => (e.key === 'Enter' || e.key === ' ') && toggle(),
-    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(className ? " ".concat(className) : ''),
+    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(className ? ` ${className}` : ''),
     $selected: selected,
     id: id,
     role: "switch",

package/dist/Toggles/ToggleSwitch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleSwitch.cjs","names":["React","_interopRequireWildcard","require","_TogglerStyles","_","_common","_styledComponents","_jsxRuntime","_excluded","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","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","$selected","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":[]}
+{"version":3,"file":"ToggleSwitch.cjs","names":["React","_interopRequireWildcard","require","_TogglerStyles","_","_common","_styledComponents","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","CheckmarkContainer","styled","div","ToggleSwitch","forwardRef","_ref","ref","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","$selected","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.d.ts

@@ -1,10 +1,10 @@
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-/**
- * Import custom types.
- */
-import { ToggleSwitchProps } from './TogglerTypes';
-declare const ToggleSwitch: React.ForwardRefExoticComponent<ToggleSwitchProps & React.RefAttributes<unknown>>;
-export default ToggleSwitch;
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+/**
+ * Import custom types.
+ */
+import { ToggleSwitchProps } from './TogglerTypes';
+declare const ToggleSwitch: React.ForwardRefExoticComponent<ToggleSwitchProps & React.RefAttributes<unknown>>;
+export default ToggleSwitch;

package/dist/Toggles/ToggleSwitch.js

@@ -1,8 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 const _excluded = ["id", "disabled", "selected", "label", "isSemantic", "size", "onToggle", "className"];
-var _templateObject;
 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; }
 /**
@@ -22,9 +20,16 @@ import { COLORS, Size, SystemIcons } from '..';
 import { useFocusVisibleRef } from '../common';
 import styled, { useTheme } from "styled-components";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const 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"])));
+const CheckmarkContainer = styled.div`
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  left: 2px;
+`;
 const ToggleSwitch = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  var _size;
   let {
       id,
       disabled,
@@ -49,12 +54,12 @@ const ToggleSwitch = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const theme = useTheme();
   const focusVisibleRef = useFocusVisibleRef([]);
   React.useImperativeHandle(ref, () => focusVisibleRef.current, [focusVisibleRef]);
-  size = (_size = size) !== null && _size !== void 0 ? _size : Size.Medium;
+  size = size ?? Size.Medium;
   return /*#__PURE__*/_jsxs(StyledSwitch, _objectSpread(_objectSpread({
     ref: focusVisibleRef,
     onClick: e => toggle(),
     onKeyDown: e => (e.key === 'Enter' || e.key === ' ') && toggle(),
-    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(className ? " ".concat(className) : ''),
+    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(className ? ` ${className}` : ''),
     $selected: selected,
     id: id,
     role: "switch",

package/dist/Toggles/ToggleSwitch.js.map

@@ -1 +1 @@
-{"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","$selected","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":[]}
+{"version":3,"file":"ToggleSwitch.js","names":["React","ToggleSwitchContainer","ToggleSwitch","Switch","StyledSwitch","COLORS","Size","SystemIcons","useFocusVisibleRef","styled","useTheme","jsx","_jsx","jsxs","_jsxs","CheckmarkContainer","div","forwardRef","_ref","ref","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","$selected","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":[]}