@astral/ui 0.48.4 → 1.0.0-test.1670405759

package/esm/ButtonBase/styles.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { Theme } from '../theme';
+import { BaseButtonProps, ButtonColor, ButtonSize, ButtonState, ButtonVariant } from './types';
+export type ButtonBaseWrapperProps = Omit<BaseButtonProps, 'color' | 'variant'> & {
+    customColor?: ButtonColor;
+    customVariant?: ButtonVariant;
+};
+export type ButtonBaseWrapperThemeProps = {
+    variant?: ButtonVariant;
+    customColor?: ButtonColor;
+    customVariant?: ButtonVariant;
+    selected?: boolean;
+    size?: ButtonSize;
+    theme: Theme;
+};
+export declare const getColor: ({ theme, customVariant, customColor, buttonState, selected, }: ButtonBaseWrapperThemeProps & {
+    buttonState: ButtonState;
+}) => string;
+export declare const getBgColor: ({ selected, customColor, customVariant, buttonState, theme, }: ButtonBaseWrapperThemeProps & {
+    buttonState: ButtonState;
+}) => string;
+export declare const getButtonHeight: ({ size, }: ButtonBaseWrapperThemeProps) => string;
+export declare const getButtonPadding: ({ size, theme, }: ButtonBaseWrapperThemeProps) => string;
+export declare const getDisabledBgColor: ({ theme, customVariant, }: ButtonBaseWrapperThemeProps) => string;
+export declare const getButtonPaddingMobile: ({ size, theme, variant, }: ButtonBaseWrapperThemeProps) => string;
+export declare const getButtonHeightMobile: ({ size, }: ButtonBaseWrapperThemeProps) => string;
+export declare const ButtonBaseWrapper: import("@emotion/styled").StyledComponent<import("@mui/base/ButtonUnstyled").ButtonUnstyledOwnProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "css" | "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/base/ButtonUnstyled").ButtonUnstyledOwnProps> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & Omit<BaseButtonProps, "color" | "variant"> & {
+    customColor?: "primary" | "error" | "warning" | "success" | undefined;
+    customVariant?: "link" | "light" | "text" | "contained" | undefined;
+}, {}, {}>;

package/esm/ButtonBase/styles.js

@@ -0,0 +1,241 @@
+import ButtonUnstyled from '@mui/base/ButtonUnstyled';
+import { buttonClasses } from '@mui/material';
+import { styled } from '../styles';
+import { ButtonSizes, ButtonStates, ButtonVariants } from './enums';
+export const getColor = ({ theme, customVariant, customColor, buttonState, selected, }) => {
+    const textColorVariants = {
+        selected: {
+            default: theme.palette.grey['900'],
+            hover: theme.palette.grey['700'],
+            active: theme.palette.grey['800'],
+            focus: theme.palette.grey['900'],
+        },
+        light: {
+            error: {
+                default: theme.palette.red['900'],
+                hover: theme.palette.red['900'],
+                active: theme.palette.red['800'],
+                focus: theme.palette.red['900'],
+            },
+            success: {
+                default: theme.palette.green['900'],
+                hover: theme.palette.green['900'],
+                active: theme.palette.green['800'],
+                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['800'],
+                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 (selected) {
+        return customVariant !== ButtonVariants.Link
+            ? theme.palette.primary.contrastText
+            : textColorVariants.selected[buttonState];
+    }
+    if (customVariant === ButtonVariants.Contained) {
+        return textColorVariants.contained;
+    }
+    if (customVariant === ButtonVariants.Light && customColor) {
+        return textColorVariants.light[customColor][buttonState];
+    }
+    if (customVariant === ButtonVariants.Text) {
+        return textColorVariants.text[buttonState];
+    }
+    return textColorVariants.link[buttonState];
+};
+export const getBgColor = ({ selected, customColor, customVariant, buttonState, theme, }) => {
+    const bgColorVariants = {
+        selected: {
+            default: theme.palette.grey['900'],
+            hover: theme.palette.grey['700'],
+            active: theme.palette.grey['800'],
+            focus: theme.palette.grey['900'],
+        },
+        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 (selected && customVariant !== ButtonVariants.Link) {
+        return bgColorVariants.selected[buttonState];
+    }
+    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 const getButtonHeight = ({ size, }) => {
+    if (size === ButtonSizes.Large) {
+        return '40px';
+    }
+    return '32px';
+};
+export const getButtonPadding = ({ size, theme, }) => {
+    if (size === ButtonSizes.Large) {
+        return theme.spacing(2, 4, 2, 4);
+    }
+    return theme.spacing(1, 3, 1, 3);
+};
+export const getDisabledBgColor = ({ theme, customVariant, }) => {
+    if (customVariant === ButtonVariants.Link ||
+        customVariant === ButtonVariants.Text) {
+        return 'transparent';
+    }
+    return theme.palette.grey['100'];
+};
+export const getButtonPaddingMobile = ({ size, theme, variant, }) => {
+    if (variant === ButtonVariants.Link) {
+        return '0';
+    }
+    if (size === ButtonSizes.Small) {
+        return theme.spacing(2, 3);
+    }
+    return theme.spacing(4, 3);
+};
+export const getButtonHeightMobile = ({ size, }) => {
+    if (size === ButtonSizes.Small) {
+        return '36px';
+    }
+    return '48px';
+};
+export const ButtonBaseWrapper = styled(ButtonUnstyled, {
+    shouldForwardProp: (prop) => prop !== 'customColor' && prop !== 'customVariant',
+}) `
+  position: relative;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: ${getButtonHeight};
+  padding: ${getButtonPadding};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    height: ${getButtonHeightMobile};
+    padding: ${getButtonPaddingMobile};
+  }
+
+  color: ${(props) => getColor(Object.assign(Object.assign({}, props), { buttonState: ButtonStates.Default }))};
+  font-weight: ${({ theme }) => theme.typography.button.fontWeight};
+  font-size: ${({ theme }) => theme.typography.button.fontSize};
+  font-family: Ubuntu, serif;
+
+  background-color: ${(props) => getBgColor(Object.assign(Object.assign({}, props), { buttonState: ButtonStates.Default }))};
+
+  border: none;
+  border-radius: ${({ theme }) => theme.shape.small};
+  cursor: pointer;
+
+  &:hover {
+    color: ${(props) => getColor(Object.assign(Object.assign({}, props), { buttonState: ButtonStates.Hover }))};
+
+    background-color: ${(props) => getBgColor(Object.assign(Object.assign({}, props), { buttonState: ButtonStates.Hover }))};
+  }
+
+  &:focus {
+    color: ${(props) => getColor(Object.assign(Object.assign({}, props), { buttonState: ButtonStates.Focus }))};
+
+    background-color: ${(props) => getBgColor(Object.assign(Object.assign({}, props), { buttonState: ButtonStates.Focus }))};
+  }
+
+  &:active {
+    color: ${(props) => getColor(Object.assign(Object.assign({}, props), { buttonState: ButtonStates.Active }))};
+
+    background-color: ${(props) => getBgColor(Object.assign(Object.assign({}, props), { buttonState: ButtonStates.Active }))};
+    outline: none;
+  }
+
+  &.${buttonClasses.disabled} {
+    color: ${({ theme }) => theme.palette.grey['500']};
+
+    background-color: ${getDisabledBgColor};
+    cursor: unset;
+  }
+
+  &.${buttonClasses.focusVisible} {
+    outline: 2px solid ${({ theme }) => theme.palette.primary['400']};
+  }
+`;

package/esm/ButtonBase/types.d.ts

@@ -1,10 +1,11 @@
 import { ButtonUnstyledProps } from '@mui/base/ButtonUnstyled';
-import { ButtonColors, ButtonSizes, ButtonStates, ButtonVariants } from './constants';
-export declare type ButtonColor = `${ButtonColors}`;
-export declare type ButtonVariant = `${ButtonVariants}`;
-export declare type ButtonSize = `${ButtonSizes}`;
-export declare type ButtonState = `${ButtonStates}`;
-export declare type BaseButtonProps = Omit<ButtonUnstyledProps, 'color' | 'variant' | 'size'> & {
+import { WithoutEmotionSpecific } from '../types';
+import { ButtonColors, ButtonSizes, ButtonStates, ButtonVariants } from './enums';
+export type ButtonColor = `${ButtonColors}`;
+export type ButtonVariant = `${ButtonVariants}`;
+export type ButtonSize = `${ButtonSizes}`;
+export type ButtonState = `${ButtonStates}`;
+export type BaseButtonProps = Omit<WithoutEmotionSpecific<ButtonUnstyledProps>, 'color' | 'variant' | 'size'> & {
     color?: ButtonColor;
     variant?: ButtonVariant;
     size?: ButtonSize;

package/esm/Checkbox/Checkbox.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { CheckboxProps } from './types';
-export declare const Checkbox: ({ icon, checkedIcon, indeterminateIcon, ...props }: CheckboxProps) => JSX.Element;
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Pick<CheckboxProps, "disabled" | "icon" | "action" | "translate" | "onFocusVisible" | "tabIndex" | "className" | "form" | "slot" | "style" | "title" | "key" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "classes" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "required" | "inputProps" | "inputRef" | "readOnly" | "indeterminate" | "checked" | "checkedIcon" | "edge" | "indeterminateIcon"> & import("react").RefAttributes<HTMLButtonElement>>;

package/esm/Checkbox/Checkbox.js

@@ -1,14 +1,3 @@
-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)
@@ -21,9 +10,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 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, {}) : _b, _c = _a.checkedIcon, checkedIcon = _c === void 0 ? _jsx(CheckedIcon, {}) : _c, _d = _a.indeterminateIcon, indeterminateIcon = _d === void 0 ? _jsx(IndeterminateIcon, {}) : _d, props = __rest(_a, ["icon", "checkedIcon", "indeterminateIcon"]);
-    return (_jsx(StyledCheckbox, __assign({ icon: icon, checkedIcon: checkedIcon, indeterminateIcon: indeterminateIcon }, props)));
-};
+export const Checkbox = forwardRef((_a, ref) => {
+    var { icon = _jsx(DefaultIcon, {}), checkedIcon = _jsx(CheckedIcon, {}), indeterminateIcon = _jsx(IndeterminateIcon, {}) } = _a, props = __rest(_a, ["icon", "checkedIcon", "indeterminateIcon"]);
+    return (_jsx(StyledCheckbox, Object.assign({ ref: ref, icon: icon, checkedIcon: checkedIcon, indeterminateIcon: indeterminateIcon }, props)));
+});

package/esm/Checkbox/icons.js

@@ -1,14 +1,3 @@
-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)
@@ -22,15 +11,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SvgIcon } from '@mui/material';
-export var DefaultIcon = function (_a) {
+export const DefaultIcon = (_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" }), _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" })] })));
+    return (_jsxs(SvgIcon, Object.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" }), _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" })] })));
 };
-export var CheckedIcon = function (_a) {
+export const CheckedIcon = (_a) => {
     var props = __rest(_a, []);
-    return (_jsxs(SvgIcon, __assign({ viewBox: "0 0 14 14" }, props, { children: [_jsx("rect", { width: "14", height: "14", rx: "3" }), _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" })] })));
+    return (_jsxs(SvgIcon, Object.assign({ viewBox: "0 0 14 14" }, props, { children: [_jsx("rect", { width: "14", height: "14", rx: "3" }), _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" })] })));
 };
-export var IndeterminateIcon = function (_a) {
+export const IndeterminateIcon = (_a) => {
     var props = __rest(_a, []);
-    return (_jsxs(SvgIcon, __assign({ viewBox: "0 0 14 14" }, props, { children: [_jsx("rect", { width: "14", height: "14", rx: "3" }), _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" })] })));
+    return (_jsxs(SvgIcon, Object.assign({ viewBox: "0 0 14 14" }, props, { children: [_jsx("rect", { width: "14", height: "14", rx: "3" }), _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" })] })));
 };

package/esm/Checkbox/styled.js

@@ -1,32 +1,47 @@
-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\n  color: ", ";\n\n  border-radius: unset;\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\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\n  color: ", ";\n\n  border-radius: unset;\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\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;
+export const StyledCheckbox = styled(Checkbox) `
+  padding: 5px;
+
+  color: ${({ theme }) => theme.palette.background.element};
+
+  border-radius: unset;
+
+  &:hover {
+    color: ${({ theme }) => theme.palette.grey[100]};
+  }
+
+  & .MuiSvgIcon-border {
+    color: ${({ theme }) => theme.palette.grey[300]};
+  }
+
+  & > svg {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  &.Mui-disabled {
+    color: ${({ theme }) => theme.palette.grey[200]};
+
+    & .MuiSvgIcon-border {
+      color: currentColor;
+    }
+  }
+
+  &.Mui-checked,
+  &.MuiCheckbox-indeterminate {
+    color: ${({ theme }) => theme.palette.primary.main};
+
+    &:hover {
+      color: ${({ theme }) => theme.palette.primary[700]};
+    }
+
+    &.Mui-disabled {
+      color: ${({ theme }) => theme.palette.grey[500]};
+    }
+
+    & .MuiSvgIcon-mark {
+      color: ${({ theme }) => theme.palette.common.white};
+    }
+  }
+`;

package/esm/Checkbox/types.d.ts

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

package/esm/Chevron/Chevron.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { SvgIconProps } from '@mui/material';
+import { WithoutEmotionSpecific } from '../types';
 export declare const Chevron: (props: ChevronProps) => JSX.Element;
-export declare type ChevronProps = {
+export type ChevronProps = {
     isActive?: boolean;
     className?: string;
-} & Omit<SvgIconProps, 'children' | 'classes' | 'ref' | 'sx'>;
+} & Omit<WithoutEmotionSpecific<SvgIconProps>, 'children' | 'classes' | 'ref'>;

package/esm/Chevron/Chevron.js

@@ -1,14 +1,3 @@
-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);
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ChevronWrapper } from './styles';
-export var Chevron = function (props) { return (_jsx(ChevronWrapper, __assign({}, props))); };
+export const Chevron = (props) => (_jsx(ChevronWrapper, Object.assign({}, props)));

package/esm/Chevron/styles.d.ts

@@ -3,7 +3,7 @@ import { ChevronProps } from './Chevron';
 export declare const ChevronWrapper: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
-    color?: "inherit" | "primary" | "secondary" | "disabled" | "error" | "success" | "warning" | "action" | "info" | undefined;
+    color?: "inherit" | "primary" | "secondary" | "disabled" | "action" | "error" | "warning" | "info" | "success" | undefined;
     fontSize?: "inherit" | "large" | "medium" | "small" | undefined;
     htmlColor?: string | undefined;
     inheritViewBox?: boolean | undefined;
@@ -11,8 +11,8 @@ export declare const ChevronWrapper: import("@emotion/styled").StyledComponent<{
     sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
     titleAccess?: string | undefined;
     viewBox?: string | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").SVGProps<SVGSVGElement>, "string" | "fontSize" | "fontWeight" | "fontFamily" | "href" | "tabIndex" | "to" | "type" | "children" | "className" | "style" | "clipPath" | "filter" | "mask" | "path" | "key" | "css" | "name" | "id" | "lang" | "role" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "cursor" | "direction" | "display" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "height" | "imageRendering" | "letterSpacing" | "opacity" | "order" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "width" | "wordSpacing" | "writingMode" | "offset" | "overflow" | "textDecoration" | "azimuth" | "clip" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fill" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect" | "values" | "elevation" | "spacing" | "mode" | "local" | "in" | "end" | "max" | "orientation" | "media" | "target" | "origin" | "min" | "viewBox" | "method" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "allowReorder" | "alphabetic" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "baseFrequency" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clipPathUnits" | "colorInterpolationFilters" | "colorProfile" | "contentScriptType" | "contentStyleType" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "divisor" | "dur" | "dx" | "dy" | "edgeMode" | "enableBackground" | "exponent" | "externalResourcesRequired" | "filterRes" | "filterUnits" | "focusable" | "format" | "fr" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphRef" | "gradientTransform" | "gradientUnits" | "hanging" | "horizAdvX" | "horizOriginX" | "ideographic" | "in2" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "limitingConeAngle" | "markerHeight" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mathematical" | "numOctaves" | "operator" | "orient" | "overlinePosition" | "overlineThickness" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rx" | "ry" | "seed" | "slope" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "strikethroughPosition" | "strikethroughThickness" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textLength" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewTarget" | "vMathematical" | "widths" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan"> & {
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").SVGProps<SVGSVGElement>, "string" | "fontSize" | "fontWeight" | "fontFamily" | "clipPath" | "color" | "cursor" | "direction" | "display" | "filter" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "height" | "imageRendering" | "letterSpacing" | "opacity" | "order" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "width" | "wordSpacing" | "writingMode" | "mask" | "offset" | "overflow" | "textDecoration" | "azimuth" | "clip" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fill" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect" | "elevation" | "spacing" | "mode" | "css" | "href" | "tabIndex" | "to" | "type" | "children" | "className" | "style" | "path" | "key" | "name" | "id" | "lang" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "values" | "local" | "in" | "end" | "orientation" | "max" | "media" | "target" | "min" | "viewBox" | "method" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "allowReorder" | "alphabetic" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "baseFrequency" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clipPathUnits" | "colorInterpolationFilters" | "colorProfile" | "contentScriptType" | "contentStyleType" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "divisor" | "dur" | "dx" | "dy" | "edgeMode" | "enableBackground" | "exponent" | "externalResourcesRequired" | "filterRes" | "filterUnits" | "focusable" | "format" | "fr" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphRef" | "gradientTransform" | "gradientUnits" | "hanging" | "horizAdvX" | "horizOriginX" | "ideographic" | "in2" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "limitingConeAngle" | "markerHeight" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mathematical" | "numOctaves" | "operator" | "orient" | "origin" | "overlinePosition" | "overlineThickness" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rx" | "ry" | "seed" | "slope" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "strikethroughPosition" | "strikethroughThickness" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textLength" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewTarget" | "vMathematical" | "widths" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan"> & {
     ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, "fontSize" | "children" | "color" | "shapeRendering" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & {
+}, "fontSize" | "color" | "shapeRendering" | "sx" | "children" | keyof import("@mui/material/OverridableComponent").CommonProps | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & Pick<ChevronProps, "isActive">, {}, {}>;

package/esm/Chevron/styles.js

@@ -1,19 +1,12 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { ChevronDOutlineMd } from '@astral/icons';
 import { styled } from '../styles';
-export var ChevronWrapper = styled(ChevronDOutlineMd, {
-    shouldForwardProp: function (prop) { return prop !== 'isActive'; },
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  transform: rotateZ(", "deg);\n\n  transition: ", ";\n"], ["\n  transform: rotateZ(", "deg);\n\n  transition: ", ";\n"])), function (_a) {
-    var isActive = _a.isActive;
-    return (isActive ? 180 : 0);
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.transitions.create('transform', {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.short,
-    });
-});
-var templateObject_1;
+export const ChevronWrapper = styled(ChevronDOutlineMd, {
+    shouldForwardProp: (prop) => prop !== 'isActive',
+}) `
+  transform: rotateZ(${({ isActive }) => (isActive ? 180 : 0)}deg);
+
+  transition: ${({ theme }) => theme.transitions.create('transform', {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.short,
+})};
+`;