@chayns-components/core 5.0.0-beta.12 → 5.0.0-beta.1200

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

@@ -0,0 +1,157 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("motion/react");
+var _react2 = _interopRequireWildcard(require("react"));
+var _styledComponents = require("styled-components");
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
+var _Button = require("./Button.styles");
+var _WaitCursor = _interopRequireDefault(require("./wait-cursor/WaitCursor"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Button = ({
+  children,
+  className,
+  icon,
+  isDisabled,
+  isSecondary,
+  onClick,
+  shouldShowWaitCursor,
+  shouldStopPropagation,
+  shouldShowAsSelectButton = false,
+  shouldShowTextAsRobotoMedium = true
+}) => {
+  const handleClick = event => {
+    if (shouldStopPropagation) {
+      event.stopPropagation();
+    }
+    onClick(event);
+  };
+  const buttonClasses = (0, _clsx.default)('beta-chayns-button ellipsis', className);
+  const theme = (0, _styledComponents.useTheme)();
+  const iconColor = (0, _react2.useMemo)(() => {
+    if (isSecondary) {
+      return theme.text;
+    }
+    return theme.buttonDesign === '2' ? theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white' : theme.buttonColor ?? 'white';
+  }, [isSecondary, theme.buttonBackgroundColor, theme.buttonColor, theme.buttonDesign, theme.text]);
+  const backgroundColor = (0, _react2.useMemo)(() => {
+    let color;
+    if (isSecondary || shouldShowAsSelectButton) {
+      color = theme['202'];
+    } else {
+      color = theme.buttonBackgroundColor ?? theme['408'];
+    }
+    if (theme.buttonDesign === '2') {
+      color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;
+    }
+    return color;
+  }, [isSecondary, shouldShowAsSelectButton, theme]);
+  const tapStyles = (0, _react2.useMemo)(() => {
+    if (theme.buttonDesign === '2') {
+      return {
+        backgroundColor: isSecondary || shouldShowAsSelectButton ? `rgba(${theme['202-rgb'] ?? ''}, 0.7)` : `${theme.buttonBackgroundColor ?? ''}40`
+      };
+    }
+    return {
+      opacity: 0.6
+    };
+  }, [isSecondary, shouldShowAsSelectButton, theme]);
+  const hoverStyles = (0, _react2.useMemo)(() => {
+    if (theme.buttonDesign === '2') {
+      return {
+        backgroundColor: `rgba(${theme['102-rgb'] ?? ''}, 0.5)`
+      };
+    }
+    return {
+      opacity: 1
+    };
+  }, [theme]);
+  return /*#__PURE__*/_react2.default.createElement(_Button.StyledMotionButton, {
+    $shouldShowTextAsRobotoMedium: shouldShowTextAsRobotoMedium,
+    $shouldShowAsSelectButton: shouldShowAsSelectButton,
+    $shouldShowWaitCursor: shouldShowWaitCursor,
+    className: buttonClasses,
+    disabled: isDisabled,
+    $isDisabled: isDisabled,
+    $hasChildren: !!children,
+    $hasIcon: typeof icon === 'string' && icon !== '',
+    $isSecondary: isSecondary,
+    onClick: handleClick,
+    style: {
+      visibility: !backgroundColor ? 'hidden' : 'visible',
+      backgroundColor
+    },
+    initial: {
+      opacity: 0.5
+    },
+    animate: {
+      opacity: isDisabled ? 0.5 : 1
+    },
+    transition: {
+      visibility: {
+        duration: 0
+      }
+    },
+    whileTap: isDisabled ? {} : {
+      ...tapStyles
+    },
+    whileHover: isDisabled ? {} : {
+      ...hoverStyles
+    }
+  }, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
+    initial: false
+  }, icon && /*#__PURE__*/_react2.default.createElement(_Button.StyledIconWrapper, null, /*#__PURE__*/_react2.default.createElement(_Icon.default, {
+    color: iconColor,
+    icons: [icon]
+  })), shouldShowWaitCursor && /*#__PURE__*/_react2.default.createElement(_Button.StyledMotionWaitCursorWrapper, {
+    animate: {
+      opacity: 1,
+      width: 40
+    },
+    exit: {
+      opacity: 0,
+      width: 0
+    },
+    initial: {
+      opacity: 0,
+      width: 0
+    },
+    key: "wait-cursor",
+    style: {
+      overflow: 'hidden'
+    },
+    transition: {
+      duration: 0.2
+    }
+  }, /*#__PURE__*/_react2.default.createElement(_WaitCursor.default, {
+    color: iconColor ?? 'white',
+    shouldHideBackground: true
+  })), !shouldShowWaitCursor && children && /*#__PURE__*/_react2.default.createElement(_Button.StyledMotionChildrenWrapper, {
+    animate: {
+      opacity: 1,
+      width: 'auto'
+    },
+    exit: {
+      opacity: 0,
+      width: 0
+    },
+    initial: {
+      opacity: 0,
+      width: 0
+    },
+    key: "children"
+    // style={{ overflow: 'hidden' }}
+    ,
+    transition: {
+      duration: 0.2
+    }
+  }, children)));
+};
+Button.displayName = 'Button';
+var _default = exports.default = Button;
+//# sourceMappingURL=Button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","names":["_clsx","_interopRequireDefault","require","_react","_react2","_interopRequireWildcard","_styledComponents","_Icon","_Button","_WaitCursor","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Button","children","className","icon","isDisabled","isSecondary","onClick","shouldShowWaitCursor","shouldStopPropagation","shouldShowAsSelectButton","shouldShowTextAsRobotoMedium","handleClick","event","stopPropagation","buttonClasses","clsx","theme","useTheme","iconColor","useMemo","text","buttonDesign","buttonColor","buttonBackgroundColor","backgroundColor","color","tapStyles","opacity","hoverStyles","createElement","StyledMotionButton","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","$shouldShowWaitCursor","disabled","$isDisabled","$hasChildren","$hasIcon","$isSecondary","style","visibility","initial","animate","transition","duration","whileTap","whileHover","AnimatePresence","StyledIconWrapper","icons","StyledMotionWaitCursorWrapper","width","exit","key","overflow","shouldHideBackground","StyledMotionChildrenWrapper","displayName","_default","exports"],"sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEventHandler, ReactNode, useMemo } from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledIconWrapper,\n    StyledMotionButton,\n    StyledMotionChildrenWrapper,\n    StyledMotionWaitCursorWrapper,\n} from './Button.styles';\nimport WaitCursor from './wait-cursor/WaitCursor';\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     * Whether the button is disabled and 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     * Whether the button should be displayed as a selectButton.\n     */\n    shouldShowAsSelectButton?: boolean;\n    /**\n     * Whether the text should be 'Roboto Medium'\n     */\n    shouldShowTextAsRobotoMedium?: boolean;\n    /**\n     * Shows a wait cursor instead of button text\n     */\n    shouldShowWaitCursor?: boolean;\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    shouldShowWaitCursor,\n    shouldStopPropagation,\n    shouldShowAsSelectButton = false,\n    shouldShowTextAsRobotoMedium = true,\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    const theme = useTheme() as Theme;\n\n    const iconColor = useMemo(() => {\n        if (isSecondary) {\n            return theme.text;\n        }\n\n        return theme.buttonDesign === '2'\n            ? (theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white')\n            : (theme.buttonColor ?? 'white');\n    }, [\n        isSecondary,\n        theme.buttonBackgroundColor,\n        theme.buttonColor,\n        theme.buttonDesign,\n        theme.text,\n    ]);\n\n    const backgroundColor = useMemo(() => {\n        let color;\n\n        if (isSecondary || shouldShowAsSelectButton) {\n            color = theme['202'];\n        } else {\n            color = theme.buttonBackgroundColor ?? theme['408'];\n        }\n\n        if (theme.buttonDesign === '2') {\n            color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;\n        }\n\n        return color;\n    }, [isSecondary, shouldShowAsSelectButton, theme]);\n\n    const tapStyles = useMemo(() => {\n        if (theme.buttonDesign === '2') {\n            return {\n                backgroundColor:\n                    isSecondary || shouldShowAsSelectButton\n                        ? `rgba(${theme['202-rgb'] ?? ''}, 0.7)`\n                        : `${theme.buttonBackgroundColor ?? ''}40`,\n            };\n        }\n\n        return { opacity: 0.6 };\n    }, [isSecondary, shouldShowAsSelectButton, theme]);\n\n    const hoverStyles = useMemo(() => {\n        if (theme.buttonDesign === '2') {\n            return { backgroundColor: `rgba(${theme['102-rgb'] ?? ''}, 0.5)` };\n        }\n\n        return { opacity: 1 };\n    }, [theme]);\n\n    return (\n        <StyledMotionButton\n            $shouldShowTextAsRobotoMedium={shouldShowTextAsRobotoMedium}\n            $shouldShowAsSelectButton={shouldShowAsSelectButton}\n            $shouldShowWaitCursor={shouldShowWaitCursor}\n            className={buttonClasses}\n            disabled={isDisabled}\n            $isDisabled={isDisabled}\n            $hasChildren={!!children}\n            $hasIcon={typeof icon === 'string' && icon !== ''}\n            $isSecondary={isSecondary}\n            onClick={handleClick}\n            style={{ visibility: !backgroundColor ? 'hidden' : 'visible', backgroundColor }}\n            initial={{ opacity: 0.5 }}\n            animate={{\n                opacity: isDisabled ? 0.5 : 1,\n            }}\n            transition={{ visibility: { duration: 0 } }}\n            whileTap={isDisabled ? {} : { ...tapStyles }}\n            whileHover={isDisabled ? {} : { ...hoverStyles }}\n        >\n            <AnimatePresence initial={false}>\n                {icon && (\n                    <StyledIconWrapper>\n                        <Icon color={iconColor} icons={[icon]} />\n                    </StyledIconWrapper>\n                )}\n                {shouldShowWaitCursor && (\n                    <StyledMotionWaitCursorWrapper\n                        animate={{ opacity: 1, width: 40 }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"wait-cursor\"\n                        style={{ overflow: 'hidden' }}\n                        transition={{ duration: 0.2 }}\n                    >\n                        <WaitCursor color={iconColor ?? 'white'} shouldHideBackground />\n                    </StyledMotionWaitCursorWrapper>\n                )}\n                {!shouldShowWaitCursor && children && (\n                    <StyledMotionChildrenWrapper\n                        animate={{ opacity: 1, width: 'auto' }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"children\"\n                        // style={{ overflow: 'hidden' }}\n                        transition={{ duration: 0.2 }}\n                    >\n                        {children}\n                    </StyledMotionChildrenWrapper>\n                )}\n            </AnimatePresence>\n        </StyledMotionButton>\n    );\n};\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionWaitCursorWrapper = exports.StyledMotionChildrenWrapper = exports.StyledMotionButton = exports.StyledIconWrapper = void 0;
+var _react = require("motion/react");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const StyledMotionButton = exports.StyledMotionButton = (0, _styledComponents.default)(_react.motion.button)`
+    ${({
+  $shouldShowTextAsRobotoMedium,
+  $shouldShowAsSelectButton
+}) => $shouldShowTextAsRobotoMedium && !$shouldShowAsSelectButton && (0, _styledComponents.css)`
+            font-size: 110%;
+            font-family: 'Roboto Medium', serif;
+        `}
+
+    align-items: center;
+
+    ${({
+  $isSecondary,
+  $shouldShowAsSelectButton,
+  theme
+}) => {
+  if ($isSecondary || $shouldShowAsSelectButton) {
+    return (0, _styledComponents.css)`
+                color: ${theme.text};
+            `;
+  }
+  return (0, _styledComponents.css)`
+            color: ${theme.buttonDesign === '2' ? theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white' : theme.buttonColor ?? 'white'};
+        `;
+}}
+
+    ${({
+  theme,
+  $isSecondary,
+  $shouldShowAsSelectButton
+}) => {
+  if (theme.buttonDesign === '2' && !$shouldShowAsSelectButton) {
+    return (0, _styledComponents.css)`
+                border: 1px solid ${$isSecondary ? theme['202'] : theme.buttonBackgroundColor};
+                box-shadow: none;
+            `;
+  }
+  return (0, _styledComponents.css)`
+            border: none;
+            box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
+        `;
+}}
+
+    border-radius: 3px;
+    cursor: ${({
+  $isDisabled
+}) => $isDisabled ? 'default' : 'pointer'};
+    display: inline-flex;
+    flex: 0 0 auto;
+    line-height: 22px;
+    min-height: 32px;
+    position: relative;
+    user-select: none;
+    width: fit-content;
+
+    ${({
+  $hasIcon,
+  $hasChildren,
+  $shouldShowWaitCursor
+}) => {
+  if ($shouldShowWaitCursor) {
+    return (0, _styledComponents.css)`
+                padding: 4px 12px;
+            `;
+  }
+  if ($hasIcon) {
+    if ($hasChildren) {
+      return (0, _styledComponents.css)`
+                    padding: 6px 12px 6px 42px;
+                `;
+    }
+    return (0, _styledComponents.css)`
+                padding: 6px 12px 6px 18px;
+            `;
+  }
+  return (0, _styledComponents.css)`
+            padding: 6px 12px 6px 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)(_react.motion.div)`
+    will-change: unset !important;
+`;
+const StyledMotionWaitCursorWrapper = exports.StyledMotionWaitCursorWrapper = (0, _styledComponents.default)(_react.motion.div)`
+    align-items: center;
+    display: flex;
+    justify-content: center;
+`;
+//# sourceMappingURL=Button.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionButton","exports","styled","motion","button","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","css","$isSecondary","theme","text","buttonDesign","buttonColor","buttonBackgroundColor","$isDisabled","$hasIcon","$hasChildren","$shouldShowWaitCursor","StyledIconWrapper","span","StyledMotionChildrenWrapper","div","StyledMotionWaitCursorWrapper"],"sources":["../../../../src/components/button/Button.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledButtonProps = WithTheme<{\n    $hasIcon: boolean;\n    $hasChildren: boolean;\n    $isDisabled?: boolean;\n    $isSecondary?: boolean;\n    $shouldShowTextAsRobotoMedium: boolean;\n    $shouldShowAsSelectButton: boolean;\n    $shouldShowWaitCursor?: boolean;\n}>;\n\nexport const StyledMotionButton = styled(motion.button)<StyledButtonProps>`\n    ${({ $shouldShowTextAsRobotoMedium, $shouldShowAsSelectButton }) =>\n        $shouldShowTextAsRobotoMedium &&\n        !$shouldShowAsSelectButton &&\n        css`\n            font-size: 110%;\n            font-family: 'Roboto Medium', serif;\n        `}\n\n    align-items: center;\n\n    ${({ $isSecondary, $shouldShowAsSelectButton, theme }: StyledButtonProps) => {\n        if ($isSecondary || $shouldShowAsSelectButton) {\n            return css`\n                color: ${theme.text};\n            `;\n        }\n\n        return css`\n            color: ${theme.buttonDesign === '2'\n                ? (theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white')\n                : (theme.buttonColor ?? 'white')};\n        `;\n    }}\n\n    ${({ theme, $isSecondary, $shouldShowAsSelectButton }: StyledButtonProps) => {\n        if (theme.buttonDesign === '2' && !$shouldShowAsSelectButton) {\n            return css`\n                border: 1px solid ${$isSecondary ? theme['202'] : theme.buttonBackgroundColor};\n                box-shadow: none;\n            `;\n        }\n\n        return css`\n            border: none;\n            box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);\n        `;\n    }}\n\n    border-radius: 3px;\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    display: inline-flex;\n    flex: 0 0 auto;\n    line-height: 22px;\n    min-height: 32px;\n    position: relative;\n    user-select: none;\n    width: fit-content;\n\n    ${({ $hasIcon, $hasChildren, $shouldShowWaitCursor }) => {\n        if ($shouldShowWaitCursor) {\n            return css`\n                padding: 4px 12px;\n            `;\n        }\n\n        if ($hasIcon) {\n            if ($hasChildren) {\n                return css`\n                    padding: 6px 12px 6px 42px;\n                `;\n            }\n            return css`\n                padding: 6px 12px 6px 18px;\n            `;\n        }\n        return css`\n            padding: 6px 12px 6px 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)`\n    will-change: unset !important;\n`;\n\nexport const StyledMotionWaitCursorWrapper = styled(motion.div)`\n    align-items: center;\n    display: flex;\n    justify-content: center;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAE,wBAAAC,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAH,uBAAA,YAAAA,CAAAC,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAazC,MAAMkB,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAG,IAAAE,yBAAM,EAACC,aAAM,CAACC,MAAM,CAAoB;AAC1E,MAAM,CAAC;EAAEC,6BAA6B;EAAEC;AAA0B,CAAC,KAC3DD,6BAA6B,IAC7B,CAACC,yBAAyB,IAC1B,IAAAC,qBAAG;AACX;AACA;AACA,SAAS;AACT;AACA;AACA;AACA,MAAM,CAAC;EAAEC,YAAY;EAAEF,yBAAyB;EAAEG;AAAyB,CAAC,KAAK;EACzE,IAAID,YAAY,IAAIF,yBAAyB,EAAE;IAC3C,OAAO,IAAAC,qBAAG;AACtB,yBAAyBE,KAAK,CAACC,IAAI;AACnC,aAAa;EACL;EAEA,OAAO,IAAAH,qBAAG;AAClB,qBAAqBE,KAAK,CAACE,YAAY,KAAK,GAAG,GAC5BF,KAAK,CAACG,WAAW,IAAIH,KAAK,CAACI,qBAAqB,IAAI,OAAO,GAC3DJ,KAAK,CAACG,WAAW,IAAI,OAAQ;AAChD,SAAS;AACL,CAAC;AACL;AACA,MAAM,CAAC;EAAEH,KAAK;EAAED,YAAY;EAAEF;AAA6C,CAAC,KAAK;EACzE,IAAIG,KAAK,CAACE,YAAY,KAAK,GAAG,IAAI,CAACL,yBAAyB,EAAE;IAC1D,OAAO,IAAAC,qBAAG;AACtB,oCAAoCC,YAAY,GAAGC,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAACI,qBAAqB;AAC7F;AACA,aAAa;EACL;EAEA,OAAO,IAAAN,qBAAG;AAClB;AACA;AACA,SAAS;AACL,CAAC;AACL;AACA;AACA,cAAc,CAAC;EAAEO;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC,QAAQ;EAAEC,YAAY;EAAEC;AAAsB,CAAC,KAAK;EACrD,IAAIA,qBAAqB,EAAE;IACvB,OAAO,IAAAV,qBAAG;AACtB;AACA,aAAa;EACL;EAEA,IAAIQ,QAAQ,EAAE;IACV,IAAIC,YAAY,EAAE;MACd,OAAO,IAAAT,qBAAG;AAC1B;AACA,iBAAiB;IACL;IACA,OAAO,IAAAA,qBAAG;AACtB;AACA,aAAa;EACL;EACA,OAAO,IAAAA,qBAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL,CAAC;AAEM,MAAMW,iBAAiB,GAAAjB,OAAA,CAAAiB,iBAAA,GAAGhB,yBAAM,CAACiB,IAAI;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,2BAA2B,GAAAnB,OAAA,CAAAmB,2BAAA,GAAG,IAAAlB,yBAAM,EAACC,aAAM,CAACkB,GAAG,CAAC;AAC7D;AACA,CAAC;AAEM,MAAMC,6BAA6B,GAAArB,OAAA,CAAAqB,6BAAA,GAAG,IAAApB,yBAAM,EAACC,aAAM,CAACkB,GAAG,CAAC;AAC/D;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/button/wait-cursor/WaitCursor.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _WaitCursor = require("./WaitCursor.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const WaitCursor = ({
+  color,
+  shouldHideBackground = false,
+  shouldHideWaitCursor = false
+}) => /*#__PURE__*/_react.default.createElement(_WaitCursor.StyledWaitCursor, {
+  $shouldShowWaitCursor: !shouldHideWaitCursor
+}, /*#__PURE__*/_react.default.createElement(_WaitCursor.StyledWaitCursorWaitCursor, {
+  $color: color
+}), !shouldHideBackground && /*#__PURE__*/_react.default.createElement(_WaitCursor.StyledWaitCursorBackground, null));
+WaitCursor.displayName = 'WaitCursor';
+var _default = exports.default = WaitCursor;
+//# sourceMappingURL=WaitCursor.js.map

package/lib/cjs/components/button/wait-cursor/WaitCursor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WaitCursor.js","names":["_react","_interopRequireDefault","require","_WaitCursor","e","__esModule","default","WaitCursor","color","shouldHideBackground","shouldHideWaitCursor","createElement","StyledWaitCursor","$shouldShowWaitCursor","StyledWaitCursorWaitCursor","$color","StyledWaitCursorBackground","displayName","_default","exports"],"sources":["../../../../../src/components/button/wait-cursor/WaitCursor.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport {\n    StyledWaitCursor,\n    StyledWaitCursorBackground,\n    StyledWaitCursorWaitCursor,\n} from './WaitCursor.styles';\n\nexport type WaitCursorProps = {\n    color: string;\n    shouldHideBackground?: boolean;\n    shouldHideWaitCursor?: boolean;\n};\n\nconst WaitCursor: FC<WaitCursorProps> = ({\n    color,\n    shouldHideBackground = false,\n    shouldHideWaitCursor = false,\n}) => (\n    <StyledWaitCursor $shouldShowWaitCursor={!shouldHideWaitCursor}>\n        <StyledWaitCursorWaitCursor $color={color} />\n        {!shouldHideBackground && <StyledWaitCursorBackground />}\n    </StyledWaitCursor>\n);\n\nWaitCursor.displayName = 'WaitCursor';\n\nexport default WaitCursor;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAI6B,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAQ7B,MAAMG,UAA+B,GAAGA,CAAC;EACrCC,KAAK;EACLC,oBAAoB,GAAG,KAAK;EAC5BC,oBAAoB,GAAG;AAC3B,CAAC,kBACGV,MAAA,CAAAM,OAAA,CAAAK,aAAA,CAACR,WAAA,CAAAS,gBAAgB;EAACC,qBAAqB,EAAE,CAACH;AAAqB,gBAC3DV,MAAA,CAAAM,OAAA,CAAAK,aAAA,CAACR,WAAA,CAAAW,0BAA0B;EAACC,MAAM,EAAEP;AAAM,CAAE,CAAC,EAC5C,CAACC,oBAAoB,iBAAIT,MAAA,CAAAM,OAAA,CAAAK,aAAA,CAACR,WAAA,CAAAa,0BAA0B,MAAE,CACzC,CACrB;AAEDT,UAAU,CAACU,WAAW,GAAG,YAAY;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAb,OAAA,GAEvBC,UAAU","ignoreList":[]}

package/lib/cjs/components/button/wait-cursor/WaitCursor.styles.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledWaitCursorWaitCursor = exports.StyledWaitCursorBackground = exports.StyledWaitCursor = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const StyledWaitCursor = exports.StyledWaitCursor = _styledComponents.default.div`
+    position: relative;
+    height: 26px;
+    width: 26px;
+    opacity: ${({
+  $shouldShowWaitCursor
+}) => $shouldShowWaitCursor ? 1 : 0};
+`;
+const StyledWaitCursorBackground = exports.StyledWaitCursorBackground = _styledComponents.default.div`
+    background-color: white;
+    border-radius: 50%;
+    height: 100%;
+    width: 100%;
+    position: relative;
+    z-index: 1;
+    box-shadow:
+        0 4px 12px 0 rgba(0, 0, 0, 0.2),
+        0 1px 1px rgba(0, 0, 0, 0.2);
+`;
+const spin = (0, _styledComponents.keyframes)`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+const StyledWaitCursorWaitCursor = exports.StyledWaitCursorWaitCursor = _styledComponents.default.div`
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    z-index: 2;
+    border-style: solid;
+    border-width: 3px;
+    border-color: ${({
+  $color
+}) => $color};
+    height: ${26 - 10}px;
+    width: ${26 - 10}px;
+    border-radius: 50%;
+    display: inline-block;
+    border-top: 3px solid transparent;
+
+    animation: ${spin} 1s linear infinite;
+`;
+//# sourceMappingURL=WaitCursor.styles.js.map

package/lib/cjs/components/button/wait-cursor/WaitCursor.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WaitCursor.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledWaitCursor","exports","styled","div","$shouldShowWaitCursor","StyledWaitCursorBackground","spin","keyframes","StyledWaitCursorWaitCursor","$color"],"sources":["../../../../../src/components/button/wait-cursor/WaitCursor.styles.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledWaitCursorProps = WithTheme<{\n    $shouldShowWaitCursor: boolean;\n}>;\n\nexport const StyledWaitCursor = styled.div<StyledWaitCursorProps>`\n    position: relative;\n    height: 26px;\n    width: 26px;\n    opacity: ${({ $shouldShowWaitCursor }) => ($shouldShowWaitCursor ? 1 : 0)};\n`;\n\ntype StyledWaitCursorBackgroundProps = WithTheme<unknown>;\n\nexport const StyledWaitCursorBackground = styled.div<StyledWaitCursorBackgroundProps>`\n    background-color: white;\n    border-radius: 50%;\n    height: 100%;\n    width: 100%;\n    position: relative;\n    z-index: 1;\n    box-shadow:\n        0 4px 12px 0 rgba(0, 0, 0, 0.2),\n        0 1px 1px rgba(0, 0, 0, 0.2);\n`;\n\ntype StyledWaitCursorWaitCursorProps = WithTheme<{ $color: string }>;\n\nconst spin = keyframes`\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n`;\n\nexport const StyledWaitCursorWaitCursor = styled.div<StyledWaitCursorWaitCursorProps>`\n    position: absolute;\n    top: 5px;\n    left: 5px;\n    z-index: 2;\n    border-style: solid;\n    border-width: 3px;\n    border-color: ${({ $color }) => $color};\n    height: ${26 - 10}px;\n    width: ${26 - 10}px;\n    border-radius: 50%;\n    display: inline-block;\n    border-top: 3px solid transparent;\n\n    animation: ${spin} 1s linear infinite;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAsD,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAO/C,MAAMkB,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAGE,yBAAM,CAACC,GAA0B;AACjE;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,CAAC,GAAG,CAAE;AAC7E,CAAC;AAIM,MAAMC,0BAA0B,GAAAJ,OAAA,CAAAI,0BAAA,GAAGH,yBAAM,CAACC,GAAoC;AACrF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,MAAMG,IAAI,GAAG,IAAAC,2BAAS;AACtB;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,0BAA0B,GAAAP,OAAA,CAAAO,0BAAA,GAAGN,yBAAM,CAACC,GAAoC;AACrF;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,CAAC;EAAEM;AAAO,CAAC,KAAKA,MAAM;AAC1C,cAAc,EAAE,GAAG,EAAE;AACrB,aAAa,EAAE,GAAG,EAAE;AACpB;AACA;AACA;AACA;AACA,iBAAiBH,IAAI;AACrB,CAAC","ignoreList":[]}

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

@@ -0,0 +1,72 @@
+"use strict";
+
+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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const Checkbox = ({
+  children,
+  isChecked,
+  isDisabled,
+  labelClassName,
+  onChange,
+  shouldShowAsSwitch,
+  shouldShowCentered = false,
+  shouldChangeOnLabelClick = true
+}) => {
+  const [isActive, setIsActive] = (0, _react.useState)(isChecked ?? false);
+  const [checkboxTop, setCheckboxTop] = (0, _react.useState)(undefined);
+  const checkboxBoxRef = (0, _react.useRef)(null);
+  const checkboxRootRef = (0, _react.useRef)(null);
+  const handleChange = (0, _react.useCallback)(event => {
+    setIsActive(event.target.checked);
+    if (typeof onChange === 'function') {
+      onChange(event);
+    }
+  }, [onChange]);
+  const uuid = (0, _uuid.useUuid)();
+  (0, _react.useEffect)(() => {
+    if (checkboxRootRef.current && !shouldShowCentered) {
+      var _checkboxBoxRef$curre;
+      const singleLineHeight = (0, _calculate.getHeightOfSingleTextLine)({
+        container: checkboxRootRef.current
+      });
+      const boxHeight = ((_checkboxBoxRef$curre = checkboxBoxRef.current) === null || _checkboxBoxRef$curre === void 0 ? void 0 : _checkboxBoxRef$curre.getBoundingClientRect().height) ?? 0;
+      setCheckboxTop((singleLineHeight - boxHeight) / 2);
+    }
+  }, [shouldShowCentered]);
+  return /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckbox, {
+    ref: checkboxRootRef
+  }, /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxInput, {
+    checked: isChecked,
+    disabled: isDisabled,
+    id: uuid,
+    onChange: handleChange,
+    type: "checkbox"
+  }), /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxBoxWrapper, {
+    style: {
+      top: shouldShowCentered ? '50%' : checkboxTop,
+      transform: shouldShowCentered ? 'translateY(-50%)' : undefined
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxBox, {
+    htmlFor: uuid,
+    ref: checkboxBoxRef,
+    $isChecked: isChecked ?? isActive,
+    $isDisabled: isDisabled,
+    $shouldShowAsSwitch: shouldShowAsSwitch
+  })), /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxLabel, {
+    className: labelClassName,
+    $isDisabled: isDisabled,
+    $shouldChangeOnLabelClick: shouldChangeOnLabelClick,
+    $shouldShowAsSwitch: shouldShowAsSwitch,
+    htmlFor: shouldChangeOnLabelClick ? uuid : undefined
+  }, children));
+};
+Checkbox.displayName = 'Checkbox';
+var _default = exports.default = Checkbox;
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","names":["_react","_interopRequireWildcard","require","_uuid","_calculate","_Checkbox","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","shouldShowCentered","shouldChangeOnLabelClick","isActive","setIsActive","useState","checkboxTop","setCheckboxTop","undefined","checkboxBoxRef","useRef","checkboxRootRef","handleChange","useCallback","event","target","checked","uuid","useUuid","useEffect","current","_checkboxBoxRef$curre","singleLineHeight","getHeightOfSingleTextLine","container","boxHeight","getBoundingClientRect","height","createElement","StyledCheckbox","ref","StyledCheckboxInput","disabled","id","type","StyledCheckboxBoxWrapper","style","top","transform","StyledCheckboxBox","htmlFor","$isChecked","$isDisabled","$shouldShowAsSwitch","StyledCheckboxLabel","className","$shouldChangeOnLabelClick","displayName","_default","exports"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport {\n    StyledCheckbox,\n    StyledCheckboxBox,\n    StyledCheckboxBoxWrapper,\n    StyledCheckboxInput,\n    StyledCheckboxLabel,\n} from './Checkbox.styles';\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactElement | string;\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     * Whether the label should change the state of the checkbox\n     */\n    shouldChangeOnLabelClick?: boolean;\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    shouldChangeOnLabelClick = true,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n    const [checkboxTop, setCheckboxTop] = useState<number | undefined>(undefined);\n\n    const checkboxBoxRef = useRef<HTMLLabelElement>(null);\n    const checkboxRootRef = useRef<HTMLDivElement>(null);\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    useEffect(() => {\n        if (checkboxRootRef.current && !shouldShowCentered) {\n            const singleLineHeight = getHeightOfSingleTextLine({\n                container: checkboxRootRef.current,\n            });\n\n            const boxHeight = checkboxBoxRef.current?.getBoundingClientRect().height ?? 0;\n\n            setCheckboxTop((singleLineHeight - boxHeight) / 2);\n        }\n    }, [shouldShowCentered]);\n\n    return (\n        <StyledCheckbox ref={checkboxRootRef}>\n            <StyledCheckboxInput\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n            <StyledCheckboxBoxWrapper\n                style={{\n                    top: shouldShowCentered ? '50%' : checkboxTop,\n                    transform: shouldShowCentered ? 'translateY(-50%)' : undefined,\n                }}\n            >\n                <StyledCheckboxBox\n                    htmlFor={uuid}\n                    ref={checkboxBoxRef}\n                    $isChecked={isChecked ?? isActive}\n                    $isDisabled={isDisabled}\n                    $shouldShowAsSwitch={shouldShowAsSwitch}\n                />\n            </StyledCheckboxBoxWrapper>\n            <StyledCheckboxLabel\n                className={labelClassName}\n                $isDisabled={isDisabled}\n                $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                htmlFor={shouldChangeOnLabelClick ? uuid : undefined}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/checkbox/Checkbox.styles.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledCheckboxLabel = exports.StyledCheckboxInput = exports.StyledCheckboxBoxWrapper = exports.StyledCheckboxBox = exports.StyledCheckbox = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const StyledCheckbox = exports.StyledCheckbox = _styledComponents.default.div`
+    align-items: center;
+    display: flex;
+    position: relative;
+    width: 100%;
+    min-height: 20px;
+`;
+const StyledCheckboxInput = exports.StyledCheckboxInput = _styledComponents.default.input`
+    display: none;
+`;
+const StyledCheckboxBoxWrapper = exports.StyledCheckboxBoxWrapper = _styledComponents.default.div`
+    display: flex;
+    flex-shrink: 0;
+    height: 16px;
+    position: absolute;
+`;
+const StyledCheckboxBox = exports.StyledCheckboxBox = _styledComponents.default.label`
+    color: ${({
+  theme
+}) => theme.text};
+    cursor: ${({
+  $isDisabled
+}) => $isDisabled ? 'default' : 'pointer'};
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
+    position: relative;
+    transition: opacity 0.2s ease;
+    user-select: none;
+    height: 16px;
+
+    &:after {
+        ${({
+  $isChecked,
+  $shouldShowAsSwitch
+}) => $shouldShowAsSwitch ? (0, _styledComponents.css)`
+                      background-color: white;
+                      border-radius: 50%;
+                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
+                      height: 16px;
+                      left: 7px;
+                      top: 50%;
+                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);
+                      transition: transform 0.2s ease;
+                      width: 16px;
+                  ` : (0, _styledComponents.css)`
+                      border-right: 2px solid #fff;
+                      border-bottom: 2px solid #fff;
+                      height: 10px;
+                      left: 2px;
+                      opacity: ${$isChecked ? 1 : 0};
+                      top: calc(50% - 2px);
+                      transform: rotateZ(37deg) translateY(-50%);
+                      transition: opacity 0.2s ease;
+                      width: 5px;
+                  `}
+
+        content: ' ';
+        position: absolute;
+    }
+
+    &:before {
+        background-color: ${({
+  $isChecked,
+  $shouldShowAsSwitch,
+  theme
+}) => {
+  if ($shouldShowAsSwitch) {
+    return $isChecked ? theme.green : theme.red;
+  }
+  return $isChecked ? theme['408'] : theme['403'];
+}};
+
+        ${({
+  $shouldShowAsSwitch,
+  theme
+}) => !$shouldShowAsSwitch && (0, _styledComponents.css)`
+                border: 1px solid rgba(${theme['409-rgb']}, 0.5);
+            `}
+
+        border-radius: ${({
+  $shouldShowAsSwitch
+}) => $shouldShowAsSwitch ? '100px' : 0};
+        content: ' ';
+        height: ${({
+  $shouldShowAsSwitch
+}) => $shouldShowAsSwitch ? '13px' : '15px'};
+        left: ${({
+  $shouldShowAsSwitch
+}) => $shouldShowAsSwitch ? '10px' : 0};
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        transition: background-color 0.2s ease;
+        width: ${({
+  $shouldShowAsSwitch
+}) => $shouldShowAsSwitch ? '28px' : '15px'};
+    }
+}
+`;
+const StyledCheckboxLabel = exports.StyledCheckboxLabel = _styledComponents.default.label`
+    color: ${({
+  theme
+}) => theme.text};
+    cursor: ${({
+  $shouldChangeOnLabelClick
+}) => !$shouldChangeOnLabelClick ? 'default' : 'pointer'};
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
+    padding-left: ${({
+  $shouldShowAsSwitch
+}) => $shouldShowAsSwitch ? '48px' : '20px'};
+    transition: opacity 0.2s ease;
+    user-select: none;
+`;
+//# sourceMappingURL=Checkbox.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledCheckbox","exports","styled","div","StyledCheckboxInput","input","StyledCheckboxBoxWrapper","StyledCheckboxBox","label","theme","text","$isDisabled","$isChecked","$shouldShowAsSwitch","css","green","red","StyledCheckboxLabel","$shouldChangeOnLabelClick"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n    align-items: center;\n    display: flex;\n    position: relative;\n    width: 100%;\n    min-height: 20px;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n    display: none;\n`;\n\ntype StyledCheckboxBoxWrapperProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxBoxWrapper = styled.div<StyledCheckboxBoxWrapperProps>`\n    display: flex;\n    flex-shrink: 0;\n    height: 16px;\n    position: absolute;\n`;\n\ntype StyledCheckboxBoxProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $isChecked?: CheckboxProps['isChecked'];\n}>;\n\nexport const StyledCheckboxBox = styled.label<StyledCheckboxBoxProps>`\n    color: ${({ theme }: StyledCheckboxBoxProps) => theme.text};\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    transition: opacity 0.2s ease;\n    user-select: none;\n    height: 16px;\n\n    &:after {\n        ${({ $isChecked, $shouldShowAsSwitch }: StyledCheckboxBoxProps) =>\n            $shouldShowAsSwitch\n                ? css`\n                      background-color: white;\n                      border-radius: 50%;\n                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n                      height: 16px;\n                      left: 7px;\n                      top: 50%;\n                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n                      transition: transform 0.2s ease;\n                      width: 16px;\n                  `\n                : css`\n                      border-right: 2px solid #fff;\n                      border-bottom: 2px solid #fff;\n                      height: 10px;\n                      left: 2px;\n                      opacity: ${$isChecked ? 1 : 0};\n                      top: calc(50% - 2px);\n                      transform: rotateZ(37deg) translateY(-50%);\n                      transition: opacity 0.2s ease;\n                      width: 5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n    }\n\n    &:before {\n        background-color: ${({\n            $isChecked,\n            $shouldShowAsSwitch,\n            theme,\n        }: StyledCheckboxBoxProps) => {\n            if ($shouldShowAsSwitch) {\n                return $isChecked ? theme.green : theme.red;\n            }\n\n            return $isChecked ? theme['408'] : theme['403'];\n        }};\n\n        ${({ $shouldShowAsSwitch, theme }) =>\n            !$shouldShowAsSwitch &&\n            css`\n                border: 1px solid rgba(${theme['409-rgb']}, 0.5);\n            `}\n\n        border-radius: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '100px' : 0)};\n        content: ' ';\n        height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n        left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        transition: background-color 0.2s ease;\n        width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n    }\n}\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n    cursor: ${({ $shouldChangeOnLabelClick }) =>\n        !$shouldChangeOnLabelClick ? 'default' : 'pointer'};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    padding-left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '48px' : '20px')};\n    transition: opacity 0.2s ease;\n    user-select: none;\n`;\n"],"mappings":"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","ignoreList":[]}