@chayns-components/core 5.0.0-beta.18 → 5.0.0-beta.181

package/lib/components/amount-control/AmountControl.styles.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionAmountControlButton = exports.StyledAmountControlInput = exports.StyledAmountControl = void 0;
+var _framerMotion = require("framer-motion");
+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 StyledAmountControl = _styledComponents.default.div`
+    background-color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['202'];
+}};
+    display: flex;
+    width: fit-content;
+    border-radius: 3px;
+`;
+exports.StyledAmountControl = StyledAmountControl;
+const StyledAmountControlInput = _styledComponents.default.input`
+    background-color: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme['202'];
+}};
+    border: none;
+    height: 28px;
+    width: 95px;
+    text-align: center;
+    ${_ref3 => {
+  let {
+    displayState
+  } = _ref3;
+  return displayState !== 'normal' && (0, _styledComponents.css)`
+            border-bottom-right-radius: 3px;
+            border-top-right-radius: 3px;
+        `;
+}}
+`;
+exports.StyledAmountControlInput = StyledAmountControlInput;
+const StyledMotionAmountControlButton = (0, _styledComponents.default)(_framerMotion.motion.button)`
+    overflow: hidden;
+    background-color: rgba(255, 255, 255, 0.2);
+    height: 28px;
+    width: 40px;
+
+    ${_ref4 => {
+  let {
+    disabled
+  } = _ref4;
+  return disabled && (0, _styledComponents.css)`
+            opacity: 0.5;
+        `;
+}}
+`;
+exports.StyledMotionAmountControlButton = StyledMotionAmountControlButton;
+//# sourceMappingURL=AmountControl.styles.js.map

package/lib/components/amount-control/AmountControl.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmountControl.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","StyledAmountControl","styled","div","_ref","theme","exports","StyledAmountControlInput","input","_ref2","_ref3","displayState","css","StyledMotionAmountControlButton","motion","button","_ref4","disabled"],"sources":["../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<unknown>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n    background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n    display: flex;\n    width: fit-content;\n    border-radius: 3px;\n`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n    displayState: DisplayState;\n}>;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n    background-color: ${({ theme }: StyledAmountControlInputProps) => theme['202']};\n    border: none;\n    height: 28px;\n    width: 95px;\n    text-align: center;\n    ${({ displayState }) =>\n        displayState !== 'normal' &&\n        css`\n            border-bottom-right-radius: 3px;\n            border-top-right-radius: 3px;\n        `}\n`;\n\ntype StyledAmountControlButtonProps = WithTheme<{\n    disabled: boolean;\n}>;\n\nexport const StyledMotionAmountControlButton = styled(\n    motion.button\n)<StyledAmountControlButtonProps>`\n    overflow: hidden;\n    background-color: rgba(255, 255, 255, 0.2);\n    height: 28px;\n    width: 40px;\n\n    ${({ disabled }) =>\n        disabled &&\n        css`\n            opacity: 0.5;\n        `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAF,wBAAAM,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAMzC,MAAMW,mBAAmB,GAAGC,yBAAM,CAACC,GAA8B;AACxE,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC9E;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAL,mBAAA,GAAAA,mBAAA;AAMK,MAAMM,wBAAwB,GAAGL,yBAAM,CAACM,KAAqC;AACpF,wBAAwBC,KAAA;EAAA,IAAC;IAAEJ;EAAqC,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACnF;AACA;AACA;AACA;AACA,MAAMK,KAAA;EAAA,IAAC;IAAEC;EAAa,CAAC,GAAAD,KAAA;EAAA,OACfC,YAAY,KAAK,QAAQ,IACzB,IAAAC,qBAAG,CAAC;AACZ;AACA;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAACN,OAAA,CAAAC,wBAAA,GAAAA,wBAAA;AAMK,MAAMM,+BAA+B,GAAG,IAAAX,yBAAM,EACjDY,oBAAM,CAACC,MACX,CAAkC;AAClC;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAS,CAAC,GAAAD,KAAA;EAAA,OACXC,QAAQ,IACR,IAAAL,qBAAG,CAAC;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAACN,OAAA,CAAAO,+BAAA,GAAAA,+BAAA"}

package/lib/components/amount-control/utils/amountControl.d.ts

@@ -0,0 +1,7 @@
+interface CheckForValidAmount {
+    amount: number;
+    maxAmount?: number;
+    minAmount: number;
+}
+export declare const checkForValidAmount: ({ amount, maxAmount, minAmount }: CheckForValidAmount) => number;
+export {};

package/lib/components/amount-control/utils/amountControl.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkForValidAmount = void 0;
+const checkForValidAmount = _ref => {
+  let {
+    amount,
+    maxAmount,
+    minAmount
+  } = _ref;
+  if (maxAmount && amount > maxAmount) {
+    return maxAmount;
+  }
+  if (amount < minAmount) {
+    return minAmount;
+  }
+  return amount;
+};
+exports.checkForValidAmount = checkForValidAmount;
+//# sourceMappingURL=amountControl.js.map

package/lib/components/amount-control/utils/amountControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"amountControl.js","names":["checkForValidAmount","_ref","amount","maxAmount","minAmount","exports"],"sources":["../../../../src/components/amount-control/utils/amountControl.ts"],"sourcesContent":["interface CheckForValidAmount {\n    amount: number;\n    maxAmount?: number;\n    minAmount: number;\n}\n\nexport const checkForValidAmount = ({ amount, maxAmount, minAmount }: CheckForValidAmount) => {\n    if (maxAmount && amount > maxAmount) {\n        return maxAmount;\n    }\n\n    if (amount < minAmount) {\n        return minAmount;\n    }\n\n    return amount;\n};\n"],"mappings":";;;;;;AAMO,MAAMA,mBAAmB,GAAGC,IAAA,IAA2D;EAAA,IAA1D;IAAEC,MAAM;IAAEC,SAAS;IAAEC;EAA+B,CAAC,GAAAH,IAAA;EACrF,IAAIE,SAAS,IAAID,MAAM,GAAGC,SAAS,EAAE;IACjC,OAAOA,SAAS;EACpB;EAEA,IAAID,MAAM,GAAGE,SAAS,EAAE;IACpB,OAAOA,SAAS;EACpB;EAEA,OAAOF,MAAM;AACjB,CAAC;AAACG,OAAA,CAAAL,mBAAA,GAAAA,mBAAA"}

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,QACQ,CAAC;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;;;;;;;;AAKO,IAAMA,WAAW,GAAGC,0BAAOC,GAAV,kPACA;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,SAAiCA,KAAK,CAAC,eAAD,CAAtC;AAAA,CADA,EAGX;AAAA,MAAGA,KAAH,SAAGA,KAAH;AAAA,SAAiCA,KAAK,CAAC,KAAD,CAAtC;AAAA,CAHW,CAAjB","sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledBadgeProps = WithTheme<unknown>;\n\nexport const StyledBadge = styled.div`\n    background-color: ${({ theme }: StyledBadgeProps) => theme['secondary-202']};\n    border-radius: 15px;\n    color: ${({ theme }: StyledBadgeProps) => 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,CAAC,CAAC;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,CAAE,CACrB,CACtB,EACAF,QACH,CACQ,CAAC;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.js

@@ -4,34 +4,57 @@ 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) } })); }
-
-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;
+const StyledButton = _styledComponents.default.button`
+    background-color: ${_ref => {
+  let {
+    isSecondary,
+    theme
+  } = _ref;
   return isSecondary ? theme['202'] : theme['408'];
-}, function (_ref2) {
-  var isSecondary = _ref2.isSecondary,
-      theme = _ref2.theme;
+}};
+    border-radius: 3px;
+    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
+    border: none;
+    color: ${_ref2 => {
+  let {
+    isSecondary,
+    theme
+  } = _ref2;
   return isSecondary ? theme.text : 'white';
-}, function (_ref3) {
-  var disabled = _ref3.disabled;
+}};
+    cursor: pointer;
+    display: inline-block;
+    line-height: 1.15;
+    min-height: 30px;
+    opacity: ${_ref3 => {
+  let {
+    disabled
+  } = _ref3;
   return disabled ? 0.5 : 1;
-}, function (_ref4) {
-  var hasIcon = _ref4.hasIcon;
-  return "7px 12px 7px ".concat(hasIcon ? '42px' : '12px');
-});
-
+}};
+    padding: ${_ref4 => {
+  let {
+    hasIcon
+  } = _ref4;
+  return `7px 12px 7px ${hasIcon ? '42px' : '12px'}`;
+}};
+    position: relative;
+    user-select: none;
+    transition: opacity 0.3s ease;
+`;
 exports.StyledButton = StyledButton;
-
-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"])));
-
+const StyledIconWrapper = _styledComponents.default.span`
+    align-items: center;
+    background-color: rgba(255, 255, 255, 0.2);
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 30px;
+`;
 exports.StyledIconWrapper = StyledIconWrapper;
 //# sourceMappingURL=Button.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/button/Button.styles.ts"],"names":["StyledButton","styled","button","isSecondary","theme","text","disabled","hasIcon","StyledIconWrapper","span"],"mappings":";;;;;;;AAAA;;;;;;;;AASO,IAAMA,YAAY,GAAGC,0BAAOC,MAAV,kbACD;AAAA,MAAGC,WAAH,QAAGA,WAAH;AAAA,MAAgBC,KAAhB,QAAgBA,KAAhB;AAAA,SAChBD,WAAW,GAAGC,KAAK,CAAC,KAAD,CAAR,GAAkBA,KAAK,CAAC,KAAD,CADlB;AAAA,CADC,EAMZ;AAAA,MAAGD,WAAH,SAAGA,WAAH;AAAA,MAAgBC,KAAhB,SAAgBA,KAAhB;AAAA,SAAgDD,WAAW,GAAGC,KAAK,CAACC,IAAT,GAAgB,OAA3E;AAAA,CANY,EAWV;AAAA,MAAGC,QAAH,SAAGA,QAAH;AAAA,SAAmBA,QAAQ,GAAG,GAAH,GAAS,CAApC;AAAA,CAXU,EAYV;AAAA,MAAGC,OAAH,SAAGA,OAAH;AAAA,gCAAiCA,OAAO,GAAG,MAAH,GAAY,MAApD;AAAA,CAZU,CAAlB;;;;AAkBA,IAAMC,iBAAiB,GAAGP,0BAAOQ,IAAV,4RAAvB","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"],"file":"Button.styles.js"}
+{"version":3,"file":"Button.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledButton","styled","button","_ref","isSecondary","theme","_ref2","text","_ref3","disabled","_ref4","hasIcon","exports","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,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAShC,MAAMG,YAAY,GAAGC,yBAAM,CAACC,MAA0B;AAC7D,wBAAwBC,IAAA;EAAA,IAAC;IAAEC,WAAW;IAAEC;EAAyB,CAAC,GAAAF,IAAA;EAAA,OAC1DC,WAAW,GAAGC,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAClD;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEF,WAAW;IAAEC;EAAyB,CAAC,GAAAC,KAAA;EAAA,OAAMF,WAAW,GAAGC,KAAK,CAACE,IAAI,GAAG,OAAO;AAAA,CAAE;AACjG;AACA;AACA;AACA;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEC;EAAS,CAAC,GAAAD,KAAA;EAAA,OAAMC,QAAQ,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AACtD,eAAeC,KAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,KAAA;EAAA,OAAM,gBAAeC,OAAO,GAAG,MAAM,GAAG,MAAO,EAAC;AAAA,CAAC;AAC5E;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAZ,YAAA,GAAAA,YAAA;AAEK,MAAMa,iBAAiB,GAAGZ,yBAAM,CAACa,IAAK;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACF,OAAA,CAAAC,iBAAA,GAAAA,iBAAA"}

package/lib/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,25 @@
+import { ChangeEventHandler, FC, ReactNode } from 'react';
+export type CheckboxProps = {
+    /**
+     * Text for checkbox or switch
+     */
+    children?: ReactNode;
+    /**
+     * Indicates whether the checkbox or switch is selected
+     */
+    isChecked?: boolean;
+    /**
+     * Disables the checkbox or switch so it cannot be toggled
+     */
+    isDisabled?: boolean;
+    /**
+     * Function to be executed if the checked value changes
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Changes the design to use switch instead of checkbox
+     */
+    shouldShowAsSwitch?: boolean;
+};
+declare const Checkbox: FC<CheckboxProps>;
+export default Checkbox;

package/lib/components/checkbox/Checkbox.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _uuid = require("../../hooks/uuid");
+var _Checkbox = require("./Checkbox.styles");
+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 Checkbox = _ref => {
+  let {
+    children,
+    isChecked,
+    isDisabled,
+    onChange,
+    shouldShowAsSwitch
+  } = _ref;
+  const [isActive, setIsActive] = (0, _react.useState)(isChecked !== null && isChecked !== void 0 ? isChecked : false);
+  const handleChange = (0, _react.useCallback)(event => {
+    setIsActive(event.target.checked);
+    if (typeof onChange === 'function') {
+      onChange(event);
+    }
+  }, [onChange]);
+  const uuid = (0, _uuid.useUuid)();
+  return /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckbox, null, /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxInput, {
+    checked: isChecked,
+    disabled: isDisabled,
+    id: uuid,
+    onChange: handleChange,
+    type: "checkbox"
+  }), /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxLabel, {
+    htmlFor: uuid,
+    isChecked: isChecked !== null && isChecked !== void 0 ? isChecked : isActive,
+    isDisabled: isDisabled,
+    shouldShowAsSwitch: shouldShowAsSwitch
+  }, children));
+};
+Checkbox.displayName = 'Checkbox';
+var _default = Checkbox;
+exports.default = _default;
+//# sourceMappingURL=Checkbox.js.map

package/lib/components/checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","names":["_react","_interopRequireWildcard","require","_uuid","_Checkbox","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Checkbox","_ref","children","isChecked","isDisabled","onChange","shouldShowAsSwitch","isActive","setIsActive","useState","handleChange","useCallback","event","target","checked","uuid","useUuid","createElement","StyledCheckbox","StyledCheckboxInput","disabled","id","type","StyledCheckboxLabel","htmlFor","displayName","_default","exports"],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    ReactNode,\n    useCallback,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { StyledCheckbox, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactNode;\n    /**\n     * Indicates whether the checkbox or switch is selected\n     */\n    isChecked?: boolean;\n    /**\n     * Disables the checkbox or switch so it cannot be toggled\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed if the checked value changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    onChange,\n    shouldShowAsSwitch,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setIsActive(event.target.checked);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [onChange]\n    );\n\n    const uuid = useUuid();\n\n    return (\n        <StyledCheckbox>\n            <StyledCheckboxInput\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n            <StyledCheckboxLabel\n                htmlFor={uuid}\n                isChecked={isChecked ?? isActive}\n                isDisabled={isDisabled}\n                shouldShowAsSwitch={shouldShowAsSwitch}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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"}

package/lib/components/checkbox/Checkbox.styles.d.ts

@@ -0,0 +1,6 @@
+import type { CheckboxProps } from './Checkbox';
+export declare const StyledCheckbox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledCheckboxInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const StyledCheckboxLabel: import("styled-components").StyledComponent<"label", any, Omit<CheckboxProps, "children" | "onChange"> & {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;