@laerdal/life-react-components 1.9.9-dev.2 → 1.9.9-dev.6

package/dist/InputFields/TextField.js

@@ -8,7 +8,8 @@ import { useFocusVisibleRef } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+
+var TextField = function TextField(_ref) {
   var id = _ref.id,
       disabled = _ref.disabled,
       readOnly = _ref.readOnly,
@@ -28,9 +29,6 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
       note = _ref.note;
   var elementRef = useFocusVisibleRef();
-  React.useImperativeHandle(ref, function () {
-    return elementRef.current;
-  }, [elementRef]);
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs(InputWrapper, {
       readOnly: readOnly,
@@ -80,7 +78,8 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       })]
     })
   });
-});
+};
+
 TextField.propTypes = {
   id: _pt.string.isRequired,
   disabled: _pt.bool,

package/dist/InputFields/TextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/TextField.tsx"],"names":["React","CheckMark","TechnicalWarning","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TextField","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","elementRef","useImperativeHandle","current","e","preventDefault","Invalid","undefined","target","Valid","correct_400","critical_400","icon","message"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {CheckMark, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {Size, States} from '../types';\nimport {ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\n\ntype TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: States.Invalid | States.Valid;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nconst TextField = React.forwardRef(({\n                                      id,\n                                      disabled,\n                                      readOnly,\n                                      onChange,\n                                      value,\n                                      validationMessage,\n                                      type,\n                                      autoComplete,\n                                      placeholder,\n                                      required,\n                                      pattern,\n                                      maxLength,\n                                      withoutBorder,\n                                      state,\n                                      size,\n                                      margin = '4px 0',\n                                      note,\n                                    }: TextFieldProps, ref) => {\n  const elementRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n  return (\n    <>\n      <InputWrapper\n        readOnly={readOnly}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || readOnly) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={`${state || (validationMessage ? States.Invalid : '')} ${size || ''}`}\n          tabIndex={readOnly || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={disabled ? undefined : placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeErrorMessage={!!validationMessage && state !== States.Valid}\n          required={required}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n        />\n        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <CheckMark color={COLORS.correct_400}/> :\n              <TechnicalWarning color={COLORS.critical_400}/>}\n            <span>{validationMessage}</span>\n          </ValidationMessage>\n        )}\n        {note && !disabled && (\n          <NoteMessage className={size}>\n            {note.icon}\n            <span>{note.message}</span>\n          </NoteMessage>\n        )}\n      </InputWrapper>\n    </>\n  );\n});\n\nexport default TextField;\n"],"file":"TextField.js"}
+{"version":3,"sources":["../../src/InputFields/TextField.tsx"],"names":["React","CheckMark","TechnicalWarning","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TextField","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","elementRef","e","preventDefault","Invalid","undefined","target","Valid","correct_400","critical_400","icon","message"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { CheckMark, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { COLORS } from '../styles';\nimport { Size, States } from '../types';\nimport { ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage } from './styling';\nimport { useFocusVisibleRef } from '../common';\nimport { TextFieldNote } from './types';\n\ntype TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: States.Invalid | States.Valid;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nconst TextField = ({\n  id,\n  disabled,\n  readOnly,\n  onChange,\n  value,\n  validationMessage,\n  type,\n  autoComplete,\n  placeholder,\n  required,\n  pattern,\n  maxLength,\n  withoutBorder,\n  state,\n  size,\n  margin = '4px 0',\n  note,\n}: TextFieldProps) => {\n  const elementRef = useFocusVisibleRef();\n\n  return (\n    <>\n      <InputWrapper\n        readOnly={readOnly}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || readOnly) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={`${state || (validationMessage ? States.Invalid : '')} ${size || ''}`}\n          tabIndex={readOnly || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={disabled ? undefined : placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeErrorMessage={!!validationMessage && state !== States.Valid}\n          required={required}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n        />\n        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <CheckMark color={COLORS.correct_400} /> : <TechnicalWarning color={COLORS.critical_400} />}\n            <span>{validationMessage}</span>\n          </ValidationMessage>\n        )}\n        {note && !disabled && (\n          <NoteMessage className={size}>\n            {note.icon}\n            <span>{note.message}</span>\n          </NoteMessage>\n        )}\n      </InputWrapper>\n    </>\n  );\n};\n\nexport default TextField;\n"],"file":"TextField.js"}

package/dist/InputFields/index.cjs

@@ -5,18 +5,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  TextField: true,
-  PasswordField: true,
-  Checkbox: true,
-  RadioButton: true,
-  SearchBar: true,
-  InputLabel: true,
-  DatepickerField: true,
-  Textarea: true,
-  QuickSearch: true,
-  NumberField: true
-};
 Object.defineProperty(exports, "Checkbox", {
   enumerable: true,
   get: function get() {
@@ -97,18 +85,4 @@ var _Textarea = _interopRequireDefault(require("./Textarea"));
 var _QuickSearch = _interopRequireDefault(require("./QuickSearch"));
 
 var _NumberField = _interopRequireDefault(require("./NumberField"));
-
-var _styling = require("./styling");
-
-Object.keys(_styling).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _styling[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _styling[key];
-    }
-  });
-});
 //# sourceMappingURL=index.cjs.map

package/dist/InputFields/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\nimport NumberField from './NumberField';\n\nexport * from './styling';\n\nexport {\n  TextField,\n  PasswordField,\n  Checkbox,\n  RadioButton,\n  SearchBar,\n  InputLabel,\n  DatepickerField,\n  Textarea,\n  QuickSearch,\n  NumberField\n};\n"],"file":"index.cjs"}
+{"version":3,"sources":["../../src/InputFields/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\nimport NumberField from './NumberField';\n\nexport { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };\n"],"file":"index.cjs"}

package/dist/InputFields/index.d.ts

@@ -8,5 +8,4 @@ import DatepickerField from './DatepickerField';
 import Textarea from './Textarea';
 import QuickSearch from './QuickSearch';
 import NumberField from './NumberField';
-export * from './styling';
 export { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };

package/dist/InputFields/index.js

@@ -8,6 +8,5 @@ import DatepickerField from './DatepickerField';
 import Textarea from './Textarea';
 import QuickSearch from './QuickSearch';
 import NumberField from './NumberField';
-export * from './styling';
 export { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };
 //# sourceMappingURL=index.js.map

package/dist/InputFields/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/index.ts"],"names":["TextField","PasswordField","Checkbox","RadioButton","SearchBar","InputLabel","DatepickerField","Textarea","QuickSearch","NumberField"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,aAAtB;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,UAAP,MAAuB,SAAvB;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AAEA,cAAc,WAAd;AAEA,SACET,SADF,EAEEC,aAFF,EAGEC,QAHF,EAIEC,WAJF,EAKEC,SALF,EAMEC,UANF,EAOEC,eAPF,EAQEC,QARF,EASEC,WATF,EAUEC,WAVF","sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\nimport NumberField from './NumberField';\n\nexport * from './styling';\n\nexport {\n  TextField,\n  PasswordField,\n  Checkbox,\n  RadioButton,\n  SearchBar,\n  InputLabel,\n  DatepickerField,\n  Textarea,\n  QuickSearch,\n  NumberField\n};\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/InputFields/index.ts"],"names":["TextField","PasswordField","Checkbox","RadioButton","SearchBar","InputLabel","DatepickerField","Textarea","QuickSearch","NumberField"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,aAAtB;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,UAAP,MAAuB,SAAvB;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AAEA,SAAST,SAAT,EAAoBC,aAApB,EAAmCC,QAAnC,EAA6CC,WAA7C,EAA0DC,SAA1D,EAAqEC,UAArE,EAAiFC,eAAjF,EAAkGC,QAAlG,EAA4GC,WAA5G,EAAyHC,WAAzH","sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\nimport NumberField from './NumberField';\n\nexport { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };\n"],"file":"index.js"}

package/dist/Popover/Popover.cjs

@@ -169,9 +169,9 @@ var Popover = function Popover(_ref) {
       }
     };
 
-    document.addEventListener("mousedown", checkIfClickedOutside);
+    document.addEventListener('mousedown', checkIfClickedOutside);
     return function () {
-      document.removeEventListener("mousedown", checkIfClickedOutside);
+      document.removeEventListener('mousedown', checkIfClickedOutside);
     };
   }, [showPopover]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {

package/dist/Popover/Popover.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Popover/Popover.tsx"],"names":["Container","styled","div","props","size","Size","Small","Large","COLORS","white","BOXSHADOWS","BOXSHADOW_CENTERED","Z_INDEXES","popover","position","Position","Bottom","Top","Left","Right","showArrowPointer","renderArrowStyles","TopContainer","MainContentWrapper","MiddleContainer","BottomContainer","TextContainer","renderMargins","note","NoteContainer","ComponentTextStyle","Regular","neutral_600","LabelContainer","Bold","CloseButtonContainer","TextButtonContainer","IconButtonContainer","Wrapper","showOnClick","showPopover","isNotePresent","Popover","Medium","topSectionProps","bottomSectionProps","mainContent","children","React","useState","setShowPopover","popoverRef","useRef","useEffect","checkIfClickedOutside","e","current","contains","target","document","addEventListener","removeEventListener","text","textButton","icon","action","label","iconButtons","map","iconButton"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\nimport { Button, IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';\nimport { Position, Size } from '../types';\n\nconst Container = styled.div<{size: Size, position: Position, showArrowPointer: boolean}>`\n  //height: ${props=>props.size===Size.Small ? '240px' : (props.size===Size.Large ? '480px' : '360px')};\n  min-width: ${props=>props.size===Size.Small ? '320px' : (props.size===Size.Large ? '640px' : '480px')};\n  border-radius: 4px;\n  background: ${COLORS.white};\n  cursor: default;\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n\n  position: absolute;  \n  visibility: hidden;\n  opacity: 0;\n  z-index: ${Z_INDEXES.popover};\n\n  ${props => (props.position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '')}\n  ${props => (props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '')}\n\n  ${props => (props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '')}\n  ${props => (props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '')}\n\n  &::after {\n    ${props => props.showArrowPointer ? renderArrowStyles(props.position) : ''}\n`;\n\nconst TopContainer = styled.div<{size: Size}>`\n  height: ${props=>props.size===Size.Small ? '56px' : (props.size===Size.Large ? '72px' : '64px')};\n  max-width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\n  display: flex;\n`;\n\nconst MainContentWrapper = styled.div<{size: Size}>`\n  margin: 8px;\n`;\n\nconst MiddleContainer = styled.div<{size: Size}>`\n  height: ${props=>props.size===Size.Small ? '104px' : (props.size===Size.Large ? '304px' : '208px')};\n  max-width: ${props=>props.size===Size.Small ? '312px' : (props.size===Size.Large ? '576px' : '424px')};\n  padding: ${props=>props.size===Size.Small ? '0 8px' : (props.size===Size.Large ? '0 16px' : '0 12px')};\n  overflow-y: auto;\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst BottomContainer = styled.div<{size: Size}>`\n  height: ${props=>props.size===Size.Small ? '64px' : (props.size===Size.Large ? '88px' : '72px')};\n  max-width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\n  display: flex;\n\n  .bottom-flex {\n    flex: 1;\n  }\n`;\n\nconst TextContainer = styled.div<{note: boolean, size: Size}>`\n  display: flex;\n  flex-direction: column;\n  margin: ${props=>renderMargins(props.note, props.size)};\n  flex-grow: 1;\n`;\n\nconst NoteContainer = styled.div<{size: Size}>`\n  ${props=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600) : (props.size===Size.Large ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600) : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600))}\n`;\n\nconst LabelContainer = styled.div<{size: Size}>`\n  ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, null) : ComponentMStyling(ComponentTextStyle.Bold, null))}\n`;\n\nconst CloseButtonContainer = styled.div<{size: Size}>`\n  margin: ${props=>props.size===Size.Small ? '4px 16px 4px 0' : (props.size===Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0')};\n`;\n\nconst TextButtonContainer = styled.div<{size: Size}>`\n  margin: ${props=>props.size===Size.Small ? '8px 0 8px 16px' : (props.size===Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px')};\n`;\n\nconst IconButtonContainer = styled.div<{size: Size}>`\n  margin: ${props=>props.size===Size.Small ? '8px 16px 8px 0' : (props.size===Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0')};\n  display: flex;\n`;\n\nconst Wrapper = styled.div<{position: Position, showOnClick: boolean, showPopover: boolean}>`\n  position: relative;\n\n  .pointer-space {\n    height: ${props=>props.position===Position.Top || props.position===Position.Bottom ? '16px' : '100%'};\n    width: ${props=>props.position===Position.Left || props.position===Position.Right ? '16px' : '100%'};\n    position: absolute;\n\n    ${props=>props.position===Position.Left ? 'right:100%; bottom: 0%' : ''};\n    ${props=>props.position===Position.Right ? 'left:100%; bottom: 0%' : ''};\n\n    ${props=>props.position===Position.Top ? 'bottom: 100%' : ''};\n    ${props=>props.position===Position.Bottom ? 'top: 100%' : ''};\n  }\n\n  ${props=>props.showOnClick ? \n    `${Container} {\n        visibility: ${props.showPopover ? 'visible' : 'hidden'};\n        opacity: ${props.showPopover ? '1' : '0'};\n    }\n    cursor: pointer;` \n    : \n    `&:hover {\n      ${Container} {\n        visibility: visible;\n        opacity: 1;\n      }\n    }`\n  }\n`;\n\nconst renderMargins = (isNotePresent: boolean, size: Size): string => {\n  if(isNotePresent){\n    return (size===Size.Small ? '10px 16px' : (size===Size.Large ? '14px 24px' : '12px 20px'));\n  }\n  else{\n    return (size===Size.Small ? '18px 16px' : (size===Size.Large ? '24px' : '20px'));\n  }\n}\n\nconst renderArrowStyles = (position: Position) => {\n  if(position === Position.Bottom){\n    return `height: 0px;\n            width: 0px;\n            border-top: 16px solid transparent;\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid rgb(255,255,255);\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            bottom: calc(100% - 1px);`\n  }\n\n  if(position === Position.Top){\n    return `height: 0px;\n            width: 0px;\n            border-top: 16px solid rgb(255,255,255);\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid transparent;\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            top: calc(100% - 1px);`\n  }\n\n  if(position === Position.Left){\n    return `height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid transparent;\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid rgb(255,255,255);\n            content: \"\";\n            position: absolute;\n            left: calc(100% - 1px);\n            bottom: calc(50% - 12px);`\n  }\n\n  if(position === Position.Right){\n    return `height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid rgb(255,255,255);\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(100% - 1px);\n            bottom: calc(50% - 12px);`\n  }\n}\n\ntype topSectionProps = {\n  text: string;\n  note?: string;\n}\n\ntype actionButtonProps = {\n  icon: React.ReactNode;\n  action: ()=>void;\n  label?: string;\n}\n\ntype bottomSectionProps = {\n  iconButtons?: actionButtonProps[];\n  textButton?: actionButtonProps;\n}\n\ntype PopoverProps = {\n  size?: Size.Small | Size.Medium | Size.Large;\n  topSectionProps?: topSectionProps;\n  bottomSectionProps?: bottomSectionProps;\n  mainContent: React.ReactNode;\n  children: React.ReactNode;\n  position: Position.Top | Position.Bottom | Position.Right | Position.Left;\n  showOnClick: boolean;\n  showArrowPointer?: boolean;\n}\n\nconst Popover: React.FunctionComponent<PopoverProps> = \n({\n    size=Size.Medium,\n    topSectionProps,\n    bottomSectionProps,\n    mainContent,\n    children,\n    position,\n    showOnClick=false,\n    showArrowPointer=false\n}) => {\n\n  const [showPopover, setShowPopover] = React.useState(false);\n  const popoverRef = React.useRef<any>();\n\n  React.useEffect(()=>{\n    const checkIfClickedOutside = (e: { target: any; }) => {\n      if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {\n        setShowPopover(false);\n      }\n    }\n\n    document.addEventListener(\"mousedown\", checkIfClickedOutside)\n\n    return () => {\n      document.removeEventListener(\"mousedown\", checkIfClickedOutside)\n    }\n  },[showPopover]);\n\n  return (\n    <Wrapper position={position} showOnClick={showOnClick} showPopover={showPopover}>\n      <Container size={size} position={position} ref={popoverRef} showArrowPointer={showArrowPointer}>\n        {!!topSectionProps && \n          <TopContainer size={size}>\n            <TextContainer note={!!topSectionProps?.note} size={size}>\n              {topSectionProps?.note && \n                <NoteContainer size={size}>\n                  {topSectionProps.note}\n                </NoteContainer>\n              }\n              <LabelContainer size={size}>\n                {topSectionProps?.text}\n              </LabelContainer>\n            </TextContainer>\n\n            {showOnClick && \n              <CloseButtonContainer size={size} data-testid={'closeBtn'}>\n                <IconButton action={()=>setShowPopover(false)} useTransparentBackground iconColor={COLORS.neutral_600} variant='secondary' shape='circular'>\n                  <SystemIcons.Close />\n                </IconButton>\n              </CloseButtonContainer>\n            }\n          </TopContainer>\n        }\n\n        <MainContentWrapper size={size}>\n          <MiddleContainer size={size}>\n            {mainContent}\n          </MiddleContainer>\n        </MainContentWrapper>\n\n        {!!bottomSectionProps && \n          <BottomContainer size={size}>\n            {!!bottomSectionProps?.textButton?.icon && \n              <TextButtonContainer size={size} data-testid={'textBtn'}>\n                <Button size={size} variant='secondary' icon={bottomSectionProps.textButton.icon} onClick={bottomSectionProps.textButton.action}>\n                  {bottomSectionProps.textButton.label}\n                </Button>\n              </TextButtonContainer>\n            }\n\n            <div className='bottom-flex'/>\n            \n            <IconButtonContainer size={size} data-testid={'iconBtn'}>\n              {bottomSectionProps?.iconButtons?.map((iconButton) =>\n                \n                  <IconButton action={iconButton.action} variant='secondary' shape='circular' useTransparentBackground>\n                    {iconButton.icon}\n                  </IconButton>            \n              )}\n            </IconButtonContainer>\n          </BottomContainer>\n        }\n      </Container>\n\n      <div onClick={()=>showOnClick && setShowPopover(!showPopover)}>\n        {children}\n\n        <div className='pointer-space'/>\n      </div>\n\n    </Wrapper>\n  );\n};\n\nexport default Popover;"],"file":"Popover.cjs"}
+{"version":3,"sources":["../../src/Popover/Popover.tsx"],"names":["Container","styled","div","props","size","Size","Small","Large","COLORS","white","BOXSHADOWS","BOXSHADOW_CENTERED","Z_INDEXES","popover","position","Position","Bottom","Top","Left","Right","showArrowPointer","renderArrowStyles","TopContainer","MainContentWrapper","MiddleContainer","BottomContainer","TextContainer","renderMargins","note","NoteContainer","ComponentTextStyle","Regular","neutral_600","LabelContainer","Bold","CloseButtonContainer","TextButtonContainer","IconButtonContainer","Wrapper","showOnClick","showPopover","isNotePresent","Popover","Medium","topSectionProps","bottomSectionProps","mainContent","children","React","useState","setShowPopover","popoverRef","useRef","useEffect","checkIfClickedOutside","e","current","contains","target","document","addEventListener","removeEventListener","text","textButton","icon","action","label","iconButtons","map","iconButton"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\nimport { Button, IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';\nimport { Position, Size } from '../types';\n\nconst Container = styled.div<{ size: Size; position: Position; showArrowPointer: boolean }>`\n  //height: ${(props) => (props.size === Size.Small ? '240px' : props.size === Size.Large ? '480px' : '360px')};\n  min-width: ${(props) => (props.size === Size.Small ? '320px' : props.size === Size.Large ? '640px' : '480px')};\n  border-radius: 4px;\n  background: ${COLORS.white};\n  cursor: default;\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n\n  position: absolute;  \n  visibility: hidden;\n  opacity: 0;\n  z-index: ${Z_INDEXES.popover};\n\n  ${(props) => (props.position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '')}\n  ${(props) => (props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '')}\n\n  ${(props) => (props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '')}\n  ${(props) => (props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '')}\n\n  &::after {\n    ${(props) => (props.showArrowPointer ? renderArrowStyles(props.position) : '')}\n`;\n\nconst TopContainer = styled.div<{ size: Size }>`\n  height: ${(props) => (props.size === Size.Small ? '56px' : props.size === Size.Large ? '72px' : '64px')};\n  max-width: ${(props) => (props.size === Size.Small ? '344px' : props.size === Size.Large ? '624px' : '464px')};\n  display: flex;\n`;\n\nconst MainContentWrapper = styled.div<{ size: Size }>`\n  margin: 8px;\n`;\n\nconst MiddleContainer = styled.div<{ size: Size }>`\n  height: ${(props) => (props.size === Size.Small ? '104px' : props.size === Size.Large ? '304px' : '208px')};\n  max-width: ${(props) => (props.size === Size.Small ? '312px' : props.size === Size.Large ? '576px' : '424px')};\n  padding: ${(props) => (props.size === Size.Small ? '0 8px' : props.size === Size.Large ? '0 16px' : '0 12px')};\n  overflow-y: auto;\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst BottomContainer = styled.div<{ size: Size }>`\n  height: ${(props) => (props.size === Size.Small ? '64px' : props.size === Size.Large ? '88px' : '72px')};\n  max-width: ${(props) => (props.size === Size.Small ? '344px' : props.size === Size.Large ? '624px' : '464px')};\n  display: flex;\n\n  .bottom-flex {\n    flex: 1;\n  }\n`;\n\nconst TextContainer = styled.div<{ note: boolean; size: Size }>`\n  display: flex;\n  flex-direction: column;\n  margin: ${(props) => renderMargins(props.note, props.size)};\n  flex-grow: 1;\n`;\n\nconst NoteContainer = styled.div<{ size: Size }>`\n  ${(props) =>\n    props.size === Size.Small\n      ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)\n      : props.size === Size.Large\n      ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)\n      : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst LabelContainer = styled.div<{ size: Size }>`\n  ${(props) =>\n    props.size === Size.Small\n      ? ComponentSStyling(ComponentTextStyle.Bold, null)\n      : props.size === Size.Large\n      ? ComponentLStyling(ComponentTextStyle.Bold, null)\n      : ComponentMStyling(ComponentTextStyle.Bold, null)}\n`;\n\nconst CloseButtonContainer = styled.div<{ size: Size }>`\n  margin: ${(props) => (props.size === Size.Small ? '4px 16px 4px 0' : props.size === Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0')};\n`;\n\nconst TextButtonContainer = styled.div<{ size: Size }>`\n  margin: ${(props) => (props.size === Size.Small ? '8px 0 8px 16px' : props.size === Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px')};\n`;\n\nconst IconButtonContainer = styled.div<{ size: Size }>`\n  margin: ${(props) => (props.size === Size.Small ? '8px 16px 8px 0' : props.size === Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0')};\n  display: flex;\n`;\n\nconst Wrapper = styled.div<{ position: Position; showOnClick: boolean; showPopover: boolean }>`\n  position: relative;\n\n  .pointer-space {\n    height: ${(props) => (props.position === Position.Top || props.position === Position.Bottom ? '16px' : '100%')};\n    width: ${(props) => (props.position === Position.Left || props.position === Position.Right ? '16px' : '100%')};\n    position: absolute;\n\n    ${(props) => (props.position === Position.Left ? 'right:100%; bottom: 0%' : '')};\n    ${(props) => (props.position === Position.Right ? 'left:100%; bottom: 0%' : '')};\n\n    ${(props) => (props.position === Position.Top ? 'bottom: 100%' : '')};\n    ${(props) => (props.position === Position.Bottom ? 'top: 100%' : '')};\n  }\n\n  ${(props) =>\n    props.showOnClick\n      ? `${Container} {\n        visibility: ${props.showPopover ? 'visible' : 'hidden'};\n        opacity: ${props.showPopover ? '1' : '0'};\n    }\n    cursor: pointer;`\n      : `&:hover {\n      ${Container} {\n        visibility: visible;\n        opacity: 1;\n      }\n    }`}\n`;\n\nconst renderMargins = (isNotePresent: boolean, size: Size): string => {\n  if (isNotePresent) {\n    return size === Size.Small ? '10px 16px' : size === Size.Large ? '14px 24px' : '12px 20px';\n  } else {\n    return size === Size.Small ? '18px 16px' : size === Size.Large ? '24px' : '20px';\n  }\n};\n\nconst renderArrowStyles = (position: Position) => {\n  if (position === Position.Bottom) {\n    return `height: 0px;\n            width: 0px;\n            border-top: 16px solid transparent;\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid rgb(255,255,255);\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            bottom: calc(100% - 1px);`;\n  }\n\n  if (position === Position.Top) {\n    return `height: 0px;\n            width: 0px;\n            border-top: 16px solid rgb(255,255,255);\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid transparent;\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            top: calc(100% - 1px);`;\n  }\n\n  if (position === Position.Left) {\n    return `height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid transparent;\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid rgb(255,255,255);\n            content: \"\";\n            position: absolute;\n            left: calc(100% - 1px);\n            bottom: calc(50% - 12px);`;\n  }\n\n  if (position === Position.Right) {\n    return `height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid rgb(255,255,255);\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(100% - 1px);\n            bottom: calc(50% - 12px);`;\n  }\n};\n\ntype topSectionProps = {\n  text: string;\n  note?: string;\n};\n\ntype actionButtonProps = {\n  icon: React.ReactNode;\n  action: () => void;\n  label?: string;\n};\n\ntype bottomSectionProps = {\n  iconButtons?: actionButtonProps[];\n  textButton?: actionButtonProps;\n};\n\ntype PopoverProps = {\n  size?: Size.Small | Size.Medium | Size.Large;\n  topSectionProps?: topSectionProps;\n  bottomSectionProps?: bottomSectionProps;\n  mainContent: React.ReactNode;\n  children: React.ReactNode;\n  position: Position.Top | Position.Bottom | Position.Right | Position.Left;\n  showOnClick: boolean;\n  showArrowPointer?: boolean;\n};\n\nconst Popover: React.FunctionComponent<PopoverProps> = ({\n  size = Size.Medium,\n  topSectionProps,\n  bottomSectionProps,\n  mainContent,\n  children,\n  position,\n  showOnClick = false,\n  showArrowPointer = false,\n}) => {\n  const [showPopover, setShowPopover] = React.useState(false);\n  const popoverRef = React.useRef<any>();\n\n  React.useEffect(() => {\n    const checkIfClickedOutside = (e: { target: any }) => {\n      if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {\n        setShowPopover(false);\n      }\n    };\n\n    document.addEventListener('mousedown', checkIfClickedOutside);\n\n    return () => {\n      document.removeEventListener('mousedown', checkIfClickedOutside);\n    };\n  }, [showPopover]);\n\n  return (\n    <Wrapper position={position} showOnClick={showOnClick} showPopover={showPopover}>\n      <Container size={size} position={position} ref={popoverRef} showArrowPointer={showArrowPointer}>\n        {!!topSectionProps && (\n          <TopContainer size={size}>\n            <TextContainer note={!!topSectionProps?.note} size={size}>\n              {topSectionProps?.note && <NoteContainer size={size}>{topSectionProps.note}</NoteContainer>}\n              <LabelContainer size={size}>{topSectionProps?.text}</LabelContainer>\n            </TextContainer>\n\n            {showOnClick && (\n              <CloseButtonContainer size={size} data-testid={'closeBtn'}>\n                <IconButton action={() => setShowPopover(false)} useTransparentBackground iconColor={COLORS.neutral_600} variant=\"secondary\" shape=\"circular\">\n                  <SystemIcons.Close />\n                </IconButton>\n              </CloseButtonContainer>\n            )}\n          </TopContainer>\n        )}\n\n        <MainContentWrapper size={size}>\n          <MiddleContainer size={size}>{mainContent}</MiddleContainer>\n        </MainContentWrapper>\n\n        {!!bottomSectionProps && (\n          <BottomContainer size={size}>\n            {!!bottomSectionProps?.textButton?.icon && (\n              <TextButtonContainer size={size} data-testid={'textBtn'}>\n                <Button size={size} variant=\"secondary\" icon={bottomSectionProps.textButton.icon} onClick={bottomSectionProps.textButton.action}>\n                  {bottomSectionProps.textButton.label}\n                </Button>\n              </TextButtonContainer>\n            )}\n\n            <div className=\"bottom-flex\" />\n\n            <IconButtonContainer size={size} data-testid={'iconBtn'}>\n              {bottomSectionProps?.iconButtons?.map((iconButton) => (\n                <IconButton action={iconButton.action} variant=\"secondary\" shape=\"circular\" useTransparentBackground>\n                  {iconButton.icon}\n                </IconButton>\n              ))}\n            </IconButtonContainer>\n          </BottomContainer>\n        )}\n      </Container>\n\n      <div onClick={() => showOnClick && setShowPopover(!showPopover)}>\n        {children}\n\n        <div className=\"pointer-space\" />\n      </div>\n    </Wrapper>\n  );\n};\n\nexport default Popover;\n"],"file":"Popover.cjs"}

package/dist/Popover/Popover.js

@@ -134,9 +134,9 @@ var Popover = function Popover(_ref) {
       }
     };
 
-    document.addEventListener("mousedown", checkIfClickedOutside);
+    document.addEventListener('mousedown', checkIfClickedOutside);
     return function () {
-      document.removeEventListener("mousedown", checkIfClickedOutside);
+      document.removeEventListener('mousedown', checkIfClickedOutside);
     };
   }, [showPopover]);
   return /*#__PURE__*/_jsxs(Wrapper, {

package/dist/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Popover/Popover.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Button","IconButton","SystemIcons","BOXSHADOWS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","scrollBarStyling","Z_INDEXES","Position","Size","Container","div","props","size","Small","Large","white","BOXSHADOW_CENTERED","popover","position","Bottom","Top","Left","Right","showArrowPointer","renderArrowStyles","TopContainer","MainContentWrapper","MiddleContainer","BottomContainer","TextContainer","renderMargins","note","NoteContainer","Regular","neutral_600","LabelContainer","Bold","CloseButtonContainer","TextButtonContainer","IconButtonContainer","Wrapper","showOnClick","showPopover","isNotePresent","Popover","Medium","topSectionProps","bottomSectionProps","mainContent","children","useState","setShowPopover","popoverRef","useRef","useEffect","checkIfClickedOutside","e","current","contains","target","document","addEventListener","removeEventListener","text","textButton","icon","action","label","iconButtons","map","iconButton"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\nimport { Button, IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';\nimport { Position, Size } from '../types';\n\nconst Container = styled.div<{size: Size, position: Position, showArrowPointer: boolean}>`\n  //height: ${props=>props.size===Size.Small ? '240px' : (props.size===Size.Large ? '480px' : '360px')};\n  min-width: ${props=>props.size===Size.Small ? '320px' : (props.size===Size.Large ? '640px' : '480px')};\n  border-radius: 4px;\n  background: ${COLORS.white};\n  cursor: default;\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n\n  position: absolute;  \n  visibility: hidden;\n  opacity: 0;\n  z-index: ${Z_INDEXES.popover};\n\n  ${props => (props.position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '')}\n  ${props => (props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '')}\n\n  ${props => (props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '')}\n  ${props => (props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '')}\n\n  &::after {\n    ${props => props.showArrowPointer ? renderArrowStyles(props.position) : ''}\n`;\n\nconst TopContainer = styled.div<{size: Size}>`\n  height: ${props=>props.size===Size.Small ? '56px' : (props.size===Size.Large ? '72px' : '64px')};\n  max-width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\n  display: flex;\n`;\n\nconst MainContentWrapper = styled.div<{size: Size}>`\n  margin: 8px;\n`;\n\nconst MiddleContainer = styled.div<{size: Size}>`\n  height: ${props=>props.size===Size.Small ? '104px' : (props.size===Size.Large ? '304px' : '208px')};\n  max-width: ${props=>props.size===Size.Small ? '312px' : (props.size===Size.Large ? '576px' : '424px')};\n  padding: ${props=>props.size===Size.Small ? '0 8px' : (props.size===Size.Large ? '0 16px' : '0 12px')};\n  overflow-y: auto;\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst BottomContainer = styled.div<{size: Size}>`\n  height: ${props=>props.size===Size.Small ? '64px' : (props.size===Size.Large ? '88px' : '72px')};\n  max-width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\n  display: flex;\n\n  .bottom-flex {\n    flex: 1;\n  }\n`;\n\nconst TextContainer = styled.div<{note: boolean, size: Size}>`\n  display: flex;\n  flex-direction: column;\n  margin: ${props=>renderMargins(props.note, props.size)};\n  flex-grow: 1;\n`;\n\nconst NoteContainer = styled.div<{size: Size}>`\n  ${props=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600) : (props.size===Size.Large ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600) : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600))}\n`;\n\nconst LabelContainer = styled.div<{size: Size}>`\n  ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, null) : ComponentMStyling(ComponentTextStyle.Bold, null))}\n`;\n\nconst CloseButtonContainer = styled.div<{size: Size}>`\n  margin: ${props=>props.size===Size.Small ? '4px 16px 4px 0' : (props.size===Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0')};\n`;\n\nconst TextButtonContainer = styled.div<{size: Size}>`\n  margin: ${props=>props.size===Size.Small ? '8px 0 8px 16px' : (props.size===Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px')};\n`;\n\nconst IconButtonContainer = styled.div<{size: Size}>`\n  margin: ${props=>props.size===Size.Small ? '8px 16px 8px 0' : (props.size===Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0')};\n  display: flex;\n`;\n\nconst Wrapper = styled.div<{position: Position, showOnClick: boolean, showPopover: boolean}>`\n  position: relative;\n\n  .pointer-space {\n    height: ${props=>props.position===Position.Top || props.position===Position.Bottom ? '16px' : '100%'};\n    width: ${props=>props.position===Position.Left || props.position===Position.Right ? '16px' : '100%'};\n    position: absolute;\n\n    ${props=>props.position===Position.Left ? 'right:100%; bottom: 0%' : ''};\n    ${props=>props.position===Position.Right ? 'left:100%; bottom: 0%' : ''};\n\n    ${props=>props.position===Position.Top ? 'bottom: 100%' : ''};\n    ${props=>props.position===Position.Bottom ? 'top: 100%' : ''};\n  }\n\n  ${props=>props.showOnClick ? \n    `${Container} {\n        visibility: ${props.showPopover ? 'visible' : 'hidden'};\n        opacity: ${props.showPopover ? '1' : '0'};\n    }\n    cursor: pointer;` \n    : \n    `&:hover {\n      ${Container} {\n        visibility: visible;\n        opacity: 1;\n      }\n    }`\n  }\n`;\n\nconst renderMargins = (isNotePresent: boolean, size: Size): string => {\n  if(isNotePresent){\n    return (size===Size.Small ? '10px 16px' : (size===Size.Large ? '14px 24px' : '12px 20px'));\n  }\n  else{\n    return (size===Size.Small ? '18px 16px' : (size===Size.Large ? '24px' : '20px'));\n  }\n}\n\nconst renderArrowStyles = (position: Position) => {\n  if(position === Position.Bottom){\n    return `height: 0px;\n            width: 0px;\n            border-top: 16px solid transparent;\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid rgb(255,255,255);\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            bottom: calc(100% - 1px);`\n  }\n\n  if(position === Position.Top){\n    return `height: 0px;\n            width: 0px;\n            border-top: 16px solid rgb(255,255,255);\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid transparent;\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            top: calc(100% - 1px);`\n  }\n\n  if(position === Position.Left){\n    return `height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid transparent;\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid rgb(255,255,255);\n            content: \"\";\n            position: absolute;\n            left: calc(100% - 1px);\n            bottom: calc(50% - 12px);`\n  }\n\n  if(position === Position.Right){\n    return `height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid rgb(255,255,255);\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(100% - 1px);\n            bottom: calc(50% - 12px);`\n  }\n}\n\ntype topSectionProps = {\n  text: string;\n  note?: string;\n}\n\ntype actionButtonProps = {\n  icon: React.ReactNode;\n  action: ()=>void;\n  label?: string;\n}\n\ntype bottomSectionProps = {\n  iconButtons?: actionButtonProps[];\n  textButton?: actionButtonProps;\n}\n\ntype PopoverProps = {\n  size?: Size.Small | Size.Medium | Size.Large;\n  topSectionProps?: topSectionProps;\n  bottomSectionProps?: bottomSectionProps;\n  mainContent: React.ReactNode;\n  children: React.ReactNode;\n  position: Position.Top | Position.Bottom | Position.Right | Position.Left;\n  showOnClick: boolean;\n  showArrowPointer?: boolean;\n}\n\nconst Popover: React.FunctionComponent<PopoverProps> = \n({\n    size=Size.Medium,\n    topSectionProps,\n    bottomSectionProps,\n    mainContent,\n    children,\n    position,\n    showOnClick=false,\n    showArrowPointer=false\n}) => {\n\n  const [showPopover, setShowPopover] = React.useState(false);\n  const popoverRef = React.useRef<any>();\n\n  React.useEffect(()=>{\n    const checkIfClickedOutside = (e: { target: any; }) => {\n      if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {\n        setShowPopover(false);\n      }\n    }\n\n    document.addEventListener(\"mousedown\", checkIfClickedOutside)\n\n    return () => {\n      document.removeEventListener(\"mousedown\", checkIfClickedOutside)\n    }\n  },[showPopover]);\n\n  return (\n    <Wrapper position={position} showOnClick={showOnClick} showPopover={showPopover}>\n      <Container size={size} position={position} ref={popoverRef} showArrowPointer={showArrowPointer}>\n        {!!topSectionProps && \n          <TopContainer size={size}>\n            <TextContainer note={!!topSectionProps?.note} size={size}>\n              {topSectionProps?.note && \n                <NoteContainer size={size}>\n                  {topSectionProps.note}\n                </NoteContainer>\n              }\n              <LabelContainer size={size}>\n                {topSectionProps?.text}\n              </LabelContainer>\n            </TextContainer>\n\n            {showOnClick && \n              <CloseButtonContainer size={size} data-testid={'closeBtn'}>\n                <IconButton action={()=>setShowPopover(false)} useTransparentBackground iconColor={COLORS.neutral_600} variant='secondary' shape='circular'>\n                  <SystemIcons.Close />\n                </IconButton>\n              </CloseButtonContainer>\n            }\n          </TopContainer>\n        }\n\n        <MainContentWrapper size={size}>\n          <MiddleContainer size={size}>\n            {mainContent}\n          </MiddleContainer>\n        </MainContentWrapper>\n\n        {!!bottomSectionProps && \n          <BottomContainer size={size}>\n            {!!bottomSectionProps?.textButton?.icon && \n              <TextButtonContainer size={size} data-testid={'textBtn'}>\n                <Button size={size} variant='secondary' icon={bottomSectionProps.textButton.icon} onClick={bottomSectionProps.textButton.action}>\n                  {bottomSectionProps.textButton.label}\n                </Button>\n              </TextButtonContainer>\n            }\n\n            <div className='bottom-flex'/>\n            \n            <IconButtonContainer size={size} data-testid={'iconBtn'}>\n              {bottomSectionProps?.iconButtons?.map((iconButton) =>\n                \n                  <IconButton action={iconButton.action} variant='secondary' shape='circular' useTransparentBackground>\n                    {iconButton.icon}\n                  </IconButton>            \n              )}\n            </IconButtonContainer>\n          </BottomContainer>\n        }\n      </Container>\n\n      <div onClick={()=>showOnClick && setShowPopover(!showPopover)}>\n        {children}\n\n        <div className='pointer-space'/>\n      </div>\n\n    </Wrapper>\n  );\n};\n\nexport default Popover;"],"file":"Popover.js"}
+{"version":3,"sources":["../../src/Popover/Popover.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Button","IconButton","SystemIcons","BOXSHADOWS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","scrollBarStyling","Z_INDEXES","Position","Size","Container","div","props","size","Small","Large","white","BOXSHADOW_CENTERED","popover","position","Bottom","Top","Left","Right","showArrowPointer","renderArrowStyles","TopContainer","MainContentWrapper","MiddleContainer","BottomContainer","TextContainer","renderMargins","note","NoteContainer","Regular","neutral_600","LabelContainer","Bold","CloseButtonContainer","TextButtonContainer","IconButtonContainer","Wrapper","showOnClick","showPopover","isNotePresent","Popover","Medium","topSectionProps","bottomSectionProps","mainContent","children","useState","setShowPopover","popoverRef","useRef","useEffect","checkIfClickedOutside","e","current","contains","target","document","addEventListener","removeEventListener","text","textButton","icon","action","label","iconButtons","map","iconButton"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,EAAiBC,kBAAjB,EAAqCC,kBAArC,QAA+D,IAA/D;AACA,SAASC,MAAT,EAAiBC,UAAjB,QAAmC,WAAnC;AACA,SAASC,WAAT,QAA4B,UAA5B;AACA,SAASC,UAAT,EAAqBC,iBAArB,EAAwCC,iBAAxC,EAA2DC,iBAA3D,EAA8EC,mBAA9E,EAAmGC,gBAAnG,EAAqHC,SAArH,QAAsI,WAAtI;AACA,SAASC,QAAT,EAAmBC,IAAnB,QAA+B,UAA/B;;;AAEA,IAAMC,SAAS,GAAGhB,MAAM,CAACiB,GAAV,qVACD,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACK,KAApB,GAA4B,OAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACM,KAApB,GAA4B,OAA5B,GAAsC,OAAxF;AAAA,CADC,EAEA,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACK,KAApB,GAA4B,OAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACM,KAApB,GAA4B,OAA5B,GAAsC,OAAxF;AAAA,CAFA,EAICpB,MAAM,CAACqB,KAJR,EAMCf,UAAU,CAACgB,kBANZ,EAWFV,SAAS,CAACW,OAXR,EAaX,UAACN,KAAD;AAAA,SAAYA,KAAK,CAACO,QAAN,IAAkBX,QAAQ,CAACY,MAA3B,GAAoC,iEAApC,GAAwG,EAApH;AAAA,CAbW,EAcX,UAACR,KAAD;AAAA,SAAYA,KAAK,CAACO,QAAN,IAAkBX,QAAQ,CAACa,GAA3B,GAAiC,oEAAjC,GAAwG,EAApH;AAAA,CAdW,EAgBX,UAACT,KAAD;AAAA,SAAYA,KAAK,CAACO,QAAN,IAAkBX,QAAQ,CAACc,IAA3B,GAAkC,oEAAlC,GAAyG,EAArH;AAAA,CAhBW,EAiBX,UAACV,KAAD;AAAA,SAAYA,KAAK,CAACO,QAAN,IAAkBX,QAAQ,CAACe,KAA3B,GAAmC,mEAAnC,GAAyG,EAArH;AAAA,CAjBW,EAoBT,UAACX,KAAD;AAAA,SAAYA,KAAK,CAACY,gBAAN,GAAyBC,iBAAiB,CAACb,KAAK,CAACO,QAAP,CAA1C,GAA6D,EAAzE;AAAA,CApBS,CAAf;AAuBA,IAAMO,YAAY,GAAGhC,MAAM,CAACiB,GAAV,iIACN,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACK,KAApB,GAA4B,MAA5B,GAAqCF,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CADM,EAEH,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACK,KAApB,GAA4B,OAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACM,KAApB,GAA4B,OAA5B,GAAsC,OAAxF;AAAA,CAFG,CAAlB;AAMA,IAAMY,kBAAkB,GAAGjC,MAAM,CAACiB,GAAV,yFAAxB;AAIA,IAAMiB,eAAe,GAAGlC,MAAM,CAACiB,GAAV,8JACT,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACK,KAApB,GAA4B,OAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACM,KAApB,GAA4B,OAA5B,GAAsC,OAAxF;AAAA,CADS,EAEN,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACK,KAApB,GAA4B,OAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACM,KAApB,GAA4B,OAA5B,GAAsC,OAAxF;AAAA,CAFM,EAGR,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACK,KAApB,GAA4B,OAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACM,KAApB,GAA4B,QAA5B,GAAuC,QAAzF;AAAA,CAHQ,EAKjBT,gBAAgB,CAACG,IAAI,CAACK,KAAN,CALC,CAArB;AAQA,IAAMe,eAAe,GAAGnC,MAAM,CAACiB,GAAV,wKACT,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACK,KAApB,GAA4B,MAA5B,GAAqCF,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CADS,EAEN,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACK,KAApB,GAA4B,OAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACM,KAApB,GAA4B,OAA5B,GAAsC,OAAxF;AAAA,CAFM,CAArB;AAUA,IAAMe,aAAa,GAAGpC,MAAM,CAACiB,GAAV,yJAGP,UAACC,KAAD;AAAA,SAAWmB,aAAa,CAACnB,KAAK,CAACoB,IAAP,EAAapB,KAAK,CAACC,IAAnB,CAAxB;AAAA,CAHO,CAAnB;AAOA,IAAMoB,aAAa,GAAGvC,MAAM,CAACiB,GAAV,kFACf,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACK,KAApB,GACIT,mBAAmB,CAACT,kBAAkB,CAACsC,OAApB,EAA6BvC,MAAM,CAACwC,WAApC,CADvB,GAEIvB,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACM,KAApB,GACAX,iBAAiB,CAACR,kBAAkB,CAACsC,OAApB,EAA6BvC,MAAM,CAACwC,WAApC,CADjB,GAEAtC,kBAAkB,CAACD,kBAAkB,CAACsC,OAApB,EAA6BvC,MAAM,CAACwC,WAApC,CALtB;AAAA,CADe,CAAnB;AASA,IAAMC,cAAc,GAAG1C,MAAM,CAACiB,GAAV,kFAChB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACK,KAApB,GACIV,iBAAiB,CAACR,kBAAkB,CAACyC,IAApB,EAA0B,IAA1B,CADrB,GAEIzB,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACM,KAApB,GACAb,iBAAiB,CAACN,kBAAkB,CAACyC,IAApB,EAA0B,IAA1B,CADjB,GAEAlC,iBAAiB,CAACP,kBAAkB,CAACyC,IAApB,EAA0B,IAA1B,CALrB;AAAA,CADgB,CAApB;AASA,IAAMC,oBAAoB,GAAG5C,MAAM,CAACiB,GAAV,2FACd,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACK,KAApB,GAA4B,gBAA5B,GAA+CF,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACM,KAApB,GAA4B,kBAA5B,GAAiD,gBAA5G;AAAA,CADc,CAA1B;AAIA,IAAMwB,mBAAmB,GAAG7C,MAAM,CAACiB,GAAV,6FACb,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACK,KAApB,GAA4B,gBAA5B,GAA+CF,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACM,KAApB,GAA4B,kBAA5B,GAAiD,kBAA5G;AAAA,CADa,CAAzB;AAIA,IAAMyB,mBAAmB,GAAG9C,MAAM,CAACiB,GAAV,+GACb,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACK,KAApB,GAA4B,gBAA5B,GAA+CF,KAAK,CAACC,IAAN,KAAeJ,IAAI,CAACM,KAApB,GAA4B,kBAA5B,GAAiD,kBAA5G;AAAA,CADa,CAAzB;AAKA,IAAM0B,OAAO,GAAG/C,MAAM,CAACiB,GAAV,sPAIC,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACO,QAAN,KAAmBX,QAAQ,CAACa,GAA5B,IAAmCT,KAAK,CAACO,QAAN,KAAmBX,QAAQ,CAACY,MAA/D,GAAwE,MAAxE,GAAiF,MAA7F;AAAA,CAJD,EAKA,UAACR,KAAD;AAAA,SAAYA,KAAK,CAACO,QAAN,KAAmBX,QAAQ,CAACc,IAA5B,IAAoCV,KAAK,CAACO,QAAN,KAAmBX,QAAQ,CAACe,KAAhE,GAAwE,MAAxE,GAAiF,MAA7F;AAAA,CALA,EAQP,UAACX,KAAD;AAAA,SAAYA,KAAK,CAACO,QAAN,KAAmBX,QAAQ,CAACc,IAA5B,GAAmC,wBAAnC,GAA8D,EAA1E;AAAA,CARO,EASP,UAACV,KAAD;AAAA,SAAYA,KAAK,CAACO,QAAN,KAAmBX,QAAQ,CAACe,KAA5B,GAAoC,uBAApC,GAA8D,EAA1E;AAAA,CATO,EAWP,UAACX,KAAD;AAAA,SAAYA,KAAK,CAACO,QAAN,KAAmBX,QAAQ,CAACa,GAA5B,GAAkC,cAAlC,GAAmD,EAA/D;AAAA,CAXO,EAYP,UAACT,KAAD;AAAA,SAAYA,KAAK,CAACO,QAAN,KAAmBX,QAAQ,CAACY,MAA5B,GAAqC,WAArC,GAAmD,EAA/D;AAAA,CAZO,EAeT,UAACR,KAAD;AAAA,SACAA,KAAK,CAAC8B,WAAN,aACOhC,SADP,qCAEkBE,KAAK,CAAC+B,WAAN,GAAoB,SAApB,GAAgC,QAFlD,iCAGe/B,KAAK,CAAC+B,WAAN,GAAoB,GAApB,GAA0B,GAHzC,iEAOIjC,SAPJ,0EADA;AAAA,CAfS,CAAb;;AA8BA,IAAMqB,aAAa,GAAG,SAAhBA,aAAgB,CAACa,aAAD,EAAyB/B,IAAzB,EAAgD;AACpE,MAAI+B,aAAJ,EAAmB;AACjB,WAAO/B,IAAI,KAAKJ,IAAI,CAACK,KAAd,GAAsB,WAAtB,GAAoCD,IAAI,KAAKJ,IAAI,CAACM,KAAd,GAAsB,WAAtB,GAAoC,WAA/E;AACD,GAFD,MAEO;AACL,WAAOF,IAAI,KAAKJ,IAAI,CAACK,KAAd,GAAsB,WAAtB,GAAoCD,IAAI,KAAKJ,IAAI,CAACM,KAAd,GAAsB,MAAtB,GAA+B,MAA1E;AACD;AACF,CAND;;AAQA,IAAMU,iBAAiB,GAAG,SAApBA,iBAAoB,CAACN,QAAD,EAAwB;AAChD,MAAIA,QAAQ,KAAKX,QAAQ,CAACY,MAA1B,EAAkC;AAChC;AAUD;;AAED,MAAID,QAAQ,KAAKX,QAAQ,CAACa,GAA1B,EAA+B;AAC7B;AAUD;;AAED,MAAIF,QAAQ,KAAKX,QAAQ,CAACc,IAA1B,EAAgC;AAC9B;AAUD;;AAED,MAAIH,QAAQ,KAAKX,QAAQ,CAACe,KAA1B,EAAiC;AAC/B;AAUD;AACF,CApDD;;AAiFA,IAAMsB,OAA8C,GAAG,SAAjDA,OAAiD,OASjD;AAAA;;AAAA,uBARJhC,IAQI;AAAA,MARJA,IAQI,0BARGJ,IAAI,CAACqC,MAQR;AAAA,MAPJC,eAOI,QAPJA,eAOI;AAAA,MANJC,kBAMI,QANJA,kBAMI;AAAA,MALJC,WAKI,QALJA,WAKI;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,MAHJ/B,QAGI,QAHJA,QAGI;AAAA,8BAFJuB,WAEI;AAAA,MAFJA,WAEI,iCAFU,KAEV;AAAA,mCADJlB,gBACI;AAAA,MADJA,gBACI,sCADe,KACf;;AACJ,wBAAsC/B,KAAK,CAAC0D,QAAN,CAAe,KAAf,CAAtC;AAAA;AAAA,MAAOR,WAAP;AAAA,MAAoBS,cAApB;;AACA,MAAMC,UAAU,GAAG5D,KAAK,CAAC6D,MAAN,EAAnB;AAEA7D,EAAAA,KAAK,CAAC8D,SAAN,CAAgB,YAAM;AACpB,QAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACC,CAAD,EAAwB;AACpD,UAAId,WAAW,IAAIU,UAAU,CAACK,OAA1B,IAAqC,CAACL,UAAU,CAACK,OAAX,CAAmBC,QAAnB,CAA4BF,CAAC,CAACG,MAA9B,CAA1C,EAAiF;AAC/ER,QAAAA,cAAc,CAAC,KAAD,CAAd;AACD;AACF,KAJD;;AAMAS,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,WAA1B,EAAuCN,qBAAvC;AAEA,WAAO,YAAM;AACXK,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,WAA7B,EAA0CP,qBAA1C;AACD,KAFD;AAGD,GAZD,EAYG,CAACb,WAAD,CAZH;AAcA,sBACE,MAAC,OAAD;AAAS,IAAA,QAAQ,EAAExB,QAAnB;AAA6B,IAAA,WAAW,EAAEuB,WAA1C;AAAuD,IAAA,WAAW,EAAEC,WAApE;AAAA,4BACE,MAAC,SAAD;AAAW,MAAA,IAAI,EAAE9B,IAAjB;AAAuB,MAAA,QAAQ,EAAEM,QAAjC;AAA2C,MAAA,GAAG,EAAEkC,UAAhD;AAA4D,MAAA,gBAAgB,EAAE7B,gBAA9E;AAAA,iBACG,CAAC,CAACuB,eAAF,iBACC,MAAC,YAAD;AAAc,QAAA,IAAI,EAAElC,IAApB;AAAA,gCACE,MAAC,aAAD;AAAe,UAAA,IAAI,EAAE,CAAC,EAACkC,eAAD,aAACA,eAAD,eAACA,eAAe,CAAEf,IAAlB,CAAtB;AAA8C,UAAA,IAAI,EAAEnB,IAApD;AAAA,qBACG,CAAAkC,eAAe,SAAf,IAAAA,eAAe,WAAf,YAAAA,eAAe,CAAEf,IAAjB,kBAAyB,KAAC,aAAD;AAAe,YAAA,IAAI,EAAEnB,IAArB;AAAA,sBAA4BkC,eAAe,CAACf;AAA5C,YAD5B,eAEE,KAAC,cAAD;AAAgB,YAAA,IAAI,EAAEnB,IAAtB;AAAA,sBAA6BkC,eAA7B,aAA6BA,eAA7B,uBAA6BA,eAAe,CAAEiB;AAA9C,YAFF;AAAA,UADF,EAMGtB,WAAW,iBACV,KAAC,oBAAD;AAAsB,UAAA,IAAI,EAAE7B,IAA5B;AAAkC,yBAAa,UAA/C;AAAA,iCACE,KAAC,UAAD;AAAY,YAAA,MAAM,EAAE;AAAA,qBAAMuC,cAAc,CAAC,KAAD,CAApB;AAAA,aAApB;AAAiD,YAAA,wBAAwB,MAAzE;AAA0E,YAAA,SAAS,EAAEzD,MAAM,CAACwC,WAA5F;AAAyG,YAAA,OAAO,EAAC,WAAjH;AAA6H,YAAA,KAAK,EAAC,UAAnI;AAAA,mCACE,KAAC,WAAD,CAAa,KAAb;AADF;AADF,UAPJ;AAAA,QAFJ,eAkBE,KAAC,kBAAD;AAAoB,QAAA,IAAI,EAAEtB,IAA1B;AAAA,+BACE,KAAC,eAAD;AAAiB,UAAA,IAAI,EAAEA,IAAvB;AAAA,oBAA8BoC;AAA9B;AADF,QAlBF,EAsBG,CAAC,CAACD,kBAAF,iBACC,MAAC,eAAD;AAAiB,QAAA,IAAI,EAAEnC,IAAvB;AAAA,mBACG,CAAC,EAACmC,kBAAD,aAACA,kBAAD,wCAACA,kBAAkB,CAAEiB,UAArB,kDAAC,sBAAgCC,IAAjC,CAAD,iBACC,KAAC,mBAAD;AAAqB,UAAA,IAAI,EAAErD,IAA3B;AAAiC,yBAAa,SAA9C;AAAA,iCACE,KAAC,MAAD;AAAQ,YAAA,IAAI,EAAEA,IAAd;AAAoB,YAAA,OAAO,EAAC,WAA5B;AAAwC,YAAA,IAAI,EAAEmC,kBAAkB,CAACiB,UAAnB,CAA8BC,IAA5E;AAAkF,YAAA,OAAO,EAAElB,kBAAkB,CAACiB,UAAnB,CAA8BE,MAAzH;AAAA,sBACGnB,kBAAkB,CAACiB,UAAnB,CAA8BG;AADjC;AADF,UAFJ,eASE;AAAK,UAAA,SAAS,EAAC;AAAf,UATF,eAWE,KAAC,mBAAD;AAAqB,UAAA,IAAI,EAAEvD,IAA3B;AAAiC,yBAAa,SAA9C;AAAA,oBACGmC,kBADH,aACGA,kBADH,gDACGA,kBAAkB,CAAEqB,WADvB,0DACG,sBAAiCC,GAAjC,CAAqC,UAACC,UAAD;AAAA,gCACpC,KAAC,UAAD;AAAY,cAAA,MAAM,EAAEA,UAAU,CAACJ,MAA/B;AAAuC,cAAA,OAAO,EAAC,WAA/C;AAA2D,cAAA,KAAK,EAAC,UAAjE;AAA4E,cAAA,wBAAwB,MAApG;AAAA,wBACGI,UAAU,CAACL;AADd,cADoC;AAAA,WAArC;AADH,UAXF;AAAA,QAvBJ;AAAA,MADF,eA8CE;AAAK,MAAA,OAAO,EAAE;AAAA,eAAMxB,WAAW,IAAIU,cAAc,CAAC,CAACT,WAAF,CAAnC;AAAA,OAAd;AAAA,iBACGO,QADH,eAGE;AAAK,QAAA,SAAS,EAAC;AAAf,QAHF;AAAA,MA9CF;AAAA,IADF;AAsDD,CAjFD;;;AATEH,EAAAA,e;AAjBAiB,IAAAA,I;AACAhC,IAAAA,I;;AAiBAgB,EAAAA,kB;AAPAqB,IAAAA,W;AANAH,MAAAA,I;AACAC,MAAAA,M;AACAC,MAAAA,K;;AAKAH,IAAAA,U;AAPAC,MAAAA,I;AACAC,MAAAA,M;AACAC,MAAAA,K;;;AAYAnB,EAAAA,W;AACAC,EAAAA,Q;AAEAR,EAAAA,W;AACAlB,EAAAA,gB;;AAsFF,eAAeqB,OAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\nimport { Button, IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';\nimport { Position, Size } from '../types';\n\nconst Container = styled.div<{ size: Size; position: Position; showArrowPointer: boolean }>`\n  //height: ${(props) => (props.size === Size.Small ? '240px' : props.size === Size.Large ? '480px' : '360px')};\n  min-width: ${(props) => (props.size === Size.Small ? '320px' : props.size === Size.Large ? '640px' : '480px')};\n  border-radius: 4px;\n  background: ${COLORS.white};\n  cursor: default;\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n\n  position: absolute;  \n  visibility: hidden;\n  opacity: 0;\n  z-index: ${Z_INDEXES.popover};\n\n  ${(props) => (props.position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '')}\n  ${(props) => (props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '')}\n\n  ${(props) => (props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '')}\n  ${(props) => (props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '')}\n\n  &::after {\n    ${(props) => (props.showArrowPointer ? renderArrowStyles(props.position) : '')}\n`;\n\nconst TopContainer = styled.div<{ size: Size }>`\n  height: ${(props) => (props.size === Size.Small ? '56px' : props.size === Size.Large ? '72px' : '64px')};\n  max-width: ${(props) => (props.size === Size.Small ? '344px' : props.size === Size.Large ? '624px' : '464px')};\n  display: flex;\n`;\n\nconst MainContentWrapper = styled.div<{ size: Size }>`\n  margin: 8px;\n`;\n\nconst MiddleContainer = styled.div<{ size: Size }>`\n  height: ${(props) => (props.size === Size.Small ? '104px' : props.size === Size.Large ? '304px' : '208px')};\n  max-width: ${(props) => (props.size === Size.Small ? '312px' : props.size === Size.Large ? '576px' : '424px')};\n  padding: ${(props) => (props.size === Size.Small ? '0 8px' : props.size === Size.Large ? '0 16px' : '0 12px')};\n  overflow-y: auto;\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst BottomContainer = styled.div<{ size: Size }>`\n  height: ${(props) => (props.size === Size.Small ? '64px' : props.size === Size.Large ? '88px' : '72px')};\n  max-width: ${(props) => (props.size === Size.Small ? '344px' : props.size === Size.Large ? '624px' : '464px')};\n  display: flex;\n\n  .bottom-flex {\n    flex: 1;\n  }\n`;\n\nconst TextContainer = styled.div<{ note: boolean; size: Size }>`\n  display: flex;\n  flex-direction: column;\n  margin: ${(props) => renderMargins(props.note, props.size)};\n  flex-grow: 1;\n`;\n\nconst NoteContainer = styled.div<{ size: Size }>`\n  ${(props) =>\n    props.size === Size.Small\n      ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)\n      : props.size === Size.Large\n      ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)\n      : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst LabelContainer = styled.div<{ size: Size }>`\n  ${(props) =>\n    props.size === Size.Small\n      ? ComponentSStyling(ComponentTextStyle.Bold, null)\n      : props.size === Size.Large\n      ? ComponentLStyling(ComponentTextStyle.Bold, null)\n      : ComponentMStyling(ComponentTextStyle.Bold, null)}\n`;\n\nconst CloseButtonContainer = styled.div<{ size: Size }>`\n  margin: ${(props) => (props.size === Size.Small ? '4px 16px 4px 0' : props.size === Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0')};\n`;\n\nconst TextButtonContainer = styled.div<{ size: Size }>`\n  margin: ${(props) => (props.size === Size.Small ? '8px 0 8px 16px' : props.size === Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px')};\n`;\n\nconst IconButtonContainer = styled.div<{ size: Size }>`\n  margin: ${(props) => (props.size === Size.Small ? '8px 16px 8px 0' : props.size === Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0')};\n  display: flex;\n`;\n\nconst Wrapper = styled.div<{ position: Position; showOnClick: boolean; showPopover: boolean }>`\n  position: relative;\n\n  .pointer-space {\n    height: ${(props) => (props.position === Position.Top || props.position === Position.Bottom ? '16px' : '100%')};\n    width: ${(props) => (props.position === Position.Left || props.position === Position.Right ? '16px' : '100%')};\n    position: absolute;\n\n    ${(props) => (props.position === Position.Left ? 'right:100%; bottom: 0%' : '')};\n    ${(props) => (props.position === Position.Right ? 'left:100%; bottom: 0%' : '')};\n\n    ${(props) => (props.position === Position.Top ? 'bottom: 100%' : '')};\n    ${(props) => (props.position === Position.Bottom ? 'top: 100%' : '')};\n  }\n\n  ${(props) =>\n    props.showOnClick\n      ? `${Container} {\n        visibility: ${props.showPopover ? 'visible' : 'hidden'};\n        opacity: ${props.showPopover ? '1' : '0'};\n    }\n    cursor: pointer;`\n      : `&:hover {\n      ${Container} {\n        visibility: visible;\n        opacity: 1;\n      }\n    }`}\n`;\n\nconst renderMargins = (isNotePresent: boolean, size: Size): string => {\n  if (isNotePresent) {\n    return size === Size.Small ? '10px 16px' : size === Size.Large ? '14px 24px' : '12px 20px';\n  } else {\n    return size === Size.Small ? '18px 16px' : size === Size.Large ? '24px' : '20px';\n  }\n};\n\nconst renderArrowStyles = (position: Position) => {\n  if (position === Position.Bottom) {\n    return `height: 0px;\n            width: 0px;\n            border-top: 16px solid transparent;\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid rgb(255,255,255);\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            bottom: calc(100% - 1px);`;\n  }\n\n  if (position === Position.Top) {\n    return `height: 0px;\n            width: 0px;\n            border-top: 16px solid rgb(255,255,255);\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid transparent;\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            top: calc(100% - 1px);`;\n  }\n\n  if (position === Position.Left) {\n    return `height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid transparent;\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid rgb(255,255,255);\n            content: \"\";\n            position: absolute;\n            left: calc(100% - 1px);\n            bottom: calc(50% - 12px);`;\n  }\n\n  if (position === Position.Right) {\n    return `height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid rgb(255,255,255);\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(100% - 1px);\n            bottom: calc(50% - 12px);`;\n  }\n};\n\ntype topSectionProps = {\n  text: string;\n  note?: string;\n};\n\ntype actionButtonProps = {\n  icon: React.ReactNode;\n  action: () => void;\n  label?: string;\n};\n\ntype bottomSectionProps = {\n  iconButtons?: actionButtonProps[];\n  textButton?: actionButtonProps;\n};\n\ntype PopoverProps = {\n  size?: Size.Small | Size.Medium | Size.Large;\n  topSectionProps?: topSectionProps;\n  bottomSectionProps?: bottomSectionProps;\n  mainContent: React.ReactNode;\n  children: React.ReactNode;\n  position: Position.Top | Position.Bottom | Position.Right | Position.Left;\n  showOnClick: boolean;\n  showArrowPointer?: boolean;\n};\n\nconst Popover: React.FunctionComponent<PopoverProps> = ({\n  size = Size.Medium,\n  topSectionProps,\n  bottomSectionProps,\n  mainContent,\n  children,\n  position,\n  showOnClick = false,\n  showArrowPointer = false,\n}) => {\n  const [showPopover, setShowPopover] = React.useState(false);\n  const popoverRef = React.useRef<any>();\n\n  React.useEffect(() => {\n    const checkIfClickedOutside = (e: { target: any }) => {\n      if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {\n        setShowPopover(false);\n      }\n    };\n\n    document.addEventListener('mousedown', checkIfClickedOutside);\n\n    return () => {\n      document.removeEventListener('mousedown', checkIfClickedOutside);\n    };\n  }, [showPopover]);\n\n  return (\n    <Wrapper position={position} showOnClick={showOnClick} showPopover={showPopover}>\n      <Container size={size} position={position} ref={popoverRef} showArrowPointer={showArrowPointer}>\n        {!!topSectionProps && (\n          <TopContainer size={size}>\n            <TextContainer note={!!topSectionProps?.note} size={size}>\n              {topSectionProps?.note && <NoteContainer size={size}>{topSectionProps.note}</NoteContainer>}\n              <LabelContainer size={size}>{topSectionProps?.text}</LabelContainer>\n            </TextContainer>\n\n            {showOnClick && (\n              <CloseButtonContainer size={size} data-testid={'closeBtn'}>\n                <IconButton action={() => setShowPopover(false)} useTransparentBackground iconColor={COLORS.neutral_600} variant=\"secondary\" shape=\"circular\">\n                  <SystemIcons.Close />\n                </IconButton>\n              </CloseButtonContainer>\n            )}\n          </TopContainer>\n        )}\n\n        <MainContentWrapper size={size}>\n          <MiddleContainer size={size}>{mainContent}</MiddleContainer>\n        </MainContentWrapper>\n\n        {!!bottomSectionProps && (\n          <BottomContainer size={size}>\n            {!!bottomSectionProps?.textButton?.icon && (\n              <TextButtonContainer size={size} data-testid={'textBtn'}>\n                <Button size={size} variant=\"secondary\" icon={bottomSectionProps.textButton.icon} onClick={bottomSectionProps.textButton.action}>\n                  {bottomSectionProps.textButton.label}\n                </Button>\n              </TextButtonContainer>\n            )}\n\n            <div className=\"bottom-flex\" />\n\n            <IconButtonContainer size={size} data-testid={'iconBtn'}>\n              {bottomSectionProps?.iconButtons?.map((iconButton) => (\n                <IconButton action={iconButton.action} variant=\"secondary\" shape=\"circular\" useTransparentBackground>\n                  {iconButton.icon}\n                </IconButton>\n              ))}\n            </IconButtonContainer>\n          </BottomContainer>\n        )}\n      </Container>\n\n      <div onClick={() => showOnClick && setShowPopover(!showPopover)}>\n        {children}\n\n        <div className=\"pointer-space\" />\n      </div>\n    </Wrapper>\n  );\n};\n\nexport default Popover;\n"],"file":"Popover.js"}

package/dist/Toggles/ToggleButton.cjs

@@ -56,6 +56,7 @@ var ToggleButton = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
           props.onChange(!active);
         }
       },
+      id: props.id,
       iconColor: active ? (_props$activeState$co = (_props$activeState = props.activeState) === null || _props$activeState === void 0 ? void 0 : _props$activeState.color) !== null && _props$activeState$co !== void 0 ? _props$activeState$co : props.defaultState.color : props.defaultState.color,
       disabled: props.disabled,
       children: active ? (_props$activeState$ic = (_props$activeState2 = props.activeState) === null || _props$activeState2 === void 0 ? void 0 : _props$activeState2.icon) !== null && _props$activeState$ic !== void 0 ? _props$activeState$ic : props.defaultState.icon : props.defaultState.icon
@@ -65,6 +66,7 @@ var ToggleButton = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
 
 exports.ToggleButton = ToggleButton;
 ToggleButton.propTypes = {
+  id: _propTypes.default.string,
   active: _propTypes.default.bool.isRequired,
   onChange: _propTypes.default.func,
   disabled: _propTypes.default.bool,

package/dist/Toggles/ToggleButton.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Toggles/ToggleButton.tsx"],"names":["Wrapper","styled","div","IconButtonContent","COLORS","white","primary_500","neutral_300","ToggleButton","React","forwardRef","props","ref","useState","active","setActive","useEffect","cls","activeState","disabled","onChange","color","defaultState","icon"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,okBACTC,6BADS,EAOPA,6BAPO,EAQOC,eAAOC,KARd,EAaPF,6BAbO,EAkBaC,eAAOE,WAlBpB,EA0BPH,6BA1BO,EA2BOC,eAAOG,WA3Bd,CAAb;;AA8CO,IAAMC,YAAY,gBAAGC,eAAMC,UAAN,CAAiB,UAACC,KAAD,EAA2BC,GAA3B,EAAiE;AAAA;;AAE5G,wBAA4BH,eAAMI,QAAN,CAAe,KAAf,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AAEAN,iBAAMO,SAAN,CAAgB;AAAA,WAAMD,SAAS,CAACJ,KAAK,CAACG,MAAP,CAAf;AAAA,GAAhB,EAA+C,CAACH,KAAK,CAACG,MAAP,CAA/C;;AAEA,MAAMG,GAAG,aAAMH,MAAM,GAAG,QAAH,GAAc,EAA1B,cAAgCH,KAAK,CAACO,WAAN,GAAoB,cAApB,GAAqC,EAArE,cAA2EP,KAAK,CAACQ,QAAN,GAAiB,UAAjB,GAA8B,EAAzG,CAAT;AAEA,sBACE,qBAAC,OAAD;AAAS,IAAA,SAAS,EAAEF,GAApB;AAAA,2BACE,qBAAC,kBAAD;AAAY,MAAA,OAAO,EAAE,WAArB;AACY,MAAA,GAAG,EAAEL,GADjB;AAEY,MAAA,wBAAwB,EAAE,IAFtC;AAGY,MAAA,KAAK,EAAE,UAHnB;AAIY,MAAA,MAAM,EAAE,kBAAM;AACZG,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;;AACA,YAAIH,KAAK,CAACS,QAAV,EAAoB;AAClBT,UAAAA,KAAK,CAACS,QAAN,CAAe,CAACN,MAAhB;AACD;AACF,OATb;AAUY,MAAA,SAAS,EAAEA,MAAM,kDAAGH,KAAK,CAACO,WAAT,uDAAG,mBAAmBG,KAAtB,yEAA+BV,KAAK,CAACW,YAAN,CAAmBD,KAAlD,GAA0DV,KAAK,CAACW,YAAN,CAAmBD,KAV1G;AAWY,MAAA,QAAQ,EAAEV,KAAK,CAACQ,QAX5B;AAAA,gBAYGL,MAAM,mDAAGH,KAAK,CAACO,WAAT,wDAAG,oBAAmBK,IAAtB,yEAA8BZ,KAAK,CAACW,YAAN,CAAmBC,IAAjD,GAAwDZ,KAAK,CAACW,YAAN,CAAmBC;AAZpF;AADF,IADF;AAkBD,CA1B2B,CAArB;;;;AARLT,EAAAA,M;AACAM,EAAAA,Q;AACAD,EAAAA,Q;AAEAG,EAAAA,Y;AATAC,IAAAA,I;AACAF,IAAAA,K;;AASAH,EAAAA,W;AAVAK,IAAAA,I;AACAF,IAAAA,K;;;eAwCab,Y","sourcesContent":["import React from 'react';\nimport {IconButton} from '../Button';\nimport styled from 'styled-components';\nimport {IconButtonContent} from '../Button/Iconbutton';\nimport {COLORS} from '../styles';\n\nconst Wrapper = styled.div`\n  ${IconButtonContent} {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ${IconButtonContent} {\n      background: ${COLORS.white};\n    }\n  }\n\n  &.active:not(.state-change) {\n    ${IconButtonContent}:after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ${COLORS.primary_500};\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ${IconButtonContent}:after {\n      background: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface ToggleButtonState {\n  icon: React.ReactNode;\n  color?: string;\n}\n\nexport interface ToggleButtonProps {\n  active: boolean;\n  onChange?: (value: boolean) => void;\n  disabled?: boolean;\n\n  defaultState: ToggleButtonState;\n  activeState?: ToggleButtonState;\n}\n\nexport const ToggleButton = React.forwardRef((props: ToggleButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n\n  const [active, setActive] = React.useState(false);\n\n  React.useEffect(() => setActive(props.active), [props.active]);\n\n  const cls = `${active ? 'active' : ''} ${props.activeState ? 'state-change' : ''} ${props.disabled ? 'disabled' : ''}`;\n\n  return (\n    <Wrapper className={cls}>\n      <IconButton variant={'secondary'}\n                  ref={ref}\n                  useTransparentBackground={true}\n                  shape={'circular'}\n                  action={() => {\n                    setActive(!active);\n                    if (props.onChange) {\n                      props.onChange(!active);\n                    }\n                  }}\n                  iconColor={active ? props.activeState?.color ?? props.defaultState.color : props.defaultState.color}\n                  disabled={props.disabled}>\n        {active ? props.activeState?.icon ?? props.defaultState.icon : props.defaultState.icon}\n      </IconButton>\n    </Wrapper>\n  )\n})\n\nexport default ToggleButton;\n"],"file":"ToggleButton.cjs"}
+{"version":3,"sources":["../../src/Toggles/ToggleButton.tsx"],"names":["Wrapper","styled","div","IconButtonContent","COLORS","white","primary_500","neutral_300","ToggleButton","React","forwardRef","props","ref","useState","active","setActive","useEffect","cls","activeState","disabled","onChange","id","color","defaultState","icon"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,okBACTC,6BADS,EAOPA,6BAPO,EAQOC,eAAOC,KARd,EAaPF,6BAbO,EAkBaC,eAAOE,WAlBpB,EA0BPH,6BA1BO,EA2BOC,eAAOG,WA3Bd,CAAb;;AA+CO,IAAMC,YAAY,gBAAGC,eAAMC,UAAN,CAAiB,UAACC,KAAD,EAA2BC,GAA3B,EAAiE;AAAA;;AAC5G,wBAA4BH,eAAMI,QAAN,CAAe,KAAf,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AAEAN,iBAAMO,SAAN,CAAgB;AAAA,WAAMD,SAAS,CAACJ,KAAK,CAACG,MAAP,CAAf;AAAA,GAAhB,EAA+C,CAACH,KAAK,CAACG,MAAP,CAA/C;;AAEA,MAAMG,GAAG,aAAMH,MAAM,GAAG,QAAH,GAAc,EAA1B,cAAgCH,KAAK,CAACO,WAAN,GAAoB,cAApB,GAAqC,EAArE,cAA2EP,KAAK,CAACQ,QAAN,GAAiB,UAAjB,GAA8B,EAAzG,CAAT;AAEA,sBACE,qBAAC,OAAD;AAAS,IAAA,SAAS,EAAEF,GAApB;AAAA,2BACE,qBAAC,kBAAD;AACE,MAAA,OAAO,EAAE,WADX;AAEE,MAAA,GAAG,EAAEL,GAFP;AAGE,MAAA,wBAAwB,EAAE,IAH5B;AAIE,MAAA,KAAK,EAAE,UAJT;AAKE,MAAA,MAAM,EAAE,kBAAM;AACZG,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;;AACA,YAAIH,KAAK,CAACS,QAAV,EAAoB;AAClBT,UAAAA,KAAK,CAACS,QAAN,CAAe,CAACN,MAAhB;AACD;AACF,OAVH;AAWE,MAAA,EAAE,EAAEH,KAAK,CAACU,EAXZ;AAYE,MAAA,SAAS,EAAEP,MAAM,kDAAGH,KAAK,CAACO,WAAT,uDAAG,mBAAmBI,KAAtB,yEAA+BX,KAAK,CAACY,YAAN,CAAmBD,KAAlD,GAA0DX,KAAK,CAACY,YAAN,CAAmBD,KAZhG;AAaE,MAAA,QAAQ,EAAEX,KAAK,CAACQ,QAblB;AAAA,gBAcGL,MAAM,mDAAGH,KAAK,CAACO,WAAT,wDAAG,oBAAmBM,IAAtB,yEAA8Bb,KAAK,CAACY,YAAN,CAAmBC,IAAjD,GAAwDb,KAAK,CAACY,YAAN,CAAmBC;AAdpF;AADF,IADF;AAoBD,CA3B2B,CAArB;;;;AATLH,EAAAA,E;AACAP,EAAAA,M;AACAM,EAAAA,Q;AACAD,EAAAA,Q;AAEAI,EAAAA,Y;AAVAC,IAAAA,I;AACAF,IAAAA,K;;AAUAJ,EAAAA,W;AAXAM,IAAAA,I;AACAF,IAAAA,K;;;eA0Cad,Y","sourcesContent":["import React from 'react';\nimport { IconButton } from '../Button';\nimport styled from 'styled-components';\nimport { IconButtonContent } from '../Button/Iconbutton';\nimport { COLORS } from '../styles';\n\nconst Wrapper = styled.div`\n  ${IconButtonContent} {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ${IconButtonContent} {\n      background: ${COLORS.white};\n    }\n  }\n\n  &.active:not(.state-change) {\n    ${IconButtonContent}:after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ${COLORS.primary_500};\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ${IconButtonContent}:after {\n      background: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface ToggleButtonState {\n  icon: React.ReactNode;\n  color?: string;\n}\n\nexport interface ToggleButtonProps {\n  id?: string;\n  active: boolean;\n  onChange?: (value: boolean) => void;\n  disabled?: boolean;\n\n  defaultState: ToggleButtonState;\n  activeState?: ToggleButtonState;\n}\n\nexport const ToggleButton = React.forwardRef((props: ToggleButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n  const [active, setActive] = React.useState(false);\n\n  React.useEffect(() => setActive(props.active), [props.active]);\n\n  const cls = `${active ? 'active' : ''} ${props.activeState ? 'state-change' : ''} ${props.disabled ? 'disabled' : ''}`;\n\n  return (\n    <Wrapper className={cls}>\n      <IconButton\n        variant={'secondary'}\n        ref={ref}\n        useTransparentBackground={true}\n        shape={'circular'}\n        action={() => {\n          setActive(!active);\n          if (props.onChange) {\n            props.onChange(!active);\n          }\n        }}\n        id={props.id}\n        iconColor={active ? props.activeState?.color ?? props.defaultState.color : props.defaultState.color}\n        disabled={props.disabled}>\n        {active ? props.activeState?.icon ?? props.defaultState.icon : props.defaultState.icon}\n      </IconButton>\n    </Wrapper>\n  );\n});\n\nexport default ToggleButton;\n"],"file":"ToggleButton.cjs"}

package/dist/Toggles/ToggleButton.d.ts

@@ -4,6 +4,7 @@ export interface ToggleButtonState {
     color?: string;
 }
 export interface ToggleButtonProps {
+    id?: string;
     active: boolean;
     onChange?: (value: boolean) => void;
     disabled?: boolean;

package/dist/Toggles/ToggleButton.js

@@ -37,6 +37,7 @@ export var ToggleButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
           props.onChange(!active);
         }
       },
+      id: props.id,
       iconColor: active ? (_props$activeState$co = (_props$activeState = props.activeState) === null || _props$activeState === void 0 ? void 0 : _props$activeState.color) !== null && _props$activeState$co !== void 0 ? _props$activeState$co : props.defaultState.color : props.defaultState.color,
       disabled: props.disabled,
       children: active ? (_props$activeState$ic = (_props$activeState2 = props.activeState) === null || _props$activeState2 === void 0 ? void 0 : _props$activeState2.icon) !== null && _props$activeState$ic !== void 0 ? _props$activeState$ic : props.defaultState.icon : props.defaultState.icon
@@ -44,6 +45,7 @@ export var ToggleButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   });
 });
 ToggleButton.propTypes = {
+  id: _pt.string,
   active: _pt.bool.isRequired,
   onChange: _pt.func,
   disabled: _pt.bool,

package/dist/Toggles/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Toggles/ToggleButton.tsx"],"names":["React","IconButton","styled","IconButtonContent","COLORS","Wrapper","div","white","primary_500","neutral_300","ToggleButton","forwardRef","props","ref","useState","active","setActive","useEffect","cls","activeState","disabled","onChange","color","defaultState","icon"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,UAAR,QAAyB,WAAzB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,iBAAR,QAAgC,sBAAhC;AACA,SAAQC,MAAR,QAAqB,WAArB;;AAEA,IAAMC,OAAO,GAAGH,MAAM,CAACI,GAAV,sjBACTH,iBADS,EAOPA,iBAPO,EAQOC,MAAM,CAACG,KARd,EAaPJ,iBAbO,EAkBaC,MAAM,CAACI,WAlBpB,EA0BPL,iBA1BO,EA2BOC,MAAM,CAACK,WA3Bd,CAAb;AA8CA,OAAO,IAAMC,YAAY,gBAAGV,KAAK,CAACW,UAAN,CAAiB,UAACC,KAAD,EAA2BC,GAA3B,EAAiE;AAAA;;AAE5G,wBAA4Bb,KAAK,CAACc,QAAN,CAAe,KAAf,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AAEAhB,EAAAA,KAAK,CAACiB,SAAN,CAAgB;AAAA,WAAMD,SAAS,CAACJ,KAAK,CAACG,MAAP,CAAf;AAAA,GAAhB,EAA+C,CAACH,KAAK,CAACG,MAAP,CAA/C;AAEA,MAAMG,GAAG,aAAMH,MAAM,GAAG,QAAH,GAAc,EAA1B,cAAgCH,KAAK,CAACO,WAAN,GAAoB,cAApB,GAAqC,EAArE,cAA2EP,KAAK,CAACQ,QAAN,GAAiB,UAAjB,GAA8B,EAAzG,CAAT;AAEA,sBACE,KAAC,OAAD;AAAS,IAAA,SAAS,EAAEF,GAApB;AAAA,2BACE,KAAC,UAAD;AAAY,MAAA,OAAO,EAAE,WAArB;AACY,MAAA,GAAG,EAAEL,GADjB;AAEY,MAAA,wBAAwB,EAAE,IAFtC;AAGY,MAAA,KAAK,EAAE,UAHnB;AAIY,MAAA,MAAM,EAAE,kBAAM;AACZG,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;;AACA,YAAIH,KAAK,CAACS,QAAV,EAAoB;AAClBT,UAAAA,KAAK,CAACS,QAAN,CAAe,CAACN,MAAhB;AACD;AACF,OATb;AAUY,MAAA,SAAS,EAAEA,MAAM,kDAAGH,KAAK,CAACO,WAAT,uDAAG,mBAAmBG,KAAtB,yEAA+BV,KAAK,CAACW,YAAN,CAAmBD,KAAlD,GAA0DV,KAAK,CAACW,YAAN,CAAmBD,KAV1G;AAWY,MAAA,QAAQ,EAAEV,KAAK,CAACQ,QAX5B;AAAA,gBAYGL,MAAM,mDAAGH,KAAK,CAACO,WAAT,wDAAG,oBAAmBK,IAAtB,yEAA8BZ,KAAK,CAACW,YAAN,CAAmBC,IAAjD,GAAwDZ,KAAK,CAACW,YAAN,CAAmBC;AAZpF;AADF,IADF;AAkBD,CA1B2B,CAArB;;AARLT,EAAAA,M;AACAM,EAAAA,Q;AACAD,EAAAA,Q;AAEAG,EAAAA,Y;AATAC,IAAAA,I;AACAF,IAAAA,K;;AASAH,EAAAA,W;AAVAK,IAAAA,I;AACAF,IAAAA,K;;;AAwCF,eAAeZ,YAAf","sourcesContent":["import React from 'react';\nimport {IconButton} from '../Button';\nimport styled from 'styled-components';\nimport {IconButtonContent} from '../Button/Iconbutton';\nimport {COLORS} from '../styles';\n\nconst Wrapper = styled.div`\n  ${IconButtonContent} {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ${IconButtonContent} {\n      background: ${COLORS.white};\n    }\n  }\n\n  &.active:not(.state-change) {\n    ${IconButtonContent}:after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ${COLORS.primary_500};\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ${IconButtonContent}:after {\n      background: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface ToggleButtonState {\n  icon: React.ReactNode;\n  color?: string;\n}\n\nexport interface ToggleButtonProps {\n  active: boolean;\n  onChange?: (value: boolean) => void;\n  disabled?: boolean;\n\n  defaultState: ToggleButtonState;\n  activeState?: ToggleButtonState;\n}\n\nexport const ToggleButton = React.forwardRef((props: ToggleButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n\n  const [active, setActive] = React.useState(false);\n\n  React.useEffect(() => setActive(props.active), [props.active]);\n\n  const cls = `${active ? 'active' : ''} ${props.activeState ? 'state-change' : ''} ${props.disabled ? 'disabled' : ''}`;\n\n  return (\n    <Wrapper className={cls}>\n      <IconButton variant={'secondary'}\n                  ref={ref}\n                  useTransparentBackground={true}\n                  shape={'circular'}\n                  action={() => {\n                    setActive(!active);\n                    if (props.onChange) {\n                      props.onChange(!active);\n                    }\n                  }}\n                  iconColor={active ? props.activeState?.color ?? props.defaultState.color : props.defaultState.color}\n                  disabled={props.disabled}>\n        {active ? props.activeState?.icon ?? props.defaultState.icon : props.defaultState.icon}\n      </IconButton>\n    </Wrapper>\n  )\n})\n\nexport default ToggleButton;\n"],"file":"ToggleButton.js"}
+{"version":3,"sources":["../../src/Toggles/ToggleButton.tsx"],"names":["React","IconButton","styled","IconButtonContent","COLORS","Wrapper","div","white","primary_500","neutral_300","ToggleButton","forwardRef","props","ref","useState","active","setActive","useEffect","cls","activeState","disabled","onChange","id","color","defaultState","icon"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,QAA2B,WAA3B;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,iBAAT,QAAkC,sBAAlC;AACA,SAASC,MAAT,QAAuB,WAAvB;;AAEA,IAAMC,OAAO,GAAGH,MAAM,CAACI,GAAV,sjBACTH,iBADS,EAOPA,iBAPO,EAQOC,MAAM,CAACG,KARd,EAaPJ,iBAbO,EAkBaC,MAAM,CAACI,WAlBpB,EA0BPL,iBA1BO,EA2BOC,MAAM,CAACK,WA3Bd,CAAb;AA+CA,OAAO,IAAMC,YAAY,gBAAGV,KAAK,CAACW,UAAN,CAAiB,UAACC,KAAD,EAA2BC,GAA3B,EAAiE;AAAA;;AAC5G,wBAA4Bb,KAAK,CAACc,QAAN,CAAe,KAAf,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AAEAhB,EAAAA,KAAK,CAACiB,SAAN,CAAgB;AAAA,WAAMD,SAAS,CAACJ,KAAK,CAACG,MAAP,CAAf;AAAA,GAAhB,EAA+C,CAACH,KAAK,CAACG,MAAP,CAA/C;AAEA,MAAMG,GAAG,aAAMH,MAAM,GAAG,QAAH,GAAc,EAA1B,cAAgCH,KAAK,CAACO,WAAN,GAAoB,cAApB,GAAqC,EAArE,cAA2EP,KAAK,CAACQ,QAAN,GAAiB,UAAjB,GAA8B,EAAzG,CAAT;AAEA,sBACE,KAAC,OAAD;AAAS,IAAA,SAAS,EAAEF,GAApB;AAAA,2BACE,KAAC,UAAD;AACE,MAAA,OAAO,EAAE,WADX;AAEE,MAAA,GAAG,EAAEL,GAFP;AAGE,MAAA,wBAAwB,EAAE,IAH5B;AAIE,MAAA,KAAK,EAAE,UAJT;AAKE,MAAA,MAAM,EAAE,kBAAM;AACZG,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;;AACA,YAAIH,KAAK,CAACS,QAAV,EAAoB;AAClBT,UAAAA,KAAK,CAACS,QAAN,CAAe,CAACN,MAAhB;AACD;AACF,OAVH;AAWE,MAAA,EAAE,EAAEH,KAAK,CAACU,EAXZ;AAYE,MAAA,SAAS,EAAEP,MAAM,kDAAGH,KAAK,CAACO,WAAT,uDAAG,mBAAmBI,KAAtB,yEAA+BX,KAAK,CAACY,YAAN,CAAmBD,KAAlD,GAA0DX,KAAK,CAACY,YAAN,CAAmBD,KAZhG;AAaE,MAAA,QAAQ,EAAEX,KAAK,CAACQ,QAblB;AAAA,gBAcGL,MAAM,mDAAGH,KAAK,CAACO,WAAT,wDAAG,oBAAmBM,IAAtB,yEAA8Bb,KAAK,CAACY,YAAN,CAAmBC,IAAjD,GAAwDb,KAAK,CAACY,YAAN,CAAmBC;AAdpF;AADF,IADF;AAoBD,CA3B2B,CAArB;;AATLH,EAAAA,E;AACAP,EAAAA,M;AACAM,EAAAA,Q;AACAD,EAAAA,Q;AAEAI,EAAAA,Y;AAVAC,IAAAA,I;AACAF,IAAAA,K;;AAUAJ,EAAAA,W;AAXAM,IAAAA,I;AACAF,IAAAA,K;;;AA0CF,eAAeb,YAAf","sourcesContent":["import React from 'react';\nimport { IconButton } from '../Button';\nimport styled from 'styled-components';\nimport { IconButtonContent } from '../Button/Iconbutton';\nimport { COLORS } from '../styles';\n\nconst Wrapper = styled.div`\n  ${IconButtonContent} {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ${IconButtonContent} {\n      background: ${COLORS.white};\n    }\n  }\n\n  &.active:not(.state-change) {\n    ${IconButtonContent}:after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ${COLORS.primary_500};\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ${IconButtonContent}:after {\n      background: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface ToggleButtonState {\n  icon: React.ReactNode;\n  color?: string;\n}\n\nexport interface ToggleButtonProps {\n  id?: string;\n  active: boolean;\n  onChange?: (value: boolean) => void;\n  disabled?: boolean;\n\n  defaultState: ToggleButtonState;\n  activeState?: ToggleButtonState;\n}\n\nexport const ToggleButton = React.forwardRef((props: ToggleButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n  const [active, setActive] = React.useState(false);\n\n  React.useEffect(() => setActive(props.active), [props.active]);\n\n  const cls = `${active ? 'active' : ''} ${props.activeState ? 'state-change' : ''} ${props.disabled ? 'disabled' : ''}`;\n\n  return (\n    <Wrapper className={cls}>\n      <IconButton\n        variant={'secondary'}\n        ref={ref}\n        useTransparentBackground={true}\n        shape={'circular'}\n        action={() => {\n          setActive(!active);\n          if (props.onChange) {\n            props.onChange(!active);\n          }\n        }}\n        id={props.id}\n        iconColor={active ? props.activeState?.color ?? props.defaultState.color : props.defaultState.color}\n        disabled={props.disabled}>\n        {active ? props.activeState?.icon ?? props.defaultState.icon : props.defaultState.icon}\n      </IconButton>\n    </Wrapper>\n  );\n});\n\nexport default ToggleButton;\n"],"file":"ToggleButton.js"}

package/dist/Toggles/ToggleSwitch.cjs

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
@@ -9,10 +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 React = _interopRequireWildcard(require("react"));
 
 var _TogglerStyles = require("./TogglerStyles");
@@ -23,17 +17,18 @@ var _common = require("../common");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["id", "disabled", "selected", "label", "isSemantic", "size", "onToggle", "className"];
-
 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); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+/**
+ * Import React libraries.
+ */
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-var ToggleSwitch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+/**
+ * Import custom styles.
+ */
+var ToggleSwitch = function ToggleSwitch(_ref) {
   var _size;
 
   var id = _ref.id,
@@ -42,9 +37,7 @@ var ToggleSwitch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       label = _ref.label,
       isSemantic = _ref.isSemantic,
       size = _ref.size,
-      onToggle = _ref.onToggle,
-      className = _ref.className,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+      onToggle = _ref.onToggle;
 
   /**
    * Does all required pre-requisites and toggles the switcher state.
@@ -56,21 +49,21 @@ var ToggleSwitch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onToggle(!selected);
   };
 
-  var focusVisibleRef = (0, _common.useFocusVisibleRef)([], ref);
+  var focusVisibleRef = (0, _common.useFocusVisibleRef)();
   size = (_size = size) !== null && _size !== void 0 ? _size : _.Size.Medium;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TogglerStyles.StyledSwitch, _objectSpread(_objectSpread({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TogglerStyles.StyledSwitch, {
     ref: focusVisibleRef,
     onClick: function onClick(e) {
       return toggle();
     },
-    onKeyDown: function onKeyDown(e) {
-      return (e.key === 'Enter' || e.key === ' ') && toggle();
+    onKeyUp: function onKeyUp(e) {
+      return e.key === 'Enter' && toggle();
     },
-    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(className ? " ".concat(className) : ''),
+    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : ''),
     selected: selected,
-    tabIndex: disabled ? -1 : 0
-  }, rest), {}, {
+    tabIndex: disabled ? -1 : 0,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TogglerStyles.ToggleSwitchContainer, {
+      id: "switchContainer",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TogglerStyles.ToggleSwitch, {
         className: isSemantic ? 'semantic' : ''
       })
@@ -79,8 +72,9 @@ var ToggleSwitch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       htmlFor: id,
       children: label
     })]
-  }));
-});
+  });
+};
+
 var _default = ToggleSwitch;
 exports.default = _default;
 //# sourceMappingURL=ToggleSwitch.cjs.map