@chayns-components/core 5.0.0-beta.9 → 5.0.0-beta.98

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

@@ -3,46 +3,156 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledRightWrapper = exports.StyledMotionTitle = exports.StyledMotionTitleWrapper = exports.StyledMotionIconWrapper = exports.StyledMotionAccordionHead = void 0;
-
+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 = _interopRequireDefault(require("styled-components"));
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
-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 StyledMotionAccordionHead = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    align-items: center;\n    cursor: ", ";\n    display: flex;\n    overflow: hidden;\n    padding: 4px 0;\n"])), function (_ref) {
-  var onClick = _ref.onClick;
-  return typeof onClick === 'function' ? 'pointer' : 'default';
-});
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+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; }
+const StyledMotionAccordionHead = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    align-items: center;
+    color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.text;
+}};
+    display: flex;
+    overflow: hidden;
+    padding: 4px 0;
+`;
 exports.StyledMotionAccordionHead = StyledMotionAccordionHead;
-var StyledMotionIconWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n    height: 25px;\n    justify-content: center;\n    width: 25px;\n"])));
+const StyledMotionIconWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    align-items: center;
+    cursor: ${_ref2 => {
+  let {
+    onClick
+  } = _ref2;
+  return typeof onClick === 'function' ? 'pointer' : 'default';
+}};
+    display: flex;
+    flex: 0 0 auto;
+    height: 25px;
+    justify-content: center;
+    width: 25px;
+`;
 exports.StyledMotionIconWrapper = StyledMotionIconWrapper;
-var StyledMotionTitleWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    align-self: flex-start;\n    flex: 1 1 auto;\n    height: 100%;\n    overflow: hidden;\n    margin-right: 10px;\n    position: relative;\n"])));
+const StyledMotionContentWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    align-self: flex-start;
+    cursor: ${_ref3 => {
+  let {
+    onClick
+  } = _ref3;
+  return typeof onClick === 'function' ? 'pointer' : 'default';
+}};
+    display: flex;
+    flex: 1 1 auto;
+    height: 100%;
+    overflow: hidden;
+    margin-right: 10px;
+`;
+exports.StyledMotionContentWrapper = StyledMotionContentWrapper;
+const StyledMotionTitleWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    display: grid;
+    flex: 0 1 auto;
+    grid-template-areas: 'header';
+`;
 exports.StyledMotionTitleWrapper = StyledMotionTitleWrapper;
-var StyledMotionTitle = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    align-items: center;\n    display: flex;\n    font-size: ", ";\n    font-weight: ", ";\n    height: ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    transform-origin: top left;\n    user-select: none;\n    white-space: ", ";\n    width: 100%;\n"])), function (_ref2) {
-  var isOpen = _ref2.isOpen,
-      isWrapped = _ref2.isWrapped;
+const StyledMotionTitle = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    font-size: ${_ref4 => {
+  let {
+    isOpen,
+    isWrapped
+  } = _ref4;
   return isOpen && !isWrapped ? '1.3rem' : undefined;
-}, function (_ref3) {
-  var isOpen = _ref3.isOpen,
-      isWrapped = _ref3.isWrapped;
+}};
+    font-weight: ${_ref5 => {
+  let {
+    isOpen,
+    isWrapped
+  } = _ref5;
   return isOpen && isWrapped ? 700 : 'normal';
-}, function (_ref4) {
-  var isWrapped = _ref4.isWrapped;
+}};
+    grid-area: header;
+    height: ${_ref6 => {
+  let {
+    isWrapped
+  } = _ref6;
   return isWrapped ? '100%' : undefined;
-}, function (_ref5) {
-  var isOpen = _ref5.isOpen,
-      isWrapped = _ref5.isWrapped;
+}};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transform-origin: top left;
+    user-select: none;
+    white-space: ${_ref7 => {
+  let {
+    isOpen,
+    isWrapped
+  } = _ref7;
   return isOpen && !isWrapped ? 'normal' : 'nowrap';
-});
-exports.StyledMotionTitle = StyledMotionTitle;
-
-var StyledRightWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    display: flex;\n    flex: 0 0 auto;\n    flex-direction: column;\n    justify-content: center;\n    margin-right: 5px;\n    overflow: hidden;\n"])));
+}};
 
+    ${_ref8 => {
+  let {
+    isWrapped
+  } = _ref8;
+  return isWrapped && (0, _styledComponents.css)`
+            align-items: center;
+            display: flex;
+        `;
+}}
+`;
+exports.StyledMotionTitle = StyledMotionTitle;
+const StyledMotionTitleElementWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    align-items: center;
+    display: flex;
+    margin-left: 8px;
+`;
+exports.StyledMotionTitleElementWrapper = StyledMotionTitleElementWrapper;
+const StyledRightWrapper = _styledComponents.default.div`
+    display: grid;
+    flex: 0 0 auto;
+    grid-template-areas: 'right';
+    margin-right: 5px;
+    overflow: hidden;
+    position: relative;
+`;
 exports.StyledRightWrapper = StyledRightWrapper;
+const StyledMotionRightElementWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    align-items: center;
+    display: flex;
+    grid-area: header;
+    justify-content: flex-end;
+`;
+exports.StyledMotionRightElementWrapper = StyledMotionRightElementWrapper;
+const StyledMotionRightInput = (0, _styledComponents.default)(_framerMotion.motion.input)`
+    background-color: transparent;
+    border: 1px solid transparent;
+    border-bottom-color: rgba(
+        ${_ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme['headline-rgb'];
+}},
+        0.45
+    );
+    grid-area: header;
+    padding: ${_ref10 => {
+  let {
+    hasIcon
+  } = _ref10;
+  return hasIcon ? '5px 23px 5px 1px' : '5px 1px';
+}};
+`;
+exports.StyledMotionRightInput = StyledMotionRightInput;
+const StyledMotionRightInputIconWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    align-items: center;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    position: absolute;
+    right: 4px;
+    top: 0;
+`;
+exports.StyledMotionRightInputIconWrapper = StyledMotionRightInputIconWrapper;
 //# sourceMappingURL=AccordionHead.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"names":["StyledMotionAccordionHead","motion","div","onClick","StyledMotionIconWrapper","StyledMotionTitleWrapper","StyledMotionTitle","isOpen","isWrapped","undefined","StyledRightWrapper","styled"],"mappings":";;;;;;;AAAA;;AAEA;;;;;;;;AAMO,IAAMA,yBAAyB,GAAG,+BAAOC,qBAAOC,GAAd,CAAH,qLAExB;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,SAAkB,OAAOA,OAAP,KAAmB,UAAnB,GAAgC,SAAhC,GAA4C,SAA9D;AAAA,CAFwB,CAA/B;;AAQA,IAAMC,uBAAuB,GAAG,+BAAOH,qBAAOC,GAAd,CAAH,+MAA7B;;AASA,IAAMG,wBAAwB,GAAG,+BAAOJ,qBAAOC,GAAd,CAAH,uNAA9B;;AAcA,IAAMI,iBAAiB,GAAG,+BAAOL,qBAAOC,GAAd,CAAH,iVAGb;AAAA,MAAGK,MAAH,SAAGA,MAAH;AAAA,MAAWC,SAAX,SAAWA,SAAX;AAAA,SAA4BD,MAAM,IAAI,CAACC,SAAX,GAAuB,QAAvB,GAAkCC,SAA9D;AAAA,CAHa,EAIX;AAAA,MAAGF,MAAH,SAAGA,MAAH;AAAA,MAAWC,SAAX,SAAWA,SAAX;AAAA,SAA4BD,MAAM,IAAIC,SAAV,GAAsB,GAAtB,GAA4B,QAAxD;AAAA,CAJW,EAKhB;AAAA,MAAGA,SAAH,SAAGA,SAAH;AAAA,SAAoBA,SAAS,GAAG,MAAH,GAAYC,SAAzC;AAAA,CALgB,EAUX;AAAA,MAAGF,MAAH,SAAGA,MAAH;AAAA,MAAWC,SAAX,SAAWA,SAAX;AAAA,SAA4BD,MAAM,IAAI,CAACC,SAAX,GAAuB,QAAvB,GAAkC,QAA9D;AAAA,CAVW,CAAvB;;;AAcA,IAAME,kBAAkB,GAAGC,0BAAOT,GAAV,4NAAxB","sourcesContent":["import { motion } from 'framer-motion';\nimport type { MouseEventHandler } from 'react';\nimport styled from 'styled-components';\n\ntype StyledMotionAccordionHeadProps = {\n    onClick?: MouseEventHandler<HTMLDivElement>;\n};\n\nexport const StyledMotionAccordionHead = styled(motion.div)<StyledMotionAccordionHeadProps>`\n    align-items: center;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    overflow: hidden;\n    padding: 4px 0;\n`;\n\nexport const StyledMotionIconWrapper = styled(motion.div)`\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n    height: 25px;\n    justify-content: center;\n    width: 25px;\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)`\n    align-self: flex-start;\n    flex: 1 1 auto;\n    height: 100%;\n    overflow: hidden;\n    margin-right: 10px;\n    position: relative;\n`;\n\ninterface StyledMotionTitleProps {\n    isOpen: boolean;\n    isWrapped: boolean;\n}\n\nexport const StyledMotionTitle = styled(motion.div)<StyledMotionTitleProps>`\n    align-items: center;\n    display: flex;\n    font-size: ${({ isOpen, isWrapped }) => (isOpen && !isWrapped ? '1.3rem' : undefined)};\n    font-weight: ${({ isOpen, isWrapped }) => (isOpen && isWrapped ? 700 : 'normal')};\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    width: 100%;\n`;\n\nexport const StyledRightWrapper = styled.div`\n    display: flex;\n    flex: 0 0 auto;\n    flex-direction: column;\n    justify-content: center;\n    margin-right: 5px;\n    overflow: hidden;\n`;\n"],"file":"AccordionHead.styles.js"}
+{"version":3,"file":"AccordionHead.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledMotionAccordionHead","styled","motion","div","_ref","theme","text","exports","StyledMotionIconWrapper","_ref2","onClick","StyledMotionContentWrapper","_ref3","StyledMotionTitleWrapper","StyledMotionTitle","_ref4","isOpen","isWrapped","undefined","_ref5","_ref6","_ref7","_ref8","css","StyledMotionTitleElementWrapper","StyledRightWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","_ref9","_ref10","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":"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"}

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

@@ -0,0 +1,9 @@
+import { FC, ReactNode } from 'react';
+export type AccordionIntroProps = {
+    /**
+     * The content of the accordion content element
+     */
+    children: ReactNode;
+};
+declare const AccordionIntro: FC<AccordionIntroProps>;
+export default AccordionIntro;

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

@@ -0,0 +1,21 @@
+"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":["_react","_interopRequireDefault","require","_AccordionIntro","obj","__esModule","default","AccordionIntro","_ref","children","createElement","StyledAccordionIntro","className","displayName","_default","exports"],"sources":["../../../../src/components/accordion/accordion-intro/AccordionIntro.tsx"],"sourcesContent":["import React, { FC, ReactNode } from 'react';\nimport { StyledAccordionIntro } from './AccordionIntro.styles';\n\nexport type AccordionIntroProps = {\n    /**\n     * The content of the accordion content element\n     */\n    children: ReactNode;\n};\n\nconst AccordionIntro: FC<AccordionIntroProps> = ({ children }) => (\n    <StyledAccordionIntro className=\"beta-chayns-accordion-intro\">{children}</StyledAccordionIntro>\n);\n\nAccordionIntro.displayName = 'AccordionIntro';\n\nexport default AccordionIntro;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,eAAA,GAAAD,OAAA;AAA+D,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAS/D,MAAMG,cAAuC,GAAGC,IAAA;EAAA,IAAC;IAAEC;EAAS,CAAC,GAAAD,IAAA;EAAA,oBACzDR,MAAA,CAAAM,OAAA,CAAAI,aAAA,CAACP,eAAA,CAAAQ,oBAAoB;IAACC,SAAS,EAAC;EAA6B,GAAEH,QAAQ,CAAwB;AAAA,CAClG;AAEDF,cAAc,CAACM,WAAW,GAAG,gBAAgB;AAAC,IAAAC,QAAA,GAE/BP,cAAc;AAAAQ,OAAA,CAAAT,OAAA,GAAAQ,QAAA"}

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,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledAccordionIntro = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledAccordionIntro = _styledComponents.default.div`
+    padding: 0 9px 6px;
+`;
+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":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledAccordionIntro","styled","div","exports"],"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,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,oBAAoB,GAAGC,yBAAM,CAACC,GAAI;AAC/C;AACA,CAAC;AAACC,OAAA,CAAAH,oBAAA,GAAAA,oBAAA"}

package/lib/components/accordion/utils.js

@@ -4,35 +4,33 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getAccordionHeadHeight = void 0;
-
-var getAccordionHeadHeight = function getAccordionHeadHeight(_ref) {
-  var isWrapped = _ref.isWrapped,
-      title = _ref.title,
-      width = _ref.width;
-  var element = document.createElement('div');
+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.style.width = `${width}px`;
   element.innerText = title;
   document.body.appendChild(element);
-  var closedHeight = Math.max(element.clientHeight + 8, isWrapped ? 40 : 33);
-
+  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';
-  var openHeight = Math.max(element.clientHeight + 8, isWrapped ? 40 : 33);
+  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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/accordion/utils.ts"],"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"],"mappings":";;;;;;;AAWO,IAAMA,sBAAsB,GAAG,SAAzBA,sBAAyB,OAI6B;AAAA,MAH/DC,SAG+D,QAH/DA,SAG+D;AAAA,MAF/DC,KAE+D,QAF/DA,KAE+D;AAAA,MAD/DC,KAC+D,QAD/DA,KAC+D;AAC/D,MAAMC,OAAO,GAAGC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAhB;AAEAF,EAAAA,OAAO,CAACG,KAAR,CAAcC,QAAd,GAAyB,MAAzB;AACAJ,EAAAA,OAAO,CAACG,KAAR,CAAcE,OAAd,GAAwB,GAAxB;AACAL,EAAAA,OAAO,CAACG,KAAR,CAAcG,aAAd,GAA8B,MAA9B;AACAN,EAAAA,OAAO,CAACG,KAAR,CAAcI,UAAd,GAA2B,QAA3B;AACAP,EAAAA,OAAO,CAACG,KAAR,CAAcJ,KAAd,aAAyBA,KAAzB;AAEAC,EAAAA,OAAO,CAACQ,SAAR,GAAoBV,KAApB;AAEAG,EAAAA,QAAQ,CAACQ,IAAT,CAAcC,WAAd,CAA0BV,OAA1B;AAEA,MAAMW,YAAY,GAAGC,IAAI,CAACC,GAAL,CAASb,OAAO,CAACc,YAAR,GAAuB,CAAhC,EAAmCjB,SAAS,GAAG,EAAH,GAAQ,EAApD,CAArB;;AAEA,MAAIA,SAAJ,EAAe;AACXG,IAAAA,OAAO,CAACG,KAAR,CAAcY,UAAd,GAA2B,MAA3B;AACH,GAFD,MAEO;AACHf,IAAAA,OAAO,CAACG,KAAR,CAAcC,QAAd,GAAyB,QAAzB;AACH;;AAEDJ,EAAAA,OAAO,CAACG,KAAR,CAAcI,UAAd,GAA2B,QAA3B;AAEA,MAAMS,UAAU,GAAGJ,IAAI,CAACC,GAAL,CAASb,OAAO,CAACc,YAAR,GAAuB,CAAhC,EAAmCjB,SAAS,GAAG,EAAH,GAAQ,EAApD,CAAnB;AAEAI,EAAAA,QAAQ,CAACQ,IAAT,CAAcQ,WAAd,CAA0BjB,OAA1B;AAEA,SAAO;AAAEkB,IAAAA,MAAM,EAAEP,YAAV;AAAwBQ,IAAAA,IAAI,EAAEH;AAA9B,GAAP;AACH,CAhCM","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"],"file":"utils.js"}
+{"version":3,"file":"utils.js","names":["getAccordionHeadHeight","_ref","isWrapped","title","width","element","document","createElement","style","fontSize","opacity","pointerEvents","whiteSpace","innerText","body","appendChild","closedHeight","Math","max","clientHeight","fontWeight","openHeight","removeChild","closed","open","exports"],"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,GAAGC,IAAA,IAI6B;EAAA,IAJ5B;IACnCC,SAAS;IACTC,KAAK;IACLC;EAC2B,CAAC,GAAAH,IAAA;EAC5B,MAAMI,OAAO,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAE7CF,OAAO,CAACG,KAAK,CAACC,QAAQ,GAAG,MAAM;EAC/BJ,OAAO,CAACG,KAAK,CAACE,OAAO,GAAG,GAAG;EAC3BL,OAAO,CAACG,KAAK,CAACG,aAAa,GAAG,MAAM;EACpCN,OAAO,CAACG,KAAK,CAACI,UAAU,GAAG,QAAQ;EACnCP,OAAO,CAACG,KAAK,CAACJ,KAAK,GAAI,GAAEA,KAAM,IAAG;EAElCC,OAAO,CAACQ,SAAS,GAAGV,KAAK;EAEzBG,QAAQ,CAACQ,IAAI,CAACC,WAAW,CAACV,OAAO,CAAC;EAElC,MAAMW,YAAY,GAAGC,IAAI,CAACC,GAAG,CAACb,OAAO,CAACc,YAAY,GAAG,CAAC,EAAEjB,SAAS,GAAG,EAAE,GAAG,EAAE,CAAC;EAE5E,IAAIA,SAAS,EAAE;IACXG,OAAO,CAACG,KAAK,CAACY,UAAU,GAAG,MAAM;EACrC,CAAC,MAAM;IACHf,OAAO,CAACG,KAAK,CAACC,QAAQ,GAAG,QAAQ;EACrC;EAEAJ,OAAO,CAACG,KAAK,CAACI,UAAU,GAAG,QAAQ;EAEnC,MAAMS,UAAU,GAAGJ,IAAI,CAACC,GAAG,CAACb,OAAO,CAACc,YAAY,GAAG,CAAC,EAAEjB,SAAS,GAAG,EAAE,GAAG,EAAE,CAAC;EAE1EI,QAAQ,CAACQ,IAAI,CAACQ,WAAW,CAACjB,OAAO,CAAC;EAElC,OAAO;IAAEkB,MAAM,EAAEP,YAAY;IAAEQ,IAAI,EAAEH;EAAW,CAAC;AACrD,CAAC;AAACI,OAAA,CAAAzB,sBAAA,GAAAA,sBAAA"}

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

@@ -1,5 +1,9 @@
 import { FC, ReactNode } from 'react';
-declare type BadgeProps = {
+export 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

@@ -4,24 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
-
+var _react = _interopRequireDefault(require("react"));
 var _Badge = require("./Badge.styles");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Badge = function Badge(_ref) {
-  var children = _ref.children,
-      className = _ref.className;
-  var badgeClasses = (0, _clsx.default)('beta-chayns-badge ellipsis', className);
+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, {
-    className: badgeClasses
+    backgroundColor: backgroundColor,
+    className: badgeClasses,
+    fontColor: fontColor
   }, children);
 };
-
 Badge.displayName = 'Badge';
 var _default = Badge;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/badge/Badge.tsx"],"names":["Badge","children","className","badgeClasses","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAaA,IAAMA,KAAqB,GAAG,SAAxBA,KAAwB,OAA6B;AAAA,MAA1BC,QAA0B,QAA1BA,QAA0B;AAAA,MAAhBC,SAAgB,QAAhBA,SAAgB;AACvD,MAAMC,YAAY,GAAG,mBAAK,4BAAL,EAAmCD,SAAnC,CAArB;AAEA,sBAAO,6BAAC,kBAAD;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 clsx from 'clsx';\nimport { StyledBadge } from './Badge.styles';\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 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":["_clsx","_interopRequireDefault","require","_react","_Badge","obj","__esModule","default","Badge","_ref","backgroundColor","children","className","fontColor","badgeClasses","clsx","createElement","StyledBadge","displayName","_default","exports"],"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,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAA6C,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAqB7C,MAAMG,KAAqB,GAAGC,IAAA,IAAyD;EAAA,IAAxD;IAAEC,eAAe;IAAEC,QAAQ;IAAEC,SAAS;IAAEC;EAAU,CAAC,GAAAJ,IAAA;EAC9E,MAAMK,YAAY,GAAG,IAAAC,aAAI,EAAC,4BAA4B,EAAEH,SAAS,CAAC;EAElE,oBACIT,MAAA,CAAAI,OAAA,CAAAS,aAAA,CAACZ,MAAA,CAAAa,WAAW;IACRP,eAAe,EAAEA,eAAgB;IACjCE,SAAS,EAAEE,YAAa;IACxBD,SAAS,EAAEA;EAAU,GAEpBF,QAAQ,CACC;AAEtB,CAAC;AAEDH,KAAK,CAACU,WAAW,GAAG,OAAO;AAAC,IAAAC,QAAA,GAEbX,KAAK;AAAAY,OAAA,CAAAb,OAAA,GAAAY,QAAA"}

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

@@ -1 +1,4 @@
-export declare const StyledBadge: import("styled-components").StyledComponent<"div", any, {}, never>;
+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

@@ -4,22 +4,29 @@ 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) } })); }
-
-var StyledBadge = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border-radius: 15px;\n    color: ", ";\n    font-size: 0.8rem;\n    min-width: 1.65rem;\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'];
-});
-
+const StyledBadge = _styledComponents.default.div`
+    background-color: ${_ref => {
+  let {
+    backgroundColor,
+    theme
+  } = _ref;
+  return backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme['secondary-202'];
+}};
+    border-radius: 15px;
+    color: ${_ref2 => {
+  let {
+    fontColor,
+    theme
+  } = _ref2;
+  return fontColor !== null && fontColor !== void 0 ? fontColor : theme['007'];
+}};
+    display: inline-block;
+    font-size: 0.8rem;
+    min-width: 1.65rem;
+    padding: 2px 7px;
+    text-align: center;
+`;
 exports.StyledBadge = StyledBadge;
 //# sourceMappingURL=Badge.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/badge/Badge.styles.ts"],"names":["StyledBadge","styled","div","theme"],"mappings":";;;;;;;AAAA;;;;;;;;AAEO,IAAMA,WAAW,GAAGC,0BAAOC,GAAV,kPACA;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,SAAeA,KAAK,CAAC,eAAD,CAApB;AAAA,CADA,EAGX;AAAA,MAAGA,KAAH,SAAGA,KAAH;AAAA,SAAeA,KAAK,CAAC,KAAD,CAApB;AAAA,CAHW,CAAjB","sourcesContent":["import styled from 'styled-components';\n\nexport const 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    min-width: 1.65rem;\n    padding: 2px 7px;\n    text-align: center;\n`;\n"],"file":"Badge.styles.js"}
+{"version":3,"file":"Badge.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledBadge","styled","div","_ref","backgroundColor","theme","_ref2","fontColor","exports"],"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,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAMhC,MAAMG,WAAW,GAAGC,yBAAM,CAACC,GAAsB;AACxD,wBAAwBC,IAAA;EAAA,IAAC;IAAEC,eAAe;IAAEC;EAAwB,CAAC,GAAAF,IAAA;EAAA,OAC7DC,eAAe,aAAfA,eAAe,cAAfA,eAAe,GAAIC,KAAK,CAAC,eAAe,CAAC;AAAA,CAAC;AAClD;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC,SAAS;IAAEF;EAAwB,CAAC,GAAAC,KAAA;EAAA,OAAKC,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIF,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACnF;AACA;AACA;AACA;AACA;AACA,CAAC;AAACG,OAAA,CAAAR,WAAA,GAAAA,WAAA"}

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

@@ -1,5 +1,5 @@
 import { FC, MouseEventHandler, ReactNode } from 'react';
-export declare type ButtonProps = {
+export type ButtonProps = {
     /**
      * The label of the button
      */
@@ -9,7 +9,7 @@ export 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

@@ -4,35 +4,28 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _clsx = _interopRequireDefault(require("clsx"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
-
 var _Button = require("./Button.styles");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Button = function Button(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      icon = _ref.icon,
-      isDisabled = _ref.isDisabled,
-      isSecondary = _ref.isSecondary,
-      onClick = _ref.onClick,
-      shouldStopPropagation = _ref.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();
     }
-
     onClick(event);
   };
-
-  var buttonClasses = (0, _clsx.default)('beta-chayns-button ellipsis', className);
+  const buttonClasses = (0, _clsx.default)('beta-chayns-button ellipsis', className);
   return /*#__PURE__*/_react.default.createElement(_Button.StyledButton, {
     className: buttonClasses,
     disabled: isDisabled,
@@ -44,7 +37,6 @@ var Button = function Button(_ref) {
     icons: [icon]
   })), children));
 };
-
 Button.displayName = 'Button';
 var _default = Button;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/button/Button.tsx"],"names":["Button","children","className","icon","isDisabled","isSecondary","onClick","shouldStopPropagation","handleClick","event","stopPropagation","buttonClasses","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AAiCA,IAAMA,MAAuB,GAAG,SAA1BA,MAA0B,OAQ1B;AAAA,MAPFC,QAOE,QAPFA,QAOE;AAAA,MANFC,SAME,QANFA,SAME;AAAA,MALFC,IAKE,QALFA,IAKE;AAAA,MAJFC,UAIE,QAJFA,UAIE;AAAA,MAHFC,WAGE,QAHFA,WAGE;AAAA,MAFFC,OAEE,QAFFA,OAEE;AAAA,MADFC,qBACE,QADFA,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,EAAoCT,SAApC,CAAtB;AAEA,sBACI,6BAAC,oBAAD;AACI,IAAA,SAAS,EAAES,aADf;AAEI,IAAA,QAAQ,EAAEP,UAFd;AAGI,IAAA,OAAO,EAAE,OAAOD,IAAP,KAAgB,QAAhB,IAA4BA,IAAI,KAAK,EAHlD;AAII,IAAA,WAAW,EAAEE,WAJjB;AAKI,IAAA,OAAO,EAAEG;AALb,kBAOI,4DACKL,IAAI,iBACD,6BAAC,yBAAD,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,CAACY,WAAP,GAAqB,QAArB;eAEeZ,M","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"],"file":"Button.js"}
+{"version":3,"file":"Button.js","names":["_clsx","_interopRequireDefault","require","_react","_Icon","_Button","obj","__esModule","default","Button","_ref","children","className","icon","isDisabled","isSecondary","onClick","shouldStopPropagation","handleClick","event","stopPropagation","buttonClasses","clsx","createElement","StyledButton","disabled","hasIcon","Fragment","StyledIconWrapper","color","icons","displayName","_default","exports"],"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,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,KAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAAkE,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAiClE,MAAMG,MAAuB,GAAGC,IAAA,IAQ1B;EAAA,IAR2B;IAC7BC,QAAQ;IACRC,SAAS;IACTC,IAAI;IACJC,UAAU;IACVC,WAAW;IACXC,OAAO;IACPC;EACJ,CAAC,GAAAP,IAAA;EACG,MAAMQ,WAAiD,GAAIC,KAAK,IAAK;IACjE,IAAIF,qBAAqB,EAAE;MACvBE,KAAK,CAACC,eAAe,EAAE;IAC3B;IAEAJ,OAAO,CAACG,KAAK,CAAC;EAClB,CAAC;EAED,MAAME,aAAa,GAAG,IAAAC,aAAI,EAAC,6BAA6B,EAAEV,SAAS,CAAC;EAEpE,oBACIT,MAAA,CAAAK,OAAA,CAAAe,aAAA,CAAClB,OAAA,CAAAmB,YAAY;IACTZ,SAAS,EAAES,aAAc;IACzBI,QAAQ,EAAEX,UAAW;IACrBY,OAAO,EAAE,OAAOb,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,EAAG;IACjDE,WAAW,EAAEA,WAAY;IACzBC,OAAO,EAAEE;EAAY,gBAErBf,MAAA,CAAAK,OAAA,CAAAe,aAAA,CAAApB,MAAA,CAAAK,OAAA,CAAAmB,QAAA,QACKd,IAAI,iBACDV,MAAA,CAAAK,OAAA,CAAAe,aAAA,CAAClB,OAAA,CAAAuB,iBAAiB,qBACdzB,MAAA,CAAAK,OAAA,CAAAe,aAAA,CAACnB,KAAA,CAAAI,OAAI;IAACqB,KAAK,EAAC,OAAO;IAACC,KAAK,EAAE,CAACjB,IAAI;EAAE,EAAG,CAE5C,EACAF,QAAQ,CACV,CACQ;AAEvB,CAAC;AAEDF,MAAM,CAACsB,WAAW,GAAG,QAAQ;AAAC,IAAAC,QAAA,GAEfvB,MAAM;AAAAwB,OAAA,CAAAzB,OAAA,GAAAwB,QAAA"}

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

@@ -1,5 +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>;