@mantine/core 9.5.2 → 9.6.0

package/esm/components/Checkbox/CheckboxCard/CheckboxCard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxCard.mjs","names":["classes"],"sources":["../../../../src/components/Checkbox/CheckboxCard/CheckboxCard.tsx"],"sourcesContent":["import { createContext, use } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  MantineRadius,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport { CheckboxGroupContext } from '../CheckboxGroup/CheckboxGroup';\nimport classes from './CheckboxCard.module.css';\n\nexport interface CheckboxCardContextValue {\n  checked: boolean;\n  indeterminate?: boolean;\n}\n\nexport const CheckboxCardContext = createContext<CheckboxCardContextValue | null>(null);\n\nexport type CheckboxCardStylesNames = 'card';\nexport type CheckboxCardCssVariables = {\n  card: '--card-radius';\n};\n\nexport interface CheckboxCardProps\n  extends BoxProps, StylesApiProps<CheckboxCardFactory>, ElementProps<'button', 'onChange'> {\n  /** Controlled component value */\n  checked?: boolean;\n\n  /** Uncontrolled component default value */\n  defaultChecked?: boolean;\n\n  /** Called when value changes */\n  onChange?: (checked: boolean) => void;\n\n  /** Indeterminate state of the checkbox. If set, `checked` prop is ignored and `aria-checked` is set to `mixed` */\n  indeterminate?: boolean;\n\n  /** Adds border to the root element */\n  withBorder?: boolean;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Value of the checkbox, used with `Checkbox.Group` */\n  value?: string;\n}\n\nexport type CheckboxCardFactory = Factory<{\n  props: CheckboxCardProps;\n  ref: HTMLButtonElement;\n  stylesNames: CheckboxCardStylesNames;\n  vars: CheckboxCardCssVariables;\n}>;\n\nconst defaultProps = {\n  withBorder: true,\n} satisfies Partial<CheckboxCardProps>;\n\nconst varsResolver = createVarsResolver<CheckboxCardFactory>((_, { radius }) => ({\n  card: {\n    '--card-radius': getRadius(radius),\n  },\n}));\n\nexport const CheckboxCard = factory<CheckboxCardFactory>((_props) => {\n  const props = useProps('CheckboxCard', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    checked,\n    mod,\n    withBorder,\n    value,\n    onClick,\n    defaultChecked,\n    onChange,\n    indeterminate,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CheckboxCardFactory>({\n    name: 'CheckboxCard',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'card',\n  });\n\n  const ctx = use(CheckboxGroupContext);\n  const _checked =\n    typeof checked === 'boolean' ? checked : ctx ? ctx.value.includes(value || '') : undefined;\n\n  const [_value, setValue] = useUncontrolled({\n    value: _checked,\n    defaultValue: defaultChecked,\n    finalValue: false,\n    onChange,\n  });\n\n  return (\n    <CheckboxCardContext value={{ checked: _value, indeterminate }}>\n      {/* eslint-disable-next-line jsx-a11y/interactive-supports-focus -- UnstyledButton renders a native <button> which is focusable */}\n      <UnstyledButton\n        mod={[{ 'with-border': withBorder, checked: _value, indeterminate }, mod]}\n        {...getStyles('card')}\n        {...others}\n        role=\"checkbox\"\n        aria-checked={indeterminate ? 'mixed' : _value}\n        onClick={(event) => {\n          onClick?.(event);\n          ctx?.onChange(value || '');\n          setValue(!_value);\n        }}\n      />\n    </CheckboxCardContext>\n  );\n});\n\nCheckboxCard.displayName = '@mantine/core/CheckboxCard';\nCheckboxCard.classes = classes;\nCheckboxCard.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;AAuBA,MAAa,sBAAsB,cAA+C,IAAI;AAsCtF,MAAM,eAAe,EACnB,YAAY,KACd;AAEA,MAAM,eAAe,oBAAyC,GAAG,EAAE,cAAc,EAC/E,MAAM,EACJ,iBAAiB,UAAU,MAAM,EACnC,EACF,EAAE;AAEF,MAAa,eAAe,SAA8B,WAAW;CACnE,MAAM,QAAQ,SAAS,gBAAgB,cAAc,MAAM;CAC3D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,SACA,KACA,YACA,OACA,SACA,gBACA,UACA,eACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA+B;EAC/C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,MAAM,IAAI,oBAAoB;CAIpC,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC,OAHA,OAAO,YAAY,YAAY,UAAU,MAAM,IAAI,MAAM,SAAS,SAAS,EAAE,IAAI,KAAA;EAIjF,cAAc;EACd,YAAY;EACZ;CACF,CAAC;CAED,OACE,oBAAC,qBAAD;EAAqB,OAAO;GAAE,SAAS;GAAQ;EAAc;YAE3D,oBAAC,gBAAD;GACE,KAAK,CAAC;IAAE,eAAe;IAAY,SAAS;IAAQ;GAAc,GAAG,GAAG;GACxE,GAAI,UAAU,MAAM;GACpB,GAAI;GACJ,MAAK;GACL,gBAAc,gBAAgB,UAAU;GACxC,UAAU,UAAU;IAClB,UAAU,KAAK;IACf,KAAK,SAAS,SAAS,EAAE;IACzB,SAAS,CAAC,MAAM;GAClB;EACD,CAAA;CACkB,CAAA;AAEzB,CAAC;AAED,aAAa,cAAc;AAC3B,aAAa,UAAUA;AACvB,aAAa,eAAe"}
+{"version":3,"file":"CheckboxCard.mjs","names":["classes"],"sources":["../../../../src/components/Checkbox/CheckboxCard/CheckboxCard.tsx"],"sourcesContent":["import { createContext, use } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  MantineRadius,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport { CheckboxGroupContext } from '../CheckboxGroup/CheckboxGroup';\nimport classes from './CheckboxCard.module.css';\n\nexport interface CheckboxCardContextValue {\n  checked: boolean;\n  indeterminate?: boolean;\n}\n\nexport const CheckboxCardContext = createContext<CheckboxCardContextValue | null>(null);\n\nexport type CheckboxCardStylesNames = 'card';\nexport type CheckboxCardCssVariables = {\n  card: '--card-radius';\n};\n\nexport interface CheckboxCardProps\n  extends BoxProps, StylesApiProps<CheckboxCardFactory>, ElementProps<'button', 'onChange'> {\n  /** Controlled component value */\n  checked?: boolean;\n\n  /** Uncontrolled component default value */\n  defaultChecked?: boolean;\n\n  /** Called when value changes */\n  onChange?: (checked: boolean) => void;\n\n  /** Indeterminate state of the checkbox. If set, `checked` prop is ignored and `aria-checked` is set to `mixed` */\n  indeterminate?: boolean;\n\n  /** Adds border to the root element */\n  withBorder?: boolean;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Value of the checkbox, used with `Checkbox.Group` */\n  value?: string;\n}\n\nexport type CheckboxCardFactory = Factory<{\n  props: CheckboxCardProps;\n  ref: HTMLButtonElement;\n  stylesNames: CheckboxCardStylesNames;\n  vars: CheckboxCardCssVariables;\n}>;\n\nconst defaultProps = {\n  withBorder: true,\n} satisfies Partial<CheckboxCardProps>;\n\nconst varsResolver = createVarsResolver<CheckboxCardFactory>((_, { radius }) => ({\n  card: {\n    '--card-radius': getRadius(radius),\n  },\n}));\n\nexport const CheckboxCard = factory<CheckboxCardFactory>((_props) => {\n  const props = useProps('CheckboxCard', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    checked,\n    mod,\n    withBorder,\n    value,\n    onClick,\n    defaultChecked,\n    onChange,\n    indeterminate,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CheckboxCardFactory>({\n    name: 'CheckboxCard',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'card',\n  });\n\n  const ctx = use(CheckboxGroupContext);\n  const _checked =\n    typeof checked === 'boolean' ? checked : ctx ? ctx.value.includes(value || '') : undefined;\n\n  const [_value, setValue] = useUncontrolled({\n    value: _checked,\n    defaultValue: defaultChecked,\n    finalValue: false,\n    onChange,\n  });\n\n  return (\n    <CheckboxCardContext value={{ checked: _value, indeterminate }}>\n      {/* eslint-disable-next-line jsx-a11y/interactive-supports-focus -- UnstyledButton renders a native <button> which is focusable */}\n      <UnstyledButton\n        mod={[{ 'with-border': withBorder, checked: _value, indeterminate }, mod]}\n        {...getStyles('card')}\n        {...others}\n        role=\"checkbox\"\n        aria-checked={indeterminate ? 'mixed' : _value}\n        onClick={(event) => {\n          onClick?.(event);\n          ctx?.onChange(value || '');\n          setValue(!_value);\n        }}\n      />\n    </CheckboxCardContext>\n  );\n});\n\nCheckboxCard.displayName = '@mantine/core/CheckboxCard';\nCheckboxCard.classes = classes;\nCheckboxCard.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;AAuBA,MAAa,sBAAsB,cAA+C,IAAI;AAsCtF,MAAM,eAAe,EACnB,YAAY,KACd;AAEA,MAAM,eAAe,oBAAyC,GAAG,EAAE,cAAc,EAC/E,MAAM,EACJ,iBAAiB,UAAU,MAAM,EACnC,EACF,EAAE;AAEF,MAAa,eAAe,SAA8B,WAAW;CACnE,MAAM,QAAQ,SAAS,gBAAgB,cAAc,MAAM;CAC3D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,SACA,KACA,YACA,OACA,SACA,gBACA,UACA,eACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA+B;EAC/C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,MAAM,IAAI,oBAAoB;CACpC,MAAM,WACJ,OAAO,YAAY,YAAY,UAAU,MAAM,IAAI,MAAM,SAAS,SAAS,EAAE,IAAI,KAAA;CAEnF,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC,OAAO;EACP,cAAc;EACd,YAAY;EACZ;CACF,CAAC;CAED,OACE,oBAAC,qBAAD;EAAqB,OAAO;GAAE,SAAS;GAAQ;EAAc;EAE3D,UAAA,oBAAC,gBAAD;GACE,KAAK,CAAC;IAAE,eAAe;IAAY,SAAS;IAAQ;GAAc,GAAG,GAAG;GACxE,GAAI,UAAU,MAAM;GACpB,GAAI;GACJ,MAAK;GACL,gBAAc,gBAAgB,UAAU;GACxC,UAAU,UAAU;IAClB,UAAU,KAAK;IACf,KAAK,SAAS,SAAS,EAAE;IACzB,SAAS,CAAC,MAAM;GAClB;EACD,CAAA;CACkB,CAAA;AAEzB,CAAC;AAED,aAAa,cAAc;AAC3B,aAAa,UAAUA;AACvB,aAAa,eAAe"}

package/esm/components/Checkbox/CheckboxGroup/CheckboxGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.mjs","names":[],"sources":["../../../../src/components/Checkbox/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n  DataAttributes,\n  Factory,\n  genericFactory,\n  MantineSize,\n  Primitive,\n  useProps,\n} from '../../../core';\nimport { InputsGroupFieldset } from '../../../utils/InputsGroupFieldset';\nimport { Input, InputWrapperProps, InputWrapperStylesNames } from '../../Input';\n\nexport interface CheckboxGroupContextValue<Value extends Primitive = string> {\n  value: Value[];\n  onChange: (event: React.ChangeEvent<HTMLInputElement> | string) => void;\n  size: MantineSize | (string & {}) | undefined;\n  isDisabled?: (value: Value) => boolean;\n}\n\nexport const CheckboxGroupContext = createContext<CheckboxGroupContextValue | null>(null);\n\nexport type CheckboxGroupStylesNames = InputWrapperStylesNames;\n\nexport interface CheckboxGroupProps<Value extends Primitive = string> extends Omit<\n  InputWrapperProps,\n  'onChange' | 'value' | 'defaultValue'\n> {\n  /** `Checkbox` components and any other elements */\n  children: React.ReactNode;\n\n  /** Controlled component value */\n  value?: Value[];\n\n  /** Default value for uncontrolled component */\n  defaultValue?: Value[];\n\n  /** Called with an array of selected checkboxes values when value changes */\n  onChange?: (value: Value[]) => void;\n\n  /** Props passed down to the root element (`Input.Wrapper` component) */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Controls size of the `Input.Wrapper` @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** If set, value cannot be changed */\n  readOnly?: boolean;\n\n  /** `name` attribute of the hidden input for uncontrolled forms */\n  name?: string;\n\n  /** Props passed down to the hidden input for uncontrolled forms */\n  hiddenInputProps?: React.ComponentProps<'input'> & DataAttributes;\n\n  /** Separator for values in the hidden input for uncontrolled forms @default ',' */\n  hiddenInputValuesSeparator?: string;\n\n  /** Maximum number of checkboxes that can be selected. When the limit is reached, unselected checkboxes will be disabled */\n\n  maxSelectedValues?: number;\n\n  /** Sets `disabled` attribute, prevents interactions */\n  disabled?: boolean;\n}\n\nexport type CheckboxGroupFactory = Factory<{\n  props: CheckboxGroupProps;\n  ref: HTMLDivElement;\n  stylesNames: CheckboxGroupStylesNames;\n  signature: <Value extends Primitive = string>(\n    props: CheckboxGroupProps<Value>\n  ) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n  hiddenInputValuesSeparator: ',',\n} satisfies Partial<CheckboxGroupProps>;\n\nexport const CheckboxGroup = genericFactory<CheckboxGroupFactory>(((\n  props: CheckboxGroupProps<string>\n) => {\n  const {\n    value,\n    defaultValue,\n    onChange,\n    size,\n    wrapperProps,\n    children,\n    readOnly,\n    name,\n    hiddenInputValuesSeparator,\n    hiddenInputProps,\n    maxSelectedValues,\n    disabled,\n    ...others\n  } = useProps('CheckboxGroup', defaultProps, props);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: [],\n    onChange,\n  });\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement> | string) => {\n    const itemValue = typeof event === 'string' ? event : event.currentTarget.value;\n\n    if (readOnly) {\n      return;\n    }\n\n    const isCurrentlySelected = _value.includes(itemValue);\n\n    if (!isCurrentlySelected && maxSelectedValues && _value.length >= maxSelectedValues) {\n      return;\n    }\n\n    setValue(\n      isCurrentlySelected ? _value.filter((item) => item !== itemValue) : [..._value, itemValue]\n    );\n  };\n\n  const isDisabled = (checkboxValue: string) => {\n    if (disabled) {\n      return true;\n    }\n\n    if (!maxSelectedValues) {\n      return false;\n    }\n\n    const isCurrentlySelected = _value.includes(checkboxValue);\n    const hasReachedLimit = _value.length >= maxSelectedValues;\n    return !isCurrentlySelected && hasReachedLimit;\n  };\n\n  const hiddenInputValue = _value.join(hiddenInputValuesSeparator);\n\n  return (\n    <CheckboxGroupContext value={{ value: _value, onChange: handleChange, size, isDisabled }}>\n      <Input.Wrapper\n        size={size}\n        {...wrapperProps}\n        {...others}\n        labelElement=\"div\"\n        __staticSelector=\"CheckboxGroup\"\n      >\n        <InputsGroupFieldset role=\"group\">{children}</InputsGroupFieldset>\n        <input type=\"hidden\" name={name} value={hiddenInputValue} {...hiddenInputProps} />\n      </Input.Wrapper>\n    </CheckboxGroupContext>\n  );\n}) as any);\n\nCheckboxGroup.classes = Input.Wrapper.classes;\nCheckboxGroup.displayName = '@mantine/core/CheckboxGroup';\n"],"mappings":";;;;;;;;;AAoBA,MAAa,uBAAuB,cAAgD,IAAI;AAuDxF,MAAM,eAAe,EACnB,4BAA4B,IAC9B;AAEA,MAAa,gBAAgB,iBAC3B,UACG;CACH,MAAM,EACJ,OACA,cACA,UACA,MACA,cACA,UACA,UACA,MACA,4BACA,kBACA,mBACA,UACA,GAAG,WACD,SAAS,iBAAiB,cAAc,KAAK;CAEjD,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC;EACA;EACA,YAAY,CAAC;EACb;CACF,CAAC;CAED,MAAM,gBAAgB,UAAwD;EAC5E,MAAM,YAAY,OAAO,UAAU,WAAW,QAAQ,MAAM,cAAc;EAE1E,IAAI,UACF;EAGF,MAAM,sBAAsB,OAAO,SAAS,SAAS;EAErD,IAAI,CAAC,uBAAuB,qBAAqB,OAAO,UAAU,mBAChE;EAGF,SACE,sBAAsB,OAAO,QAAQ,SAAS,SAAS,SAAS,IAAI,CAAC,GAAG,QAAQ,SAAS,CAC3F;CACF;CAEA,MAAM,cAAc,kBAA0B;EAC5C,IAAI,UACF,OAAO;EAGT,IAAI,CAAC,mBACH,OAAO;EAGT,MAAM,sBAAsB,OAAO,SAAS,aAAa;EACzD,MAAM,kBAAkB,OAAO,UAAU;EACzC,OAAO,CAAC,uBAAuB;CACjC;CAEA,MAAM,mBAAmB,OAAO,KAAK,0BAA0B;CAE/D,OACE,oBAAC,sBAAD;EAAsB,OAAO;GAAE,OAAO;GAAQ,UAAU;GAAc;GAAM;EAAW;YACrF,qBAAC,MAAM,SAAP;GACQ;GACN,GAAI;GACJ,GAAI;GACJ,cAAa;GACb,kBAAiB;aALnB,CAOE,oBAAC,qBAAD;IAAqB,MAAK;IAAS;GAA8B,CAAA,GACjE,oBAAC,SAAD;IAAO,MAAK;IAAe;IAAM,OAAO;IAAkB,GAAI;GAAmB,CAAA,CACpE;;CACK,CAAA;AAE1B,EAAS;AAET,cAAc,UAAU,MAAM,QAAQ;AACtC,cAAc,cAAc"}
+{"version":3,"file":"CheckboxGroup.mjs","names":[],"sources":["../../../../src/components/Checkbox/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n  DataAttributes,\n  Factory,\n  genericFactory,\n  MantineSize,\n  Primitive,\n  useProps,\n} from '../../../core';\nimport { InputsGroupFieldset } from '../../../utils/InputsGroupFieldset';\nimport { Input, InputWrapperProps, InputWrapperStylesNames } from '../../Input';\n\nexport interface CheckboxGroupContextValue<Value extends Primitive = string> {\n  value: Value[];\n  onChange: (event: React.ChangeEvent<HTMLInputElement> | string) => void;\n  size: MantineSize | (string & {}) | undefined;\n  isDisabled?: (value: Value) => boolean;\n}\n\nexport const CheckboxGroupContext = createContext<CheckboxGroupContextValue | null>(null);\n\nexport type CheckboxGroupStylesNames = InputWrapperStylesNames;\n\nexport interface CheckboxGroupProps<Value extends Primitive = string> extends Omit<\n  InputWrapperProps,\n  'onChange' | 'value' | 'defaultValue'\n> {\n  /** `Checkbox` components and any other elements */\n  children: React.ReactNode;\n\n  /** Controlled component value */\n  value?: Value[];\n\n  /** Default value for uncontrolled component */\n  defaultValue?: Value[];\n\n  /** Called with an array of selected checkboxes values when value changes */\n  onChange?: (value: Value[]) => void;\n\n  /** Props passed down to the root element (`Input.Wrapper` component) */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Controls size of the `Input.Wrapper` @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** If set, value cannot be changed */\n  readOnly?: boolean;\n\n  /** `name` attribute of the hidden input for uncontrolled forms */\n  name?: string;\n\n  /** Props passed down to the hidden input for uncontrolled forms */\n  hiddenInputProps?: React.ComponentProps<'input'> & DataAttributes;\n\n  /** Separator for values in the hidden input for uncontrolled forms @default ',' */\n  hiddenInputValuesSeparator?: string;\n\n  /** Maximum number of checkboxes that can be selected. When the limit is reached, unselected checkboxes will be disabled */\n\n  maxSelectedValues?: number;\n\n  /** Sets `disabled` attribute, prevents interactions */\n  disabled?: boolean;\n}\n\nexport type CheckboxGroupFactory = Factory<{\n  props: CheckboxGroupProps;\n  ref: HTMLDivElement;\n  stylesNames: CheckboxGroupStylesNames;\n  signature: <Value extends Primitive = string>(\n    props: CheckboxGroupProps<Value>\n  ) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n  hiddenInputValuesSeparator: ',',\n} satisfies Partial<CheckboxGroupProps>;\n\nexport const CheckboxGroup = genericFactory<CheckboxGroupFactory>(((\n  props: CheckboxGroupProps<string>\n) => {\n  const {\n    value,\n    defaultValue,\n    onChange,\n    size,\n    wrapperProps,\n    children,\n    readOnly,\n    name,\n    hiddenInputValuesSeparator,\n    hiddenInputProps,\n    maxSelectedValues,\n    disabled,\n    ...others\n  } = useProps('CheckboxGroup', defaultProps, props);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: [],\n    onChange,\n  });\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement> | string) => {\n    const itemValue = typeof event === 'string' ? event : event.currentTarget.value;\n\n    if (readOnly) {\n      return;\n    }\n\n    const isCurrentlySelected = _value.includes(itemValue);\n\n    if (!isCurrentlySelected && maxSelectedValues && _value.length >= maxSelectedValues) {\n      return;\n    }\n\n    setValue(\n      isCurrentlySelected ? _value.filter((item) => item !== itemValue) : [..._value, itemValue]\n    );\n  };\n\n  const isDisabled = (checkboxValue: string) => {\n    if (disabled) {\n      return true;\n    }\n\n    if (!maxSelectedValues) {\n      return false;\n    }\n\n    const isCurrentlySelected = _value.includes(checkboxValue);\n    const hasReachedLimit = _value.length >= maxSelectedValues;\n    return !isCurrentlySelected && hasReachedLimit;\n  };\n\n  const hiddenInputValue = _value.join(hiddenInputValuesSeparator);\n\n  return (\n    <CheckboxGroupContext value={{ value: _value, onChange: handleChange, size, isDisabled }}>\n      <Input.Wrapper\n        size={size}\n        {...wrapperProps}\n        {...others}\n        labelElement=\"div\"\n        __staticSelector=\"CheckboxGroup\"\n      >\n        <InputsGroupFieldset role=\"group\">{children}</InputsGroupFieldset>\n        <input type=\"hidden\" name={name} value={hiddenInputValue} {...hiddenInputProps} />\n      </Input.Wrapper>\n    </CheckboxGroupContext>\n  );\n}) as any);\n\nCheckboxGroup.classes = Input.Wrapper.classes;\nCheckboxGroup.displayName = '@mantine/core/CheckboxGroup';\n"],"mappings":";;;;;;;;;AAoBA,MAAa,uBAAuB,cAAgD,IAAI;AAuDxF,MAAM,eAAe,EACnB,4BAA4B,IAC9B;AAEA,MAAa,gBAAgB,iBAC3B,UACG;CACH,MAAM,EACJ,OACA,cACA,UACA,MACA,cACA,UACA,UACA,MACA,4BACA,kBACA,mBACA,UACA,GAAG,WACD,SAAS,iBAAiB,cAAc,KAAK;CAEjD,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC;EACA;EACA,YAAY,CAAC;EACb;CACF,CAAC;CAED,MAAM,gBAAgB,UAAwD;EAC5E,MAAM,YAAY,OAAO,UAAU,WAAW,QAAQ,MAAM,cAAc;EAE1E,IAAI,UACF;EAGF,MAAM,sBAAsB,OAAO,SAAS,SAAS;EAErD,IAAI,CAAC,uBAAuB,qBAAqB,OAAO,UAAU,mBAChE;EAGF,SACE,sBAAsB,OAAO,QAAQ,SAAS,SAAS,SAAS,IAAI,CAAC,GAAG,QAAQ,SAAS,CAC3F;CACF;CAEA,MAAM,cAAc,kBAA0B;EAC5C,IAAI,UACF,OAAO;EAGT,IAAI,CAAC,mBACH,OAAO;EAGT,MAAM,sBAAsB,OAAO,SAAS,aAAa;EACzD,MAAM,kBAAkB,OAAO,UAAU;EACzC,OAAO,CAAC,uBAAuB;CACjC;CAEA,MAAM,mBAAmB,OAAO,KAAK,0BAA0B;CAE/D,OACE,oBAAC,sBAAD;EAAsB,OAAO;GAAE,OAAO;GAAQ,UAAU;GAAc;GAAM;EAAW;EACrF,UAAA,qBAAC,MAAM,SAAP;GACQ;GACN,GAAI;GACJ,GAAI;GACJ,cAAa;GACb,kBAAiB;GALnB,UAAA,CAOE,oBAAC,qBAAD;IAAqB,MAAK;IAAS;GAA8B,CAAA,GACjE,oBAAC,SAAD;IAAO,MAAK;IAAe;IAAM,OAAO;IAAkB,GAAI;GAAmB,CAAA,CACpE;;CACK,CAAA;AAE1B,EAAS;AAET,cAAc,UAAU,MAAM,QAAQ;AACtC,cAAc,cAAc"}

package/esm/components/Checkbox/CheckboxIndicator/CheckboxIndicator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxIndicator.mjs","names":["classes"],"sources":["../../../../src/components/Checkbox/CheckboxIndicator/CheckboxIndicator.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport type { CheckboxIconComponent } from '../Checkbox';\nimport { CheckboxCardContext } from '../CheckboxCard/CheckboxCard';\nimport { CheckboxIcon } from '../CheckIcon';\nimport classes from './CheckboxIndicator.module.css';\n\nexport type CheckboxIndicatorStylesNames = 'indicator' | 'icon';\nexport type CheckboxIndicatorVariant = 'filled' | 'outline';\nexport type CheckboxIndicatorCssVariables = {\n  indicator: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';\n};\n\nexport interface CheckboxIndicatorProps\n  extends BoxProps, StylesApiProps<CheckboxIndicatorFactory>, ElementProps<'div'> {\n  /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {}) | number;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast` */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts icon color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** Indeterminate state of the checkbox. If set, `checked` prop is ignored. */\n  indeterminate?: boolean;\n\n  /** Icon for checked or indeterminate state */\n  icon?: CheckboxIconComponent;\n\n  /** Determines whether the component should have checked styles */\n  checked?: boolean;\n\n  /** Indicates disabled state */\n  disabled?: boolean;\n}\n\nexport type CheckboxIndicatorFactory = Factory<{\n  props: CheckboxIndicatorProps;\n  ref: HTMLDivElement;\n  stylesNames: CheckboxIndicatorStylesNames;\n  vars: CheckboxIndicatorCssVariables;\n  variant: CheckboxIndicatorVariant;\n}>;\n\nconst defaultProps = {\n  icon: CheckboxIcon,\n  variant: 'filled',\n  radius: 'sm',\n} satisfies Partial<CheckboxIndicatorProps>;\n\nconst varsResolver = createVarsResolver<CheckboxIndicatorFactory>(\n  (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    return {\n      indicator: {\n        '--checkbox-size': getSize(size, 'checkbox-size'),\n        '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n        '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n        '--checkbox-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : getAutoContrastValue(autoContrast, theme)\n            ? getContrastColor({ color, theme, autoContrast })\n            : undefined,\n      },\n    };\n  }\n);\n\nexport const CheckboxIndicator = factory<CheckboxIndicatorFactory>((_props) => {\n  const props = useProps('CheckboxIndicator', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    icon: Icon,\n    indeterminate,\n    radius,\n    color,\n    iconColor,\n    autoContrast,\n    checked,\n    mod,\n    variant,\n    disabled,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CheckboxIndicatorFactory>({\n    name: 'CheckboxIndicator',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'indicator',\n  });\n\n  const ctx = use(CheckboxCardContext);\n  const _indeterminate = typeof indeterminate === 'boolean' ? indeterminate : ctx?.indeterminate;\n  const _checked =\n    typeof checked === 'boolean' || typeof indeterminate === 'boolean'\n      ? checked || indeterminate\n      : ctx?.checked || ctx?.indeterminate || false;\n\n  return (\n    <Box\n      {...getStyles('indicator', { variant })}\n      variant={variant}\n      mod={[{ checked: _checked, disabled }, mod]}\n      {...others}\n    >\n      <Icon indeterminate={_indeterminate} {...getStyles('icon')} />\n    </Box>\n  );\n});\n\nCheckboxIndicator.displayName = '@mantine/core/CheckboxIndicator';\nCheckboxIndicator.classes = classes;\nCheckboxIndicator.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;;;;;AAsEA,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACT,QAAQ;AACV;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,QAAQ,OAAO,MAAM,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAc,gBAAgB;EAAE,OAAO,SAAS,MAAM;EAAc;CAAM,CAAC;CACjF,MAAM,eACJ,YAAY,gBAAgB,YAAY,UAAU,KAAA,IAC9C,uBAAuB,YAAY,MAAM,aACzC,YAAY;CAElB,OAAO,EACL,WAAW;EACT,mBAAmB,QAAQ,MAAM,eAAe;EAChD,qBAAqB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;EACxE,oBAAoB,YAAY,YAAY,eAAe,cAAc,OAAO,KAAK;EACrF,yBAAyB,YACrB,cAAc,WAAW,KAAK,IAC9B,qBAAqB,cAAc,KAAK,IACtC,iBAAiB;GAAE;GAAO;GAAO;EAAa,CAAC,IAC/C,KAAA;CACR,EACF;AACF,CACF;AAEA,MAAa,oBAAoB,SAAmC,WAAW;CAC7E,MAAM,QAAQ,SAAS,qBAAqB,cAAc,MAAM;CAChE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MAAM,MACN,eACA,QACA,OACA,WACA,cACA,SACA,KACA,SACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAoC;EACpD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,MAAM,IAAI,mBAAmB;CACnC,MAAM,iBAAiB,OAAO,kBAAkB,YAAY,gBAAgB,KAAK;CACjF,MAAM,WACJ,OAAO,YAAY,aAAa,OAAO,kBAAkB,YACrD,WAAW,gBACX,KAAK,WAAW,KAAK,iBAAiB;CAE5C,OACE,oBAAC,KAAD;EACE,GAAI,UAAU,aAAa,EAAE,QAAQ,CAAC;EAC7B;EACT,KAAK,CAAC;GAAE,SAAS;GAAU;EAAS,GAAG,GAAG;EAC1C,GAAI;YAEJ,oBAAC,MAAD;GAAM,eAAe;GAAgB,GAAI,UAAU,MAAM;EAAI,CAAA;CAC1D,CAAA;AAET,CAAC;AAED,kBAAkB,cAAc;AAChC,kBAAkB,UAAUA;AAC5B,kBAAkB,eAAe"}
+{"version":3,"file":"CheckboxIndicator.mjs","names":["classes"],"sources":["../../../../src/components/Checkbox/CheckboxIndicator/CheckboxIndicator.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport type { CheckboxIconComponent } from '../Checkbox';\nimport { CheckboxCardContext } from '../CheckboxCard/CheckboxCard';\nimport { CheckboxIcon } from '../CheckIcon';\nimport classes from './CheckboxIndicator.module.css';\n\nexport type CheckboxIndicatorStylesNames = 'indicator' | 'icon';\nexport type CheckboxIndicatorVariant = 'filled' | 'outline';\nexport type CheckboxIndicatorCssVariables = {\n  indicator: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';\n};\n\nexport interface CheckboxIndicatorProps\n  extends BoxProps, StylesApiProps<CheckboxIndicatorFactory>, ElementProps<'div'> {\n  /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {}) | number;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast` */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts icon color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** Indeterminate state of the checkbox. If set, `checked` prop is ignored. */\n  indeterminate?: boolean;\n\n  /** Icon for checked or indeterminate state */\n  icon?: CheckboxIconComponent;\n\n  /** Determines whether the component should have checked styles */\n  checked?: boolean;\n\n  /** Indicates disabled state */\n  disabled?: boolean;\n}\n\nexport type CheckboxIndicatorFactory = Factory<{\n  props: CheckboxIndicatorProps;\n  ref: HTMLDivElement;\n  stylesNames: CheckboxIndicatorStylesNames;\n  vars: CheckboxIndicatorCssVariables;\n  variant: CheckboxIndicatorVariant;\n}>;\n\nconst defaultProps = {\n  icon: CheckboxIcon,\n  variant: 'filled',\n  radius: 'sm',\n} satisfies Partial<CheckboxIndicatorProps>;\n\nconst varsResolver = createVarsResolver<CheckboxIndicatorFactory>(\n  (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    return {\n      indicator: {\n        '--checkbox-size': getSize(size, 'checkbox-size'),\n        '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n        '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n        '--checkbox-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : getAutoContrastValue(autoContrast, theme)\n            ? getContrastColor({ color, theme, autoContrast })\n            : undefined,\n      },\n    };\n  }\n);\n\nexport const CheckboxIndicator = factory<CheckboxIndicatorFactory>((_props) => {\n  const props = useProps('CheckboxIndicator', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    icon: Icon,\n    indeterminate,\n    radius,\n    color,\n    iconColor,\n    autoContrast,\n    checked,\n    mod,\n    variant,\n    disabled,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CheckboxIndicatorFactory>({\n    name: 'CheckboxIndicator',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'indicator',\n  });\n\n  const ctx = use(CheckboxCardContext);\n  const _indeterminate = typeof indeterminate === 'boolean' ? indeterminate : ctx?.indeterminate;\n  const _checked =\n    typeof checked === 'boolean' || typeof indeterminate === 'boolean'\n      ? checked || indeterminate\n      : ctx?.checked || ctx?.indeterminate || false;\n\n  return (\n    <Box\n      {...getStyles('indicator', { variant })}\n      variant={variant}\n      mod={[{ checked: _checked, disabled }, mod]}\n      {...others}\n    >\n      <Icon indeterminate={_indeterminate} {...getStyles('icon')} />\n    </Box>\n  );\n});\n\nCheckboxIndicator.displayName = '@mantine/core/CheckboxIndicator';\nCheckboxIndicator.classes = classes;\nCheckboxIndicator.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;;;;;AAsEA,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACT,QAAQ;AACV;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,QAAQ,OAAO,MAAM,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAc,gBAAgB;EAAE,OAAO,SAAS,MAAM;EAAc;CAAM,CAAC;CACjF,MAAM,eACJ,YAAY,gBAAgB,YAAY,UAAU,KAAA,IAC9C,uBAAuB,YAAY,MAAM,aACzC,YAAY;CAElB,OAAO,EACL,WAAW;EACT,mBAAmB,QAAQ,MAAM,eAAe;EAChD,qBAAqB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;EACxE,oBAAoB,YAAY,YAAY,eAAe,cAAc,OAAO,KAAK;EACrF,yBAAyB,YACrB,cAAc,WAAW,KAAK,IAC9B,qBAAqB,cAAc,KAAK,IACtC,iBAAiB;GAAE;GAAO;GAAO;EAAa,CAAC,IAC/C,KAAA;CACR,EACF;AACF,CACF;AAEA,MAAa,oBAAoB,SAAmC,WAAW;CAC7E,MAAM,QAAQ,SAAS,qBAAqB,cAAc,MAAM;CAChE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MAAM,MACN,eACA,QACA,OACA,WACA,cACA,SACA,KACA,SACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAoC;EACpD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,MAAM,IAAI,mBAAmB;CACnC,MAAM,iBAAiB,OAAO,kBAAkB,YAAY,gBAAgB,KAAK;CACjF,MAAM,WACJ,OAAO,YAAY,aAAa,OAAO,kBAAkB,YACrD,WAAW,gBACX,KAAK,WAAW,KAAK,iBAAiB;CAE5C,OACE,oBAAC,KAAD;EACE,GAAI,UAAU,aAAa,EAAE,QAAQ,CAAC;EAC7B;EACT,KAAK,CAAC;GAAE,SAAS;GAAU;EAAS,GAAG,GAAG;EAC1C,GAAI;EAEJ,UAAA,oBAAC,MAAD;GAAM,eAAe;GAAgB,GAAI,UAAU,MAAM;EAAI,CAAA;CAC1D,CAAA;AAET,CAAC;AAED,kBAAkB,cAAc;AAChC,kBAAkB,UAAUA;AAC5B,kBAAkB,eAAe"}

package/esm/components/Chip/Chip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.mjs","names":["useId","classes"],"sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { use } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getFontSize,\n  getRadius,\n  getSize,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { CheckIcon } from '../Checkbox';\nimport {\n  ChipGroup,\n  ChipGroupContext,\n  type ChipGroupProps,\n  type ChipGroupContextValue,\n} from './ChipGroup/ChipGroup';\nimport classes from './Chip.module.css';\n\nexport type ChipStylesNames = 'root' | 'input' | 'iconWrapper' | 'checkIcon' | 'label';\nexport type ChipVariant = 'outline' | 'filled' | 'light';\nexport type ChipCssVariables = {\n  root:\n    | '--chip-fz'\n    | '--chip-size'\n    | '--chip-icon-size'\n    | '--chip-padding'\n    | '--chip-checked-padding'\n    | '--chip-radius'\n    | '--chip-bg'\n    | '--chip-hover'\n    | '--chip-color'\n    | '--chip-bd'\n    | '--chip-spacing';\n};\n\nexport interface ChipProps\n  extends BoxProps, StylesApiProps<ChipFactory>, ElementProps<'input', 'size' | 'onChange'> {\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' */\n  radius?: MantineRadius;\n\n  /** Controls various properties related to the component size @default 'sm' */\n  size?: MantineSize;\n\n  /** Chip input type @default 'checkbox' */\n  type?: 'radio' | 'checkbox';\n\n  /** `label` element associated with the input */\n  children: React.ReactNode;\n\n  /** Controlled checked state */\n  checked?: boolean;\n\n  /** Uncontrolled checked state initial value */\n  defaultChecked?: boolean;\n\n  /** Calls when checked state changes */\n  onChange?: (checked: boolean) => void;\n\n  /** Key of `theme.colors` or any valid CSS color. @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Unique input id, generated randomly if not provided */\n  id?: string;\n\n  /** Props passed down to the root element */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Any element or component to replace the default icon */\n  icon?: React.ReactNode;\n\n  /** Assigns ref of the root element */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** If set, adjusts text color based on the chip background color for `filled` variant */\n  autoContrast?: boolean;\n}\n\nexport type ChipFactory = Factory<{\n  props: ChipProps;\n  ref: HTMLInputElement;\n  stylesNames: ChipStylesNames;\n  vars: ChipCssVariables;\n  variant: ChipVariant;\n  staticComponents: {\n    Group: typeof ChipGroup;\n  };\n}>;\n\nconst defaultProps = {\n  type: 'checkbox',\n} satisfies Partial<ChipProps>;\n\nconst varsResolver = createVarsResolver<ChipFactory>(\n  (theme, { size, radius, variant, color, autoContrast }) => {\n    const colors = theme.variantColorResolver({\n      color: color || theme.primaryColor,\n      theme,\n      variant: variant || 'filled',\n      autoContrast,\n    });\n\n    return {\n      root: {\n        '--chip-fz': getFontSize(size),\n        '--chip-size': getSize(size, 'chip-size'),\n        '--chip-radius': radius === undefined ? undefined : getRadius(radius),\n        '--chip-checked-padding': getSize(size, 'chip-checked-padding'),\n        '--chip-padding': getSize(size, 'chip-padding'),\n        '--chip-icon-size': getSize(size, 'chip-icon-size'),\n        '--chip-bg': color || variant ? colors.background : undefined,\n        '--chip-hover': color || variant ? colors.hover : undefined,\n        '--chip-color': color || variant ? colors.color : undefined,\n        '--chip-bd': color || variant ? colors.border : undefined,\n        '--chip-spacing': getSize(size, 'chip-spacing'),\n      },\n    };\n  }\n);\n\nexport const Chip = factory<ChipFactory>((_props) => {\n  const props = useProps('Chip', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    id,\n    checked,\n    defaultChecked,\n    onChange,\n    value,\n    wrapperProps,\n    type,\n    disabled,\n    children,\n    size,\n    variant,\n    icon,\n    rootRef,\n    autoContrast,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ChipFactory>({\n    name: 'Chip',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const ctx = use(ChipGroupContext);\n  const uuid = useId(id);\n  const { styleProps, rest } = extractStyleProps(others);\n\n  const [_value, setValue] = useUncontrolled({\n    value: checked,\n    defaultValue: defaultChecked,\n    finalValue: false,\n    onChange,\n  });\n\n  const contextProps = ctx\n    ? {\n        checked: ctx.isChipSelected(value as string),\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n          ctx.onChange(event);\n          onChange?.(event.currentTarget.checked);\n        },\n        type: ctx.multiple ? 'checkbox' : 'radio',\n      }\n    : {};\n\n  const _checked = contextProps.checked || _value;\n\n  return (\n    <Box\n      size={size}\n      variant={variant}\n      ref={rootRef}\n      mod={mod}\n      {...getStyles('root')}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <input\n        type={type}\n        {...getStyles('input')}\n        checked={_checked}\n        onChange={(event) => setValue(event.currentTarget.checked)}\n        id={uuid}\n        disabled={disabled}\n        value={value}\n        {...contextProps}\n        {...rest}\n      />\n\n      <Box\n        component=\"label\"\n        htmlFor={uuid}\n        mod={{ checked: _checked, disabled }}\n        {...getStyles('label', { variant: variant || 'filled' })}\n      >\n        {_checked && icon !== null && icon !== false && (\n          <span {...getStyles('iconWrapper')}>\n            {icon === undefined ? <CheckIcon {...getStyles('checkIcon')} /> : icon}\n          </span>\n        )}\n        <span>{children}</span>\n      </Box>\n    </Box>\n  );\n});\n\nChip.classes = classes;\nChip.varsResolver = varsResolver;\nChip.displayName = '@mantine/core/Chip';\nChip.Group = ChipGroup;\n\nexport namespace Chip {\n  export type Props = ChipProps;\n  export type StylesNames = ChipStylesNames;\n  export type CssVariables = ChipCssVariables;\n  export type Factory = ChipFactory;\n  export type Variant = ChipVariant;\n\n  export namespace Group {\n    export type Props<\n      Multiple extends boolean = false,\n      Value extends string = string,\n    > = ChipGroupProps<Multiple, Value>;\n\n    export type ContextValue<Value extends string = string> = ChipGroupContextValue<Value>;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAoGA,MAAM,eAAe,EACnB,MAAM,WACR;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,MAAM,QAAQ,SAAS,OAAO,mBAAmB;CACzD,MAAM,SAAS,MAAM,qBAAqB;EACxC,OAAO,SAAS,MAAM;EACtB;EACA,SAAS,WAAW;EACpB;CACF,CAAC;CAED,OAAO,EACL,MAAM;EACJ,aAAa,YAAY,IAAI;EAC7B,eAAe,QAAQ,MAAM,WAAW;EACxC,iBAAiB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;EACpE,0BAA0B,QAAQ,MAAM,sBAAsB;EAC9D,kBAAkB,QAAQ,MAAM,cAAc;EAC9C,oBAAoB,QAAQ,MAAM,gBAAgB;EAClD,aAAa,SAAS,UAAU,OAAO,aAAa,KAAA;EACpD,gBAAgB,SAAS,UAAU,OAAO,QAAQ,KAAA;EAClD,gBAAgB,SAAS,UAAU,OAAO,QAAQ,KAAA;EAClD,aAAa,SAAS,UAAU,OAAO,SAAS,KAAA;EAChD,kBAAkB,QAAQ,MAAM,cAAc;CAChD,EACF;AACF,CACF;AAEA,MAAa,OAAO,SAAsB,WAAW;CACnD,MAAM,QAAQ,SAAS,QAAQ,cAAc,MAAM;CACnD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,IACA,SACA,gBACA,UACA,OACA,cACA,MACA,UACA,UACA,MACA,SACA,MACA,SACA,cACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAuB;EACvC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,MAAM,IAAI,gBAAgB;CAChC,MAAM,OAAOA,QAAM,EAAE;CACrB,MAAM,EAAE,YAAY,SAAS,kBAAkB,MAAM;CAErD,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC,OAAO;EACP,cAAc;EACd,YAAY;EACZ;CACF,CAAC;CAED,MAAM,eAAe,MACjB;EACE,SAAS,IAAI,eAAe,KAAe;EAC3C,WAAW,UAA+C;GACxD,IAAI,SAAS,KAAK;GAClB,WAAW,MAAM,cAAc,OAAO;EACxC;EACA,MAAM,IAAI,WAAW,aAAa;CACpC,IACA,CAAC;CAEL,MAAM,WAAW,aAAa,WAAW;CAEzC,OACE,qBAAC,KAAD;EACQ;EACG;EACT,KAAK;EACA;EACL,GAAI,UAAU,MAAM;EACpB,GAAI;EACJ,GAAI;YAPN,CASE,oBAAC,SAAD;GACQ;GACN,GAAI,UAAU,OAAO;GACrB,SAAS;GACT,WAAW,UAAU,SAAS,MAAM,cAAc,OAAO;GACzD,IAAI;GACM;GACH;GACP,GAAI;GACJ,GAAI;EACL,CAAA,GAED,qBAAC,KAAD;GACE,WAAU;GACV,SAAS;GACT,KAAK;IAAE,SAAS;IAAU;GAAS;GACnC,GAAI,UAAU,SAAS,EAAE,SAAS,WAAW,SAAS,CAAC;aAJzD,CAMG,YAAY,SAAS,QAAQ,SAAS,SACrC,oBAAC,QAAD;IAAM,GAAI,UAAU,aAAa;cAC9B,SAAS,KAAA,IAAY,oBAAC,WAAD,EAAW,GAAI,UAAU,WAAW,EAAI,CAAA,IAAI;GAC9D,CAAA,GAER,oBAAC,QAAD,EAAO,SAAe,CAAA,CACnB;IACF;;AAET,CAAC;AAED,KAAK,UAAUC;AACf,KAAK,eAAe;AACpB,KAAK,cAAc;AACnB,KAAK,QAAQ"}
+{"version":3,"file":"Chip.mjs","names":["useId","classes"],"sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { use } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getFontSize,\n  getRadius,\n  getSize,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { CheckIcon } from '../Checkbox';\nimport {\n  ChipGroup,\n  ChipGroupContext,\n  type ChipGroupProps,\n  type ChipGroupContextValue,\n} from './ChipGroup/ChipGroup';\nimport classes from './Chip.module.css';\n\nexport type ChipStylesNames = 'root' | 'input' | 'iconWrapper' | 'checkIcon' | 'label';\nexport type ChipVariant = 'outline' | 'filled' | 'light';\nexport type ChipCssVariables = {\n  root:\n    | '--chip-fz'\n    | '--chip-size'\n    | '--chip-icon-size'\n    | '--chip-padding'\n    | '--chip-checked-padding'\n    | '--chip-radius'\n    | '--chip-bg'\n    | '--chip-hover'\n    | '--chip-color'\n    | '--chip-bd'\n    | '--chip-spacing';\n};\n\nexport interface ChipProps\n  extends BoxProps, StylesApiProps<ChipFactory>, ElementProps<'input', 'size' | 'onChange'> {\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' */\n  radius?: MantineRadius;\n\n  /** Controls various properties related to the component size @default 'sm' */\n  size?: MantineSize;\n\n  /** Chip input type @default 'checkbox' */\n  type?: 'radio' | 'checkbox';\n\n  /** `label` element associated with the input */\n  children: React.ReactNode;\n\n  /** Controlled checked state */\n  checked?: boolean;\n\n  /** Uncontrolled checked state initial value */\n  defaultChecked?: boolean;\n\n  /** Calls when checked state changes */\n  onChange?: (checked: boolean) => void;\n\n  /** Key of `theme.colors` or any valid CSS color. @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Unique input id, generated randomly if not provided */\n  id?: string;\n\n  /** Props passed down to the root element */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Any element or component to replace the default icon */\n  icon?: React.ReactNode;\n\n  /** Assigns ref of the root element */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** If set, adjusts text color based on the chip background color for `filled` variant */\n  autoContrast?: boolean;\n}\n\nexport type ChipFactory = Factory<{\n  props: ChipProps;\n  ref: HTMLInputElement;\n  stylesNames: ChipStylesNames;\n  vars: ChipCssVariables;\n  variant: ChipVariant;\n  staticComponents: {\n    Group: typeof ChipGroup;\n  };\n}>;\n\nconst defaultProps = {\n  type: 'checkbox',\n} satisfies Partial<ChipProps>;\n\nconst varsResolver = createVarsResolver<ChipFactory>(\n  (theme, { size, radius, variant, color, autoContrast }) => {\n    const colors = theme.variantColorResolver({\n      color: color || theme.primaryColor,\n      theme,\n      variant: variant || 'filled',\n      autoContrast,\n    });\n\n    return {\n      root: {\n        '--chip-fz': getFontSize(size),\n        '--chip-size': getSize(size, 'chip-size'),\n        '--chip-radius': radius === undefined ? undefined : getRadius(radius),\n        '--chip-checked-padding': getSize(size, 'chip-checked-padding'),\n        '--chip-padding': getSize(size, 'chip-padding'),\n        '--chip-icon-size': getSize(size, 'chip-icon-size'),\n        '--chip-bg': color || variant ? colors.background : undefined,\n        '--chip-hover': color || variant ? colors.hover : undefined,\n        '--chip-color': color || variant ? colors.color : undefined,\n        '--chip-bd': color || variant ? colors.border : undefined,\n        '--chip-spacing': getSize(size, 'chip-spacing'),\n      },\n    };\n  }\n);\n\nexport const Chip = factory<ChipFactory>((_props) => {\n  const props = useProps('Chip', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    id,\n    checked,\n    defaultChecked,\n    onChange,\n    value,\n    wrapperProps,\n    type,\n    disabled,\n    children,\n    size,\n    variant,\n    icon,\n    rootRef,\n    autoContrast,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ChipFactory>({\n    name: 'Chip',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const ctx = use(ChipGroupContext);\n  const uuid = useId(id);\n  const { styleProps, rest } = extractStyleProps(others);\n\n  const [_value, setValue] = useUncontrolled({\n    value: checked,\n    defaultValue: defaultChecked,\n    finalValue: false,\n    onChange,\n  });\n\n  const contextProps = ctx\n    ? {\n        checked: ctx.isChipSelected(value as string),\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n          ctx.onChange(event);\n          onChange?.(event.currentTarget.checked);\n        },\n        type: ctx.multiple ? 'checkbox' : 'radio',\n      }\n    : {};\n\n  const _checked = contextProps.checked || _value;\n\n  return (\n    <Box\n      size={size}\n      variant={variant}\n      ref={rootRef}\n      mod={mod}\n      {...getStyles('root')}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <input\n        type={type}\n        {...getStyles('input')}\n        checked={_checked}\n        onChange={(event) => setValue(event.currentTarget.checked)}\n        id={uuid}\n        disabled={disabled}\n        value={value}\n        {...contextProps}\n        {...rest}\n      />\n\n      <Box\n        component=\"label\"\n        htmlFor={uuid}\n        mod={{ checked: _checked, disabled }}\n        {...getStyles('label', { variant: variant || 'filled' })}\n      >\n        {_checked && icon !== null && icon !== false && (\n          <span {...getStyles('iconWrapper')}>\n            {icon === undefined ? <CheckIcon {...getStyles('checkIcon')} /> : icon}\n          </span>\n        )}\n        <span>{children}</span>\n      </Box>\n    </Box>\n  );\n});\n\nChip.classes = classes;\nChip.varsResolver = varsResolver;\nChip.displayName = '@mantine/core/Chip';\nChip.Group = ChipGroup;\n\nexport namespace Chip {\n  export type Props = ChipProps;\n  export type StylesNames = ChipStylesNames;\n  export type CssVariables = ChipCssVariables;\n  export type Factory = ChipFactory;\n  export type Variant = ChipVariant;\n\n  export namespace Group {\n    export type Props<\n      Multiple extends boolean = false,\n      Value extends string = string,\n    > = ChipGroupProps<Multiple, Value>;\n\n    export type ContextValue<Value extends string = string> = ChipGroupContextValue<Value>;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAoGA,MAAM,eAAe,EACnB,MAAM,WACR;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,MAAM,QAAQ,SAAS,OAAO,mBAAmB;CACzD,MAAM,SAAS,MAAM,qBAAqB;EACxC,OAAO,SAAS,MAAM;EACtB;EACA,SAAS,WAAW;EACpB;CACF,CAAC;CAED,OAAO,EACL,MAAM;EACJ,aAAa,YAAY,IAAI;EAC7B,eAAe,QAAQ,MAAM,WAAW;EACxC,iBAAiB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;EACpE,0BAA0B,QAAQ,MAAM,sBAAsB;EAC9D,kBAAkB,QAAQ,MAAM,cAAc;EAC9C,oBAAoB,QAAQ,MAAM,gBAAgB;EAClD,aAAa,SAAS,UAAU,OAAO,aAAa,KAAA;EACpD,gBAAgB,SAAS,UAAU,OAAO,QAAQ,KAAA;EAClD,gBAAgB,SAAS,UAAU,OAAO,QAAQ,KAAA;EAClD,aAAa,SAAS,UAAU,OAAO,SAAS,KAAA;EAChD,kBAAkB,QAAQ,MAAM,cAAc;CAChD,EACF;AACF,CACF;AAEA,MAAa,OAAO,SAAsB,WAAW;CACnD,MAAM,QAAQ,SAAS,QAAQ,cAAc,MAAM;CACnD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,IACA,SACA,gBACA,UACA,OACA,cACA,MACA,UACA,UACA,MACA,SACA,MACA,SACA,cACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAuB;EACvC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,MAAM,IAAI,gBAAgB;CAChC,MAAM,OAAOA,QAAM,EAAE;CACrB,MAAM,EAAE,YAAY,SAAS,kBAAkB,MAAM;CAErD,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC,OAAO;EACP,cAAc;EACd,YAAY;EACZ;CACF,CAAC;CAED,MAAM,eAAe,MACjB;EACE,SAAS,IAAI,eAAe,KAAe;EAC3C,WAAW,UAA+C;GACxD,IAAI,SAAS,KAAK;GAClB,WAAW,MAAM,cAAc,OAAO;EACxC;EACA,MAAM,IAAI,WAAW,aAAa;CACpC,IACA,CAAC;CAEL,MAAM,WAAW,aAAa,WAAW;CAEzC,OACE,qBAAC,KAAD;EACQ;EACG;EACT,KAAK;EACA;EACL,GAAI,UAAU,MAAM;EACpB,GAAI;EACJ,GAAI;EAPN,UAAA,CASE,oBAAC,SAAD;GACQ;GACN,GAAI,UAAU,OAAO;GACrB,SAAS;GACT,WAAW,UAAU,SAAS,MAAM,cAAc,OAAO;GACzD,IAAI;GACM;GACH;GACP,GAAI;GACJ,GAAI;EACL,CAAA,GAED,qBAAC,KAAD;GACE,WAAU;GACV,SAAS;GACT,KAAK;IAAE,SAAS;IAAU;GAAS;GACnC,GAAI,UAAU,SAAS,EAAE,SAAS,WAAW,SAAS,CAAC;GAJzD,UAAA,CAMG,YAAY,SAAS,QAAQ,SAAS,SACrC,oBAAC,QAAD;IAAM,GAAI,UAAU,aAAa;IAC9B,UAAA,SAAS,KAAA,IAAY,oBAAC,WAAD,EAAW,GAAI,UAAU,WAAW,EAAI,CAAA,IAAI;GAC9D,CAAA,GAER,oBAAC,QAAD,EAAO,SAAe,CAAA,CACnB;EACF,CAAA,CAAA;;AAET,CAAC;AAED,KAAK,UAAUC;AACf,KAAK,eAAe;AACpB,KAAK,cAAc;AACnB,KAAK,QAAQ"}

package/esm/components/CloseButton/CloseButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CloseButton.mjs","names":["classes"],"sources":["../../../src/components/CloseButton/CloseButton.tsx"],"sourcesContent":["import {\n  BoxProps,\n  createVarsResolver,\n  getRadius,\n  getSize,\n  MantineRadius,\n  MantineSize,\n  polymorphicFactory,\n  PolymorphicFactory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { UnstyledButton } from '../UnstyledButton';\nimport { CloseIcon } from './CloseIcon';\nimport classes from './CloseButton.module.css';\n\nexport type CloseButtonVariant = 'subtle' | 'transparent';\nexport type CloseButtonStylesNames = 'root';\nexport type CloseButtonCssVariables = {\n  root: '--cb-icon-size' | '--cb-size' | '--cb-radius';\n};\n\nexport interface __CloseButtonProps {\n  'data-disabled'?: boolean;\n\n  /** Controls width and height of the button. Numbers are converted to rem. @default 'md' */\n  size?: MantineSize | (string & {}) | number;\n\n  /** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Sets `disabled` attribute, assigns disabled styles */\n  disabled?: boolean;\n\n  /** `X` icon `width` and `height` @default 70% */\n  iconSize?: number | string;\n\n  /** Content rendered inside the button. For example `VisuallyHidden` with label for screen readers. */\n  children?: React.ReactNode;\n\n  /** React node to replace the default close icon. If set, `iconSize` prop is ignored. */\n  icon?: React.ReactNode;\n}\n\nexport interface CloseButtonProps\n  extends __CloseButtonProps, BoxProps, StylesApiProps<CloseButtonFactory> {\n  __staticSelector?: string;\n}\n\nexport type CloseButtonFactory = PolymorphicFactory<{\n  props: CloseButtonProps;\n  defaultComponent: 'button';\n  defaultRef: HTMLButtonElement;\n  stylesNames: CloseButtonStylesNames;\n  variant: CloseButtonVariant;\n  vars: CloseButtonCssVariables;\n}>;\n\nconst defaultProps = {\n  variant: 'subtle',\n} satisfies Partial<CloseButtonProps>;\n\nconst varsResolver = createVarsResolver<CloseButtonFactory>((_, { size, radius, iconSize }) => ({\n  root: {\n    '--cb-size': getSize(size, 'cb-size'),\n    '--cb-radius': radius === undefined ? undefined : getRadius(radius),\n    '--cb-icon-size': rem(iconSize),\n  },\n}));\n\nexport const CloseButton = polymorphicFactory<CloseButtonFactory>((_props) => {\n  const props = useProps('CloseButton', defaultProps, _props);\n  const {\n    iconSize,\n    children,\n    vars,\n    radius,\n    className,\n    classNames,\n    style,\n    styles,\n    unstyled,\n    'data-disabled': dataDisabled,\n    disabled,\n    variant,\n    icon,\n    mod,\n    attributes,\n    __staticSelector,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CloseButtonFactory>({\n    name: __staticSelector || 'CloseButton',\n    props,\n    className,\n    style,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <UnstyledButton\n      {...others}\n      unstyled={unstyled}\n      variant={variant}\n      disabled={disabled}\n      mod={[{ disabled: disabled || dataDisabled }, mod]}\n      {...getStyles('root', { variant, active: !disabled && !dataDisabled })}\n    >\n      {icon || <CloseIcon />}\n      {children}\n    </UnstyledButton>\n  );\n});\n\nCloseButton.classes = classes;\nCloseButton.varsResolver = varsResolver;\nCloseButton.displayName = '@mantine/core/CloseButton';\n\nexport namespace CloseButton {\n  export type Props = CloseButtonProps;\n  export type StylesNames = CloseButtonStylesNames;\n  export type Factory = CloseButtonFactory;\n  export type Variant = CloseButtonVariant;\n  export type CssVariables = CloseButtonCssVariables;\n}\n"],"mappings":";;;;;;;;;;;;AA4DA,MAAM,eAAe,EACnB,SAAS,SACX;AAEA,MAAM,eAAe,oBAAwC,GAAG,EAAE,MAAM,QAAQ,gBAAgB,EAC9F,MAAM;CACJ,aAAa,QAAQ,MAAM,SAAS;CACpC,eAAe,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;CAClE,kBAAkB,IAAI,QAAQ;AAChC,EACF,EAAE;AAEF,MAAa,cAAc,oBAAwC,WAAW;CAC5E,MAAM,QAAQ,SAAS,eAAe,cAAc,MAAM;CAC1D,MAAM,EACJ,UACA,UACA,MACA,QACA,WACA,YACA,OACA,QACA,UACA,iBAAiB,cACjB,UACA,SACA,MACA,KACA,YACA,kBACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA8B;EAC9C,MAAM,oBAAoB;EAC1B;EACA;EACA;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,qBAAC,gBAAD;EACE,GAAI;EACM;EACD;EACC;EACV,KAAK,CAAC,EAAE,UAAU,YAAY,aAAa,GAAG,GAAG;EACjD,GAAI,UAAU,QAAQ;GAAE;GAAS,QAAQ,CAAC,YAAY,CAAC;EAAa,CAAC;YANvE,CAQG,QAAQ,oBAAC,WAAD,CAAY,CAAA,GACpB,QACa;;AAEpB,CAAC;AAED,YAAY,UAAUA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}
+{"version":3,"file":"CloseButton.mjs","names":["classes"],"sources":["../../../src/components/CloseButton/CloseButton.tsx"],"sourcesContent":["import {\n  BoxProps,\n  createVarsResolver,\n  getRadius,\n  getSize,\n  MantineRadius,\n  MantineSize,\n  polymorphicFactory,\n  PolymorphicFactory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { UnstyledButton } from '../UnstyledButton';\nimport { CloseIcon } from './CloseIcon';\nimport classes from './CloseButton.module.css';\n\nexport type CloseButtonVariant = 'subtle' | 'transparent';\nexport type CloseButtonStylesNames = 'root';\nexport type CloseButtonCssVariables = {\n  root: '--cb-icon-size' | '--cb-size' | '--cb-radius';\n};\n\nexport interface __CloseButtonProps {\n  'data-disabled'?: boolean;\n\n  /** Controls width and height of the button. Numbers are converted to rem. @default 'md' */\n  size?: MantineSize | (string & {}) | number;\n\n  /** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Sets `disabled` attribute, assigns disabled styles */\n  disabled?: boolean;\n\n  /** `X` icon `width` and `height` @default 70% */\n  iconSize?: number | string;\n\n  /** Content rendered inside the button. For example `VisuallyHidden` with label for screen readers. */\n  children?: React.ReactNode;\n\n  /** React node to replace the default close icon. If set, `iconSize` prop is ignored. */\n  icon?: React.ReactNode;\n}\n\nexport interface CloseButtonProps\n  extends __CloseButtonProps, BoxProps, StylesApiProps<CloseButtonFactory> {\n  __staticSelector?: string;\n}\n\nexport type CloseButtonFactory = PolymorphicFactory<{\n  props: CloseButtonProps;\n  defaultComponent: 'button';\n  defaultRef: HTMLButtonElement;\n  stylesNames: CloseButtonStylesNames;\n  variant: CloseButtonVariant;\n  vars: CloseButtonCssVariables;\n}>;\n\nconst defaultProps = {\n  variant: 'subtle',\n} satisfies Partial<CloseButtonProps>;\n\nconst varsResolver = createVarsResolver<CloseButtonFactory>((_, { size, radius, iconSize }) => ({\n  root: {\n    '--cb-size': getSize(size, 'cb-size'),\n    '--cb-radius': radius === undefined ? undefined : getRadius(radius),\n    '--cb-icon-size': rem(iconSize),\n  },\n}));\n\nexport const CloseButton = polymorphicFactory<CloseButtonFactory>((_props) => {\n  const props = useProps('CloseButton', defaultProps, _props);\n  const {\n    iconSize,\n    children,\n    vars,\n    radius,\n    className,\n    classNames,\n    style,\n    styles,\n    unstyled,\n    'data-disabled': dataDisabled,\n    disabled,\n    variant,\n    icon,\n    mod,\n    attributes,\n    __staticSelector,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CloseButtonFactory>({\n    name: __staticSelector || 'CloseButton',\n    props,\n    className,\n    style,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <UnstyledButton\n      {...others}\n      unstyled={unstyled}\n      variant={variant}\n      disabled={disabled}\n      mod={[{ disabled: disabled || dataDisabled }, mod]}\n      {...getStyles('root', { variant, active: !disabled && !dataDisabled })}\n    >\n      {icon || <CloseIcon />}\n      {children}\n    </UnstyledButton>\n  );\n});\n\nCloseButton.classes = classes;\nCloseButton.varsResolver = varsResolver;\nCloseButton.displayName = '@mantine/core/CloseButton';\n\nexport namespace CloseButton {\n  export type Props = CloseButtonProps;\n  export type StylesNames = CloseButtonStylesNames;\n  export type Factory = CloseButtonFactory;\n  export type Variant = CloseButtonVariant;\n  export type CssVariables = CloseButtonCssVariables;\n}\n"],"mappings":";;;;;;;;;;;;AA4DA,MAAM,eAAe,EACnB,SAAS,SACX;AAEA,MAAM,eAAe,oBAAwC,GAAG,EAAE,MAAM,QAAQ,gBAAgB,EAC9F,MAAM;CACJ,aAAa,QAAQ,MAAM,SAAS;CACpC,eAAe,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;CAClE,kBAAkB,IAAI,QAAQ;AAChC,EACF,EAAE;AAEF,MAAa,cAAc,oBAAwC,WAAW;CAC5E,MAAM,QAAQ,SAAS,eAAe,cAAc,MAAM;CAC1D,MAAM,EACJ,UACA,UACA,MACA,QACA,WACA,YACA,OACA,QACA,UACA,iBAAiB,cACjB,UACA,SACA,MACA,KACA,YACA,kBACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA8B;EAC9C,MAAM,oBAAoB;EAC1B;EACA;EACA;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,qBAAC,gBAAD;EACE,GAAI;EACM;EACD;EACC;EACV,KAAK,CAAC,EAAE,UAAU,YAAY,aAAa,GAAG,GAAG;EACjD,GAAI,UAAU,QAAQ;GAAE;GAAS,QAAQ,CAAC,YAAY,CAAC;EAAa,CAAC;EANvE,UAAA,CAQG,QAAQ,oBAAC,WAAD,CAAY,CAAA,GACpB,QACa;;AAEpB,CAAC;AAED,YAAY,UAAUA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}

package/esm/components/CloseButton/CloseIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CloseIcon.mjs","names":[],"sources":["../../../src/components/CloseButton/CloseIcon.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface CloseIconProps extends React.ComponentProps<'svg'> {\n  /** Icon width and height, `var(--icon-size)` by default */\n  size?: string;\n}\n\nexport function CloseIcon({ size = 'var(--cb-icon-size, 70%)', style, ...others }: CloseIconProps) {\n  return (\n    <svg\n      viewBox=\"0 0 15 15\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      style={{ ...style, width: size, height: size }}\n      {...others}\n    >\n      <path\n        d=\"M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  );\n}\n\nCloseIcon.displayName = '@mantine/core/CloseIcon';\n"],"mappings":";;;;AAOA,SAAgB,UAAU,EAAE,OAAO,4BAA4B,OAAO,GAAG,UAA0B;CACjG,OACE,oBAAC,OAAD;EACE,SAAQ;EACR,MAAK;EACL,OAAM;EACN,OAAO;GAAE,GAAG;GAAO,OAAO;GAAM,QAAQ;EAAK;EAC7C,GAAI;YAEJ,oBAAC,QAAD;GACE,GAAE;GACF,MAAK;GACL,UAAS;GACT,UAAS;EACV,CAAA;CACE,CAAA;AAET;AAEA,UAAU,cAAc"}
+{"version":3,"file":"CloseIcon.mjs","names":[],"sources":["../../../src/components/CloseButton/CloseIcon.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface CloseIconProps extends React.ComponentProps<'svg'> {\n  /** Icon width and height, `var(--icon-size)` by default */\n  size?: string;\n}\n\nexport function CloseIcon({ size = 'var(--cb-icon-size, 70%)', style, ...others }: CloseIconProps) {\n  return (\n    <svg\n      viewBox=\"0 0 15 15\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      style={{ ...style, width: size, height: size }}\n      {...others}\n    >\n      <path\n        d=\"M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  );\n}\n\nCloseIcon.displayName = '@mantine/core/CloseIcon';\n"],"mappings":";;;;AAOA,SAAgB,UAAU,EAAE,OAAO,4BAA4B,OAAO,GAAG,UAA0B;CACjG,OACE,oBAAC,OAAD;EACE,SAAQ;EACR,MAAK;EACL,OAAM;EACN,OAAO;GAAE,GAAG;GAAO,OAAO;GAAM,QAAQ;EAAK;EAC7C,GAAI;EAEJ,UAAA,oBAAC,QAAD;GACE,GAAE;GACF,MAAK;GACL,UAAS;GACT,UAAS;EACV,CAAA;CACE,CAAA;AAET;AAEA,UAAU,cAAc"}

package/esm/components/Collapse/Collapse.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Collapse.mjs","names":[],"sources":["../../../src/components/Collapse/Collapse.tsx"],"sourcesContent":["import { Activity } from 'react';\nimport { useCollapse, useHorizontalCollapse, useReducedMotion } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  Factory,\n  factory,\n  getStyleObject,\n  useMantineEnv,\n  useMantineTheme,\n  useProps,\n} from '../../core';\n\nexport interface CollapseProps extends BoxProps, Omit<React.ComponentProps<'div'>, keyof BoxProps> {\n  /** Collapse orientation @default 'vertical' */\n  orientation?: 'vertical' | 'horizontal';\n\n  /** Expanded state */\n  expanded: boolean;\n\n  /** Called when the transition ends */\n  onTransitionEnd?: () => void;\n\n  /** Called when transition starts */\n  onTransitionStart?: () => void;\n\n  /** Transition duration in ms @default 200 */\n  transitionDuration?: number;\n\n  /** Transition timing function @default ease */\n  transitionTimingFunction?: string;\n\n  /** Determines whether the opacity is animated @default true */\n  animateOpacity?: boolean;\n\n  /** If set, the element is kept in the DOM when collapsed. When `true`, React 19 `Activity` is used to preserve state while collapsed. When `false`, the element is unmounted after the exit animation. @default true */\n  keepMounted?: boolean;\n\n  /** Controls how the element is hidden when `keepMounted` is set:\n   * `'activity'` – hidden with React 19 `Activity` component,\n   * `'display-none'` – hidden with `display: none` styles\n   * @default 'activity'\n   */\n  keepMountedMode?: 'activity' | 'display-none';\n}\n\nexport type CollapseFactory = Factory<{\n  props: CollapseProps;\n  ref: HTMLDivElement;\n}>;\n\nconst defaultProps = {\n  transitionDuration: 200,\n  transitionTimingFunction: 'ease',\n  animateOpacity: true,\n  orientation: 'vertical',\n  keepMounted: true,\n  keepMountedMode: 'activity',\n} satisfies Partial<CollapseProps>;\n\nexport const Collapse = factory<CollapseFactory>((props) => {\n  const {\n    children,\n    expanded,\n    transitionDuration,\n    transitionTimingFunction,\n    style,\n    onTransitionEnd,\n    onTransitionStart,\n    animateOpacity,\n    keepMounted,\n    keepMountedMode,\n    ref,\n    orientation,\n    ...others\n  } = useProps('Collapse', defaultProps, props);\n\n  const env = useMantineEnv();\n  const theme = useMantineTheme();\n  const shouldReduceMotion = useReducedMotion();\n  const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n  const duration = reduceMotion ? 0 : transitionDuration;\n  const hook = orientation === 'horizontal' ? useHorizontalCollapse : useCollapse;\n\n  const collapse = hook({\n    expanded,\n    transitionDuration: duration,\n    transitionTimingFunction,\n    onTransitionEnd,\n    onTransitionStart,\n    keepMounted: false,\n  });\n\n  if (duration === 0) {\n    if (keepMounted === true && (keepMountedMode === 'display-none' || env !== 'test')) {\n      if (keepMountedMode === 'display-none') {\n        return (\n          <Box\n            {...others}\n            style={{\n              ...getStyleObject(style, theme),\n              ...(!expanded ? { display: 'none' } : {}),\n            }}\n            ref={ref}\n          >\n            {children}\n          </Box>\n        );\n      }\n\n      return (\n        <Activity mode={expanded ? 'visible' : 'hidden'}>\n          <Box {...others} style={style} ref={ref}>\n            {children}\n          </Box>\n        </Activity>\n      );\n    }\n\n    return expanded ? (\n      <Box {...others} style={style} ref={ref}>\n        {children}\n      </Box>\n    ) : null;\n  }\n\n  const isExited = collapse.state === 'exited';\n\n  let content: React.ReactNode;\n  if (keepMounted === false) {\n    content = isExited ? null : children;\n  } else if (keepMounted === true) {\n    content =\n      keepMountedMode === 'display-none' ? (\n        children\n      ) : (\n        <Activity mode={isExited ? 'hidden' : 'visible'}>{children}</Activity>\n      );\n  } else {\n    content = children;\n  }\n\n  return (\n    <Box\n      {...others}\n      {...collapse.getCollapseProps({\n        style: {\n          opacity: expanded || !animateOpacity ? 1 : 0,\n          transition: animateOpacity ? `opacity ${duration}ms ${transitionTimingFunction}` : 'none',\n          ...getStyleObject(style, theme),\n          ...(keepMounted && keepMountedMode === 'display-none' && isExited\n            ? { display: 'none' }\n            : {}),\n        },\n        ref,\n      })}\n    >\n      {content}\n    </Box>\n  );\n});\n\nCollapse.displayName = '@mantine/core/Collapse';\n\nexport namespace Collapse {\n  export type Props = CollapseProps;\n  export type Factory = CollapseFactory;\n}\n"],"mappings":";;;;;;;;;;;AAmDA,MAAM,eAAe;CACnB,oBAAoB;CACpB,0BAA0B;CAC1B,gBAAgB;CAChB,aAAa;CACb,aAAa;CACb,iBAAiB;AACnB;AAEA,MAAa,WAAW,SAA0B,UAAU;CAC1D,MAAM,EACJ,UACA,UACA,oBACA,0BACA,OACA,iBACA,mBACA,gBACA,aACA,iBACA,KACA,aACA,GAAG,WACD,SAAS,YAAY,cAAc,KAAK;CAE5C,MAAM,MAAM,cAAc;CAC1B,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,qBAAqB,iBAAiB;CAE5C,MAAM,YADe,MAAM,uBAAuB,qBAAqB,SACvC,IAAI;CAGpC,MAAM,YAFO,gBAAgB,eAAe,wBAAwB,YAAA,CAE9C;EACpB;EACA,oBAAoB;EACpB;EACA;EACA;EACA,aAAa;CACf,CAAC;CAED,IAAI,aAAa,GAAG;EAClB,IAAI,gBAAgB,SAAS,oBAAoB,kBAAkB,QAAQ,SAAS;GAClF,IAAI,oBAAoB,gBACtB,OACE,oBAAC,KAAD;IACE,GAAI;IACJ,OAAO;KACL,GAAG,eAAe,OAAO,KAAK;KAC9B,GAAI,CAAC,WAAW,EAAE,SAAS,OAAO,IAAI,CAAC;IACzC;IACK;IAEJ;GACE,CAAA;GAIT,OACE,oBAAC,UAAD;IAAU,MAAM,WAAW,YAAY;cACrC,oBAAC,KAAD;KAAK,GAAI;KAAe;KAAY;KACjC;IACE,CAAA;GACG,CAAA;EAEd;EAEA,OAAO,WACL,oBAAC,KAAD;GAAK,GAAI;GAAe;GAAY;GACjC;EACE,CAAA,IACH;CACN;CAEA,MAAM,WAAW,SAAS,UAAU;CAEpC,IAAI;CACJ,IAAI,gBAAgB,OAClB,UAAU,WAAW,OAAO;MACvB,IAAI,gBAAgB,MACzB,UACE,oBAAoB,iBAClB,WAEA,oBAAC,UAAD;EAAU,MAAM,WAAW,WAAW;EAAY;CAAmB,CAAA;MAGzE,UAAU;CAGZ,OACE,oBAAC,KAAD;EACE,GAAI;EACJ,GAAI,SAAS,iBAAiB;GAC5B,OAAO;IACL,SAAS,YAAY,CAAC,iBAAiB,IAAI;IAC3C,YAAY,iBAAiB,WAAW,SAAS,KAAK,6BAA6B;IACnF,GAAG,eAAe,OAAO,KAAK;IAC9B,GAAI,eAAe,oBAAoB,kBAAkB,WACrD,EAAE,SAAS,OAAO,IAClB,CAAC;GACP;GACA;EACF,CAAC;YAEA;CACE,CAAA;AAET,CAAC;AAED,SAAS,cAAc"}
+{"version":3,"file":"Collapse.mjs","names":[],"sources":["../../../src/components/Collapse/Collapse.tsx"],"sourcesContent":["import { Activity } from 'react';\nimport { useCollapse, useHorizontalCollapse, useReducedMotion } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  Factory,\n  factory,\n  getStyleObject,\n  useMantineEnv,\n  useMantineTheme,\n  useProps,\n} from '../../core';\n\nexport interface CollapseProps extends BoxProps, Omit<React.ComponentProps<'div'>, keyof BoxProps> {\n  /** Collapse orientation @default 'vertical' */\n  orientation?: 'vertical' | 'horizontal';\n\n  /** Expanded state */\n  expanded: boolean;\n\n  /** Called when the transition ends */\n  onTransitionEnd?: () => void;\n\n  /** Called when transition starts */\n  onTransitionStart?: () => void;\n\n  /** Transition duration in ms @default 200 */\n  transitionDuration?: number;\n\n  /** Transition timing function @default ease */\n  transitionTimingFunction?: string;\n\n  /** Determines whether the opacity is animated @default true */\n  animateOpacity?: boolean;\n\n  /** If set, the element is kept in the DOM when collapsed. When `true`, React 19 `Activity` is used to preserve state while collapsed. When `false`, the element is unmounted after the exit animation. @default true */\n  keepMounted?: boolean;\n\n  /** Controls how the element is hidden when `keepMounted` is set:\n   * `'activity'` – hidden with React 19 `Activity` component,\n   * `'display-none'` – hidden with `display: none` styles\n   * @default 'activity'\n   */\n  keepMountedMode?: 'activity' | 'display-none';\n}\n\nexport type CollapseFactory = Factory<{\n  props: CollapseProps;\n  ref: HTMLDivElement;\n}>;\n\nconst defaultProps = {\n  transitionDuration: 200,\n  transitionTimingFunction: 'ease',\n  animateOpacity: true,\n  orientation: 'vertical',\n  keepMounted: true,\n  keepMountedMode: 'activity',\n} satisfies Partial<CollapseProps>;\n\nexport const Collapse = factory<CollapseFactory>((props) => {\n  const {\n    children,\n    expanded,\n    transitionDuration,\n    transitionTimingFunction,\n    style,\n    onTransitionEnd,\n    onTransitionStart,\n    animateOpacity,\n    keepMounted,\n    keepMountedMode,\n    ref,\n    orientation,\n    ...others\n  } = useProps('Collapse', defaultProps, props);\n\n  const env = useMantineEnv();\n  const theme = useMantineTheme();\n  const shouldReduceMotion = useReducedMotion();\n  const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n  const duration = reduceMotion ? 0 : transitionDuration;\n  const hook = orientation === 'horizontal' ? useHorizontalCollapse : useCollapse;\n\n  const collapse = hook({\n    expanded,\n    transitionDuration: duration,\n    transitionTimingFunction,\n    onTransitionEnd,\n    onTransitionStart,\n    keepMounted: false,\n  });\n\n  if (duration === 0) {\n    if (keepMounted === true && (keepMountedMode === 'display-none' || env !== 'test')) {\n      if (keepMountedMode === 'display-none') {\n        return (\n          <Box\n            {...others}\n            style={{\n              ...getStyleObject(style, theme),\n              ...(!expanded ? { display: 'none' } : {}),\n            }}\n            ref={ref}\n          >\n            {children}\n          </Box>\n        );\n      }\n\n      return (\n        <Activity mode={expanded ? 'visible' : 'hidden'}>\n          <Box {...others} style={style} ref={ref}>\n            {children}\n          </Box>\n        </Activity>\n      );\n    }\n\n    return expanded ? (\n      <Box {...others} style={style} ref={ref}>\n        {children}\n      </Box>\n    ) : null;\n  }\n\n  const isExited = collapse.state === 'exited';\n\n  let content: React.ReactNode;\n  if (keepMounted === false) {\n    content = isExited ? null : children;\n  } else if (keepMounted === true) {\n    content =\n      keepMountedMode === 'display-none' ? (\n        children\n      ) : (\n        <Activity mode={isExited ? 'hidden' : 'visible'}>{children}</Activity>\n      );\n  } else {\n    content = children;\n  }\n\n  return (\n    <Box\n      {...others}\n      {...collapse.getCollapseProps({\n        style: {\n          opacity: expanded || !animateOpacity ? 1 : 0,\n          transition: animateOpacity ? `opacity ${duration}ms ${transitionTimingFunction}` : 'none',\n          ...getStyleObject(style, theme),\n          ...(keepMounted && keepMountedMode === 'display-none' && isExited\n            ? { display: 'none' }\n            : {}),\n        },\n        ref,\n      })}\n    >\n      {content}\n    </Box>\n  );\n});\n\nCollapse.displayName = '@mantine/core/Collapse';\n\nexport namespace Collapse {\n  export type Props = CollapseProps;\n  export type Factory = CollapseFactory;\n}\n"],"mappings":";;;;;;;;;;;AAmDA,MAAM,eAAe;CACnB,oBAAoB;CACpB,0BAA0B;CAC1B,gBAAgB;CAChB,aAAa;CACb,aAAa;CACb,iBAAiB;AACnB;AAEA,MAAa,WAAW,SAA0B,UAAU;CAC1D,MAAM,EACJ,UACA,UACA,oBACA,0BACA,OACA,iBACA,mBACA,gBACA,aACA,iBACA,KACA,aACA,GAAG,WACD,SAAS,YAAY,cAAc,KAAK;CAE5C,MAAM,MAAM,cAAc;CAC1B,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,qBAAqB,iBAAiB;CAE5C,MAAM,YADe,MAAM,uBAAuB,qBAAqB,SACvC,IAAI;CAGpC,MAAM,YAFO,gBAAgB,eAAe,wBAAwB,YAAA,CAE9C;EACpB;EACA,oBAAoB;EACpB;EACA;EACA;EACA,aAAa;CACf,CAAC;CAED,IAAI,aAAa,GAAG;EAClB,IAAI,gBAAgB,SAAS,oBAAoB,kBAAkB,QAAQ,SAAS;GAClF,IAAI,oBAAoB,gBACtB,OACE,oBAAC,KAAD;IACE,GAAI;IACJ,OAAO;KACL,GAAG,eAAe,OAAO,KAAK;KAC9B,GAAI,CAAC,WAAW,EAAE,SAAS,OAAO,IAAI,CAAC;IACzC;IACK;IAEJ;GACE,CAAA;GAIT,OACE,oBAAC,UAAD;IAAU,MAAM,WAAW,YAAY;IACrC,UAAA,oBAAC,KAAD;KAAK,GAAI;KAAe;KAAY;KACjC;IACE,CAAA;GACG,CAAA;EAEd;EAEA,OAAO,WACL,oBAAC,KAAD;GAAK,GAAI;GAAe;GAAY;GACjC;EACE,CAAA,IACH;CACN;CAEA,MAAM,WAAW,SAAS,UAAU;CAEpC,IAAI;CACJ,IAAI,gBAAgB,OAClB,UAAU,WAAW,OAAO;MACvB,IAAI,gBAAgB,MACzB,UACE,oBAAoB,iBAClB,WAEA,oBAAC,UAAD;EAAU,MAAM,WAAW,WAAW;EAAY;CAAmB,CAAA;MAGzE,UAAU;CAGZ,OACE,oBAAC,KAAD;EACE,GAAI;EACJ,GAAI,SAAS,iBAAiB;GAC5B,OAAO;IACL,SAAS,YAAY,CAAC,iBAAiB,IAAI;IAC3C,YAAY,iBAAiB,WAAW,SAAS,KAAK,6BAA6B;IACnF,GAAG,eAAe,OAAO,KAAK;IAC9B,GAAI,eAAe,oBAAoB,kBAAkB,WACrD,EAAE,SAAS,OAAO,IAClB,CAAC;GACP;GACA;EACF,CAAC;EAEA,UAAA;CACE,CAAA;AAET,CAAC;AAED,SAAS,cAAc"}

package/esm/components/ColorInput/ColorInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorInput.mjs","names":["classes"],"sources":["../../../src/components/ColorInput/ColorInput.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useDidUpdate, useEyeDropper, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport {\n  __ColorPickerProps,\n  ColorPicker,\n  ColorPickerStylesNames,\n  convertHsvaTo,\n  isColorValid,\n  parseColor,\n} from '../ColorPicker';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant, useInputProps } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Popover, PopoverProps } from '../Popover';\nimport { EyeDropperIcon } from './EyeDropperIcon';\nimport classes from './ColorInput.module.css';\n\nexport type ColorInputStylesNames =\n  | 'dropdown'\n  | 'eyeDropperButton'\n  | 'eyeDropperIcon'\n  | 'colorPreview'\n  | ColorPickerStylesNames\n  | __InputStylesNames;\n\nexport type ColorInputCssVariables = {\n  eyeDropperIcon: '--ci-eye-dropper-icon-size';\n  eyeDropperButton: '--ci-button-size';\n  colorPreview: '--ci-preview-size';\n};\n\nexport interface ColorInputProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    __ColorPickerProps,\n    StylesApiProps<ColorInputFactory>,\n    ElementProps<'input', 'size' | 'onChange' | 'value' | 'defaultValue'> {\n  /** If input is not allowed, the user can only pick value with color picker and swatches */\n  disallowInput?: boolean;\n\n  /** If set, the input value resets to the last known valid value when the input loses focus @default true */\n  fixOnBlur?: boolean;\n\n  /** Props passed down to the `Popover` component */\n  popoverProps?: PopoverProps;\n\n  /** If set, the preview color swatch is displayed in the left section of the input @default true */\n  withPreview?: boolean;\n\n  /** If set, the eye dropper button is displayed in the right section @default true */\n  withEyeDropper?: boolean;\n\n  /** An icon to replace the default eye dropper icon */\n  eyeDropperIcon?: React.ReactNode;\n\n  /** If set, the dropdown is closed when one of the color swatches is clicked @default false */\n  closeOnColorSwatchClick?: boolean;\n\n  /** Props passed down to the eye dropper button */\n  eyeDropperButtonProps?: Record<string, any>;\n}\n\nexport type ColorInputFactory = Factory<{\n  props: ColorInputProps;\n  ref: HTMLInputElement;\n  stylesNames: ColorInputStylesNames;\n  vars: ColorInputCssVariables;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  format: 'hex',\n  fixOnBlur: true,\n  withPreview: true,\n  swatchesPerRow: 7,\n  withPicker: true,\n  popoverProps: { transitionProps: { transition: 'fade', duration: 0 } },\n  withEyeDropper: true,\n  size: 'sm',\n  leftSectionPointerEvents: 'none',\n} satisfies Partial<ColorInputProps>;\n\nconst varsResolver = createVarsResolver<ColorInputFactory>((_, { size }) => ({\n  eyeDropperIcon: {\n    '--ci-eye-dropper-icon-size': getSize(size, 'ci-eye-dropper-icon-size'),\n  },\n\n  eyeDropperButton: {\n    '--ci-button-size': getSize(size, 'ci-button-size'),\n  },\n\n  colorPreview: {\n    '--ci-preview-size': getSize(size, 'ci-preview-size'),\n  },\n}));\n\nexport const ColorInput = factory<ColorInputFactory>((_props) => {\n  const props = useProps(['Input', 'InputWrapper', 'ColorInput'], defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    disallowInput,\n    fixOnBlur,\n    popoverProps,\n    withPreview,\n    withEyeDropper,\n    eyeDropperIcon,\n    closeOnColorSwatchClick,\n    eyeDropperButtonProps,\n    value,\n    defaultValue,\n    onChange,\n    onChangeEnd,\n    onClick,\n    onFocus,\n    onBlur,\n    inputProps,\n    format = 'hex',\n    wrapperProps,\n    readOnly,\n    withPicker,\n    swatches,\n    disabled,\n    leftSection,\n    rightSection,\n    swatchesPerRow,\n    fullWidth,\n    ...others\n  } = useInputProps('ColorInput', defaultProps, _props);\n\n  const getStyles = useStyles<ColorInputFactory>({\n    name: 'ColorInput',\n    props,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    rootSelector: 'wrapper',\n    vars: props.vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ColorInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const [dropdownOpened, setDropdownOpened] = useState(false);\n  const [lastValidValue, setLastValidValue] = useState('');\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '',\n    onChange,\n  });\n\n  const { supported: eyeDropperSupported, open: openEyeDropper } = useEyeDropper();\n\n  const eyeDropper = (\n    <ActionIcon\n      {...eyeDropperButtonProps}\n      {...getStyles('eyeDropperButton', {\n        className: eyeDropperButtonProps?.className,\n        style: eyeDropperButtonProps?.style,\n      })}\n      variant=\"subtle\"\n      color=\"gray\"\n      unstyled={unstyled}\n      onClick={() =>\n        openEyeDropper()\n          .then((payload) => {\n            if (payload?.sRGBHex) {\n              const color = convertHsvaTo(format, parseColor(payload.sRGBHex));\n              setValue(color);\n              onChangeEnd?.(color);\n            }\n          })\n          .catch(() => {})\n      }\n    >\n      {eyeDropperIcon || <EyeDropperIcon {...getStyles('eyeDropperIcon')} />}\n    </ActionIcon>\n  );\n\n  const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setDropdownOpened(true);\n  };\n\n  const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    fixOnBlur && setValue(lastValidValue);\n    onBlur?.(event);\n    setDropdownOpened(false);\n  };\n\n  const handleInputClick = (event: React.MouseEvent<HTMLInputElement>) => {\n    onClick?.(event);\n    setDropdownOpened(true);\n  };\n\n  useEffect(() => {\n    if (isColorValid(_value) || _value.trim() === '') {\n      setLastValidValue(_value);\n    }\n  }, [_value]);\n\n  useDidUpdate(() => {\n    if (isColorValid(_value)) {\n      setValue(convertHsvaTo(format, parseColor(_value)));\n    }\n  }, [format]);\n\n  return (\n    <Input.Wrapper\n      {...wrapperProps}\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      __staticSelector=\"ColorInput\"\n    >\n      <Popover\n        __staticSelector=\"ColorInput\"\n        position=\"bottom-start\"\n        offset={5}\n        opened={dropdownOpened}\n        width={fullWidth ? 'target' : undefined}\n        {...popoverProps}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        withRoles={false}\n        disabled={\n          readOnly || (withPicker === false && (!Array.isArray(swatches) || swatches.length === 0))\n        }\n      >\n        <Popover.Target>\n          <Input<'input'>\n            autoComplete=\"off\"\n            {...others}\n            {...inputProps}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            disabled={disabled}\n            __staticSelector=\"ColorInput\"\n            onFocus={handleInputFocus}\n            onBlur={handleInputBlur}\n            onClick={handleInputClick}\n            spellCheck={false}\n            value={_value}\n            onChange={(event) => {\n              const inputValue = event.currentTarget.value;\n              setValue(inputValue);\n              if (isColorValid(inputValue)) {\n                onChangeEnd?.(convertHsvaTo(format, parseColor(inputValue)));\n              }\n            }}\n            leftSection={\n              leftSection ||\n              (withPreview ? (\n                <ColorSwatch\n                  color={isColorValid(_value) ? _value : '#fff'}\n                  size=\"var(--ci-preview-size)\"\n                  {...getStyles('colorPreview')}\n                />\n              ) : null)\n            }\n            readOnly={disallowInput || readOnly}\n            pointer={disallowInput}\n            unstyled={unstyled}\n            rightSection={\n              rightSection ||\n              (withEyeDropper && !disabled && !readOnly && eyeDropperSupported ? eyeDropper : null)\n            }\n          />\n        </Popover.Target>\n\n        <Popover.Dropdown\n          onMouseDown={(event) => event.preventDefault()}\n          className={classes.dropdown}\n        >\n          <ColorPicker\n            __staticSelector=\"ColorInput\"\n            value={_value}\n            onChange={setValue}\n            onChangeEnd={onChangeEnd}\n            format={format}\n            swatches={swatches}\n            swatchesPerRow={swatchesPerRow}\n            withPicker={withPicker}\n            size={inputProps.size}\n            focusable={false}\n            unstyled={unstyled}\n            styles={resolvedStyles}\n            classNames={resolvedClassNames}\n            onColorSwatchClick={() => closeOnColorSwatchClick && setDropdownOpened(false)}\n            attributes={wrapperProps.attributes}\n            fullWidth={fullWidth}\n          />\n        </Popover.Dropdown>\n      </Popover>\n    </Input.Wrapper>\n  );\n});\n\nColorInput.classes = InputBase.classes;\nColorInput.varsResolver = varsResolver;\nColorInput.displayName = '@mantine/core/ColorInput';\n\nexport namespace ColorInput {\n  export type Props = ColorInputProps;\n  export type StylesNames = ColorInputStylesNames;\n  export type CssVariables = ColorInputCssVariables;\n  export type Factory = ColorInputFactory;\n}\n"],"mappings":"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"}
+{"version":3,"file":"ColorInput.mjs","names":["classes"],"sources":["../../../src/components/ColorInput/ColorInput.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useDidUpdate, useEyeDropper, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport {\n  __ColorPickerProps,\n  ColorPicker,\n  ColorPickerStylesNames,\n  convertHsvaTo,\n  isColorValid,\n  parseColor,\n} from '../ColorPicker';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant, useInputProps } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Popover, PopoverProps } from '../Popover';\nimport { EyeDropperIcon } from './EyeDropperIcon';\nimport classes from './ColorInput.module.css';\n\nexport type ColorInputStylesNames =\n  | 'dropdown'\n  | 'eyeDropperButton'\n  | 'eyeDropperIcon'\n  | 'colorPreview'\n  | ColorPickerStylesNames\n  | __InputStylesNames;\n\nexport type ColorInputCssVariables = {\n  eyeDropperIcon: '--ci-eye-dropper-icon-size';\n  eyeDropperButton: '--ci-button-size';\n  colorPreview: '--ci-preview-size';\n};\n\nexport interface ColorInputProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    __ColorPickerProps,\n    StylesApiProps<ColorInputFactory>,\n    ElementProps<'input', 'size' | 'onChange' | 'value' | 'defaultValue'> {\n  /** If input is not allowed, the user can only pick value with color picker and swatches */\n  disallowInput?: boolean;\n\n  /** If set, the input value resets to the last known valid value when the input loses focus @default true */\n  fixOnBlur?: boolean;\n\n  /** Props passed down to the `Popover` component */\n  popoverProps?: PopoverProps;\n\n  /** If set, the preview color swatch is displayed in the left section of the input @default true */\n  withPreview?: boolean;\n\n  /** If set, the eye dropper button is displayed in the right section @default true */\n  withEyeDropper?: boolean;\n\n  /** An icon to replace the default eye dropper icon */\n  eyeDropperIcon?: React.ReactNode;\n\n  /** If set, the dropdown is closed when one of the color swatches is clicked @default false */\n  closeOnColorSwatchClick?: boolean;\n\n  /** Props passed down to the eye dropper button */\n  eyeDropperButtonProps?: Record<string, any>;\n}\n\nexport type ColorInputFactory = Factory<{\n  props: ColorInputProps;\n  ref: HTMLInputElement;\n  stylesNames: ColorInputStylesNames;\n  vars: ColorInputCssVariables;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  format: 'hex',\n  fixOnBlur: true,\n  withPreview: true,\n  swatchesPerRow: 7,\n  withPicker: true,\n  popoverProps: { transitionProps: { transition: 'fade', duration: 0 } },\n  withEyeDropper: true,\n  size: 'sm',\n  leftSectionPointerEvents: 'none',\n} satisfies Partial<ColorInputProps>;\n\nconst varsResolver = createVarsResolver<ColorInputFactory>((_, { size }) => ({\n  eyeDropperIcon: {\n    '--ci-eye-dropper-icon-size': getSize(size, 'ci-eye-dropper-icon-size'),\n  },\n\n  eyeDropperButton: {\n    '--ci-button-size': getSize(size, 'ci-button-size'),\n  },\n\n  colorPreview: {\n    '--ci-preview-size': getSize(size, 'ci-preview-size'),\n  },\n}));\n\nexport const ColorInput = factory<ColorInputFactory>((_props) => {\n  const props = useProps(['Input', 'InputWrapper', 'ColorInput'], defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    disallowInput,\n    fixOnBlur,\n    popoverProps,\n    withPreview,\n    withEyeDropper,\n    eyeDropperIcon,\n    closeOnColorSwatchClick,\n    eyeDropperButtonProps,\n    value,\n    defaultValue,\n    onChange,\n    onChangeEnd,\n    onClick,\n    onFocus,\n    onBlur,\n    inputProps,\n    format = 'hex',\n    wrapperProps,\n    readOnly,\n    withPicker,\n    swatches,\n    disabled,\n    leftSection,\n    rightSection,\n    swatchesPerRow,\n    fullWidth,\n    ...others\n  } = useInputProps('ColorInput', defaultProps, _props);\n\n  const getStyles = useStyles<ColorInputFactory>({\n    name: 'ColorInput',\n    props,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    rootSelector: 'wrapper',\n    vars: props.vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ColorInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const [dropdownOpened, setDropdownOpened] = useState(false);\n  const [lastValidValue, setLastValidValue] = useState('');\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '',\n    onChange,\n  });\n\n  const { supported: eyeDropperSupported, open: openEyeDropper } = useEyeDropper();\n\n  const eyeDropper = (\n    <ActionIcon\n      {...eyeDropperButtonProps}\n      {...getStyles('eyeDropperButton', {\n        className: eyeDropperButtonProps?.className,\n        style: eyeDropperButtonProps?.style,\n      })}\n      variant=\"subtle\"\n      color=\"gray\"\n      unstyled={unstyled}\n      onClick={() =>\n        openEyeDropper()\n          .then((payload) => {\n            if (payload?.sRGBHex) {\n              const color = convertHsvaTo(format, parseColor(payload.sRGBHex));\n              setValue(color);\n              onChangeEnd?.(color);\n            }\n          })\n          .catch(() => {})\n      }\n    >\n      {eyeDropperIcon || <EyeDropperIcon {...getStyles('eyeDropperIcon')} />}\n    </ActionIcon>\n  );\n\n  const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setDropdownOpened(true);\n  };\n\n  const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    fixOnBlur && setValue(lastValidValue);\n    onBlur?.(event);\n    setDropdownOpened(false);\n  };\n\n  const handleInputClick = (event: React.MouseEvent<HTMLInputElement>) => {\n    onClick?.(event);\n    setDropdownOpened(true);\n  };\n\n  useEffect(() => {\n    if (isColorValid(_value) || _value.trim() === '') {\n      setLastValidValue(_value);\n    }\n  }, [_value]);\n\n  useDidUpdate(() => {\n    if (isColorValid(_value)) {\n      setValue(convertHsvaTo(format, parseColor(_value)));\n    }\n  }, [format]);\n\n  return (\n    <Input.Wrapper\n      {...wrapperProps}\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      __staticSelector=\"ColorInput\"\n    >\n      <Popover\n        __staticSelector=\"ColorInput\"\n        position=\"bottom-start\"\n        offset={5}\n        opened={dropdownOpened}\n        width={fullWidth ? 'target' : undefined}\n        {...popoverProps}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        withRoles={false}\n        disabled={\n          readOnly || (withPicker === false && (!Array.isArray(swatches) || swatches.length === 0))\n        }\n      >\n        <Popover.Target>\n          <Input<'input'>\n            autoComplete=\"off\"\n            {...others}\n            {...inputProps}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            disabled={disabled}\n            __staticSelector=\"ColorInput\"\n            onFocus={handleInputFocus}\n            onBlur={handleInputBlur}\n            onClick={handleInputClick}\n            spellCheck={false}\n            value={_value}\n            onChange={(event) => {\n              const inputValue = event.currentTarget.value;\n              setValue(inputValue);\n              if (isColorValid(inputValue)) {\n                onChangeEnd?.(convertHsvaTo(format, parseColor(inputValue)));\n              }\n            }}\n            leftSection={\n              leftSection ||\n              (withPreview ? (\n                <ColorSwatch\n                  color={isColorValid(_value) ? _value : '#fff'}\n                  size=\"var(--ci-preview-size)\"\n                  {...getStyles('colorPreview')}\n                />\n              ) : null)\n            }\n            readOnly={disallowInput || readOnly}\n            pointer={disallowInput}\n            unstyled={unstyled}\n            rightSection={\n              rightSection ||\n              (withEyeDropper && !disabled && !readOnly && eyeDropperSupported ? eyeDropper : null)\n            }\n          />\n        </Popover.Target>\n\n        <Popover.Dropdown\n          onMouseDown={(event) => event.preventDefault()}\n          className={classes.dropdown}\n        >\n          <ColorPicker\n            __staticSelector=\"ColorInput\"\n            value={_value}\n            onChange={setValue}\n            onChangeEnd={onChangeEnd}\n            format={format}\n            swatches={swatches}\n            swatchesPerRow={swatchesPerRow}\n            withPicker={withPicker}\n            size={inputProps.size}\n            focusable={false}\n            unstyled={unstyled}\n            styles={resolvedStyles}\n            classNames={resolvedClassNames}\n            onColorSwatchClick={() => closeOnColorSwatchClick && setDropdownOpened(false)}\n            attributes={wrapperProps.attributes}\n            fullWidth={fullWidth}\n          />\n        </Popover.Dropdown>\n      </Popover>\n    </Input.Wrapper>\n  );\n});\n\nColorInput.classes = InputBase.classes;\nColorInput.varsResolver = varsResolver;\nColorInput.displayName = '@mantine/core/ColorInput';\n\nexport namespace ColorInput {\n  export type Props = ColorInputProps;\n  export type StylesNames = ColorInputStylesNames;\n  export type CssVariables = ColorInputCssVariables;\n  export type Factory = ColorInputFactory;\n}\n"],"mappings":"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"}

package/esm/components/ColorInput/EyeDropperIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EyeDropperIcon.mjs","names":[],"sources":["../../../src/components/ColorInput/EyeDropperIcon.tsx"],"sourcesContent":["export function EyeDropperIcon({ style, ...others }: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      style={{\n        width: 'var(--ci-eye-dropper-icon-size)',\n        height: 'var(--ci-eye-dropper-icon-size)',\n        ...style,\n      }}\n      viewBox=\"0 0 24 24\"\n      strokeWidth=\"1.5\"\n      stroke=\"currentColor\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...others}\n    >\n      <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path d=\"M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\" />\n      <path d=\"M12 3l0 4\" />\n      <path d=\"M12 21l0 -3\" />\n      <path d=\"M3 12l4 0\" />\n      <path d=\"M21 12l-3 0\" />\n      <path d=\"M12 12l0 .01\" />\n    </svg>\n  );\n}\n"],"mappings":";;;AAAA,SAAgB,eAAe,EAAE,OAAO,GAAG,UAAuC;CAChF,OACE,qBAAC,OAAD;EACE,OAAM;EACN,OAAO;GACL,OAAO;GACP,QAAQ;GACR,GAAG;EACL;EACA,SAAQ;EACR,aAAY;EACZ,QAAO;EACP,MAAK;EACL,eAAc;EACd,gBAAe;EACf,GAAI;YAbN;GAeE,oBAAC,QAAD;IAAM,QAAO;IAAO,GAAE;IAAgB,MAAK;GAAQ,CAAA;GACnD,oBAAC,QAAD,EAAM,GAAE,6CAA8C,CAAA;GACtD,oBAAC,QAAD,EAAM,GAAE,YAAa,CAAA;GACrB,oBAAC,QAAD,EAAM,GAAE,cAAe,CAAA;GACvB,oBAAC,QAAD,EAAM,GAAE,YAAa,CAAA;GACrB,oBAAC,QAAD,EAAM,GAAE,cAAe,CAAA;GACvB,oBAAC,QAAD,EAAM,GAAE,eAAgB,CAAA;EACrB;;AAET"}
+{"version":3,"file":"EyeDropperIcon.mjs","names":[],"sources":["../../../src/components/ColorInput/EyeDropperIcon.tsx"],"sourcesContent":["export function EyeDropperIcon({ style, ...others }: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      style={{\n        width: 'var(--ci-eye-dropper-icon-size)',\n        height: 'var(--ci-eye-dropper-icon-size)',\n        ...style,\n      }}\n      viewBox=\"0 0 24 24\"\n      strokeWidth=\"1.5\"\n      stroke=\"currentColor\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...others}\n    >\n      <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path d=\"M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\" />\n      <path d=\"M12 3l0 4\" />\n      <path d=\"M12 21l0 -3\" />\n      <path d=\"M3 12l4 0\" />\n      <path d=\"M21 12l-3 0\" />\n      <path d=\"M12 12l0 .01\" />\n    </svg>\n  );\n}\n"],"mappings":";;;AAAA,SAAgB,eAAe,EAAE,OAAO,GAAG,UAAuC;CAChF,OACE,qBAAC,OAAD;EACE,OAAM;EACN,OAAO;GACL,OAAO;GACP,QAAQ;GACR,GAAG;EACL;EACA,SAAQ;EACR,aAAY;EACZ,QAAO;EACP,MAAK;EACL,eAAc;EACd,gBAAe;EACf,GAAI;EAbN,UAAA;GAeE,oBAAC,QAAD;IAAM,QAAO;IAAO,GAAE;IAAgB,MAAK;GAAQ,CAAA;GACnD,oBAAC,QAAD,EAAM,GAAE,6CAA8C,CAAA;GACtD,oBAAC,QAAD,EAAM,GAAE,YAAa,CAAA;GACrB,oBAAC,QAAD,EAAM,GAAE,cAAe,CAAA;GACvB,oBAAC,QAAD,EAAM,GAAE,YAAa,CAAA;GACrB,oBAAC,QAAD,EAAM,GAAE,cAAe,CAAA;GACvB,oBAAC,QAAD,EAAM,GAAE,eAAgB,CAAA;EACrB;;AAET"}

package/esm/components/ColorPicker/ColorPicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.mjs","names":["classes"],"sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { useDidUpdate, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  getSpacing,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { AlphaSlider } from './AlphaSlider/AlphaSlider';\nimport { ColorPickerContext } from './ColorPicker.context';\nimport { ColorFormat, HsvaColor } from './ColorPicker.types';\nimport { convertHsvaTo, isColorValid, parseColor } from './converters';\nimport { HueSlider } from './HueSlider/HueSlider';\nimport { Saturation } from './Saturation/Saturation';\nimport { Swatches } from './Swatches/Swatches';\nimport classes from './ColorPicker.module.css';\n\nexport type ColorPickerStylesNames =\n  | 'wrapper'\n  | 'preview'\n  | 'body'\n  | 'sliders'\n  | 'slider'\n  | 'sliderOverlay'\n  | 'thumb'\n  | 'saturation'\n  | 'thumb'\n  | 'saturationOverlay'\n  | 'thumb'\n  | 'swatches'\n  | 'swatch';\n\nexport type ColorPickerCssVariables = {\n  wrapper:\n    | '--cp-preview-size'\n    | '--cp-width'\n    | '--cp-body-spacing'\n    | '--cp-swatch-size'\n    | '--cp-thumb-size'\n    | '--cp-saturation-height';\n};\n\nexport interface __ColorPickerProps {\n  /** Controlled component value */\n  value?: string;\n\n  /** Uncontrolled component default value */\n  defaultValue?: string;\n\n  /** Called when value changes */\n  onChange?: (value: string) => void;\n\n  /** Called when the user stops dragging one of the sliders or changes the value with keyboard */\n  onChangeEnd?: (value: string) => void;\n\n  /** Color format. `hexa`, `rgba`, `hsla` values render alpha channel slider @default 'hex' */\n  format?: ColorFormat;\n\n  /** If `false`, the component displays only swatches @default true */\n  withPicker?: boolean;\n\n  /** A list of colors used to display swatches list below the color picker */\n  swatches?: string[];\n\n  /** Number of swatches per row @default 7 */\n  swatchesPerRow?: number;\n\n  /** Component size @default 'md' */\n  size?: MantineSize | (string & {});\n\n  /** If set, the component takes 100% width of its container @default false */\n  fullWidth?: boolean;\n}\n\nexport interface ColorPickerProps\n  extends\n    BoxProps,\n    __ColorPickerProps,\n    StylesApiProps<ColorPickerFactory>,\n    ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {\n  __staticSelector?: string;\n\n  /** If set, interactive elements (sliders thumbs and swatches) are focusable with keyboard @default true */\n  focusable?: boolean;\n\n  /** Saturation slider `aria-label` */\n  saturationLabel?: string;\n\n  /** Hue slider `aria-label` */\n  hueLabel?: string;\n\n  /** Alpha slider `aria-label` */\n  alphaLabel?: string;\n\n  /** Called when one of the color swatches is clicked */\n  onColorSwatchClick?: (color: string) => void;\n\n  /** Hidden input `name` attribute, if not set, the input will not be rendered */\n  name?: string;\n\n  /** Props spread to the hidden input */\n  hiddenInputProps?: React.ComponentProps<'input'> & DataAttributes;\n}\n\nexport type ColorPickerFactory = Factory<{\n  props: ColorPickerProps;\n  ref: HTMLDivElement;\n  stylesNames: ColorPickerStylesNames;\n  vars: ColorPickerCssVariables;\n}>;\n\nconst defaultProps = {\n  swatchesPerRow: 7,\n  withPicker: true,\n  focusable: true,\n  size: 'md',\n  __staticSelector: 'ColorPicker',\n} satisfies Partial<ColorPickerProps>;\n\nconst varsResolver = createVarsResolver<ColorPickerFactory>((_, { size, swatchesPerRow }) => ({\n  wrapper: {\n    '--cp-preview-size': getSize(size, 'cp-preview-size'),\n    '--cp-width': getSize(size, 'cp-width'),\n    '--cp-body-spacing': getSpacing(size),\n    '--cp-swatch-size': `${100 / swatchesPerRow!}%`,\n    '--cp-thumb-size': getSize(size, 'cp-thumb-size'),\n    '--cp-saturation-height': getSize(size, 'cp-saturation-height'),\n  },\n}));\n\nexport const ColorPicker = factory<ColorPickerFactory>((_props) => {\n  const props = useProps('ColorPicker', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    format = 'hex',\n    value,\n    defaultValue,\n    onChange,\n    onChangeEnd,\n    withPicker,\n    size,\n    saturationLabel,\n    hueLabel,\n    alphaLabel,\n    focusable,\n    swatches,\n    swatchesPerRow,\n    fullWidth,\n    onColorSwatchClick,\n    __staticSelector,\n    mod,\n    attributes,\n    name,\n    hiddenInputProps,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ColorPickerFactory>({\n    name: __staticSelector,\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'wrapper',\n    vars,\n    varsResolver,\n  });\n\n  const formatRef = useRef(format || 'hex');\n  const valueRef = useRef<string>('');\n  const scrubTimeoutRef = useRef<number>(-1);\n  const isScrubbingRef = useRef(false);\n  const withAlpha = format === 'hexa' || format === 'rgba' || format === 'hsla';\n\n  const [_value, setValue, controlled] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '#FFFFFF',\n    onChange,\n  });\n\n  const [parsed, setParsed] = useState<HsvaColor>(parseColor(_value));\n\n  const startScrubbing = () => {\n    window.clearTimeout(scrubTimeoutRef.current);\n    isScrubbingRef.current = true;\n  };\n\n  const stopScrubbing = () => {\n    window.clearTimeout(scrubTimeoutRef.current);\n    scrubTimeoutRef.current = window.setTimeout(() => {\n      isScrubbingRef.current = false;\n    }, 200);\n  };\n\n  const handleChange = (color: Partial<HsvaColor>) => {\n    setParsed((current) => {\n      const next = { ...current, ...color };\n      valueRef.current = convertHsvaTo(formatRef.current, next);\n      return next;\n    });\n\n    setValue(valueRef.current);\n  };\n\n  useDidUpdate(() => {\n    if (typeof value === 'string' && isColorValid(value) && !isScrubbingRef.current) {\n      setParsed(parseColor(value));\n    }\n  }, [value]);\n\n  useDidUpdate(() => {\n    formatRef.current = format || 'hex';\n    setValue(convertHsvaTo(formatRef.current, parsed));\n  }, [format]);\n\n  return (\n    <ColorPickerContext value={{ getStyles, unstyled }}>\n      <Box\n        {...getStyles('wrapper')}\n        size={size}\n        mod={[{ 'full-width': fullWidth }, mod]}\n        {...others}\n      >\n        {name && <input type=\"hidden\" name={name} value={_value} {...hiddenInputProps} />}\n\n        {withPicker && (\n          <>\n            <Saturation\n              value={parsed}\n              onChange={handleChange}\n              onChangeEnd={({ s, v }) =>\n                onChangeEnd?.(convertHsvaTo(formatRef.current, { ...parsed, s: s!, v: v! }))\n              }\n              color={_value}\n              size={size}\n              focusable={focusable}\n              saturationLabel={saturationLabel}\n              onScrubStart={startScrubbing}\n              onScrubEnd={stopScrubbing}\n            />\n\n            <div {...getStyles('body')}>\n              <div {...getStyles('sliders')}>\n                <HueSlider\n                  value={parsed.h}\n                  onChange={(h) => handleChange({ h })}\n                  onChangeEnd={(h) =>\n                    onChangeEnd?.(convertHsvaTo(formatRef.current, { ...parsed, h }))\n                  }\n                  size={size}\n                  focusable={focusable}\n                  aria-label={hueLabel}\n                  onScrubStart={startScrubbing}\n                  onScrubEnd={stopScrubbing}\n                />\n\n                {withAlpha && (\n                  <AlphaSlider\n                    value={parsed.a}\n                    onChange={(a) => handleChange({ a })}\n                    onChangeEnd={(a) => {\n                      onChangeEnd?.(convertHsvaTo(formatRef.current, { ...parsed, a }));\n                    }}\n                    size={size}\n                    color={convertHsvaTo('hex', parsed)}\n                    focusable={focusable}\n                    aria-label={alphaLabel}\n                    onScrubStart={startScrubbing}\n                    onScrubEnd={stopScrubbing}\n                  />\n                )}\n              </div>\n\n              {withAlpha && (\n                <ColorSwatch\n                  color={_value}\n                  radius=\"sm\"\n                  size=\"var(--cp-preview-size)\"\n                  {...getStyles('preview')}\n                />\n              )}\n            </div>\n          </>\n        )}\n\n        {Array.isArray(swatches) && (\n          <Swatches\n            data={swatches}\n            swatchesPerRow={swatchesPerRow}\n            focusable={focusable}\n            setValue={setValue}\n            value={_value}\n            onChangeEnd={(color) => {\n              const convertedColor = convertHsvaTo(format, parseColor(color));\n              onColorSwatchClick?.(convertedColor);\n              onChangeEnd?.(convertedColor);\n              if (!controlled) {\n                setParsed(parseColor(color));\n              }\n            }}\n          />\n        )}\n      </Box>\n    </ColorPickerContext>\n  );\n});\n\nColorPicker.classes = classes;\nColorPicker.varsResolver = varsResolver;\nColorPicker.displayName = '@mantine/core/ColorPicker';\n\nexport namespace ColorPicker {\n  export type Props = ColorPickerProps;\n  export type CssVariables = ColorPickerCssVariables;\n  export type Factory = ColorPickerFactory;\n  export type StylesNames = ColorPickerStylesNames;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAyHA,MAAM,eAAe;CACnB,gBAAgB;CAChB,YAAY;CACZ,WAAW;CACX,MAAM;CACN,kBAAkB;AACpB;AAEA,MAAM,eAAe,oBAAwC,GAAG,EAAE,MAAM,sBAAsB,EAC5F,SAAS;CACP,qBAAqB,QAAQ,MAAM,iBAAiB;CACpD,cAAc,QAAQ,MAAM,UAAU;CACtC,qBAAqB,WAAW,IAAI;CACpC,oBAAoB,GAAG,MAAM,eAAgB;CAC7C,mBAAmB,QAAQ,MAAM,eAAe;CAChD,0BAA0B,QAAQ,MAAM,sBAAsB;AAChE,EACF,EAAE;AAEF,MAAa,cAAc,SAA6B,WAAW;CACjE,MAAM,QAAQ,SAAS,eAAe,cAAc,MAAM;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,SAAS,OACT,OACA,cACA,UACA,aACA,YACA,MACA,iBACA,UACA,YACA,WACA,UACA,gBACA,WACA,oBACA,kBACA,KACA,YACA,MACA,kBACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA8B;EAC9C,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;CACF,CAAC;CAED,MAAM,YAAY,OAAO,UAAU,KAAK;CACxC,MAAM,WAAW,OAAe,EAAE;CAClC,MAAM,kBAAkB,OAAe,EAAE;CACzC,MAAM,iBAAiB,OAAO,KAAK;CACnC,MAAM,YAAY,WAAW,UAAU,WAAW,UAAU,WAAW;CAEvE,MAAM,CAAC,QAAQ,UAAU,cAAc,gBAAgB;EACrD;EACA;EACA,YAAY;EACZ;CACF,CAAC;CAED,MAAM,CAAC,QAAQ,aAAa,SAAoB,WAAW,MAAM,CAAC;CAElE,MAAM,uBAAuB;EAC3B,OAAO,aAAa,gBAAgB,OAAO;EAC3C,eAAe,UAAU;CAC3B;CAEA,MAAM,sBAAsB;EAC1B,OAAO,aAAa,gBAAgB,OAAO;EAC3C,gBAAgB,UAAU,OAAO,iBAAiB;GAChD,eAAe,UAAU;EAC3B,GAAG,GAAG;CACR;CAEA,MAAM,gBAAgB,UAA8B;EAClD,WAAW,YAAY;GACrB,MAAM,OAAO;IAAE,GAAG;IAAS,GAAG;GAAM;GACpC,SAAS,UAAU,cAAc,UAAU,SAAS,IAAI;GACxD,OAAO;EACT,CAAC;EAED,SAAS,SAAS,OAAO;CAC3B;CAEA,mBAAmB;EACjB,IAAI,OAAO,UAAU,YAAY,aAAa,KAAK,KAAK,CAAC,eAAe,SACtE,UAAU,WAAW,KAAK,CAAC;CAE/B,GAAG,CAAC,KAAK,CAAC;CAEV,mBAAmB;EACjB,UAAU,UAAU,UAAU;EAC9B,SAAS,cAAc,UAAU,SAAS,MAAM,CAAC;CACnD,GAAG,CAAC,MAAM,CAAC;CAEX,OACE,oBAAC,oBAAD;EAAoB,OAAO;GAAE;GAAW;EAAS;YAC/C,qBAAC,KAAD;GACE,GAAI,UAAU,SAAS;GACjB;GACN,KAAK,CAAC,EAAE,cAAc,UAAU,GAAG,GAAG;GACtC,GAAI;aAJN;IAMG,QAAQ,oBAAC,SAAD;KAAO,MAAK;KAAe;KAAM,OAAO;KAAQ,GAAI;IAAmB,CAAA;IAE/E,cACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,YAAD;KACE,OAAO;KACP,UAAU;KACV,cAAc,EAAE,GAAG,QACjB,cAAc,cAAc,UAAU,SAAS;MAAE,GAAG;MAAW;MAAO;KAAG,CAAC,CAAC;KAE7E,OAAO;KACD;KACK;KACM;KACjB,cAAc;KACd,YAAY;IACb,CAAA,GAED,qBAAC,OAAD;KAAK,GAAI,UAAU,MAAM;eAAzB,CACE,qBAAC,OAAD;MAAK,GAAI,UAAU,SAAS;gBAA5B,CACE,oBAAC,WAAD;OACE,OAAO,OAAO;OACd,WAAW,MAAM,aAAa,EAAE,EAAE,CAAC;OACnC,cAAc,MACZ,cAAc,cAAc,UAAU,SAAS;QAAE,GAAG;QAAQ;OAAE,CAAC,CAAC;OAE5D;OACK;OACX,cAAY;OACZ,cAAc;OACd,YAAY;MACb,CAAA,GAEA,aACC,oBAAC,aAAD;OACE,OAAO,OAAO;OACd,WAAW,MAAM,aAAa,EAAE,EAAE,CAAC;OACnC,cAAc,MAAM;QAClB,cAAc,cAAc,UAAU,SAAS;SAAE,GAAG;SAAQ;QAAE,CAAC,CAAC;OAClE;OACM;OACN,OAAO,cAAc,OAAO,MAAM;OACvB;OACX,cAAY;OACZ,cAAc;OACd,YAAY;MACb,CAAA,CAEA;SAEJ,aACC,oBAAC,aAAD;MACE,OAAO;MACP,QAAO;MACP,MAAK;MACL,GAAI,UAAU,SAAS;KACxB,CAAA,CAEA;MACL,EAAA,CAAA;IAGH,MAAM,QAAQ,QAAQ,KACrB,oBAAC,UAAD;KACE,MAAM;KACU;KACL;KACD;KACV,OAAO;KACP,cAAc,UAAU;MACtB,MAAM,iBAAiB,cAAc,QAAQ,WAAW,KAAK,CAAC;MAC9D,qBAAqB,cAAc;MACnC,cAAc,cAAc;MAC5B,IAAI,CAAC,YACH,UAAU,WAAW,KAAK,CAAC;KAE/B;IACD,CAAA;GAEA;;CACa,CAAA;AAExB,CAAC;AAED,YAAY,UAAUA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}
+{"version":3,"file":"ColorPicker.mjs","names":["classes"],"sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { useDidUpdate, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  getSpacing,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { AlphaSlider } from './AlphaSlider/AlphaSlider';\nimport { ColorPickerContext } from './ColorPicker.context';\nimport { ColorFormat, HsvaColor } from './ColorPicker.types';\nimport { convertHsvaTo, isColorValid, parseColor } from './converters';\nimport { HueSlider } from './HueSlider/HueSlider';\nimport { Saturation } from './Saturation/Saturation';\nimport { Swatches } from './Swatches/Swatches';\nimport classes from './ColorPicker.module.css';\n\nexport type ColorPickerStylesNames =\n  | 'wrapper'\n  | 'preview'\n  | 'body'\n  | 'sliders'\n  | 'slider'\n  | 'sliderOverlay'\n  | 'thumb'\n  | 'saturation'\n  | 'thumb'\n  | 'saturationOverlay'\n  | 'thumb'\n  | 'swatches'\n  | 'swatch';\n\nexport type ColorPickerCssVariables = {\n  wrapper:\n    | '--cp-preview-size'\n    | '--cp-width'\n    | '--cp-body-spacing'\n    | '--cp-swatch-size'\n    | '--cp-thumb-size'\n    | '--cp-saturation-height';\n};\n\nexport interface __ColorPickerProps {\n  /** Controlled component value */\n  value?: string;\n\n  /** Uncontrolled component default value */\n  defaultValue?: string;\n\n  /** Called when value changes */\n  onChange?: (value: string) => void;\n\n  /** Called when the user stops dragging one of the sliders or changes the value with keyboard */\n  onChangeEnd?: (value: string) => void;\n\n  /** Color format. `hexa`, `rgba`, `hsla` values render alpha channel slider @default 'hex' */\n  format?: ColorFormat;\n\n  /** If `false`, the component displays only swatches @default true */\n  withPicker?: boolean;\n\n  /** A list of colors used to display swatches list below the color picker */\n  swatches?: string[];\n\n  /** Number of swatches per row @default 7 */\n  swatchesPerRow?: number;\n\n  /** Component size @default 'md' */\n  size?: MantineSize | (string & {});\n\n  /** If set, the component takes 100% width of its container @default false */\n  fullWidth?: boolean;\n}\n\nexport interface ColorPickerProps\n  extends\n    BoxProps,\n    __ColorPickerProps,\n    StylesApiProps<ColorPickerFactory>,\n    ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {\n  __staticSelector?: string;\n\n  /** If set, interactive elements (sliders thumbs and swatches) are focusable with keyboard @default true */\n  focusable?: boolean;\n\n  /** Saturation slider `aria-label` */\n  saturationLabel?: string;\n\n  /** Hue slider `aria-label` */\n  hueLabel?: string;\n\n  /** Alpha slider `aria-label` */\n  alphaLabel?: string;\n\n  /** Called when one of the color swatches is clicked */\n  onColorSwatchClick?: (color: string) => void;\n\n  /** Hidden input `name` attribute, if not set, the input will not be rendered */\n  name?: string;\n\n  /** Props spread to the hidden input */\n  hiddenInputProps?: React.ComponentProps<'input'> & DataAttributes;\n}\n\nexport type ColorPickerFactory = Factory<{\n  props: ColorPickerProps;\n  ref: HTMLDivElement;\n  stylesNames: ColorPickerStylesNames;\n  vars: ColorPickerCssVariables;\n}>;\n\nconst defaultProps = {\n  swatchesPerRow: 7,\n  withPicker: true,\n  focusable: true,\n  size: 'md',\n  __staticSelector: 'ColorPicker',\n} satisfies Partial<ColorPickerProps>;\n\nconst varsResolver = createVarsResolver<ColorPickerFactory>((_, { size, swatchesPerRow }) => ({\n  wrapper: {\n    '--cp-preview-size': getSize(size, 'cp-preview-size'),\n    '--cp-width': getSize(size, 'cp-width'),\n    '--cp-body-spacing': getSpacing(size),\n    '--cp-swatch-size': `${100 / swatchesPerRow!}%`,\n    '--cp-thumb-size': getSize(size, 'cp-thumb-size'),\n    '--cp-saturation-height': getSize(size, 'cp-saturation-height'),\n  },\n}));\n\nexport const ColorPicker = factory<ColorPickerFactory>((_props) => {\n  const props = useProps('ColorPicker', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    format = 'hex',\n    value,\n    defaultValue,\n    onChange,\n    onChangeEnd,\n    withPicker,\n    size,\n    saturationLabel,\n    hueLabel,\n    alphaLabel,\n    focusable,\n    swatches,\n    swatchesPerRow,\n    fullWidth,\n    onColorSwatchClick,\n    __staticSelector,\n    mod,\n    attributes,\n    name,\n    hiddenInputProps,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ColorPickerFactory>({\n    name: __staticSelector,\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'wrapper',\n    vars,\n    varsResolver,\n  });\n\n  const formatRef = useRef(format || 'hex');\n  const valueRef = useRef<string>('');\n  const scrubTimeoutRef = useRef<number>(-1);\n  const isScrubbingRef = useRef(false);\n  const withAlpha = format === 'hexa' || format === 'rgba' || format === 'hsla';\n\n  const [_value, setValue, controlled] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '#FFFFFF',\n    onChange,\n  });\n\n  const [parsed, setParsed] = useState<HsvaColor>(parseColor(_value));\n\n  const startScrubbing = () => {\n    window.clearTimeout(scrubTimeoutRef.current);\n    isScrubbingRef.current = true;\n  };\n\n  const stopScrubbing = () => {\n    window.clearTimeout(scrubTimeoutRef.current);\n    scrubTimeoutRef.current = window.setTimeout(() => {\n      isScrubbingRef.current = false;\n    }, 200);\n  };\n\n  const handleChange = (color: Partial<HsvaColor>) => {\n    setParsed((current) => {\n      const next = { ...current, ...color };\n      valueRef.current = convertHsvaTo(formatRef.current, next);\n      return next;\n    });\n\n    setValue(valueRef.current);\n  };\n\n  useDidUpdate(() => {\n    if (typeof value === 'string' && isColorValid(value) && !isScrubbingRef.current) {\n      setParsed(parseColor(value));\n    }\n  }, [value]);\n\n  useDidUpdate(() => {\n    formatRef.current = format || 'hex';\n    setValue(convertHsvaTo(formatRef.current, parsed));\n  }, [format]);\n\n  return (\n    <ColorPickerContext value={{ getStyles, unstyled }}>\n      <Box\n        {...getStyles('wrapper')}\n        size={size}\n        mod={[{ 'full-width': fullWidth }, mod]}\n        {...others}\n      >\n        {name && <input type=\"hidden\" name={name} value={_value} {...hiddenInputProps} />}\n\n        {withPicker && (\n          <>\n            <Saturation\n              value={parsed}\n              onChange={handleChange}\n              onChangeEnd={({ s, v }) =>\n                onChangeEnd?.(convertHsvaTo(formatRef.current, { ...parsed, s: s!, v: v! }))\n              }\n              color={_value}\n              size={size}\n              focusable={focusable}\n              saturationLabel={saturationLabel}\n              onScrubStart={startScrubbing}\n              onScrubEnd={stopScrubbing}\n            />\n\n            <div {...getStyles('body')}>\n              <div {...getStyles('sliders')}>\n                <HueSlider\n                  value={parsed.h}\n                  onChange={(h) => handleChange({ h })}\n                  onChangeEnd={(h) =>\n                    onChangeEnd?.(convertHsvaTo(formatRef.current, { ...parsed, h }))\n                  }\n                  size={size}\n                  focusable={focusable}\n                  aria-label={hueLabel}\n                  onScrubStart={startScrubbing}\n                  onScrubEnd={stopScrubbing}\n                />\n\n                {withAlpha && (\n                  <AlphaSlider\n                    value={parsed.a}\n                    onChange={(a) => handleChange({ a })}\n                    onChangeEnd={(a) => {\n                      onChangeEnd?.(convertHsvaTo(formatRef.current, { ...parsed, a }));\n                    }}\n                    size={size}\n                    color={convertHsvaTo('hex', parsed)}\n                    focusable={focusable}\n                    aria-label={alphaLabel}\n                    onScrubStart={startScrubbing}\n                    onScrubEnd={stopScrubbing}\n                  />\n                )}\n              </div>\n\n              {withAlpha && (\n                <ColorSwatch\n                  color={_value}\n                  radius=\"sm\"\n                  size=\"var(--cp-preview-size)\"\n                  {...getStyles('preview')}\n                />\n              )}\n            </div>\n          </>\n        )}\n\n        {Array.isArray(swatches) && (\n          <Swatches\n            data={swatches}\n            swatchesPerRow={swatchesPerRow}\n            focusable={focusable}\n            setValue={setValue}\n            value={_value}\n            onChangeEnd={(color) => {\n              const convertedColor = convertHsvaTo(format, parseColor(color));\n              onColorSwatchClick?.(convertedColor);\n              onChangeEnd?.(convertedColor);\n              if (!controlled) {\n                setParsed(parseColor(color));\n              }\n            }}\n          />\n        )}\n      </Box>\n    </ColorPickerContext>\n  );\n});\n\nColorPicker.classes = classes;\nColorPicker.varsResolver = varsResolver;\nColorPicker.displayName = '@mantine/core/ColorPicker';\n\nexport namespace ColorPicker {\n  export type Props = ColorPickerProps;\n  export type CssVariables = ColorPickerCssVariables;\n  export type Factory = ColorPickerFactory;\n  export type StylesNames = ColorPickerStylesNames;\n}\n"],"mappings":"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"}

package/esm/components/ColorPicker/ColorSlider/ColorSlider.mjs

@@ -69,12 +69,10 @@ const ColorSlider = factory((_props) => {
 					y: position.y
 				});
 				break;
-			case "ArrowLeft":
-				handleArrow(event, {
-					x: position.x - .05,
-					y: position.y
-				});
-				break;
+			case "ArrowLeft": handleArrow(event, {
+				x: position.x - .05,
+				y: position.y
+			});
 		}
 	};
 	const layers = overlays.map((overlay, index) => /* @__PURE__ */ createElement("div", {

package/esm/components/ColorPicker/ColorSlider/ColorSlider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSlider.mjs","names":["classes"],"sources":["../../../../src/components/ColorPicker/ColorSlider/ColorSlider.tsx"],"sourcesContent":["import { use, useRef, useState } from 'react';\nimport {\n  clampUseMovePosition,\n  useDidUpdate,\n  useMergedRef,\n  useMove,\n  UseMovePosition,\n} from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  MantineSize,\n  rem,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { ColorPickerContext } from '../ColorPicker.context';\nimport { Thumb } from '../Thumb/Thumb';\nimport classes from '../ColorPicker.module.css';\n\nexport type ColorSliderStylesNames = 'slider' | 'sliderOverlay' | 'thumb';\n\nexport interface __ColorSliderProps extends ElementProps<'div', 'onChange'> {\n  /** Controlled component value */\n  value: number;\n\n  /** Called when value changes */\n  onChange?: (value: number) => void;\n\n  /** Called when user stops dragging the slider or uses keyboard to change value */\n  onChangeEnd?: (value: number) => void;\n\n  /** Called when user starts dragging the slider */\n  onScrubStart?: () => void;\n\n  /** Called when user stops dragging the slider */\n  onScrubEnd?: () => void;\n\n  /** Slider size @default 'md' */\n  size?: MantineSize | (string & {});\n\n  /** If set, slider thumb can be focused @default true */\n  focusable?: boolean;\n}\n\nexport interface ColorSliderProps\n  extends\n    BoxProps,\n    StylesApiProps<ColorSliderFactory>,\n    __ColorSliderProps,\n    ElementProps<'div', 'onChange'> {\n  __staticSelector?: string;\n  maxValue: number;\n  overlays: React.CSSProperties[];\n  round: boolean;\n  thumbColor?: string;\n}\n\nexport type ColorSliderOptions = Omit<\n  ColorSliderProps,\n  'maxValue' | 'overlays' | 'round' | 'thumbColor'\n>;\n\nexport type ColorSliderFactory = Factory<{\n  props: ColorSliderProps;\n  ref: HTMLDivElement;\n  stylesNames: ColorSliderStylesNames;\n}>;\n\nexport const ColorSlider = factory<ColorSliderFactory>((_props) => {\n  const props = useProps('ColorSlider', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    onChange,\n    onChangeEnd,\n    maxValue,\n    round,\n    size = 'md',\n    focusable = true,\n    value,\n    overlays,\n    thumbColor = 'transparent',\n    onScrubStart,\n    onScrubEnd,\n    __staticSelector = 'ColorPicker',\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const _getStyles = useStyles<ColorSliderFactory>({\n    name: __staticSelector,\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'slider',\n  });\n\n  const ctxGetStyles = use(ColorPickerContext)?.getStyles;\n  const getStyles = ctxGetStyles || _getStyles;\n\n  const theme = useMantineTheme();\n  const [position, setPosition] = useState({ y: 0, x: value / maxValue });\n  const positionRef = useRef(position);\n  const getChangeValue = (val: number) => (round ? Math.round(val * maxValue) : val * maxValue);\n  const { ref: sliderRef } = useMove(\n    ({ x, y }) => {\n      positionRef.current = { x, y };\n      onChange?.(getChangeValue(x));\n    },\n    {\n      onScrubEnd: () => {\n        const { x } = positionRef.current;\n        onChangeEnd?.(getChangeValue(x));\n        onScrubEnd?.();\n      },\n      onScrubStart,\n    }\n  );\n\n  useDidUpdate(() => {\n    setPosition({ y: 0, x: value / maxValue });\n  }, [value]);\n\n  const handleArrow = (event: React.KeyboardEvent<HTMLDivElement>, pos: UseMovePosition) => {\n    event.preventDefault();\n    const _position = clampUseMovePosition(pos);\n    onChange?.(getChangeValue(_position.x));\n    onChangeEnd?.(getChangeValue(_position.x));\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    switch (event.key) {\n      case 'ArrowRight': {\n        handleArrow(event, { x: position.x + 0.05, y: position.y });\n        break;\n      }\n\n      case 'ArrowLeft': {\n        handleArrow(event, { x: position.x - 0.05, y: position.y });\n        break;\n      }\n    }\n  };\n\n  const layers = overlays.map((overlay, index) => (\n    <div {...getStyles('sliderOverlay')} style={overlay} key={index} />\n  ));\n\n  return (\n    <Box\n      {...others}\n      ref={useMergedRef(sliderRef, ref)}\n      {...getStyles('slider')}\n      size={size}\n      role=\"slider\"\n      aria-valuenow={value}\n      aria-valuemax={maxValue}\n      aria-valuemin={0}\n      tabIndex={focusable ? 0 : -1}\n      onKeyDown={handleKeyDown}\n      data-focus-ring={theme.focusRing}\n      __vars={{\n        '--cp-thumb-size': `var(--cp-thumb-size-${size})`,\n      }}\n    >\n      {layers}\n\n      <Thumb\n        position={position}\n        {...getStyles('thumb', { style: { top: rem(1), background: thumbColor } })}\n      />\n    </Box>\n  );\n});\n\nColorSlider.displayName = '@mantine/core/ColorSlider';\nColorSlider.classes = classes;\n"],"mappings":";;;;;;;;;;;;;;AA0EA,MAAa,cAAc,SAA6B,WAAW;CACjE,MAAM,QAAQ,SAAS,eAAe,MAAM,MAAM;CAClD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,aACA,UACA,OACA,OAAO,MACP,YAAY,MACZ,OACA,UACA,aAAa,eACb,cACA,YACA,mBAAmB,eACnB,YACA,KACA,GAAG,WACD;CAEJ,MAAM,aAAa,UAA8B;EAC/C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAGD,MAAM,YADe,IAAI,kBAAkB,CAAC,EAAE,aACZ;CAElC,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,CAAC,UAAU,eAAe,SAAS;EAAE,GAAG;EAAG,GAAG,QAAQ;CAAS,CAAC;CACtE,MAAM,cAAc,OAAO,QAAQ;CACnC,MAAM,kBAAkB,QAAiB,QAAQ,KAAK,MAAM,MAAM,QAAQ,IAAI,MAAM;CACpF,MAAM,EAAE,KAAK,cAAc,SACxB,EAAE,GAAG,QAAQ;EACZ,YAAY,UAAU;GAAE;GAAG;EAAE;EAC7B,WAAW,eAAe,CAAC,CAAC;CAC9B,GACA;EACE,kBAAkB;GAChB,MAAM,EAAE,MAAM,YAAY;GAC1B,cAAc,eAAe,CAAC,CAAC;GAC/B,aAAa;EACf;EACA;CACF,CACF;CAEA,mBAAmB;EACjB,YAAY;GAAE,GAAG;GAAG,GAAG,QAAQ;EAAS,CAAC;CAC3C,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,eAAe,OAA4C,QAAyB;EACxF,MAAM,eAAe;EACrB,MAAM,YAAY,qBAAqB,GAAG;EAC1C,WAAW,eAAe,UAAU,CAAC,CAAC;EACtC,cAAc,eAAe,UAAU,CAAC,CAAC;CAC3C;CAEA,MAAM,iBAAiB,UAA+C;EACpE,QAAQ,MAAM,KAAd;GACE,KAAK;IACH,YAAY,OAAO;KAAE,GAAG,SAAS,IAAI;KAAM,GAAG,SAAS;IAAE,CAAC;IAC1D;GAGF,KAAK;IACH,YAAY,OAAO;KAAE,GAAG,SAAS,IAAI;KAAM,GAAG,SAAS;IAAE,CAAC;IAC1D;EAEJ;CACF;CAEA,MAAM,SAAS,SAAS,KAAK,SAAS,UACpC,8BAAC,OAAD;EAAK,GAAI,UAAU,eAAe;EAAG,OAAO;EAAS,KAAK;CAAQ,CAAA,CACnE;CAED,OACE,qBAAC,KAAD;EACE,GAAI;EACJ,KAAK,aAAa,WAAW,GAAG;EAChC,GAAI,UAAU,QAAQ;EAChB;EACN,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,UAAU,YAAY,IAAI;EAC1B,WAAW;EACX,mBAAiB,MAAM;EACvB,QAAQ,EACN,mBAAmB,uBAAuB,KAAK,GACjD;YAdF,CAgBG,QAED,oBAAC,OAAD;GACY;GACV,GAAI,UAAU,SAAS,EAAE,OAAO;IAAE,KAAK,IAAI,CAAC;IAAG,YAAY;GAAW,EAAE,CAAC;EAC1E,CAAA,CACE;;AAET,CAAC;AAED,YAAY,cAAc;AAC1B,YAAY,UAAUA"}
+{"version":3,"file":"ColorSlider.mjs","names":["classes"],"sources":["../../../../src/components/ColorPicker/ColorSlider/ColorSlider.tsx"],"sourcesContent":["import { use, useRef, useState } from 'react';\nimport {\n  clampUseMovePosition,\n  useDidUpdate,\n  useMergedRef,\n  useMove,\n  UseMovePosition,\n} from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  MantineSize,\n  rem,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { ColorPickerContext } from '../ColorPicker.context';\nimport { Thumb } from '../Thumb/Thumb';\nimport classes from '../ColorPicker.module.css';\n\nexport type ColorSliderStylesNames = 'slider' | 'sliderOverlay' | 'thumb';\n\nexport interface __ColorSliderProps extends ElementProps<'div', 'onChange'> {\n  /** Controlled component value */\n  value: number;\n\n  /** Called when value changes */\n  onChange?: (value: number) => void;\n\n  /** Called when user stops dragging the slider or uses keyboard to change value */\n  onChangeEnd?: (value: number) => void;\n\n  /** Called when user starts dragging the slider */\n  onScrubStart?: () => void;\n\n  /** Called when user stops dragging the slider */\n  onScrubEnd?: () => void;\n\n  /** Slider size @default 'md' */\n  size?: MantineSize | (string & {});\n\n  /** If set, slider thumb can be focused @default true */\n  focusable?: boolean;\n}\n\nexport interface ColorSliderProps\n  extends\n    BoxProps,\n    StylesApiProps<ColorSliderFactory>,\n    __ColorSliderProps,\n    ElementProps<'div', 'onChange'> {\n  __staticSelector?: string;\n  maxValue: number;\n  overlays: React.CSSProperties[];\n  round: boolean;\n  thumbColor?: string;\n}\n\nexport type ColorSliderOptions = Omit<\n  ColorSliderProps,\n  'maxValue' | 'overlays' | 'round' | 'thumbColor'\n>;\n\nexport type ColorSliderFactory = Factory<{\n  props: ColorSliderProps;\n  ref: HTMLDivElement;\n  stylesNames: ColorSliderStylesNames;\n}>;\n\nexport const ColorSlider = factory<ColorSliderFactory>((_props) => {\n  const props = useProps('ColorSlider', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    onChange,\n    onChangeEnd,\n    maxValue,\n    round,\n    size = 'md',\n    focusable = true,\n    value,\n    overlays,\n    thumbColor = 'transparent',\n    onScrubStart,\n    onScrubEnd,\n    __staticSelector = 'ColorPicker',\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const _getStyles = useStyles<ColorSliderFactory>({\n    name: __staticSelector,\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'slider',\n  });\n\n  const ctxGetStyles = use(ColorPickerContext)?.getStyles;\n  const getStyles = ctxGetStyles || _getStyles;\n\n  const theme = useMantineTheme();\n  const [position, setPosition] = useState({ y: 0, x: value / maxValue });\n  const positionRef = useRef(position);\n  const getChangeValue = (val: number) => (round ? Math.round(val * maxValue) : val * maxValue);\n  const { ref: sliderRef } = useMove(\n    ({ x, y }) => {\n      positionRef.current = { x, y };\n      onChange?.(getChangeValue(x));\n    },\n    {\n      onScrubEnd: () => {\n        const { x } = positionRef.current;\n        onChangeEnd?.(getChangeValue(x));\n        onScrubEnd?.();\n      },\n      onScrubStart,\n    }\n  );\n\n  useDidUpdate(() => {\n    setPosition({ y: 0, x: value / maxValue });\n  }, [value]);\n\n  const handleArrow = (event: React.KeyboardEvent<HTMLDivElement>, pos: UseMovePosition) => {\n    event.preventDefault();\n    const _position = clampUseMovePosition(pos);\n    onChange?.(getChangeValue(_position.x));\n    onChangeEnd?.(getChangeValue(_position.x));\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    switch (event.key) {\n      case 'ArrowRight': {\n        handleArrow(event, { x: position.x + 0.05, y: position.y });\n        break;\n      }\n\n      case 'ArrowLeft': {\n        handleArrow(event, { x: position.x - 0.05, y: position.y });\n        break;\n      }\n    }\n  };\n\n  const layers = overlays.map((overlay, index) => (\n    <div {...getStyles('sliderOverlay')} style={overlay} key={index} />\n  ));\n\n  return (\n    <Box\n      {...others}\n      ref={useMergedRef(sliderRef, ref)}\n      {...getStyles('slider')}\n      size={size}\n      role=\"slider\"\n      aria-valuenow={value}\n      aria-valuemax={maxValue}\n      aria-valuemin={0}\n      tabIndex={focusable ? 0 : -1}\n      onKeyDown={handleKeyDown}\n      data-focus-ring={theme.focusRing}\n      __vars={{\n        '--cp-thumb-size': `var(--cp-thumb-size-${size})`,\n      }}\n    >\n      {layers}\n\n      <Thumb\n        position={position}\n        {...getStyles('thumb', { style: { top: rem(1), background: thumbColor } })}\n      />\n    </Box>\n  );\n});\n\nColorSlider.displayName = '@mantine/core/ColorSlider';\nColorSlider.classes = classes;\n"],"mappings":";;;;;;;;;;;;;;AA0EA,MAAa,cAAc,SAA6B,WAAW;CACjE,MAAM,QAAQ,SAAS,eAAe,MAAM,MAAM;CAClD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,aACA,UACA,OACA,OAAO,MACP,YAAY,MACZ,OACA,UACA,aAAa,eACb,cACA,YACA,mBAAmB,eACnB,YACA,KACA,GAAG,WACD;CAEJ,MAAM,aAAa,UAA8B;EAC/C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAGD,MAAM,YADe,IAAI,kBAAkB,CAAC,EAAE,aACZ;CAElC,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,CAAC,UAAU,eAAe,SAAS;EAAE,GAAG;EAAG,GAAG,QAAQ;CAAS,CAAC;CACtE,MAAM,cAAc,OAAO,QAAQ;CACnC,MAAM,kBAAkB,QAAiB,QAAQ,KAAK,MAAM,MAAM,QAAQ,IAAI,MAAM;CACpF,MAAM,EAAE,KAAK,cAAc,SACxB,EAAE,GAAG,QAAQ;EACZ,YAAY,UAAU;GAAE;GAAG;EAAE;EAC7B,WAAW,eAAe,CAAC,CAAC;CAC9B,GACA;EACE,kBAAkB;GAChB,MAAM,EAAE,MAAM,YAAY;GAC1B,cAAc,eAAe,CAAC,CAAC;GAC/B,aAAa;EACf;EACA;CACF,CACF;CAEA,mBAAmB;EACjB,YAAY;GAAE,GAAG;GAAG,GAAG,QAAQ;EAAS,CAAC;CAC3C,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,eAAe,OAA4C,QAAyB;EACxF,MAAM,eAAe;EACrB,MAAM,YAAY,qBAAqB,GAAG;EAC1C,WAAW,eAAe,UAAU,CAAC,CAAC;EACtC,cAAc,eAAe,UAAU,CAAC,CAAC;CAC3C;CAEA,MAAM,iBAAiB,UAA+C;EACpE,QAAQ,MAAM,KAAd;GACE,KAAK;IACH,YAAY,OAAO;KAAE,GAAG,SAAS,IAAI;KAAM,GAAG,SAAS;IAAE,CAAC;IAC1D;GAGF,KAAK,aACH,YAAY,OAAO;IAAE,GAAG,SAAS,IAAI;IAAM,GAAG,SAAS;GAAE,CAAC;EAG9D;CACF;CAEA,MAAM,SAAS,SAAS,KAAK,SAAS,UACpC,8BAAC,OAAD;EAAK,GAAI,UAAU,eAAe;EAAG,OAAO;EAAS,KAAK;CAAQ,CAAA,CACnE;CAED,OACE,qBAAC,KAAD;EACE,GAAI;EACJ,KAAK,aAAa,WAAW,GAAG;EAChC,GAAI,UAAU,QAAQ;EAChB;EACN,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,UAAU,YAAY,IAAI;EAC1B,WAAW;EACX,mBAAiB,MAAM;EACvB,QAAQ,EACN,mBAAmB,uBAAuB,KAAK,GACjD;EAdF,UAAA,CAgBG,QAED,oBAAC,OAAD;GACY;GACV,GAAI,UAAU,SAAS,EAAE,OAAO;IAAE,KAAK,IAAI,CAAC;IAAG,YAAY;GAAW,EAAE,CAAC;EAC1E,CAAA,CACE;;AAET,CAAC;AAED,YAAY,cAAc;AAC1B,YAAY,UAAUA"}

package/esm/components/ColorPicker/Saturation/Saturation.mjs

@@ -72,12 +72,10 @@ function Saturation({ className, onChange, onChangeEnd, value, saturationLabel,
 					y: position.y
 				});
 				break;
-			case "ArrowLeft":
-				handleArrow(event, {
-					x: position.x - .05,
-					y: position.y
-				});
-				break;
+			case "ArrowLeft": handleArrow(event, {
+				x: position.x - .05,
+				y: position.y
+			});
 		}
 	};
 	return /* @__PURE__ */ jsxs(Box, {

package/esm/components/ColorPicker/Saturation/Saturation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Saturation.mjs","names":[],"sources":["../../../../src/components/ColorPicker/Saturation/Saturation.tsx"],"sourcesContent":["import { use, useEffect, useRef, useState } from 'react';\nimport { clampUseMovePosition, useMove, UseMovePosition } from '@mantine/hooks';\nimport { Box, ElementProps, MantineSize } from '../../../core';\nimport { ColorPickerContext } from '../ColorPicker.context';\nimport { HsvaColor } from '../ColorPicker.types';\nimport { convertHsvaTo } from '../converters';\nimport { Thumb } from '../Thumb/Thumb';\n\nexport interface SaturationProps extends ElementProps<'div', 'onChange'> {\n  value: HsvaColor;\n  onChange: (color: Partial<HsvaColor>) => void;\n  onChangeEnd: (color: Partial<HsvaColor>) => void;\n  onScrubStart?: () => void;\n  onScrubEnd?: () => void;\n  saturationLabel?: string;\n  size: MantineSize | (string & {});\n  color: string;\n  focusable?: boolean;\n}\n\nexport function Saturation({\n  className,\n  onChange,\n  onChangeEnd,\n  value,\n  saturationLabel,\n  focusable = true,\n  size,\n  color,\n  onScrubStart,\n  onScrubEnd,\n  ...others\n}: SaturationProps) {\n  const { getStyles } = use(ColorPickerContext)!;\n\n  const [position, setPosition] = useState({ x: value.s / 100, y: 1 - value.v / 100 });\n  const positionRef = useRef(position);\n\n  const { ref } = useMove(\n    ({ x, y }) => {\n      positionRef.current = { x, y };\n      onChange({ s: Math.round(x * 100), v: Math.round((1 - y) * 100) });\n    },\n    {\n      onScrubEnd: () => {\n        const { x, y } = positionRef.current;\n        onChangeEnd({ s: Math.round(x * 100), v: Math.round((1 - y) * 100) });\n        onScrubEnd?.();\n      },\n      onScrubStart,\n    }\n  );\n\n  useEffect(() => {\n    setPosition({ x: value.s / 100, y: 1 - value.v / 100 });\n  }, [value.s, value.v]);\n\n  const handleArrow = (event: React.KeyboardEvent<HTMLDivElement>, pos: UseMovePosition) => {\n    event.preventDefault();\n    const _position = clampUseMovePosition(pos);\n    onChange({ s: Math.round(_position.x * 100), v: Math.round((1 - _position.y) * 100) });\n    onChangeEnd({ s: Math.round(_position.x * 100), v: Math.round((1 - _position.y) * 100) });\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    switch (event.key) {\n      case 'ArrowUp': {\n        handleArrow(event, { y: position.y - 0.05, x: position.x });\n        break;\n      }\n\n      case 'ArrowDown': {\n        handleArrow(event, { y: position.y + 0.05, x: position.x });\n        break;\n      }\n\n      case 'ArrowRight': {\n        handleArrow(event, { x: position.x + 0.05, y: position.y });\n        break;\n      }\n\n      case 'ArrowLeft': {\n        handleArrow(event, { x: position.x - 0.05, y: position.y });\n        break;\n      }\n    }\n  };\n\n  return (\n    <Box\n      {...getStyles('saturation')}\n      ref={ref as any}\n      {...others}\n      role=\"slider\"\n      aria-label={saturationLabel}\n      aria-valuenow={position.x}\n      aria-valuetext={convertHsvaTo('rgba', value)}\n      tabIndex={focusable ? 0 : -1}\n      onKeyDown={handleKeyDown}\n    >\n      <div\n        {...getStyles('saturationOverlay', {\n          style: { backgroundColor: `hsl(${value.h}, 100%, 50%)` },\n        })}\n      />\n\n      <div\n        {...getStyles('saturationOverlay', {\n          style: { backgroundImage: 'linear-gradient(90deg, #fff, transparent)' },\n        })}\n      />\n\n      <div\n        {...getStyles('saturationOverlay', {\n          style: { backgroundImage: 'linear-gradient(0deg, #000, transparent)' },\n        })}\n      />\n\n      <Thumb position={position} {...getStyles('thumb', { style: { backgroundColor: color } })} />\n    </Box>\n  );\n}\n\nSaturation.displayName = '@mantine/core/Saturation';\n"],"mappings":";;;;;;;;;AAoBA,SAAgB,WAAW,EACzB,WACA,UACA,aACA,OACA,iBACA,YAAY,MACZ,MACA,OACA,cACA,YACA,GAAG,UACe;CAClB,MAAM,EAAE,cAAc,IAAI,kBAAkB;CAE5C,MAAM,CAAC,UAAU,eAAe,SAAS;EAAE,GAAG,MAAM,IAAI;EAAK,GAAG,IAAI,MAAM,IAAI;CAAI,CAAC;CACnF,MAAM,cAAc,OAAO,QAAQ;CAEnC,MAAM,EAAE,QAAQ,SACb,EAAE,GAAG,QAAQ;EACZ,YAAY,UAAU;GAAE;GAAG;EAAE;EAC7B,SAAS;GAAE,GAAG,KAAK,MAAM,IAAI,GAAG;GAAG,GAAG,KAAK,OAAO,IAAI,KAAK,GAAG;EAAE,CAAC;CACnE,GACA;EACE,kBAAkB;GAChB,MAAM,EAAE,GAAG,MAAM,YAAY;GAC7B,YAAY;IAAE,GAAG,KAAK,MAAM,IAAI,GAAG;IAAG,GAAG,KAAK,OAAO,IAAI,KAAK,GAAG;GAAE,CAAC;GACpE,aAAa;EACf;EACA;CACF,CACF;CAEA,gBAAgB;EACd,YAAY;GAAE,GAAG,MAAM,IAAI;GAAK,GAAG,IAAI,MAAM,IAAI;EAAI,CAAC;CACxD,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;CAErB,MAAM,eAAe,OAA4C,QAAyB;EACxF,MAAM,eAAe;EACrB,MAAM,YAAY,qBAAqB,GAAG;EAC1C,SAAS;GAAE,GAAG,KAAK,MAAM,UAAU,IAAI,GAAG;GAAG,GAAG,KAAK,OAAO,IAAI,UAAU,KAAK,GAAG;EAAE,CAAC;EACrF,YAAY;GAAE,GAAG,KAAK,MAAM,UAAU,IAAI,GAAG;GAAG,GAAG,KAAK,OAAO,IAAI,UAAU,KAAK,GAAG;EAAE,CAAC;CAC1F;CAEA,MAAM,iBAAiB,UAA+C;EACpE,QAAQ,MAAM,KAAd;GACE,KAAK;IACH,YAAY,OAAO;KAAE,GAAG,SAAS,IAAI;KAAM,GAAG,SAAS;IAAE,CAAC;IAC1D;GAGF,KAAK;IACH,YAAY,OAAO;KAAE,GAAG,SAAS,IAAI;KAAM,GAAG,SAAS;IAAE,CAAC;IAC1D;GAGF,KAAK;IACH,YAAY,OAAO;KAAE,GAAG,SAAS,IAAI;KAAM,GAAG,SAAS;IAAE,CAAC;IAC1D;GAGF,KAAK;IACH,YAAY,OAAO;KAAE,GAAG,SAAS,IAAI;KAAM,GAAG,SAAS;IAAE,CAAC;IAC1D;EAEJ;CACF;CAEA,OACE,qBAAC,KAAD;EACE,GAAI,UAAU,YAAY;EACrB;EACL,GAAI;EACJ,MAAK;EACL,cAAY;EACZ,iBAAe,SAAS;EACxB,kBAAgB,cAAc,QAAQ,KAAK;EAC3C,UAAU,YAAY,IAAI;EAC1B,WAAW;YATb;GAWE,oBAAC,OAAD,EACE,GAAI,UAAU,qBAAqB,EACjC,OAAO,EAAE,iBAAiB,OAAO,MAAM,EAAE,cAAc,EACzD,CAAC,EACF,CAAA;GAED,oBAAC,OAAD,EACE,GAAI,UAAU,qBAAqB,EACjC,OAAO,EAAE,iBAAiB,4CAA4C,EACxE,CAAC,EACF,CAAA;GAED,oBAAC,OAAD,EACE,GAAI,UAAU,qBAAqB,EACjC,OAAO,EAAE,iBAAiB,2CAA2C,EACvE,CAAC,EACF,CAAA;GAED,oBAAC,OAAD;IAAiB;IAAU,GAAI,UAAU,SAAS,EAAE,OAAO,EAAE,iBAAiB,MAAM,EAAE,CAAC;GAAI,CAAA;EACxF;;AAET;AAEA,WAAW,cAAc"}
+{"version":3,"file":"Saturation.mjs","names":[],"sources":["../../../../src/components/ColorPicker/Saturation/Saturation.tsx"],"sourcesContent":["import { use, useEffect, useRef, useState } from 'react';\nimport { clampUseMovePosition, useMove, UseMovePosition } from '@mantine/hooks';\nimport { Box, ElementProps, MantineSize } from '../../../core';\nimport { ColorPickerContext } from '../ColorPicker.context';\nimport { HsvaColor } from '../ColorPicker.types';\nimport { convertHsvaTo } from '../converters';\nimport { Thumb } from '../Thumb/Thumb';\n\nexport interface SaturationProps extends ElementProps<'div', 'onChange'> {\n  value: HsvaColor;\n  onChange: (color: Partial<HsvaColor>) => void;\n  onChangeEnd: (color: Partial<HsvaColor>) => void;\n  onScrubStart?: () => void;\n  onScrubEnd?: () => void;\n  saturationLabel?: string;\n  size: MantineSize | (string & {});\n  color: string;\n  focusable?: boolean;\n}\n\nexport function Saturation({\n  className,\n  onChange,\n  onChangeEnd,\n  value,\n  saturationLabel,\n  focusable = true,\n  size,\n  color,\n  onScrubStart,\n  onScrubEnd,\n  ...others\n}: SaturationProps) {\n  const { getStyles } = use(ColorPickerContext)!;\n\n  const [position, setPosition] = useState({ x: value.s / 100, y: 1 - value.v / 100 });\n  const positionRef = useRef(position);\n\n  const { ref } = useMove(\n    ({ x, y }) => {\n      positionRef.current = { x, y };\n      onChange({ s: Math.round(x * 100), v: Math.round((1 - y) * 100) });\n    },\n    {\n      onScrubEnd: () => {\n        const { x, y } = positionRef.current;\n        onChangeEnd({ s: Math.round(x * 100), v: Math.round((1 - y) * 100) });\n        onScrubEnd?.();\n      },\n      onScrubStart,\n    }\n  );\n\n  useEffect(() => {\n    setPosition({ x: value.s / 100, y: 1 - value.v / 100 });\n  }, [value.s, value.v]);\n\n  const handleArrow = (event: React.KeyboardEvent<HTMLDivElement>, pos: UseMovePosition) => {\n    event.preventDefault();\n    const _position = clampUseMovePosition(pos);\n    onChange({ s: Math.round(_position.x * 100), v: Math.round((1 - _position.y) * 100) });\n    onChangeEnd({ s: Math.round(_position.x * 100), v: Math.round((1 - _position.y) * 100) });\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    switch (event.key) {\n      case 'ArrowUp': {\n        handleArrow(event, { y: position.y - 0.05, x: position.x });\n        break;\n      }\n\n      case 'ArrowDown': {\n        handleArrow(event, { y: position.y + 0.05, x: position.x });\n        break;\n      }\n\n      case 'ArrowRight': {\n        handleArrow(event, { x: position.x + 0.05, y: position.y });\n        break;\n      }\n\n      case 'ArrowLeft': {\n        handleArrow(event, { x: position.x - 0.05, y: position.y });\n        break;\n      }\n    }\n  };\n\n  return (\n    <Box\n      {...getStyles('saturation')}\n      ref={ref as any}\n      {...others}\n      role=\"slider\"\n      aria-label={saturationLabel}\n      aria-valuenow={position.x}\n      aria-valuetext={convertHsvaTo('rgba', value)}\n      tabIndex={focusable ? 0 : -1}\n      onKeyDown={handleKeyDown}\n    >\n      <div\n        {...getStyles('saturationOverlay', {\n          style: { backgroundColor: `hsl(${value.h}, 100%, 50%)` },\n        })}\n      />\n\n      <div\n        {...getStyles('saturationOverlay', {\n          style: { backgroundImage: 'linear-gradient(90deg, #fff, transparent)' },\n        })}\n      />\n\n      <div\n        {...getStyles('saturationOverlay', {\n          style: { backgroundImage: 'linear-gradient(0deg, #000, transparent)' },\n        })}\n      />\n\n      <Thumb position={position} {...getStyles('thumb', { style: { backgroundColor: color } })} />\n    </Box>\n  );\n}\n\nSaturation.displayName = '@mantine/core/Saturation';\n"],"mappings":";;;;;;;;;AAoBA,SAAgB,WAAW,EACzB,WACA,UACA,aACA,OACA,iBACA,YAAY,MACZ,MACA,OACA,cACA,YACA,GAAG,UACe;CAClB,MAAM,EAAE,cAAc,IAAI,kBAAkB;CAE5C,MAAM,CAAC,UAAU,eAAe,SAAS;EAAE,GAAG,MAAM,IAAI;EAAK,GAAG,IAAI,MAAM,IAAI;CAAI,CAAC;CACnF,MAAM,cAAc,OAAO,QAAQ;CAEnC,MAAM,EAAE,QAAQ,SACb,EAAE,GAAG,QAAQ;EACZ,YAAY,UAAU;GAAE;GAAG;EAAE;EAC7B,SAAS;GAAE,GAAG,KAAK,MAAM,IAAI,GAAG;GAAG,GAAG,KAAK,OAAO,IAAI,KAAK,GAAG;EAAE,CAAC;CACnE,GACA;EACE,kBAAkB;GAChB,MAAM,EAAE,GAAG,MAAM,YAAY;GAC7B,YAAY;IAAE,GAAG,KAAK,MAAM,IAAI,GAAG;IAAG,GAAG,KAAK,OAAO,IAAI,KAAK,GAAG;GAAE,CAAC;GACpE,aAAa;EACf;EACA;CACF,CACF;CAEA,gBAAgB;EACd,YAAY;GAAE,GAAG,MAAM,IAAI;GAAK,GAAG,IAAI,MAAM,IAAI;EAAI,CAAC;CACxD,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;CAErB,MAAM,eAAe,OAA4C,QAAyB;EACxF,MAAM,eAAe;EACrB,MAAM,YAAY,qBAAqB,GAAG;EAC1C,SAAS;GAAE,GAAG,KAAK,MAAM,UAAU,IAAI,GAAG;GAAG,GAAG,KAAK,OAAO,IAAI,UAAU,KAAK,GAAG;EAAE,CAAC;EACrF,YAAY;GAAE,GAAG,KAAK,MAAM,UAAU,IAAI,GAAG;GAAG,GAAG,KAAK,OAAO,IAAI,UAAU,KAAK,GAAG;EAAE,CAAC;CAC1F;CAEA,MAAM,iBAAiB,UAA+C;EACpE,QAAQ,MAAM,KAAd;GACE,KAAK;IACH,YAAY,OAAO;KAAE,GAAG,SAAS,IAAI;KAAM,GAAG,SAAS;IAAE,CAAC;IAC1D;GAGF,KAAK;IACH,YAAY,OAAO;KAAE,GAAG,SAAS,IAAI;KAAM,GAAG,SAAS;IAAE,CAAC;IAC1D;GAGF,KAAK;IACH,YAAY,OAAO;KAAE,GAAG,SAAS,IAAI;KAAM,GAAG,SAAS;IAAE,CAAC;IAC1D;GAGF,KAAK,aACH,YAAY,OAAO;IAAE,GAAG,SAAS,IAAI;IAAM,GAAG,SAAS;GAAE,CAAC;EAG9D;CACF;CAEA,OACE,qBAAC,KAAD;EACE,GAAI,UAAU,YAAY;EACrB;EACL,GAAI;EACJ,MAAK;EACL,cAAY;EACZ,iBAAe,SAAS;EACxB,kBAAgB,cAAc,QAAQ,KAAK;EAC3C,UAAU,YAAY,IAAI;EAC1B,WAAW;EATb,UAAA;GAWE,oBAAC,OAAD,EACE,GAAI,UAAU,qBAAqB,EACjC,OAAO,EAAE,iBAAiB,OAAO,MAAM,EAAE,cAAc,EACzD,CAAC,EACF,CAAA;GAED,oBAAC,OAAD,EACE,GAAI,UAAU,qBAAqB,EACjC,OAAO,EAAE,iBAAiB,4CAA4C,EACxE,CAAC,EACF,CAAA;GAED,oBAAC,OAAD,EACE,GAAI,UAAU,qBAAqB,EACjC,OAAO,EAAE,iBAAiB,2CAA2C,EACvE,CAAC,EACF,CAAA;GAED,oBAAC,OAAD;IAAiB;IAAU,GAAI,UAAU,SAAS,EAAE,OAAO,EAAE,iBAAiB,MAAM,EAAE,CAAC;GAAI,CAAA;EACxF;;AAET;AAEA,WAAW,cAAc"}

package/esm/components/ColorPicker/Swatches/Swatches.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Swatches.mjs","names":[],"sources":["../../../../src/components/ColorPicker/Swatches/Swatches.tsx"],"sourcesContent":["import { use } from 'react';\nimport { Box, ElementProps, luminance } from '../../../core';\nimport { CheckIcon } from '../../Checkbox';\nimport { ColorSwatch } from '../../ColorSwatch';\nimport { ColorPickerContext } from '../ColorPicker.context';\n\nexport interface SwatchesProps extends ElementProps<'div'> {\n  size?: string | number;\n  data: string[];\n  swatchesPerRow?: number;\n  focusable?: boolean;\n  value?: string;\n  onChangeEnd?: (color: string) => void;\n  setValue: (value: string) => void;\n}\n\nexport function Swatches({\n  className,\n  datatype,\n  setValue,\n  onChangeEnd,\n  size,\n  focusable,\n  data,\n  swatchesPerRow,\n  value,\n  ...others\n}: SwatchesProps) {\n  const ctx = use(ColorPickerContext)!;\n\n  const colors = data.map((color, index) => (\n    <ColorSwatch\n      {...ctx.getStyles('swatch')}\n      unstyled={ctx.unstyled}\n      component=\"button\"\n      type=\"button\"\n      color={color}\n      key={index}\n      radius=\"sm\"\n      onClick={() => {\n        setValue(color);\n        onChangeEnd?.(color);\n      }}\n      aria-label={color}\n      tabIndex={focusable ? 0 : -1}\n      data-swatch\n    >\n      {value === color && (\n        <CheckIcon size=\"35%\" color={luminance(color) < 0.5 ? 'white' : 'black'} />\n      )}\n    </ColorSwatch>\n  ));\n\n  return (\n    <Box {...ctx.getStyles('swatches')} {...others}>\n      {colors}\n    </Box>\n  );\n}\n\nSwatches.displayName = '@mantine/core/Swatches';\n"],"mappings":";;;;;;;;;AAgBA,SAAgB,SAAS,EACvB,WACA,UACA,UACA,aACA,MACA,WACA,MACA,gBACA,OACA,GAAG,UACa;CAChB,MAAM,MAAM,IAAI,kBAAkB;CAElC,MAAM,SAAS,KAAK,KAAK,OAAO,UAC9B,8BAAC,aAAD;EACE,GAAI,IAAI,UAAU,QAAQ;EAC1B,UAAU,IAAI;EACd,WAAU;EACV,MAAK;EACE;EACP,KAAK;EACL,QAAO;EACP,eAAe;GACb,SAAS,KAAK;GACd,cAAc,KAAK;EACrB;EACA,cAAY;EACZ,UAAU,YAAY,IAAI;EAC1B,eAAA;CAKW,GAHV,UAAU,SACT,oBAAC,WAAD;EAAW,MAAK;EAAM,OAAO,UAAU,KAAK,IAAI,KAAM,UAAU;CAAU,CAAA,CAEjE,CACd;CAED,OACE,oBAAC,KAAD;EAAK,GAAI,IAAI,UAAU,UAAU;EAAG,GAAI;YACrC;CACE,CAAA;AAET;AAEA,SAAS,cAAc"}
+{"version":3,"file":"Swatches.mjs","names":[],"sources":["../../../../src/components/ColorPicker/Swatches/Swatches.tsx"],"sourcesContent":["import { use } from 'react';\nimport { Box, ElementProps, luminance } from '../../../core';\nimport { CheckIcon } from '../../Checkbox';\nimport { ColorSwatch } from '../../ColorSwatch';\nimport { ColorPickerContext } from '../ColorPicker.context';\n\nexport interface SwatchesProps extends ElementProps<'div'> {\n  size?: string | number;\n  data: string[];\n  swatchesPerRow?: number;\n  focusable?: boolean;\n  value?: string;\n  onChangeEnd?: (color: string) => void;\n  setValue: (value: string) => void;\n}\n\nexport function Swatches({\n  className,\n  datatype,\n  setValue,\n  onChangeEnd,\n  size,\n  focusable,\n  data,\n  swatchesPerRow,\n  value,\n  ...others\n}: SwatchesProps) {\n  const ctx = use(ColorPickerContext)!;\n\n  const colors = data.map((color, index) => (\n    <ColorSwatch\n      {...ctx.getStyles('swatch')}\n      unstyled={ctx.unstyled}\n      component=\"button\"\n      type=\"button\"\n      color={color}\n      key={index}\n      radius=\"sm\"\n      onClick={() => {\n        setValue(color);\n        onChangeEnd?.(color);\n      }}\n      aria-label={color}\n      tabIndex={focusable ? 0 : -1}\n      data-swatch\n    >\n      {value === color && (\n        <CheckIcon size=\"35%\" color={luminance(color) < 0.5 ? 'white' : 'black'} />\n      )}\n    </ColorSwatch>\n  ));\n\n  return (\n    <Box {...ctx.getStyles('swatches')} {...others}>\n      {colors}\n    </Box>\n  );\n}\n\nSwatches.displayName = '@mantine/core/Swatches';\n"],"mappings":";;;;;;;;;AAgBA,SAAgB,SAAS,EACvB,WACA,UACA,UACA,aACA,MACA,WACA,MACA,gBACA,OACA,GAAG,UACa;CAChB,MAAM,MAAM,IAAI,kBAAkB;CAElC,MAAM,SAAS,KAAK,KAAK,OAAO,UAC9B,8BAAC,aAAD;EACE,GAAI,IAAI,UAAU,QAAQ;EAC1B,UAAU,IAAI;EACd,WAAU;EACV,MAAK;EACE;EACP,KAAK;EACL,QAAO;EACP,eAAe;GACb,SAAS,KAAK;GACd,cAAc,KAAK;EACrB;EACA,cAAY;EACZ,UAAU,YAAY,IAAI;EAC1B,eAAA;CAKW,GAHV,UAAU,SACT,oBAAC,WAAD;EAAW,MAAK;EAAM,OAAO,UAAU,KAAK,IAAI,KAAM,UAAU;CAAU,CAAA,CAEjE,CACd;CAED,OACE,oBAAC,KAAD;EAAK,GAAI,IAAI,UAAU,UAAU;EAAG,GAAI;EACrC,UAAA;CACE,CAAA;AAET;AAEA,SAAS,cAAc"}

package/esm/components/ColorSwatch/ColorSwatch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSwatch.mjs","names":["classes"],"sources":["../../../src/components/ColorSwatch/ColorSwatch.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  getRadius,\n  MantineRadius,\n  polymorphicFactory,\n  PolymorphicFactory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './ColorSwatch.module.css';\n\nexport type ColorSwatchStylesNames =\n  | 'root'\n  | 'alphaOverlay'\n  | 'shadowOverlay'\n  | 'colorOverlay'\n  | 'childrenOverlay';\n\nexport type ColorSwatchCssVariables = {\n  root: '--cs-radius' | '--cs-size';\n};\n\nexport interface ColorSwatchProps extends BoxProps, StylesApiProps<ColorSwatchFactory> {\n  /** Valid CSS color to display */\n  color: string;\n\n  /** Swatch `width` and `height`, any valid CSS value, numbers are converted to rem. @default 28 */\n  size?: React.CSSProperties['width'];\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem. @default 1000 */\n  radius?: MantineRadius;\n\n  /** If set, the swatch has inner `box-shadow` @default true */\n  withShadow?: boolean;\n\n  /** Children inside the swatch */\n  children?: React.ReactNode;\n}\n\nexport type ColorSwatchFactory = PolymorphicFactory<{\n  props: ColorSwatchProps;\n  defaultRef: HTMLDivElement;\n  defaultComponent: 'div';\n  stylesNames: ColorSwatchStylesNames;\n  vars: ColorSwatchCssVariables;\n}>;\n\nconst defaultProps = {\n  withShadow: true,\n} satisfies Partial<ColorSwatchProps>;\n\nconst varsResolver = createVarsResolver<ColorSwatchFactory>((_, { radius, size }) => ({\n  root: {\n    '--cs-radius': radius === undefined ? undefined : getRadius(radius),\n    '--cs-size': rem(size),\n  },\n}));\n\nexport const ColorSwatch = polymorphicFactory<ColorSwatchFactory>((_props) => {\n  const props = useProps('ColorSwatch', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    color,\n    radius,\n    withShadow,\n    children,\n    attributes,\n    ...others\n  } = useProps('ColorSwatch', defaultProps, props);\n\n  const getStyles = useStyles<ColorSwatchFactory>({\n    name: 'ColorSwatch',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <Box {...getStyles('root', { focusable: true })} {...others}>\n      <span {...getStyles('alphaOverlay')} />\n      {withShadow && <span {...getStyles('shadowOverlay')} />}\n      <span {...getStyles('colorOverlay', { style: { backgroundColor: color } })} />\n      <span {...getStyles('childrenOverlay')}>{children}</span>\n    </Box>\n  );\n});\n\nColorSwatch.classes = classes;\nColorSwatch.varsResolver = varsResolver;\nColorSwatch.displayName = '@mantine/core/ColorSwatch';\n\nexport namespace ColorSwatch {\n  export type Props = ColorSwatchProps;\n  export type CssVariables = ColorSwatchCssVariables;\n  export type Factory = ColorSwatchFactory;\n  export type StylesNames = ColorSwatchStylesNames;\n}\n"],"mappings":";;;;;;;;;;;AAmDA,MAAM,eAAe,EACnB,YAAY,KACd;AAEA,MAAM,eAAe,oBAAwC,GAAG,EAAE,QAAQ,YAAY,EACpF,MAAM;CACJ,eAAe,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;CAClE,aAAa,IAAI,IAAI;AACvB,EACF,EAAE;AAEF,MAAa,cAAc,oBAAwC,WAAW;CAC5E,MAAM,QAAQ,SAAS,eAAe,cAAc,MAAM;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,QACA,YACA,UACA,YACA,GAAG,WACD,SAAS,eAAe,cAAc,KAAK;CAE/C,MAAM,YAAY,UAA8B;EAC9C,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,qBAAC,KAAD;EAAK,GAAI,UAAU,QAAQ,EAAE,WAAW,KAAK,CAAC;EAAG,GAAI;YAArD;GACE,oBAAC,QAAD,EAAM,GAAI,UAAU,cAAc,EAAI,CAAA;GACrC,cAAc,oBAAC,QAAD,EAAM,GAAI,UAAU,eAAe,EAAI,CAAA;GACtD,oBAAC,QAAD,EAAM,GAAI,UAAU,gBAAgB,EAAE,OAAO,EAAE,iBAAiB,MAAM,EAAE,CAAC,EAAI,CAAA;GAC7E,oBAAC,QAAD;IAAM,GAAI,UAAU,iBAAiB;IAAI;GAAe,CAAA;EACrD;;AAET,CAAC;AAED,YAAY,UAAUA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}
+{"version":3,"file":"ColorSwatch.mjs","names":["classes"],"sources":["../../../src/components/ColorSwatch/ColorSwatch.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  getRadius,\n  MantineRadius,\n  polymorphicFactory,\n  PolymorphicFactory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './ColorSwatch.module.css';\n\nexport type ColorSwatchStylesNames =\n  | 'root'\n  | 'alphaOverlay'\n  | 'shadowOverlay'\n  | 'colorOverlay'\n  | 'childrenOverlay';\n\nexport type ColorSwatchCssVariables = {\n  root: '--cs-radius' | '--cs-size';\n};\n\nexport interface ColorSwatchProps extends BoxProps, StylesApiProps<ColorSwatchFactory> {\n  /** Valid CSS color to display */\n  color: string;\n\n  /** Swatch `width` and `height`, any valid CSS value, numbers are converted to rem. @default 28 */\n  size?: React.CSSProperties['width'];\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem. @default 1000 */\n  radius?: MantineRadius;\n\n  /** If set, the swatch has inner `box-shadow` @default true */\n  withShadow?: boolean;\n\n  /** Children inside the swatch */\n  children?: React.ReactNode;\n}\n\nexport type ColorSwatchFactory = PolymorphicFactory<{\n  props: ColorSwatchProps;\n  defaultRef: HTMLDivElement;\n  defaultComponent: 'div';\n  stylesNames: ColorSwatchStylesNames;\n  vars: ColorSwatchCssVariables;\n}>;\n\nconst defaultProps = {\n  withShadow: true,\n} satisfies Partial<ColorSwatchProps>;\n\nconst varsResolver = createVarsResolver<ColorSwatchFactory>((_, { radius, size }) => ({\n  root: {\n    '--cs-radius': radius === undefined ? undefined : getRadius(radius),\n    '--cs-size': rem(size),\n  },\n}));\n\nexport const ColorSwatch = polymorphicFactory<ColorSwatchFactory>((_props) => {\n  const props = useProps('ColorSwatch', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    color,\n    radius,\n    withShadow,\n    children,\n    attributes,\n    ...others\n  } = useProps('ColorSwatch', defaultProps, props);\n\n  const getStyles = useStyles<ColorSwatchFactory>({\n    name: 'ColorSwatch',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <Box {...getStyles('root', { focusable: true })} {...others}>\n      <span {...getStyles('alphaOverlay')} />\n      {withShadow && <span {...getStyles('shadowOverlay')} />}\n      <span {...getStyles('colorOverlay', { style: { backgroundColor: color } })} />\n      <span {...getStyles('childrenOverlay')}>{children}</span>\n    </Box>\n  );\n});\n\nColorSwatch.classes = classes;\nColorSwatch.varsResolver = varsResolver;\nColorSwatch.displayName = '@mantine/core/ColorSwatch';\n\nexport namespace ColorSwatch {\n  export type Props = ColorSwatchProps;\n  export type CssVariables = ColorSwatchCssVariables;\n  export type Factory = ColorSwatchFactory;\n  export type StylesNames = ColorSwatchStylesNames;\n}\n"],"mappings":";;;;;;;;;;;AAmDA,MAAM,eAAe,EACnB,YAAY,KACd;AAEA,MAAM,eAAe,oBAAwC,GAAG,EAAE,QAAQ,YAAY,EACpF,MAAM;CACJ,eAAe,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;CAClE,aAAa,IAAI,IAAI;AACvB,EACF,EAAE;AAEF,MAAa,cAAc,oBAAwC,WAAW;CAC5E,MAAM,QAAQ,SAAS,eAAe,cAAc,MAAM;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,QACA,YACA,UACA,YACA,GAAG,WACD,SAAS,eAAe,cAAc,KAAK;CAE/C,MAAM,YAAY,UAA8B;EAC9C,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,qBAAC,KAAD;EAAK,GAAI,UAAU,QAAQ,EAAE,WAAW,KAAK,CAAC;EAAG,GAAI;EAArD,UAAA;GACE,oBAAC,QAAD,EAAM,GAAI,UAAU,cAAc,EAAI,CAAA;GACrC,cAAc,oBAAC,QAAD,EAAM,GAAI,UAAU,eAAe,EAAI,CAAA;GACtD,oBAAC,QAAD,EAAM,GAAI,UAAU,gBAAgB,EAAE,OAAO,EAAE,iBAAiB,MAAM,EAAE,CAAC,EAAI,CAAA;GAC7E,oBAAC,QAAD;IAAM,GAAI,UAAU,iBAAiB;IAAI;GAAe,CAAA;EACrD;;AAET,CAAC;AAED,YAAY,UAAUA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}

package/esm/components/Combobox/Combobox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.mjs","names":["classes"],"sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import {\n  createVarsResolver,\n  ExtendComponent,\n  Factory,\n  getFontSize,\n  getSize,\n  MantineSize,\n  MantineThemeComponent,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { __PopoverProps, Popover } from '../Popover';\nimport { PopoverMiddlewares } from '../Popover/Popover.types';\nimport { ComboboxProvider } from './Combobox.context';\nimport { ComboboxChevron, ComboboxChevronProps } from './ComboboxChevron/ComboboxChevron';\nimport {\n  ComboboxClearButton,\n  ComboboxClearButtonProps,\n} from './ComboboxClearButton/ComboboxClearButton';\nimport { ComboboxDropdown, ComboboxDropdownProps } from './ComboboxDropdown/ComboboxDropdown';\nimport {\n  ComboboxDropdownTarget,\n  ComboboxDropdownTargetProps,\n} from './ComboboxDropdownTarget/ComboboxDropdownTarget';\nimport { ComboboxEmpty, ComboboxEmptyProps } from './ComboboxEmpty/ComboboxEmpty';\nimport {\n  ComboboxEventsTarget,\n  ComboboxEventsTargetProps,\n} from './ComboboxEventsTarget/ComboboxEventsTarget';\nimport { ComboboxFooter, ComboboxFooterProps } from './ComboboxFooter/ComboboxFooter';\nimport { ComboboxGroup, ComboboxGroupProps } from './ComboboxGroup/ComboboxGroup';\nimport { ComboboxHeader, ComboboxHeaderProps } from './ComboboxHeader/ComboboxHeader';\nimport {\n  ComboboxHiddenInput,\n  ComboboxHiddenInputProps,\n} from './ComboboxHiddenInput/ComboboxHiddenInput';\nimport { ComboboxOption, ComboboxOptionProps } from './ComboboxOption/ComboboxOption';\nimport { ComboboxOptions, ComboboxOptionsProps } from './ComboboxOptions/ComboboxOptions';\nimport { ComboboxSearch, ComboboxSearchProps } from './ComboboxSearch/ComboboxSearch';\nimport { ComboboxTarget, ComboboxTargetProps } from './ComboboxTarget/ComboboxTarget';\nimport { ComboboxStore, useCombobox } from './use-combobox/use-combobox';\nimport classes from './Combobox.module.css';\n\nexport type ComboboxStylesNames =\n  | 'options'\n  | 'dropdown'\n  | 'option'\n  | 'search'\n  | 'empty'\n  | 'footer'\n  | 'header'\n  | 'group'\n  | 'groupLabel';\n\nexport type ComboboxCSSVariables = {\n  options: '--combobox-option-fz' | '--combobox-option-padding';\n  dropdown: '--combobox-padding' | '--combobox-option-fz' | '--combobox-option-padding';\n};\n\nexport interface ComboboxProps extends __PopoverProps, StylesApiProps<ComboboxFactory> {\n  __staticSelector?: string;\n\n  /** Combobox content */\n  children?: React.ReactNode;\n\n  /** Combobox store, can be used to control combobox state */\n  store?: ComboboxStore;\n\n  /** Called when item is selected with the `Enter` key or by clicking it */\n  onOptionSubmit?: (value: string, optionProps: ComboboxOptionProps) => void;\n\n  /** Controls items `font-size` and `padding` @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Controls `padding` of the dropdown @default 4 */\n  dropdownPadding?: React.CSSProperties['padding'];\n\n  /** Determines whether selection should be reset when option is hovered @default false */\n  resetSelectionOnOptionHover?: boolean;\n\n  /** Determines whether the `Combobox` value can be changed */\n  readOnly?: boolean;\n\n  /** If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware. */\n  floatingHeight?: 'viewport';\n}\n\nexport type ComboboxFactory = Factory<{\n  props: ComboboxProps;\n  ref: HTMLDivElement;\n  stylesNames: ComboboxStylesNames;\n  vars: ComboboxCSSVariables;\n  staticComponents: {\n    Target: typeof ComboboxTarget;\n    Dropdown: typeof ComboboxDropdown;\n    Options: typeof ComboboxOptions;\n    Option: typeof ComboboxOption;\n    Search: typeof ComboboxSearch;\n    Empty: typeof ComboboxEmpty;\n    Chevron: typeof ComboboxChevron;\n    Footer: typeof ComboboxFooter;\n    Header: typeof ComboboxHeader;\n    EventsTarget: typeof ComboboxEventsTarget;\n    DropdownTarget: typeof ComboboxDropdownTarget;\n    Group: typeof ComboboxGroup;\n    ClearButton: typeof ComboboxClearButton;\n    HiddenInput: typeof ComboboxHiddenInput;\n  };\n}>;\n\nconst defaultProps = {\n  keepMounted: true,\n  keepMountedMode: 'display-none',\n  withinPortal: true,\n  resetSelectionOnOptionHover: false,\n  width: 'target',\n  transitionProps: { transition: 'fade', duration: 0 },\n  size: 'sm',\n} satisfies Partial<ComboboxProps>;\n\nconst varsResolver = createVarsResolver<ComboboxFactory>((_, { size, dropdownPadding }) => ({\n  options: {\n    '--combobox-option-fz': getFontSize(size),\n    '--combobox-option-padding': getSize(size, 'combobox-option-padding'),\n  },\n\n  dropdown: {\n    '--combobox-padding': dropdownPadding === undefined ? undefined : rem(dropdownPadding),\n    '--combobox-option-fz': getFontSize(size),\n    '--combobox-option-padding': getSize(size, 'combobox-option-padding'),\n  },\n}));\n\nexport const Combobox = (_props: ComboboxProps) => {\n  const props = useProps('Combobox', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    children,\n    store: controlledStore,\n    vars,\n    onOptionSubmit,\n    onClose,\n    size,\n    dropdownPadding,\n    resetSelectionOnOptionHover,\n    __staticSelector,\n    readOnly,\n    attributes,\n    floatingHeight,\n    middlewares,\n    ...others\n  } = props;\n\n  const resolvedMiddlewares: PopoverMiddlewares | undefined =\n    floatingHeight === 'viewport'\n      ? {\n          ...middlewares,\n          flip: false,\n          size: {\n            ...(typeof middlewares?.size === 'object' ? middlewares.size : {}),\n            padding:\n              typeof middlewares?.size === 'object' && middlewares.size.padding !== undefined\n                ? middlewares.size.padding\n                : 10,\n            apply: ({ availableHeight, availableWidth, elements, ...rest }) => {\n              elements.floating.style.setProperty(\n                '--combobox-floating-max-height',\n                `${availableHeight}px`\n              );\n              const userSize = middlewares?.size;\n              if (typeof userSize === 'object' && userSize.apply) {\n                userSize.apply({ availableHeight, availableWidth, elements, ...rest });\n              } else if (userSize) {\n                Object.assign(elements.floating.style, {\n                  maxWidth: `${availableWidth}px`,\n                  maxHeight: `${availableHeight}px`,\n                });\n              }\n            },\n          },\n        }\n      : middlewares;\n\n  const uncontrolledStore = useCombobox();\n  const store = controlledStore || uncontrolledStore;\n\n  const getStyles = useStyles<ComboboxFactory>({\n    name: __staticSelector || 'Combobox',\n    classes,\n    props,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const onDropdownClose = () => {\n    onClose?.();\n    store.closeDropdown();\n  };\n\n  return (\n    <ComboboxProvider\n      value={{\n        getStyles,\n        store,\n        onOptionSubmit,\n        size,\n        resetSelectionOnOptionHover,\n        readOnly,\n        floatingHeight,\n      }}\n    >\n      <Popover\n        opened={store.dropdownOpened}\n        {...others}\n        middlewares={resolvedMiddlewares}\n        onChange={(_opened) => !_opened && onDropdownClose()}\n        withRoles={false}\n        unstyled={unstyled}\n      >\n        {children}\n      </Popover>\n    </ComboboxProvider>\n  );\n};\n\nconst extendCombobox = (c: ExtendComponent<ComboboxFactory>): MantineThemeComponent => c;\n\nCombobox.extend = extendCombobox;\nCombobox.classes = classes;\nCombobox.varsResolver = varsResolver;\nCombobox.displayName = '@mantine/core/Combobox';\nCombobox.Target = ComboboxTarget;\nCombobox.Dropdown = ComboboxDropdown;\nCombobox.Options = ComboboxOptions;\nCombobox.Option = ComboboxOption;\nCombobox.Search = ComboboxSearch;\nCombobox.Empty = ComboboxEmpty;\nCombobox.Chevron = ComboboxChevron;\nCombobox.Footer = ComboboxFooter;\nCombobox.Header = ComboboxHeader;\nCombobox.EventsTarget = ComboboxEventsTarget;\nCombobox.DropdownTarget = ComboboxDropdownTarget;\nCombobox.Group = ComboboxGroup;\nCombobox.ClearButton = ComboboxClearButton;\nCombobox.HiddenInput = ComboboxHiddenInput;\n\nexport namespace Combobox {\n  export type Props = ComboboxProps;\n  export type StylesNames = ComboboxStylesNames;\n  export type Factory = ComboboxFactory;\n\n  export namespace Dropdown {\n    export type Props = ComboboxDropdownProps;\n  }\n\n  export namespace Options {\n    export type Props = ComboboxOptionsProps;\n  }\n\n  export namespace Option {\n    export type Props = ComboboxOptionProps;\n  }\n\n  export namespace Target {\n    export type Props = ComboboxTargetProps;\n  }\n\n  export namespace Chevron {\n    export type Props = ComboboxChevronProps;\n  }\n\n  export namespace Empty {\n    export type Props = ComboboxEmptyProps;\n  }\n\n  export namespace Search {\n    export type Props = ComboboxSearchProps;\n  }\n\n  export namespace Footer {\n    export type Props = ComboboxFooterProps;\n  }\n\n  export namespace Header {\n    export type Props = ComboboxHeaderProps;\n  }\n\n  export namespace DropdownTarget {\n    export type Props = ComboboxDropdownTargetProps;\n  }\n\n  export namespace EventsTarget {\n    export type Props = ComboboxEventsTargetProps;\n  }\n\n  export namespace Group {\n    export type Props = ComboboxGroupProps;\n  }\n\n  export namespace ClearButton {\n    export type Props = ComboboxClearButtonProps;\n  }\n\n  export namespace HiddenInput {\n    export type Props = ComboboxHiddenInputProps;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgHA,MAAM,eAAe;CACnB,aAAa;CACb,iBAAiB;CACjB,cAAc;CACd,6BAA6B;CAC7B,OAAO;CACP,iBAAiB;EAAE,YAAY;EAAQ,UAAU;CAAE;CACnD,MAAM;AACR;AAEA,MAAM,eAAe,oBAAqC,GAAG,EAAE,MAAM,uBAAuB;CAC1F,SAAS;EACP,wBAAwB,YAAY,IAAI;EACxC,6BAA6B,QAAQ,MAAM,yBAAyB;CACtE;CAEA,UAAU;EACR,sBAAsB,oBAAoB,KAAA,IAAY,KAAA,IAAY,IAAI,eAAe;EACrF,wBAAwB,YAAY,IAAI;EACxC,6BAA6B,QAAQ,MAAM,yBAAyB;CACtE;AACF,EAAE;AAEF,MAAa,YAAY,WAA0B;CACjD,MAAM,QAAQ,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,QACA,UACA,UACA,OAAO,iBACP,MACA,gBACA,SACA,MACA,iBACA,6BACA,kBACA,UACA,YACA,gBACA,aACA,GAAG,WACD;CAEJ,MAAM,sBACJ,mBAAmB,aACf;EACE,GAAG;EACH,MAAM;EACN,MAAM;GACJ,GAAI,OAAO,aAAa,SAAS,WAAW,YAAY,OAAO,CAAC;GAChE,SACE,OAAO,aAAa,SAAS,YAAY,YAAY,KAAK,YAAY,KAAA,IAClE,YAAY,KAAK,UACjB;GACN,QAAQ,EAAE,iBAAiB,gBAAgB,UAAU,GAAG,WAAW;IACjE,SAAS,SAAS,MAAM,YACtB,kCACA,GAAG,gBAAgB,GACrB;IACA,MAAM,WAAW,aAAa;IAC9B,IAAI,OAAO,aAAa,YAAY,SAAS,OAC3C,SAAS,MAAM;KAAE;KAAiB;KAAgB;KAAU,GAAG;IAAK,CAAC;SAChE,IAAI,UACT,OAAO,OAAO,SAAS,SAAS,OAAO;KACrC,UAAU,GAAG,eAAe;KAC5B,WAAW,GAAG,gBAAgB;IAChC,CAAC;GAEL;EACF;CACF,IACA;CAEN,MAAM,oBAAoB,YAAY;CACtC,MAAM,QAAQ,mBAAmB;CAEjC,MAAM,YAAY,UAA2B;EAC3C,MAAM,oBAAoB;EAC1B,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,wBAAwB;EAC5B,UAAU;EACV,MAAM,cAAc;CACtB;CAEA,OACE,oBAAC,kBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;EACF;YAEA,oBAAC,SAAD;GACE,QAAQ,MAAM;GACd,GAAI;GACJ,aAAa;GACb,WAAW,YAAY,CAAC,WAAW,gBAAgB;GACnD,WAAW;GACD;GAET;EACM,CAAA;CACO,CAAA;AAEtB;AAEA,MAAM,kBAAkB,MAA+D;AAEvF,SAAS,SAAS;AAClB,SAAS,UAAUA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,SAAS;AAClB,SAAS,WAAW;AACpB,SAAS,UAAU;AACnB,SAAS,SAAS;AAClB,SAAS,SAAS;AAClB,SAAS,QAAQ;AACjB,SAAS,UAAU;AACnB,SAAS,SAAS;AAClB,SAAS,SAAS;AAClB,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,QAAQ;AACjB,SAAS,cAAc;AACvB,SAAS,cAAc"}
+{"version":3,"file":"Combobox.mjs","names":["classes"],"sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import {\n  createVarsResolver,\n  ExtendComponent,\n  Factory,\n  getFontSize,\n  getSize,\n  MantineSize,\n  MantineThemeComponent,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { __PopoverProps, Popover } from '../Popover';\nimport { PopoverMiddlewares } from '../Popover/Popover.types';\nimport { ComboboxProvider } from './Combobox.context';\nimport { ComboboxChevron, ComboboxChevronProps } from './ComboboxChevron/ComboboxChevron';\nimport {\n  ComboboxClearButton,\n  ComboboxClearButtonProps,\n} from './ComboboxClearButton/ComboboxClearButton';\nimport { ComboboxDropdown, ComboboxDropdownProps } from './ComboboxDropdown/ComboboxDropdown';\nimport {\n  ComboboxDropdownTarget,\n  ComboboxDropdownTargetProps,\n} from './ComboboxDropdownTarget/ComboboxDropdownTarget';\nimport { ComboboxEmpty, ComboboxEmptyProps } from './ComboboxEmpty/ComboboxEmpty';\nimport {\n  ComboboxEventsTarget,\n  ComboboxEventsTargetProps,\n} from './ComboboxEventsTarget/ComboboxEventsTarget';\nimport { ComboboxFooter, ComboboxFooterProps } from './ComboboxFooter/ComboboxFooter';\nimport { ComboboxGroup, ComboboxGroupProps } from './ComboboxGroup/ComboboxGroup';\nimport { ComboboxHeader, ComboboxHeaderProps } from './ComboboxHeader/ComboboxHeader';\nimport {\n  ComboboxHiddenInput,\n  ComboboxHiddenInputProps,\n} from './ComboboxHiddenInput/ComboboxHiddenInput';\nimport { ComboboxOption, ComboboxOptionProps } from './ComboboxOption/ComboboxOption';\nimport { ComboboxOptions, ComboboxOptionsProps } from './ComboboxOptions/ComboboxOptions';\nimport { ComboboxSearch, ComboboxSearchProps } from './ComboboxSearch/ComboboxSearch';\nimport { ComboboxTarget, ComboboxTargetProps } from './ComboboxTarget/ComboboxTarget';\nimport { ComboboxStore, useCombobox } from './use-combobox/use-combobox';\nimport classes from './Combobox.module.css';\n\nexport type ComboboxStylesNames =\n  | 'options'\n  | 'dropdown'\n  | 'option'\n  | 'search'\n  | 'empty'\n  | 'footer'\n  | 'header'\n  | 'group'\n  | 'groupLabel';\n\nexport type ComboboxCSSVariables = {\n  options: '--combobox-option-fz' | '--combobox-option-padding';\n  dropdown: '--combobox-padding' | '--combobox-option-fz' | '--combobox-option-padding';\n};\n\nexport interface ComboboxProps extends __PopoverProps, StylesApiProps<ComboboxFactory> {\n  __staticSelector?: string;\n\n  /** Combobox content */\n  children?: React.ReactNode;\n\n  /** Combobox store, can be used to control combobox state */\n  store?: ComboboxStore;\n\n  /** Called when item is selected with the `Enter` key or by clicking it */\n  onOptionSubmit?: (value: string, optionProps: ComboboxOptionProps) => void;\n\n  /** Controls items `font-size` and `padding` @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Controls `padding` of the dropdown @default 4 */\n  dropdownPadding?: React.CSSProperties['padding'];\n\n  /** Determines whether selection should be reset when option is hovered @default false */\n  resetSelectionOnOptionHover?: boolean;\n\n  /** Determines whether the `Combobox` value can be changed */\n  readOnly?: boolean;\n\n  /** If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware. */\n  floatingHeight?: 'viewport';\n}\n\nexport type ComboboxFactory = Factory<{\n  props: ComboboxProps;\n  ref: HTMLDivElement;\n  stylesNames: ComboboxStylesNames;\n  vars: ComboboxCSSVariables;\n  staticComponents: {\n    Target: typeof ComboboxTarget;\n    Dropdown: typeof ComboboxDropdown;\n    Options: typeof ComboboxOptions;\n    Option: typeof ComboboxOption;\n    Search: typeof ComboboxSearch;\n    Empty: typeof ComboboxEmpty;\n    Chevron: typeof ComboboxChevron;\n    Footer: typeof ComboboxFooter;\n    Header: typeof ComboboxHeader;\n    EventsTarget: typeof ComboboxEventsTarget;\n    DropdownTarget: typeof ComboboxDropdownTarget;\n    Group: typeof ComboboxGroup;\n    ClearButton: typeof ComboboxClearButton;\n    HiddenInput: typeof ComboboxHiddenInput;\n  };\n}>;\n\nconst defaultProps = {\n  keepMounted: true,\n  keepMountedMode: 'display-none',\n  withinPortal: true,\n  resetSelectionOnOptionHover: false,\n  width: 'target',\n  transitionProps: { transition: 'fade', duration: 0 },\n  size: 'sm',\n} satisfies Partial<ComboboxProps>;\n\nconst varsResolver = createVarsResolver<ComboboxFactory>((_, { size, dropdownPadding }) => ({\n  options: {\n    '--combobox-option-fz': getFontSize(size),\n    '--combobox-option-padding': getSize(size, 'combobox-option-padding'),\n  },\n\n  dropdown: {\n    '--combobox-padding': dropdownPadding === undefined ? undefined : rem(dropdownPadding),\n    '--combobox-option-fz': getFontSize(size),\n    '--combobox-option-padding': getSize(size, 'combobox-option-padding'),\n  },\n}));\n\nexport const Combobox = (_props: ComboboxProps) => {\n  const props = useProps('Combobox', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    children,\n    store: controlledStore,\n    vars,\n    onOptionSubmit,\n    onClose,\n    size,\n    dropdownPadding,\n    resetSelectionOnOptionHover,\n    __staticSelector,\n    readOnly,\n    attributes,\n    floatingHeight,\n    middlewares,\n    ...others\n  } = props;\n\n  const resolvedMiddlewares: PopoverMiddlewares | undefined =\n    floatingHeight === 'viewport'\n      ? {\n          ...middlewares,\n          flip: false,\n          size: {\n            ...(typeof middlewares?.size === 'object' ? middlewares.size : {}),\n            padding:\n              typeof middlewares?.size === 'object' && middlewares.size.padding !== undefined\n                ? middlewares.size.padding\n                : 10,\n            apply: ({ availableHeight, availableWidth, elements, ...rest }) => {\n              elements.floating.style.setProperty(\n                '--combobox-floating-max-height',\n                `${availableHeight}px`\n              );\n              const userSize = middlewares?.size;\n              if (typeof userSize === 'object' && userSize.apply) {\n                userSize.apply({ availableHeight, availableWidth, elements, ...rest });\n              } else if (userSize) {\n                Object.assign(elements.floating.style, {\n                  maxWidth: `${availableWidth}px`,\n                  maxHeight: `${availableHeight}px`,\n                });\n              }\n            },\n          },\n        }\n      : middlewares;\n\n  const uncontrolledStore = useCombobox();\n  const store = controlledStore || uncontrolledStore;\n\n  const getStyles = useStyles<ComboboxFactory>({\n    name: __staticSelector || 'Combobox',\n    classes,\n    props,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const onDropdownClose = () => {\n    onClose?.();\n    store.closeDropdown();\n  };\n\n  return (\n    <ComboboxProvider\n      value={{\n        getStyles,\n        store,\n        onOptionSubmit,\n        size,\n        resetSelectionOnOptionHover,\n        readOnly,\n        floatingHeight,\n      }}\n    >\n      <Popover\n        opened={store.dropdownOpened}\n        {...others}\n        middlewares={resolvedMiddlewares}\n        onChange={(_opened) => !_opened && onDropdownClose()}\n        withRoles={false}\n        unstyled={unstyled}\n      >\n        {children}\n      </Popover>\n    </ComboboxProvider>\n  );\n};\n\nconst extendCombobox = (c: ExtendComponent<ComboboxFactory>): MantineThemeComponent => c;\n\nCombobox.extend = extendCombobox;\nCombobox.classes = classes;\nCombobox.varsResolver = varsResolver;\nCombobox.displayName = '@mantine/core/Combobox';\nCombobox.Target = ComboboxTarget;\nCombobox.Dropdown = ComboboxDropdown;\nCombobox.Options = ComboboxOptions;\nCombobox.Option = ComboboxOption;\nCombobox.Search = ComboboxSearch;\nCombobox.Empty = ComboboxEmpty;\nCombobox.Chevron = ComboboxChevron;\nCombobox.Footer = ComboboxFooter;\nCombobox.Header = ComboboxHeader;\nCombobox.EventsTarget = ComboboxEventsTarget;\nCombobox.DropdownTarget = ComboboxDropdownTarget;\nCombobox.Group = ComboboxGroup;\nCombobox.ClearButton = ComboboxClearButton;\nCombobox.HiddenInput = ComboboxHiddenInput;\n\nexport namespace Combobox {\n  export type Props = ComboboxProps;\n  export type StylesNames = ComboboxStylesNames;\n  export type Factory = ComboboxFactory;\n\n  export namespace Dropdown {\n    export type Props = ComboboxDropdownProps;\n  }\n\n  export namespace Options {\n    export type Props = ComboboxOptionsProps;\n  }\n\n  export namespace Option {\n    export type Props = ComboboxOptionProps;\n  }\n\n  export namespace Target {\n    export type Props = ComboboxTargetProps;\n  }\n\n  export namespace Chevron {\n    export type Props = ComboboxChevronProps;\n  }\n\n  export namespace Empty {\n    export type Props = ComboboxEmptyProps;\n  }\n\n  export namespace Search {\n    export type Props = ComboboxSearchProps;\n  }\n\n  export namespace Footer {\n    export type Props = ComboboxFooterProps;\n  }\n\n  export namespace Header {\n    export type Props = ComboboxHeaderProps;\n  }\n\n  export namespace DropdownTarget {\n    export type Props = ComboboxDropdownTargetProps;\n  }\n\n  export namespace EventsTarget {\n    export type Props = ComboboxEventsTargetProps;\n  }\n\n  export namespace Group {\n    export type Props = ComboboxGroupProps;\n  }\n\n  export namespace ClearButton {\n    export type Props = ComboboxClearButtonProps;\n  }\n\n  export namespace HiddenInput {\n    export type Props = ComboboxHiddenInputProps;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgHA,MAAM,eAAe;CACnB,aAAa;CACb,iBAAiB;CACjB,cAAc;CACd,6BAA6B;CAC7B,OAAO;CACP,iBAAiB;EAAE,YAAY;EAAQ,UAAU;CAAE;CACnD,MAAM;AACR;AAEA,MAAM,eAAe,oBAAqC,GAAG,EAAE,MAAM,uBAAuB;CAC1F,SAAS;EACP,wBAAwB,YAAY,IAAI;EACxC,6BAA6B,QAAQ,MAAM,yBAAyB;CACtE;CAEA,UAAU;EACR,sBAAsB,oBAAoB,KAAA,IAAY,KAAA,IAAY,IAAI,eAAe;EACrF,wBAAwB,YAAY,IAAI;EACxC,6BAA6B,QAAQ,MAAM,yBAAyB;CACtE;AACF,EAAE;AAEF,MAAa,YAAY,WAA0B;CACjD,MAAM,QAAQ,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,QACA,UACA,UACA,OAAO,iBACP,MACA,gBACA,SACA,MACA,iBACA,6BACA,kBACA,UACA,YACA,gBACA,aACA,GAAG,WACD;CAEJ,MAAM,sBACJ,mBAAmB,aACf;EACE,GAAG;EACH,MAAM;EACN,MAAM;GACJ,GAAI,OAAO,aAAa,SAAS,WAAW,YAAY,OAAO,CAAC;GAChE,SACE,OAAO,aAAa,SAAS,YAAY,YAAY,KAAK,YAAY,KAAA,IAClE,YAAY,KAAK,UACjB;GACN,QAAQ,EAAE,iBAAiB,gBAAgB,UAAU,GAAG,WAAW;IACjE,SAAS,SAAS,MAAM,YACtB,kCACA,GAAG,gBAAgB,GACrB;IACA,MAAM,WAAW,aAAa;IAC9B,IAAI,OAAO,aAAa,YAAY,SAAS,OAC3C,SAAS,MAAM;KAAE;KAAiB;KAAgB;KAAU,GAAG;IAAK,CAAC;SAChE,IAAI,UACT,OAAO,OAAO,SAAS,SAAS,OAAO;KACrC,UAAU,GAAG,eAAe;KAC5B,WAAW,GAAG,gBAAgB;IAChC,CAAC;GAEL;EACF;CACF,IACA;CAEN,MAAM,oBAAoB,YAAY;CACtC,MAAM,QAAQ,mBAAmB;CAEjC,MAAM,YAAY,UAA2B;EAC3C,MAAM,oBAAoB;EAC1B,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,wBAAwB;EAC5B,UAAU;EACV,MAAM,cAAc;CACtB;CAEA,OACE,oBAAC,kBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,UAAA,oBAAC,SAAD;GACE,QAAQ,MAAM;GACd,GAAI;GACJ,aAAa;GACb,WAAW,YAAY,CAAC,WAAW,gBAAgB;GACnD,WAAW;GACD;GAET;EACM,CAAA;CACO,CAAA;AAEtB;AAEA,MAAM,kBAAkB,MAA+D;AAEvF,SAAS,SAAS;AAClB,SAAS,UAAUA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,SAAS;AAClB,SAAS,WAAW;AACpB,SAAS,UAAU;AACnB,SAAS,SAAS;AAClB,SAAS,SAAS;AAClB,SAAS,QAAQ;AACjB,SAAS,UAAU;AACnB,SAAS,SAAS;AAClB,SAAS,SAAS;AAClB,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,QAAQ;AACjB,SAAS,cAAc;AACvB,SAAS,cAAc"}