@astral/ui 0.1.1 → 0.2.1

package/esm/src/Badge/Badge.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BadgeProps } from './types';
 declare const Badge: ({ children, color, ...props }: BadgeProps) => JSX.Element;
 export default Badge;

package/esm/src/Badge/styled.d.ts

@@ -23,7 +23,7 @@ export declare const StyledBadge: import("@emotion/styled").StyledComponent<{
     color?: "primary" | "secondary" | "default" | "error" | "warning" | "info" | "success" | undefined;
     overlap?: "circular" | "rectangular" | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "dot" | "standard" | undefined;
+    variant?: "standard" | "dot" | undefined;
 } & {
     anchorOrigin?: import("@mui/material").BadgeOrigin | undefined;
     components?: {
@@ -43,7 +43,7 @@ export declare const StyledBadge: import("@emotion/styled").StyledComponent<{
     variant?: string | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "children" | "sx" | "variant" | "components" | "componentsProps" | "invisible" | "overlap" | "anchorOrigin" | "badgeContent" | "max" | "showZero"> & {
+}, "components" | "color" | keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "componentsProps" | "invisible" | "anchorOrigin" | "overlap" | "badgeContent" | "max" | "showZero"> & {
     theme?: Theme | undefined;
 } & Omit<BadgeProps, "color"> & {
     customColor: BadgeColor;

package/esm/src/Button/Button.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { ButtonProps } from './types';
 export declare const Button: ({ children, startIcon, endIcon, loading, ...props }: ButtonProps) => JSX.Element;

package/esm/src/Button/styled.js

@@ -14,12 +14,15 @@ export var StyledButton = styled(ButtonBase, {
     shouldForwardProp: function (prop) {
         return prop !== 'startIcon' && prop !== 'endIcon' && prop !== 'loading';
     },
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  pointer-events: ", ";\n  color: ", ";\n\n  > span:first-of-type {\n    display: inherit;\n    margin-right: ", ";\n  }\n\n  > span:last-of-type {\n    display: inherit;\n    margin-left: ", ";\n  }\n\n  .MuiCircularProgress-root {\n    width: 16px !important;\n    height: 16px !important;\n    transform: translate(-50%, -50%);\n    position: absolute;\n\n    color: ", ";\n  }\n"], ["\n  pointer-events: ", ";\n  color: ", ";\n\n  > span:first-of-type {\n    display: inherit;\n    margin-right: ", ";\n  }\n\n  > span:last-of-type {\n    display: inherit;\n    margin-left: ", ";\n  }\n\n  .MuiCircularProgress-root {\n    width: 16px !important;\n    height: 16px !important;\n    transform: translate(-50%, -50%);\n    position: absolute;\n\n    color: ", ";\n  }\n"])), function (_a) {
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  pointer-events: ", ";\n  color: ", ";\n\n  &:focus {\n    color: ", ";\n  }\n\n  > span:first-of-type {\n    display: inherit;\n    margin-right: ", ";\n  }\n\n  > span:last-of-type {\n    display: inherit;\n    margin-left: ", ";\n  }\n\n  .MuiCircularProgress-root {\n    width: 16px !important;\n    height: 16px !important;\n    transform: translate(-50%, -50%);\n    position: absolute;\n\n    color: ", ";\n  }\n"], ["\n  pointer-events: ", ";\n  color: ", ";\n\n  &:focus {\n    color: ", ";\n  }\n\n  > span:first-of-type {\n    display: inherit;\n    margin-right: ", ";\n  }\n\n  > span:last-of-type {\n    display: inherit;\n    margin-left: ", ";\n  }\n\n  .MuiCircularProgress-root {\n    width: 16px !important;\n    height: 16px !important;\n    transform: translate(-50%, -50%);\n    position: absolute;\n\n    color: ", ";\n  }\n"])), function (_a) {
     var loading = _a.loading;
     return (loading ? 'none' : 'inherit');
 }, function (_a) {
     var loading = _a.loading;
     return loading && 'transparent';
+}, function (_a) {
+    var loading = _a.loading;
+    return loading && 'transparent';
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing(2);

package/esm/src/ButtonBase/ButtonBase.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { BaseButtonProps } from './types';
 export declare const ButtonBase: ({ children, variant, color, ...props }: BaseButtonProps) => JSX.Element;

package/esm/src/ButtonBase/styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Palette, Theme } from '../theme';
+import { Theme } from '../theme';
 import { BaseButtonProps, ButtonColor, ButtonSize, ButtonState, ButtonVariant } from './types';
 declare type StyledButtonBaseThemeProps = {
     customColor?: ButtonColor;
@@ -10,11 +10,6 @@ declare type StyledButtonBaseThemeProps = {
 export declare const getColor: ({ theme, customVariant, customColor, buttonState, }: StyledButtonBaseThemeProps & {
     buttonState: ButtonState;
 }) => string;
-export declare const getBgText: ({ palette, buttonState, colorVariant, }: {
-    palette: Palette;
-    buttonState: ButtonState;
-    colorVariant: string;
-}) => string;
 export declare const getBgColor: ({ customColor, customVariant, buttonState, theme, }: StyledButtonBaseThemeProps & {
     buttonState: ButtonState;
 }) => string;

package/esm/src/ButtonBase/styled.js

@@ -15,131 +15,134 @@ var __assign = (this && this.__assign) || function () {
 };
 import ButtonUnstyled, { buttonUnstyledClasses, } from '@mui/base/ButtonUnstyled';
 import { styled } from '../styles';
-import { ButtonColors, ButtonSizes, ButtonStates, ButtonVariants, } from './constants';
-var BACKGROUND_COLOR_VARIANTS = {
-    default: {
-        contained: '800',
-        light: '100',
-        text: '100',
-    },
-    hover: {
-        contained: '700',
-        light: '200',
-        text: '200',
-    },
-    focus: {
-        contained: '900',
-        light: '100',
-        text: '100',
-    },
-};
+import { ButtonSizes, ButtonStates, ButtonVariants } from './constants';
 export var getColor = function (_a) {
     var theme = _a.theme, customVariant = _a.customVariant, customColor = _a.customColor, buttonState = _a.buttonState;
-    var palette = theme.palette;
-    if (buttonState === ButtonStates.ACTIVE) {
-        if (customVariant === ButtonVariants.LINK)
-            return palette.grey['900'];
-        return palette.primary.contrastText;
-    }
-    if (customVariant === ButtonVariants.TEXT) {
-        if (buttonState === ButtonStates.FOCUS)
-            return theme.palette.primary.main;
-        return palette.grey['900'];
-    }
-    if (customVariant === ButtonVariants.CONTAINED)
-        return palette.primary.contrastText;
-    if (customVariant === ButtonVariants.LIGHT) {
-        if (customColor === ButtonColors.PRIMARY) {
-            if (buttonState === ButtonStates.DEFAULT)
-                return palette.grey['900'];
-            if (buttonState === ButtonStates.HOVER)
-                return palette.grey['900'];
-            if (buttonState === ButtonStates.FOCUS)
-                return palette.primary['800'];
-        }
-        if (customColor === ButtonColors.ERROR)
-            return palette.red['900'];
-        if (customColor === ButtonColors.SUCCESS)
-            return palette.green['900'];
-        if (customColor === ButtonColors.WARNING)
-            return palette.yellow['900'];
-        return palette.grey['900'];
+    var textColorVariants = {
+        light: {
+            error: {
+                default: theme.palette.red['900'],
+                hover: theme.palette.red['900'],
+                active: theme.palette.red['900'],
+                focus: theme.palette.red['900'],
+            },
+            success: {
+                default: theme.palette.green['900'],
+                hover: theme.palette.green['900'],
+                active: theme.palette.green['900'],
+                focus: theme.palette.green['900'],
+            },
+            primary: {
+                default: theme.palette.grey['900'],
+                hover: theme.palette.grey['900'],
+                active: theme.palette.primary['800'],
+                focus: theme.palette.grey['900'],
+            },
+            warning: {
+                default: theme.palette.yellow['900'],
+                hover: theme.palette.yellow['900'],
+                active: theme.palette.yellow['900'],
+                focus: theme.palette.yellow['900'],
+            },
+        },
+        contained: theme.palette.primary.contrastText,
+        text: {
+            default: theme.palette.grey['900'],
+            hover: theme.palette.grey['900'],
+            active: theme.palette.primary['800'],
+            focus: theme.palette.grey['900'],
+        },
+        link: {
+            default: theme.palette.primary['800'],
+            hover: theme.palette.primary['700'],
+            active: theme.palette.primary['900'],
+            focus: theme.palette.primary['800'],
+        },
+    };
+    if (customVariant === ButtonVariants.CONTAINED) {
+        return textColorVariants.contained;
     }
-    if (customVariant === ButtonVariants.LINK) {
-        if (buttonState === ButtonStates.DEFAULT)
-            return palette.primary['800'];
-        if (buttonState === ButtonStates.HOVER)
-            return palette.primary['700'];
-        if (buttonState === ButtonStates.FOCUS)
-            return palette.primary.dark;
-        return palette.primary.main;
+    if (customVariant === ButtonVariants.LIGHT && customColor) {
+        return textColorVariants.light[customColor][buttonState];
     }
-    return palette.grey['900'];
-};
-export var getBgText = function (_a) {
-    var palette = _a.palette, buttonState = _a.buttonState, colorVariant = _a.colorVariant;
-    if (buttonState === ButtonStates.HOVER)
-        return palette.grey[colorVariant];
-    if (buttonState === ButtonStates.FOCUS)
-        return palette.primary[colorVariant];
-    return 'transparent';
-};
-var getBgContained = function (_a) {
-    var palette = _a.palette, colorVariant = _a.colorVariant, customColor = _a.customColor;
-    if (customColor === ButtonColors.ERROR)
-        return palette.red[colorVariant];
-    if (customColor === ButtonColors.SUCCESS)
-        return palette.green[colorVariant];
-    if (customColor === ButtonColors.WARNING)
-        return palette.yellow[colorVariant];
-    if (customColor === ButtonColors.PRIMARY)
-        return palette.primary[colorVariant];
-    return 'transparent';
-};
-var getBgLight = function (_a) {
-    var palette = _a.palette, colorVariant = _a.colorVariant, buttonState = _a.buttonState, customColor = _a.customColor;
-    if (customColor === ButtonColors.PRIMARY) {
-        if (buttonState === ButtonStates.DEFAULT)
-            return palette.grey[colorVariant];
-        if (buttonState === ButtonStates.HOVER)
-            return palette.grey[colorVariant];
-        if (buttonState === ButtonStates.FOCUS)
-            return palette.primary[colorVariant];
+    if (customVariant === ButtonVariants.TEXT) {
+        return textColorVariants.text[buttonState];
     }
-    if (customColor === ButtonColors.ERROR)
-        return palette.red[colorVariant];
-    if (customColor === ButtonColors.SUCCESS)
-        return palette.green[colorVariant];
-    if (customColor === ButtonColors.WARNING)
-        return palette.yellow[colorVariant];
-    return 'transparent';
+    return textColorVariants.link[buttonState];
 };
 export var getBgColor = function (_a) {
     var customColor = _a.customColor, customVariant = _a.customVariant, buttonState = _a.buttonState, theme = _a.theme;
-    var palette = theme.palette;
-    if (customVariant === ButtonVariants.LINK)
-        return 'transparent';
-    if (buttonState === ButtonStates.ACTIVE)
-        return palette.grey['900'];
-    var containedColor = BACKGROUND_COLOR_VARIANTS[buttonState].contained;
-    var lightColor = BACKGROUND_COLOR_VARIANTS[buttonState].light;
-    var textColor = BACKGROUND_COLOR_VARIANTS[buttonState].text;
-    if (customVariant === ButtonVariants.TEXT)
-        return getBgText({ buttonState: buttonState, palette: palette, colorVariant: textColor });
-    if (customVariant === ButtonVariants.CONTAINED)
-        return getBgContained({
-            palette: palette,
-            customColor: customColor,
-            colorVariant: containedColor,
-        });
-    if (customVariant === ButtonVariants.LIGHT)
-        return getBgLight({
-            palette: palette,
-            buttonState: buttonState,
-            customColor: customColor,
-            colorVariant: lightColor,
-        });
-    return 'transparent';
+    var bgColorVariants = {
+        light: {
+            error: {
+                default: theme.palette.red['100'],
+                hover: theme.palette.red['200'],
+                active: theme.palette.red['100'],
+                focus: theme.palette.red['100'],
+            },
+            success: {
+                default: theme.palette.green['100'],
+                hover: theme.palette.green['200'],
+                active: theme.palette.green['100'],
+                focus: theme.palette.green['100'],
+            },
+            primary: {
+                default: theme.palette.grey['100'],
+                hover: theme.palette.grey['200'],
+                active: theme.palette.primary['100'],
+                focus: theme.palette.grey['100'],
+            },
+            warning: {
+                default: theme.palette.yellow['100'],
+                hover: theme.palette.yellow['200'],
+                active: theme.palette.yellow['100'],
+                focus: theme.palette.yellow['100'],
+            },
+        },
+        contained: {
+            error: {
+                default: theme.palette.red['800'],
+                hover: theme.palette.red['700'],
+                active: theme.palette.red['900'],
+                focus: theme.palette.red['800'],
+            },
+            success: {
+                default: theme.palette.green['800'],
+                hover: theme.palette.green['700'],
+                active: theme.palette.green['900'],
+                focus: theme.palette.green['800'],
+            },
+            primary: {
+                default: theme.palette.primary['800'],
+                hover: theme.palette.primary['700'],
+                active: theme.palette.primary['900'],
+                focus: theme.palette.primary['800'],
+            },
+            warning: {
+                default: theme.palette.yellow['800'],
+                hover: theme.palette.yellow['700'],
+                active: theme.palette.yellow['900'],
+                focus: theme.palette.yellow['800'],
+            },
+        },
+        text: {
+            default: 'transparent',
+            hover: theme.palette.grey['200'],
+            active: theme.palette.primary['100'],
+            focus: 'transparent',
+        },
+        link: 'transparent',
+    };
+    if (customVariant === ButtonVariants.LIGHT && customColor) {
+        return bgColorVariants.light[customColor][buttonState];
+    }
+    if (customVariant === ButtonVariants.CONTAINED && customColor) {
+        return bgColorVariants.contained[customColor][buttonState];
+    }
+    if (customVariant === ButtonVariants.TEXT) {
+        return bgColorVariants.text[buttonState];
+    }
+    return bgColorVariants.link;
 };
 export var getButtonHeight = function (_a) {
     var size = _a.size;
@@ -164,7 +167,7 @@ export var StyledButtonBase = styled(ButtonUnstyled, {
     shouldForwardProp: function (prop) {
         return prop !== 'customColor' && prop !== 'customVariant';
     },
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: none;\n  font-family: Ubuntu, serif;\n  padding: ", ";\n  height: ", ";\n  border-radius: ", ";\n  cursor: pointer;\n  font-size: ", ";\n  font-weight: ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n\n  background-color: ", ";\n  color: ", ";\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.", " {\n    cursor: unset;\n    background-color: ", ";\n    color: ", ";\n  }\n"], ["\n  border: none;\n  font-family: Ubuntu, serif;\n  padding: ", ";\n  height: ", ";\n  border-radius: ", ";\n  cursor: pointer;\n  font-size: ", ";\n  font-weight: ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n\n  background-color: ", ";\n  color: ", ";\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.", " {\n    cursor: unset;\n    background-color: ", ";\n    color: ", ";\n  }\n"])), getButtonPadding, getButtonHeight, function (_a) {
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: none;\n  font-family: Ubuntu, serif;\n  padding: ", ";\n  height: ", ";\n  border-radius: ", ";\n  cursor: pointer;\n  font-size: ", ";\n  font-weight: ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n\n  background-color: ", ";\n  color: ", ";\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus {\n    background-color: ", ";\n    color: ", ";\n    outline: 2px solid ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n    outline: none;\n  }\n\n  &.", " {\n    cursor: unset;\n    background-color: ", ";\n    color: ", ";\n  }\n"], ["\n  border: none;\n  font-family: Ubuntu, serif;\n  padding: ", ";\n  height: ", ";\n  border-radius: ", ";\n  cursor: pointer;\n  font-size: ", ";\n  font-weight: ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n\n  background-color: ", ";\n  color: ", ";\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus {\n    background-color: ", ";\n    color: ", ";\n    outline: 2px solid ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n    outline: none;\n  }\n\n  &.", " {\n    cursor: unset;\n    background-color: ", ";\n    color: ", ";\n  }\n"])), getButtonPadding, getButtonHeight, function (_a) {
     var theme = _a.theme;
     return theme.shape.small;
 }, function (_a) {
@@ -185,6 +188,9 @@ export var StyledButtonBase = styled(ButtonUnstyled, {
     return getBgColor(__assign(__assign({}, props), { buttonState: ButtonStates.FOCUS }));
 }, function (props) {
     return getColor(__assign(__assign({}, props), { buttonState: ButtonStates.FOCUS }));
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.primary['400'];
 }, function (props) {
     return getBgColor(__assign(__assign({}, props), { buttonState: ButtonStates.ACTIVE }));
 }, function (props) {

package/esm/src/Checkbox/Checkbox.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { CheckboxProps } from './types';
+export declare const Checkbox: ({ icon, checkedIcon, indeterminateIcon, ...props }: CheckboxProps) => JSX.Element;

package/esm/src/Checkbox/Checkbox.js

@@ -0,0 +1,29 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyledCheckbox } from './styled';
+import { CheckedIcon, DefaultIcon, IndeterminateIcon } from './icons';
+export var Checkbox = function (_a) {
+    var _b = _a.icon, icon = _b === void 0 ? _jsx(DefaultIcon, {}, void 0) : _b, _c = _a.checkedIcon, checkedIcon = _c === void 0 ? _jsx(CheckedIcon, {}, void 0) : _c, _d = _a.indeterminateIcon, indeterminateIcon = _d === void 0 ? _jsx(IndeterminateIcon, {}, void 0) : _d, props = __rest(_a, ["icon", "checkedIcon", "indeterminateIcon"]);
+    return (_jsx(StyledCheckbox, __assign({ icon: icon, checkedIcon: checkedIcon, indeterminateIcon: indeterminateIcon }, props), void 0));
+};

package/esm/src/Checkbox/icons.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { SvgIconProps } from '@mui/material';
+export declare const DefaultIcon: React.FunctionComponent<SvgIconProps>;
+export declare const CheckedIcon: React.FunctionComponent<SvgIconProps>;
+export declare const IndeterminateIcon: React.FunctionComponent<SvgIconProps>;

package/esm/src/Checkbox/icons.js

@@ -0,0 +1,36 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SvgIcon } from '@mui/material';
+export var DefaultIcon = function (_a) {
+    var props = __rest(_a, []);
+    return (_jsxs(SvgIcon, __assign({ viewBox: "0 0 14 14" }, props, { children: [_jsx("path", { d: "M0 3C0 1.34315 1.34315 0 3 0H11C12.6569 0 14 1.34315 14 3V11C14 12.6569 12.6569 14 11 14H3C1.34315 14 0 12.6569 0 11V3Z" }, void 0), _jsx("path", { className: "MuiSvgIcon-border", fillRule: "evenodd", clipRule: "evenodd", d: "M11 2H3C2.44772 2 2 2.44772 2 3V11C2 11.5523 2.44772 12 3 12H11C11.5523 12 12 11.5523 12 11V3C12 2.44772 11.5523 2 11 2ZM3 0C1.34315 0 0 1.34315 0 3V11C0 12.6569 1.34315 14 3 14H11C12.6569 14 14 12.6569 14 11V3C14 1.34315 12.6569 0 11 0H3Z" }, void 0)] }), void 0));
+};
+export var CheckedIcon = function (_a) {
+    var props = __rest(_a, []);
+    return (_jsxs(SvgIcon, __assign({ viewBox: "0 0 14 14" }, props, { children: [_jsx("rect", { width: "14", height: "14", rx: "3" }, void 0), _jsx("path", { className: "MuiSvgIcon-mark", fillRule: "evenodd", clipRule: "evenodd", d: "M4.71402 6.30066C4.62206 6.20534 4.51205 6.12931 4.39042 6.07701C4.26879 6.0247 4.13797 5.99717 4.0056 5.99602C3.87323 5.99487 3.74195 6.02012 3.61943 6.0703C3.49691 6.12048 3.3856 6.19458 3.292 6.28829C3.19839 6.38199 3.12437 6.49342 3.07424 6.61607C3.02411 6.73872 2.99889 6.87013 3.00004 7.00265C3.00119 7.13516 3.02869 7.26612 3.08094 7.38787C3.13319 7.50963 3.20914 7.61976 3.30435 7.71182L5.29823 9.7078C5.48518 9.8949 5.73871 10 6.00306 10C6.26741 10 6.52094 9.8949 6.7079 9.7078L10.6956 5.71584C10.7909 5.62377 10.8668 5.51365 10.9191 5.39189C10.9713 5.27013 10.9988 5.13918 11 5.00666C11.0011 4.87415 10.9759 4.74274 10.9258 4.62009C10.8756 4.49744 10.8016 4.38601 10.708 4.29231C10.6144 4.1986 10.5031 4.1245 10.3806 4.07432C10.258 4.02414 10.1268 3.99889 9.9944 4.00004C9.86203 4.00119 9.73121 4.02872 9.60958 4.08102C9.48795 4.13333 9.37794 4.20936 9.28598 4.30468L6.00306 7.59106L4.71402 6.30066V6.30066Z" }, void 0)] }), void 0));
+};
+export var IndeterminateIcon = function (_a) {
+    var props = __rest(_a, []);
+    return (_jsxs(SvgIcon, __assign({ viewBox: "0 0 14 14" }, props, { children: [_jsx("rect", { width: "14", height: "14", rx: "3" }, void 0), _jsx("path", { className: "MuiSvgIcon-mark", d: "M10 6H4C3.44772 6 3 6.44772 3 7C3 7.55228 3.44772 8 4 8H10C10.5523 8 11 7.55228 11 7C11 6.44772 10.5523 6 10 6Z" }, void 0)] }), void 0));
+};

package/esm/src/Checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Checkbox';
+export * from './types';

package/esm/src/Checkbox/index.js

@@ -0,0 +1,2 @@
+export * from './Checkbox';
+export * from './types';

package/esm/src/Checkbox/styled.d.ts

@@ -0,0 +1,4 @@
+import { CheckboxProps } from './types';
+export declare const StyledCheckbox: import("@emotion/styled").StyledComponent<import("@mui/material").CheckboxProps & {
+    theme?: import("..").Theme | undefined;
+} & CheckboxProps, {}, {}>;

package/esm/src/Checkbox/styled.js

@@ -0,0 +1,32 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { Checkbox } from '@mui/material';
+import { styled } from '../styles';
+export var StyledCheckbox = styled(Checkbox)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 5px;\n  border-radius: unset;\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n\n  & .MuiSvgIcon-border {\n    color: ", ";\n  }\n\n  & > svg {\n    width: 1rem;\n    height: 1rem;\n  }\n\n  &.Mui-disabled {\n    color: ", ";\n    & .MuiSvgIcon-border {\n      color: currentColor;\n    }\n  }\n\n  &.Mui-checked,\n  &.MuiCheckbox-indeterminate {\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n\n    &.Mui-disabled {\n      color: ", ";\n    }\n\n    & .MuiSvgIcon-mark {\n      color: ", ";\n    }\n  }\n"], ["\n  padding: 5px;\n  border-radius: unset;\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n\n  & .MuiSvgIcon-border {\n    color: ", ";\n  }\n\n  & > svg {\n    width: 1rem;\n    height: 1rem;\n  }\n\n  &.Mui-disabled {\n    color: ", ";\n    & .MuiSvgIcon-border {\n      color: currentColor;\n    }\n  }\n\n  &.Mui-checked,\n  &.MuiCheckbox-indeterminate {\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n\n    &.Mui-disabled {\n      color: ", ";\n    }\n\n    & .MuiSvgIcon-mark {\n      color: ", ";\n    }\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.palette.background.element;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey[100];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey[300];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey[200];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.primary.main;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.primary[700];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey[500];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.common.white;
+});
+var templateObject_1;

package/esm/src/Checkbox/types.d.ts

@@ -0,0 +1,2 @@
+import { CheckboxProps as MuiCheckboxProps } from '@mui/material';
+export declare type CheckboxProps = Omit<MuiCheckboxProps, 'size' | 'color'>;

package/esm/src/CircularProgress/CircularProgress.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CircularProgressProps } from './types';
 export declare const CircularProgress: ({ color, size, ...props }: CircularProgressProps) => JSX.Element;
 export default CircularProgress;

package/esm/src/CircularProgress/CircularProgress.js

@@ -21,9 +21,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { CircularProgressSizes } from './constants';
 import { StyledCircularProgress } from './styled';
 export var CircularProgress = function (_a) {
     var color = _a.color, size = _a.size, props = __rest(_a, ["color", "size"]);
-    return (_jsx(StyledCircularProgress, __assign({}, props, { customSize: size, customColor: color }), void 0));
+    return (_jsx(StyledCircularProgress, __assign({}, props, { size: size === CircularProgressSizes.SMALL ? 16 : 24, customColor: color }), void 0));
 };
 export default CircularProgress;

package/esm/src/CircularProgress/constants.d.ts

@@ -4,6 +4,5 @@ export declare enum CircularProgressColors {
 }
 export declare enum CircularProgressSizes {
     SMALL = "small",
-    MEDIUM = "medium",
-    NUMBER = "number"
+    MEDIUM = "medium"
 }

package/esm/src/CircularProgress/constants.js

@@ -7,5 +7,4 @@ export var CircularProgressSizes;
 (function (CircularProgressSizes) {
     CircularProgressSizes["SMALL"] = "small";
     CircularProgressSizes["MEDIUM"] = "medium";
-    CircularProgressSizes["NUMBER"] = "number";
 })(CircularProgressSizes || (CircularProgressSizes = {}));

package/esm/src/CircularProgress/styled.d.ts

@@ -4,5 +4,4 @@ export declare const StyledCircularProgress: import("@emotion/styled").StyledCom
     theme?: Theme | undefined;
 } & Omit<CircularProgressProps, "color" | "size"> & {
     customColor?: "primary" | "inverted" | undefined;
-    customSize?: "number" | "medium" | "small" | undefined;
 }, {}, {}>;

package/esm/src/CircularProgress/styled.js

@@ -4,20 +4,14 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { CircularProgress } from '@mui/material';
 import { styled } from '../styles';
-import { CircularProgressColors, CircularProgressSizes } from './constants';
+import { CircularProgressColors } from './constants';
 var getColor = function (_a) {
     var theme = _a.theme, customColor = _a.customColor;
     if (customColor === CircularProgressColors.PRIMARY)
         return theme.palette.primary.dark;
     return theme.palette.primary.contrastText;
 };
-var getCircularProgressSize = function (_a) {
-    var customSize = _a.customSize;
-    if (customSize === CircularProgressSizes.SMALL)
-        return '16px';
-    return '24px';
-};
 export var StyledCircularProgress = styled(CircularProgress, {
-    shouldForwardProp: function (prop) { return prop !== 'customColor' && prop !== 'customSize'; },
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n"])), getCircularProgressSize, getCircularProgressSize, function (props) { return getColor(props); });
+    shouldForwardProp: function (prop) { return prop !== 'customColor'; },
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (props) { return getColor(props); });
 var templateObject_1;

package/esm/src/FormControlLabel/FormControlLabel.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { FormControlLabelProps } from './types';
+export declare const FormControlLabel: ({ ...props }: FormControlLabelProps) => JSX.Element;

package/esm/src/FormControlLabel/FormControlLabel.js

@@ -0,0 +1,28 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyledFormControlLabel } from './styled';
+export var FormControlLabel = function (_a) {
+    var props = __rest(_a, []);
+    return _jsx(StyledFormControlLabel, __assign({}, props), void 0);
+};

package/esm/src/FormControlLabel/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FormControlLabel';
+export * from './types';

package/esm/src/FormControlLabel/index.js

@@ -0,0 +1,2 @@
+export * from './FormControlLabel';
+export * from './types';

package/esm/src/FormControlLabel/styled.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledFormControlLabel: import("@emotion/styled").StyledComponent<import("@mui/material").FormControlLabelProps & {
+    theme?: import("..").Theme | undefined;
+}, {}, {}>;

package/esm/src/FormControlLabel/styled.js

@@ -0,0 +1,11 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { FormControlLabel } from '@mui/material';
+import { styled } from '../styles';
+export var StyledFormControlLabel = styled(FormControlLabel)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-left: -5px;\n  margin-right: 0;\n  & .MuiFormControlLabel-label {\n    margin-left: ", ";\n  }\n"], ["\n  margin-left: -5px;\n  margin-right: 0;\n  & .MuiFormControlLabel-label {\n    margin-left: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(1);
+});
+var templateObject_1;

package/esm/src/FormControlLabel/types.d.ts

@@ -0,0 +1,2 @@
+import { FormControlLabelProps as MuiFormControlLabelProps } from '@mui/material/FormControlLabel';
+export declare type FormControlLabelProps = MuiFormControlLabelProps;

package/esm/src/FormControlLabel/types.js

@@ -0,0 +1 @@
+export {};