@chayns-components/core 5.0.0-beta.3 → 5.0.0-beta.36

package/lib/components/accordion/accordion-head/AccordionHead.styles.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledRightWrapper = exports.StyledMotionTitleWrapper = exports.StyledMotionTitleElementWrapper = exports.StyledMotionTitle = exports.StyledMotionRightInputIconWrapper = exports.StyledMotionRightInput = exports.StyledMotionRightElementWrapper = exports.StyledMotionIconWrapper = exports.StyledMotionContentWrapper = exports.StyledMotionAccordionHead = void 0;
+
+var _framerMotion = require("framer-motion");
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+const StyledMotionAccordionHead = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    align-items: center;\n    color: ", ";\n    display: flex;\n    overflow: hidden;\n    padding: 4px 0;\n"])), _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.text;
+});
+exports.StyledMotionAccordionHead = StyledMotionAccordionHead;
+const StyledMotionIconWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    align-items: center;\n    cursor: ", ";\n    display: flex;\n    flex: 0 0 auto;\n    height: 25px;\n    justify-content: center;\n    width: 25px;\n"])), _ref2 => {
+  let {
+    onClick
+  } = _ref2;
+  return typeof onClick === 'function' ? 'pointer' : 'default';
+});
+exports.StyledMotionIconWrapper = StyledMotionIconWrapper;
+const StyledMotionContentWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    align-self: flex-start;\n    cursor: ", ";\n    display: flex;\n    flex: 1 1 auto;\n    height: 100%;\n    overflow: hidden;\n    margin-right: 10px;\n"])), _ref3 => {
+  let {
+    onClick
+  } = _ref3;
+  return typeof onClick === 'function' ? 'pointer' : 'default';
+});
+exports.StyledMotionContentWrapper = StyledMotionContentWrapper;
+const StyledMotionTitleWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: grid;\n    flex: 0 1 auto;\n    grid-template-areas: 'header';\n"])));
+exports.StyledMotionTitleWrapper = StyledMotionTitleWrapper;
+const StyledMotionTitle = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    font-size: ", ";\n    font-weight: ", ";\n    grid-area: header;\n    height: ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    transform-origin: top left;\n    user-select: none;\n    white-space: ", ";\n\n    ", "\n"])), _ref4 => {
+  let {
+    isOpen,
+    isWrapped
+  } = _ref4;
+  return isOpen && !isWrapped ? '1.3rem' : undefined;
+}, _ref5 => {
+  let {
+    isOpen,
+    isWrapped
+  } = _ref5;
+  return isOpen && isWrapped ? 700 : 'normal';
+}, _ref6 => {
+  let {
+    isWrapped
+  } = _ref6;
+  return isWrapped ? '100%' : undefined;
+}, _ref7 => {
+  let {
+    isOpen,
+    isWrapped
+  } = _ref7;
+  return isOpen && !isWrapped ? 'normal' : 'nowrap';
+}, _ref8 => {
+  let {
+    isWrapped
+  } = _ref8;
+  return isWrapped && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            align-items: center;\n            display: flex;\n        "])));
+});
+exports.StyledMotionTitle = StyledMotionTitle;
+const StyledMotionTitleElementWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    align-items: center;\n    display: flex;\n    margin-left: 8px;\n"])));
+exports.StyledMotionTitleElementWrapper = StyledMotionTitleElementWrapper;
+
+const StyledRightWrapper = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    display: grid;\n    flex: 0 0 auto;\n    grid-template-areas: 'right';\n    margin-right: 5px;\n    overflow: hidden;\n    position: relative;\n"])));
+
+exports.StyledRightWrapper = StyledRightWrapper;
+const StyledMotionRightElementWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    align-items: center;\n    display: flex;\n    grid-area: header;\n    justify-content: flex-end;\n"])));
+exports.StyledMotionRightElementWrapper = StyledMotionRightElementWrapper;
+const StyledMotionRightInput = (0, _styledComponents.default)(_framerMotion.motion.input)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    background-color: transparent;\n    border: 1px solid transparent;\n    border-bottom-color: rgba(\n        ", ",\n        0.45\n    );\n    grid-area: header;\n    padding: ", ";\n"])), _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme['headline-rgb'];
+}, _ref10 => {
+  let {
+    hasIcon
+  } = _ref10;
+  return hasIcon ? '5px 23px 5px 1px' : '5px 1px';
+});
+exports.StyledMotionRightInput = StyledMotionRightInput;
+const StyledMotionRightInputIconWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    position: absolute;\n    right: 4px;\n    top: 0;\n"])));
+exports.StyledMotionRightInputIconWrapper = StyledMotionRightInputIconWrapper;
+//# sourceMappingURL=AccordionHead.styles.js.map

package/lib/components/accordion/accordion-head/AccordionHead.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionHead.styles.js","names":["StyledMotionAccordionHead","styled","motion","div","theme","text","StyledMotionIconWrapper","onClick","StyledMotionContentWrapper","StyledMotionTitleWrapper","StyledMotionTitle","isOpen","isWrapped","undefined","css","StyledMotionTitleElementWrapper","StyledRightWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","hasIcon","StyledMotionRightInputIconWrapper"],"sources":["../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionHeadProps = WithTheme<unknown>;\n\nexport const StyledMotionAccordionHead = styled(motion.div)`\n    align-items: center;\n    color: ${({ theme }: StyledMotionAccordionHeadProps) => theme.text};\n    display: flex;\n    overflow: hidden;\n    padding: 4px 0;\n`;\n\nexport const StyledMotionIconWrapper = styled(motion.div)`\n    align-items: center;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 0 0 auto;\n    height: 25px;\n    justify-content: center;\n    width: 25px;\n`;\n\nexport const StyledMotionContentWrapper = styled(motion.div)`\n    align-self: flex-start;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 1 1 auto;\n    height: 100%;\n    overflow: hidden;\n    margin-right: 10px;\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)`\n    display: grid;\n    flex: 0 1 auto;\n    grid-template-areas: 'header';\n`;\n\ninterface StyledMotionTitleProps {\n    isOpen: boolean;\n    isWrapped: boolean;\n}\n\nexport const StyledMotionTitle = styled(motion.div)<StyledMotionTitleProps>`\n    font-size: ${({ isOpen, isWrapped }) => (isOpen && !isWrapped ? '1.3rem' : undefined)};\n    font-weight: ${({ isOpen, isWrapped }) => (isOpen && isWrapped ? 700 : 'normal')};\n    grid-area: header;\n    height: ${({ isWrapped }) => (isWrapped ? '100%' : undefined)};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    transform-origin: top left;\n    user-select: none;\n    white-space: ${({ isOpen, isWrapped }) => (isOpen && !isWrapped ? 'normal' : 'nowrap')};\n\n    ${({ isWrapped }) =>\n        isWrapped &&\n        css`\n            align-items: center;\n            display: flex;\n        `}\n`;\n\nexport const StyledMotionTitleElementWrapper = styled(motion.div)`\n    align-items: center;\n    display: flex;\n    margin-left: 8px;\n`;\n\nexport const StyledRightWrapper = styled.div`\n    display: grid;\n    flex: 0 0 auto;\n    grid-template-areas: 'right';\n    margin-right: 5px;\n    overflow: hidden;\n    position: relative;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)`\n    align-items: center;\n    display: flex;\n    grid-area: header;\n    justify-content: flex-end;\n`;\n\ntype StyledMotionRightInputProps = WithTheme<{\n    hasIcon: boolean;\n}>;\n\nexport const StyledMotionRightInput = styled(motion.input)<StyledMotionRightInputProps>`\n    background-color: transparent;\n    border: 1px solid transparent;\n    border-bottom-color: rgba(\n        ${({ theme }: StyledMotionRightInputProps) => theme['headline-rgb']},\n        0.45\n    );\n    grid-area: header;\n    padding: ${({ hasIcon }) => (hasIcon ? '5px 23px 5px 1px' : '5px 1px')};\n`;\n\nexport const StyledMotionRightInputIconWrapper = styled(motion.div)`\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    position: absolute;\n    right: 4px;\n    top: 0;\n`;\n"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;;;AAKO,MAAMA,yBAAyB,GAAG,IAAAC,yBAAA,EAAOC,oBAAA,CAAOC,GAAd,CAAH,oLAEzB;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,OAA+CA,KAAK,CAACC,IAArD;AAAA,CAFyB,CAA/B;;AAQA,MAAMC,uBAAuB,GAAG,IAAAL,yBAAA,EAAOC,oBAAA,CAAOC,GAAd,CAAH,mOAEtB;EAAA,IAAC;IAAEI;EAAF,CAAD;EAAA,OAAkB,OAAOA,OAAP,KAAmB,UAAnB,GAAgC,SAAhC,GAA4C,SAA9D;AAAA,CAFsB,CAA7B;;AAUA,MAAMC,0BAA0B,GAAG,IAAAP,yBAAA,EAAOC,oBAAA,CAAOC,GAAd,CAAH,sOAEzB;EAAA,IAAC;IAAEI;EAAF,CAAD;EAAA,OAAkB,OAAOA,OAAP,KAAmB,UAAnB,GAAgC,SAAhC,GAA4C,SAA9D;AAAA,CAFyB,CAAhC;;AAUA,MAAME,wBAAwB,GAAG,IAAAR,yBAAA,EAAOC,oBAAA,CAAOC,GAAd,CAAH,sJAA9B;;AAWA,MAAMO,iBAAiB,GAAG,IAAAT,yBAAA,EAAOC,oBAAA,CAAOC,GAAd,CAAH,qTACb;EAAA,IAAC;IAAEQ,MAAF;IAAUC;EAAV,CAAD;EAAA,OAA4BD,MAAM,IAAI,CAACC,SAAX,GAAuB,QAAvB,GAAkCC,SAA9D;AAAA,CADa,EAEX;EAAA,IAAC;IAAEF,MAAF;IAAUC;EAAV,CAAD;EAAA,OAA4BD,MAAM,IAAIC,SAAV,GAAsB,GAAtB,GAA4B,QAAxD;AAAA,CAFW,EAIhB;EAAA,IAAC;IAAEA;EAAF,CAAD;EAAA,OAAoBA,SAAS,GAAG,MAAH,GAAYC,SAAzC;AAAA,CAJgB,EASX;EAAA,IAAC;IAAEF,MAAF;IAAUC;EAAV,CAAD;EAAA,OAA4BD,MAAM,IAAI,CAACC,SAAX,GAAuB,QAAvB,GAAkC,QAA9D;AAAA,CATW,EAWxB;EAAA,IAAC;IAAEA;EAAF,CAAD;EAAA,OACEA,SAAS,QACTE,qBADS,gJADX;AAAA,CAXwB,CAAvB;;AAmBA,MAAMC,+BAA+B,GAAG,IAAAd,yBAAA,EAAOC,oBAAA,CAAOC,GAAd,CAAH,8IAArC;;;AAMA,MAAMa,kBAAkB,GAAGf,yBAAA,CAAOE,GAAV,6NAAxB;;;AASA,MAAMc,+BAA+B,GAAG,IAAAhB,yBAAA,EAAOC,oBAAA,CAAOC,GAAd,CAAH,+KAArC;;AAWA,MAAMe,sBAAsB,GAAG,IAAAjB,yBAAA,EAAOC,oBAAA,CAAOiB,KAAd,CAAH,qQAIzB;EAAA,IAAC;IAAEf;EAAF,CAAD;EAAA,OAA4CA,KAAK,CAAC,cAAD,CAAjD;AAAA,CAJyB,EAQpB;EAAA,IAAC;IAAEgB;EAAF,CAAD;EAAA,OAAkBA,OAAO,GAAG,kBAAH,GAAwB,SAAjD;AAAA,CARoB,CAA5B;;AAWA,MAAMC,iCAAiC,GAAG,IAAApB,yBAAA,EAAOC,oBAAA,CAAOC,GAAd,CAAH,iOAAvC"}

package/lib/components/accordion/accordion-intro/AccordionIntro.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+declare const AccordionIntro: FC;
+export default AccordionIntro;

package/lib/components/accordion/accordion-intro/AccordionIntro.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _AccordionIntro = require("./AccordionIntro.styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const AccordionIntro = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_AccordionIntro.StyledAccordionIntro, {
+    className: "beta-chayns-accordion-intro"
+  }, children);
+};
+
+AccordionIntro.displayName = 'AccordionIntro';
+var _default = AccordionIntro;
+exports.default = _default;
+//# sourceMappingURL=AccordionIntro.js.map

package/lib/components/accordion/accordion-intro/AccordionIntro.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionIntro.js","names":["AccordionIntro","children","displayName"],"sources":["../../../../src/components/accordion/accordion-intro/AccordionIntro.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { StyledAccordionIntro } from './AccordionIntro.styles';\n\nconst AccordionIntro: FC = ({ children }) => (\n    <StyledAccordionIntro className=\"beta-chayns-accordion-intro\">{children}</StyledAccordionIntro>\n);\n\nAccordionIntro.displayName = 'AccordionIntro';\n\nexport default AccordionIntro;\n"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEA,MAAMA,cAAkB,GAAG;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,oBACvB,6BAAC,oCAAD;IAAsB,SAAS,EAAC;EAAhC,GAA+DA,QAA/D,CADuB;AAAA,CAA3B;;AAIAD,cAAc,CAACE,WAAf,GAA6B,gBAA7B;eAEeF,c"}

package/lib/components/accordion/accordion-intro/AccordionIntro.styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledAccordionIntro: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/accordion/accordion-intro/AccordionIntro.styles.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledAccordionIntro = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+const StyledAccordionIntro = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: 0 9px 6px;\n"])));
+
+exports.StyledAccordionIntro = StyledAccordionIntro;
+//# sourceMappingURL=AccordionIntro.styles.js.map

package/lib/components/accordion/accordion-intro/AccordionIntro.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionIntro.styles.js","names":["StyledAccordionIntro","styled","div"],"sources":["../../../../src/components/accordion/accordion-intro/AccordionIntro.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledAccordionIntro = styled.div`\n    padding: 0 9px 6px;\n`;\n"],"mappings":";;;;;;;AAAA;;;;;;;;AAEO,MAAMA,oBAAoB,GAAGC,yBAAA,CAAOC,GAAV,gGAA1B"}

package/lib/components/accordion/utils.d.ts

@@ -0,0 +1,11 @@
+interface GetAccordionHeadHeightOptions {
+    isWrapped?: boolean;
+    title: string;
+    width: number;
+}
+interface GetAccordionHeadHeightResult {
+    closed: number;
+    open: number;
+}
+export declare const getAccordionHeadHeight: ({ isWrapped, title, width, }: GetAccordionHeadHeightOptions) => GetAccordionHeadHeightResult;
+export {};

package/lib/components/accordion/utils.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAccordionHeadHeight = void 0;
+
+const getAccordionHeadHeight = _ref => {
+  let {
+    isWrapped,
+    title,
+    width
+  } = _ref;
+  const element = document.createElement('div');
+  element.style.fontSize = '1rem';
+  element.style.opacity = '0';
+  element.style.pointerEvents = 'none';
+  element.style.whiteSpace = 'nowrap';
+  element.style.width = "".concat(width, "px");
+  element.innerText = title;
+  document.body.appendChild(element);
+  const closedHeight = Math.max(element.clientHeight + 8, isWrapped ? 40 : 33);
+
+  if (isWrapped) {
+    element.style.fontWeight = 'bold';
+  } else {
+    element.style.fontSize = '1.3rem';
+  }
+
+  element.style.whiteSpace = 'normal';
+  const openHeight = Math.max(element.clientHeight + 8, isWrapped ? 40 : 33);
+  document.body.removeChild(element);
+  return {
+    closed: closedHeight,
+    open: openHeight
+  };
+};
+
+exports.getAccordionHeadHeight = getAccordionHeadHeight;
+//# sourceMappingURL=utils.js.map

package/lib/components/accordion/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["getAccordionHeadHeight","isWrapped","title","width","element","document","createElement","style","fontSize","opacity","pointerEvents","whiteSpace","innerText","body","appendChild","closedHeight","Math","max","clientHeight","fontWeight","openHeight","removeChild","closed","open"],"sources":["../../../src/components/accordion/utils.ts"],"sourcesContent":["interface GetAccordionHeadHeightOptions {\n    isWrapped?: boolean;\n    title: string;\n    width: number;\n}\n\ninterface GetAccordionHeadHeightResult {\n    closed: number;\n    open: number;\n}\n\nexport const getAccordionHeadHeight = ({\n    isWrapped,\n    title,\n    width,\n}: GetAccordionHeadHeightOptions): GetAccordionHeadHeightResult => {\n    const element = document.createElement('div');\n\n    element.style.fontSize = '1rem';\n    element.style.opacity = '0';\n    element.style.pointerEvents = 'none';\n    element.style.whiteSpace = 'nowrap';\n    element.style.width = `${width}px`;\n\n    element.innerText = title;\n\n    document.body.appendChild(element);\n\n    const closedHeight = Math.max(element.clientHeight + 8, isWrapped ? 40 : 33);\n\n    if (isWrapped) {\n        element.style.fontWeight = 'bold';\n    } else {\n        element.style.fontSize = '1.3rem';\n    }\n\n    element.style.whiteSpace = 'normal';\n\n    const openHeight = Math.max(element.clientHeight + 8, isWrapped ? 40 : 33);\n\n    document.body.removeChild(element);\n\n    return { closed: closedHeight, open: openHeight };\n};\n"],"mappings":";;;;;;;AAWO,MAAMA,sBAAsB,GAAG,QAI6B;EAAA,IAJ5B;IACnCC,SADmC;IAEnCC,KAFmC;IAGnCC;EAHmC,CAI4B;EAC/D,MAAMC,OAAO,GAAGC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAhB;EAEAF,OAAO,CAACG,KAAR,CAAcC,QAAd,GAAyB,MAAzB;EACAJ,OAAO,CAACG,KAAR,CAAcE,OAAd,GAAwB,GAAxB;EACAL,OAAO,CAACG,KAAR,CAAcG,aAAd,GAA8B,MAA9B;EACAN,OAAO,CAACG,KAAR,CAAcI,UAAd,GAA2B,QAA3B;EACAP,OAAO,CAACG,KAAR,CAAcJ,KAAd,aAAyBA,KAAzB;EAEAC,OAAO,CAACQ,SAAR,GAAoBV,KAApB;EAEAG,QAAQ,CAACQ,IAAT,CAAcC,WAAd,CAA0BV,OAA1B;EAEA,MAAMW,YAAY,GAAGC,IAAI,CAACC,GAAL,CAASb,OAAO,CAACc,YAAR,GAAuB,CAAhC,EAAmCjB,SAAS,GAAG,EAAH,GAAQ,EAApD,CAArB;;EAEA,IAAIA,SAAJ,EAAe;IACXG,OAAO,CAACG,KAAR,CAAcY,UAAd,GAA2B,MAA3B;EACH,CAFD,MAEO;IACHf,OAAO,CAACG,KAAR,CAAcC,QAAd,GAAyB,QAAzB;EACH;;EAEDJ,OAAO,CAACG,KAAR,CAAcI,UAAd,GAA2B,QAA3B;EAEA,MAAMS,UAAU,GAAGJ,IAAI,CAACC,GAAL,CAASb,OAAO,CAACc,YAAR,GAAuB,CAAhC,EAAmCjB,SAAS,GAAG,EAAH,GAAQ,EAApD,CAAnB;EAEAI,QAAQ,CAACQ,IAAT,CAAcQ,WAAd,CAA0BjB,OAA1B;EAEA,OAAO;IAAEkB,MAAM,EAAEP,YAAV;IAAwBQ,IAAI,EAAEH;EAA9B,CAAP;AACH,CAhCM"}

package/lib/components/badge/Badge.d.ts

@@ -1,5 +1,9 @@
 import { FC, ReactNode } from 'react';
-declare type BadgeProps = {
+export declare type BadgeProps = {
+    /**
+     * The background color of the badge
+     */
+    backgroundColor?: string;
     /**
      * The content of the badge
      */
@@ -8,6 +12,10 @@ declare type BadgeProps = {
      * Additional class names for the badge element
      */
     className?: string;
+    /**
+     * The font color of the badge
+     */
+    fontColor?: string;
 };
 declare const Badge: FC<BadgeProps>;
 export default Badge;

package/lib/components/badge/Badge.js

@@ -5,32 +5,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _templateObject;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _react = _interopRequireDefault(require("react"));
 
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var _Badge = require("./Badge.styles");
 
-var StyledBadge = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border-radius: 15px;\n    color: ", ";\n    font-size: 0.8rem;\n    padding: 2px 7px;\n    text-align: center;\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme['secondary-202'];
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme['007'];
-});
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var Badge = function Badge(_ref3) {
-  var children = _ref3.children,
-      className = _ref3.className;
-  var badgeClasses = (0, _clsx.default)('beta-chayns-badge ellipsis', className);
-  return /*#__PURE__*/_react.default.createElement(StyledBadge, {
-    className: badgeClasses
+const Badge = _ref => {
+  let {
+    backgroundColor,
+    children,
+    className,
+    fontColor
+  } = _ref;
+  const badgeClasses = (0, _clsx.default)('beta-chayns-badge ellipsis', className);
+  return /*#__PURE__*/_react.default.createElement(_Badge.StyledBadge, {
+    backgroundColor: backgroundColor,
+    className: badgeClasses,
+    fontColor: fontColor
   }, children);
 };
 

package/lib/components/badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/badge/Badge.tsx"],"names":["StyledBadge","styled","div","theme","Badge","children","className","badgeClasses","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAaA,IAAMA,WAAW,GAAGC,0BAAOC,GAAV,yNACO;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,SAAeA,KAAK,CAAC,eAAD,CAApB;AAAA,CADP,EAGJ;AAAA,MAAGA,KAAH,SAAGA,KAAH;AAAA,SAAeA,KAAK,CAAC,KAAD,CAApB;AAAA,CAHI,CAAjB;;AASA,IAAMC,KAAqB,GAAG,SAAxBA,KAAwB,QAA6B;AAAA,MAA1BC,QAA0B,SAA1BA,QAA0B;AAAA,MAAhBC,SAAgB,SAAhBA,SAAgB;AACvD,MAAMC,YAAY,GAAG,mBAAK,4BAAL,EAAmCD,SAAnC,CAArB;AAEA,sBAAO,6BAAC,WAAD;AAAa,IAAA,SAAS,EAAEC;AAAxB,KAAuCF,QAAvC,CAAP;AACH,CAJD;;AAMAD,KAAK,CAACI,WAAN,GAAoB,OAApB;eAEeJ,K","sourcesContent":["import React, { FC, ReactNode } from 'react';\nimport styled from 'styled-components';\nimport clsx from 'clsx';\n\ntype BadgeProps = {\n    /**\n     * The content of the badge\n     */\n    children: ReactNode;\n    /**\n     * Additional class names for the badge element\n     */\n    className?: string;\n};\n\nconst StyledBadge = styled.div`\n    background-color: ${({ theme }) => theme['secondary-202']};\n    border-radius: 15px;\n    color: ${({ theme }) => theme['007']};\n    font-size: 0.8rem;\n    padding: 2px 7px;\n    text-align: center;\n`;\n\nconst Badge: FC<BadgeProps> = ({ children, className }) => {\n    const badgeClasses = clsx('beta-chayns-badge ellipsis', className);\n\n    return <StyledBadge className={badgeClasses}>{children}</StyledBadge>;\n};\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"file":"Badge.js"}
+{"version":3,"file":"Badge.js","names":["Badge","backgroundColor","children","className","fontColor","badgeClasses","clsx","displayName"],"sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, ReactNode } from 'react';\nimport { StyledBadge } from './Badge.styles';\n\nexport type BadgeProps = {\n    /**\n     * The background color of the badge\n     */\n    backgroundColor?: string;\n    /**\n     * The content of the badge\n     */\n    children: ReactNode;\n    /**\n     * Additional class names for the badge element\n     */\n    className?: string;\n    /**\n     * The font color of the badge\n     */\n    fontColor?: string;\n};\n\nconst Badge: FC<BadgeProps> = ({ backgroundColor, children, className, fontColor }) => {\n    const badgeClasses = clsx('beta-chayns-badge ellipsis', className);\n\n    return (\n        <StyledBadge\n            backgroundColor={backgroundColor}\n            className={badgeClasses}\n            fontColor={fontColor}\n        >\n            {children}\n        </StyledBadge>\n    );\n};\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAqBA,MAAMA,KAAqB,GAAG,QAAyD;EAAA,IAAxD;IAAEC,eAAF;IAAmBC,QAAnB;IAA6BC,SAA7B;IAAwCC;EAAxC,CAAwD;EACnF,MAAMC,YAAY,GAAG,IAAAC,aAAA,EAAK,4BAAL,EAAmCH,SAAnC,CAArB;EAEA,oBACI,6BAAC,kBAAD;IACI,eAAe,EAAEF,eADrB;IAEI,SAAS,EAAEI,YAFf;IAGI,SAAS,EAAED;EAHf,GAKKF,QALL,CADJ;AASH,CAZD;;AAcAF,KAAK,CAACO,WAAN,GAAoB,OAApB;eAEeP,K"}

package/lib/components/badge/Badge.styles.d.ts

@@ -0,0 +1,4 @@
+import type { BadgeProps } from './Badge';
+export declare const StyledBadge: import("styled-components").StyledComponent<"div", any, Pick<BadgeProps, "backgroundColor" | "fontColor"> & {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;

package/lib/components/badge/Badge.styles.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledBadge = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+const StyledBadge = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border-radius: 15px;\n    color: ", ";\n    display: inline-block;\n    font-size: 0.8rem;\n    min-width: 1.65rem;\n    padding: 2px 7px;\n    text-align: center;\n"])), _ref => {
+  let {
+    backgroundColor,
+    theme
+  } = _ref;
+  return backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme['secondary-202'];
+}, _ref2 => {
+  let {
+    fontColor,
+    theme
+  } = _ref2;
+  return fontColor !== null && fontColor !== void 0 ? fontColor : theme['007'];
+});
+
+exports.StyledBadge = StyledBadge;
+//# sourceMappingURL=Badge.styles.js.map

package/lib/components/badge/Badge.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.styles.js","names":["StyledBadge","styled","div","backgroundColor","theme","fontColor"],"sources":["../../../src/components/badge/Badge.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { BadgeProps } from './Badge';\n\ntype StyledBadgeProps = WithTheme<Pick<BadgeProps, 'backgroundColor' | 'fontColor'>>;\n\nexport const StyledBadge = styled.div<StyledBadgeProps>`\n    background-color: ${({ backgroundColor, theme }: StyledBadgeProps) =>\n        backgroundColor ?? theme['secondary-202']};\n    border-radius: 15px;\n    color: ${({ fontColor, theme }: StyledBadgeProps) => fontColor ?? theme['007']};\n    display: inline-block;\n    font-size: 0.8rem;\n    min-width: 1.65rem;\n    padding: 2px 7px;\n    text-align: center;\n`;\n"],"mappings":";;;;;;;AAAA;;;;;;;;AAMO,MAAMA,WAAW,GAAGC,yBAAA,CAAOC,GAAV,8QACA;EAAA,IAAC;IAAEC,eAAF;IAAmBC;EAAnB,CAAD;EAAA,OAChBD,eADgB,aAChBA,eADgB,cAChBA,eADgB,GACGC,KAAK,CAAC,eAAD,CADR;AAAA,CADA,EAIX;EAAA,IAAC;IAAEC,SAAF;IAAaD;EAAb,CAAD;EAAA,OAA4CC,SAA5C,aAA4CA,SAA5C,cAA4CA,SAA5C,GAAyDD,KAAK,CAAC,KAAD,CAA9D;AAAA,CAJW,CAAjB"}

package/lib/components/button/Button.d.ts

@@ -1,5 +1,5 @@
 import { FC, MouseEventHandler, ReactNode } from 'react';
-declare type ButtonProps = {
+export declare type ButtonProps = {
     /**
      * The label of the button
      */
@@ -9,7 +9,7 @@ declare type ButtonProps = {
      */
     className?: string;
     /**
-     * An icon that is displayed on the left hand side of the button text
+     * An icon that is displayed on the left-hand side of the button text
      */
     icon?: string;
     /**

package/lib/components/button/Button.js

@@ -9,43 +9,24 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 
-var _templateObject, _templateObject2;
+var _Button = require("./Button.styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var StyledButton = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border-radius: 3px;\n    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);\n    border: none;\n    color: ", ";\n    cursor: pointer;\n    display: inline-block;\n    line-height: 1.15;\n    min-height: 30px;\n    opacity: ", ";\n    padding: ", ";\n    position: relative;\n    user-select: none;\n    transition: opacity 0.3s ease;\n"])), function (_ref) {
-  var isSecondary = _ref.isSecondary,
-      theme = _ref.theme;
-  return isSecondary ? theme['202'] : theme['408'];
-}, function (_ref2) {
-  var isSecondary = _ref2.isSecondary,
-      theme = _ref2.theme;
-  return isSecondary ? theme['text'] : 'white';
-}, function (props) {
-  return props.disabled ? 0.5 : 1;
-}, function (_ref3) {
-  var hasIcon = _ref3.hasIcon;
-  return "7px 12px 7px ".concat(hasIcon ? '42px' : '12px');
-});
-
-var StyledIconWrapper = _styledComponents.default.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    align-items: center;\n    background-color: rgba(255, 255, 255, 0.2);\n    bottom: 0;\n    display: flex;\n    justify-content: center;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 30px;\n"])));
-
-var Button = function Button(_ref4) {
-  var children = _ref4.children,
-      className = _ref4.className,
-      icon = _ref4.icon,
-      isDisabled = _ref4.isDisabled,
-      isSecondary = _ref4.isSecondary,
-      onClick = _ref4.onClick,
-      shouldStopPropagation = _ref4.shouldStopPropagation;
-
-  var handleClick = function handleClick(event) {
+const Button = _ref => {
+  let {
+    children,
+    className,
+    icon,
+    isDisabled,
+    isSecondary,
+    onClick,
+    shouldStopPropagation
+  } = _ref;
+
+  const handleClick = event => {
     if (shouldStopPropagation) {
       event.stopPropagation();
     }
@@ -53,14 +34,14 @@ var Button = function Button(_ref4) {
     onClick(event);
   };
 
-  var buttonClasses = (0, _clsx.default)('beta-chayns-button ellipsis', className);
-  return /*#__PURE__*/_react.default.createElement(StyledButton, {
+  const buttonClasses = (0, _clsx.default)('beta-chayns-button ellipsis', className);
+  return /*#__PURE__*/_react.default.createElement(_Button.StyledButton, {
     className: buttonClasses,
     disabled: isDisabled,
     hasIcon: typeof icon === 'string' && icon !== '',
     isSecondary: isSecondary,
     onClick: handleClick
-  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.createElement(StyledIconWrapper, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.createElement(_Button.StyledIconWrapper, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     color: "white",
     icons: [icon]
   })), children));

package/lib/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/button/Button.tsx"],"names":["StyledButton","styled","button","isSecondary","theme","props","disabled","hasIcon","StyledIconWrapper","span","Button","children","className","icon","isDisabled","onClick","shouldStopPropagation","handleClick","event","stopPropagation","buttonClasses","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AAqCA,IAAMA,YAAY,GAAGC,0BAAOC,MAAV,kbACM;AAAA,MAAGC,WAAH,QAAGA,WAAH;AAAA,MAAgBC,KAAhB,QAAgBA,KAAhB;AAAA,SAA6BD,WAAW,GAAGC,KAAK,CAAC,KAAD,CAAR,GAAkBA,KAAK,CAAC,KAAD,CAA/D;AAAA,CADN,EAKL;AAAA,MAAGD,WAAH,SAAGA,WAAH;AAAA,MAAgBC,KAAhB,SAAgBA,KAAhB;AAAA,SAA6BD,WAAW,GAAGC,KAAK,CAAC,MAAD,CAAR,GAAmB,OAA3D;AAAA,CALK,EAUH,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,QAAN,GAAiB,GAAjB,GAAuB,CAAnC;AAAA,CAVG,EAWH;AAAA,MAAGC,OAAH,SAAGA,OAAH;AAAA,gCAAiCA,OAAO,GAAG,MAAH,GAAY,MAApD;AAAA,CAXG,CAAlB;;AAiBA,IAAMC,iBAAiB,GAAGP,0BAAOQ,IAAV,4RAAvB;;AAYA,IAAMC,MAAuB,GAAG,SAA1BA,MAA0B,QAQ1B;AAAA,MAPFC,QAOE,SAPFA,QAOE;AAAA,MANFC,SAME,SANFA,SAME;AAAA,MALFC,IAKE,SALFA,IAKE;AAAA,MAJFC,UAIE,SAJFA,UAIE;AAAA,MAHFX,WAGE,SAHFA,WAGE;AAAA,MAFFY,OAEE,SAFFA,OAEE;AAAA,MADFC,qBACE,SADFA,qBACE;;AACF,MAAMC,WAAiD,GAAG,SAApDA,WAAoD,CAACC,KAAD,EAAW;AACjE,QAAIF,qBAAJ,EAA2B;AACvBE,MAAAA,KAAK,CAACC,eAAN;AACH;;AAEDJ,IAAAA,OAAO,CAACG,KAAD,CAAP;AACH,GAND;;AAQA,MAAME,aAAa,GAAG,mBAAK,6BAAL,EAAoCR,SAApC,CAAtB;AAEA,sBACI,6BAAC,YAAD;AACI,IAAA,SAAS,EAAEQ,aADf;AAEI,IAAA,QAAQ,EAAEN,UAFd;AAGI,IAAA,OAAO,EAAE,OAAOD,IAAP,KAAgB,QAAhB,IAA4BA,IAAI,KAAK,EAHlD;AAII,IAAA,WAAW,EAAEV,WAJjB;AAKI,IAAA,OAAO,EAAEc;AALb,kBAOI,4DACKJ,IAAI,iBACD,6BAAC,iBAAD,qBACI,6BAAC,aAAD;AAAM,IAAA,KAAK,EAAC,OAAZ;AAAoB,IAAA,KAAK,EAAE,CAACA,IAAD;AAA3B,IADJ,CAFR,EAMKF,QANL,CAPJ,CADJ;AAkBH,CArCD;;AAuCAD,MAAM,CAACW,WAAP,GAAqB,QAArB;eAEeX,M","sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler, ReactNode } from 'react';\nimport styled from 'styled-components';\nimport Icon from '../icon/Icon';\n\ntype ButtonProps = {\n    /**\n     * The label of the button\n     */\n    children: ReactNode;\n    /**\n     * Additional class names for the button element\n     */\n    className?: string;\n    /**\n     * An icon that is displayed on the left hand side of the button text\n     */\n    icon?: string;\n    /**\n     * Disables the button so that it cannot be clicked anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * Displays the button in the secondary style\n     */\n    isSecondary?: boolean;\n    /**\n     * Function to be executed when the button is clicked\n     */\n    onClick: MouseEventHandler<HTMLButtonElement>;\n    /**\n     * Stops event propagation on click\n     */\n    shouldStopPropagation?: boolean;\n};\n\ntype StyledButtonProps = ButtonProps & {\n    hasIcon: boolean;\n};\n\nconst StyledButton = styled.button<StyledButtonProps>`\n    background-color: ${({ isSecondary, theme }) => (isSecondary ? theme['202'] : theme['408'])};\n    border-radius: 3px;\n    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);\n    border: none;\n    color: ${({ isSecondary, theme }) => (isSecondary ? theme['text'] : 'white')};\n    cursor: pointer;\n    display: inline-block;\n    line-height: 1.15;\n    min-height: 30px;\n    opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n    padding: ${({ hasIcon }) => `7px 12px 7px ${hasIcon ? '42px' : '12px'}`};\n    position: relative;\n    user-select: none;\n    transition: opacity 0.3s ease;\n`;\n\nconst StyledIconWrapper = styled.span`\n    align-items: center;\n    background-color: rgba(255, 255, 255, 0.2);\n    bottom: 0;\n    display: flex;\n    justify-content: center;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 30px;\n`;\n\nconst Button: FC<ButtonProps> = ({\n    children,\n    className,\n    icon,\n    isDisabled,\n    isSecondary,\n    onClick,\n    shouldStopPropagation,\n}) => {\n    const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        onClick(event);\n    };\n\n    const buttonClasses = clsx('beta-chayns-button ellipsis', className);\n\n    return (\n        <StyledButton\n            className={buttonClasses}\n            disabled={isDisabled}\n            hasIcon={typeof icon === 'string' && icon !== ''}\n            isSecondary={isSecondary}\n            onClick={handleClick}\n        >\n            <>\n                {icon && (\n                    <StyledIconWrapper>\n                        <Icon color=\"white\" icons={[icon]} />\n                    </StyledIconWrapper>\n                )}\n                {children}\n            </>\n        </StyledButton>\n    );\n};\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"file":"Button.js"}
+{"version":3,"file":"Button.js","names":["Button","children","className","icon","isDisabled","isSecondary","onClick","shouldStopPropagation","handleClick","event","stopPropagation","buttonClasses","clsx","displayName"],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler, ReactNode } from 'react';\nimport Icon from '../icon/Icon';\nimport { StyledButton, StyledIconWrapper } from './Button.styles';\n\nexport type ButtonProps = {\n    /**\n     * The label of the button\n     */\n    children: ReactNode;\n    /**\n     * Additional class names for the button element\n     */\n    className?: string;\n    /**\n     * An icon that is displayed on the left-hand side of the button text\n     */\n    icon?: string;\n    /**\n     * Disables the button so that it cannot be clicked anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * Displays the button in the secondary style\n     */\n    isSecondary?: boolean;\n    /**\n     * Function to be executed when the button is clicked\n     */\n    onClick: MouseEventHandler<HTMLButtonElement>;\n    /**\n     * Stops event propagation on click\n     */\n    shouldStopPropagation?: boolean;\n};\n\nconst Button: FC<ButtonProps> = ({\n    children,\n    className,\n    icon,\n    isDisabled,\n    isSecondary,\n    onClick,\n    shouldStopPropagation,\n}) => {\n    const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        onClick(event);\n    };\n\n    const buttonClasses = clsx('beta-chayns-button ellipsis', className);\n\n    return (\n        <StyledButton\n            className={buttonClasses}\n            disabled={isDisabled}\n            hasIcon={typeof icon === 'string' && icon !== ''}\n            isSecondary={isSecondary}\n            onClick={handleClick}\n        >\n            <>\n                {icon && (\n                    <StyledIconWrapper>\n                        <Icon color=\"white\" icons={[icon]} />\n                    </StyledIconWrapper>\n                )}\n                {children}\n            </>\n        </StyledButton>\n    );\n};\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AAiCA,MAAMA,MAAuB,GAAG,QAQ1B;EAAA,IAR2B;IAC7BC,QAD6B;IAE7BC,SAF6B;IAG7BC,IAH6B;IAI7BC,UAJ6B;IAK7BC,WAL6B;IAM7BC,OAN6B;IAO7BC;EAP6B,CAQ3B;;EACF,MAAMC,WAAiD,GAAIC,KAAD,IAAW;IACjE,IAAIF,qBAAJ,EAA2B;MACvBE,KAAK,CAACC,eAAN;IACH;;IAEDJ,OAAO,CAACG,KAAD,CAAP;EACH,CAND;;EAQA,MAAME,aAAa,GAAG,IAAAC,aAAA,EAAK,6BAAL,EAAoCV,SAApC,CAAtB;EAEA,oBACI,6BAAC,oBAAD;IACI,SAAS,EAAES,aADf;IAEI,QAAQ,EAAEP,UAFd;IAGI,OAAO,EAAE,OAAOD,IAAP,KAAgB,QAAhB,IAA4BA,IAAI,KAAK,EAHlD;IAII,WAAW,EAAEE,WAJjB;IAKI,OAAO,EAAEG;EALb,gBAOI,4DACKL,IAAI,iBACD,6BAAC,yBAAD,qBACI,6BAAC,aAAD;IAAM,KAAK,EAAC,OAAZ;IAAoB,KAAK,EAAE,CAACA,IAAD;EAA3B,EADJ,CAFR,EAMKF,QANL,CAPJ,CADJ;AAkBH,CArCD;;AAuCAD,MAAM,CAACa,WAAP,GAAqB,QAArB;eAEeb,M"}

package/lib/components/button/Button.styles.d.ts

@@ -0,0 +1,7 @@
+import type { ButtonProps } from './Button';
+export declare const StyledButton: import("styled-components").StyledComponent<"button", any, ButtonProps & {
+    hasIcon: boolean;
+} & {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+export declare const StyledIconWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;

package/lib/components/button/Button.styles.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledIconWrapper = exports.StyledButton = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+const StyledButton = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border-radius: 3px;\n    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);\n    border: none;\n    color: ", ";\n    cursor: pointer;\n    display: inline-block;\n    line-height: 1.15;\n    min-height: 30px;\n    opacity: ", ";\n    padding: ", ";\n    position: relative;\n    user-select: none;\n    transition: opacity 0.3s ease;\n"])), _ref => {
+  let {
+    isSecondary,
+    theme
+  } = _ref;
+  return isSecondary ? theme['202'] : theme['408'];
+}, _ref2 => {
+  let {
+    isSecondary,
+    theme
+  } = _ref2;
+  return isSecondary ? theme.text : 'white';
+}, _ref3 => {
+  let {
+    disabled
+  } = _ref3;
+  return disabled ? 0.5 : 1;
+}, _ref4 => {
+  let {
+    hasIcon
+  } = _ref4;
+  return "7px 12px 7px ".concat(hasIcon ? '42px' : '12px');
+});
+
+exports.StyledButton = StyledButton;
+
+const StyledIconWrapper = _styledComponents.default.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    align-items: center;\n    background-color: rgba(255, 255, 255, 0.2);\n    bottom: 0;\n    display: flex;\n    justify-content: center;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 30px;\n"])));
+
+exports.StyledIconWrapper = StyledIconWrapper;
+//# sourceMappingURL=Button.styles.js.map

package/lib/components/button/Button.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styles.js","names":["StyledButton","styled","button","isSecondary","theme","text","disabled","hasIcon","StyledIconWrapper","span"],"sources":["../../../src/components/button/Button.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { ButtonProps } from './Button';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledButtonProps = ButtonProps &\n    WithTheme<{\n        hasIcon: boolean;\n    }>;\n\nexport const StyledButton = styled.button<StyledButtonProps>`\n    background-color: ${({ isSecondary, theme }: StyledButtonProps) =>\n        isSecondary ? theme['202'] : theme['408']};\n    border-radius: 3px;\n    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);\n    border: none;\n    color: ${({ isSecondary, theme }: StyledButtonProps) => (isSecondary ? theme.text : 'white')};\n    cursor: pointer;\n    display: inline-block;\n    line-height: 1.15;\n    min-height: 30px;\n    opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};\n    padding: ${({ hasIcon }) => `7px 12px 7px ${hasIcon ? '42px' : '12px'}`};\n    position: relative;\n    user-select: none;\n    transition: opacity 0.3s ease;\n`;\n\nexport const StyledIconWrapper = styled.span`\n    align-items: center;\n    background-color: rgba(255, 255, 255, 0.2);\n    bottom: 0;\n    display: flex;\n    justify-content: center;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 30px;\n`;\n"],"mappings":";;;;;;;AAAA;;;;;;;;AASO,MAAMA,YAAY,GAAGC,yBAAA,CAAOC,MAAV,kbACD;EAAA,IAAC;IAAEC,WAAF;IAAeC;EAAf,CAAD;EAAA,OAChBD,WAAW,GAAGC,KAAK,CAAC,KAAD,CAAR,GAAkBA,KAAK,CAAC,KAAD,CADlB;AAAA,CADC,EAMZ;EAAA,IAAC;IAAED,WAAF;IAAeC;EAAf,CAAD;EAAA,OAAgDD,WAAW,GAAGC,KAAK,CAACC,IAAT,GAAgB,OAA3E;AAAA,CANY,EAWV;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,OAAmBA,QAAQ,GAAG,GAAH,GAAS,CAApC;AAAA,CAXU,EAYV;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,8BAAiCA,OAAO,GAAG,MAAH,GAAY,MAApD;AAAA,CAZU,CAAlB;;;;AAkBA,MAAMC,iBAAiB,GAAGP,yBAAA,CAAOQ,IAAV,4RAAvB"}

package/lib/components/color-scheme-provider/ColorSchemeProvider.d.ts

@@ -34,5 +34,11 @@ declare type ColorSchemeProviderProps = {
         [key: string]: string | number;
     };
 };
+export interface Theme {
+    [key: string]: string;
+}
+export declare type WithTheme<T> = T & {
+    theme: Theme;
+};
 declare const ColorSchemeProvider: FC<ColorSchemeProviderProps>;
 export default ColorSchemeProvider;