@laerdal/life-react-components 1.2.2-dev.15 → 1.2.2-dev.17

package/dist/esm/Accordion/AccordionItem.js

@@ -0,0 +1,46 @@
+import _pt from "prop-types";
+import React from 'react';
+import { COLORS, ComponentM, ComponentS } from '..';
+import { SystemIcons } from '../icons';
+import { AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';
+
+const AccordionItem = props => {
+  const {
+    id,
+    onSelect,
+    isActive,
+    title,
+    icon,
+    disabled,
+    isLast
+  } = props;
+  return /*#__PURE__*/React.createElement(AccordionItemContainer, {
+    id: id,
+    displaySeparator: !isActive && !isLast,
+    isDisabled: disabled ?? false
+  }, /*#__PURE__*/React.createElement(ItemHeaderContainer, {
+    tabIndex: !disabled ? 0 : -1,
+    onClick: () => {
+      if (!disabled) {
+        onSelect(id);
+      }
+    },
+    isDisabled: disabled ?? false
+  }, icon && /*#__PURE__*/React.cloneElement(icon, {
+    size: '24px'
+  }), /*#__PURE__*/React.createElement(ComponentM, {
+    color: disabled ? COLORS.neutral_300 : undefined
+  }, title), isActive ? /*#__PURE__*/React.createElement(SystemIcons.ChevronUp, {
+    size: "24px"
+  }) : /*#__PURE__*/React.createElement(SystemIcons.ChevronDown, {
+    size: "24px"
+  })), isActive && /*#__PURE__*/React.createElement(ItemBodyContainer, null, /*#__PURE__*/React.createElement(ComponentS, null, props.children)));
+};
+
+AccordionItem.propTypes = {
+  onSelect: _pt.func.isRequired,
+  isActive: _pt.bool.isRequired,
+  isLast: _pt.bool.isRequired
+};
+export default AccordionItem;
+//# sourceMappingURL=AccordionItem.js.map

package/dist/esm/Accordion/AccordionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Accordion/AccordionItem.tsx"],"names":["React","COLORS","ComponentM","ComponentS","SystemIcons","AccordionItemContainer","ItemBodyContainer","ItemHeaderContainer","AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","cloneElement","size","neutral_300","undefined","children"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,EAAiBC,UAAjB,EAA6BC,UAA7B,QAA+C,IAA/C;AACA,SAASC,WAAT,QAA4B,UAA5B;AAEA,SAASC,sBAAT,EAAsDC,iBAAtD,EAAyEC,mBAAzE,QAAoG,UAApG;;AAQA,MAAMC,aAA+D,GAAIC,KAAD,IAAoC;AAC1G,QAAM;AAAEC,IAAAA,EAAF;AAAMC,IAAAA,QAAN;AAAgBC,IAAAA,QAAhB;AAA0BC,IAAAA,KAA1B;AAAiCC,IAAAA,IAAjC;AAAuCC,IAAAA,QAAvC;AAAiDC,IAAAA;AAAjD,MAA4DP,KAAlE;AACA,sBACE,oBAAC,sBAAD;AAAwB,IAAA,EAAE,EAAEC,EAA5B;AAAgC,IAAA,gBAAgB,EAAE,CAACE,QAAD,IAAa,CAACI,MAAhE;AAAwE,IAAA,UAAU,EAAED,QAAQ,IAAI;AAAhG,kBACE,oBAAC,mBAAD;AACE,IAAA,QAAQ,EAAE,CAACA,QAAD,GAAY,CAAZ,GAAgB,CAAC,CAD7B;AAEE,IAAA,OAAO,EAAE,MAAM;AACb,UAAI,CAACA,QAAL,EAAe;AACbJ,QAAAA,QAAQ,CAACD,EAAD,CAAR;AACD;AACF,KANH;AAOE,IAAA,UAAU,EAAEK,QAAQ,IAAI;AAP1B,KAQGD,IAAI,iBAAId,KAAK,CAACiB,YAAN,CAAmBH,IAAnB,EAA+C;AAAEI,IAAAA,IAAI,EAAE;AAAR,GAA/C,CARX,eASE,oBAAC,UAAD;AAAY,IAAA,KAAK,EAAEH,QAAQ,GAAGd,MAAM,CAACkB,WAAV,GAAwBC;AAAnD,KAA+DP,KAA/D,CATF,EAUGD,QAAQ,gBAAG,oBAAC,WAAD,CAAa,SAAb;AAAuB,IAAA,IAAI,EAAC;AAA5B,IAAH,gBAA2C,oBAAC,WAAD,CAAa,WAAb;AAAyB,IAAA,IAAI,EAAC;AAA9B,IAVtD,CADF,EAaGA,QAAQ,iBACP,oBAAC,iBAAD,qBACE,oBAAC,UAAD,QAAaH,KAAK,CAACY,QAAnB,CADF,CAdJ,CADF;AAqBD,CAvBD;;;AALEV,EAAAA,Q;AACAC,EAAAA,Q;AACAI,EAAAA,M;;AA4BF,eAAeR,aAAf","sourcesContent":["import React from 'react';\nimport { COLORS, ComponentM, ComponentS } from '..';\nimport { SystemIcons } from '../icons';\nimport { AccordionItemProps } from './AccordionMenu';\nimport { AccordionItemContainer, HeaderIconContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n  onSelect: (id: string) => void;\n  isActive: boolean;\n  isLast: boolean;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n  const { id, onSelect, isActive, title, icon, disabled, isLast } = props;\n  return (\n    <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast} isDisabled={disabled ?? false}>\n      <ItemHeaderContainer\n        tabIndex={!disabled ? 0 : -1}\n        onClick={() => {\n          if (!disabled) {\n            onSelect(id);\n          }\n        }}\n        isDisabled={disabled ?? false}>\n        {icon && React.cloneElement(icon as React.ReactElement, { size: '24px' })}\n        <ComponentM color={disabled ? COLORS.neutral_300 : undefined}>{title}</ComponentM>\n        {isActive ? <SystemIcons.ChevronUp size=\"24px\" /> : <SystemIcons.ChevronDown size=\"24px\" />}\n      </ItemHeaderContainer>\n      {isActive && (\n        <ItemBodyContainer>\n          <ComponentS>{props.children}</ComponentS>\n        </ItemBodyContainer>\n      )}\n    </AccordionItemContainer>\n  );\n};\n\nexport default AccordionItem;\n"],"file":"AccordionItem.js"}

package/dist/esm/Accordion/AccordionMenu.js

@@ -0,0 +1,35 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import AccordionItem from './AccordionItem';
+import { AccordionMenuWrapper } from './styles';
+
+const AccordionMenu = ({
+  items,
+  selectedItemId,
+  onSelect
+}) => {
+  return /*#__PURE__*/React.createElement(AccordionMenuWrapper, null, items.map(item => /*#__PURE__*/React.createElement(AccordionItem, {
+    key: item.id,
+    disabled: item.disabled,
+    id: item.id,
+    title: item.title,
+    icon: item.icon,
+    isActive: item.id === selectedItemId,
+    isLast: items.indexOf(item) === items.length - 1,
+    onSelect: onSelect
+  }, item.children)));
+};
+
+AccordionMenu.propTypes = {
+  items: _pt.arrayOf(_pt.shape({
+    id: _pt.string.isRequired,
+    disabled: _pt.bool,
+    title: _pt.string.isRequired,
+    icon: _pt.node,
+    children: _pt.node.isRequired
+  })).isRequired,
+  selectedItemId: _pt.string,
+  onSelect: _pt.func.isRequired
+};
+export default AccordionMenu;
+//# sourceMappingURL=AccordionMenu.js.map

package/dist/esm/Accordion/AccordionMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Accordion/AccordionMenu.tsx"],"names":["React","AccordionItem","AccordionMenuWrapper","AccordionMenu","items","selectedItemId","onSelect","map","item","id","disabled","title","icon","indexOf","length","children"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,SAASC,oBAAT,QAAqC,UAArC;;AAgBA,MAAMC,aAAsD,GAAG,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA,cAAT;AAAyBC,EAAAA;AAAzB,CAAD,KAAyD;AACtH,sBACE,oBAAC,oBAAD,QACGF,KAAK,CAACG,GAAN,CAAWC,IAAD,iBACT,oBAAC,aAAD;AACE,IAAA,GAAG,EAAEA,IAAI,CAACC,EADZ;AAEE,IAAA,QAAQ,EAAED,IAAI,CAACE,QAFjB;AAGE,IAAA,EAAE,EAAEF,IAAI,CAACC,EAHX;AAIE,IAAA,KAAK,EAAED,IAAI,CAACG,KAJd;AAKE,IAAA,IAAI,EAAEH,IAAI,CAACI,IALb;AAME,IAAA,QAAQ,EAAEJ,IAAI,CAACC,EAAL,KAAYJ,cANxB;AAOE,IAAA,MAAM,EAAED,KAAK,CAACS,OAAN,CAAcL,IAAd,MAAwBJ,KAAK,CAACU,MAAN,GAAe,CAPjD;AAQE,IAAA,QAAQ,EAAER;AARZ,KASGE,IAAI,CAACO,QATR,CADD,CADH,CADF;AAiBD,CAlBD;;;AAbEX,EAAAA,K;AAMAK,IAAAA,E;AACAC,IAAAA,Q;AACAC,IAAAA,K;AACAC,IAAAA,I;AACAG,IAAAA,Q;;AATAV,EAAAA,c;AACAC,EAAAA,Q;;AA+BF,eAAeH,aAAf","sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\n\nexport interface AccordionProps {\n  items: AccordionItemProps[];\n  selectedItemId?: string;\n  onSelect: (id: string) => void;\n}\n\nexport interface AccordionItemProps {\n  id: string;\n  disabled?: boolean;\n  title: string;\n  icon?: React.ReactNode;\n  children: React.ReactNode;\n}\n\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = ({ items, selectedItemId, onSelect }: AccordionProps) => {\n  return (\n    <AccordionMenuWrapper>\n      {items.map((item) => (\n        <AccordionItem\n          key={item.id}\n          disabled={item.disabled}\n          id={item.id}\n          title={item.title}\n          icon={item.icon}\n          isActive={item.id === selectedItemId}\n          isLast={items.indexOf(item) === items.length - 1}\n          onSelect={onSelect}>\n          {item.children}\n        </AccordionItem>\n      ))}\n    </AccordionMenuWrapper>\n  );\n};\n\nexport default AccordionMenu;\n"],"file":"AccordionMenu.js"}

package/dist/esm/Accordion/__tests__/AccordionMenu.test.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import 'jest-styled-components';
+import { COLORS } from '../../styles';
+import AccordionMenu from '../AccordionMenu';
+const accordionItems = [{
+  id: 'test1_id',
+  title: 'Item label with text 1',
+  children: /*#__PURE__*/React.createElement("div", null, "content test1")
+}, {
+  id: 'test2_id',
+  title: 'Item label with text 2',
+  children: /*#__PURE__*/React.createElement("div", null, "content test2")
+}];
+describe('<AccordionMenu />', () => {
+  it('Check correct text placed on labels', async () => {
+    const {
+      queryByText
+    } = render( /*#__PURE__*/React.createElement(AccordionMenu, {
+      items: accordionItems,
+      onSelect: () => {}
+    }));
+    expect(queryByText('Item label with text 1')).toBeDefined();
+    expect(queryByText('Item label with text 2')).toBeDefined();
+    expect(queryByText('content test1')).toBeNull();
+  });
+  it('Check item label element color and label', async () => {
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(AccordionMenu, {
+      items: accordionItems,
+      onSelect: () => {}
+    }));
+    const headerItem = container.querySelector('#test2_id');
+    expect(headerItem).toBeDefined();
+    expect(headerItem?.children[0]).toHaveStyleRule('background', COLORS.neutral_20);
+    expect(headerItem?.textContent).toContain('Item label with text 2');
+  });
+  it('Check expanded item text', async () => {
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(AccordionMenu, {
+      items: accordionItems,
+      onSelect: () => {},
+      selectedItemId: 'test1_id'
+    }));
+    const headerItem = container.querySelector('#test1_id'); //check item expanded
+
+    expect(headerItem?.children[1]).toBeDefined();
+    expect(headerItem?.children[1]?.textContent).toContain('content test1');
+  });
+});
+//# sourceMappingURL=AccordionMenu.test.js.map

package/dist/esm/Accordion/__tests__/AccordionMenu.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Accordion/__tests__/AccordionMenu.test.tsx"],"names":["React","render","COLORS","AccordionMenu","accordionItems","id","title","children","describe","it","queryByText","expect","toBeDefined","toBeNull","container","headerItem","querySelector","toHaveStyleRule","neutral_20","textContent","toContain"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,QAAuB,wBAAvB;AACA,OAAO,wBAAP;AACA,SAASC,MAAT,QAAuB,cAAvB;AACA,OAAOC,aAAP,MAA0B,kBAA1B;AAEA,MAAMC,cAAc,GAAG,CACrB;AACEC,EAAAA,EAAE,EAAE,UADN;AAEEC,EAAAA,KAAK,EAAE,wBAFT;AAGEC,EAAAA,QAAQ,eAAE;AAHZ,CADqB,EAMrB;AACEF,EAAAA,EAAE,EAAE,UADN;AAEEC,EAAAA,KAAK,EAAE,wBAFT;AAGEC,EAAAA,QAAQ,eAAE;AAHZ,CANqB,CAAvB;AAaAC,QAAQ,CAAC,mBAAD,EAAsB,MAAM;AAClCC,EAAAA,EAAE,CAAC,qCAAD,EAAwC,YAAY;AACpD,UAAM;AAAEC,MAAAA;AAAF,QAAkBT,MAAM,eAAC,oBAAC,aAAD;AAAe,MAAA,KAAK,EAAEG,cAAtB;AAAsC,MAAA,QAAQ,EAAE,MAAM,CAAE;AAAxD,MAAD,CAA9B;AACAO,IAAAA,MAAM,CAACD,WAAW,CAAC,wBAAD,CAAZ,CAAN,CAA8CE,WAA9C;AACAD,IAAAA,MAAM,CAACD,WAAW,CAAC,wBAAD,CAAZ,CAAN,CAA8CE,WAA9C;AACAD,IAAAA,MAAM,CAACD,WAAW,CAAC,eAAD,CAAZ,CAAN,CAAqCG,QAArC;AACD,GALC,CAAF;AAOAJ,EAAAA,EAAE,CAAC,0CAAD,EAA6C,YAAY;AACzD,UAAM;AAAEK,MAAAA;AAAF,QAAgBb,MAAM,eAAC,oBAAC,aAAD;AAAe,MAAA,KAAK,EAAEG,cAAtB;AAAsC,MAAA,QAAQ,EAAE,MAAM,CAAE;AAAxD,MAAD,CAA5B;AACA,UAAMW,UAAU,GAAGD,SAAS,CAACE,aAAV,CAAwB,WAAxB,CAAnB;AACAL,IAAAA,MAAM,CAACI,UAAD,CAAN,CAAmBH,WAAnB;AACAD,IAAAA,MAAM,CAACI,UAAU,EAAER,QAAZ,CAAqB,CAArB,CAAD,CAAN,CAAgCU,eAAhC,CAAgD,YAAhD,EAA8Df,MAAM,CAACgB,UAArE;AACAP,IAAAA,MAAM,CAACI,UAAU,EAAEI,WAAb,CAAN,CAAgCC,SAAhC,CAA0C,wBAA1C;AACD,GANC,CAAF;AAQAX,EAAAA,EAAE,CAAC,0BAAD,EAA6B,YAAY;AACzC,UAAM;AAAEK,MAAAA;AAAF,QAAgBb,MAAM,eAAC,oBAAC,aAAD;AAAe,MAAA,KAAK,EAAEG,cAAtB;AAAsC,MAAA,QAAQ,EAAE,MAAM,CAAE,CAAxD;AAA0D,MAAA,cAAc,EAAE;AAA1E,MAAD,CAA5B;AACA,UAAMW,UAAU,GAAGD,SAAS,CAACE,aAAV,CAAwB,WAAxB,CAAnB,CAFyC,CAGzC;;AACAL,IAAAA,MAAM,CAACI,UAAU,EAAER,QAAZ,CAAqB,CAArB,CAAD,CAAN,CAAgCK,WAAhC;AACAD,IAAAA,MAAM,CAACI,UAAU,EAAER,QAAZ,CAAqB,CAArB,GAAyBY,WAA1B,CAAN,CAA6CC,SAA7C,CAAuD,eAAvD;AACD,GANC,CAAF;AAOD,CAvBO,CAAR","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport 'jest-styled-components';\nimport { COLORS } from '../../styles';\nimport AccordionMenu from '../AccordionMenu';\n\nconst accordionItems = [\n  {\n    id: 'test1_id',\n    title: 'Item label with text 1',\n    children: <div>content test1</div>,\n  },\n  {\n    id: 'test2_id',\n    title: 'Item label with text 2',\n    children: <div>content test2</div>,\n  },\n];\n\ndescribe('<AccordionMenu />', () => {\n  it('Check correct text placed on labels', async () => {\n    const { queryByText } = render(<AccordionMenu items={accordionItems} onSelect={() => {}}></AccordionMenu>);\n    expect(queryByText('Item label with text 1')).toBeDefined();\n    expect(queryByText('Item label with text 2')).toBeDefined();\n    expect(queryByText('content test1')).toBeNull();\n  });\n\n  it('Check item label element color and label', async () => {\n    const { container } = render(<AccordionMenu items={accordionItems} onSelect={() => {}}></AccordionMenu>);\n    const headerItem = container.querySelector('#test2_id');\n    expect(headerItem).toBeDefined();\n    expect(headerItem?.children[0]).toHaveStyleRule('background', COLORS.neutral_20);\n    expect(headerItem?.textContent).toContain('Item label with text 2');\n  });\n\n  it('Check expanded item text', async () => {\n    const { container } = render(<AccordionMenu items={accordionItems} onSelect={() => {}} selectedItemId={'test1_id'}></AccordionMenu>);\n    const headerItem = container.querySelector('#test1_id');\n    //check item expanded\n    expect(headerItem?.children[1]).toBeDefined();\n    expect(headerItem?.children[1]?.textContent).toContain('content test1');\n  });\n});\n"],"file":"AccordionMenu.test.js"}

package/dist/esm/Accordion/index.js

@@ -0,0 +1,4 @@
+export { default as AccordionMenu } from './AccordionMenu';
+export { default as AccordionMenuItem } from './AccordionMenu';
+export { AccordionMenuWrapper } from './styles';
+//# sourceMappingURL=index.js.map

package/dist/esm/Accordion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Accordion/index.ts"],"names":["default","AccordionMenu","AccordionMenuItem","AccordionMenuWrapper"],"mappings":"AAAA,SAASA,OAAO,IAAIC,aAApB,QAAyC,iBAAzC;AACA,SAASD,OAAO,IAAIE,iBAApB,QAA6C,iBAA7C;AACA,SAASC,oBAAT,QAAqC,UAArC","sourcesContent":["export { default as AccordionMenu } from './AccordionMenu';\nexport { default as AccordionMenuItem } from './AccordionMenu';\nexport { AccordionMenuWrapper } from './styles';\n"],"file":"index.js"}

package/dist/esm/Accordion/styles.js

@@ -0,0 +1,59 @@
+import styled, { css } from 'styled-components';
+import { COLORS } from '../styles';
+import { Z_INDEXES } from '../styles/z-indexes';
+export const AccordionMenuWrapper = styled.div`
+  min-width: 320px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+`;
+export const AccordionItemContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  border-bottom: ${props => props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : ''};
+  cursor: ${props => props.isDisabled ? 'not-allowed' : 'pointer'};
+`;
+const disabledState = css`
+  background: ${COLORS.white}!important;
+  color: ${COLORS.neutral_300};
+  pointer-events: none;
+  svg {
+    color: ${COLORS.neutral_300}!important;
+  }
+`;
+export const ItemHeaderContainer = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px 11px 16px;
+  cursor: pointer;
+  background: ${COLORS.neutral_20};
+  svg:last-child {
+    margin-left: auto;
+  }
+  :focus {
+    outline: none;
+    z-index: ${Z_INDEXES.focus};
+    box-shadow: 0px 4px 12px ${COLORS.primary_500}, 0px 0px 8px ${COLORS.primary_500};
+  }
+
+  ${props => props.isDisabled ? disabledState : ''}
+  :hover {
+    background: ${COLORS.primary_20};
+  }
+  :active {
+    background: ${COLORS.primary_100};
+  }
+`;
+export const HeaderIconContainer = styled.div`
+  margin-left: auto;
+`;
+export const ItemBodyContainer = styled.div`
+  padding: 0px 24px;
+  margin: 12px 0;
+  background: ${COLORS.white};
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/Accordion/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Accordion/styles.ts"],"names":["styled","css","COLORS","Z_INDEXES","AccordionMenuWrapper","div","AccordionItemContainer","props","displaySeparator","neutral_100","isDisabled","disabledState","white","neutral_300","ItemHeaderContainer","neutral_20","focus","primary_500","primary_20","primary_100","HeaderIconContainer","ItemBodyContainer"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,SAAT,QAA0B,qBAA1B;AAEA,OAAO,MAAMC,oBAAoB,GAAGJ,MAAM,CAACK,GAAI;AAC/C;AACA;AACA;AACA;AACA,CALO;AAOP,OAAO,MAAMC,sBAAsB,GAAGN,MAAM,CAACK,GAAwD;AACrG;AACA;AACA;AACA;AACA,mBAAoBE,KAAD,IAAYA,KAAK,CAACC,gBAAN,GAA0B,aAAYN,MAAM,CAACO,WAAY,EAAzD,GAA6D,EAAI;AAChG,YAAaF,KAAD,IAAYA,KAAK,CAACG,UAAN,GAAmB,aAAnB,GAAmC,SAAW;AACtE,CAPO;AASP,MAAMC,aAAa,GAAGV,GAAI;AAC1B,gBAAgBC,MAAM,CAACU,KAAM;AAC7B,WAAWV,MAAM,CAACW,WAAY;AAC9B;AACA;AACA,aAAaX,MAAM,CAACW,WAAY;AAChC;AACA,CAPA;AASA,OAAO,MAAMC,mBAAmB,GAAGd,MAAM,CAACK,GAA6B;AACvE;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgBH,MAAM,CAACa,UAAW;AAClC;AACA;AACA;AACA;AACA;AACA,eAAeZ,SAAS,CAACa,KAAM;AAC/B,+BAA+Bd,MAAM,CAACe,WAAY,iBAAgBf,MAAM,CAACe,WAAY;AACrF;AACA;AACA,IAAKV,KAAD,IAAYA,KAAK,CAACG,UAAN,GAAmBC,aAAnB,GAAmC,EAAI;AACvD;AACA,kBAAkBT,MAAM,CAACgB,UAAW;AACpC;AACA;AACA,kBAAkBhB,MAAM,CAACiB,WAAY;AACrC;AACA,CAxBO;AA0BP,OAAO,MAAMC,mBAAmB,GAAGpB,MAAM,CAACK,GAAI;AAC9C;AACA,CAFO;AAIP,OAAO,MAAMgB,iBAAiB,GAAGrB,MAAM,CAACK,GAAI;AAC5C;AACA;AACA,gBAAgBH,MAAM,CAACU,KAAM;AAC7B,CAJO","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean; isDisabled: boolean }>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};\n`;\n\nconst disabledState = css`\n  background: ${COLORS.white}!important;\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  svg {\n    color: ${COLORS.neutral_300}!important;\n  }\n`;\n\nexport const ItemHeaderContainer = styled.div<{ isDisabled: boolean }>`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  cursor: pointer;\n  background: ${COLORS.neutral_20};\n  svg:last-child {\n    margin-left: auto;\n  }\n  :focus {\n    outline: none;\n    z-index: ${Z_INDEXES.focus};\n    box-shadow: 0px 4px 12px ${COLORS.primary_500}, 0px 0px 8px ${COLORS.primary_500};\n  }\n\n  ${(props) => (props.isDisabled ? disabledState : '')}\n  :hover {\n    background: ${COLORS.primary_20};\n  }\n  :active {\n    background: ${COLORS.primary_100};\n  }\n`;\n\nexport const HeaderIconContainer = styled.div`\n  margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div`\n  padding: 0px 24px;\n  margin: 12px 0;\n  background: ${COLORS.white};\n`;\n"],"file":"styles.js"}

package/dist/esm/HyperLink/HyperLink.js

@@ -1,5 +1,5 @@
 import _pt from "prop-types";
-const _excluded = ["id", "className", "variant", "href", "margin", "children", "target"];
+const _excluded = ["children", "target", "variant"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -17,25 +17,17 @@ const StyledLink = styled.a`
 
 const HyperLink = _ref => {
   let {
-    id,
-    className,
-    variant,
-    href,
-    margin,
     children,
-    target
+    target = '_blank',
+    variant = 'default'
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(StyledLink, _extends({
-    id: id,
-    className: className,
+  return /*#__PURE__*/React.createElement(StyledLink, _extends({}, props, {
     variant: variant,
-    href: href,
-    target: target || '_blank',
-    rel: "noopener noreferrer",
-    margin: margin
-  }, props), children);
+    target: target,
+    rel: "noopener noreferrer"
+  }), children);
 };
 
 HyperLink.propTypes = {

package/dist/esm/HyperLink/HyperLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/HyperLink/HyperLink.tsx"],"names":["React","styled","defaultStyle","invertedStyle","StyledLink","a","props","variant","margin","HyperLink","id","className","href","children","target","disabled"],"mappings":";;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,YAAT,EAAuBC,aAAvB,QAA4C,WAA5C;AAEA,MAAMC,UAAU,GAAGH,MAAM,CAACI,CAGvB;AACH,IAAKC,KAAD,IAAYA,KAAK,CAACC,OAAN,KAAkB,UAAlB,GAA+BJ,aAA/B,GAA+CD,YAAc;AAC7E,IAAKI,KAAD,IAAYA,KAAK,CAACE,MAAN,GAAgB,WAAUF,KAAK,CAACE,MAAO,GAAvC,GAA4C,EAAI;AAChE,CANA;;AAkBA,MAAMC,SAAkD,GAAG,QAA0F;AAAA,MAAzF;AAAEC,IAAAA,EAAF;AAAMC,IAAAA,SAAN;AAAiBJ,IAAAA,OAAjB;AAA0BK,IAAAA,IAA1B;AAAgCJ,IAAAA,MAAhC;AAAwCK,IAAAA,QAAxC;AAAkDC,IAAAA;AAAlD,GAAyF;AAAA,MAA5BR,KAA4B;;AACnJ,sBACE,oBAAC,UAAD;AAAY,IAAA,EAAE,EAAEI,EAAhB;AAAoB,IAAA,SAAS,EAAEC,SAA/B;AAA0C,IAAA,OAAO,EAAEJ,OAAnD;AAA4D,IAAA,IAAI,EAAEK,IAAlE;AAAwE,IAAA,MAAM,EAAEE,MAAM,IAAI,QAA1F;AAAoG,IAAA,GAAG,EAAC,qBAAxG;AAA8H,IAAA,MAAM,EAAEN;AAAtI,KAAkJF,KAAlJ,GACGO,QADH,CADF;AAKD,CAND;;;AATEH,EAAAA,E;AACAH,EAAAA,O,aAAS,S,EAAY,U;AACrBK,EAAAA,I;AACAG,EAAAA,Q;AACAP,EAAAA,M;AACAK,EAAAA,Q;AACAF,EAAAA,S;;AAWF,eAAeF,SAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { defaultStyle, invertedStyle } from './styling';\n\nconst StyledLink = styled.a<{\n  variant: 'default' | 'inverted';\n  margin?: string;\n}>`\n  ${(props) => (props.variant === 'inverted' ? invertedStyle : defaultStyle)}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nexport interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  id: string;\n  variant: 'default' | 'inverted';\n  href: string;\n  disabled?: boolean;\n  margin?: string;\n  children?: any;\n  className?: string;\n}\n\nconst HyperLink: React.FunctionComponent<HyperlinkProps> = ({ id, className, variant, href, margin, children, target, ...props }: HyperlinkProps) => {\n  return (\n    <StyledLink id={id} className={className} variant={variant} href={href} target={target || '_blank'} rel=\"noopener noreferrer\" margin={margin} {...props}>\n      {children}\n    </StyledLink>\n  );\n};\n\nexport default HyperLink;\n"],"file":"HyperLink.js"}
+{"version":3,"sources":["../../../src/HyperLink/HyperLink.tsx"],"names":["React","styled","defaultStyle","invertedStyle","StyledLink","a","props","variant","margin","HyperLink","children","target","id","href","disabled","className"],"mappings":";;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,YAAT,EAAuBC,aAAvB,QAA4C,WAA5C;AAEA,MAAMC,UAAU,GAAGH,MAAM,CAACI,CAGvB;AACH,IAAKC,KAAD,IAAYA,KAAK,CAACC,OAAN,KAAkB,UAAlB,GAA+BJ,aAA/B,GAA+CD,YAAc;AAC7E,IAAKI,KAAD,IAAYA,KAAK,CAACE,MAAN,GAAgB,WAAUF,KAAK,CAACE,MAAO,GAAvC,GAA4C,EAAI;AAChE,CANA;;AAkBA,MAAMC,SAAkD,GAAG,QAAoF;AAAA,MAAnF;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,MAAM,GAAG,QAArB;AAA+BJ,IAAAA,OAAO,GAAG;AAAzC,GAAmF;AAAA,MAA5BD,KAA4B;;AAC7I,sBACE,oBAAC,UAAD,eAAgBA,KAAhB;AAAuB,IAAA,OAAO,EAAEC,OAAhC;AAAyC,IAAA,MAAM,EAAEI,MAAjD;AAAyD,IAAA,GAAG,EAAC;AAA7D,MACGD,QADH,CADF;AAKD,CAND;;;AATEE,EAAAA,E;AACAL,EAAAA,O,aAAS,S,EAAY,U;AACrBM,EAAAA,I;AACAC,EAAAA,Q;AACAN,EAAAA,M;AACAE,EAAAA,Q;AACAK,EAAAA,S;;AAWF,eAAeN,SAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { defaultStyle, invertedStyle } from './styling';\n\nconst StyledLink = styled.a<{\n  variant: 'default' | 'inverted';\n  margin?: string;\n}>`\n  ${(props) => (props.variant === 'inverted' ? invertedStyle : defaultStyle)}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nexport interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  id: string;\n  variant: 'default' | 'inverted';\n  href: string;\n  disabled?: boolean;\n  margin?: string;\n  children?: any;\n  className?: string;\n}\n\nconst HyperLink: React.FunctionComponent<HyperlinkProps> = ({ children, target = '_blank', variant = 'default', ...props }: HyperlinkProps) => {\n  return (\n    <StyledLink {...props} variant={variant} target={target} rel=\"noopener noreferrer\">\n      {children}\n    </StyledLink>\n  );\n};\n\nexport default HyperLink;\n"],"file":"HyperLink.js"}

package/dist/esm/InputFields/Checkbox.js

@@ -7,11 +7,9 @@ import { Size } from '../types';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling } from '../styles/typography';
 const StyledCheckBox = styled.div`
   display: flex;
-  flex-direction: row;
   width: 100%;
   min-height: 48px;
   min-width: 48px;
-  align-items: center;
 
   ${props => props.margin ? `margin: ${props.margin};` : ''}
   cursor: pointer;
@@ -22,14 +20,14 @@ const StyledCheckBox = styled.div`
     pointer-events: none;
   }
 
-  .icon {
+  .checkbox-icon {
     margin: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    width: 36px;
     height: 36px;
+    min-width: 36px;
     border-radius: 50%;
 
     svg {
@@ -37,27 +35,36 @@ const StyledCheckBox = styled.div`
     }
   }
 
-  .label {
+  .checkbox-label {
     user-select: none;
     cursor: inherit;
   }
 
   &.small {
     ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}
+    .checkbox-label {
+      padding-top: 14px;
+    }
   }
 
   &.medium {
     ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}
+    .checkbox-label {
+      padding-top: 12px;
+    }
   }
 
   &.large {
     ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}
+    .checkbox-label {
+      padding-top: 12px;
+    }
   }
 
   &:not(.disabled):focus {
     outline: none;
 
-    .icon {
+    .checkbox-icon {
       background-color: ${COLORS.white};
       box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
 
@@ -68,7 +75,7 @@ const StyledCheckBox = styled.div`
   }
 
   &:not(.disabled):hover {
-    .icon {
+    .checkbox-icon {
       background-color: ${COLORS.primary_20};
 
       svg {
@@ -78,7 +85,7 @@ const StyledCheckBox = styled.div`
   }
 
   &:not(.disabled):active {
-    .icon {
+    .checkbox-icon {
       background: ${COLORS.primary_100};
       box-shadow: none;
 
@@ -94,16 +101,16 @@ const StyledCheckBox = styled.div`
 
     color: ${COLORS.neutral_300};
 
-    .icon,
-    .label {
+    .checkbox-icon,
+    .checkbox-label {
       pointer-events: none;
     }
 
-    .icon{
+    .checkbox-icon{
       background-color: ${COLORS.white};
     }
 
-    .icon svg {
+    .checkbox-icon svg {
       color: ${COLORS.neutral_300};
     }
   }
@@ -118,7 +125,8 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
   disabled,
   margin,
   size,
-  semiSelected
+  semiSelected,
+  children
 }, ref) => {
   const onKeyPress = e => {
     if (e.keyCode === 13 && !disabled) {
@@ -149,7 +157,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
     onMouseDown: e => e.preventDefault()
   }, /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: 'icon'
+    className: 'checkbox-icon'
   }, selected ? /*#__PURE__*/React.createElement(CheckboxOn, {
     className: iconPointerEventsTransparent ? "pointerTransparent" : "",
     size: "24px"
@@ -160,9 +168,12 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
     className: iconPointerEventsTransparent ? "pointerTransparent" : "",
     size: "24px"
   })), label && /*#__PURE__*/React.createElement("label", {
-    className: 'label',
+    className: 'checkbox-label',
+    htmlFor: id
+  }, label), !label && /*#__PURE__*/React.createElement("label", {
+    className: 'checkbox-label',
     htmlFor: id
-  }, label));
+  }, children));
 });
 Checkbox.propTypes = {
   id: _pt.string.isRequired,

package/dist/esm/InputFields/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["React","styled","CheckboxOff","CheckboxOn","CheckboxSemi","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","StyledCheckBox","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","forwardRef","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","ref","onKeyPress","e","keyCode","handleClick","Medium","toString","toLowerCase","concat","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .icon,\n    .label {\n      pointer-events: none;\n    }\n\n    .icon{\n      background-color: ${COLORS.white};\n    }\n\n    .icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                       id,\n                                                       selected,\n                                                       select,\n                                                       label,\n                                                       showWarning,\n                                                       iconPointerEventsTransparent,\n                                                       disabled,\n                                                       margin,\n                                                       size,\n                                                       semiSelected\n                                                     }: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled) {\n      return;\n    }\n    select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                    selected={selected}\n                    tabIndex={disabled ? -1 : 0}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={e => e.preventDefault()}>\n      <div id={id} className={'icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}
+{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["React","styled","CheckboxOff","CheckboxOn","CheckboxSemi","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","StyledCheckBox","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","forwardRef","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","ref","onKeyPress","e","keyCode","handleClick","Medium","toString","toLowerCase","concat","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .checkbox-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon{\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            showWarning,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled) {\n      return;\n    }\n    select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                    selected={selected}\n                    tabIndex={disabled ? -1 : 0}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={e => e.preventDefault()}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}

package/dist/esm/InputFields/RadioButton.js

@@ -7,11 +7,9 @@ import { Size } from '../types';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling } from '../styles/typography';
 const StyledRadioButton = styled.div`
   display: flex;
-  flex-direction: row;
   width: 100%;
   min-height: 48px;
   min-width: 48px;
-  align-items: center;
 
   ${props => props.margin ? `margin: ${props.margin};` : ''}
   cursor: pointer;
@@ -22,14 +20,14 @@ const StyledRadioButton = styled.div`
     pointer-events: none;
   }
 
-  .icon {
+  .radio-button-icon {
     margin: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    width: 36px;
     height: 36px;
+    min-width: 36px;
     border-radius: 50%;
 
     svg {
@@ -37,7 +35,7 @@ const StyledRadioButton = styled.div`
     }
   }
 
-  .label {
+  .radio-button-label {
     user-select: none;
     display: flex;
     flex-direction: column;
@@ -53,20 +51,29 @@ const StyledRadioButton = styled.div`
 
   &.small {
     ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}
+    .radio-button-label {
+      padding-top: 14px;
+    }
   }
 
   &.medium {
     ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}
+    .radio-button-label {
+      padding-top: 12px;
+    }
   }
 
   &.large {
     ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}
+    .radio-button-label {
+      padding-top: 12px;
+    }
   }
 
   &:not(.disabled):focus {
     outline: none;
 
-    .icon {
+    .radio-button-icon {
       background-color: ${COLORS.white};
       box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
 
@@ -77,7 +84,7 @@ const StyledRadioButton = styled.div`
   }
 
   &:not(.disabled):hover {
-    .icon {
+    .radio-button-icon {
       background-color: ${COLORS.primary_20};
 
       svg {
@@ -87,7 +94,7 @@ const StyledRadioButton = styled.div`
   }
 
   &:not(.disabled):active {
-    .icon {
+    .radio-button-icon {
       background: ${COLORS.primary_100};
       box-shadow: none;
 
@@ -103,16 +110,16 @@ const StyledRadioButton = styled.div`
 
     color: ${COLORS.neutral_300};
 
-    .icon,
-    .label {
+    .radio-button-icon,
+    .radio-button-label {
       pointer-events: none;
     }
 
-    .icon{
+    .radio-button-icon{
       background-color: ${COLORS.white};
     }
     
-    .icon svg {
+    .radio-button-icon svg {
       color: ${COLORS.neutral_300};
     }
   }
@@ -149,7 +156,7 @@ const RadioButton = /*#__PURE__*/React.forwardRef(({
     showWarning: showWarning,
     selected: selected
   }, /*#__PURE__*/React.createElement("div", {
-    className: 'icon',
+    className: 'radio-button-icon',
     id: id
   }, selected && /*#__PURE__*/React.createElement(RadioButtonOn, {
     className: iconPointerEventsTransparent ? "pointerTransparent" : "",
@@ -158,7 +165,7 @@ const RadioButton = /*#__PURE__*/React.forwardRef(({
     className: iconPointerEventsTransparent ? "pointerTransparent" : "",
     size: "24px"
   })), /*#__PURE__*/React.createElement("div", {
-    className: 'label'
+    className: 'radio-button-label'
   }, label && /*#__PURE__*/React.createElement("label", {
     htmlFor: id
   }, label), additionalLabel !== undefined && /*#__PURE__*/React.createElement("span", null, additionalLabel)));