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

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

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledWaitCursorWaitCursor = exports.StyledWaitCursorBackground = exports.StyledWaitCursor = 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 && {}.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 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","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","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,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAO/C,MAAMW,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,53 @@
+"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 _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 && {}.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 = ({
+  children,
+  isChecked,
+  isDisabled,
+  labelClassName,
+  onChange,
+  shouldShowAsSwitch,
+  shouldShowCentered = false,
+  shouldChangeOnLabelClick = true
+}) => {
+  const [isActive, setIsActive] = (0, _react.useState)(isChecked ?? false);
+  const handleChange = (0, _react.useCallback)(event => {
+    setIsActive(event.target.checked);
+    if (typeof onChange === 'function') {
+      onChange(event);
+    }
+  }, [onChange]);
+  const uuid = (0, _uuid.useUuid)();
+  const lineHeight = (0, _react.useMemo)(() => !children || shouldShowCentered ? undefined : (0, _calculate.getHeightOfSingleTextLine)(), [children, shouldShowCentered]);
+  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.StyledCheckboxBox, {
+    htmlFor: uuid,
+    $isChecked: isChecked ?? isActive,
+    $isDisabled: isDisabled,
+    $shouldShowAsSwitch: shouldShowAsSwitch,
+    $lineHeight: lineHeight
+  }), /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxLabel, {
+    className: labelClassName,
+    $isDisabled: isDisabled,
+    $shouldChangeOnLabelClick: shouldChangeOnLabelClick,
+    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","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","shouldShowCentered","shouldChangeOnLabelClick","isActive","setIsActive","useState","handleChange","useCallback","event","target","checked","uuid","useUuid","lineHeight","useMemo","undefined","getHeightOfSingleTextLine","createElement","StyledCheckbox","StyledCheckboxInput","disabled","id","type","StyledCheckboxBox","htmlFor","$isChecked","$isDisabled","$shouldShowAsSwitch","$lineHeight","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    useMemo,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport {\n    StyledCheckbox,\n    StyledCheckboxBox,\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\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setIsActive(event.target.checked);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [onChange],\n    );\n\n    const uuid = useUuid();\n\n    const lineHeight = useMemo(\n        () => (!children || shouldShowCentered ? undefined : getHeightOfSingleTextLine()),\n        [children, shouldShowCentered],\n    );\n\n    return (\n        <StyledCheckbox>\n            <StyledCheckboxInput\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n            <StyledCheckboxBox\n                htmlFor={uuid}\n                $isChecked={isChecked ?? isActive}\n                $isDisabled={isDisabled}\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                $lineHeight={lineHeight}\n            />\n            <StyledCheckboxLabel\n                className={labelClassName}\n                $isDisabled={isDisabled}\n                $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\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,129 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledCheckboxLabel = exports.StyledCheckboxInput = exports.StyledCheckboxBox = exports.StyledCheckbox = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _checkBox = require("../../utils/checkBox");
+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 && {}.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;
+    width: 100%;
+    min-height: 20px;
+`;
+const StyledCheckboxInput = exports.StyledCheckboxInput = _styledComponents.default.input`
+    display: none;
+`;
+const StyledCheckboxBox = exports.StyledCheckboxBox = _styledComponents.default.label`
+    color: ${({
+  theme
+}) => theme.text};
+    cursor: ${({
+  $isDisabled
+}) => $isDisabled ? 'default' : 'pointer'};
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
+    padding-left: ${({
+  $shouldShowAsSwitch
+}) => $shouldShowAsSwitch ? '48px' : '20px'};
+    transition: opacity 0.2s ease;
+    user-select: none;
+
+    &:after {
+        ${({
+  $isChecked,
+  $shouldShowAsSwitch,
+  $lineHeight,
+  theme
+}) => $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: ${$lineHeight ? `${((0, _checkBox.getCheckBoxPosition)(Number(theme.fontSize)) ?? 5) + 6}px` : '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: ${$lineHeight ? `${((0, _checkBox.getCheckBoxPosition)(Number(theme.fontSize)) ?? 5) + 5}px` : 'calc(50% - 2px)'};
+                      transform: rotateZ(37deg) translateY(-50%);
+                      transition: opacity 0.2s ease;
+                      width: 5.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;
+        transition: background-color 0.2s ease;
+        width: ${({
+  $shouldShowAsSwitch
+}) => $shouldShowAsSwitch ? '28px' : '15px'};
+        ${({
+  $lineHeight,
+  theme,
+  $shouldShowAsSwitch
+}) => $lineHeight ? (0, _styledComponents.css)`
+                      top: ${(0, _checkBox.getCheckBoxPosition)(Number(theme.fontSize)) ?? 5 + ($shouldShowAsSwitch ? 1 : 0)}px;
+                  ` : (0, _styledComponents.css)`
+                      top: 50%;
+                      transform: translateY(-50%);
+                  `}
+    }
+}
+`;
+const StyledCheckboxLabel = exports.StyledCheckboxLabel = _styledComponents.default.label`
+    color: ${({
+  theme
+}) => theme.text};
+    cursor: ${({
+  $shouldChangeOnLabelClick
+}) => !$shouldChangeOnLabelClick ? 'default' : 'pointer'};
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
+    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","_checkBox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledCheckbox","exports","styled","div","StyledCheckboxInput","input","StyledCheckboxBox","label","theme","text","$isDisabled","$shouldShowAsSwitch","$isChecked","$lineHeight","css","getCheckBoxPosition","Number","fontSize","green","red","StyledCheckboxLabel","$shouldChangeOnLabelClick"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { getCheckBoxPosition } from '../../utils/checkBox';\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 StyledCheckboxBoxProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $isChecked?: CheckboxProps['isChecked'];\n    $lineHeight?: number;\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    padding-left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '48px' : '20px')};\n    transition: opacity 0.2s ease;\n    user-select: none;\n\n    &:after {\n        ${({ $isChecked, $shouldShowAsSwitch, $lineHeight, theme }: 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: ${$lineHeight\n                          ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 6}px`\n                          : '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: ${$lineHeight\n                          ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 5}px`\n                          : 'calc(50% - 2px)'};\n                      transform: rotateZ(37deg) translateY(-50%);\n                      transition: opacity 0.2s ease;\n                      width: 5.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        transition: background-color 0.2s ease;\n        width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n        ${({ $lineHeight, theme, $shouldShowAsSwitch }: StyledCheckboxBoxProps) =>\n            $lineHeight\n                ? css`\n                      top: ${getCheckBoxPosition(Number(theme.fontSize)) ??\n                      5 + ($shouldShowAsSwitch ? 1 : 0)}px;\n                  `\n                : css`\n                      top: 50%;\n                      transform: translateY(-50%);\n                  `}\n    }\n}\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\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    transition: opacity 0.2s ease;\n    user-select: none;\n`;\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,169 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useColorScheme = exports.default = exports.ColorSchemeContext = void 0;
+var _colors = require("@chayns/colors");
+var _chaynsApi = require("chayns-api");
+var _react = _interopRequireWildcard(require("react"));
+var _reactHelmet = require("react-helmet");
+var _styledComponents = require("styled-components");
+var _get = require("../../api/theme/get");
+var _font = require("../../utils/font");
+var _ColorSchemeProvider = require("./ColorSchemeProvider.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 && {}.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";
+  return ColorMode;
+}(ColorMode || {}); // ToDo remove type after the framer-motion bug is Fixed
+const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
+    .ellipsis {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+`;
+const ColorSchemeContext = exports.ColorSchemeContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+const useColorScheme = () => (0, _react.useContext)(ColorSchemeContext);
+exports.useColorScheme = useColorScheme;
+const ColorSchemeProvider = ({
+  children,
+  color,
+  colorMode,
+  cssVariables = {},
+  secondaryColor,
+  siteId,
+  style = {},
+  paragraphFormat,
+  designSettings,
+  theme,
+  colors
+}) => {
+  const [internalTheme, setInternalTheme] = (0, _react.useState)(theme ?? {});
+  const [internalDesignSettings, setInternalDesignSettings] = (0, _react.useState)();
+  const [internalParagraphFormat, setInternalParagraphFormat] = (0, _react.useState)();
+
+  // Empty object is used to prevent error if ColorSchemeProvider is rendered on server
+  const {
+    color: internalColor,
+    colorMode: internalColorMode
+  } = (0, _chaynsApi.useSite)() ?? {};
+  (0, _react.useEffect)(() => {
+    if (designSettings) {
+      setInternalDesignSettings(designSettings);
+    } else if (!internalDesignSettings) {
+      void (0, _get.getDesignSettings)(siteId).then(result => {
+        setInternalDesignSettings(result);
+      });
+    }
+  }, [designSettings, internalDesignSettings, siteId]);
+  (0, _react.useEffect)(() => {
+    if (paragraphFormat) {
+      setInternalParagraphFormat(paragraphFormat);
+    } else if (!internalParagraphFormat) {
+      void (0, _get.getParagraphFormat)(siteId).then(result => {
+        setInternalParagraphFormat(result);
+      });
+    }
+  }, [internalParagraphFormat, paragraphFormat, siteId]);
+  (0, _react.useEffect)(() => {
+    let newTheme = {};
+    const availableColors = (0, _colors.getAvailableColorList)();
+    if (!colors || !theme) {
+      availableColors.forEach(colorName => {
+        const hexColor = (0, _colors.getColorFromPalette)(colorName, {
+          color: color ?? internalColor,
+          colorMode: colorMode ?? internalColorMode,
+          secondaryColor
+        });
+        if (hexColor) {
+          const rgbColor = (0, _colors.hexToRgb255)(hexColor);
+          if (!theme) {
+            newTheme[colorName] = hexColor;
+          }
+          if (rgbColor) {
+            if (!theme) {
+              newTheme[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;
+            }
+          }
+        }
+      });
+    }
+    if (!theme) {
+      switch (colorMode ?? internalColorMode) {
+        case ColorMode.Light:
+          newTheme.colorMode = 'light';
+          break;
+        case ColorMode.Dark:
+          newTheme.colorMode = 'dark';
+          break;
+        default:
+          newTheme.colorMode = 'classic';
+          break;
+      }
+      if (internalDesignSettings) {
+        Object.keys(internalDesignSettings).forEach(key => {
+          if (key === 'iconStyle') {
+            newTheme[key] = (0, _font.convertIconStyle)(internalDesignSettings.iconStyle);
+            return;
+          }
+
+          // ToDo: Find better solution
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          newTheme[key] = internalDesignSettings[key];
+        });
+      }
+      if (internalParagraphFormat) {
+        const {
+          themeResult
+        } = (0, _font.getHeadlineColorSelector)(internalParagraphFormat);
+
+        // Update Theme
+        Object.keys(themeResult).forEach(key => {
+          // ToDo: Find better solution
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          newTheme[key] = themeResult[key];
+        });
+      }
+      newTheme.fontSize = (0, _font.getFontSize)();
+    } else {
+      newTheme = theme;
+    }
+    setInternalTheme(newTheme);
+  }, [color, colorMode, colors, internalColor, internalColorMode, internalDesignSettings, internalParagraphFormat, secondaryColor, theme]);
+  const contextValue = (0, _react.useMemo)(() => {
+    if (internalDesignSettings && internalParagraphFormat) {
+      return {
+        paragraphFormat: internalParagraphFormat,
+        designSettings: internalDesignSettings,
+        theme: internalTheme
+      };
+    }
+    return undefined;
+  }, [internalDesignSettings, internalParagraphFormat, internalTheme]);
+  return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
+    theme: internalTheme
+  }, /*#__PURE__*/_react.default.createElement(ColorSchemeContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/_react.default.createElement(_reactHelmet.Helmet, null, /*#__PURE__*/_react.default.createElement("link", {
+    rel: "stylesheet",
+    href: "https://api.chayns-static.space/font/NotoColorEmoji/v1/font.css"
+  })), /*#__PURE__*/_react.default.createElement(_ColorSchemeProvider.StyledColorSchemeProvider, {
+    className: "color-scheme-provider",
+    style: {
+      ...cssVariables,
+      ...style
+    }
+  }, children), /*#__PURE__*/_react.default.createElement(GlobalStyle, null)));
+};
+ColorSchemeProvider.displayName = 'ColorSchemeProvider';
+var _default = exports.default = ColorSchemeProvider;
+//# sourceMappingURL=ColorSchemeProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSchemeProvider.js","names":["_colors","require","_chaynsApi","_react","_interopRequireWildcard","_reactHelmet","_styledComponents","_get","_font","_ColorSchemeProvider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ColorMode","GlobalStyle","createGlobalStyle","ColorSchemeContext","exports","createContext","undefined","useColorScheme","useContext","ColorSchemeProvider","children","color","colorMode","cssVariables","secondaryColor","siteId","style","paragraphFormat","designSettings","theme","colors","internalTheme","setInternalTheme","useState","internalDesignSettings","setInternalDesignSettings","internalParagraphFormat","setInternalParagraphFormat","internalColor","internalColorMode","useSite","useEffect","getDesignSettings","then","result","getParagraphFormat","newTheme","availableColors","getAvailableColorList","forEach","colorName","hexColor","getColorFromPalette","rgbColor","hexToRgb255","g","b","Light","Dark","keys","key","convertIconStyle","iconStyle","themeResult","getHeadlineColorSelector","fontSize","getFontSize","contextValue","useMemo","createElement","ThemeProvider","Provider","value","Helmet","rel","href","StyledColorSchemeProvider","className","displayName","_default"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { useSite } from 'chayns-api';\nimport React, {\n    createContext,\n    FC,\n    ReactNode,\n    useContext,\n    useEffect,\n    useMemo,\n    useState,\n} from 'react';\nimport { Helmet } from 'react-helmet';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { getDesignSettings, getParagraphFormat } from '../../api/theme/get';\nimport type { DesignSettings, ParagraphFormat } from '../../types/colorSchemeProvider';\nimport { convertIconStyle, getFontSize, getHeadlineColorSelector } from '../../utils/font';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\n\nenum ColorMode {\n    Classic,\n    Dark,\n    Light,\n}\n\nexport type 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 colors of the components\n     */\n    colors?: Theme;\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 design settings of a page.\n     */\n    designSettings?: DesignSettings;\n    /**\n     * The general format settings.\n     */\n    paragraphFormat?: ParagraphFormat[];\n    /**\n     * The secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * The site id of the page for which the design settings should be fetched\n     */\n    siteId?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\n    /**\n     * The theme for the components\n     */\n    theme?: Theme;\n};\n\nexport interface Theme {\n    [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n    theme: Theme;\n};\n\n// ToDo remove type after the framer-motion bug is Fixed\nexport type FramerMotionBugFix = WithTheme<unknown>;\n\nconst GlobalStyle = createGlobalStyle`\n    .ellipsis {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n`;\n\nexport interface ColorSchemeContextProps {\n    designSettings: DesignSettings;\n    paragraphFormat: ParagraphFormat[];\n    theme: Theme;\n}\n\nexport const ColorSchemeContext = createContext<ColorSchemeContextProps | undefined>(undefined);\n\nexport const useColorScheme = () => useContext(ColorSchemeContext);\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color,\n    colorMode,\n    cssVariables = {},\n    secondaryColor,\n    siteId,\n    style = {},\n    paragraphFormat,\n    designSettings,\n    theme,\n    colors,\n}) => {\n    const [internalTheme, setInternalTheme] = useState<Theme>(theme ?? {});\n    const [internalDesignSettings, setInternalDesignSettings] = useState<DesignSettings>();\n    const [internalParagraphFormat, setInternalParagraphFormat] = useState<ParagraphFormat[]>();\n\n    // Empty object is used to prevent error if ColorSchemeProvider is rendered on server\n    const { color: internalColor, colorMode: internalColorMode } = useSite() ?? {};\n\n    useEffect(() => {\n        if (designSettings) {\n            setInternalDesignSettings(designSettings);\n        } else if (!internalDesignSettings) {\n            void getDesignSettings(siteId).then((result) => {\n                setInternalDesignSettings(result);\n            });\n        }\n    }, [designSettings, internalDesignSettings, siteId]);\n\n    useEffect(() => {\n        if (paragraphFormat) {\n            setInternalParagraphFormat(paragraphFormat);\n        } else if (!internalParagraphFormat) {\n            void getParagraphFormat(siteId).then((result) => {\n                setInternalParagraphFormat(result);\n            });\n        }\n    }, [internalParagraphFormat, paragraphFormat, siteId]);\n\n    useEffect(() => {\n        let newTheme: Theme = {};\n\n        const availableColors = getAvailableColorList();\n\n        if (!colors || !theme) {\n            availableColors.forEach((colorName: string) => {\n                const hexColor = getColorFromPalette(colorName, {\n                    color: color ?? internalColor,\n                    colorMode: colorMode ?? internalColorMode,\n                    secondaryColor,\n                });\n\n                if (hexColor) {\n                    const rgbColor = hexToRgb255(hexColor);\n\n                    if (!theme) {\n                        newTheme[colorName] = hexColor;\n                    }\n\n                    if (rgbColor) {\n                        if (!theme) {\n                            newTheme[`${colorName}-rgb`] =\n                                `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                        }\n                    }\n                }\n            });\n        }\n\n        if (!theme) {\n            switch (colorMode ?? internalColorMode) {\n                case ColorMode.Light:\n                    newTheme.colorMode = 'light';\n                    break;\n                case ColorMode.Dark:\n                    newTheme.colorMode = 'dark';\n                    break;\n                default:\n                    newTheme.colorMode = 'classic';\n                    break;\n            }\n\n            if (internalDesignSettings) {\n                Object.keys(internalDesignSettings).forEach((key) => {\n                    if (key === 'iconStyle') {\n                        newTheme[key] = convertIconStyle(internalDesignSettings.iconStyle);\n\n                        return;\n                    }\n\n                    // ToDo: Find better solution\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n                    newTheme[key] = internalDesignSettings[key];\n                });\n            }\n\n            if (internalParagraphFormat) {\n                const { themeResult } = getHeadlineColorSelector(internalParagraphFormat);\n\n                // Update Theme\n                Object.keys(themeResult).forEach((key) => {\n                    // ToDo: Find better solution\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n                    newTheme[key] = themeResult[key];\n                });\n            }\n\n            newTheme.fontSize = getFontSize();\n        } else {\n            newTheme = theme;\n        }\n\n        setInternalTheme(newTheme);\n    }, [\n        color,\n        colorMode,\n        colors,\n        internalColor,\n        internalColorMode,\n        internalDesignSettings,\n        internalParagraphFormat,\n        secondaryColor,\n        theme,\n    ]);\n\n    const contextValue: ColorSchemeContextProps | undefined = useMemo(() => {\n        if (internalDesignSettings && internalParagraphFormat) {\n            return {\n                paragraphFormat: internalParagraphFormat,\n                designSettings: internalDesignSettings,\n                theme: internalTheme,\n            };\n        }\n\n        return undefined;\n    }, [internalDesignSettings, internalParagraphFormat, internalTheme]);\n\n    return (\n        <ThemeProvider theme={internalTheme}>\n            <ColorSchemeContext.Provider value={contextValue}>\n                <Helmet>\n                    <link\n                        rel=\"stylesheet\"\n                        href=\"https://api.chayns-static.space/font/NotoColorEmoji/v1/font.css\"\n                    />\n                </Helmet>\n                <StyledColorSchemeProvider\n                    className=\"color-scheme-provider\"\n                    style={{\n                        ...cssVariables,\n                        ...style,\n                    }}\n                >\n                    {children}\n                </StyledColorSchemeProvider>\n                <GlobalStyle />\n            </ColorSchemeContext.Provider>\n        </ThemeProvider>\n    );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledColorSchemeProvider = void 0;
+var _colors = require("@chayns/colors");
+var _styledComponents = require("styled-components");
+const StyledColorSchemeProvider = exports.StyledColorSchemeProvider = _styledComponents.styled.div`
+    color: var(--chayns-color--text);
+    ${props => (0, _colors.getAvailableColorList)().map(colorName => {
+  const colorNameRgb = `${colorName}-rgb`;
+  return [`--chayns-color--${colorName}: ${props.theme[colorName]};`, `--chayns-color-rgb--${colorName}: ${props.theme[colorNameRgb]};`];
+})}
+`;
+//# sourceMappingURL=ColorSchemeProvider.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSchemeProvider.styles.js","names":["_colors","require","_styledComponents","StyledColorSchemeProvider","exports","styled","div","props","getAvailableColorList","map","colorName","colorNameRgb","theme"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.styles.ts"],"sourcesContent":["import { getAvailableColorList } from '@chayns/colors';\nimport { styled } from 'styled-components';\n\nexport const StyledColorSchemeProvider = styled.div`\n    color: var(--chayns-color--text);\n    ${(props) =>\n        getAvailableColorList().map((colorName: string) => {\n            const colorNameRgb = `${colorName}-rgb`;\n            return [\n                `--chayns-color--${colorName}: ${props.theme[colorName]};`,\n                `--chayns-color-rgb--${colorName}: ${props.theme[colorNameRgb]};`,\n            ];\n        })}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAEO,MAAME,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAGE,wBAAM,CAACC,GAAG;AACnD;AACA,MAAOC,KAAK,IACJ,IAAAC,6BAAqB,EAAC,CAAC,CAACC,GAAG,CAAEC,SAAiB,IAAK;EAC/C,MAAMC,YAAY,GAAG,GAAGD,SAAS,MAAM;EACvC,OAAO,CACH,mBAAmBA,SAAS,KAAKH,KAAK,CAACK,KAAK,CAACF,SAAS,CAAC,GAAG,EAC1D,uBAAuBA,SAAS,KAAKH,KAAK,CAACK,KAAK,CAACD,YAAY,CAAC,GAAG,CACpE;AACL,CAAC,CAAC;AACV,CAAC","ignoreList":[]}