@chayns-components/core 5.0.0-beta.49 → 5.0.0-beta.492

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

@@ -1,51 +1,64 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledIconWrapper = exports.StyledButton = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const StyledButton = _styledComponents.default.button`
+import { motion } from 'framer-motion';
+import styled, { css } from 'styled-components';
+export const StyledMotionButton = styled(motion.button)`
+    align-items: center;
     background-color: ${_ref => {
   let {
-    isSecondary,
+    $isSecondary,
     theme
   } = _ref;
-  return isSecondary ? theme['202'] : theme['408'];
+  return $isSecondary ? theme['202'] : theme['408'];
 }};
     border-radius: 3px;
     box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
     border: none;
     color: ${_ref2 => {
   let {
-    isSecondary,
+    $isSecondary,
     theme
   } = _ref2;
-  return isSecondary ? theme.text : 'white';
+  return $isSecondary ? theme.text : 'white';
 }};
-    cursor: pointer;
-    display: inline-block;
-    line-height: 1.15;
-    min-height: 30px;
-    opacity: ${_ref3 => {
+    cursor: ${_ref3 => {
   let {
-    disabled
+    $isDisabled
   } = _ref3;
-  return disabled ? 0.5 : 1;
+  return $isDisabled ? 'default' : 'pointer';
 }};
-    padding: ${_ref4 => {
+    display: inline-flex;
+    line-height: 1.15;
+    min-height: 32px;
+    opacity: ${_ref4 => {
   let {
-    hasIcon
+    $isDisabled
   } = _ref4;
-  return `7px 12px 7px ${hasIcon ? '42px' : '12px'}`;
+  return $isDisabled ? 0.5 : 1;
 }};
     position: relative;
     user-select: none;
     transition: opacity 0.3s ease;
+
+    ${_ref5 => {
+  let {
+    $hasIcon,
+    $hasChildren
+  } = _ref5;
+  if ($hasIcon) {
+    if ($hasChildren) {
+      return css`
+                    padding: 7px 12px 7px 42px;
+                `;
+    }
+    return css`
+                padding: 7px 12px 7px 18px;
+            `;
+  }
+  return css`
+            padding: 7px 12px 7px 12px;
+        `;
+}}
 `;
-exports.StyledButton = StyledButton;
-const StyledIconWrapper = _styledComponents.default.span`
+export const StyledIconWrapper = styled.span`
     align-items: center;
     background-color: rgba(255, 255, 255, 0.2);
     bottom: 0;
@@ -56,5 +69,10 @@ const StyledIconWrapper = _styledComponents.default.span`
     top: 0;
     width: 30px;
 `;
-exports.StyledIconWrapper = StyledIconWrapper;
+export const StyledMotionChildrenWrapper = styled(motion.div)``;
+export const StyledMotionWaitCursorWrapper = styled(motion.div)`
+    align-items: center;
+    display: flex;
+    justify-content: center;
+`;
 //# sourceMappingURL=Button.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.js","names":["StyledButton","styled","button","isSecondary","theme","text","disabled","hasIcon","StyledIconWrapper","span"],"sources":["../../../src/components/button/Button.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { ButtonProps } from './Button';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledButtonProps = ButtonProps &\n    WithTheme<{\n        hasIcon: boolean;\n    }>;\n\nexport const StyledButton = styled.button<StyledButtonProps>`\n    background-color: ${({ isSecondary, theme }: StyledButtonProps) =>\n        isSecondary ? theme['202'] : theme['408']};\n    border-radius: 3px;\n    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);\n    border: none;\n    color: ${({ isSecondary, theme }: StyledButtonProps) => (isSecondary ? theme.text : 'white')};\n    cursor: pointer;\n    display: inline-block;\n    line-height: 1.15;\n    min-height: 30px;\n    opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};\n    padding: ${({ hasIcon }) => `7px 12px 7px ${hasIcon ? '42px' : '12px'}`};\n    position: relative;\n    user-select: none;\n    transition: opacity 0.3s ease;\n`;\n\nexport const StyledIconWrapper = styled.span`\n    align-items: center;\n    background-color: rgba(255, 255, 255, 0.2);\n    bottom: 0;\n    display: flex;\n    justify-content: center;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 30px;\n`;\n"],"mappings":";;;;;;AAAA;AAAuC;AAShC,MAAMA,YAAY,GAAGC,yBAAM,CAACC,MAA0B;AAC7D,wBAAwB;EAAA,IAAC;IAAEC,WAAW;IAAEC;EAAyB,CAAC;EAAA,OAC1DD,WAAW,GAAGC,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAClD;AACA;AACA;AACA,aAAa;EAAA,IAAC;IAAED,WAAW;IAAEC;EAAyB,CAAC;EAAA,OAAMD,WAAW,GAAGC,KAAK,CAACC,IAAI,GAAG,OAAO;AAAA,CAAE;AACjG;AACA;AACA;AACA;AACA,eAAe;EAAA,IAAC;IAAEC;EAAS,CAAC;EAAA,OAAMA,QAAQ,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AACtD,eAAe;EAAA,IAAC;IAAEC;EAAQ,CAAC;EAAA,OAAM,gBAAeA,OAAO,GAAG,MAAM,GAAG,MAAO,EAAC;AAAA,CAAC;AAC5E;AACA;AACA;AACA,CAAC;AAAC;AAEK,MAAMC,iBAAiB,GAAGP,yBAAM,CAACQ,IAAK;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAAC"}
+{"version":3,"file":"Button.styles.js","names":["motion","styled","css","StyledMotionButton","button","_ref","$isSecondary","theme","_ref2","text","_ref3","$isDisabled","_ref4","_ref5","$hasIcon","$hasChildren","StyledIconWrapper","span","StyledMotionChildrenWrapper","div","StyledMotionWaitCursorWrapper"],"sources":["../../../src/components/button/Button.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledButtonProps = WithTheme<{\n    $hasIcon: boolean;\n    $hasChildren: boolean;\n    $isDisabled?: boolean;\n    $isSecondary?: boolean;\n}>;\n\nexport const StyledMotionButton = styled(motion.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: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    display: inline-flex;\n    line-height: 1.15;\n    min-height: 32px;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    user-select: none;\n    transition: opacity 0.3s ease;\n\n    ${({ $hasIcon, $hasChildren }) => {\n        if ($hasIcon) {\n            if ($hasChildren) {\n                return css`\n                    padding: 7px 12px 7px 42px;\n                `;\n            }\n            return css`\n                padding: 7px 12px 7px 18px;\n            `;\n        }\n        return css`\n            padding: 7px 12px 7px 12px;\n        `;\n    }}\n`;\n\nexport const StyledIconWrapper = styled.span`\n    align-items: center;\n    background-color: rgba(255, 255, 255, 0.2);\n    bottom: 0;\n    display: flex;\n    justify-content: center;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 30px;\n`;\n\nexport const StyledMotionChildrenWrapper = styled(motion.div)<FramerMotionBugFix>``;\n\nexport const StyledMotionWaitCursorWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    justify-content: center;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAU/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACD,MAAM,CAACI,MAAM,CAAqB;AAC3E;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC,YAAY;IAAEC;EAAyB,CAAC,GAAAF,IAAA;EAAA,OAC3DC,YAAY,GAAGC,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACnD;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEF,YAAY;IAAEC;EAAyB,CAAC,GAAAC,KAAA;EAAA,OAAMF,YAAY,GAAGC,KAAK,CAACE,IAAI,GAAG,OAAO;AAAA,CAAE;AACnG,cAAcC,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OAAMC,WAAW,GAAG,SAAS,GAAG,SAAS;AAAA,CAAE;AACzE;AACA;AACA;AACA,eAAeC,KAAA;EAAA,IAAC;IAAED;EAAY,CAAC,GAAAC,KAAA;EAAA,OAAMD,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC5D;AACA;AACA;AACA;AACA,MAAME,KAAA,IAAgC;EAAA,IAA/B;IAAEC,QAAQ;IAAEC;EAAa,CAAC,GAAAF,KAAA;EACzB,IAAIC,QAAQ,EAAE;IACV,IAAIC,YAAY,EAAE;MACd,OAAOb,GAAI;AAC3B;AACA,iBAAiB;IACL;IACA,OAAOA,GAAI;AACvB;AACA,aAAa;EACL;EACA,OAAOA,GAAI;AACnB;AACA,SAAS;AACL,CAAE;AACN,CAAC;AAED,OAAO,MAAMc,iBAAiB,GAAGf,MAAM,CAACgB,IAAK;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGjB,MAAM,CAACD,MAAM,CAACmB,GAAG,CAAsB,EAAC;AAEnF,OAAO,MAAMC,6BAA6B,GAAGnB,MAAM,CAACD,MAAM,CAACmB,GAAG,CAAsB;AACpF;AACA;AACA;AACA,CAAC"}

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

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

package/lib/components/checkbox/Checkbox.js

@@ -1,44 +1,41 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _uuid = require("../../hooks/uuid");
-var _Checkbox = require("./Checkbox.styles");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+import React, { useCallback, useMemo, useState } from 'react';
+import { useUuid } from '../../hooks/uuid';
+import { getHeightOfSingleTextLine } from '../../utils/calculate';
+import { StyledCheckbox, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';
 const Checkbox = _ref => {
   let {
     children,
     isChecked,
     isDisabled,
+    labelClassName,
     onChange,
-    shouldShowAsSwitch
+    shouldShowAsSwitch,
+    shouldShowCentered = false
   } = _ref;
-  const [isActive, setIsActive] = (0, _react.useState)(isChecked !== null && isChecked !== void 0 ? isChecked : false);
-  const handleChange = (0, _react.useCallback)(event => {
+  const [isActive, setIsActive] = useState(isChecked ?? false);
+  const handleChange = 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, {
+  const uuid = useUuid();
+  const lineHeight = useMemo(() => shouldShowCentered ? undefined : getHeightOfSingleTextLine(), [shouldShowCentered]);
+  return /*#__PURE__*/React.createElement(StyledCheckbox, null, /*#__PURE__*/React.createElement(StyledCheckboxInput, {
     checked: isChecked,
     disabled: isDisabled,
     id: uuid,
     onChange: handleChange,
     type: "checkbox"
-  }), /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxLabel, {
+  }), /*#__PURE__*/React.createElement(StyledCheckboxLabel, {
+    className: labelClassName,
     htmlFor: uuid,
-    isChecked: isChecked !== null && isChecked !== void 0 ? isChecked : isActive,
-    isDisabled: isDisabled,
-    shouldShowAsSwitch: shouldShowAsSwitch
+    $isChecked: isChecked ?? isActive,
+    $isDisabled: isDisabled,
+    $shouldShowAsSwitch: shouldShowAsSwitch,
+    $lineHeight: lineHeight
   }, children));
 };
 Checkbox.displayName = 'Checkbox';
-var _default = Checkbox;
-exports.default = _default;
+export default Checkbox;
 //# sourceMappingURL=Checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["Checkbox","children","isChecked","isDisabled","onChange","shouldShowAsSwitch","isActive","setIsActive","useState","handleChange","useCallback","event","target","checked","uuid","useUuid","displayName"],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    ReactNode,\n    useCallback,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { StyledCheckbox, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactNode;\n    /**\n     * Indicates whether the checkbox or switch is selected\n     */\n    isChecked?: boolean;\n    /**\n     * Disables the checkbox or switch so it cannot be toggled\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed if the checked value changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    onChange,\n    shouldShowAsSwitch,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setIsActive(event.target.checked);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [onChange]\n    );\n\n    const uuid = useUuid();\n\n    return (\n        <StyledCheckbox>\n            <StyledCheckboxInput\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n            <StyledCheckboxLabel\n                htmlFor={uuid}\n                isChecked={isChecked ?? isActive}\n                isDisabled={isDisabled}\n                shouldShowAsSwitch={shouldShowAsSwitch}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":";;;;;;AAAA;AAQA;AACA;AAA6F;AAAA;AAyB7F,MAAMA,QAA2B,GAAG,QAM9B;EAAA,IAN+B;IACjCC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,QAAQ;IACRC;EACJ,CAAC;EACG,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAG,IAAAC,eAAQ,EAACN,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,KAAK,CAAC;EAE5D,MAAMO,YAAY,GAAG,IAAAC,kBAAW,EAC3BC,KAAoC,IAAK;IACtCJ,WAAW,CAACI,KAAK,CAACC,MAAM,CAACC,OAAO,CAAC;IAEjC,IAAI,OAAOT,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACO,KAAK,CAAC;IACnB;EACJ,CAAC,EACD,CAACP,QAAQ,CAAC,CACb;EAED,MAAMU,IAAI,GAAG,IAAAC,aAAO,GAAE;EAEtB,oBACI,6BAAC,wBAAc,qBACX,6BAAC,6BAAmB;IAChB,OAAO,EAAEb,SAAU;IACnB,QAAQ,EAAEC,UAAW;IACrB,EAAE,EAAEW,IAAK;IACT,QAAQ,EAAEL,YAAa;IACvB,IAAI,EAAC;EAAU,EACjB,eACF,6BAAC,6BAAmB;IAChB,OAAO,EAAEK,IAAK;IACd,SAAS,EAAEZ,SAAS,aAATA,SAAS,cAATA,SAAS,GAAII,QAAS;IACjC,UAAU,EAAEH,UAAW;IACvB,kBAAkB,EAAEE;EAAmB,GAEtCJ,QAAQ,CACS,CACT;AAEzB,CAAC;AAEDD,QAAQ,CAACgB,WAAW,GAAG,UAAU;AAAC,eAEnBhB,QAAQ;AAAA"}
+{"version":3,"file":"Checkbox.js","names":["React","useCallback","useMemo","useState","useUuid","getHeightOfSingleTextLine","StyledCheckbox","StyledCheckboxInput","StyledCheckboxLabel","Checkbox","_ref","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","shouldShowCentered","isActive","setIsActive","handleChange","event","target","checked","uuid","lineHeight","undefined","createElement","disabled","id","type","className","htmlFor","$isChecked","$isDisabled","$shouldShowAsSwitch","$lineHeight","displayName"],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    ReactElement,\n    useCallback,\n    useMemo,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport { StyledCheckbox, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactElement | 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     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n    /**\n     * Whether the Checkbox should be displayed centered to the label or at the top\n     */\n    shouldShowCentered?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    labelClassName,\n    onChange,\n    shouldShowAsSwitch,\n    shouldShowCentered = false,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setIsActive(event.target.checked);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [onChange],\n    );\n\n    const uuid = useUuid();\n\n    const lineHeight = useMemo(\n        () => (shouldShowCentered ? undefined : getHeightOfSingleTextLine()),\n        [shouldShowCentered],\n    );\n\n    return (\n        <StyledCheckbox>\n            <StyledCheckboxInput\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n            <StyledCheckboxLabel\n                className={labelClassName}\n                htmlFor={uuid}\n                $isChecked={isChecked ?? isActive}\n                $isDisabled={isDisabled}\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                $lineHeight={lineHeight}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"AAAA,OAAOA,KAAK,IAKRC,WAAW,EACXC,OAAO,EACPC,QAAQ,QACL,OAAO;AACd,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,yBAAyB,QAAQ,uBAAuB;AACjE,SAASC,cAAc,EAAEC,mBAAmB,EAAEC,mBAAmB,QAAQ,mBAAmB;AAiC5F,MAAMC,QAA2B,GAAGC,IAAA,IAQ9B;EAAA,IAR+B;IACjCC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,cAAc;IACdC,QAAQ;IACRC,kBAAkB;IAClBC,kBAAkB,GAAG;EACzB,CAAC,GAAAP,IAAA;EACG,MAAM,CAACQ,QAAQ,EAAEC,WAAW,CAAC,GAAGhB,QAAQ,CAACS,SAAS,IAAI,KAAK,CAAC;EAE5D,MAAMQ,YAAY,GAAGnB,WAAW,CAC3BoB,KAAoC,IAAK;IACtCF,WAAW,CAACE,KAAK,CAACC,MAAM,CAACC,OAAO,CAAC;IAEjC,IAAI,OAAOR,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACM,KAAK,CAAC;IACnB;EACJ,CAAC,EACD,CAACN,QAAQ,CACb,CAAC;EAED,MAAMS,IAAI,GAAGpB,OAAO,CAAC,CAAC;EAEtB,MAAMqB,UAAU,GAAGvB,OAAO,CACtB,MAAOe,kBAAkB,GAAGS,SAAS,GAAGrB,yBAAyB,CAAC,CAAE,EACpE,CAACY,kBAAkB,CACvB,CAAC;EAED,oBACIjB,KAAA,CAAA2B,aAAA,CAACrB,cAAc,qBACXN,KAAA,CAAA2B,aAAA,CAACpB,mBAAmB;IAChBgB,OAAO,EAAEX,SAAU;IACnBgB,QAAQ,EAAEf,UAAW;IACrBgB,EAAE,EAAEL,IAAK;IACTT,QAAQ,EAAEK,YAAa;IACvBU,IAAI,EAAC;EAAU,CAClB,CAAC,eACF9B,KAAA,CAAA2B,aAAA,CAACnB,mBAAmB;IAChBuB,SAAS,EAAEjB,cAAe;IAC1BkB,OAAO,EAAER,IAAK;IACdS,UAAU,EAAErB,SAAS,IAAIM,QAAS;IAClCgB,WAAW,EAAErB,UAAW;IACxBsB,mBAAmB,EAAEnB,kBAAmB;IACxCoB,WAAW,EAAEX;EAAW,GAEvBd,QACgB,CACT,CAAC;AAEzB,CAAC;AAEDF,QAAQ,CAAC4B,WAAW,GAAG,UAAU;AAEjC,eAAe5B,QAAQ"}

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

@@ -1,6 +1,13 @@
+/// <reference types="react" />
+import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
 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>;
+export declare const StyledCheckbox: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const StyledCheckboxInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>;
+type StyledCheckboxLabelProps = WithTheme<{
+    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];
+    $isDisabled?: CheckboxProps['isDisabled'];
+    $isChecked?: CheckboxProps['isChecked'];
+    $lineHeight?: number;
+}>;
+export declare const StyledCheckboxLabel: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, StyledCheckboxLabelProps>>;
+export {};

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

@@ -1,66 +1,65 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledCheckboxLabel = exports.StyledCheckboxInput = exports.StyledCheckbox = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const StyledCheckbox = _styledComponents.default.div`
+import styled, { css } from 'styled-components';
+export const StyledCheckbox = styled.div`
     align-items: center;
     display: flex;
     position: relative;
 `;
-exports.StyledCheckbox = StyledCheckbox;
-const StyledCheckboxInput = _styledComponents.default.input`
+export const StyledCheckboxInput = styled.input`
     display: none;
 `;
-exports.StyledCheckboxInput = StyledCheckboxInput;
-const StyledCheckboxLabel = _styledComponents.default.label`
-    cursor: ${_ref => {
+export const StyledCheckboxLabel = styled.label`
+    color: ${_ref => {
   let {
-    isDisabled
+    theme
   } = _ref;
-  return isDisabled ? 'default' : 'pointer';
+  return theme.text;
 }};
-    opacity: ${_ref2 => {
+    cursor: ${_ref2 => {
   let {
-    isDisabled
+    $isDisabled
   } = _ref2;
-  return isDisabled ? 0.5 : 1;
+  return $isDisabled ? 'default' : 'pointer';
 }};
-    padding-left: ${_ref3 => {
+    opacity: ${_ref3 => {
   let {
-    shouldShowAsSwitch
+    $isDisabled
   } = _ref3;
-  return shouldShowAsSwitch ? '48px' : '20px';
+  return $isDisabled ? 0.5 : 1;
+}};
+    padding-left: ${_ref4 => {
+  let {
+    $shouldShowAsSwitch
+  } = _ref4;
+  return $shouldShowAsSwitch ? '48px' : '20px';
 }};
     transition: opacity 0.2s ease;
     user-select: none;
 
     &:after {
-        ${_ref4 => {
+        ${_ref5 => {
   let {
-    isChecked,
-    shouldShowAsSwitch
-  } = _ref4;
-  return shouldShowAsSwitch ? (0, _styledComponents.css)`
+    $isChecked,
+    $shouldShowAsSwitch,
+    $lineHeight
+  } = _ref5;
+  return $shouldShowAsSwitch ? 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});
+                      top: ${$lineHeight ? `${$lineHeight / 1.5}px` : '50%'};
+                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);
                       transition: transform 0.2s ease;
                       width: 16px;
-                  ` : (0, _styledComponents.css)`
+                  ` : css`
                       border-right: 2px solid #fff;
                       border-bottom: 2px solid #fff;
                       height: 10px;
-                      left: 1px;
-                      opacity: ${isChecked ? 1 : 0};
-                      transform: translateY(-50%) rotateZ(37deg);
+                      left: 2px;
+                      opacity: ${$isChecked ? 1 : 0};
+                      top: ${$lineHeight ? `calc(${$lineHeight / 1.5}px - 2px)` : 'calc(50% - 2px)'};
+                      transform: rotateZ(37deg) translateY(-50%);
                       transition: opacity 0.2s ease;
                       width: 5.5px;
                   `;
@@ -68,58 +67,66 @@ const StyledCheckboxLabel = _styledComponents.default.label`
 
         content: ' ';
         position: absolute;
-        top: 50%;
-        transform-origin: 100% 100%;
     }
 
     &:before {
-        background-color: ${_ref5 => {
+        background-color: ${_ref6 => {
   let {
-    isChecked,
-    shouldShowAsSwitch,
+    $isChecked,
+    $shouldShowAsSwitch,
     theme
-  } = _ref5;
-  if (shouldShowAsSwitch) {
-    return isChecked ? theme.green : theme.red;
+  } = _ref6;
+  if ($shouldShowAsSwitch) {
+    return $isChecked ? theme.green : theme.red;
   }
-  return isChecked ? theme['408'] : theme['403'];
+  return $isChecked ? theme['408'] : theme['403'];
 }};
-        border: 1px solid rgba(${_ref6 => {
+        border: 1px solid rgba(${_ref7 => {
   let {
     theme
-  } = _ref6;
+  } = _ref7;
   return theme['409-rgb'];
 }}, 0.5);
-        border-radius: ${_ref7 => {
+        border-radius: ${_ref8 => {
   let {
-    shouldShowAsSwitch
-  } = _ref7;
-  return shouldShowAsSwitch ? '100px' : 0;
+    $shouldShowAsSwitch
+  } = _ref8;
+  return $shouldShowAsSwitch ? '100px' : 0;
 }};
         content: ' ';
-        height: ${_ref8 => {
+        height: ${_ref9 => {
   let {
-    shouldShowAsSwitch
-  } = _ref8;
-  return shouldShowAsSwitch ? '13px' : '15px';
+    $shouldShowAsSwitch
+  } = _ref9;
+  return $shouldShowAsSwitch ? '13px' : '15px';
 }};
-        left: ${_ref9 => {
+        left: ${_ref10 => {
   let {
-    shouldShowAsSwitch
-  } = _ref9;
-  return shouldShowAsSwitch ? '10px' : 0;
+    $shouldShowAsSwitch
+  } = _ref10;
+  return $shouldShowAsSwitch ? '10px' : 0;
 }};
         position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
         transition: background-color 0.2s ease;
-        width: ${_ref10 => {
+        width: ${_ref11 => {
   let {
-    shouldShowAsSwitch
-  } = _ref10;
-  return shouldShowAsSwitch ? '28px' : '15px';
+    $shouldShowAsSwitch
+  } = _ref11;
+  return $shouldShowAsSwitch ? '28px' : '15px';
 }};
+        ${_ref12 => {
+  let {
+    $lineHeight
+  } = _ref12;
+  return $lineHeight ? css`
+                      top: ${$lineHeight / 1.5}px;
+                      transform: translateY(-50%);
+                  ` : css`
+                      top: 50%;
+                      transform: translateY(-50%);
+                  `;
+}}
+        }
     }
 `;
-exports.StyledCheckboxLabel = StyledCheckboxLabel;
 //# sourceMappingURL=Checkbox.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.js","names":["StyledCheckbox","styled","div","StyledCheckboxInput","input","StyledCheckboxLabel","label","isDisabled","shouldShowAsSwitch","isChecked","css","theme","green","red"],"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    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":";;;;;;AAAA;AAAgD;AAAA;AAIzC,MAAMA,cAAc,GAAGC,yBAAM,CAACC,GAAI;AACzC;AACA;AACA;AACA,CAAC;AAAC;AAEK,MAAMC,mBAAmB,GAAGF,yBAAM,CAACG,KAAM;AAChD;AACA,CAAC;AAAC;AAIK,MAAMC,mBAAmB,GAAGJ,yBAAM,CAACK,KAAgC;AAC1E,cAAc;EAAA,IAAC;IAAEC;EAAW,CAAC;EAAA,OAAMA,UAAU,GAAG,SAAS,GAAG,SAAS;AAAA,CAAE;AACvE,eAAe;EAAA,IAAC;IAAEA;EAAW,CAAC;EAAA,OAAMA,UAAU,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC1D,oBAAoB;EAAA,IAAC;IAAEC;EAAmB,CAAC;EAAA,OAAMA,kBAAkB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAE;AACvF;AACA;AACA;AACA;AACA,UAAU;EAAA,IAAC;IAAEC,SAAS;IAAED;EAAmB,CAAC;EAAA,OAChCA,kBAAkB,GACZ,IAAAE,qBAAG,CAAC;AACtB;AACA;AACA;AACA;AACA;AACA,+DAA+DD,SAAS,GAAG,MAAM,GAAG,CAAE;AACtF;AACA;AACA,mBAAmB,GACD,IAAAC,qBAAG,CAAC;AACtB;AACA;AACA;AACA;AACA,iCAAiCD,SAAS,GAAG,CAAC,GAAG,CAAE;AACnD;AACA;AACA;AACA,mBAAmB;AAAA,CAAC;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4B,SAIY;EAAA,IAJX;IACjBA,SAAS;IACTD,kBAAkB;IAClBG;EACsB,CAAC;EACvB,IAAIH,kBAAkB,EAAE;IACpB,OAAOC,SAAS,GAAGE,KAAK,CAACC,KAAK,GAAGD,KAAK,CAACE,GAAG;EAC9C;EAEA,OAAOJ,SAAS,GAAGE,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AAClD,CAAE;AACV,iCAAiC;EAAA,IAAC;IAAEA;EAAgC,CAAC;EAAA,OAAKA,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC3F,yBAAyB;EAAA,IAAC;IAAEH;EAAmB,CAAC;EAAA,OAAMA,kBAAkB,GAAG,OAAO,GAAG,CAAC;AAAA,CAAE;AACxF;AACA,kBAAkB;EAAA,IAAC;IAAEA;EAAmB,CAAC;EAAA,OAAMA,kBAAkB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAE;AACrF,gBAAgB;EAAA,IAAC;IAAEA;EAAmB,CAAC;EAAA,OAAMA,kBAAkB,GAAG,MAAM,GAAG,CAAC;AAAA,CAAE;AAC9E;AACA;AACA;AACA;AACA,iBAAiB;EAAA,IAAC;IAAEA;EAAmB,CAAC;EAAA,OAAMA,kBAAkB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAE;AACpF;AACA,CAAC;AAAC"}
+{"version":3,"file":"Checkbox.styles.js","names":["styled","css","StyledCheckbox","div","StyledCheckboxInput","input","StyledCheckboxLabel","label","_ref","theme","text","_ref2","$isDisabled","_ref3","_ref4","$shouldShowAsSwitch","_ref5","$isChecked","$lineHeight","_ref6","green","red","_ref7","_ref8","_ref9","_ref10","_ref11","_ref12"],"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<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $isChecked?: CheckboxProps['isChecked'];\n    $lineHeight?: number;\n}>;\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, $lineHeight }) =>\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 ? `${$lineHeight / 1.5}px` : '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                          ? `calc(${$lineHeight / 1.5}px - 2px)`\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        }: 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        transition: background-color 0.2s ease;\n        width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n        ${({ $lineHeight }) =>\n            $lineHeight\n                ? css`\n                      top: ${$lineHeight / 1.5}px;\n                      transform: translateY(-50%);\n                  `\n                : css`\n                      top: 50%;\n                      transform: translateY(-50%);\n                  `}\n        }\n    }\n`;\n"],"mappings":"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"}

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

@@ -1,4 +1,5 @@
 import { FC, ReactNode } from 'react';
+import type { DesignSettings } from '../../types/colorSchemeProvider';
 declare enum ColorMode {
     Classic = 0,
     Dark = 1,
@@ -23,6 +24,10 @@ type ColorSchemeProviderProps = {
     cssVariables?: {
         [key: string]: string | number;
     };
+    /**
+     * The design settings of a page.
+     */
+    designSettings?: DesignSettings;
     /**
      * The secondary hex color to be used for the children
      */
@@ -40,5 +45,6 @@ export interface Theme {
 export type WithTheme<T> = T & {
     theme: Theme;
 };
+export type FramerMotionBugFix = WithTheme<unknown>;
 declare const ColorSchemeProvider: FC<ColorSchemeProviderProps>;
 export default ColorSchemeProvider;