@mantine/core 2.5.0-alpha.5 → 2.6.0-alpha.1

package/esm/components/Center/Center.js

@@ -2,6 +2,8 @@ import React from 'react';
 import cx from 'clsx';
 
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -17,6 +19,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -31,14 +34,14 @@ var __objRest = (source, exclude) => {
 };
 function Center(_a) {
   var _b = _a, { style, className, inline = false } = _b, others = __objRest(_b, ["style", "className", "inline"]);
-  return /* @__PURE__ */ React.createElement("div", __spreadValues({
+  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, others), {
+    className: cx("mantine-center", className),
     style: __spreadValues({
       display: inline ? "inline-flex" : "flex",
       alignItems: "center",
       justifyContent: "center"
-    }, style),
-    className: cx("mantine-center", className)
-  }, others));
+    }, style)
+  }));
 }
 Center.displayName = "@mantine/core/Center";
 

package/esm/components/Center/Center.js.map

@@ -1 +1 @@
-{"version":3,"file":"Center.js","sources":["../../../src/components/Center/Center.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'clsx';\n\nexport interface CenterProps extends React.ComponentPropsWithoutRef<'div'> {\n  /** Content that should be centered vertically and horizontally */\n  children: React.ReactNode;\n\n  /** Set to true to use inline-flex instead of flex */\n  inline?: boolean;\n}\n\nexport function Center({ style, className, inline = false, ...others }: CenterProps) {\n  return (\n    <div\n      style={{\n        display: inline ? 'inline-flex' : 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        ...style,\n      }}\n      className={cx('mantine-center', className)}\n      {...others}\n    />\n  );\n}\n\nCenter.displayName = '@mantine/core/Center';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Center.js","sources":["../../../src/components/Center/Center.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\n\nexport interface CenterProps extends React.ComponentPropsWithoutRef<'div'> {\n  /** Content that should be centered vertically and horizontally */\n  children: React.ReactNode;\n\n  /** Set to true to use inline-flex instead of flex */\n  inline?: boolean;\n}\n\nexport function Center({ style, className, inline = false, ...others }: CenterProps) {\n  return (\n    <div\n      {...others}\n      className={clsx('mantine-center', className)}\n      style={{\n        display: inline ? 'inline-flex' : 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        ...style,\n      }}\n    />\n  );\n}\n\nCenter.displayName = '@mantine/core/Center';\n"],"names":["clsx"],"mappings":"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"}

package/esm/components/Checkbox/Checkbox.js

@@ -1,10 +1,8 @@
 import React from 'react';
-import cx from 'clsx';
-import { useId, useReducedMotion } from '@mantine/hooks';
+import { useId } from '@mantine/hooks';
+import { mergeStyles } from '@mantine/styles';
 import { CheckboxIcon } from './CheckboxIcon.js';
-import useStyles, { sizes } from './Checkbox.styles.js';
-import { useMantineTheme } from '../../theme/use-mantine-theme/use-mantine-theme.js';
-import { mergeStyles } from '../../theme/utils/merge-styles/merge-styles.js';
+import useStyles from './Checkbox.styles.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -34,7 +32,6 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-const CHECKBOX_SIZES = sizes;
 function Checkbox(_a) {
   var _b = _a, {
     className,
@@ -42,7 +39,6 @@ function Checkbox(_a) {
     checked,
     onChange,
     color,
-    themeOverride,
     label,
     disabled,
     indeterminate,
@@ -60,7 +56,6 @@ function Checkbox(_a) {
     "checked",
     "onChange",
     "color",
-    "themeOverride",
     "label",
     "disabled",
     "indeterminate",
@@ -74,9 +69,7 @@ function Checkbox(_a) {
     "transitionDuration"
   ]);
   const uuid = useId(id);
-  const theme = useMantineTheme(themeOverride);
-  const reduceMotion = useReducedMotion();
-  const classes = useStyles({ size, color, theme, transitionDuration: reduceMotion ? 0 : transitionDuration }, classNames, "checkbox");
+  const { classes, cx } = useStyles({ size, color, transitionDuration }, classNames, "checkbox");
   const _styles = mergeStyles(classes, styles);
   return /* @__PURE__ */ React.createElement("div", __spreadValues({
     className: cx(classes.root, className),
@@ -105,5 +98,5 @@ function Checkbox(_a) {
 }
 Checkbox.displayName = "@mantine/core/Checkbox";
 
-export { CHECKBOX_SIZES, Checkbox };
+export { Checkbox };
 //# sourceMappingURL=Checkbox.js.map

package/esm/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'clsx';\nimport { useId, useReducedMotion } from '@mantine/hooks';\nimport { DefaultProps, useMantineTheme, MantineSize, mergeStyles } from '../../theme';\nimport { CheckboxIcon } from './CheckboxIcon';\nimport useStyles, { sizes } from './Checkbox.styles';\n\nexport const CHECKBOX_SIZES = sizes;\n\nexport type CheckboxStylesNames = keyof ReturnType<typeof useStyles>;\n\nexport interface CheckboxProps\n  extends DefaultProps<CheckboxStylesNames>,\n    Omit<React.ComponentPropsWithoutRef<'input'>, 'type' | 'size'> {\n  /** Checkbox checked and indeterminate state color from theme, defaults to theme.primaryColor */\n  color?: string;\n\n  /** Predefined label font-size and checkbox width and height in px */\n  size?: MantineSize;\n\n  /** Checkbox label */\n  label?: React.ReactNode;\n\n  /** Indeterminate state of checkbox, overwrites checked */\n  indeterminate?: boolean;\n\n  /** Props spread to wrapper element */\n  wrapperProps?: Record<string, any>;\n\n  /** Id is used to bind input and label, if not passed unique id will be generated for each input */\n  id?: string;\n\n  /** Get input ref */\n  elementRef?: React.ForwardedRef<HTMLInputElement>;\n\n  /** Check/uncheck transition duration, set to 0 to disable all transitions */\n  transitionDuration?: number;\n}\n\nexport function Checkbox({\n  className,\n  style,\n  checked,\n  onChange,\n  color,\n  themeOverride,\n  label,\n  disabled,\n  indeterminate,\n  id,\n  size = 'sm',\n  wrapperProps,\n  elementRef,\n  children,\n  classNames,\n  styles,\n  transitionDuration = 100,\n  ...others\n}: CheckboxProps) {\n  const uuid = useId(id);\n  const theme = useMantineTheme(themeOverride);\n  const reduceMotion = useReducedMotion();\n  const classes = useStyles(\n    { size, color, theme, transitionDuration: reduceMotion ? 0 : transitionDuration },\n    classNames,\n    'checkbox'\n  );\n  const _styles = mergeStyles(classes, styles);\n\n  return (\n    <div\n      className={cx(classes.root, className)}\n      style={{ ...style, ..._styles.root }}\n      {...wrapperProps}\n    >\n      <div className={classes.inner} style={_styles.inner}>\n        <input\n          id={uuid}\n          ref={elementRef}\n          type=\"checkbox\"\n          className={classes.input}\n          style={_styles.input}\n          checked={indeterminate || checked}\n          onChange={onChange}\n          disabled={disabled}\n          {...others}\n        />\n        <CheckboxIcon indeterminate={indeterminate} className={classes.icon} style={_styles.icon} />\n      </div>\n\n      {label && (\n        <label className={classes.label} htmlFor={uuid} style={_styles.label}>\n          {label}\n        </label>\n      )}\n    </div>\n  );\n}\n\nCheckbox.displayName = '@mantine/core/Checkbox';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React from 'react';\nimport { useId } from '@mantine/hooks';\nimport { mergeStyles, DefaultProps, MantineSize, MantineColor, ClassNames } from '@mantine/styles';\nimport { CheckboxIcon } from './CheckboxIcon';\nimport useStyles from './Checkbox.styles';\n\nexport type CheckboxStylesNames = ClassNames<typeof useStyles>;\n\nexport interface CheckboxProps\n  extends DefaultProps<CheckboxStylesNames>,\n    Omit<React.ComponentPropsWithoutRef<'input'>, 'type' | 'size'> {\n  /** Checkbox checked and indeterminate state color from theme, defaults to theme.primaryColor */\n  color?: MantineColor;\n\n  /** Predefined label font-size and checkbox width and height in px */\n  size?: MantineSize;\n\n  /** Checkbox label */\n  label?: React.ReactNode;\n\n  /** Indeterminate state of checkbox, overwrites checked */\n  indeterminate?: boolean;\n\n  /** Props spread to wrapper element */\n  wrapperProps?: React.ComponentPropsWithoutRef<'div'> & { [key: string]: any };\n\n  /** Id is used to bind input and label, if not passed unique id will be generated for each input */\n  id?: string;\n\n  /** Get input ref */\n  elementRef?: React.ForwardedRef<HTMLInputElement>;\n\n  /** Check/uncheck transition duration, set to 0 to disable all transitions */\n  transitionDuration?: number;\n}\n\nexport function Checkbox({\n  className,\n  style,\n  checked,\n  onChange,\n  color,\n  label,\n  disabled,\n  indeterminate,\n  id,\n  size = 'sm',\n  wrapperProps,\n  elementRef,\n  children,\n  classNames,\n  styles,\n  transitionDuration = 100,\n  ...others\n}: CheckboxProps) {\n  const uuid = useId(id);\n  const { classes, cx } = useStyles({ size, color, transitionDuration }, classNames, 'checkbox');\n  const _styles = mergeStyles(classes, styles);\n\n  return (\n    <div\n      className={cx(classes.root, className)}\n      style={{ ...style, ..._styles.root }}\n      {...wrapperProps}\n    >\n      <div className={classes.inner} style={_styles.inner}>\n        <input\n          id={uuid}\n          ref={elementRef}\n          type=\"checkbox\"\n          className={classes.input}\n          style={_styles.input}\n          checked={indeterminate || checked}\n          onChange={onChange}\n          disabled={disabled}\n          {...others}\n        />\n        <CheckboxIcon indeterminate={indeterminate} className={classes.icon} style={_styles.icon} />\n      </div>\n\n      {label && (\n        <label className={classes.label} htmlFor={uuid} style={_styles.label}>\n          {label}\n        </label>\n      )}\n    </div>\n  );\n}\n\nCheckbox.displayName = '@mantine/core/Checkbox';\n"],"names":[],"mappings":"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"}

package/esm/components/Checkbox/Checkbox.styles.js

@@ -1,8 +1,4 @@
-import { createMemoStyles } from '../../theme/create-memo-styles.js';
-import { getSizeValue } from '../../theme/utils/get-size-value/get-size-value.js';
-import { getFontStyles } from '../../theme/utils/get-font-styles/get-font-styles.js';
-import { getThemeColor } from '../../theme/utils/get-theme-color/get-theme-color.js';
-import { getFocusStyles } from '../../theme/utils/get-focus-styles/get-focus-styles.js';
+import { createStyles, getSharedColorScheme, getSizeValue, getFontStyles, getFocusStyles } from '@mantine/styles';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -37,57 +33,17 @@ const iconSizes = {
   lg: 16,
   xl: 20
 };
-var useStyles = createMemoStyles({
-  root: {
-    display: "flex",
-    alignItems: "center"
-  },
-  inner: ({ size }) => ({
-    position: "relative",
-    width: getSizeValue({ size, sizes }),
-    height: getSizeValue({ size, sizes })
-  }),
-  label: ({ theme, size }) => __spreadProps(__spreadValues({}, getFontStyles(theme)), {
-    WebkitTapHighlightColor: "transparent",
-    paddingLeft: theme.spacing.sm,
-    fontSize: getSizeValue({ size, sizes: theme.fontSizes }),
-    lineHeight: `${getSizeValue({ size, sizes })}px`,
-    color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black
-  }),
-  input: ({ size, theme, color, transitionDuration }) => __spreadProps(__spreadValues({}, getFocusStyles(theme)), {
-    appearance: "none",
-    backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.white,
-    border: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[4]}`,
-    width: getSizeValue({ size, sizes }),
-    height: getSizeValue({ size, sizes }),
-    borderRadius: theme.radius.sm,
-    padding: 0,
-    outline: 0,
-    display: "block",
-    margin: 0,
-    transition: `border-color ${transitionDuration}ms ease, background-color ${transitionDuration}ms ease`,
-    "&:checked": {
-      backgroundColor: getThemeColor({ theme, color, shade: 6 }),
-      borderColor: getThemeColor({ theme, color, shade: 6 }),
-      "& + $icon": {
-        opacity: 1,
-        transform: "translateY(0) scale(1)"
-      }
-    },
-    "&:disabled": {
-      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2],
-      borderColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[3],
-      cursor: "not-allowed",
-      "& + $icon": {
-        color: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[5]
-      }
-    }
-  }),
-  icon: ({ theme, transitionDuration, size }) => ({
-    color: theme.white,
+var useStyles = createStyles((theme, { size, color, transitionDuration }, getRef) => {
+  const colors = getSharedColorScheme({ color, theme, variant: "filled" });
+  const _size = getSizeValue({ size, sizes });
+  const icon = {
+    ref: getRef("icon"),
+    color: colors.color,
     transform: "translateY(5px) scale(0.5)",
     opacity: 0,
-    transition: `opacity ${transitionDuration}ms ease, transform ${transitionDuration}ms ease`,
+    transitionProperty: "opacity, transform",
+    transitionTimingFunction: "ease",
+    transitionDuration: `${transitionDuration}ms`,
     pointerEvents: "none",
     width: getSizeValue({ size, sizes: iconSizes }),
     position: "absolute",
@@ -96,8 +52,59 @@ var useStyles = createMemoStyles({
     bottom: 0,
     left: 0,
     right: 0,
-    margin: "auto"
-  })
+    margin: "auto",
+    "@media (prefers-reduced-motion)": {
+      transitionDuration: "0ms"
+    }
+  };
+  return {
+    icon,
+    root: {
+      display: "flex",
+      alignItems: "center"
+    },
+    inner: {
+      position: "relative",
+      width: _size,
+      height: _size
+    },
+    label: __spreadProps(__spreadValues({}, getFontStyles(theme)), {
+      WebkitTapHighlightColor: "transparent",
+      paddingLeft: theme.spacing.sm,
+      fontSize: getSizeValue({ size, sizes: theme.fontSizes }),
+      lineHeight: `${_size}px`,
+      color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black
+    }),
+    input: __spreadProps(__spreadValues({}, getFocusStyles(theme)), {
+      appearance: "none",
+      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.white,
+      border: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[4]}`,
+      width: _size,
+      height: _size,
+      borderRadius: theme.radius.sm,
+      padding: 0,
+      outline: 0,
+      display: "block",
+      margin: 0,
+      transition: `border-color ${transitionDuration}ms ease, background-color ${transitionDuration}ms ease`,
+      "&:checked": {
+        backgroundColor: colors.background,
+        borderColor: colors.background,
+        [`& + .${icon.ref}`]: {
+          opacity: 1,
+          transform: "translateY(0) scale(1)"
+        }
+      },
+      "&:disabled": {
+        backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2],
+        borderColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[3],
+        cursor: "not-allowed",
+        [`& + .${icon.ref}`]: {
+          color: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[5]
+        }
+      }
+    })
+  };
 });
 
 export default useStyles;

package/esm/components/Checkbox/Checkbox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.js","sources":["../../../src/components/Checkbox/Checkbox.styles.ts"],"sourcesContent":["import {\n  createMemoStyles,\n  MantineTheme,\n  MantineSize,\n  getFontStyles,\n  getSizeValue,\n  getThemeColor,\n  getFocusStyles,\n} from '../../theme';\n\nexport const sizes = {\n  xs: 14,\n  sm: 18,\n  md: 22,\n  lg: 28,\n  xl: 34,\n};\n\nconst iconSizes = {\n  xs: 8,\n  sm: 10,\n  md: 14,\n  lg: 16,\n  xl: 20,\n};\n\ninterface CheckboxStyles {\n  theme: MantineTheme;\n  size: MantineSize;\n  color: string;\n  transitionDuration: number;\n}\n\nexport default createMemoStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n\n  inner: ({ size }: CheckboxStyles) => ({\n    position: 'relative',\n    width: getSizeValue({ size, sizes }),\n    height: getSizeValue({ size, sizes }),\n  }),\n\n  label: ({ theme, size }: CheckboxStyles) => ({\n    ...getFontStyles(theme),\n    WebkitTapHighlightColor: 'transparent',\n    paddingLeft: theme.spacing.sm,\n    fontSize: getSizeValue({ size, sizes: theme.fontSizes }),\n    lineHeight: `${getSizeValue({ size, sizes })}px`,\n    color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n  }),\n\n  input: ({ size, theme, color, transitionDuration }: CheckboxStyles) => ({\n    ...getFocusStyles(theme),\n    appearance: 'none',\n    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.white,\n    border: `1px solid ${\n      theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]\n    }`,\n    width: getSizeValue({ size, sizes }),\n    height: getSizeValue({ size, sizes }),\n    borderRadius: theme.radius.sm,\n    padding: 0,\n    outline: 0,\n    display: 'block',\n    margin: 0,\n    transition: `border-color ${transitionDuration}ms ease, background-color ${transitionDuration}ms ease`,\n\n    '&:checked': {\n      backgroundColor: getThemeColor({ theme, color, shade: 6 }),\n      borderColor: getThemeColor({ theme, color, shade: 6 }),\n\n      '& + $icon': {\n        opacity: 1,\n        transform: 'translateY(0) scale(1)',\n      },\n    },\n\n    '&:disabled': {\n      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n      borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[3],\n      cursor: 'not-allowed',\n\n      '& + $icon': {\n        color: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[5],\n      },\n    },\n  }),\n\n  icon: ({ theme, transitionDuration, size }: CheckboxStyles) => ({\n    color: theme.white,\n    transform: 'translateY(5px) scale(0.5)',\n    opacity: 0,\n    transition: `opacity ${transitionDuration}ms ease, transform ${transitionDuration}ms ease`,\n    pointerEvents: 'none',\n    width: getSizeValue({ size, sizes: iconSizes }),\n    position: 'absolute',\n    zIndex: 1,\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n    margin: 'auto',\n  }),\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Checkbox.styles.js","sources":["../../../src/components/Checkbox/Checkbox.styles.ts"],"sourcesContent":["import {\n  createStyles,\n  MantineSize,\n  getFontStyles,\n  getSizeValue,\n  getFocusStyles,\n  MantineColor,\n  getSharedColorScheme,\n} from '@mantine/styles';\n\nexport const sizes = {\n  xs: 14,\n  sm: 18,\n  md: 22,\n  lg: 28,\n  xl: 34,\n};\n\nconst iconSizes = {\n  xs: 8,\n  sm: 10,\n  md: 14,\n  lg: 16,\n  xl: 20,\n};\n\ninterface CheckboxStyles {\n  size: MantineSize;\n  color: MantineColor;\n  transitionDuration: number;\n}\n\nexport default createStyles(\n  (theme, { size, color, transitionDuration }: CheckboxStyles, getRef) => {\n    const colors = getSharedColorScheme({ color, theme, variant: 'filled' });\n    const _size = getSizeValue({ size, sizes });\n\n    const icon = {\n      ref: getRef('icon'),\n      color: colors.color,\n      transform: 'translateY(5px) scale(0.5)',\n      opacity: 0,\n      transitionProperty: 'opacity, transform',\n      transitionTimingFunction: 'ease',\n      transitionDuration: `${transitionDuration}ms`,\n      pointerEvents: 'none',\n      width: getSizeValue({ size, sizes: iconSizes }),\n      position: 'absolute',\n      zIndex: 1,\n      top: 0,\n      bottom: 0,\n      left: 0,\n      right: 0,\n      margin: 'auto',\n\n      '@media (prefers-reduced-motion)': {\n        transitionDuration: '0ms',\n      },\n    } as const;\n\n    return {\n      icon,\n\n      root: {\n        display: 'flex',\n        alignItems: 'center',\n      },\n\n      inner: {\n        position: 'relative',\n        width: _size,\n        height: _size,\n      },\n\n      label: {\n        ...getFontStyles(theme),\n        WebkitTapHighlightColor: 'transparent',\n        paddingLeft: theme.spacing.sm,\n        fontSize: getSizeValue({ size, sizes: theme.fontSizes }),\n        lineHeight: `${_size}px`,\n        color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n      },\n\n      input: {\n        ...getFocusStyles(theme),\n        appearance: 'none',\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.white,\n        border: `1px solid ${\n          theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]\n        }`,\n        width: _size,\n        height: _size,\n        borderRadius: theme.radius.sm,\n        padding: 0,\n        outline: 0,\n        display: 'block',\n        margin: 0,\n        transition: `border-color ${transitionDuration}ms ease, background-color ${transitionDuration}ms ease`,\n\n        '&:checked': {\n          backgroundColor: colors.background,\n          borderColor: colors.background,\n\n          [`& + .${icon.ref}`]: {\n            opacity: 1,\n            transform: 'translateY(0) scale(1)',\n          },\n        },\n\n        '&:disabled': {\n          backgroundColor:\n            theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n          borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[3],\n          cursor: 'not-allowed',\n\n          [`& + .${icon.ref}`]: {\n            color: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[5],\n          },\n        },\n      },\n    };\n  }\n);\n"],"names":[],"mappings":"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"}

package/esm/components/Checkbox/CheckboxIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxIcon.js","sources":["../../../src/components/Checkbox/CheckboxIcon.tsx"],"sourcesContent":["import React from 'react';\n\ninterface CheckboxIconProps extends React.ComponentPropsWithoutRef<'svg'> {\n  indeterminate: boolean;\n}\n\nexport function CheckboxIcon({ indeterminate, ...others }: CheckboxIconProps) {\n  if (indeterminate) {\n    return (\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 32 6\" {...others}>\n        <rect width=\"32\" height=\"6\" fill=\"currentColor\" rx=\"3\" />\n      </svg>\n    );\n  }\n\n  return (\n    <svg viewBox=\"0 0 10 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...others}>\n      <path\n        d=\"M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CheckboxIcon.js","sources":["../../../src/components/Checkbox/CheckboxIcon.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface CheckboxIconProps extends React.ComponentPropsWithoutRef<'svg'> {\n  indeterminate: boolean;\n}\n\nexport function CheckboxIcon({ indeterminate, ...others }: CheckboxIconProps) {\n  if (indeterminate) {\n    return (\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 32 6\" {...others}>\n        <rect width=\"32\" height=\"6\" fill=\"currentColor\" rx=\"3\" />\n      </svg>\n    );\n  }\n\n  return (\n    <svg viewBox=\"0 0 10 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...others}>\n      <path\n        d=\"M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  );\n}\n"],"names":[],"mappings":"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"}

package/esm/components/Chips/Chip/Chip.js

@@ -1,10 +1,8 @@
 import React from 'react';
-import cx from 'clsx';
 import { useId, useUncontrolled } from '@mantine/hooks';
-import { CheckboxIcon } from '../../Checkbox/CheckboxIcon.js';
+import { useMantineTheme, mergeStyles } from '@mantine/styles';
 import useStyles from './Chip.styles.js';
-import { useMantineTheme } from '../../../theme/use-mantine-theme/use-mantine-theme.js';
-import { mergeStyles } from '../../../theme/utils/merge-styles/merge-styles.js';
+import { CheckboxIcon } from '../../Checkbox/CheckboxIcon.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -52,8 +50,7 @@ function Chip(_a) {
     styles,
     checked,
     defaultChecked,
-    onChange,
-    themeOverride
+    onChange
   } = _b, others = __objRest(_b, [
     "radius",
     "type",
@@ -71,12 +68,11 @@ function Chip(_a) {
     "styles",
     "checked",
     "defaultChecked",
-    "onChange",
-    "themeOverride"
+    "onChange"
   ]);
   const uuid = useId(id);
-  const theme = useMantineTheme(themeOverride);
-  const classes = useStyles({ theme, radius, size, color }, classNames, __staticSelector);
+  const theme = useMantineTheme();
+  const { classes, cx } = useStyles({ radius, size, color }, classNames, __staticSelector);
   const _styles = mergeStyles(classes, styles);
   const [value, setValue] = useUncontrolled({
     value: checked,

package/esm/components/Chips/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sources":["../../../../src/components/Chips/Chip/Chip.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'clsx';\nimport { useUncontrolled, useId } from '@mantine/hooks';\nimport {\n  DefaultProps,\n  useMantineTheme,\n  MantineNumberSize,\n  MantineSize,\n  mergeStyles,\n} from '../../../theme';\nimport { CheckboxIcon } from '../../Checkbox/CheckboxIcon';\nimport useStyles from './Chip.styles';\n\nexport type ChipStylesNames = Exclude<keyof ReturnType<typeof useStyles>, 'filled' | 'outline'>;\n\nexport interface ChipProps\n  extends DefaultProps<ChipStylesNames>,\n    Omit<React.ComponentPropsWithoutRef<'input'>, 'size' | 'onChange'> {\n  /** Chip radius from theme or number to set value in px */\n  radius?: MantineNumberSize;\n\n  /** Predefined chip size */\n  size?: MantineSize;\n\n  /** Chip input type */\n  type?: 'radio' | 'checkbox';\n\n  /** Controls chip appearance, defaults to filled with dark theme and to outline in light theme */\n  variant?: 'outline' | 'filled';\n\n  /** Chip label */\n  children: React.ReactNode;\n\n  /** Checked state for controlled component */\n  checked?: boolean;\n\n  /** Default value for uncontrolled component */\n  defaultChecked?: boolean;\n\n  /** Calls when checked state changes */\n  onChange?(checked: boolean): void;\n\n  /** Active color from theme, defaults to theme.primaryColor */\n  color?: string;\n\n  /** Static id to bind input with label */\n  id?: string;\n\n  /** Get input ref */\n  elementRef?: React.ForwardedRef<HTMLInputElement>;\n\n  /** Static selector base */\n  __staticSelector?: string;\n\n  /** Input value */\n  value: string;\n}\n\nexport function Chip({\n  radius = 'xl',\n  type = 'checkbox',\n  size = 'sm',\n  variant,\n  disabled = false,\n  __staticSelector = 'chip',\n  elementRef,\n  id,\n  color,\n  children,\n  className,\n  classNames,\n  style,\n  styles,\n  checked,\n  defaultChecked,\n  onChange,\n  themeOverride,\n  ...others\n}: ChipProps) {\n  const uuid = useId(id);\n  const theme = useMantineTheme(themeOverride);\n  const classes = useStyles({ theme, radius, size, color }, classNames, __staticSelector);\n  const _styles = mergeStyles(classes, styles);\n  const [value, setValue] = useUncontrolled({\n    value: checked,\n    defaultValue: defaultChecked,\n    finalValue: true,\n    onChange,\n    rule: (val) => typeof val === 'boolean',\n  });\n\n  const defaultVariant = theme.colorScheme === 'dark' ? 'filled' : 'outline';\n\n  return (\n    <>\n      <input\n        type={type}\n        className={classes.input}\n        style={_styles.input}\n        checked={value}\n        onChange={(event) => setValue(event.currentTarget.checked)}\n        id={uuid}\n        disabled={disabled}\n        ref={elementRef}\n        {...others}\n      />\n      <label\n        className={cx(\n          classes.label,\n          { [classes.checked]: value, [classes.disabled]: disabled },\n          classes[variant || defaultVariant],\n          className\n        )}\n        style={{\n          ...style,\n          ..._styles.label,\n          ...(value ? _styles.checked : null),\n          ...(disabled ? _styles.disabled : null),\n        }}\n        htmlFor={uuid}\n      >\n        {value && (\n          <span className={classes.iconWrapper} style={_styles.iconWrapper}>\n            <CheckboxIcon\n              indeterminate={false}\n              className={classes.checkIcon}\n              style={{ ..._styles.checkIcon }}\n            />\n          </span>\n        )}\n        {children}\n      </label>\n    </>\n  );\n}\n\nChip.displayName = '@mantine/core/Chip';\n"],"names":[],"mappings":";;;;;;;;AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC;AACvD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACnD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC;AACzD,IAAI,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAChK,IAAI,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK;AAC/B,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAChC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AAClC,MAAM,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,EAAE,IAAI,mBAAmB;AACzB,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE;AAC7C,MAAM,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AACpC,QAAQ,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,KAAK;AACL,EAAE,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AACF,IAAI,SAAS,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK;AACrC,EAAE,IAAI,MAAM,GAAG,EAAE,CAAC;AAClB,EAAE,KAAK,IAAI,IAAI,IAAI,MAAM;AACzB,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACpE,MAAM,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAClC,EAAE,IAAI,MAAM,IAAI,IAAI,IAAI,mBAAmB;AAC3C,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,MAAM,CAAC,EAAE;AAClD,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AACtE,QAAQ,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AACpC,KAAK;AACL,EAAE,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAUK,SAAS,IAAI,CAAC,EAAE,EAAE;AACzB,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE;AACf,IAAI,MAAM,GAAG,IAAI;AACjB,IAAI,IAAI,GAAG,UAAU;AACrB,IAAI,IAAI,GAAG,IAAI;AACf,IAAI,OAAO;AACX,IAAI,QAAQ,GAAG,KAAK;AACpB,IAAI,gBAAgB,GAAG,MAAM;AAC7B,IAAI,UAAU;AACd,IAAI,EAAE;AACN,IAAI,KAAK;AACT,IAAI,QAAQ;AACZ,IAAI,SAAS;AACb,IAAI,UAAU;AACd,IAAI,KAAK;AACT,IAAI,MAAM;AACV,IAAI,OAAO;AACX,IAAI,cAAc;AAClB,IAAI,QAAQ;AACZ,IAAI,aAAa;AACjB,GAAG,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE;AACjC,IAAI,QAAQ;AACZ,IAAI,MAAM;AACV,IAAI,MAAM;AACV,IAAI,SAAS;AACb,IAAI,UAAU;AACd,IAAI,kBAAkB;AACtB,IAAI,YAAY;AAChB,IAAI,IAAI;AACR,IAAI,OAAO;AACX,IAAI,UAAU;AACd,IAAI,WAAW;AACf,IAAI,YAAY;AAChB,IAAI,OAAO;AACX,IAAI,QAAQ;AACZ,IAAI,SAAS;AACb,IAAI,gBAAgB;AACpB,IAAI,UAAU;AACd,IAAI,eAAe;AACnB,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,IAAI,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC;AACzB,EAAE,MAAM,KAAK,GAAG,eAAe,CAAC,aAAa,CAAC,CAAC;AAC/C,EAAE,MAAM,OAAO,GAAG,SAAS,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,gBAAgB,CAAC,CAAC;AAC1F,EAAE,MAAM,OAAO,GAAG,WAAW,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;AAC/C,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,eAAe,CAAC;AAC5C,IAAI,KAAK,EAAE,OAAO;AAClB,IAAI,YAAY,EAAE,cAAc;AAChC,IAAI,UAAU,EAAE,IAAI;AACpB,IAAI,QAAQ;AACZ,IAAI,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,GAAG,KAAK,SAAS;AAC3C,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAC7E,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,kBAAkB,KAAK,CAAC,aAAa,CAAC,OAAO,EAAE,cAAc,CAAC;AAC/H,IAAI,IAAI;AACR,IAAI,SAAS,EAAE,OAAO,CAAC,KAAK;AAC5B,IAAI,KAAK,EAAE,OAAO,CAAC,KAAK;AACxB,IAAI,OAAO,EAAE,KAAK;AAClB,IAAI,QAAQ,EAAE,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC;AAC9D,IAAI,EAAE,EAAE,IAAI;AACZ,IAAI,QAAQ;AACZ,IAAI,GAAG,EAAE,UAAU;AACnB,GAAG,EAAE,MAAM,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,OAAO,EAAE;AAC5D,IAAI,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,GAAG,KAAK,EAAE,CAAC,OAAO,CAAC,QAAQ,GAAG,QAAQ,EAAE,EAAE,OAAO,CAAC,OAAO,IAAI,cAAc,CAAC,EAAE,SAAS,CAAC;AAC3I,IAAI,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC;AACvK,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG,EAAE,KAAK,oBAAoB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AAC1D,IAAI,SAAS,EAAE,OAAO,CAAC,WAAW;AAClC,IAAI,KAAK,EAAE,OAAO,CAAC,WAAW;AAC9B,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,YAAY,EAAE;AACvD,IAAI,aAAa,EAAE,KAAK;AACxB,IAAI,SAAS,EAAE,OAAO,CAAC,SAAS;AAChC,IAAI,KAAK,EAAE,cAAc,CAAC,EAAE,EAAE,OAAO,CAAC,SAAS,CAAC;AAChD,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC;AAClB,CAAC;AACD,IAAI,CAAC,WAAW,GAAG,oBAAoB;;;;"}
+{"version":3,"file":"Chip.js","sources":["../../../../src/components/Chips/Chip/Chip.tsx"],"sourcesContent":["import React from 'react';\nimport { useUncontrolled, useId } from '@mantine/hooks';\nimport {\n  mergeStyles,\n  useMantineTheme,\n  DefaultProps,\n  MantineNumberSize,\n  MantineSize,\n  MantineColor,\n  ClassNames,\n} from '@mantine/styles';\nimport { CheckboxIcon } from '../../Checkbox';\nimport useStyles from './Chip.styles';\n\nexport type ChipStylesNames = Exclude<ClassNames<typeof useStyles>, 'filled' | 'outline'>;\n\nexport interface ChipProps\n  extends DefaultProps<ChipStylesNames>,\n    Omit<React.ComponentPropsWithoutRef<'input'>, 'size' | 'onChange'> {\n  /** Chip radius from theme or number to set value in px */\n  radius?: MantineNumberSize;\n\n  /** Predefined chip size */\n  size?: MantineSize;\n\n  /** Chip input type */\n  type?: 'radio' | 'checkbox';\n\n  /** Controls chip appearance, defaults to filled with dark theme and to outline in light theme */\n  variant?: 'outline' | 'filled';\n\n  /** Chip label */\n  children: React.ReactNode;\n\n  /** Checked state for controlled component */\n  checked?: boolean;\n\n  /** Default value for uncontrolled component */\n  defaultChecked?: boolean;\n\n  /** Calls when checked state changes */\n  onChange?(checked: boolean): void;\n\n  /** Active color from theme, defaults to theme.primaryColor */\n  color?: MantineColor;\n\n  /** Static id to bind input with label */\n  id?: string;\n\n  /** Get input ref */\n  elementRef?: React.ForwardedRef<HTMLInputElement>;\n\n  /** Static selector base */\n  __staticSelector?: string;\n\n  /** Input value */\n  value: string;\n}\n\nexport function Chip({\n  radius = 'xl',\n  type = 'checkbox',\n  size = 'sm',\n  variant,\n  disabled = false,\n  __staticSelector = 'chip',\n  elementRef,\n  id,\n  color,\n  children,\n  className,\n  classNames,\n  style,\n  styles,\n  checked,\n  defaultChecked,\n  onChange,\n  ...others\n}: ChipProps) {\n  const uuid = useId(id);\n  const theme = useMantineTheme();\n  const { classes, cx } = useStyles({ radius, size, color }, classNames, __staticSelector);\n  const _styles = mergeStyles(classes, styles);\n  const [value, setValue] = useUncontrolled({\n    value: checked,\n    defaultValue: defaultChecked,\n    finalValue: true,\n    onChange,\n    rule: (val) => typeof val === 'boolean',\n  });\n\n  const defaultVariant = theme.colorScheme === 'dark' ? 'filled' : 'outline';\n\n  return (\n    <>\n      <input\n        type={type}\n        className={classes.input}\n        style={_styles.input}\n        checked={value}\n        onChange={(event) => setValue(event.currentTarget.checked)}\n        id={uuid}\n        disabled={disabled}\n        ref={elementRef}\n        {...others}\n      />\n      <label\n        className={cx(\n          classes.label,\n          { [classes.checked]: value, [classes.disabled]: disabled },\n          classes[variant || defaultVariant],\n          className\n        )}\n        style={{\n          ...style,\n          ..._styles.label,\n          ...(value ? _styles.checked : null),\n          ...(disabled ? _styles.disabled : null),\n        }}\n        htmlFor={uuid}\n      >\n        {value && (\n          <span className={classes.iconWrapper} style={_styles.iconWrapper}>\n            <CheckboxIcon\n              indeterminate={false}\n              className={classes.checkIcon}\n              style={{ ..._styles.checkIcon }}\n            />\n          </span>\n        )}\n        {children}\n      </label>\n    </>\n  );\n}\n\nChip.displayName = '@mantine/core/Chip';\n"],"names":[],"mappings":"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"}

package/esm/components/Chips/Chip/Chip.styles.js

@@ -1,8 +1,4 @@
-import { createMemoStyles } from '../../../theme/create-memo-styles.js';
-import { getSizeValue } from '../../../theme/utils/get-size-value/get-size-value.js';
-import { getFontStyles } from '../../../theme/utils/get-font-styles/get-font-styles.js';
-import { getThemeColor } from '../../../theme/utils/get-theme-color/get-theme-color.js';
-import { getSharedColorScheme } from '../../../theme/utils/get-shared-color-scheme/get-shared-color-scheme.js';
+import { createStyles, getSizeValue, getFontStyles, getThemeColor, getSharedColorScheme } from '@mantine/styles';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -51,14 +47,16 @@ const checkedPadding = {
   lg: 13,
   xl: 15
 };
-var useStyles = createMemoStyles({
-  label: ({ theme, radius, size }) => __spreadProps(__spreadValues({}, getFontStyles(theme)), {
+var useStyles = createStyles((theme, { radius, size, color }, getRef) => {
+  const label = __spreadProps(__spreadValues({
+    ref: getRef("label")
+  }, getFontStyles(theme)), {
     boxSizing: "border-box",
     color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
     display: "inline-block",
     alignItems: "center",
     userSelect: "none",
-    border: "1px solid transparent",
+    border: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[4]}`,
     borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
     height: getSizeValue({ size, sizes }),
     fontSize: getSizeValue({ size, sizes: theme.fontSizes }),
@@ -69,54 +67,24 @@ var useStyles = createMemoStyles({
     whiteSpace: "nowrap",
     transition: "background-color 100ms ease",
     WebkitTapHighlightColor: "transparent"
-  }),
-  outline: ({ theme }) => ({
+  });
+  const outline = {
+    ref: getRef("outline"),
     backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white,
-    borderColor: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[4],
     "&:hover": {
       backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[0]
     }
-  }),
-  filled: ({ theme }) => ({
+  };
+  const filled = {
+    ref: getRef("filled"),
     backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1],
+    borderColor: "transparent",
     "&:hover": {
       backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0]
     }
-  }),
-  disabled: ({ theme }) => ({
-    backgroundColor: [
-      [theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1]],
-      "!important"
-    ],
-    borderColor: [
-      [theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1]],
-      "!important"
-    ],
-    color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[5],
-    cursor: "not-allowed",
-    "&:hover": {
-      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1]
-    },
-    "& $iconWrapper": {
-      color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[5]
-    }
-  }),
-  checked: ({ theme, color, size }) => ({
-    paddingLeft: getSizeValue({ size, sizes: checkedPadding }),
-    paddingRight: getSizeValue({ size, sizes: checkedPadding }),
-    "&$outline": {
-      borderColor: getThemeColor({ theme, color, shade: 6 })
-    },
-    "&$filled": {
-      backgroundColor: theme.colorScheme === "dark" ? getSharedColorScheme({ color, theme, variant: "light" }).background : getThemeColor({ theme, color, shade: 1 })
-    }
-  }),
-  checkIcon: ({ size }) => ({
-    width: getSizeValue({ size, sizes: iconSizes }),
-    height: getSizeValue({ size, sizes: iconSizes }) / 1.1,
-    display: "block"
-  }),
-  iconWrapper: ({ theme, color, size }) => ({
+  };
+  const iconWrapper = {
+    ref: getRef("iconWrapper"),
     color: getThemeColor({ theme, color, shade: 6 }),
     width: getSizeValue({ size, sizes: iconSizes }) + getSizeValue({ size, sizes: theme.spacing }) / 1.5,
     maxWidth: getSizeValue({ size, sizes: iconSizes }) + getSizeValue({ size, sizes: theme.spacing }) / 1.5,
@@ -124,26 +92,59 @@ var useStyles = createMemoStyles({
     display: "inline-block",
     verticalAlign: "middle",
     overflow: "hidden"
-  }),
-  input: ({ theme }) => ({
-    width: 0,
-    height: 0,
-    padding: 0,
-    opacity: 0,
-    margin: 0,
-    "&:focus": {
-      outline: "none",
-      "& + $label": {
-        outline: "none",
-        boxShadow: `0 0 0 2px ${theme.colorScheme === "dark" ? theme.colors.dark[9] : theme.white}, 0 0 0 4px ${theme.colors[theme.primaryColor][5]}`
+  };
+  return {
+    label,
+    filled,
+    iconWrapper,
+    outline,
+    disabled: {
+      backgroundColor: `${theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1]} !important`,
+      borderColor: `${theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1]} !important`,
+      color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[5],
+      cursor: "not-allowed",
+      "&:hover": {
+        backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1]
       },
-      "&:focus:not(:focus-visible)": {
-        "& + $label": {
-          boxShadow: "none"
+      [`& .${iconWrapper.ref}`]: {
+        color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[5]
+      }
+    },
+    checked: {
+      paddingLeft: getSizeValue({ size, sizes: checkedPadding }),
+      paddingRight: getSizeValue({ size, sizes: checkedPadding }),
+      [`&.${outline.ref}`]: {
+        border: `1px solid ${getThemeColor({ theme, color, shade: 6 })}`
+      },
+      [`&.${filled.ref}`]: {
+        backgroundColor: `${theme.colorScheme === "dark" ? getSharedColorScheme({ color, theme, variant: "light" }).background : getThemeColor({ theme, color, shade: 1 })} !important`
+      }
+    },
+    checkIcon: {
+      width: getSizeValue({ size, sizes: iconSizes }),
+      height: getSizeValue({ size, sizes: iconSizes }) / 1.1,
+      display: "block"
+    },
+    input: {
+      width: 0,
+      height: 0,
+      padding: 0,
+      opacity: 0,
+      margin: 0,
+      "&:focus": {
+        outline: "none",
+        [`& + .${label.ref}`]: {
+          outline: "none",
+          boxShadow: `0 0 0 2px ${theme.colorScheme === "dark" ? theme.colors.dark[9] : theme.white}, 0 0 0 4px ${theme.colors[theme.primaryColor][5]}`
+        },
+        "&:focus:not(:focus-visible)": {
+          [`& + .${label.ref}`]: {
+            boxShadow: "none"
+          }
         }
       }
     }
-  })
+  };
 });
 
 export default useStyles;