@laerdal/life-react-components 3.0.1-dev.14 → 3.0.1-dev.15.full

package/dist/Toggles/ToggleButton.cjs

@@ -20,7 +20,7 @@ var _excluded = ["id", "active", "onChange", "disabled", "defaultState", "active
 var _templateObject;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &.active:not(.state-change) {\n    ", ":after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ", ";\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ", ":after {\n      background: ", ";\n    }\n  }\n"])), _Iconbutton.IconButtonContent, _Iconbutton.IconButtonContent, _styles.COLORS.white, _Iconbutton.IconButtonContent, _styles.COLORS.primary_500, _Iconbutton.IconButtonContent, _styles.COLORS.neutral_300);
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &.active:not(.state-change) {\n    ", ":after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ", ";\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ", ":after {\n      background: ", ";\n    }\n  }\n"])), _Iconbutton.IconButtonContentStyles, _Iconbutton.IconButtonContentStyles, _styles.COLORS.white, _Iconbutton.IconButtonContentStyles, _styles.COLORS.primary_500, _Iconbutton.IconButtonContentStyles, _styles.COLORS.neutral_300);
 var ToggleButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var _activeState$color, _activeState$icon;
   var id = _ref.id,

package/dist/Toggles/ToggleButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.cjs","names":["Wrapper","styled","div","IconButtonContent","COLORS","white","primary_500","neutral_300","ToggleButton","React","forwardRef","ref","id","active","onChange","disabled","defaultState","activeState","className","rest","useState","isActive","setIsActive","useEffect","cls","color","icon"],"sources":["../../src/Toggles/ToggleButton.tsx"],"sourcesContent":["import React from 'react';\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 extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'onClick'> {\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(({\n                                                id,\n                                                active,\n                                                onChange,\n                                                disabled,\n                                                defaultState,\n                                                activeState,\n                                                className,\n                                                ...rest\n                                              }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n  const [isActive, setIsActive] = React.useState(false);\n\n  React.useEffect(() => setIsActive(active), [active]);\n\n  const cls = `${className || ''} ${isActive ? 'active' : ''} ${activeState ? 'state-change' : ''} ${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          setIsActive(!isActive);\n          if (onChange) {\n            onChange(!isActive);\n          }\n        }}\n        id={id}\n        iconColor={isActive ? activeState?.color ?? defaultState.color : defaultState.color}\n        disabled={disabled}\n        aria-pressed={isActive}\n        {...rest}>\n        {isActive ? activeState?.icon ?? defaultState.icon : defaultState.icon}\n      </IconButton>\n    </Wrapper>\n  );\n});\n\nexport default ToggleButton;\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAmC;AAAA;AAAA;AAAA;AAAA;AAEnC,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,okBACtBC,6BAAiB,EAMfA,6BAAiB,EACHC,cAAM,CAACC,KAAK,EAK1BF,6BAAiB,EAKGC,cAAM,CAACE,WAAW,EAQtCH,6BAAiB,EACHC,cAAM,CAACG,WAAW,CAGrC;AAgBM,IAAMC,YAAY,gBAAGC,cAAK,CAACC,UAAU,CAAC,gBASuBC,GAAiC,EAAK;EAAA;EAAA,IAR1DC,EAAE,QAAFA,EAAE;IACFC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;IACZC,WAAW,QAAXA,WAAW;IACXC,SAAS,QAATA,SAAS;IACNC,IAAI;EAErD,sBAAgCV,cAAK,CAACW,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA9CC,QAAQ;IAAEC,WAAW;EAE5Bb,cAAK,CAACc,SAAS,CAAC;IAAA,OAAMD,WAAW,CAACT,MAAM,CAAC;EAAA,GAAE,CAACA,MAAM,CAAC,CAAC;EAEpD,IAAMW,GAAG,aAAMN,SAAS,IAAI,EAAE,cAAIG,QAAQ,GAAG,QAAQ,GAAG,EAAE,cAAIJ,WAAW,GAAG,cAAc,GAAG,EAAE,cAAIF,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE;EAE/H,oBACE,qBAAC,OAAO;IAAC,SAAS,EAAES,GAAI;IAAA,uBACtB,qBAAC,kBAAU;MACT,OAAO,EAAE,WAAY;MACrB,GAAG,EAAEb,GAAI;MACT,wBAAwB,EAAE,IAAK;MAC/B,KAAK,EAAE,UAAW;MAClB,MAAM,EAAE,kBAAM;QACZW,WAAW,CAAC,CAACD,QAAQ,CAAC;QACtB,IAAIP,QAAQ,EAAE;UACZA,QAAQ,CAAC,CAACO,QAAQ,CAAC;QACrB;MACF,CAAE;MACF,EAAE,EAAET,EAAG;MACP,SAAS,EAAES,QAAQ,yBAAGJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEQ,KAAK,mEAAIT,YAAY,CAACS,KAAK,GAAGT,YAAY,CAACS,KAAM;MACpF,QAAQ,EAAEV,QAAS;MACnB,gBAAcM;IAAS,GACnBF,IAAI;MAAA,UACPE,QAAQ,wBAAGJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAES,IAAI,iEAAIV,YAAY,CAACU,IAAI,GAAGV,YAAY,CAACU;IAAI;EAC3D,EACL;AAEd,CAAC,CAAC;AAAC;AAAA;EA9CDb,MAAM;EACNC,QAAQ;EACRC,QAAQ;EAERC,YAAY;IATZU,IAAI;IACJD,KAAK;EAAA;EASLR,WAAW;IAVXS,IAAI;IACJD,KAAK;EAAA;AAAA;AAAA,eAoDQjB,YAAY;AAAA"}
+{"version":3,"file":"ToggleButton.cjs","names":["Wrapper","styled","div","IconButtonContentStyles","COLORS","white","primary_500","neutral_300","ToggleButton","React","forwardRef","ref","id","active","onChange","disabled","defaultState","activeState","className","rest","useState","isActive","setIsActive","useEffect","cls","color","icon"],"sources":["../../src/Toggles/ToggleButton.tsx"],"sourcesContent":["import React from 'react';\nimport { IconButton } from '../Button';\nimport styled from 'styled-components';\nimport { IconButtonContentStyles } from '../Button/Iconbutton';\nimport { COLORS } from '../styles';\n\nconst Wrapper = styled.div`\n  ${IconButtonContentStyles} {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ${IconButtonContentStyles} {\n      background: ${COLORS.white};\n    }\n  }\n\n  &.active:not(.state-change) {\n    ${IconButtonContentStyles}: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    ${IconButtonContentStyles}: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 extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'onClick'> {\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(({\n                                                id,\n                                                active,\n                                                onChange,\n                                                disabled,\n                                                defaultState,\n                                                activeState,\n                                                className,\n                                                ...rest\n                                              }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n  const [isActive, setIsActive] = React.useState(false);\n\n  React.useEffect(() => setIsActive(active), [active]);\n\n  const cls = `${className || ''} ${isActive ? 'active' : ''} ${activeState ? 'state-change' : ''} ${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          setIsActive(!isActive);\n          if (onChange) {\n            onChange(!isActive);\n          }\n        }}\n        id={id}\n        iconColor={isActive ? activeState?.color ?? defaultState.color : defaultState.color}\n        disabled={disabled}\n        aria-pressed={isActive}\n        {...rest}>\n        {isActive ? activeState?.icon ?? defaultState.icon : defaultState.icon}\n      </IconButton>\n    </Wrapper>\n  );\n});\n\nexport default ToggleButton;\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAmC;AAAA;AAAA;AAAA;AAAA;AAEnC,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,okBACtBC,mCAAuB,EAMrBA,mCAAuB,EACTC,cAAM,CAACC,KAAK,EAK1BF,mCAAuB,EAKHC,cAAM,CAACE,WAAW,EAQtCH,mCAAuB,EACTC,cAAM,CAACG,WAAW,CAGrC;AAgBM,IAAMC,YAAY,gBAAGC,cAAK,CAACC,UAAU,CAAC,gBASuBC,GAAiC,EAAK;EAAA;EAAA,IAR1DC,EAAE,QAAFA,EAAE;IACFC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;IACZC,WAAW,QAAXA,WAAW;IACXC,SAAS,QAATA,SAAS;IACNC,IAAI;EAErD,sBAAgCV,cAAK,CAACW,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA9CC,QAAQ;IAAEC,WAAW;EAE5Bb,cAAK,CAACc,SAAS,CAAC;IAAA,OAAMD,WAAW,CAACT,MAAM,CAAC;EAAA,GAAE,CAACA,MAAM,CAAC,CAAC;EAEpD,IAAMW,GAAG,aAAMN,SAAS,IAAI,EAAE,cAAIG,QAAQ,GAAG,QAAQ,GAAG,EAAE,cAAIJ,WAAW,GAAG,cAAc,GAAG,EAAE,cAAIF,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE;EAE/H,oBACE,qBAAC,OAAO;IAAC,SAAS,EAAES,GAAI;IAAA,uBACtB,qBAAC,kBAAU;MACT,OAAO,EAAE,WAAY;MACrB,GAAG,EAAEb,GAAI;MACT,wBAAwB,EAAE,IAAK;MAC/B,KAAK,EAAE,UAAW;MAClB,MAAM,EAAE,kBAAM;QACZW,WAAW,CAAC,CAACD,QAAQ,CAAC;QACtB,IAAIP,QAAQ,EAAE;UACZA,QAAQ,CAAC,CAACO,QAAQ,CAAC;QACrB;MACF,CAAE;MACF,EAAE,EAAET,EAAG;MACP,SAAS,EAAES,QAAQ,yBAAGJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEQ,KAAK,mEAAIT,YAAY,CAACS,KAAK,GAAGT,YAAY,CAACS,KAAM;MACpF,QAAQ,EAAEV,QAAS;MACnB,gBAAcM;IAAS,GACnBF,IAAI;MAAA,UACPE,QAAQ,wBAAGJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAES,IAAI,iEAAIV,YAAY,CAACU,IAAI,GAAGV,YAAY,CAACU;IAAI;EAC3D,EACL;AAEd,CAAC,CAAC;AAAC;AAAA;EA9CDb,MAAM;EACNC,QAAQ;EACRC,QAAQ;EAERC,YAAY;IATZU,IAAI;IACJD,KAAK;EAAA;EASLR,WAAW;IAVXS,IAAI;IACJD,KAAK;EAAA;AAAA;AAAA,eAoDQjB,YAAY;AAAA"}

package/dist/Toggles/ToggleButton.js

@@ -10,10 +10,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import { IconButton } from '../Button';
 import styled from 'styled-components';
-import { IconButtonContent } from '../Button/Iconbutton';
+import { IconButtonContentStyles } from '../Button/Iconbutton';
 import { COLORS } from '../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &.active:not(.state-change) {\n    ", ":after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ", ";\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ", ":after {\n      background: ", ";\n    }\n  }\n"])), IconButtonContent, IconButtonContent, COLORS.white, IconButtonContent, COLORS.primary_500, IconButtonContent, COLORS.neutral_300);
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &.active:not(.state-change) {\n    ", ":after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ", ";\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ", ":after {\n      background: ", ";\n    }\n  }\n"])), IconButtonContentStyles, IconButtonContentStyles, COLORS.white, IconButtonContentStyles, COLORS.primary_500, IconButtonContentStyles, COLORS.neutral_300);
 export var ToggleButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _activeState$color, _activeState$icon;
   var id = _ref.id,

package/dist/Toggles/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.js","names":["React","IconButton","styled","IconButtonContent","COLORS","Wrapper","div","white","primary_500","neutral_300","ToggleButton","forwardRef","ref","id","active","onChange","disabled","defaultState","activeState","className","rest","useState","isActive","setIsActive","useEffect","cls","color","icon"],"sources":["../../src/Toggles/ToggleButton.tsx"],"sourcesContent":["import React from 'react';\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 extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'onClick'> {\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(({\n                                                id,\n                                                active,\n                                                onChange,\n                                                disabled,\n                                                defaultState,\n                                                activeState,\n                                                className,\n                                                ...rest\n                                              }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n  const [isActive, setIsActive] = React.useState(false);\n\n  React.useEffect(() => setIsActive(active), [active]);\n\n  const cls = `${className || ''} ${isActive ? 'active' : ''} ${activeState ? 'state-change' : ''} ${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          setIsActive(!isActive);\n          if (onChange) {\n            onChange(!isActive);\n          }\n        }}\n        id={id}\n        iconColor={isActive ? activeState?.color ?? defaultState.color : defaultState.color}\n        disabled={disabled}\n        aria-pressed={isActive}\n        {...rest}>\n        {isActive ? activeState?.icon ?? defaultState.icon : defaultState.icon}\n      </IconButton>\n    </Wrapper>\n  );\n});\n\nexport default ToggleButton;\n"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,WAAW;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,MAAM,QAAQ,WAAW;AAAC;AAEnC,IAAMC,OAAO,GAAGH,MAAM,CAACI,GAAG,sjBACtBH,iBAAiB,EAMfA,iBAAiB,EACHC,MAAM,CAACG,KAAK,EAK1BJ,iBAAiB,EAKGC,MAAM,CAACI,WAAW,EAQtCL,iBAAiB,EACHC,MAAM,CAACK,WAAW,CAGrC;AAgBD,OAAO,IAAMC,YAAY,gBAAGV,KAAK,CAACW,UAAU,CAAC,gBASuBC,GAAiC,EAAK;EAAA;EAAA,IAR1DC,EAAE,QAAFA,EAAE;IACFC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;IACZC,WAAW,QAAXA,WAAW;IACXC,SAAS,QAATA,SAAS;IACNC,IAAI;EAErD,sBAAgCpB,KAAK,CAACqB,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA9CC,QAAQ;IAAEC,WAAW;EAE5BvB,KAAK,CAACwB,SAAS,CAAC;IAAA,OAAMD,WAAW,CAACT,MAAM,CAAC;EAAA,GAAE,CAACA,MAAM,CAAC,CAAC;EAEpD,IAAMW,GAAG,aAAMN,SAAS,IAAI,EAAE,cAAIG,QAAQ,GAAG,QAAQ,GAAG,EAAE,cAAIJ,WAAW,GAAG,cAAc,GAAG,EAAE,cAAIF,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE;EAE/H,oBACE,KAAC,OAAO;IAAC,SAAS,EAAES,GAAI;IAAA,uBACtB,KAAC,UAAU;MACT,OAAO,EAAE,WAAY;MACrB,GAAG,EAAEb,GAAI;MACT,wBAAwB,EAAE,IAAK;MAC/B,KAAK,EAAE,UAAW;MAClB,MAAM,EAAE,kBAAM;QACZW,WAAW,CAAC,CAACD,QAAQ,CAAC;QACtB,IAAIP,QAAQ,EAAE;UACZA,QAAQ,CAAC,CAACO,QAAQ,CAAC;QACrB;MACF,CAAE;MACF,EAAE,EAAET,EAAG;MACP,SAAS,EAAES,QAAQ,yBAAGJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEQ,KAAK,mEAAIT,YAAY,CAACS,KAAK,GAAGT,YAAY,CAACS,KAAM;MACpF,QAAQ,EAAEV,QAAS;MACnB,gBAAcM;IAAS,GACnBF,IAAI;MAAA,UACPE,QAAQ,wBAAGJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAES,IAAI,iEAAIV,YAAY,CAACU,IAAI,GAAGV,YAAY,CAACU;IAAI;EAC3D,EACL;AAEd,CAAC,CAAC;AAAC;EA9CDb,MAAM;EACNC,QAAQ;EACRC,QAAQ;EAERC,YAAY;IATZU,IAAI;IACJD,KAAK;EAAA;EASLR,WAAW;IAVXS,IAAI;IACJD,KAAK;EAAA;AAAA;AAoDP,eAAehB,YAAY"}
+{"version":3,"file":"ToggleButton.js","names":["React","IconButton","styled","IconButtonContentStyles","COLORS","Wrapper","div","white","primary_500","neutral_300","ToggleButton","forwardRef","ref","id","active","onChange","disabled","defaultState","activeState","className","rest","useState","isActive","setIsActive","useEffect","cls","color","icon"],"sources":["../../src/Toggles/ToggleButton.tsx"],"sourcesContent":["import React from 'react';\nimport { IconButton } from '../Button';\nimport styled from 'styled-components';\nimport { IconButtonContentStyles } from '../Button/Iconbutton';\nimport { COLORS } from '../styles';\n\nconst Wrapper = styled.div`\n  ${IconButtonContentStyles} {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ${IconButtonContentStyles} {\n      background: ${COLORS.white};\n    }\n  }\n\n  &.active:not(.state-change) {\n    ${IconButtonContentStyles}: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    ${IconButtonContentStyles}: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 extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'onClick'> {\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(({\n                                                id,\n                                                active,\n                                                onChange,\n                                                disabled,\n                                                defaultState,\n                                                activeState,\n                                                className,\n                                                ...rest\n                                              }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n  const [isActive, setIsActive] = React.useState(false);\n\n  React.useEffect(() => setIsActive(active), [active]);\n\n  const cls = `${className || ''} ${isActive ? 'active' : ''} ${activeState ? 'state-change' : ''} ${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          setIsActive(!isActive);\n          if (onChange) {\n            onChange(!isActive);\n          }\n        }}\n        id={id}\n        iconColor={isActive ? activeState?.color ?? defaultState.color : defaultState.color}\n        disabled={disabled}\n        aria-pressed={isActive}\n        {...rest}>\n        {isActive ? activeState?.icon ?? defaultState.icon : defaultState.icon}\n      </IconButton>\n    </Wrapper>\n  );\n});\n\nexport default ToggleButton;\n"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,WAAW;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,uBAAuB,QAAQ,sBAAsB;AAC9D,SAASC,MAAM,QAAQ,WAAW;AAAC;AAEnC,IAAMC,OAAO,GAAGH,MAAM,CAACI,GAAG,sjBACtBH,uBAAuB,EAMrBA,uBAAuB,EACTC,MAAM,CAACG,KAAK,EAK1BJ,uBAAuB,EAKHC,MAAM,CAACI,WAAW,EAQtCL,uBAAuB,EACTC,MAAM,CAACK,WAAW,CAGrC;AAgBD,OAAO,IAAMC,YAAY,gBAAGV,KAAK,CAACW,UAAU,CAAC,gBASuBC,GAAiC,EAAK;EAAA;EAAA,IAR1DC,EAAE,QAAFA,EAAE;IACFC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;IACZC,WAAW,QAAXA,WAAW;IACXC,SAAS,QAATA,SAAS;IACNC,IAAI;EAErD,sBAAgCpB,KAAK,CAACqB,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA9CC,QAAQ;IAAEC,WAAW;EAE5BvB,KAAK,CAACwB,SAAS,CAAC;IAAA,OAAMD,WAAW,CAACT,MAAM,CAAC;EAAA,GAAE,CAACA,MAAM,CAAC,CAAC;EAEpD,IAAMW,GAAG,aAAMN,SAAS,IAAI,EAAE,cAAIG,QAAQ,GAAG,QAAQ,GAAG,EAAE,cAAIJ,WAAW,GAAG,cAAc,GAAG,EAAE,cAAIF,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE;EAE/H,oBACE,KAAC,OAAO;IAAC,SAAS,EAAES,GAAI;IAAA,uBACtB,KAAC,UAAU;MACT,OAAO,EAAE,WAAY;MACrB,GAAG,EAAEb,GAAI;MACT,wBAAwB,EAAE,IAAK;MAC/B,KAAK,EAAE,UAAW;MAClB,MAAM,EAAE,kBAAM;QACZW,WAAW,CAAC,CAACD,QAAQ,CAAC;QACtB,IAAIP,QAAQ,EAAE;UACZA,QAAQ,CAAC,CAACO,QAAQ,CAAC;QACrB;MACF,CAAE;MACF,EAAE,EAAET,EAAG;MACP,SAAS,EAAES,QAAQ,yBAAGJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEQ,KAAK,mEAAIT,YAAY,CAACS,KAAK,GAAGT,YAAY,CAACS,KAAM;MACpF,QAAQ,EAAEV,QAAS;MACnB,gBAAcM;IAAS,GACnBF,IAAI;MAAA,UACPE,QAAQ,wBAAGJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAES,IAAI,iEAAIV,YAAY,CAACU,IAAI,GAAGV,YAAY,CAACU;IAAI;EAC3D,EACL;AAEd,CAAC,CAAC;AAAC;EA9CDb,MAAM;EACNC,QAAQ;EACRC,QAAQ;EAERC,YAAY;IATZU,IAAI;IACJD,KAAK;EAAA;EASLR,WAAW;IAVXS,IAAI;IACJD,KAAK;EAAA;AAAA;AAoDP,eAAehB,YAAY"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "3.0.1-dev.14",
+  "version": "3.0.1-dev.15.full",
   "private": false,
   "author": "Erik Martirosyan <erik.martirosyan@laerdal.com>",
   "contributors": [],