@laerdal/life-react-components 1.9.8-dev.8.full → 1.9.9-dev.10

package/dist/SideMenu/SideMenuBody.js

@@ -0,0 +1,43 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import React from 'react';
+import styled from 'styled-components';
+import { scrollBarStyling } from '../styles';
+import { Size } from '../types';
+import { useDimensionsRef } from 'rooks';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 8px 0;\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n"])));
+var ScrollableContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  overflow-y: auto;\n  max-height: 100%;\n\n  &.scrollable {\n    margin-right: 6px;\n    padding-right: 10px;\n  }\n\n  ", "\n"])), scrollBarStyling(Size.Small));
+export var SideMenuBody = function SideMenuBody(props) {
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      scrollable = _React$useState2[0],
+      setScrollable = _React$useState2[1];
+
+  var _useDimensionsRef = useDimensionsRef({
+    updateOnResize: true
+  }),
+      _useDimensionsRef2 = _slicedToArray(_useDimensionsRef, 3),
+      ref = _useDimensionsRef2[0],
+      dimensions = _useDimensionsRef2[1],
+      node = _useDimensionsRef2[2];
+
+  React.useEffect(function () {
+    var _node$clientHeight, _node$scrollHeight;
+
+    var clientHeight = (_node$clientHeight = node === null || node === void 0 ? void 0 : node.clientHeight) !== null && _node$clientHeight !== void 0 ? _node$clientHeight : 0;
+    var scrollHeight = (_node$scrollHeight = node === null || node === void 0 ? void 0 : node.scrollHeight) !== null && _node$scrollHeight !== void 0 ? _node$scrollHeight : 0;
+    setScrollable(scrollHeight > clientHeight);
+  }, [dimensions, node, props.children]);
+  return /*#__PURE__*/_jsx(Wrapper, {
+    children: /*#__PURE__*/_jsx(ScrollableContainer, {
+      ref: ref,
+      className: scrollable ? 'scrollable' : '',
+      children: props.children
+    })
+  });
+};
+//# sourceMappingURL=SideMenuBody.js.map

package/dist/SideMenu/SideMenuBody.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/SideMenu/SideMenuBody.tsx"],"names":["React","styled","scrollBarStyling","Size","useDimensionsRef","Wrapper","div","ScrollableContainer","Small","SideMenuBody","props","useState","scrollable","setScrollable","updateOnResize","ref","dimensions","node","useEffect","clientHeight","scrollHeight","children"],"mappings":";;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,gBAAR,QAA+B,WAA/B;AACA,SAAQC,IAAR,QAAmB,UAAnB;AACA,SAAQC,gBAAR,QAA+B,OAA/B;;AAEA,IAAMC,OAAO,GAAGJ,MAAM,CAACK,GAAV,8MAAb;AAUA,IAAMC,mBAAmB,GAAGN,MAAM,CAACK,GAAV,uOAWrBJ,gBAAgB,CAACC,IAAI,CAACK,KAAN,CAXK,CAAzB;AAeA,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAA0B;AACpD,wBAAoCV,KAAK,CAACW,QAAN,CAAe,KAAf,CAApC;AAAA;AAAA,MAAOC,UAAP;AAAA,MAAmBC,aAAnB;;AACA,0BAAgCT,gBAAgB,CAAC;AAACU,IAAAA,cAAc,EAAE;AAAjB,GAAD,CAAhD;AAAA;AAAA,MAAOC,GAAP;AAAA,MAAYC,UAAZ;AAAA,MAAwBC,IAAxB;;AAEAjB,EAAAA,KAAK,CAACkB,SAAN,CAAgB,YAAM;AAAA;;AACpB,QAAMC,YAAY,yBAAGF,IAAH,aAAGA,IAAH,uBAAGA,IAAI,CAAEE,YAAT,mEAAyB,CAA3C;AACA,QAAMC,YAAY,yBAAGH,IAAH,aAAGA,IAAH,uBAAGA,IAAI,CAAEG,YAAT,mEAAyB,CAA3C;AACAP,IAAAA,aAAa,CAACO,YAAY,GAAGD,YAAhB,CAAb;AACD,GAJD,EAIG,CAACH,UAAD,EAAaC,IAAb,EAAmBP,KAAK,CAACW,QAAzB,CAJH;AAMA,sBACE,KAAC,OAAD;AAAA,2BACE,KAAC,mBAAD;AAAqB,MAAA,GAAG,EAAEN,GAA1B;AACqB,MAAA,SAAS,EAAEH,UAAU,GAAG,YAAH,GAAkB,EAD5D;AAAA,gBAEGF,KAAK,CAACW;AAFT;AADF,IADF;AAQD,CAlBM","sourcesContent":["import React from 'react';\nimport {SideMenuProps} from './types';\nimport styled from 'styled-components';\nimport {scrollBarStyling} from '../styles';\nimport {Size} from '../types';\nimport {useDimensionsRef} from 'rooks';\n\nconst Wrapper = styled.div`\n  padding: 8px 0;\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\nconst ScrollableContainer = styled.div`\n  flex: 1;\n  display: flex;\n  overflow-y: auto;\n  max-height: 100%;\n\n  &.scrollable {\n    margin-right: 6px;\n    padding-right: 10px;\n  }\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\n\nexport const SideMenuBody = (props: SideMenuProps) => {\n  const [scrollable, setScrollable] = React.useState(false);\n  const [ref, dimensions, node] = useDimensionsRef({updateOnResize: true});\n\n  React.useEffect(() => {\n    const clientHeight = node?.clientHeight ?? 0;\n    const scrollHeight = node?.scrollHeight ?? 0;\n    setScrollable(scrollHeight > clientHeight);\n  }, [dimensions, node, props.children]);\n\n  return (\n    <Wrapper>\n      <ScrollableContainer ref={ref as any}\n                           className={scrollable ? 'scrollable' : ''}>\n        {props.children}\n      </ScrollableContainer>\n    </Wrapper>\n  )\n};\n"],"file":"SideMenuBody.js"}

package/dist/SideMenu/SideMenuFooter.cjs

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideMenuFooter = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _assets = require("../assets");
+
+var _Button = require("../Button");
+
+var _MenuItem = require("../MenuItem");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+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; }
+
+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 Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n\n  border-top: 1px solid ", ";\n"])), _styles.COLORS.neutral_200);
+
+var ItemsContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 8px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: 100%;\n"])));
+
+var ButtonsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: 8px 16px;\n  gap: 10px;\n  width: 100%;\n\n  button {\n    flex: 1;\n  }\n\n  .small & {\n    gap: 0;\n    flex-direction: column-reverse;\n  }\n"])));
+
+var LogoContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  min-height: 80px;\n  padding: 8px 16px;\n  background-color: ", ";\n  width: 100%;\n"])), _styles.COLORS.neutral_20);
+
+var NoteContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_500));
+
+var SideMenuFooter = function SideMenuFooter(props) {
+  var _props$footer, _props$footer$items, _props$footer2, _props$footer2$button, _props$footer3, _props$footer3$button, _props$footer4;
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    children: [!!((_props$footer = props.footer) !== null && _props$footer !== void 0 && (_props$footer$items = _props$footer.items) !== null && _props$footer$items !== void 0 && _props$footer$items.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemsContainer, {
+      children: props.footer.items.map(function (item, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.MenuItem, _objectSpread({
+          size: props.size
+        }, item), index);
+      })
+    }), !!((_props$footer2 = props.footer) !== null && _props$footer2 !== void 0 && (_props$footer2$button = _props$footer2.buttons) !== null && _props$footer2$button !== void 0 && _props$footer2$button.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonsContainer, {
+      children: props.footer.buttons.map(function (button, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, _objectSpread(_objectSpread({
+          size: props.size
+        }, button), {}, {
+          children: button.label
+        }), index);
+      })
+    }), !((_props$footer3 = props.footer) !== null && _props$footer3 !== void 0 && (_props$footer3$button = _props$footer3.buttons) !== null && _props$footer3$button !== void 0 && _props$footer3$button.length) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(LogoContainer, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_assets.LaerdalLogo, {
+        height: '36px',
+        width: '66px'
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(NoteContainer, {
+        children: (_props$footer4 = props.footer) === null || _props$footer4 === void 0 ? void 0 : _props$footer4.note
+      })]
+    })]
+  });
+};
+
+exports.SideMenuFooter = SideMenuFooter;
+//# sourceMappingURL=SideMenuFooter.cjs.map

package/dist/SideMenu/SideMenuFooter.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/SideMenu/SideMenuFooter.tsx"],"names":["Wrapper","styled","div","COLORS","neutral_200","ItemsContainer","ButtonsContainer","LogoContainer","neutral_20","NoteContainer","ComponentTextStyle","Regular","neutral_500","SideMenuFooter","props","footer","items","length","map","item","index","size","buttons","button","label","note"],"mappings":";;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AAKA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,uOAOaC,eAAOC,WAPpB,CAAb;;AAUA,IAAMC,cAAc,GAAGJ,0BAAOC,GAAV,gMAApB;;AAQA,IAAMI,gBAAgB,GAAGL,0BAAOC,GAAV,wTAAtB;;AAkBA,IAAMK,aAAa,GAAGN,0BAAOC,GAAV,sRAOGC,eAAOK,UAPV,CAAnB;;AAWA,IAAMC,aAAa,GAAGR,0BAAOC,GAAV,gGACf,iCAAoBQ,2BAAmBC,OAAvC,EAAgDR,eAAOS,WAAvD,CADe,CAAnB;;AAIO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,KAAD,EAA0B;AAAA;;AAEtD,sBACE,sBAAC,OAAD;AAAA,eAEI,CAAC,mBAACA,KAAK,CAACC,MAAP,iEAAC,cAAcC,KAAf,gDAAC,oBAAqBC,MAAtB,CAAD,iBACA,qBAAC,cAAD;AAAA,gBACGH,KAAK,CAACC,MAAN,CAAaC,KAAb,CAAmBE,GAAnB,CAAuB,UAACC,IAAD,EAAOC,KAAP;AAAA,4BACtB,qBAAC,kBAAD;AAAsB,UAAA,IAAI,EAAEN,KAAK,CAACO;AAAlC,WAA4CF,IAA5C,GAAeC,KAAf,CADsB;AAAA,OAAvB;AADH,MAHJ,EAUI,CAAC,oBAACN,KAAK,CAACC,MAAP,oEAAC,eAAcO,OAAf,kDAAC,sBAAuBL,MAAxB,CAAD,iBACA,qBAAC,gBAAD;AAAA,gBAEIH,KAAK,CAACC,MAAN,CAAaO,OAAb,CAAqBJ,GAArB,CAAyB,UAACK,MAAD,EAASH,KAAT;AAAA,4BACvB,qBAAC,cAAD;AAAoB,UAAA,IAAI,EAAEN,KAAK,CAACO;AAAhC,WAA0CE,MAA1C;AAAA,oBACGA,MAAM,CAACC;AADV,YAAaJ,KAAb,CADuB;AAAA,OAAzB;AAFJ,MAXJ,EAsBI,oBAACN,KAAK,CAACC,MAAP,oEAAC,eAAcO,OAAf,kDAAC,sBAAuBL,MAAxB,kBACA,sBAAC,aAAD;AAAA,8BACE,qBAAC,mBAAD;AAAa,QAAA,MAAM,EAAE,MAArB;AAA6B,QAAA,KAAK,EAAE;AAApC,QADF,eAEE,qBAAC,aAAD;AAAA,oCAAgBH,KAAK,CAACC,MAAtB,mDAAgB,eAAcU;AAA9B,QAFF;AAAA,MAvBJ;AAAA,IADF;AAgCD,CAlCM","sourcesContent":["import React from 'react';\nimport {SideMenuProps} from './types';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentTextStyle,\n  ComponentXXSStyling\n} from '../styles';\nimport {LaerdalLogo} from '../assets';\nimport {Button} from '../Button';\nimport {MenuItem} from '../MenuItem';\n\nconst Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n\n  border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst ItemsContainer = styled.div`\n  padding: 8px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: 100%;\n`;\n\nconst ButtonsContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: 8px 16px;\n  gap: 10px;\n  width: 100%;\n\n  button {\n    flex: 1;\n  }\n\n  .small & {\n    gap: 0;\n    flex-direction: column-reverse;\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  min-height: 80px;\n  padding: 8px 16px;\n  background-color: ${COLORS.neutral_20};\n  width: 100%;\n`;\n\nconst NoteContainer = styled.div`\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\n`;\n\nexport const SideMenuFooter = (props: SideMenuProps) => {\n\n  return (\n    <Wrapper>\n      {\n        !!props.footer?.items?.length &&\n        <ItemsContainer>\n          {props.footer.items.map((item, index) =>\n            <MenuItem key={index} size={props.size} {...item}/>\n          )}\n        </ItemsContainer>\n      }\n      {\n        !!props.footer?.buttons?.length &&\n        <ButtonsContainer>\n          {\n            props.footer.buttons.map((button, index) =>\n              <Button key={index} size={props.size} {...button} >\n                {button.label}\n              </Button>\n            )\n          }\n        </ButtonsContainer>\n      }\n      {\n        !props.footer?.buttons?.length &&\n        <LogoContainer>\n          <LaerdalLogo height={'36px'} width={'66px'}/>\n          <NoteContainer>{props.footer?.note}</NoteContainer>\n        </LogoContainer>\n      }\n\n    </Wrapper>\n  )\n};\n"],"file":"SideMenuFooter.cjs"}

package/dist/SideMenu/SideMenuFooter.d.ts

@@ -0,0 +1,2 @@
+import { SideMenuProps } from './types';
+export declare const SideMenuFooter: (props: SideMenuProps) => JSX.Element;

package/dist/SideMenu/SideMenuFooter.js

@@ -0,0 +1,51 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+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; }
+
+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) { _defineProperty(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; }
+
+import React from 'react';
+import styled from 'styled-components';
+import { COLORS, ComponentTextStyle, ComponentXXSStyling } from '../styles';
+import { LaerdalLogo } from '../assets';
+import { Button } from '../Button';
+import { MenuItem } from '../MenuItem';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n\n  border-top: 1px solid ", ";\n"])), COLORS.neutral_200);
+var ItemsContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 8px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: 100%;\n"])));
+var ButtonsContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: 8px 16px;\n  gap: 10px;\n  width: 100%;\n\n  button {\n    flex: 1;\n  }\n\n  .small & {\n    gap: 0;\n    flex-direction: column-reverse;\n  }\n"])));
+var LogoContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  min-height: 80px;\n  padding: 8px 16px;\n  background-color: ", ";\n  width: 100%;\n"])), COLORS.neutral_20);
+var NoteContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n"])), ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_500));
+export var SideMenuFooter = function SideMenuFooter(props) {
+  var _props$footer, _props$footer$items, _props$footer2, _props$footer2$button, _props$footer3, _props$footer3$button, _props$footer4;
+
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    children: [!!((_props$footer = props.footer) !== null && _props$footer !== void 0 && (_props$footer$items = _props$footer.items) !== null && _props$footer$items !== void 0 && _props$footer$items.length) && /*#__PURE__*/_jsx(ItemsContainer, {
+      children: props.footer.items.map(function (item, index) {
+        return /*#__PURE__*/_jsx(MenuItem, _objectSpread({
+          size: props.size
+        }, item), index);
+      })
+    }), !!((_props$footer2 = props.footer) !== null && _props$footer2 !== void 0 && (_props$footer2$button = _props$footer2.buttons) !== null && _props$footer2$button !== void 0 && _props$footer2$button.length) && /*#__PURE__*/_jsx(ButtonsContainer, {
+      children: props.footer.buttons.map(function (button, index) {
+        return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+          size: props.size
+        }, button), {}, {
+          children: button.label
+        }), index);
+      })
+    }), !((_props$footer3 = props.footer) !== null && _props$footer3 !== void 0 && (_props$footer3$button = _props$footer3.buttons) !== null && _props$footer3$button !== void 0 && _props$footer3$button.length) && /*#__PURE__*/_jsxs(LogoContainer, {
+      children: [/*#__PURE__*/_jsx(LaerdalLogo, {
+        height: '36px',
+        width: '66px'
+      }), /*#__PURE__*/_jsx(NoteContainer, {
+        children: (_props$footer4 = props.footer) === null || _props$footer4 === void 0 ? void 0 : _props$footer4.note
+      })]
+    })]
+  });
+};
+//# sourceMappingURL=SideMenuFooter.js.map

package/dist/SideMenu/SideMenuFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/SideMenu/SideMenuFooter.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXXSStyling","LaerdalLogo","Button","MenuItem","Wrapper","div","neutral_200","ItemsContainer","ButtonsContainer","LogoContainer","neutral_20","NoteContainer","Regular","neutral_500","SideMenuFooter","props","footer","items","length","map","item","index","size","buttons","button","label","note"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SACEC,MADF,EAEEC,kBAFF,EAGEC,mBAHF,QAIO,WAJP;AAKA,SAAQC,WAAR,QAA0B,WAA1B;AACA,SAAQC,MAAR,QAAqB,WAArB;AACA,SAAQC,QAAR,QAAuB,aAAvB;;;AAEA,IAAMC,OAAO,GAAGP,MAAM,CAACQ,GAAV,yNAOaP,MAAM,CAACQ,WAPpB,CAAb;AAUA,IAAMC,cAAc,GAAGV,MAAM,CAACQ,GAAV,kLAApB;AAQA,IAAMG,gBAAgB,GAAGX,MAAM,CAACQ,GAAV,0SAAtB;AAkBA,IAAMI,aAAa,GAAGZ,MAAM,CAACQ,GAAV,wQAOGP,MAAM,CAACY,UAPV,CAAnB;AAWA,IAAMC,aAAa,GAAGd,MAAM,CAACQ,GAAV,kFACfL,mBAAmB,CAACD,kBAAkB,CAACa,OAApB,EAA6Bd,MAAM,CAACe,WAApC,CADJ,CAAnB;AAIA,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,KAAD,EAA0B;AAAA;;AAEtD,sBACE,MAAC,OAAD;AAAA,eAEI,CAAC,mBAACA,KAAK,CAACC,MAAP,iEAAC,cAAcC,KAAf,gDAAC,oBAAqBC,MAAtB,CAAD,iBACA,KAAC,cAAD;AAAA,gBACGH,KAAK,CAACC,MAAN,CAAaC,KAAb,CAAmBE,GAAnB,CAAuB,UAACC,IAAD,EAAOC,KAAP;AAAA,4BACtB,KAAC,QAAD;AAAsB,UAAA,IAAI,EAAEN,KAAK,CAACO;AAAlC,WAA4CF,IAA5C,GAAeC,KAAf,CADsB;AAAA,OAAvB;AADH,MAHJ,EAUI,CAAC,oBAACN,KAAK,CAACC,MAAP,oEAAC,eAAcO,OAAf,kDAAC,sBAAuBL,MAAxB,CAAD,iBACA,KAAC,gBAAD;AAAA,gBAEIH,KAAK,CAACC,MAAN,CAAaO,OAAb,CAAqBJ,GAArB,CAAyB,UAACK,MAAD,EAASH,KAAT;AAAA,4BACvB,KAAC,MAAD;AAAoB,UAAA,IAAI,EAAEN,KAAK,CAACO;AAAhC,WAA0CE,MAA1C;AAAA,oBACGA,MAAM,CAACC;AADV,YAAaJ,KAAb,CADuB;AAAA,OAAzB;AAFJ,MAXJ,EAsBI,oBAACN,KAAK,CAACC,MAAP,oEAAC,eAAcO,OAAf,kDAAC,sBAAuBL,MAAxB,kBACA,MAAC,aAAD;AAAA,8BACE,KAAC,WAAD;AAAa,QAAA,MAAM,EAAE,MAArB;AAA6B,QAAA,KAAK,EAAE;AAApC,QADF,eAEE,KAAC,aAAD;AAAA,oCAAgBH,KAAK,CAACC,MAAtB,mDAAgB,eAAcU;AAA9B,QAFF;AAAA,MAvBJ;AAAA,IADF;AAgCD,CAlCM","sourcesContent":["import React from 'react';\nimport {SideMenuProps} from './types';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentTextStyle,\n  ComponentXXSStyling\n} from '../styles';\nimport {LaerdalLogo} from '../assets';\nimport {Button} from '../Button';\nimport {MenuItem} from '../MenuItem';\n\nconst Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n\n  border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst ItemsContainer = styled.div`\n  padding: 8px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: 100%;\n`;\n\nconst ButtonsContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: 8px 16px;\n  gap: 10px;\n  width: 100%;\n\n  button {\n    flex: 1;\n  }\n\n  .small & {\n    gap: 0;\n    flex-direction: column-reverse;\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  min-height: 80px;\n  padding: 8px 16px;\n  background-color: ${COLORS.neutral_20};\n  width: 100%;\n`;\n\nconst NoteContainer = styled.div`\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\n`;\n\nexport const SideMenuFooter = (props: SideMenuProps) => {\n\n  return (\n    <Wrapper>\n      {\n        !!props.footer?.items?.length &&\n        <ItemsContainer>\n          {props.footer.items.map((item, index) =>\n            <MenuItem key={index} size={props.size} {...item}/>\n          )}\n        </ItemsContainer>\n      }\n      {\n        !!props.footer?.buttons?.length &&\n        <ButtonsContainer>\n          {\n            props.footer.buttons.map((button, index) =>\n              <Button key={index} size={props.size} {...button} >\n                {button.label}\n              </Button>\n            )\n          }\n        </ButtonsContainer>\n      }\n      {\n        !props.footer?.buttons?.length &&\n        <LogoContainer>\n          <LaerdalLogo height={'36px'} width={'66px'}/>\n          <NoteContainer>{props.footer?.note}</NoteContainer>\n        </LogoContainer>\n      }\n\n    </Wrapper>\n  )\n};\n"],"file":"SideMenuFooter.js"}

package/dist/SideMenu/SideMenuHeader.cjs

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideMenuHeader = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _Button = require("../Button");
+
+var _icons = require("../icons");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _excluded = ["icon"];
+
+var _templateObject, _templateObject2;
+
+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; }
+
+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 Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  padding: 0 8px;\n\n  .small & {\n    min-height: 48px;\n  }\n\n  .medium & {\n    min-height: 56px;\n  }\n\n  .large & {\n    min-height: 64px;\n  }\n"])));
+
+var LabelContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 8px;\n\n  .small & {\n    ", "\n  }\n\n  .medium & {\n    ", "\n  }\n\n  .large & {\n    ", "\n  }\n"])), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600));
+
+var SideMenuHeader = function SideMenuHeader(props) {
+  var _props$header, _props$header$actions, _props$header2;
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    children: [(_props$header = props.header) === null || _props$header === void 0 ? void 0 : (_props$header$actions = _props$header.actions) === null || _props$header$actions === void 0 ? void 0 : _props$header$actions.map(function (_ref, index) {
+      var icon = _ref.icon,
+          rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, _objectSpread(_objectSpread({
+        variant: 'secondary',
+        shape: 'circular'
+      }, rest), {}, {
+        children: icon
+      }), index);
+    }), ((_props$header2 = props.header) === null || _props$header2 === void 0 ? void 0 : _props$header2.label) && /*#__PURE__*/(0, _jsxRuntime.jsx)(LabelContainer, {
+      children: props.header.label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+      action: props.onClose,
+      variant: 'secondary',
+      shape: 'circular',
+      style: {
+        marginLeft: 'auto'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Close, {})
+    })]
+  });
+};
+
+exports.SideMenuHeader = SideMenuHeader;
+//# sourceMappingURL=SideMenuHeader.cjs.map

package/dist/SideMenu/SideMenuHeader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/SideMenu/SideMenuHeader.tsx"],"names":["Wrapper","styled","div","LabelContainer","ComponentTextStyle","Bold","COLORS","neutral_600","SideMenuHeader","props","header","actions","map","index","icon","rest","label","onClose","marginLeft"],"mappings":";;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,uRAAb;;AAkBA,IAAMC,cAAc,GAAGF,0BAAOC,GAAV,2MAId,+BAAkBE,2BAAmBC,IAArC,EAA2CC,eAAOC,WAAlD,CAJc,EAQd,+BAAkBH,2BAAmBC,IAArC,EAA2CC,eAAOC,WAAlD,CARc,EAYd,+BAAkBH,2BAAmBC,IAArC,EAA2CC,eAAOC,WAAlD,CAZc,CAApB;;AAgBO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,KAAD,EAA0B;AAAA;;AAEtD,sBACE,sBAAC,OAAD;AAAA,gCAEIA,KAAK,CAACC,MAFV,2EAEI,cAAcC,OAFlB,0DAEI,sBAAuBC,GAAvB,CAA2B,gBAAkBC,KAAlB;AAAA,UAAEC,IAAF,QAAEA,IAAF;AAAA,UAAWC,IAAX;AAAA,0BACzB,qBAAC,kBAAD;AAAwB,QAAA,OAAO,EAAE,WAAjC;AAA8C,QAAA,KAAK,EAAE;AAArD,SAAqEA,IAArE;AAAA,kBACGD;AADH,UAAiBD,KAAjB,CADyB;AAAA,KAA3B,CAFJ,EASI,mBAAAJ,KAAK,CAACC,MAAN,kEAAcM,KAAd,kBACA,qBAAC,cAAD;AAAA,gBACGP,KAAK,CAACC,MAAN,CAAaM;AADhB,MAVJ,eAcE,qBAAC,kBAAD;AAAY,MAAA,MAAM,EAAEP,KAAK,CAACQ,OAA1B;AAAmC,MAAA,OAAO,EAAE,WAA5C;AAAyD,MAAA,KAAK,EAAE,UAAhE;AAA4E,MAAA,KAAK,EAAE;AAACC,QAAAA,UAAU,EAAE;AAAb,OAAnF;AAAA,6BACE,qBAAC,kBAAD,CAAa,KAAb;AADF,MAdF;AAAA,IADF;AAoBD,CAtBM","sourcesContent":["import React from 'react';\nimport {SideMenuProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nconst Wrapper = styled.div`\n  display: flex;\n  align-items: center;\n  padding: 0 8px;\n\n  .small & {\n    min-height: 48px;\n  }\n\n  .medium & {\n    min-height: 56px;\n  }\n\n  .large & {\n    min-height: 64px;\n  }\n`;\n\nconst LabelContainer = styled.div`\n  margin-left: 8px;\n\n  .small & {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n\n  .medium & {\n    ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n\n  .large & {\n    ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nexport const SideMenuHeader = (props: SideMenuProps) => {\n\n  return (\n    <Wrapper>\n      {\n        props.header?.actions?.map(({icon, ...rest}, index) =>\n          <IconButton key={index} variant={'secondary'} shape={'circular'} {...rest}>\n            {icon}\n          </IconButton>\n        )\n      }\n      {\n        props.header?.label &&\n        <LabelContainer>\n          {props.header.label}\n        </LabelContainer>\n      }\n      <IconButton action={props.onClose} variant={'secondary'} shape={'circular'} style={{marginLeft: 'auto'}}>\n        <SystemIcons.Close/>\n      </IconButton>\n    </Wrapper>\n  )\n};\n"],"file":"SideMenuHeader.cjs"}

package/dist/SideMenu/SideMenuHeader.d.ts

@@ -0,0 +1,2 @@
+import { SideMenuProps } from './types';
+export declare const SideMenuHeader: (props: SideMenuProps) => JSX.Element;

package/dist/SideMenu/SideMenuHeader.js

@@ -0,0 +1,48 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _excluded = ["icon"];
+
+var _templateObject, _templateObject2;
+
+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; }
+
+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) { _defineProperty(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; }
+
+import React from 'react';
+import styled from 'styled-components';
+import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles';
+import { IconButton } from '../Button';
+import { SystemIcons } from '../icons';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 0 8px;\n\n  .small & {\n    min-height: 48px;\n  }\n\n  .medium & {\n    min-height: 56px;\n  }\n\n  .large & {\n    min-height: 64px;\n  }\n"])));
+var LabelContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-left: 8px;\n\n  .small & {\n    ", "\n  }\n\n  .medium & {\n    ", "\n  }\n\n  .large & {\n    ", "\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600), ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
+export var SideMenuHeader = function SideMenuHeader(props) {
+  var _props$header, _props$header$actions, _props$header2;
+
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    children: [(_props$header = props.header) === null || _props$header === void 0 ? void 0 : (_props$header$actions = _props$header.actions) === null || _props$header$actions === void 0 ? void 0 : _props$header$actions.map(function (_ref, index) {
+      var icon = _ref.icon,
+          rest = _objectWithoutProperties(_ref, _excluded);
+
+      return /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+        variant: 'secondary',
+        shape: 'circular'
+      }, rest), {}, {
+        children: icon
+      }), index);
+    }), ((_props$header2 = props.header) === null || _props$header2 === void 0 ? void 0 : _props$header2.label) && /*#__PURE__*/_jsx(LabelContainer, {
+      children: props.header.label
+    }), /*#__PURE__*/_jsx(IconButton, {
+      action: props.onClose,
+      variant: 'secondary',
+      shape: 'circular',
+      style: {
+        marginLeft: 'auto'
+      },
+      children: /*#__PURE__*/_jsx(SystemIcons.Close, {})
+    })]
+  });
+};
+//# sourceMappingURL=SideMenuHeader.js.map

package/dist/SideMenu/SideMenuHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/SideMenu/SideMenuHeader.tsx"],"names":["React","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","IconButton","SystemIcons","Wrapper","div","LabelContainer","Bold","neutral_600","SideMenuHeader","props","header","actions","map","index","icon","rest","label","onClose","marginLeft"],"mappings":";;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,iBAAhB,EAAmCC,iBAAnC,EAAsDC,iBAAtD,EAAyEC,kBAAzE,QAAkG,WAAlG;AACA,SAAQC,UAAR,QAAyB,WAAzB;AACA,SAAQC,WAAR,QAA0B,UAA1B;;;AAEA,IAAMC,OAAO,GAAGR,MAAM,CAACS,GAAV,yQAAb;AAkBA,IAAMC,cAAc,GAAGV,MAAM,CAACS,GAAV,6LAIdL,iBAAiB,CAACC,kBAAkB,CAACM,IAApB,EAA0BV,MAAM,CAACW,WAAjC,CAJH,EAQdT,iBAAiB,CAACE,kBAAkB,CAACM,IAApB,EAA0BV,MAAM,CAACW,WAAjC,CARH,EAYdV,iBAAiB,CAACG,kBAAkB,CAACM,IAApB,EAA0BV,MAAM,CAACW,WAAjC,CAZH,CAApB;AAgBA,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,KAAD,EAA0B;AAAA;;AAEtD,sBACE,MAAC,OAAD;AAAA,gCAEIA,KAAK,CAACC,MAFV,2EAEI,cAAcC,OAFlB,0DAEI,sBAAuBC,GAAvB,CAA2B,gBAAkBC,KAAlB;AAAA,UAAEC,IAAF,QAAEA,IAAF;AAAA,UAAWC,IAAX;;AAAA,0BACzB,KAAC,UAAD;AAAwB,QAAA,OAAO,EAAE,WAAjC;AAA8C,QAAA,KAAK,EAAE;AAArD,SAAqEA,IAArE;AAAA,kBACGD;AADH,UAAiBD,KAAjB,CADyB;AAAA,KAA3B,CAFJ,EASI,mBAAAJ,KAAK,CAACC,MAAN,kEAAcM,KAAd,kBACA,KAAC,cAAD;AAAA,gBACGP,KAAK,CAACC,MAAN,CAAaM;AADhB,MAVJ,eAcE,KAAC,UAAD;AAAY,MAAA,MAAM,EAAEP,KAAK,CAACQ,OAA1B;AAAmC,MAAA,OAAO,EAAE,WAA5C;AAAyD,MAAA,KAAK,EAAE,UAAhE;AAA4E,MAAA,KAAK,EAAE;AAACC,QAAAA,UAAU,EAAE;AAAb,OAAnF;AAAA,6BACE,KAAC,WAAD,CAAa,KAAb;AADF,MAdF;AAAA,IADF;AAoBD,CAtBM","sourcesContent":["import React from 'react';\nimport {SideMenuProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nconst Wrapper = styled.div`\n  display: flex;\n  align-items: center;\n  padding: 0 8px;\n\n  .small & {\n    min-height: 48px;\n  }\n\n  .medium & {\n    min-height: 56px;\n  }\n\n  .large & {\n    min-height: 64px;\n  }\n`;\n\nconst LabelContainer = styled.div`\n  margin-left: 8px;\n\n  .small & {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n\n  .medium & {\n    ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n\n  .large & {\n    ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nexport const SideMenuHeader = (props: SideMenuProps) => {\n\n  return (\n    <Wrapper>\n      {\n        props.header?.actions?.map(({icon, ...rest}, index) =>\n          <IconButton key={index} variant={'secondary'} shape={'circular'} {...rest}>\n            {icon}\n          </IconButton>\n        )\n      }\n      {\n        props.header?.label &&\n        <LabelContainer>\n          {props.header.label}\n        </LabelContainer>\n      }\n      <IconButton action={props.onClose} variant={'secondary'} shape={'circular'} style={{marginLeft: 'auto'}}>\n        <SystemIcons.Close/>\n      </IconButton>\n    </Wrapper>\n  )\n};\n"],"file":"SideMenuHeader.js"}

package/dist/SideMenu/index.cjs

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  SideMenu: true
+};
+Object.defineProperty(exports, "SideMenu", {
+  enumerable: true,
+  get: function get() {
+    return _SideMenu.default;
+  }
+});
+
+var _SideMenu = _interopRequireDefault(require("./SideMenu"));
+
+var _types = require("./types");
+
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _types[key];
+    }
+  });
+});
+//# sourceMappingURL=index.cjs.map

package/dist/SideMenu/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/SideMenu/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export {default as SideMenu} from './SideMenu';\nexport * from './types';\n"],"file":"index.cjs"}

package/dist/SideMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SideMenu } from './SideMenu';
+export * from './types';

package/dist/SideMenu/index.js

@@ -0,0 +1,3 @@
+export { default as SideMenu } from './SideMenu';
+export * from './types';
+//# sourceMappingURL=index.js.map

package/dist/SideMenu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/SideMenu/index.ts"],"names":["default","SideMenu"],"mappings":"AAAA,SAAQA,OAAO,IAAIC,QAAnB,QAAkC,YAAlC;AACA,cAAc,SAAd","sourcesContent":["export {default as SideMenu} from './SideMenu';\nexport * from './types';\n"],"file":"index.js"}

package/dist/SideMenu/types.cjs

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.cjs.map

package/dist/SideMenu/types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"types.cjs"}

package/dist/SideMenu/types.d.ts

@@ -0,0 +1,27 @@
+import { ButtonProps } from '../Button/Button';
+import { IconButtonProps } from '../Button/Iconbutton';
+import { MenuItemProps } from '../MenuItem/MenuItem';
+import { Size } from '../types';
+export declare type SideMenuAction = Omit<IconButtonProps, 'variant' | 'shape' | 'isInMobileMenu' | 'borderRadius' | 'flatEdge' | 'focusBackgroundColor' | 'useTransparentBackground' | 'unsetIconSize' | 'shouldNotInteract' | 'invertFocus' | 'hideOnLowWidth' | 'children'> & {
+    icon: React.ReactNode;
+};
+export declare type SideMenuButton = Omit<ButtonProps, 'size' | 'iconOnly' | 'minWidth' | 'testId' | 'width' | 'invertFocus' | 'colorTheme' | 'flatEdge' | 'children'> & {
+    label: string;
+};
+export declare type SideMenuItem = Omit<MenuItemProps, 'size'>;
+export interface SideMenuHeader {
+    actions?: SideMenuAction[];
+    label?: string;
+}
+export interface SideMenuFooter {
+    items?: SideMenuItem[];
+    buttons?: SideMenuButton[];
+    note?: string;
+}
+export interface SideMenuProps {
+    size?: Size.Small | Size.Medium | Size.Large;
+    header?: SideMenuHeader;
+    footer?: SideMenuFooter;
+    onClose: () => void;
+    children?: any;
+}

package/dist/SideMenu/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/SideMenu/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"types.js"}

package/dist/Toggles/ToggleButton.cjs

@@ -29,7 +29,7 @@ var _templateObject;
 
 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 ToggleButton = function ToggleButton(props) {
+var ToggleButton = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$activeState$co, _props$activeState, _props$activeState$ic, _props$activeState2;
 
   var _React$useState = _react.default.useState(false),
@@ -46,6 +46,7 @@ var ToggleButton = function ToggleButton(props) {
     className: cls,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
       variant: 'secondary',
+      ref: ref,
       useTransparentBackground: true,
       shape: 'circular',
       action: function action() {
@@ -55,15 +56,17 @@ var ToggleButton = function ToggleButton(props) {
           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
     })
   });
-};
+});
 
 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","props","React","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,YAAwD,GAAG,SAA3DA,YAA2D,CAACC,KAAD,EAAW;AAAA;;AAEjF,wBAA4BC,eAAMC,QAAN,CAAe,KAAf,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AAEAH,iBAAMI,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,wBAAwB,EAAE,IADtC;AAEY,MAAA,KAAK,EAAE,UAFnB;AAGY,MAAA,MAAM,EAAE,kBAAM;AACZF,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;;AACA,YAAIH,KAAK,CAACS,QAAV,EAAoB;AAClBT,UAAAA,KAAK,CAACS,QAAN,CAAe,CAACN,MAAhB;AACD;AACF,OARb;AASY,MAAA,SAAS,EAAEA,MAAM,kDAAGH,KAAK,CAACO,WAAT,uDAAG,mBAAmBG,KAAtB,yEAA+BV,KAAK,CAACW,YAAN,CAAmBD,KAAlD,GAA0DV,KAAK,CAACW,YAAN,CAAmBD,KAT1G;AAUY,MAAA,QAAQ,EAAEV,KAAK,CAACQ,QAV5B;AAAA,gBAWGL,MAAM,mDAAGH,KAAK,CAACO,WAAT,wDAAG,oBAAmBK,IAAtB,yEAA8BZ,KAAK,CAACW,YAAN,CAAmBC,IAAjD,GAAwDZ,KAAK,CAACW,YAAN,CAAmBC;AAXpF;AADF,IADF;AAiBD,CAzBM;;;;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;;;eAuCaX,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.FunctionComponent<ToggleButtonProps> = (props) => {\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                  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,11 +4,12 @@ export interface ToggleButtonState {
     color?: string;
 }
 export interface ToggleButtonProps {
+    id?: string;
     active: boolean;
     onChange?: (value: boolean) => void;
     disabled?: boolean;
     defaultState: ToggleButtonState;
     activeState?: ToggleButtonState;
 }
-export declare const ToggleButton: React.FunctionComponent<ToggleButtonProps>;
+export declare const ToggleButton: React.ForwardRefExoticComponent<ToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default ToggleButton;

package/dist/Toggles/ToggleButton.js

@@ -11,7 +11,7 @@ import { IconButtonContent } 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);
-export var ToggleButton = function ToggleButton(props) {
+export var ToggleButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$activeState$co, _props$activeState, _props$activeState$ic, _props$activeState2;
 
   var _React$useState = React.useState(false),
@@ -27,6 +27,7 @@ export var ToggleButton = function ToggleButton(props) {
     className: cls,
     children: /*#__PURE__*/_jsx(IconButton, {
       variant: 'secondary',
+      ref: ref,
       useTransparentBackground: true,
       shape: 'circular',
       action: function action() {
@@ -36,13 +37,15 @@ export var ToggleButton = function ToggleButton(props) {
           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
     })
   });
-};
+});
 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","props","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,YAAwD,GAAG,SAA3DA,YAA2D,CAACC,KAAD,EAAW;AAAA;;AAEjF,wBAA4BX,KAAK,CAACY,QAAN,CAAe,KAAf,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AAEAd,EAAAA,KAAK,CAACe,SAAN,CAAgB;AAAA,WAAMD,SAAS,CAACH,KAAK,CAACE,MAAP,CAAf;AAAA,GAAhB,EAA+C,CAACF,KAAK,CAACE,MAAP,CAA/C;AAEA,MAAMG,GAAG,aAAMH,MAAM,GAAG,QAAH,GAAc,EAA1B,cAAgCF,KAAK,CAACM,WAAN,GAAoB,cAApB,GAAqC,EAArE,cAA2EN,KAAK,CAACO,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,wBAAwB,EAAE,IADtC;AAEY,MAAA,KAAK,EAAE,UAFnB;AAGY,MAAA,MAAM,EAAE,kBAAM;AACZF,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;;AACA,YAAIF,KAAK,CAACQ,QAAV,EAAoB;AAClBR,UAAAA,KAAK,CAACQ,QAAN,CAAe,CAACN,MAAhB;AACD;AACF,OARb;AASY,MAAA,SAAS,EAAEA,MAAM,kDAAGF,KAAK,CAACM,WAAT,uDAAG,mBAAmBG,KAAtB,yEAA+BT,KAAK,CAACU,YAAN,CAAmBD,KAAlD,GAA0DT,KAAK,CAACU,YAAN,CAAmBD,KAT1G;AAUY,MAAA,QAAQ,EAAET,KAAK,CAACO,QAV5B;AAAA,gBAWGL,MAAM,mDAAGF,KAAK,CAACM,WAAT,wDAAG,oBAAmBK,IAAtB,yEAA8BX,KAAK,CAACU,YAAN,CAAmBC,IAAjD,GAAwDX,KAAK,CAACU,YAAN,CAAmBC;AAXpF;AADF,IADF;AAiBD,CAzBM;;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;;;AAuCF,eAAeV,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.FunctionComponent<ToggleButtonProps> = (props) => {\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                  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

@@ -63,6 +63,7 @@ var ToggleSwitch = function ToggleSwitch(_ref) {
     selected: selected,
     tabIndex: disabled ? -1 : 0,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TogglerStyles.ToggleSwitchContainer, {
+      id: "switchContainer",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TogglerStyles.ToggleSwitch, {
         className: isSemantic ? 'semantic' : ''
       })