@chayns-components/core 5.0.0-beta.37 → 5.0.0-beta.372

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

@@ -3,43 +3,79 @@
 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 => {
+exports.StyledMotionWaitCursorWrapper = exports.StyledMotionChildrenWrapper = exports.StyledIconWrapper = exports.StyledButton = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledButton = exports.StyledButton = _styledComponents.default.button`
+    align-items: center;
+    background-color: ${_ref => {
   let {
     isSecondary,
     theme
   } = _ref;
   return isSecondary ? theme['202'] : theme['408'];
-}, _ref2 => {
+}};
+    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';
-}, _ref3 => {
+}};
+    cursor: pointer;
+    display: inline-flex;
+    line-height: 1.15;
+    min-height: 32px;
+    opacity: ${_ref3 => {
   let {
     disabled
   } = _ref3;
   return disabled ? 0.5 : 1;
-}, _ref4 => {
+}};
+    position: relative;
+    user-select: none;
+    transition: opacity 0.3s ease;
+
+    ${_ref4 => {
   let {
-    hasIcon
+    hasIcon,
+    hasChildren
   } = _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;
+  if (hasIcon) {
+    if (hasChildren) {
+      return (0, _styledComponents.css)`
+                    padding: 7px 12px 7px 42px;
+                `;
+    }
+    return (0, _styledComponents.css)`
+                padding: 7px 12px 7px 18px;
+            `;
+  }
+  return (0, _styledComponents.css)`
+            padding: 7px 12px 7px 12px;
+        `;
+}}
+`;
+const StyledIconWrapper = exports.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;
+`;
+const StyledMotionChildrenWrapper = exports.StyledMotionChildrenWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)``;
+const StyledMotionWaitCursorWrapper = exports.StyledMotionWaitCursorWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    align-items: center;
+    display: flex;
+    justify-content: center;
+`;
 //# sourceMappingURL=Button.styles.js.map

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

@@ -1 +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"}
+{"version":3,"file":"Button.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledButton","exports","styled","button","_ref","isSecondary","theme","_ref2","text","_ref3","disabled","_ref4","hasIcon","hasChildren","css","StyledIconWrapper","span","StyledMotionChildrenWrapper","motion","div","StyledMotionWaitCursorWrapper"],"sources":["../../../src/components/button/Button.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ButtonProps } from './Button';\n\ntype StyledButtonProps = ButtonProps &\n    WithTheme<{\n        hasIcon: boolean;\n        hasChildren: boolean;\n    }>;\n\nexport const StyledButton = styled.button<StyledButtonProps>`\n    align-items: center;\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-flex;\n    line-height: 1.15;\n    min-height: 32px;\n    opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};\n    position: relative;\n    user-select: none;\n    transition: opacity 0.3s ease;\n\n    ${({ hasIcon, hasChildren }) => {\n        if (hasIcon) {\n            if (hasChildren) {\n                return css`\n                    padding: 7px 12px 7px 42px;\n                `;\n            }\n            return css`\n                padding: 7px 12px 7px 18px;\n            `;\n        }\n        return css`\n            padding: 7px 12px 7px 12px;\n        `;\n    }}\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\nexport const StyledMotionChildrenWrapper = styled(motion.div)<FramerMotionBugFix>``;\n\nexport const StyledMotionWaitCursorWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    justify-content: center;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAF,wBAAAE,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAUzC,MAAMY,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAGE,yBAAM,CAACC,MAA0B;AAC7D;AACA,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;AACA;AACA;AACA;AACA,MAAMC,KAAA,IAA8B;EAAA,IAA7B;IAAEC,OAAO;IAAEC;EAAY,CAAC,GAAAF,KAAA;EACvB,IAAIC,OAAO,EAAE;IACT,IAAIC,WAAW,EAAE;MACb,OAAO,IAAAC,qBAAG,CAAC;AAC3B;AACA,iBAAiB;IACL;IACA,OAAO,IAAAA,qBAAG,CAAC;AACvB;AACA,aAAa;EACL;EACA,OAAO,IAAAA,qBAAG,CAAC;AACnB;AACA,SAAS;AACL,CAAE;AACN,CAAC;AAEM,MAAMC,iBAAiB,GAAAd,OAAA,CAAAc,iBAAA,GAAGb,yBAAM,CAACc,IAAK;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,2BAA2B,GAAAhB,OAAA,CAAAgB,2BAAA,GAAG,IAAAf,yBAAM,EAACgB,oBAAM,CAACC,GAAG,CAAsB,EAAC;AAE5E,MAAMC,6BAA6B,GAAAnB,OAAA,CAAAmB,6BAAA,GAAG,IAAAlB,yBAAM,EAACgB,oBAAM,CAACC,GAAG,CAAsB;AACpF;AACA;AACA;AACA,CAAC"}

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

@@ -1,9 +1,9 @@
-import { ChangeEventHandler, FC, ReactNode } from 'react';
-export declare type CheckboxProps = {
+import { ChangeEventHandler, FC, ReactElement } from 'react';
+export type CheckboxProps = {
     /**
      * Text for checkbox or switch
      */
-    children?: ReactNode;
+    children?: ReactElement;
     /**
      * Indicates whether the checkbox or switch is selected
      */
@@ -12,6 +12,10 @@ export declare type CheckboxProps = {
      * Disables the checkbox or switch so it cannot be toggled
      */
     isDisabled?: boolean;
+    /**
+     * Classname for the label
+     */
+    labelClassName?: string;
     /**
      * Function to be executed if the checked value changes
      */
@@ -20,6 +24,10 @@ export declare type CheckboxProps = {
      * Changes the design to use switch instead of checkbox
      */
     shouldShowAsSwitch?: boolean;
+    /**
+     * Whether the Checkbox should be displayed centered to the label or at the top
+     */
+    shouldShowCentered?: boolean;
 };
 declare const Checkbox: FC<CheckboxProps>;
 export default Checkbox;

package/lib/components/checkbox/Checkbox.js

@@ -4,34 +4,31 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _uuid = require("../../hooks/uuid");
-
+var _calculate = require("../../utils/calculate");
 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; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const Checkbox = _ref => {
   let {
     children,
     isChecked,
     isDisabled,
+    labelClassName,
     onChange,
-    shouldShowAsSwitch
+    shouldShowAsSwitch,
+    shouldShowCentered = false
   } = _ref;
-  const [isActive, setIsActive] = (0, _react.useState)(isChecked !== null && isChecked !== void 0 ? isChecked : false);
+  const [isActive, setIsActive] = (0, _react.useState)(isChecked ?? false);
   const handleChange = (0, _react.useCallback)(event => {
     setIsActive(event.target.checked);
-
     if (typeof onChange === 'function') {
       onChange(event);
     }
   }, [onChange]);
   const uuid = (0, _uuid.useUuid)();
+  const lineHeight = (0, _react.useMemo)(() => shouldShowCentered ? undefined : (0, _calculate.getHeightOfSingleTextLine)(), [shouldShowCentered]);
   return /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckbox, null, /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxInput, {
     checked: isChecked,
     disabled: isDisabled,
@@ -39,14 +36,14 @@ const Checkbox = _ref => {
     onChange: handleChange,
     type: "checkbox"
   }), /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxLabel, {
+    className: labelClassName,
     htmlFor: uuid,
-    isChecked: isChecked !== null && isChecked !== void 0 ? isChecked : isActive,
+    isChecked: isChecked ?? isActive,
     isDisabled: isDisabled,
-    shouldShowAsSwitch: shouldShowAsSwitch
+    shouldShowAsSwitch: shouldShowAsSwitch,
+    lineHeight: lineHeight
   }, children));
 };
-
 Checkbox.displayName = 'Checkbox';
-var _default = Checkbox;
-exports.default = _default;
+var _default = exports.default = Checkbox;
 //# sourceMappingURL=Checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["Checkbox","children","isChecked","isDisabled","onChange","shouldShowAsSwitch","isActive","setIsActive","useState","handleChange","useCallback","event","target","checked","uuid","useUuid","displayName"],"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":";;;;;;;AAAA;;AAQA;;AACA;;;;;;AAyBA,MAAMA,QAA2B,GAAG,QAM9B;EAAA,IAN+B;IACjCC,QADiC;IAEjCC,SAFiC;IAGjCC,UAHiC;IAIjCC,QAJiC;IAKjCC;EALiC,CAM/B;EACF,MAAM,CAACC,QAAD,EAAWC,WAAX,IAA0B,IAAAC,eAAA,EAASN,SAAT,aAASA,SAAT,cAASA,SAAT,GAAsB,KAAtB,CAAhC;EAEA,MAAMO,YAAY,GAAG,IAAAC,kBAAA,EAChBC,KAAD,IAA0C;IACtCJ,WAAW,CAACI,KAAK,CAACC,MAAN,CAAaC,OAAd,CAAX;;IAEA,IAAI,OAAOT,QAAP,KAAoB,UAAxB,EAAoC;MAChCA,QAAQ,CAACO,KAAD,CAAR;IACH;EACJ,CAPgB,EAQjB,CAACP,QAAD,CARiB,CAArB;EAWA,MAAMU,IAAI,GAAG,IAAAC,aAAA,GAAb;EAEA,oBACI,6BAAC,wBAAD,qBACI,6BAAC,6BAAD;IACI,OAAO,EAAEb,SADb;IAEI,QAAQ,EAAEC,UAFd;IAGI,EAAE,EAAEW,IAHR;IAII,QAAQ,EAAEL,YAJd;IAKI,IAAI,EAAC;EALT,EADJ,eAQI,6BAAC,6BAAD;IACI,OAAO,EAAEK,IADb;IAEI,SAAS,EAAEZ,SAAF,aAAEA,SAAF,cAAEA,SAAF,GAAeI,QAF5B;IAGI,UAAU,EAAEH,UAHhB;IAII,kBAAkB,EAAEE;EAJxB,GAMKJ,QANL,CARJ,CADJ;AAmBH,CAzCD;;AA2CAD,QAAQ,CAACgB,WAAT,GAAuB,UAAvB;eAEehB,Q"}
+{"version":3,"file":"Checkbox.js","names":["_react","_interopRequireWildcard","require","_uuid","_calculate","_Checkbox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Checkbox","_ref","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","shouldShowCentered","isActive","setIsActive","useState","handleChange","useCallback","event","target","checked","uuid","useUuid","lineHeight","useMemo","undefined","getHeightOfSingleTextLine","createElement","StyledCheckbox","StyledCheckboxInput","disabled","id","type","StyledCheckboxLabel","className","htmlFor","displayName","_default","exports"],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    ReactElement,\n    useCallback,\n    useMemo,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport { StyledCheckbox, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactElement;\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     * Classname for the label\n     */\n    labelClassName?: string;\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     * Whether the Checkbox should be displayed centered to the label or at the top\n     */\n    shouldShowCentered?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    labelClassName,\n    onChange,\n    shouldShowAsSwitch,\n    shouldShowCentered = false,\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    const lineHeight = useMemo(\n        () => (shouldShowCentered ? undefined : getHeightOfSingleTextLine()),\n        [shouldShowCentered],\n    );\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                className={labelClassName}\n                htmlFor={uuid}\n                isChecked={isChecked ?? isActive}\n                isDisabled={isDisabled}\n                shouldShowAsSwitch={shouldShowAsSwitch}\n                lineHeight={lineHeight}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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"}