@chayns-components/core 5.0.0-beta.28 → 5.0.0-beta.288

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","_framerMotion","_react","_Icon","_SmallWaitCursor","_interopRequireWildcard","_Button","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","Button","_ref","children","className","icon","isDisabled","isSecondary","onClick","shouldShowWaitCursor","shouldStopPropagation","handleClick","event","stopPropagation","buttonClasses","clsx","createElement","StyledButton","disabled","hasIcon","AnimatePresence","initial","StyledIconWrapper","color","icons","StyledMotionWaitCursorWrapper","animate","opacity","width","exit","key","style","overflow","transition","duration","shouldHideBackground","size","SmallWaitCursorSize","Small","StyledMotionChildrenWrapper","displayName","_default","exports"],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { AnimatePresence } from 'framer-motion';\nimport React, { FC, MouseEventHandler, ReactNode } from 'react';\nimport Icon from '../icon/Icon';\nimport SmallWaitCursor, { SmallWaitCursorSize } from '../small-wait-cursor/SmallWaitCursor';\nimport {\n    StyledButton,\n    StyledIconWrapper,\n    StyledMotionChildrenWrapper,\n    StyledMotionWaitCursorWrapper,\n} 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     * 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}) => {\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            <AnimatePresence initial={false}>\n                {icon && (\n                    <StyledIconWrapper>\n                        <Icon color=\"white\" 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                        <SmallWaitCursor\n                            color=\"white\"\n                            shouldHideBackground\n                            size={SmallWaitCursorSize.Small}\n                        />\n                    </StyledMotionWaitCursorWrapper>\n                ) : (\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        </StyledButton>\n    );\n};\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":"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"}

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

@@ -5,3 +5,5 @@ export declare const StyledButton: import("styled-components").StyledComponent<"
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never>;
 export declare const StyledIconWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledMotionChildrenWrapper: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
+export declare const StyledMotionWaitCursorWrapper: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;

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

@@ -3,35 +3,64 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledIconWrapper = exports.StyledButton = void 0;
-
+exports.StyledMotionWaitCursorWrapper = exports.StyledMotionChildrenWrapper = exports.StyledIconWrapper = exports.StyledButton = void 0;
+var _framerMotion = require("framer-motion");
 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 = exports.StyledButton = _styledComponents.default.button`
+    align-items: center;
+    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-flex;
+    line-height: 1.15;
+    min-height: 32px;
+    opacity: ${_ref3 => {
+  let {
+    disabled
+  } = _ref3;
   return disabled ? 0.5 : 1;
-}, function (_ref4) {
-  var hasIcon = _ref4.hasIcon;
-  return "7px 12px 7px ".concat(hasIcon ? '42px' : '12px');
-});
-
-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"])));
-
-exports.StyledIconWrapper = StyledIconWrapper;
+}};
+    padding: ${_ref4 => {
+  let {
+    hasIcon
+  } = _ref4;
+  return `7px 12px 7px ${hasIcon ? '42px' : '12px'}`;
+}};
+    position: relative;
+    user-select: none;
+    transition: opacity 0.3s ease;
+`;
+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,"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":["_framerMotion","require","_styledComponents","_interopRequireDefault","obj","__esModule","default","StyledButton","exports","styled","button","_ref","isSecondary","theme","_ref2","text","_ref3","disabled","_ref4","hasIcon","StyledIconWrapper","span","StyledMotionChildrenWrapper","motion","div","StyledMotionWaitCursorWrapper"],"sources":["../../../src/components/button/Button.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ButtonProps } from './Button';\n\ntype StyledButtonProps = ButtonProps &\n    WithTheme<{\n        hasIcon: 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    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\nexport const StyledMotionChildrenWrapper = styled(motion.div)``;\n\nexport const StyledMotionWaitCursorWrapper = styled(motion.div)`\n    align-items: center;\n    display: flex;\n    justify-content: center;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAShC,MAAMG,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,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;AAEM,MAAMC,iBAAiB,GAAAZ,OAAA,CAAAY,iBAAA,GAAGX,yBAAM,CAACY,IAAK;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,2BAA2B,GAAAd,OAAA,CAAAc,2BAAA,GAAG,IAAAb,yBAAM,EAACc,oBAAM,CAACC,GAAG,CAAE,EAAC;AAExD,MAAMC,6BAA6B,GAAAjB,OAAA,CAAAiB,6BAAA,GAAG,IAAAhB,yBAAM,EAACc,oBAAM,CAACC,GAAG,CAAE;AAChE;AACA;AACA;AACA,CAAC"}

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,43 @@
+"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(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,
+    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 = exports.default = Checkbox;
+//# 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","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","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>;

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

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledCheckboxLabel = exports.StyledCheckboxInput = exports.StyledCheckbox = void 0;
+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 StyledCheckbox = exports.StyledCheckbox = _styledComponents.default.div`
+    align-items: center;
+    display: flex;
+    position: relative;
+`;
+const StyledCheckboxInput = exports.StyledCheckboxInput = _styledComponents.default.input`
+    display: none;
+`;
+const StyledCheckboxLabel = exports.StyledCheckboxLabel = _styledComponents.default.label`
+    color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.text;
+}};
+    cursor: ${_ref2 => {
+  let {
+    isDisabled
+  } = _ref2;
+  return isDisabled ? 'default' : 'pointer';
+}};
+    opacity: ${_ref3 => {
+  let {
+    isDisabled
+  } = _ref3;
+  return isDisabled ? 0.5 : 1;
+}};
+    padding-left: ${_ref4 => {
+  let {
+    shouldShowAsSwitch
+  } = _ref4;
+  return shouldShowAsSwitch ? '48px' : '20px';
+}};
+    transition: opacity 0.2s ease;
+    user-select: none;
+
+    &:after {
+        ${_ref5 => {
+  let {
+    isChecked,
+    shouldShowAsSwitch
+  } = _ref5;
+  return shouldShowAsSwitch ? (0, _styledComponents.css)`
+                      background-color: white;
+                      border-radius: 50%;
+                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
+                      height: 16px;
+                      left: 7px;
+                      transform: translateY(-50%) translateX(${isChecked ? '18px' : 0});
+                      transition: transform 0.2s ease;
+                      width: 16px;
+                  ` : (0, _styledComponents.css)`
+                      border-right: 2px solid #fff;
+                      border-bottom: 2px solid #fff;
+                      height: 10px;
+                      left: 1px;
+                      opacity: ${isChecked ? 1 : 0};
+                      transform: translateY(-50%) rotateZ(37deg);
+                      transition: opacity 0.2s ease;
+                      width: 5.5px;
+                  `;
+}}
+
+        content: ' ';
+        position: absolute;
+        top: 50%;
+        transform-origin: 100% 100%;
+    }
+
+    &:before {
+        background-color: ${_ref6 => {
+  let {
+    isChecked,
+    shouldShowAsSwitch,
+    theme
+  } = _ref6;
+  if (shouldShowAsSwitch) {
+    return isChecked ? theme.green : theme.red;
+  }
+  return isChecked ? theme['408'] : theme['403'];
+}};
+        border: 1px solid rgba(${_ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme['409-rgb'];
+}}, 0.5);
+        border-radius: ${_ref8 => {
+  let {
+    shouldShowAsSwitch
+  } = _ref8;
+  return shouldShowAsSwitch ? '100px' : 0;
+}};
+        content: ' ';
+        height: ${_ref9 => {
+  let {
+    shouldShowAsSwitch
+  } = _ref9;
+  return shouldShowAsSwitch ? '13px' : '15px';
+}};
+        left: ${_ref10 => {
+  let {
+    shouldShowAsSwitch
+  } = _ref10;
+  return shouldShowAsSwitch ? '10px' : 0;
+}};
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        transition: background-color 0.2s ease;
+        width: ${_ref11 => {
+  let {
+    shouldShowAsSwitch
+  } = _ref11;
+  return shouldShowAsSwitch ? '28px' : '15px';
+}};
+    }
+`;
+//# sourceMappingURL=Checkbox.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledCheckbox","exports","styled","div","StyledCheckboxInput","input","StyledCheckboxLabel","label","_ref","theme","text","_ref2","isDisabled","_ref3","_ref4","shouldShowAsSwitch","_ref5","isChecked","css","_ref6","green","red","_ref7","_ref8","_ref9","_ref10","_ref11"],"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`;\n\nexport const StyledCheckboxInput = styled.input`\n    display: none;\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<Omit<CheckboxProps, 'children' | 'onChange'>>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n    cursor: ${({ isDisabled }) => (isDisabled ? '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    &:after {\n        ${({ isChecked, shouldShowAsSwitch }) =>\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                      transform: translateY(-50%) translateX(${isChecked ? '18px' : 0});\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: 1px;\n                      opacity: ${isChecked ? 1 : 0};\n                      transform: translateY(-50%) rotateZ(37deg);\n                      transition: opacity 0.2s ease;\n                      width: 5.5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n        top: 50%;\n        transform-origin: 100% 100%;\n    }\n\n    &:before {\n        background-color: ${({\n            isChecked,\n            shouldShowAsSwitch,\n            theme,\n        }: StyledCheckboxLabelProps) => {\n            if (shouldShowAsSwitch) {\n                return isChecked ? theme.green : theme.red;\n            }\n\n            return isChecked ? theme['408'] : theme['403'];\n        }};\n        border: 1px solid rgba(${({ theme }: StyledCheckboxLabelProps) => theme['409-rgb']}, 0.5);\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"],"mappings":"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"}

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

@@ -4,7 +4,7 @@ declare enum ColorMode {
     Dark = 1,
     Light = 2
 }
-declare type ColorSchemeProviderProps = {
+type ColorSchemeProviderProps = {
     /**
      * The content of the application or the components for which the styles should be set
      */
@@ -37,7 +37,7 @@ declare type ColorSchemeProviderProps = {
 export interface Theme {
     [key: string]: string;
 }
-export declare type WithTheme<T> = T & {
+export type WithTheme<T> = T & {
     theme: Theme;
 };
 declare const ColorSchemeProvider: FC<ColorSchemeProviderProps>;

package/lib/components/color-scheme-provider/ColorSchemeProvider.js

@@ -1,95 +1,58 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _colors = require("@chayns/colors");
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styledComponents = require("styled-components");
-
-var _templateObject;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var ColorMode;
-
-(function (ColorMode) {
+var _font = require("./font");
+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; }
+var ColorMode = /*#__PURE__*/function (ColorMode) {
   ColorMode[ColorMode["Classic"] = 0] = "Classic";
   ColorMode[ColorMode["Dark"] = 1] = "Dark";
   ColorMode[ColorMode["Light"] = 2] = "Light";
-})(ColorMode || (ColorMode = {}));
-
-var GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    .ellipsis {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n"])));
-
-var ColorSchemeProvider = function ColorSchemeProvider(_ref) {
-  var children = _ref.children,
-      _ref$color = _ref.color,
-      color = _ref$color === void 0 ? '#005EB8' : _ref$color,
-      _ref$colorMode = _ref.colorMode,
-      colorMode = _ref$colorMode === void 0 ? ColorMode.Classic : _ref$colorMode,
-      _ref$cssVariables = _ref.cssVariables,
-      cssVariables = _ref$cssVariables === void 0 ? {} : _ref$cssVariables,
-      secondaryColor = _ref.secondaryColor,
-      _ref$style = _ref.style,
-      style = _ref$style === void 0 ? {} : _ref$style;
-
-  var _useState = (0, _react.useState)({}),
-      _useState2 = _slicedToArray(_useState, 2),
-      colors = _useState2[0],
-      setColors = _useState2[1];
-
-  var _useState3 = (0, _react.useState)({}),
-      _useState4 = _slicedToArray(_useState3, 2),
-      themeColors = _useState4[0],
-      setThemeColors = _useState4[1];
-
-  (0, _react.useEffect)(function () {
-    var availableColors = (0, _colors.getAvailableColorList)();
-    var newColors = {};
-    var newThemeColors = {};
-    availableColors.forEach(function (colorName) {
-      var hexColor = (0, _colors.getColorFromPalette)(colorName, {
-        color: color,
-        colorMode: colorMode,
-        secondaryColor: secondaryColor
+  return ColorMode;
+}(ColorMode || {});
+const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
+  ${_font.generateFontFaces}
+
+  .ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+const ColorSchemeProvider = _ref => {
+  let {
+    children,
+    color = '#005EB8',
+    colorMode = ColorMode.Classic,
+    cssVariables = {},
+    secondaryColor,
+    style = {}
+  } = _ref;
+  const [colors, setColors] = (0, _react.useState)({});
+  const [themeColors, setThemeColors] = (0, _react.useState)({});
+  (0, _react.useEffect)(() => {
+    const availableColors = (0, _colors.getAvailableColorList)();
+    const newColors = {};
+    const newThemeColors = {};
+    availableColors.forEach(colorName => {
+      const hexColor = (0, _colors.getColorFromPalette)(colorName, {
+        color,
+        colorMode,
+        secondaryColor
       });
-
       if (hexColor) {
-        var rgbColor = (0, _colors.hexToRgb255)(hexColor);
-        newColors["--chayns-color--".concat(colorName)] = hexColor;
+        const rgbColor = (0, _colors.hexToRgb255)(hexColor);
+        newColors[`--chayns-color--${colorName}`] = hexColor;
         newThemeColors[colorName] = hexColor;
-
         if (rgbColor) {
-          newColors["--chayns-color-rgb--".concat(colorName)] = "".concat(rgbColor.r, ", ").concat(rgbColor.g, ", ").concat(rgbColor.b);
-          newThemeColors["".concat(colorName, "-rgb")] = "".concat(rgbColor.r, ", ").concat(rgbColor.g, ", ").concat(rgbColor.b);
+          newColors[`--chayns-color-rgb--${colorName}`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;
+          newThemeColors[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;
         }
       }
     });
@@ -99,11 +62,13 @@ var ColorSchemeProvider = function ColorSchemeProvider(_ref) {
   return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
     theme: themeColors
   }, /*#__PURE__*/_react.default.createElement("div", {
-    style: _objectSpread(_objectSpread(_objectSpread({}, colors), cssVariables), style)
+    style: {
+      ...colors,
+      ...cssVariables,
+      ...style
+    }
   }, children), /*#__PURE__*/_react.default.createElement(GlobalStyle, null));
 };
-
 ColorSchemeProvider.displayName = 'ColorSchemeProvider';
-var _default = ColorSchemeProvider;
-exports.default = _default;
+var _default = exports.default = ColorSchemeProvider;
 //# sourceMappingURL=ColorSchemeProvider.js.map

package/lib/components/color-scheme-provider/ColorSchemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"names":["ColorMode","GlobalStyle","createGlobalStyle","ColorSchemeProvider","children","color","colorMode","Classic","cssVariables","secondaryColor","style","colors","setColors","themeColors","setThemeColors","availableColors","newColors","newThemeColors","forEach","colorName","hexColor","rgbColor","r","g","b","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEKA,S;;WAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;GAAAA,S,KAAAA,S;;AAyCL,IAAMC,WAAW,OAAGC,mCAAH,qLAAjB;;AAQA,IAAMC,mBAAiD,GAAG,SAApDA,mBAAoD,OAOpD;AAAA,MANFC,QAME,QANFA,QAME;AAAA,wBALFC,KAKE;AAAA,MALFA,KAKE,2BALM,SAKN;AAAA,4BAJFC,SAIE;AAAA,MAJFA,SAIE,+BAJUN,SAAS,CAACO,OAIpB;AAAA,+BAHFC,YAGE;AAAA,MAHFA,YAGE,kCAHa,EAGb;AAAA,MAFFC,cAEE,QAFFA,cAEE;AAAA,wBADFC,KACE;AAAA,MADFA,KACE,2BADM,EACN;;AACF,kBAA4B,qBAAgB,EAAhB,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AACA,mBAAsC,qBAAgB,EAAhB,CAAtC;AAAA;AAAA,MAAOC,WAAP;AAAA,MAAoBC,cAApB;;AAEA,wBAAU,YAAM;AACZ,QAAMC,eAAe,GAAG,oCAAxB;AAEA,QAAMC,SAAgB,GAAG,EAAzB;AACA,QAAMC,cAAqB,GAAG,EAA9B;AAEAF,IAAAA,eAAe,CAACG,OAAhB,CAAwB,UAACC,SAAD,EAAuB;AAC3C,UAAMC,QAAQ,GAAG,iCAAoBD,SAApB,EAA+B;AAC5Cd,QAAAA,KAAK,EAALA,KAD4C;AAE5CC,QAAAA,SAAS,EAATA,SAF4C;AAG5CG,QAAAA,cAAc,EAAdA;AAH4C,OAA/B,CAAjB;;AAMA,UAAIW,QAAJ,EAAc;AACV,YAAMC,QAAQ,GAAG,yBAAYD,QAAZ,CAAjB;AAEAJ,QAAAA,SAAS,2BAAoBG,SAApB,EAAT,GAA4CC,QAA5C;AACAH,QAAAA,cAAc,CAACE,SAAD,CAAd,GAA4BC,QAA5B;;AAEA,YAAIC,QAAJ,EAAc;AACVL,UAAAA,SAAS,+BACkBG,SADlB,EAAT,aAEOE,QAAQ,CAACC,CAFhB,eAEsBD,QAAQ,CAACE,CAF/B,eAEqCF,QAAQ,CAACG,CAF9C;AAGAP,UAAAA,cAAc,WACPE,SADO,UAAd,aAEOE,QAAQ,CAACC,CAFhB,eAEsBD,QAAQ,CAACE,CAF/B,eAEqCF,QAAQ,CAACG,CAF9C;AAGH;AACJ;AACJ,KAtBD;AAwBAZ,IAAAA,SAAS,CAACI,SAAD,CAAT;AACAF,IAAAA,cAAc,CAACG,cAAD,CAAd;AACH,GAhCD,EAgCG,CAACZ,KAAD,EAAQC,SAAR,EAAmBG,cAAnB,CAhCH;AAkCA,sBACI,6BAAC,+BAAD;AAAe,IAAA,KAAK,EAAEI;AAAtB,kBACI;AAAK,IAAA,KAAK,gDAAOF,MAAP,GAAkBH,YAAlB,GAAmCE,KAAnC;AAAV,KAAuDN,QAAvD,CADJ,eAEI,6BAAC,WAAD,OAFJ,CADJ;AAMH,CAnDD;;AAqDAD,mBAAmB,CAACsB,WAApB,GAAkC,qBAAlC;eAEetB,mB","sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport React, { FC, ReactNode, useEffect, useState } from 'react';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\n\nenum ColorMode {\n    Classic,\n    Dark,\n    Light,\n}\n\ntype ColorSchemeProviderProps = {\n    /**\n     * The content of the application or the components for which the styles should be set\n     */\n    children: ReactNode;\n    /**\n     * The hex color to be used for the children\n     */\n    color?: string;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * Css variables to be added in addition to the chayns variables\n     */\n    cssVariables?: { [key: string]: string | number };\n    /**\n     * The secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\n};\n\nexport interface Theme {\n    [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n    theme: Theme;\n};\n\nconst GlobalStyle = createGlobalStyle`\n    .ellipsis {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n`;\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color = '#005EB8',\n    colorMode = ColorMode.Classic,\n    cssVariables = {},\n    secondaryColor,\n    style = {},\n}) => {\n    const [colors, setColors] = useState<Theme>({});\n    const [themeColors, setThemeColors] = useState<Theme>({});\n\n    useEffect(() => {\n        const availableColors = getAvailableColorList();\n\n        const newColors: Theme = {};\n        const newThemeColors: Theme = {};\n\n        availableColors.forEach((colorName: string) => {\n            const hexColor = getColorFromPalette(colorName, {\n                color,\n                colorMode,\n                secondaryColor,\n            });\n\n            if (hexColor) {\n                const rgbColor = hexToRgb255(hexColor);\n\n                newColors[`--chayns-color--${colorName}`] = hexColor;\n                newThemeColors[colorName] = hexColor;\n\n                if (rgbColor) {\n                    newColors[\n                        `--chayns-color-rgb--${colorName}`\n                    ] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                    newThemeColors[\n                        `${colorName}-rgb`\n                    ] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                }\n            }\n        });\n\n        setColors(newColors);\n        setThemeColors(newThemeColors);\n    }, [color, colorMode, secondaryColor]);\n\n    return (\n        <ThemeProvider theme={themeColors}>\n            <div style={{ ...colors, ...cssVariables, ...style }}>{children}</div>\n            <GlobalStyle />\n        </ThemeProvider>\n    );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"file":"ColorSchemeProvider.js"}
+{"version":3,"file":"ColorSchemeProvider.js","names":["_colors","require","_react","_interopRequireWildcard","_styledComponents","_font","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ColorMode","GlobalStyle","createGlobalStyle","generateFontFaces","ColorSchemeProvider","_ref","children","color","colorMode","Classic","cssVariables","secondaryColor","style","colors","setColors","useState","themeColors","setThemeColors","useEffect","availableColors","getAvailableColorList","newColors","newThemeColors","forEach","colorName","hexColor","getColorFromPalette","rgbColor","hexToRgb255","g","b","createElement","ThemeProvider","theme","displayName","_default","exports"],"sources":["../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport React, { FC, ReactNode, useEffect, useState } from 'react';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { generateFontFaces } from './font';\n\nenum ColorMode {\n    Classic,\n    Dark,\n    Light,\n}\n\ntype ColorSchemeProviderProps = {\n    /**\n     * The content of the application or the components for which the styles should be set\n     */\n    children: ReactNode;\n    /**\n     * The hex color to be used for the children\n     */\n    color?: string;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * Css variables to be added in addition to the chayns variables\n     */\n    cssVariables?: { [key: string]: string | number };\n    /**\n     * The secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\n};\n\nexport interface Theme {\n    [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n    theme: Theme;\n};\n\nconst GlobalStyle = createGlobalStyle`\n  ${generateFontFaces}\n\n  .ellipsis {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n`;\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color = '#005EB8',\n    colorMode = ColorMode.Classic,\n    cssVariables = {},\n    secondaryColor,\n    style = {},\n}) => {\n    const [colors, setColors] = useState<Theme>({});\n    const [themeColors, setThemeColors] = useState<Theme>({});\n\n    useEffect(() => {\n        const availableColors = getAvailableColorList();\n\n        const newColors: Theme = {};\n        const newThemeColors: Theme = {};\n\n        availableColors.forEach((colorName: string) => {\n            const hexColor = getColorFromPalette(colorName, {\n                color,\n                colorMode,\n                secondaryColor,\n            });\n\n            if (hexColor) {\n                const rgbColor = hexToRgb255(hexColor);\n\n                newColors[`--chayns-color--${colorName}`] = hexColor;\n                newThemeColors[colorName] = hexColor;\n\n                if (rgbColor) {\n                    newColors[\n                        `--chayns-color-rgb--${colorName}`\n                    ] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                    newThemeColors[\n                        `${colorName}-rgb`\n                    ] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                }\n            }\n        });\n\n        setColors(newColors);\n        setThemeColors(newThemeColors);\n    }, [color, colorMode, secondaryColor]);\n\n    return (\n        <ThemeProvider theme={themeColors}>\n            <div style={{ ...colors, ...cssVariables, ...style }}>{children}</div>\n            <GlobalStyle />\n        </ThemeProvider>\n    );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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"}

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

@@ -0,0 +1,6 @@
+export interface Font {
+    family: string;
+    src: string;
+    unicodeRange?: string;
+}
+export declare const generateFontFaces: () => string;