@mantine/core 5.10.2 → 6.0.0-alpha.1

package/esm/Select/SelectPopover/SelectPopover.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { rem } from '@mantine/styles';
 import { SelectScrollArea } from '../SelectScrollArea/SelectScrollArea.js';
 import useStyles from './SelectPopover.styles.js';
 import { Popover } from '../../Popover/Popover.js';
@@ -61,7 +62,7 @@ function SelectPopoverDropdown(_a) {
     p: 0,
     onMouseDown: (event) => event.preventDefault()
   }, others), /* @__PURE__ */ React.createElement("div", {
-    style: { maxHeight, display: "flex" }
+    style: { maxHeight: rem(maxHeight), display: "flex" }
   }, /* @__PURE__ */ React.createElement(Box, {
     component: component || "div",
     id: `${id}-items`,
@@ -92,7 +93,8 @@ function SelectPopover({
   classNames,
   styles,
   unstyled,
-  readOnly
+  readOnly,
+  variant
 }) {
   return /* @__PURE__ */ React.createElement(Popover, {
     unstyled,
@@ -111,7 +113,8 @@ function SelectPopover({
     transitionDuration,
     shadow,
     disabled: readOnly,
-    onPositionChange: (nextPosition) => switchDirectionOnFlip && (onDirectionChange == null ? void 0 : onDirectionChange(nextPosition === "top" ? "column-reverse" : "column"))
+    onPositionChange: (nextPosition) => switchDirectionOnFlip && (onDirectionChange == null ? void 0 : onDirectionChange(nextPosition === "top" ? "column-reverse" : "column")),
+    variant
   }, children);
 }
 SelectPopover.Target = Popover.Target;

package/esm/Select/SelectPopover/SelectPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectPopover.js","sources":["../../../src/Select/SelectPopover/SelectPopover.tsx"],"sourcesContent":["import React from 'react';\nimport { ClassNames, MantineShadow, Styles, Selectors, DefaultProps } from '@mantine/styles';\nimport { SelectScrollArea } from '../SelectScrollArea/SelectScrollArea';\nimport { Popover } from '../../Popover';\nimport { Box } from '../../Box';\nimport { MantineTransition } from '../../Transition';\nimport useStyles from './SelectPopover.styles';\n\nexport type SelectPopoverStylesNames = Selectors<typeof useStyles>;\n\ninterface SelectPopoverDropdownProps extends DefaultProps<SelectPopoverStylesNames> {\n  children: React.ReactNode;\n  id: string;\n  component?: any;\n  maxHeight?: number | string;\n  direction?: React.CSSProperties['flexDirection'];\n  innerRef?: React.MutableRefObject<HTMLDivElement>;\n  __staticSelector?: string;\n}\n\nfunction SelectPopoverDropdown({\n  children,\n  component = 'div',\n  maxHeight = 220,\n  direction = 'column',\n  id,\n  innerRef,\n  __staticSelector,\n  styles,\n  classNames,\n  unstyled,\n  ...others\n}: SelectPopoverDropdownProps) {\n  const { classes } = useStyles(null, { name: __staticSelector, styles, classNames, unstyled });\n\n  return (\n    <Popover.Dropdown p={0} onMouseDown={(event) => event.preventDefault()} {...others}>\n      <div style={{ maxHeight, display: 'flex' }}>\n        <Box<'div'>\n          component={(component || 'div') as any}\n          id={`${id}-items`}\n          aria-labelledby={`${id}-label`}\n          role=\"listbox\"\n          onMouseDown={(event) => event.preventDefault()}\n          style={{ flex: 1, overflowY: component !== SelectScrollArea ? 'auto' : undefined }}\n          data-combobox-popover\n          ref={innerRef}\n        >\n          <div className={classes.itemsWrapper} style={{ flexDirection: direction }}>\n            {children}\n          </div>\n        </Box>\n      </div>\n    </Popover.Dropdown>\n  );\n}\n\ninterface SelectPopoverProps {\n  opened: boolean;\n  transition?: MantineTransition;\n  transitionDuration?: number;\n  shadow?: MantineShadow;\n  withinPortal?: boolean;\n  children: React.ReactNode;\n  __staticSelector?: string;\n  onDirectionChange?(direction: React.CSSProperties['flexDirection']): void;\n  switchDirectionOnFlip?: boolean;\n  zIndex?: React.CSSProperties['zIndex'];\n  dropdownPosition?: 'bottom' | 'top' | 'flip';\n  positionDependencies?: any[];\n  classNames?: ClassNames<SelectPopoverStylesNames>;\n  styles?: Styles<SelectPopoverStylesNames>;\n  unstyled?: boolean;\n  readOnly?: boolean;\n}\n\nexport function SelectPopover({\n  opened,\n  transition = 'fade',\n  transitionDuration = 0,\n  shadow,\n  withinPortal,\n  children,\n  __staticSelector,\n  onDirectionChange,\n  switchDirectionOnFlip,\n  zIndex,\n  dropdownPosition,\n  positionDependencies = [],\n  classNames,\n  styles,\n  unstyled,\n  readOnly,\n}: SelectPopoverProps) {\n  return (\n    <Popover\n      unstyled={unstyled}\n      classNames={classNames}\n      styles={styles}\n      width=\"target\"\n      withRoles={false}\n      opened={opened}\n      middlewares={{ flip: dropdownPosition === 'flip', shift: false }}\n      position={dropdownPosition === 'flip' ? 'bottom' : dropdownPosition}\n      positionDependencies={positionDependencies}\n      zIndex={zIndex}\n      __staticSelector={__staticSelector}\n      withinPortal={withinPortal}\n      transition={transition}\n      transitionDuration={transitionDuration}\n      shadow={shadow}\n      disabled={readOnly}\n      onPositionChange={(nextPosition) =>\n        switchDirectionOnFlip &&\n        onDirectionChange?.(nextPosition === 'top' ? 'column-reverse' : 'column')\n      }\n    >\n      {children}\n    </Popover>\n  );\n}\n\nSelectPopover.Target = Popover.Target;\nSelectPopover.Dropdown = SelectPopoverDropdown;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectPopover.js","sources":["../../../src/Select/SelectPopover/SelectPopover.tsx"],"sourcesContent":["import React from 'react';\nimport { ClassNames, MantineShadow, Styles, Selectors, DefaultProps, rem } from '@mantine/styles';\nimport { SelectScrollArea } from '../SelectScrollArea/SelectScrollArea';\nimport { Popover } from '../../Popover';\nimport { Box } from '../../Box';\nimport { MantineTransition } from '../../Transition';\nimport useStyles from './SelectPopover.styles';\n\nexport type SelectPopoverStylesNames = Selectors<typeof useStyles>;\n\ninterface SelectPopoverDropdownProps extends DefaultProps<SelectPopoverStylesNames> {\n  children: React.ReactNode;\n  id: string;\n  component?: any;\n  maxHeight?: number | string;\n  direction?: React.CSSProperties['flexDirection'];\n  innerRef?: React.MutableRefObject<HTMLDivElement>;\n  __staticSelector?: string;\n}\n\nfunction SelectPopoverDropdown({\n  children,\n  component = 'div',\n  maxHeight = 220,\n  direction = 'column',\n  id,\n  innerRef,\n  __staticSelector,\n  styles,\n  classNames,\n  unstyled,\n  ...others\n}: SelectPopoverDropdownProps) {\n  const { classes } = useStyles(null, { name: __staticSelector, styles, classNames, unstyled });\n\n  return (\n    <Popover.Dropdown p={0} onMouseDown={(event) => event.preventDefault()} {...others}>\n      <div style={{ maxHeight: rem(maxHeight), display: 'flex' }}>\n        <Box<'div'>\n          component={(component || 'div') as any}\n          id={`${id}-items`}\n          aria-labelledby={`${id}-label`}\n          role=\"listbox\"\n          onMouseDown={(event) => event.preventDefault()}\n          style={{ flex: 1, overflowY: component !== SelectScrollArea ? 'auto' : undefined }}\n          data-combobox-popover\n          ref={innerRef}\n        >\n          <div className={classes.itemsWrapper} style={{ flexDirection: direction }}>\n            {children}\n          </div>\n        </Box>\n      </div>\n    </Popover.Dropdown>\n  );\n}\n\ninterface SelectPopoverProps {\n  opened: boolean;\n  transition?: MantineTransition;\n  transitionDuration?: number;\n  shadow?: MantineShadow;\n  withinPortal?: boolean;\n  children: React.ReactNode;\n  __staticSelector?: string;\n  onDirectionChange?(direction: React.CSSProperties['flexDirection']): void;\n  switchDirectionOnFlip?: boolean;\n  zIndex?: React.CSSProperties['zIndex'];\n  dropdownPosition?: 'bottom' | 'top' | 'flip';\n  positionDependencies?: any[];\n  classNames?: ClassNames<SelectPopoverStylesNames>;\n  styles?: Styles<SelectPopoverStylesNames>;\n  unstyled?: boolean;\n  readOnly?: boolean;\n  variant: string;\n}\n\nexport function SelectPopover({\n  opened,\n  transition = 'fade',\n  transitionDuration = 0,\n  shadow,\n  withinPortal,\n  children,\n  __staticSelector,\n  onDirectionChange,\n  switchDirectionOnFlip,\n  zIndex,\n  dropdownPosition,\n  positionDependencies = [],\n  classNames,\n  styles,\n  unstyled,\n  readOnly,\n  variant,\n}: SelectPopoverProps) {\n  return (\n    <Popover\n      unstyled={unstyled}\n      classNames={classNames}\n      styles={styles}\n      width=\"target\"\n      withRoles={false}\n      opened={opened}\n      middlewares={{ flip: dropdownPosition === 'flip', shift: false }}\n      position={dropdownPosition === 'flip' ? 'bottom' : dropdownPosition}\n      positionDependencies={positionDependencies}\n      zIndex={zIndex}\n      __staticSelector={__staticSelector}\n      withinPortal={withinPortal}\n      transition={transition}\n      transitionDuration={transitionDuration}\n      shadow={shadow}\n      disabled={readOnly}\n      onPositionChange={(nextPosition) =>\n        switchDirectionOnFlip &&\n        onDirectionChange?.(nextPosition === 'top' ? 'column-reverse' : 'column')\n      }\n      variant={variant}\n    >\n      {children}\n    </Popover>\n  );\n}\n\nSelectPopover.Target = Popover.Target;\nSelectPopover.Dropdown = SelectPopoverDropdown;\n"],"names":[],"mappings":"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"}

package/esm/Select/SelectPopover/SelectPopover.styles.js

@@ -1,9 +1,9 @@
-import { createStyles } from '@mantine/styles';
+import { createStyles, rem } from '@mantine/styles';
 
 var useStyles = createStyles(() => ({
   dropdown: {},
   itemsWrapper: {
-    padding: 4,
+    padding: rem(4),
     display: "flex",
     width: "100%",
     boxSizing: "border-box"

package/esm/Select/SelectPopover/SelectPopover.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectPopover.styles.js","sources":["../../../src/Select/SelectPopover/SelectPopover.styles.ts"],"sourcesContent":["import { createStyles } from '@mantine/styles';\n\nexport default createStyles(() => ({\n  dropdown: {},\n\n  itemsWrapper: {\n    padding: 4,\n    display: 'flex',\n    width: '100%',\n    boxSizing: 'border-box',\n  },\n}));\n"],"names":[],"mappings":";;AACA,gBAAe,YAAY,CAAC,OAAO;AACnC,EAAE,QAAQ,EAAE,EAAE;AACd,EAAE,YAAY,EAAE;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,IAAI,OAAO,EAAE,MAAM;AACnB,IAAI,KAAK,EAAE,MAAM;AACjB,IAAI,SAAS,EAAE,YAAY;AAC3B,GAAG;AACH,CAAC,CAAC,CAAC;;;;"}
+{"version":3,"file":"SelectPopover.styles.js","sources":["../../../src/Select/SelectPopover/SelectPopover.styles.ts"],"sourcesContent":["import { createStyles, rem } from '@mantine/styles';\n\nexport default createStyles(() => ({\n  dropdown: {},\n\n  itemsWrapper: {\n    padding: rem(4),\n    display: 'flex',\n    width: '100%',\n    boxSizing: 'border-box',\n  },\n}));\n"],"names":[],"mappings":";;AACA,gBAAe,YAAY,CAAC,OAAO;AACnC,EAAE,QAAQ,EAAE,EAAE;AACd,EAAE,YAAY,EAAE;AAChB,IAAI,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;AACnB,IAAI,OAAO,EAAE,MAAM;AACnB,IAAI,KAAK,EAAE,MAAM;AACjB,IAAI,SAAS,EAAE,YAAY;AAC3B,GAAG;AACH,CAAC,CAAC,CAAC;;;;"}

package/esm/Select/SelectRightSection/ChevronIcon.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useMantineTheme } from '@mantine/styles';
+import { rem, useMantineTheme, getSize } from '@mantine/styles';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -30,16 +30,16 @@ var __objRest = (source, exclude) => {
   return target;
 };
 const iconSizes = {
-  xs: 14,
-  sm: 18,
-  md: 20,
-  lg: 24,
-  xl: 28
+  xs: rem(14),
+  sm: rem(18),
+  md: rem(20),
+  lg: rem(24),
+  xl: rem(28)
 };
 function ChevronIcon(_a) {
   var _b = _a, { size, error, style } = _b, others = __objRest(_b, ["size", "error", "style"]);
   const theme = useMantineTheme();
-  const _size = theme.fn.size({ size, sizes: iconSizes });
+  const _size = getSize({ size, sizes: iconSizes });
   return /* @__PURE__ */ React.createElement("svg", __spreadValues({
     width: _size,
     height: _size,

package/esm/Select/SelectRightSection/ChevronIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChevronIcon.js","sources":["../../../src/Select/SelectRightSection/ChevronIcon.tsx"],"sourcesContent":["import React from 'react';\nimport { useMantineTheme, MantineSize } from '@mantine/styles';\n\ninterface ChevronIconProps extends React.ComponentPropsWithoutRef<'svg'> {\n  size: MantineSize;\n  error: any;\n}\n\nconst iconSizes = {\n  xs: 14,\n  sm: 18,\n  md: 20,\n  lg: 24,\n  xl: 28,\n};\n\nexport function ChevronIcon({ size, error, style, ...others }: ChevronIconProps) {\n  const theme = useMantineTheme();\n  const _size = theme.fn.size({ size, sizes: iconSizes });\n\n  return (\n    <svg\n      width={_size}\n      height={_size}\n      viewBox=\"0 0 15 15\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      style={{ color: error ? theme.colors.red[6] : theme.colors.gray[6], ...style }}\n      data-chevron\n      {...others}\n    >\n      <path\n        d=\"M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ChevronIcon.js","sources":["../../../src/Select/SelectRightSection/ChevronIcon.tsx"],"sourcesContent":["import React from 'react';\nimport { useMantineTheme, MantineSize, getSize, rem } from '@mantine/styles';\n\ninterface ChevronIconProps extends React.ComponentPropsWithoutRef<'svg'> {\n  size: MantineSize;\n  error: any;\n}\n\nconst iconSizes = {\n  xs: rem(14),\n  sm: rem(18),\n  md: rem(20),\n  lg: rem(24),\n  xl: rem(28),\n};\n\nexport function ChevronIcon({ size, error, style, ...others }: ChevronIconProps) {\n  const theme = useMantineTheme();\n  const _size = getSize({ size, sizes: iconSizes });\n\n  return (\n    <svg\n      width={_size}\n      height={_size}\n      viewBox=\"0 0 15 15\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      style={{ color: error ? theme.colors.red[6] : theme.colors.gray[6], ...style }}\n      data-chevron\n      {...others}\n    >\n      <path\n        d=\"M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  );\n}\n"],"names":[],"mappings":"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"}

package/esm/Select/SelectRightSection/SelectRightSection.js

@@ -2,22 +2,38 @@ import React from 'react';
 import { ChevronIcon } from './ChevronIcon.js';
 import { CloseButton } from '../../CloseButton/CloseButton.js';
 
+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;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 function SelectRightSection({
   shouldClear,
-  clearButtonLabel,
+  clearButtonProps,
   onClear,
   size,
-  error,
-  clearButtonTabIndex
+  error
 }) {
-  return shouldClear ? /* @__PURE__ */ React.createElement(CloseButton, {
+  return shouldClear ? /* @__PURE__ */ React.createElement(CloseButton, __spreadProps(__spreadValues({}, clearButtonProps), {
     variant: "transparent",
-    "aria-label": clearButtonLabel,
     onClick: onClear,
     size,
-    tabIndex: clearButtonTabIndex,
     onMouseDown: (event) => event.preventDefault()
-  }) : /* @__PURE__ */ React.createElement(ChevronIcon, {
+  })) : /* @__PURE__ */ React.createElement(ChevronIcon, {
     error,
     size
   });

package/esm/Select/SelectRightSection/SelectRightSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectRightSection.js","sources":["../../../src/Select/SelectRightSection/SelectRightSection.tsx"],"sourcesContent":["import React from 'react';\nimport { MantineSize } from '@mantine/styles';\nimport { CloseButton } from '../../CloseButton';\nimport { ChevronIcon } from './ChevronIcon';\n\nexport interface SelectRightSectionProps {\n  shouldClear: boolean;\n  clearButtonLabel?: string;\n  onClear?: () => void;\n  size: MantineSize;\n  error?: any;\n  // eslint-disable-next-line react/no-unused-prop-types\n  disabled?: boolean;\n  clearButtonTabIndex?: number;\n}\n\nexport function SelectRightSection({\n  shouldClear,\n  clearButtonLabel,\n  onClear,\n  size,\n  error,\n  clearButtonTabIndex,\n}: SelectRightSectionProps) {\n  return shouldClear ? (\n    <CloseButton\n      variant=\"transparent\"\n      aria-label={clearButtonLabel}\n      onClick={onClear}\n      size={size}\n      tabIndex={clearButtonTabIndex}\n      onMouseDown={(event) => event.preventDefault()}\n    />\n  ) : (\n    <ChevronIcon error={error} size={size} />\n  );\n}\n\nSelectRightSection.displayName = '@mantine/core/SelectRightSection';\n"],"names":[],"mappings":";;;;AAGO,SAAS,kBAAkB,CAAC;AACnC,EAAE,WAAW;AACb,EAAE,gBAAgB;AAClB,EAAE,OAAO;AACT,EAAE,IAAI;AACN,EAAE,KAAK;AACP,EAAE,mBAAmB;AACrB,CAAC,EAAE;AACH,EAAE,OAAO,WAAW,mBAAmB,KAAK,CAAC,aAAa,CAAC,WAAW,EAAE;AACxE,IAAI,OAAO,EAAE,aAAa;AAC1B,IAAI,YAAY,EAAE,gBAAgB;AAClC,IAAI,OAAO,EAAE,OAAO;AACpB,IAAI,IAAI;AACR,IAAI,QAAQ,EAAE,mBAAmB;AACjC,IAAI,WAAW,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,cAAc,EAAE;AAClD,GAAG,CAAC,mBAAmB,KAAK,CAAC,aAAa,CAAC,WAAW,EAAE;AACxD,IAAI,KAAK;AACT,IAAI,IAAI;AACR,GAAG,CAAC,CAAC;AACL,CAAC;AACD,kBAAkB,CAAC,WAAW,GAAG,kCAAkC;;;;"}
+{"version":3,"file":"SelectRightSection.js","sources":["../../../src/Select/SelectRightSection/SelectRightSection.tsx"],"sourcesContent":["import React from 'react';\nimport { MantineSize } from '@mantine/styles';\nimport { CloseButton } from '../../CloseButton';\nimport { ChevronIcon } from './ChevronIcon';\n\nexport interface SelectRightSectionProps {\n  shouldClear: boolean;\n  clearButtonProps?: React.ComponentPropsWithoutRef<'button'>;\n  onClear?: () => void;\n  size: MantineSize;\n  error?: any;\n  // eslint-disable-next-line react/no-unused-prop-types\n  disabled?: boolean;\n}\n\nexport function SelectRightSection({\n  shouldClear,\n  clearButtonProps,\n  onClear,\n  size,\n  error,\n}: SelectRightSectionProps) {\n  return shouldClear ? (\n    <CloseButton\n      {...clearButtonProps}\n      variant=\"transparent\"\n      onClick={onClear}\n      size={size}\n      onMouseDown={(event) => event.preventDefault()}\n    />\n  ) : (\n    <ChevronIcon error={error} size={size} />\n  );\n}\n\nSelectRightSection.displayName = '@mantine/core/SelectRightSection';\n"],"names":[],"mappings":";;;;AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,UAAU,GAAG,MAAM,CAAC,gBAAgB,CAAC;AACzC,IAAI,iBAAiB,GAAG,MAAM,CAAC,yBAAyB,CAAC;AACzD,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,aAAa,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,UAAU,CAAC,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;AAI3D,SAAS,kBAAkB,CAAC;AACnC,EAAE,WAAW;AACb,EAAE,gBAAgB;AAClB,EAAE,OAAO;AACT,EAAE,IAAI;AACN,EAAE,KAAK;AACP,CAAC,EAAE;AACH,EAAE,OAAO,WAAW,mBAAmB,KAAK,CAAC,aAAa,CAAC,WAAW,EAAE,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,gBAAgB,CAAC,EAAE;AAC5H,IAAI,OAAO,EAAE,aAAa;AAC1B,IAAI,OAAO,EAAE,OAAO;AACpB,IAAI,IAAI;AACR,IAAI,WAAW,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,cAAc,EAAE;AAClD,GAAG,CAAC,CAAC,mBAAmB,KAAK,CAAC,aAAa,CAAC,WAAW,EAAE;AACzD,IAAI,KAAK;AACT,IAAI,IAAI;AACR,GAAG,CAAC,CAAC;AACL,CAAC;AACD,kBAAkB,CAAC,WAAW,GAAG,kCAAkC;;;;"}

package/esm/Select/SelectRightSection/get-select-right-section-props.js

@@ -32,13 +32,6 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-const RIGHT_SECTION_WIDTH = {
-  xs: 24,
-  sm: 30,
-  md: 34,
-  lg: 44,
-  xl: 54
-};
 function getSelectRightSectionProps(_a) {
   var _b = _a, {
     styles,
@@ -56,7 +49,6 @@ function getSelectRightSectionProps(_a) {
   }
   const _styles = typeof styles === "function" ? styles(theme) : styles;
   return {
-    rightSectionWidth: theme.fn.size({ size: props.size, sizes: RIGHT_SECTION_WIDTH }),
     rightSection: !props.readOnly && !(props.disabled && props.shouldClear) && /* @__PURE__ */ React.createElement(SelectRightSection, __spreadValues({}, props)),
     styles: __spreadProps(__spreadValues({}, _styles), {
       rightSection: __spreadProps(__spreadValues({}, _styles == null ? void 0 : _styles.rightSection), {

package/esm/Select/SelectRightSection/get-select-right-section-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-select-right-section-props.js","sources":["../../../src/Select/SelectRightSection/get-select-right-section-props.tsx"],"sourcesContent":["import React from 'react';\nimport { MantineTheme } from '@mantine/styles';\nimport { SelectRightSection, SelectRightSectionProps } from './SelectRightSection';\n\ninterface GetRightSectionProps extends SelectRightSectionProps {\n  rightSection?: React.ReactNode;\n  rightSectionWidth?: string | number;\n  styles: Record<string, any>;\n  theme: MantineTheme;\n  readOnly: boolean;\n}\n\nconst RIGHT_SECTION_WIDTH = {\n  xs: 24,\n  sm: 30,\n  md: 34,\n  lg: 44,\n  xl: 54,\n};\n\nexport function getSelectRightSectionProps({\n  styles,\n  rightSection,\n  rightSectionWidth,\n  theme,\n  ...props\n}: GetRightSectionProps) {\n  if (rightSection) {\n    return { rightSection, rightSectionWidth, styles };\n  }\n\n  const _styles = typeof styles === 'function' ? styles(theme) : styles;\n\n  return {\n    rightSectionWidth: theme.fn.size({ size: props.size, sizes: RIGHT_SECTION_WIDTH }),\n    rightSection: !props.readOnly && !(props.disabled && props.shouldClear) && (\n      <SelectRightSection {...props} />\n    ),\n    styles: {\n      ..._styles,\n      rightSection: {\n        ..._styles?.rightSection,\n        pointerEvents: props.shouldClear ? undefined : 'none',\n      },\n    },\n  };\n}\n"],"names":[],"mappings":";;;AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,UAAU,GAAG,MAAM,CAAC,gBAAgB,CAAC;AACzC,IAAI,iBAAiB,GAAG,MAAM,CAAC,yBAAyB,CAAC;AACzD,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,aAAa,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,UAAU,CAAC,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;AAClE,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;AAGF,MAAM,mBAAmB,GAAG;AAC5B,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,CAAC,CAAC;AACK,SAAS,0BAA0B,CAAC,EAAE,EAAE;AAC/C,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE;AACf,IAAI,MAAM;AACV,IAAI,YAAY;AAChB,IAAI,iBAAiB;AACrB,IAAI,KAAK;AACT,GAAG,GAAG,EAAE,EAAE,KAAK,GAAG,SAAS,CAAC,EAAE,EAAE;AAChC,IAAI,QAAQ;AACZ,IAAI,cAAc;AAClB,IAAI,mBAAmB;AACvB,IAAI,OAAO;AACX,GAAG,CAAC,CAAC;AACL,EAAE,IAAI,YAAY,EAAE;AACpB,IAAI,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,EAAE,CAAC;AACvD,GAAG;AACH,EAAE,MAAM,OAAO,GAAG,OAAO,MAAM,KAAK,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC;AACxE,EAAE,OAAO;AACT,IAAI,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,mBAAmB,EAAE,CAAC;AACtF,IAAI,YAAY,EAAE,CAAC,KAAK,CAAC,QAAQ,IAAI,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,WAAW,CAAC,oBAAoB,KAAK,CAAC,aAAa,CAAC,kBAAkB,EAAE,cAAc,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;AACjK,IAAI,MAAM,EAAE,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,OAAO,CAAC,EAAE;AACvD,MAAM,YAAY,EAAE,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,OAAO,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,YAAY,CAAC,EAAE;AACvG,QAAQ,aAAa,EAAE,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,GAAG,MAAM;AAC1D,OAAO,CAAC;AACR,KAAK,CAAC;AACN,GAAG,CAAC;AACJ;;;;"}
+{"version":3,"file":"get-select-right-section-props.js","sources":["../../../src/Select/SelectRightSection/get-select-right-section-props.tsx"],"sourcesContent":["import React from 'react';\nimport { MantineTheme } from '@mantine/styles';\nimport { SelectRightSection, SelectRightSectionProps } from './SelectRightSection';\n\ninterface GetRightSectionProps extends SelectRightSectionProps {\n  rightSection?: React.ReactNode;\n  rightSectionWidth?: string | number;\n  styles: Record<string, any>;\n  theme: MantineTheme;\n  readOnly: boolean;\n}\n\nexport function getSelectRightSectionProps({\n  styles,\n  rightSection,\n  rightSectionWidth,\n  theme,\n  ...props\n}: GetRightSectionProps) {\n  if (rightSection) {\n    return { rightSection, rightSectionWidth, styles };\n  }\n\n  const _styles = typeof styles === 'function' ? styles(theme) : styles;\n\n  return {\n    rightSection: !props.readOnly && !(props.disabled && props.shouldClear) && (\n      <SelectRightSection {...props} />\n    ),\n    styles: {\n      ..._styles,\n      rightSection: {\n        ..._styles?.rightSection,\n        pointerEvents: props.shouldClear ? undefined : 'none',\n      },\n    },\n  };\n}\n"],"names":[],"mappings":"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"}

package/esm/SimpleGrid/SimpleGrid.js

@@ -37,8 +37,26 @@ const defaultProps = {
   spacing: "md"
 };
 const SimpleGrid = forwardRef((props, ref) => {
-  const _a = useComponentDefaultProps("SimpleGrid", defaultProps, props), { className, breakpoints, cols, spacing, verticalSpacing, children, unstyled } = _a, others = __objRest(_a, ["className", "breakpoints", "cols", "spacing", "verticalSpacing", "children", "unstyled"]);
-  const { classes, cx } = useStyles({ breakpoints, cols, spacing, verticalSpacing }, { unstyled, name: "SimpleGrid" });
+  const _a = useComponentDefaultProps("SimpleGrid", defaultProps, props), {
+    className,
+    breakpoints,
+    cols,
+    spacing,
+    verticalSpacing,
+    children,
+    unstyled,
+    variant
+  } = _a, others = __objRest(_a, [
+    "className",
+    "breakpoints",
+    "cols",
+    "spacing",
+    "verticalSpacing",
+    "children",
+    "unstyled",
+    "variant"
+  ]);
+  const { classes, cx } = useStyles({ breakpoints, cols, spacing, verticalSpacing }, { name: "SimpleGrid", unstyled, variant });
   return /* @__PURE__ */ React.createElement(Box, __spreadValues({
     className: cx(classes.root, className),
     ref

package/esm/SimpleGrid/SimpleGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleGrid.js","sources":["../../src/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { DefaultProps, MantineNumberSize, useComponentDefaultProps } from '@mantine/styles';\nimport { Box } from '../Box';\nimport useStyles, { SimpleGridBreakpoint, SimpleGridStylesParams } from './SimpleGrid.styles';\n\nexport interface SimpleGridProps\n  extends DefaultProps<never, SimpleGridStylesParams>,\n    React.ComponentPropsWithoutRef<'div'> {\n  /** Breakpoints data to change items per row and spacing based on max-width */\n  breakpoints?: SimpleGridBreakpoint[];\n\n  /** Default amount of columns, used when none of breakpoints can be applied  */\n  cols?: number;\n\n  /** Spacing between columns, used when none of breakpoints can be applied */\n  spacing?: MantineNumberSize;\n\n  /** Vertical spacing between columns, used when none of breakpoints can be applied  */\n  verticalSpacing?: MantineNumberSize;\n}\n\nconst defaultProps: Partial<SimpleGridProps> = {\n  breakpoints: [],\n  cols: 1,\n  spacing: 'md',\n};\n\nexport const SimpleGrid = forwardRef<HTMLDivElement, SimpleGridProps>((props, ref) => {\n  const { className, breakpoints, cols, spacing, verticalSpacing, children, unstyled, ...others } =\n    useComponentDefaultProps('SimpleGrid', defaultProps, props);\n\n  const { classes, cx } = useStyles(\n    { breakpoints, cols, spacing, verticalSpacing },\n    { unstyled, name: 'SimpleGrid' }\n  );\n\n  return (\n    <Box className={cx(classes.root, className)} ref={ref} {...others}>\n      {children}\n    </Box>\n  );\n});\n\nSimpleGrid.displayName = '@mantine/core/SimpleGrid';\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;AAKF,MAAM,YAAY,GAAG;AACrB,EAAE,WAAW,EAAE,EAAE;AACjB,EAAE,IAAI,EAAE,CAAC;AACT,EAAE,OAAO,EAAE,IAAI;AACf,CAAC,CAAC;AACU,MAAC,UAAU,GAAG,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK;AACrD,EAAE,MAAM,EAAE,GAAG,wBAAwB,CAAC,YAAY,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE,CAAC,WAAW,EAAE,aAAa,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC;AAClR,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,SAAS,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAC;AACvH,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE,cAAc,CAAC;AACjE,IAAI,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC;AAC1C,IAAI,GAAG;AACP,GAAG,EAAE,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC;AACxB,CAAC,EAAE;AACH,UAAU,CAAC,WAAW,GAAG,0BAA0B;;;;"}
+{"version":3,"file":"SimpleGrid.js","sources":["../../src/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { DefaultProps, MantineNumberSize, useComponentDefaultProps } from '@mantine/styles';\nimport { Box } from '../Box';\nimport useStyles, { SimpleGridBreakpoint, SimpleGridStylesParams } from './SimpleGrid.styles';\n\nexport interface SimpleGridProps\n  extends DefaultProps<never, SimpleGridStylesParams>,\n    React.ComponentPropsWithoutRef<'div'> {\n  variant?: string;\n\n  /** Breakpoints data to change items per row and spacing based on max-width */\n  breakpoints?: SimpleGridBreakpoint[];\n\n  /** Default amount of columns, used when none of breakpoints can be applied  */\n  cols?: number;\n\n  /** Spacing between columns, used when none of breakpoints can be applied */\n  spacing?: MantineNumberSize;\n\n  /** Vertical spacing between columns, used when none of breakpoints can be applied  */\n  verticalSpacing?: MantineNumberSize;\n}\n\nconst defaultProps: Partial<SimpleGridProps> = {\n  breakpoints: [],\n  cols: 1,\n  spacing: 'md',\n};\n\nexport const SimpleGrid = forwardRef<HTMLDivElement, SimpleGridProps>((props, ref) => {\n  const {\n    className,\n    breakpoints,\n    cols,\n    spacing,\n    verticalSpacing,\n    children,\n    unstyled,\n    variant,\n    ...others\n  } = useComponentDefaultProps('SimpleGrid', defaultProps, props);\n\n  const { classes, cx } = useStyles(\n    { breakpoints, cols, spacing, verticalSpacing },\n    { name: 'SimpleGrid', unstyled, variant }\n  );\n\n  return (\n    <Box className={cx(classes.root, className)} ref={ref} {...others}>\n      {children}\n    </Box>\n  );\n});\n\nSimpleGrid.displayName = '@mantine/core/SimpleGrid';\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;AAKF,MAAM,YAAY,GAAG;AACrB,EAAE,WAAW,EAAE,EAAE;AACjB,EAAE,IAAI,EAAE,CAAC;AACT,EAAE,OAAO,EAAE,IAAI;AACf,CAAC,CAAC;AACU,MAAC,UAAU,GAAG,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK;AACrD,EAAE,MAAM,EAAE,GAAG,wBAAwB,CAAC,YAAY,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE;AAC1E,IAAI,SAAS;AACb,IAAI,WAAW;AACf,IAAI,IAAI;AACR,IAAI,OAAO;AACX,IAAI,eAAe;AACnB,IAAI,QAAQ;AACZ,IAAI,QAAQ;AACZ,IAAI,OAAO;AACX,GAAG,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE;AACjC,IAAI,WAAW;AACf,IAAI,aAAa;AACjB,IAAI,MAAM;AACV,IAAI,SAAS;AACb,IAAI,iBAAiB;AACrB,IAAI,UAAU;AACd,IAAI,UAAU;AACd,IAAI,SAAS;AACb,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,SAAS,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC;AAChI,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE,cAAc,CAAC;AACjE,IAAI,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC;AAC1C,IAAI,GAAG;AACP,GAAG,EAAE,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC;AACxB,CAAC,EAAE;AACH,UAAU,CAAC,WAAW,GAAG,0BAA0B;;;;"}

package/esm/SimpleGrid/SimpleGrid.styles.js

@@ -1,4 +1,4 @@
-import { createStyles } from '@mantine/styles';
+import { createStyles, getSize, getBreakpointValue, rem } from '@mantine/styles';
 import { getSortedBreakpoints } from './get-sorted-breakpoints/get-sorted-breakpoints.js';
 
 var __defProp = Object.defineProperty;
@@ -21,19 +21,20 @@ var useStyles = createStyles((theme, { spacing, breakpoints, cols, verticalSpaci
   const hasVerticalSpacing = verticalSpacing != null;
   const gridBreakpoints = getSortedBreakpoints(theme, breakpoints).reduce((acc, breakpoint) => {
     const property = "maxWidth" in breakpoint ? "max-width" : "min-width";
-    const breakpointSize = theme.fn.size({
+    const breakpointSize = getSize({
       size: property === "max-width" ? breakpoint.maxWidth : breakpoint.minWidth,
       sizes: theme.breakpoints
     });
-    acc[`@media (${property}: ${breakpointSize - (property === "max-width" ? 1 : 0)}px)`] = {
+    const breakpointValue = getBreakpointValue(breakpointSize) - (property === "max-width" ? 1 : 0);
+    acc[`@media (${property}: ${rem(breakpointValue)})`] = {
       gridTemplateColumns: `repeat(${breakpoint.cols}, minmax(0, 1fr))`,
-      gap: `${theme.fn.size({
+      gap: `${getSize({
         size: breakpoint.verticalSpacing || (hasVerticalSpacing ? verticalSpacing : spacing),
         sizes: theme.spacing
-      })}px ${theme.fn.size({
+      })} ${getSize({
         size: breakpoint.spacing || spacing,
         sizes: theme.spacing
-      })}px`
+      })}`
     };
     return acc;
   }, {});
@@ -42,13 +43,10 @@ var useStyles = createStyles((theme, { spacing, breakpoints, cols, verticalSpaci
       boxSizing: "border-box",
       display: "grid",
       gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
-      gap: `${theme.fn.size({
+      gap: `${getSize({
         size: hasVerticalSpacing ? verticalSpacing : spacing,
         sizes: theme.spacing
-      })}px ${theme.fn.size({
-        size: spacing,
-        sizes: theme.spacing
-      })}px`
+      })} ${getSize({ size: spacing, sizes: theme.spacing })}`
     }, gridBreakpoints)
   };
 });

package/esm/SimpleGrid/SimpleGrid.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleGrid.styles.js","sources":["../../src/SimpleGrid/SimpleGrid.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize } from '@mantine/styles';\nimport { getSortedBreakpoints } from './get-sorted-breakpoints/get-sorted-breakpoints';\n\nexport interface SimpleGridBreakpoint {\n  maxWidth?: MantineNumberSize;\n  minWidth?: MantineNumberSize;\n  cols: number;\n  spacing?: MantineNumberSize;\n  verticalSpacing?: MantineNumberSize;\n}\n\nexport interface SimpleGridStylesParams {\n  spacing: MantineNumberSize;\n  verticalSpacing: MantineNumberSize;\n  breakpoints: SimpleGridBreakpoint[];\n  cols: number;\n}\n\nexport default createStyles(\n  (theme, { spacing, breakpoints, cols, verticalSpacing }: SimpleGridStylesParams) => {\n    const hasVerticalSpacing = verticalSpacing != null;\n\n    const gridBreakpoints = getSortedBreakpoints(theme, breakpoints).reduce((acc, breakpoint) => {\n      const property = 'maxWidth' in breakpoint ? 'max-width' : 'min-width';\n      const breakpointSize = theme.fn.size({\n        size: property === 'max-width' ? breakpoint.maxWidth : breakpoint.minWidth,\n        sizes: theme.breakpoints,\n      });\n\n      acc[`@media (${property}: ${breakpointSize - (property === 'max-width' ? 1 : 0)}px)`] = {\n        gridTemplateColumns: `repeat(${breakpoint.cols}, minmax(0, 1fr))`,\n        gap: `${theme.fn.size({\n          size: breakpoint.verticalSpacing || (hasVerticalSpacing ? verticalSpacing : spacing),\n          sizes: theme.spacing,\n        })}px ${theme.fn.size({\n          size: breakpoint.spacing || spacing,\n          sizes: theme.spacing,\n        })}px`,\n      };\n\n      return acc;\n    }, {});\n\n    return {\n      root: {\n        boxSizing: 'border-box',\n        display: 'grid',\n        gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,\n        gap: `${theme.fn.size({\n          size: hasVerticalSpacing ? verticalSpacing : spacing,\n          sizes: theme.spacing,\n        })}px ${theme.fn.size({\n          size: spacing,\n          sizes: theme.spacing,\n        })}px`,\n        ...gridBreakpoints,\n      },\n    };\n  }\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SimpleGrid.styles.js","sources":["../../src/SimpleGrid/SimpleGrid.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, getBreakpointValue, rem, getSize } from '@mantine/styles';\nimport { getSortedBreakpoints } from './get-sorted-breakpoints/get-sorted-breakpoints';\n\nexport interface SimpleGridBreakpoint {\n  maxWidth?: MantineNumberSize;\n  minWidth?: MantineNumberSize;\n  cols: number;\n  spacing?: MantineNumberSize;\n  verticalSpacing?: MantineNumberSize;\n}\n\nexport interface SimpleGridStylesParams {\n  spacing: MantineNumberSize;\n  verticalSpacing: MantineNumberSize;\n  breakpoints: SimpleGridBreakpoint[];\n  cols: number;\n}\n\nexport default createStyles(\n  (theme, { spacing, breakpoints, cols, verticalSpacing }: SimpleGridStylesParams) => {\n    const hasVerticalSpacing = verticalSpacing != null;\n\n    const gridBreakpoints = getSortedBreakpoints(theme, breakpoints).reduce((acc, breakpoint) => {\n      const property = 'maxWidth' in breakpoint ? 'max-width' : 'min-width';\n      const breakpointSize = getSize({\n        size: property === 'max-width' ? breakpoint.maxWidth : breakpoint.minWidth,\n        sizes: theme.breakpoints,\n      });\n\n      const breakpointValue =\n        getBreakpointValue(breakpointSize) - (property === 'max-width' ? 1 : 0);\n\n      acc[`@media (${property}: ${rem(breakpointValue)})`] = {\n        gridTemplateColumns: `repeat(${breakpoint.cols}, minmax(0, 1fr))`,\n        gap: `${getSize({\n          size: breakpoint.verticalSpacing || (hasVerticalSpacing ? verticalSpacing : spacing),\n          sizes: theme.spacing,\n        })} ${getSize({\n          size: breakpoint.spacing || spacing,\n          sizes: theme.spacing,\n        })}`,\n      };\n\n      return acc;\n    }, {});\n\n    return {\n      root: {\n        boxSizing: 'border-box',\n        display: 'grid',\n        gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,\n        gap: `${getSize({\n          size: hasVerticalSpacing ? verticalSpacing : spacing,\n          sizes: theme.spacing,\n        })} ${getSize({ size: spacing, sizes: theme.spacing })}`,\n        ...gridBreakpoints,\n      },\n    };\n  }\n);\n"],"names":[],"mappings":"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"}

package/esm/SimpleGrid/get-sorted-breakpoints/get-sorted-breakpoints.js

@@ -1,9 +1,11 @@
+import { getBreakpointValue, getSize } from '@mantine/styles';
+
 function getSortedBreakpoints(theme, breakpoints) {
   if (breakpoints.length === 0) {
     return breakpoints;
   }
   const property = "maxWidth" in breakpoints[0] ? "maxWidth" : "minWidth";
-  const sorted = [...breakpoints].sort((a, b) => theme.fn.size({ size: b[property], sizes: theme.breakpoints }) - theme.fn.size({ size: a[property], sizes: theme.breakpoints }));
+  const sorted = [...breakpoints].sort((a, b) => getBreakpointValue(getSize({ size: b[property], sizes: theme.breakpoints })) - getBreakpointValue(getSize({ size: a[property], sizes: theme.breakpoints })));
   return property === "minWidth" ? sorted.reverse() : sorted;
 }
 

package/esm/SimpleGrid/get-sorted-breakpoints/get-sorted-breakpoints.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-sorted-breakpoints.js","sources":["../../../src/SimpleGrid/get-sorted-breakpoints/get-sorted-breakpoints.ts"],"sourcesContent":["import { MantineTheme } from '@mantine/styles';\n\nexport function getSortedBreakpoints<T extends Record<string, any>>(\n  theme: MantineTheme,\n  breakpoints: T[]\n) {\n  if (breakpoints.length === 0) {\n    return breakpoints;\n  }\n\n  const property = 'maxWidth' in breakpoints[0] ? 'maxWidth' : 'minWidth';\n  const sorted = [...breakpoints].sort(\n    (a, b) =>\n      theme.fn.size({ size: b[property], sizes: theme.breakpoints }) -\n      theme.fn.size({ size: a[property], sizes: theme.breakpoints })\n  );\n\n  return property === 'minWidth' ? sorted.reverse() : sorted;\n}\n"],"names":[],"mappings":"AAAO,SAAS,oBAAoB,CAAC,KAAK,EAAE,WAAW,EAAE;AACzD,EAAE,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE;AAChC,IAAI,OAAO,WAAW,CAAC;AACvB,GAAG;AACH,EAAE,MAAM,QAAQ,GAAG,UAAU,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG,UAAU,GAAG,UAAU,CAAC;AAC1E,EAAE,MAAM,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,WAAW,EAAE,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;AAClL,EAAE,OAAO,QAAQ,KAAK,UAAU,GAAG,MAAM,CAAC,OAAO,EAAE,GAAG,MAAM,CAAC;AAC7D;;;;"}
+{"version":3,"file":"get-sorted-breakpoints.js","sources":["../../../src/SimpleGrid/get-sorted-breakpoints/get-sorted-breakpoints.ts"],"sourcesContent":["import { MantineTheme, getBreakpointValue, getSize } from '@mantine/styles';\n\nexport function getSortedBreakpoints<T extends Record<string, any>>(\n  theme: MantineTheme,\n  breakpoints: T[]\n) {\n  if (breakpoints.length === 0) {\n    return breakpoints;\n  }\n\n  const property = 'maxWidth' in breakpoints[0] ? 'maxWidth' : 'minWidth';\n  const sorted = [...breakpoints].sort(\n    (a, b) =>\n      getBreakpointValue(getSize({ size: b[property], sizes: theme.breakpoints })) -\n      getBreakpointValue(getSize({ size: a[property], sizes: theme.breakpoints }))\n  );\n\n  return property === 'minWidth' ? sorted.reverse() : sorted;\n}\n"],"names":[],"mappings":";;AACO,SAAS,oBAAoB,CAAC,KAAK,EAAE,WAAW,EAAE;AACzD,EAAE,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE;AAChC,IAAI,OAAO,WAAW,CAAC;AACvB,GAAG;AACH,EAAE,MAAM,QAAQ,GAAG,UAAU,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG,UAAU,GAAG,UAAU,CAAC;AAC1E,EAAE,MAAM,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,kBAAkB,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,GAAG,kBAAkB,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC;AAC9M,EAAE,OAAO,QAAQ,KAAK,UAAU,GAAG,MAAM,CAAC,OAAO,EAAE,GAAG,MAAM,CAAC;AAC7D;;;;"}

package/esm/Skeleton/Skeleton.js

@@ -38,8 +38,28 @@ const defaultProps = {
   animate: true
 };
 const Skeleton = forwardRef((props, ref) => {
-  const _a = useComponentDefaultProps("Skeleton", defaultProps, props), { height, width, visible, animate, className, circle, radius, unstyled } = _a, others = __objRest(_a, ["height", "width", "visible", "animate", "className", "circle", "radius", "unstyled"]);
-  const { classes, cx } = useStyles({ height, width, circle, radius, animate }, { unstyled, name: "Skeleton" });
+  const _a = useComponentDefaultProps("Skeleton", defaultProps, props), {
+    height,
+    width,
+    visible,
+    animate,
+    className,
+    circle,
+    radius,
+    unstyled,
+    variant
+  } = _a, others = __objRest(_a, [
+    "height",
+    "width",
+    "visible",
+    "animate",
+    "className",
+    "circle",
+    "radius",
+    "unstyled",
+    "variant"
+  ]);
+  const { classes, cx } = useStyles({ height, width, circle, radius, animate }, { name: "Skeleton", unstyled, variant });
   return /* @__PURE__ */ React.createElement(Box, __spreadValues({
     className: cx(classes.root, { [classes.visible]: visible }, className),
     ref

package/esm/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sources":["../../src/Skeleton/Skeleton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { DefaultProps, MantineNumberSize, useComponentDefaultProps } from '@mantine/styles';\nimport { Box } from '../Box';\nimport useStyles, { SkeletonStylesParams } from './Skeleton.styles';\n\nexport interface SkeletonProps\n  extends DefaultProps<never, SkeletonStylesParams>,\n    React.ComponentPropsWithoutRef<'div'> {\n  /** Should skeleton overlay be displayed */\n  visible?: boolean;\n\n  /** Skeleton height */\n  height?: number | string;\n\n  /** Skeleton width */\n  width?: number | string;\n\n  /** If Skeleton is a circle, it's width and border-radius will be equal to height */\n  circle?: boolean;\n\n  /** Radius from theme.radius or number to set border-radius in px */\n  radius?: MantineNumberSize;\n\n  /** Whether to show the animation effect */\n  animate?: boolean;\n}\n\nconst defaultProps: Partial<SkeletonProps> = {\n  height: 'auto',\n  width: '100%',\n  visible: true,\n  animate: true,\n};\n\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>((props, ref) => {\n  const { height, width, visible, animate, className, circle, radius, unstyled, ...others } =\n    useComponentDefaultProps('Skeleton', defaultProps, props);\n\n  const { classes, cx } = useStyles(\n    { height, width, circle, radius, animate },\n    { unstyled, name: 'Skeleton' }\n  );\n\n  return (\n    <Box\n      className={cx(classes.root, { [classes.visible]: visible }, className)}\n      ref={ref}\n      {...others}\n    />\n  );\n});\n\nSkeleton.displayName = '@mantine/core/Skeleton';\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;AAKF,MAAM,YAAY,GAAG;AACrB,EAAE,MAAM,EAAE,MAAM;AAChB,EAAE,KAAK,EAAE,MAAM;AACf,EAAE,OAAO,EAAE,IAAI;AACf,EAAE,OAAO,EAAE,IAAI;AACf,CAAC,CAAC;AACU,MAAC,QAAQ,GAAG,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK;AACnD,EAAE,MAAM,EAAE,GAAG,wBAAwB,CAAC,UAAU,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC;AACtQ,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,SAAS,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;AAChH,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE,cAAc,CAAC;AACjE,IAAI,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,GAAG,OAAO,EAAE,EAAE,SAAS,CAAC;AAC1E,IAAI,GAAG;AACP,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC;AACd,CAAC,EAAE;AACH,QAAQ,CAAC,WAAW,GAAG,wBAAwB;;;;"}
+{"version":3,"file":"Skeleton.js","sources":["../../src/Skeleton/Skeleton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { DefaultProps, MantineNumberSize, useComponentDefaultProps } from '@mantine/styles';\nimport { Box } from '../Box';\nimport useStyles, { SkeletonStylesParams } from './Skeleton.styles';\n\nexport interface SkeletonProps\n  extends DefaultProps<never, SkeletonStylesParams>,\n    React.ComponentPropsWithoutRef<'div'> {\n  variant?: string;\n\n  /** Should skeleton overlay be displayed */\n  visible?: boolean;\n\n  /** Skeleton height */\n  height?: number | string;\n\n  /** Skeleton width */\n  width?: number | string;\n\n  /** If Skeleton is a circle, it's width and border-radius will be equal to height */\n  circle?: boolean;\n\n  /** Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default */\n  radius?: MantineNumberSize;\n\n  /** Whether to show the animation effect */\n  animate?: boolean;\n}\n\nconst defaultProps: Partial<SkeletonProps> = {\n  height: 'auto',\n  width: '100%',\n  visible: true,\n  animate: true,\n};\n\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>((props, ref) => {\n  const {\n    height,\n    width,\n    visible,\n    animate,\n    className,\n    circle,\n    radius,\n    unstyled,\n    variant,\n    ...others\n  } = useComponentDefaultProps('Skeleton', defaultProps, props);\n\n  const { classes, cx } = useStyles(\n    { height, width, circle, radius, animate },\n    { name: 'Skeleton', unstyled, variant }\n  );\n\n  return (\n    <Box\n      className={cx(classes.root, { [classes.visible]: visible }, className)}\n      ref={ref}\n      {...others}\n    />\n  );\n});\n\nSkeleton.displayName = '@mantine/core/Skeleton';\n"],"names":[],"mappings":"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"}

package/esm/Skeleton/Skeleton.styles.js

@@ -1,40 +1,49 @@
-import { createStyles, keyframes } from '@mantine/styles';
+import { createStyles, rem, keyframes } from '@mantine/styles';
 
+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;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const fade = keyframes({
   "from, to": { opacity: 0.4 },
   "50%": { opacity: 1 }
 });
 var useStyles = createStyles((theme, { height, width, radius, circle, animate }) => ({
   root: {
-    height,
-    width: circle ? height : width,
-    borderRadius: circle ? height : theme.fn.radius(radius),
+    height: rem(height),
+    width: circle ? rem(height) : rem(width),
+    borderRadius: circle ? rem(height) : theme.fn.radius(radius),
     position: "relative",
     overflow: "hidden",
     WebkitTransform: "translateZ(0)"
   },
   visible: {
-    "&::before": {
+    "&::before": __spreadProps(__spreadValues({}, theme.fn.cover(0)), {
       content: '""',
-      position: "absolute",
       background: theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white,
-      top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0,
       zIndex: 10
-    },
-    "&::after": {
+    }),
+    "&::after": __spreadProps(__spreadValues({}, theme.fn.cover(0)), {
       content: '""',
-      position: "absolute",
       background: theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3],
-      top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0,
       animation: animate ? `${fade} 1500ms linear infinite` : "none",
       zIndex: 11
-    }
+    })
   }
 }));
 

package/esm/Skeleton/Skeleton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.styles.js","sources":["../../src/Skeleton/Skeleton.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, keyframes } from '@mantine/styles';\n\nexport interface SkeletonStylesParams {\n  height: number | string;\n  width: number | string;\n  circle: boolean;\n  radius: MantineNumberSize;\n  animate: boolean;\n}\n\nexport const fade = keyframes({\n  'from, to': { opacity: 0.4 },\n  '50%': { opacity: 1 },\n});\n\nexport default createStyles(\n  (theme, { height, width, radius, circle, animate }: SkeletonStylesParams) => ({\n    root: {\n      height,\n      width: circle ? height : width,\n      borderRadius: circle ? height : theme.fn.radius(radius),\n      position: 'relative',\n      overflow: 'hidden',\n      WebkitTransform: 'translateZ(0)',\n    },\n\n    visible: {\n      '&::before': {\n        content: '\"\"',\n        position: 'absolute',\n        background: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,\n        top: 0,\n        bottom: 0,\n        left: 0,\n        right: 0,\n        zIndex: 10,\n      },\n\n      '&::after': {\n        content: '\"\"',\n        position: 'absolute',\n        background: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3],\n        top: 0,\n        bottom: 0,\n        left: 0,\n        right: 0,\n        animation: animate ? `${fade} 1500ms linear infinite` : 'none',\n        zIndex: 11,\n      },\n    },\n  })\n);\n"],"names":[],"mappings":";;AACY,MAAC,IAAI,GAAG,SAAS,CAAC;AAC9B,EAAE,UAAU,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;AAC9B,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACvB,CAAC,EAAE;AACH,gBAAe,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM;AACpF,EAAE,IAAI,EAAE;AACR,IAAI,MAAM;AACV,IAAI,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK;AAClC,IAAI,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC;AAC3D,IAAI,QAAQ,EAAE,UAAU;AACxB,IAAI,QAAQ,EAAE,QAAQ;AACtB,IAAI,eAAe,EAAE,eAAe;AACpC,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,WAAW,EAAE;AACjB,MAAM,OAAO,EAAE,IAAI;AACnB,MAAM,QAAQ,EAAE,UAAU;AAC1B,MAAM,UAAU,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK;AACnF,MAAM,GAAG,EAAE,CAAC;AACZ,MAAM,MAAM,EAAE,CAAC;AACf,MAAM,IAAI,EAAE,CAAC;AACb,MAAM,KAAK,EAAE,CAAC;AACd,MAAM,MAAM,EAAE,EAAE;AAChB,KAAK;AACL,IAAI,UAAU,EAAE;AAChB,MAAM,OAAO,EAAE,IAAI;AACnB,MAAM,QAAQ,EAAE,UAAU;AAC1B,MAAM,UAAU,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;AAC5F,MAAM,GAAG,EAAE,CAAC;AACZ,MAAM,MAAM,EAAE,CAAC;AACf,MAAM,IAAI,EAAE,CAAC;AACb,MAAM,KAAK,EAAE,CAAC;AACd,MAAM,SAAS,EAAE,OAAO,GAAG,CAAC,EAAE,IAAI,CAAC,uBAAuB,CAAC,GAAG,MAAM;AACpE,MAAM,MAAM,EAAE,EAAE;AAChB,KAAK;AACL,GAAG;AACH,CAAC,CAAC,CAAC;;;;;"}
+{"version":3,"file":"Skeleton.styles.js","sources":["../../src/Skeleton/Skeleton.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, keyframes, rem } from '@mantine/styles';\n\nexport interface SkeletonStylesParams {\n  height: number | string;\n  width: number | string;\n  circle: boolean;\n  radius: MantineNumberSize;\n  animate: boolean;\n}\n\nexport const fade = keyframes({\n  'from, to': { opacity: 0.4 },\n  '50%': { opacity: 1 },\n});\n\nexport default createStyles(\n  (theme, { height, width, radius, circle, animate }: SkeletonStylesParams) => ({\n    root: {\n      height: rem(height),\n      width: circle ? rem(height) : rem(width),\n      borderRadius: circle ? rem(height) : theme.fn.radius(radius),\n      position: 'relative',\n      overflow: 'hidden',\n      WebkitTransform: 'translateZ(0)',\n    },\n\n    visible: {\n      '&::before': {\n        ...theme.fn.cover(0),\n        content: '\"\"',\n        background: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,\n        zIndex: 10,\n      },\n\n      '&::after': {\n        ...theme.fn.cover(0),\n        content: '\"\"',\n        background: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3],\n        animation: animate ? `${fade} 1500ms linear infinite` : 'none',\n        zIndex: 11,\n      },\n    },\n  })\n);\n"],"names":[],"mappings":"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"}

package/esm/Slider/Marks/Marks.js

@@ -17,9 +17,10 @@ function Marks({
   onChange,
   disabled,
   unstyled,
-  inverted
+  inverted,
+  variant
 }) {
-  const { classes, cx } = useStyles({ size, color, disabled }, { classNames, styles, unstyled, name: "Slider" });
+  const { classes, cx } = useStyles({ color, disabled }, { name: "Slider", classNames, styles, unstyled, variant, size });
   const items = marks.map((mark, index) => /* @__PURE__ */ React.createElement(Box, {
     className: classes.markWrapper,
     sx: { left: `${getPosition({ value: mark.value, min, max })}%` },

package/esm/Slider/Marks/Marks.js.map

@@ -1 +1 @@
-{"version":3,"file":"Marks.js","sources":["../../../src/Slider/Marks/Marks.tsx"],"sourcesContent":["import React from 'react';\nimport { DefaultProps, MantineNumberSize, MantineColor, Selectors } from '@mantine/styles';\nimport { Box } from '../../Box';\nimport { getPosition } from '../utils/get-position/get-position';\nimport { isMarkFilled } from './is-mark-filled';\nimport useStyles from './Marks.styles';\n\nexport type MarksStylesNames = Selectors<typeof useStyles>;\n\nexport interface MarksProps extends DefaultProps<MarksStylesNames> {\n  marks: { value: number; label?: React.ReactNode }[];\n  size: MantineNumberSize;\n  color: MantineColor;\n  min: number;\n  max: number;\n  value: number;\n  onChange(value: number): void;\n  offset?: number;\n  disabled: boolean;\n  inverted?: boolean;\n}\n\nexport function Marks({\n  marks,\n  color,\n  size,\n  min,\n  max,\n  value,\n  classNames,\n  styles,\n  offset,\n  onChange,\n  disabled,\n  unstyled,\n  inverted,\n}: MarksProps) {\n  const { classes, cx } = useStyles(\n    { size, color, disabled },\n    { classNames, styles, unstyled, name: 'Slider' }\n  );\n\n  const items = marks.map((mark, index) => (\n    <Box\n      className={classes.markWrapper}\n      sx={{ left: `${getPosition({ value: mark.value, min, max })}%` }}\n      key={index}\n    >\n      <div\n        className={cx(classes.mark, {\n          [classes.markFilled]: isMarkFilled({ mark, value, offset, inverted }),\n        })}\n      />\n      {mark.label && (\n        // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n        <div\n          className={classes.markLabel}\n          onMouseDown={(event) => {\n            event.stopPropagation();\n            onChange(mark.value);\n          }}\n          onTouchStart={(event) => {\n            event.stopPropagation();\n            onChange(mark.value);\n          }}\n        >\n          {mark.label}\n        </div>\n      )}\n    </Box>\n  ));\n\n  return <div>{items}</div>;\n}\n\nMarks.displayName = '@mantine/core/SliderMarks';\n"],"names":[],"mappings":";;;;;;AAKO,SAAS,KAAK,CAAC;AACtB,EAAE,KAAK;AACP,EAAE,KAAK;AACP,EAAE,IAAI;AACN,EAAE,GAAG;AACL,EAAE,GAAG;AACL,EAAE,KAAK;AACP,EAAE,UAAU;AACZ,EAAE,MAAM;AACR,EAAE,MAAM;AACR,EAAE,QAAQ;AACV,EAAE,QAAQ;AACV,EAAE,QAAQ;AACV,EAAE,QAAQ;AACV,CAAC,EAAE;AACH,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,SAAS,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;AACjH,EAAE,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,qBAAqB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE;AACpF,IAAI,SAAS,EAAE,OAAO,CAAC,WAAW;AAClC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE;AACpE,IAAI,GAAG,EAAE,KAAK;AACd,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE;AAChC,MAAM,CAAC,OAAO,CAAC,UAAU,GAAG,YAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;AAC3E,KAAK,CAAC;AACN,GAAG,CAAC,EAAE,IAAI,CAAC,KAAK,oBAAoB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAC/D,IAAI,SAAS,EAAE,OAAO,CAAC,SAAS;AAChC,IAAI,WAAW,EAAE,CAAC,KAAK,KAAK;AAC5B,MAAM,KAAK,CAAC,eAAe,EAAE,CAAC;AAC9B,MAAM,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AAC3B,KAAK;AACL,IAAI,YAAY,EAAE,CAAC,KAAK,KAAK;AAC7B,MAAM,KAAK,CAAC,eAAe,EAAE,CAAC;AAC9B,MAAM,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AAC3B,KAAK;AACL,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AACnB,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;AACjE,CAAC;AACD,KAAK,CAAC,WAAW,GAAG,2BAA2B;;;;"}
+{"version":3,"file":"Marks.js","sources":["../../../src/Slider/Marks/Marks.tsx"],"sourcesContent":["import React from 'react';\nimport { DefaultProps, MantineNumberSize, MantineColor, Selectors } from '@mantine/styles';\nimport { Box } from '../../Box';\nimport { getPosition } from '../utils/get-position/get-position';\nimport { isMarkFilled } from './is-mark-filled';\nimport useStyles from './Marks.styles';\n\nexport type MarksStylesNames = Selectors<typeof useStyles>;\n\nexport interface MarksProps extends DefaultProps<MarksStylesNames> {\n  marks: { value: number; label?: React.ReactNode }[];\n  size: MantineNumberSize;\n  color: MantineColor;\n  min: number;\n  max: number;\n  value: number;\n  onChange(value: number): void;\n  offset?: number;\n  disabled: boolean;\n  inverted?: boolean;\n  variant: string;\n}\n\nexport function Marks({\n  marks,\n  color,\n  size,\n  min,\n  max,\n  value,\n  classNames,\n  styles,\n  offset,\n  onChange,\n  disabled,\n  unstyled,\n  inverted,\n  variant,\n}: MarksProps) {\n  const { classes, cx } = useStyles(\n    { color, disabled },\n    { name: 'Slider', classNames, styles, unstyled, variant, size }\n  );\n\n  const items = marks.map((mark, index) => (\n    <Box\n      className={classes.markWrapper}\n      sx={{ left: `${getPosition({ value: mark.value, min, max })}%` }}\n      key={index}\n    >\n      <div\n        className={cx(classes.mark, {\n          [classes.markFilled]: isMarkFilled({ mark, value, offset, inverted }),\n        })}\n      />\n      {mark.label && (\n        // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n        <div\n          className={classes.markLabel}\n          onMouseDown={(event) => {\n            event.stopPropagation();\n            onChange(mark.value);\n          }}\n          onTouchStart={(event) => {\n            event.stopPropagation();\n            onChange(mark.value);\n          }}\n        >\n          {mark.label}\n        </div>\n      )}\n    </Box>\n  ));\n\n  return <div>{items}</div>;\n}\n\nMarks.displayName = '@mantine/core/SliderMarks';\n"],"names":[],"mappings":";;;;;;AAKO,SAAS,KAAK,CAAC;AACtB,EAAE,KAAK;AACP,EAAE,KAAK;AACP,EAAE,IAAI;AACN,EAAE,GAAG;AACL,EAAE,GAAG;AACL,EAAE,KAAK;AACP,EAAE,UAAU;AACZ,EAAE,MAAM;AACR,EAAE,MAAM;AACR,EAAE,QAAQ;AACV,EAAE,QAAQ;AACV,EAAE,QAAQ;AACV,EAAE,QAAQ;AACV,EAAE,OAAO;AACT,CAAC,EAAE;AACH,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,SAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AAC1H,EAAE,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,qBAAqB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE;AACpF,IAAI,SAAS,EAAE,OAAO,CAAC,WAAW;AAClC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE;AACpE,IAAI,GAAG,EAAE,KAAK;AACd,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE;AAChC,MAAM,CAAC,OAAO,CAAC,UAAU,GAAG,YAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;AAC3E,KAAK,CAAC;AACN,GAAG,CAAC,EAAE,IAAI,CAAC,KAAK,oBAAoB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAC/D,IAAI,SAAS,EAAE,OAAO,CAAC,SAAS;AAChC,IAAI,WAAW,EAAE,CAAC,KAAK,KAAK;AAC5B,MAAM,KAAK,CAAC,eAAe,EAAE,CAAC;AAC9B,MAAM,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AAC3B,KAAK;AACL,IAAI,YAAY,EAAE,CAAC,KAAK,KAAK;AAC7B,MAAM,KAAK,CAAC,eAAe,EAAE,CAAC;AAC9B,MAAM,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AAC3B,KAAK;AACL,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AACnB,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;AACjE,CAAC;AACD,KAAK,CAAC,WAAW,GAAG,2BAA2B;;;;"}