@mantine/core 9.6.2 → 9.7.0

package/cjs/components/Toggle/Toggle.cjs

@@ -0,0 +1,80 @@
+"use client";
+const require_get_size = require("../../core/utils/get-size/get-size.cjs");
+const require_create_vars_resolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
+const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
+const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
+const require_polymorphic_factory = require("../../core/factory/polymorphic-factory.cjs");
+const require_Box = require("../../core/Box/Box.cjs");
+const require_Toggle_module = require("./Toggle.module.cjs");
+let _mantine_hooks = require("@mantine/hooks");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/@mantine/core/src/components/Toggle/Toggle.tsx
+const defaultProps = { variant: "filled" };
+const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { size, radius, color, variant, autoContrast }) => {
+	const activeColors = theme.variantColorResolver({
+		color: color || theme.primaryColor,
+		theme,
+		variant: variant || "filled",
+		autoContrast
+	});
+	return { root: {
+		"--toggle-size": size !== void 0 ? require_get_size.getSize(size, "toggle-size") : void 0,
+		"--toggle-radius": radius !== void 0 ? require_get_size.getRadius(radius) : void 0,
+		"--toggle-active-bg": color || variant ? activeColors.background : void 0,
+		"--toggle-active-hover": color || variant ? activeColors.hover : void 0,
+		"--toggle-active-color": color || variant ? activeColors.color : void 0
+	} };
+});
+const Toggle = require_polymorphic_factory.polymorphicFactory((_props) => {
+	const props = require_use_props.useProps("Toggle", defaultProps, _props);
+	const { className, style, classNames, styles, unstyled, vars, active, defaultActive, onActiveChange, disabled, size, radius, autoWidth, color, autoContrast, children, component, onClick, tabIndex, attributes, ...others } = props;
+	const [_active, handleActiveChange] = (0, _mantine_hooks.useUncontrolled)({
+		value: active,
+		defaultValue: defaultActive,
+		finalValue: false,
+		onChange: onActiveChange
+	});
+	const getStyles = require_use_styles.useStyles({
+		name: "Toggle",
+		classes: require_Toggle_module.default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+		component: component || "button",
+		type: !component || component === "button" ? "button" : void 0,
+		...others,
+		...getStyles("root", { focusable: true }),
+		"data-active": _active || void 0,
+		"data-disabled": disabled || void 0,
+		"data-auto-width": autoWidth || void 0,
+		disabled,
+		"aria-disabled": disabled || void 0,
+		"aria-pressed": _active,
+		tabIndex: disabled ? -1 : tabIndex,
+		size,
+		onClick: (event) => {
+			if (disabled) {
+				event.preventDefault();
+				return;
+			}
+			handleActiveChange(!_active);
+			onClick?.(event);
+		},
+		children
+	});
+});
+Toggle.classes = require_Toggle_module.default;
+Toggle.varsResolver = varsResolver;
+Toggle.displayName = "@mantine/core/Toggle";
+//#endregion
+exports.Toggle = Toggle;
+
+//# sourceMappingURL=Toggle.cjs.map

package/cjs/components/Toggle/Toggle.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.cjs","names":["createVarsResolver","getSize","getRadius","polymorphicFactory","useProps","useUncontrolled","useStyles","Box","classes"],"sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import { useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  getRadius,\n  getSize,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  polymorphicFactory,\n  PolymorphicFactory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './Toggle.module.css';\n\nexport type ToggleStylesNames = 'root';\nexport type ToggleVariant = 'light' | 'filled';\n\nexport type ToggleCssVariables = {\n  root:\n    | '--toggle-size'\n    | '--toggle-radius'\n    | '--toggle-active-bg'\n    | '--toggle-active-hover'\n    | '--toggle-active-color';\n};\n\nexport interface ToggleProps\n  extends BoxProps, StylesApiProps<ToggleFactory>, ElementProps<'button'> {\n  /** Controlled active state */\n  active?: boolean;\n\n  /** Uncontrolled default active state */\n  defaultActive?: boolean;\n\n  /** Called when active state changes */\n  onActiveChange?: (active: boolean) => void;\n\n  /** If set, the toggle is disabled */\n  disabled?: boolean;\n\n  /** Controls toggle height and min-width, `'md'` by default */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, `theme.defaultRadius` by default */\n  radius?: MantineRadius;\n\n  /** If set, the toggle width adjusts to content instead of being square, `false` by default */\n  autoWidth?: boolean;\n\n  /** Key of `theme.colors` or any valid CSS color, `theme.primaryColor` by default */\n  color?: MantineColor;\n\n  /** Determines whether icon color with filled variant should be changed based on the given `color` prop */\n  autoContrast?: boolean;\n}\n\nexport type ToggleFactory = PolymorphicFactory<{\n  props: ToggleProps;\n  defaultRef: HTMLButtonElement;\n  defaultComponent: 'button';\n  stylesNames: ToggleStylesNames;\n  vars: ToggleCssVariables;\n  variant: ToggleVariant;\n}>;\n\nconst defaultProps = {\n  variant: 'filled',\n} satisfies Partial<ToggleProps>;\n\nconst varsResolver = createVarsResolver<ToggleFactory>(\n  (theme, { size, radius, color, variant, autoContrast }) => {\n    const activeColors = theme.variantColorResolver({\n      color: color || theme.primaryColor,\n      theme,\n      variant: variant || 'filled',\n      autoContrast,\n    });\n\n    return {\n      root: {\n        '--toggle-size': size !== undefined ? getSize(size, 'toggle-size') : undefined,\n        '--toggle-radius': radius !== undefined ? getRadius(radius) : undefined,\n        '--toggle-active-bg': color || variant ? activeColors.background : undefined,\n        '--toggle-active-hover': color || variant ? activeColors.hover : undefined,\n        '--toggle-active-color': color || variant ? activeColors.color : undefined,\n      },\n    };\n  }\n);\n\nexport const Toggle = polymorphicFactory<ToggleFactory>((_props) => {\n  const props = useProps('Toggle', defaultProps, _props);\n  const {\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    active,\n    defaultActive,\n    onActiveChange,\n    disabled,\n    size,\n    radius,\n    autoWidth,\n    color,\n    autoContrast,\n    children,\n    component,\n    onClick,\n    tabIndex,\n    attributes,\n    ...others\n  } = props as typeof props & { component?: any };\n\n  const [_active, handleActiveChange] = useUncontrolled({\n    value: active,\n    defaultValue: defaultActive,\n    finalValue: false,\n    onChange: onActiveChange,\n  });\n\n  const getStyles = useStyles<ToggleFactory>({\n    name: 'Toggle',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <Box\n      component={component || 'button'}\n      type={!component || component === 'button' ? 'button' : undefined}\n      {...others}\n      {...getStyles('root', { focusable: true })}\n      data-active={_active || undefined}\n      data-disabled={disabled || undefined}\n      data-auto-width={autoWidth || undefined}\n      disabled={disabled}\n      aria-disabled={disabled || undefined}\n      aria-pressed={_active}\n      tabIndex={disabled ? -1 : tabIndex}\n      size={size}\n      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled) {\n          event.preventDefault();\n          return;\n        }\n        handleActiveChange(!_active);\n        onClick?.(event);\n      }}\n    >\n      {children}\n    </Box>\n  );\n});\n\nToggle.classes = classes;\nToggle.varsResolver = varsResolver;\nToggle.displayName = '@mantine/core/Toggle';\n"],"mappings":";;;;;;;;;;;AAsEA,MAAM,eAAe,EACnB,SAAS,SACX;AAEA,MAAM,eAAeA,6BAAAA,oBAClB,OAAO,EAAE,MAAM,QAAQ,OAAO,SAAS,mBAAmB;CACzD,MAAM,eAAe,MAAM,qBAAqB;EAC9C,OAAO,SAAS,MAAM;EACtB;EACA,SAAS,WAAW;EACpB;CACF,CAAC;CAED,OAAO,EACL,MAAM;EACJ,iBAAiB,SAAS,KAAA,IAAYC,iBAAAA,QAAQ,MAAM,aAAa,IAAI,KAAA;EACrE,mBAAmB,WAAW,KAAA,IAAYC,iBAAAA,UAAU,MAAM,IAAI,KAAA;EAC9D,sBAAsB,SAAS,UAAU,aAAa,aAAa,KAAA;EACnE,yBAAyB,SAAS,UAAU,aAAa,QAAQ,KAAA;EACjE,yBAAyB,SAAS,UAAU,aAAa,QAAQ,KAAA;CACnE,EACF;AACF,CACF;AAEA,MAAa,SAASC,4BAAAA,oBAAmC,WAAW;CAClE,MAAM,QAAQC,kBAAAA,SAAS,UAAU,cAAc,MAAM;CACrD,MAAM,EACJ,WACA,OACA,YACA,QACA,UACA,MACA,QACA,eACA,gBACA,UACA,MACA,QACA,WACA,OACA,cACA,UACA,WACA,SACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,CAAC,SAAS,uBAAA,GAAsBC,eAAAA,gBAAAA,CAAgB;EACpD,OAAO;EACP,cAAc;EACd,YAAY;EACZ,UAAU;CACZ,CAAC;CAED,MAAM,YAAYC,mBAAAA,UAAyB;EACzC,MAAM;EACN,SAAA,sBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,WAAW,aAAa;EACxB,MAAM,CAAC,aAAa,cAAc,WAAW,WAAW,KAAA;EACxD,GAAI;EACJ,GAAI,UAAU,QAAQ,EAAE,WAAW,KAAK,CAAC;EACzC,eAAa,WAAW,KAAA;EACxB,iBAAe,YAAY,KAAA;EAC3B,mBAAiB,aAAa,KAAA;EACpB;EACV,iBAAe,YAAY,KAAA;EAC3B,gBAAc;EACd,UAAU,WAAW,KAAK;EACpB;EACN,UAAU,UAA+C;GACvD,IAAI,UAAU;IACZ,MAAM,eAAe;IACrB;GACF;GACA,mBAAmB,CAAC,OAAO;GAC3B,UAAU,KAAK;EACjB;EAEC;CACE,CAAA;AAET,CAAC;AAED,OAAO,UAAUC,sBAAAA;AACjB,OAAO,eAAe;AACtB,OAAO,cAAc"}

package/cjs/components/Toggle/Toggle.module.cjs

@@ -0,0 +1,7 @@
+"use client";
+//#region packages/@mantine/core/src/components/Toggle/Toggle.module.css
+var Toggle_module_default = { "root": "m_ba2e839b" };
+//#endregion
+exports.default = Toggle_module_default;
+
+//# sourceMappingURL=Toggle.module.cjs.map

package/cjs/components/Toggle/Toggle.module.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.module.cjs","names":[],"sources":["../../../src/components/Toggle/Toggle.module.css"],"sourcesContent":[".root {\n  --toggle-size-xs: 22px;\n  --toggle-size-sm: 26px;\n  --toggle-size-md: 30px;\n  --toggle-size-lg: 36px;\n  --toggle-size-xl: 42px;\n\n  --toggle-size: var(--toggle-size-md);\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: 1px solid;\n  border-radius: var(--toggle-radius, var(--mantine-radius-default));\n  cursor: pointer;\n  appearance: none;\n  text-decoration: none;\n  line-height: 1;\n  user-select: none;\n  font-size: var(--mantine-font-size-xs);\n  width: var(--toggle-size);\n  min-width: var(--toggle-size);\n  height: var(--toggle-size);\n  padding: calc(var(--toggle-size) / 5);\n  font-weight: var(--mantine-font-weight-medium);\n\n  &:where([data-auto-width]) {\n    width: auto;\n    padding: 0 calc(var(--toggle-size) / 4);\n  }\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n    color: var(--mantine-color-gray-7);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-6);\n    border-color: var(--mantine-color-dark-4);\n    color: var(--mantine-color-dark-1);\n  }\n\n  @mixin hover {\n    &:where(:not([data-disabled], [data-active])) {\n      @mixin where-light {\n        background-color: var(--mantine-color-gray-0);\n      }\n\n      @mixin where-dark {\n        background-color: var(--mantine-color-dark-5);\n      }\n    }\n  }\n\n  &:where([data-active]) {\n    background-color: var(--toggle-active-bg, var(--mantine-primary-color-light));\n    color: var(--toggle-active-color, var(--mantine-primary-color-light-color));\n    border-color: transparent;\n\n    @mixin hover {\n      &:where(:not([data-disabled])) {\n        background-color: var(--toggle-active-hover, var(--mantine-primary-color-light-hover));\n      }\n    }\n  }\n\n  &:where([data-disabled]) {\n    cursor: not-allowed;\n    color: var(--mantine-color-disabled-color);\n    background-color: var(--mantine-color-disabled);\n    border-color: transparent;\n  }\n\n  &:where([data-disabled][data-active]) {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-4);\n      color: var(--mantine-color-gray-6);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-4);\n      color: var(--mantine-color-dark-2);\n    }\n  }\n}\n"],"mappings":""}

package/cjs/components/Toolbar/Toolbar.cjs

@@ -0,0 +1,107 @@
+"use client";
+const require_get_size = require("../../core/utils/get-size/get-size.cjs");
+const require_create_vars_resolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
+const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
+const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
+const require_factory = require("../../core/factory/factory.cjs");
+const require_Box = require("../../core/Box/Box.cjs");
+const require_DirectionProvider = require("../../core/DirectionProvider/DirectionProvider.cjs");
+const require_Toolbar_context = require("./Toolbar.context.cjs");
+const require_Toolbar_module = require("./Toolbar.module.cjs");
+const require_ToolbarDivider = require("./ToolbarDivider/ToolbarDivider.cjs");
+const require_ToolbarGroup = require("./ToolbarGroup/ToolbarGroup.cjs");
+const require_ToolbarToggle = require("./ToolbarToggle/ToolbarToggle.cjs");
+const require_ToolbarToggleGroup = require("./ToolbarToggleGroup/ToolbarToggleGroup.cjs");
+const require_ToolbarToggleItem = require("./ToolbarToggleItem/ToolbarToggleItem.cjs");
+const require_use_toolbar_navigation = require("./use-toolbar-navigation.cjs");
+let _mantine_hooks = require("@mantine/hooks");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/@mantine/core/src/components/Toolbar/Toolbar.tsx
+const defaultProps = {
+	orientation: "horizontal",
+	loop: true,
+	withBorder: true,
+	variant: "filled"
+};
+const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { size, radius, color, variant, autoContrast }) => {
+	const activeColors = theme.variantColorResolver({
+		color: color || theme.primaryColor,
+		theme,
+		variant: variant || "filled",
+		autoContrast
+	});
+	return {
+		root: {
+			"--toolbar-toggle-size": size !== void 0 ? require_get_size.getSize(size, "toolbar-toggle-size") : void 0,
+			"--toolbar-padding": size !== void 0 ? require_get_size.getSize(size, "toolbar-padding") : void 0,
+			"--toolbar-gap": size !== void 0 ? require_get_size.getSize(size, "toolbar-gap") : void 0,
+			"--toolbar-radius": radius !== void 0 ? require_get_size.getRadius(radius) : void 0
+		},
+		toggle: {
+			"--toolbar-toggle-active-bg": activeColors.background,
+			"--toolbar-toggle-active-hover": activeColors.hover,
+			"--toolbar-toggle-active-color": activeColors.color
+		}
+	};
+});
+const Toolbar = require_factory.factory((_props) => {
+	const props = require_use_props.useProps("Toolbar", defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, vars, orientation, loop, size, radius, withBorder, color, autoContrast, variant, children, attributes, onKeyDown, onFocus, ref, ...others } = props;
+	const { dir } = require_DirectionProvider.useDirection();
+	const getStyles = require_use_styles.useStyles({
+		name: "Toolbar",
+		classes: require_Toolbar_module.default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver
+	});
+	const { toolbarRef, handleKeyDown, handleItemFocus } = require_use_toolbar_navigation.useToolbarNavigation({
+		orientation,
+		loop,
+		dir
+	});
+	const mergedRef = (0, _mantine_hooks.useMergedRef)(toolbarRef, ref);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Toolbar_context.ToolbarProvider, {
+		value: {
+			getStyles,
+			orientation
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+			ref: mergedRef,
+			role: "toolbar",
+			"aria-orientation": orientation,
+			...getStyles("root"),
+			"data-orientation": orientation,
+			"data-with-border": withBorder || void 0,
+			variant,
+			size,
+			...others,
+			onKeyDown: (event) => {
+				handleKeyDown(event);
+				onKeyDown?.(event);
+			},
+			onFocus: (event) => {
+				handleItemFocus(event);
+				onFocus?.(event);
+			},
+			children
+		})
+	});
+});
+Toolbar.classes = require_Toolbar_module.default;
+Toolbar.displayName = "@mantine/core/Toolbar";
+Toolbar.Group = require_ToolbarGroup.ToolbarGroup;
+Toolbar.Toggle = require_ToolbarToggle.ToolbarToggle;
+Toolbar.ToggleGroup = require_ToolbarToggleGroup.ToolbarToggleGroup;
+Toolbar.ToggleItem = require_ToolbarToggleItem.ToolbarToggleItem;
+Toolbar.Divider = require_ToolbarDivider.ToolbarDivider;
+//#endregion
+exports.Toolbar = Toolbar;
+
+//# sourceMappingURL=Toolbar.cjs.map

package/cjs/components/Toolbar/Toolbar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.cjs","names":["createVarsResolver","getSize","getRadius","factory","useProps","useDirection","useStyles","useToolbarNavigation","useMergedRef","ToolbarProvider","Box","classes","ToolbarGroup","ToolbarToggle","ToolbarToggleGroup","ToolbarToggleItem","ToolbarDivider"],"sources":["../../../src/components/Toolbar/Toolbar.tsx"],"sourcesContent":["import { useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  getSize,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  StylesApiProps,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { ToggleVariant } from '../Toggle';\nimport { ToolbarProvider } from './Toolbar.context';\nimport { ToolbarDivider, ToolbarDividerStylesNames } from './ToolbarDivider/ToolbarDivider';\nimport { ToolbarGroup, ToolbarGroupStylesNames } from './ToolbarGroup/ToolbarGroup';\nimport { ToolbarToggle, ToolbarToggleStylesNames } from './ToolbarToggle/ToolbarToggle';\nimport { ToolbarToggleGroup } from './ToolbarToggleGroup/ToolbarToggleGroup';\nimport {\n  ToolbarToggleItem,\n  ToolbarToggleItemStylesNames,\n} from './ToolbarToggleItem/ToolbarToggleItem';\nimport { useToolbarNavigation } from './use-toolbar-navigation';\nimport classes from './Toolbar.module.css';\n\nexport type ToolbarStylesNames =\n  | 'root'\n  | ToolbarGroupStylesNames\n  | ToolbarToggleStylesNames\n  | ToolbarToggleItemStylesNames\n  | ToolbarDividerStylesNames;\n\nexport type ToolbarCssVariables = {\n  root: '--toolbar-toggle-size' | '--toolbar-padding' | '--toolbar-gap' | '--toolbar-radius';\n  toggle:\n    | '--toolbar-toggle-active-bg'\n    | '--toolbar-toggle-active-hover'\n    | '--toolbar-toggle-active-color';\n};\n\nexport interface ToolbarProps\n  extends BoxProps, StylesApiProps<ToolbarFactory>, ElementProps<'div'> {\n  /** Toolbar orientation, `'horizontal'` by default */\n  orientation?: 'horizontal' | 'vertical';\n\n  /** Whether arrow key navigation wraps from last to first item, `true` by default */\n  loop?: boolean;\n\n  /** Controls size of toggle components, padding, and gap, `'md'` by default */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, propagated to all children, `theme.defaultRadius` by default */\n  radius?: MantineRadius;\n\n  /** Determines whether the toolbar has a border, `true` by default */\n  withBorder?: boolean;\n\n  /** Key of `theme.colors` or any valid CSS color, controls color of child toggle components */\n  color?: MantineColor;\n\n  /** Determines whether icon color with filled variant should be changed based on the given `color` prop */\n  autoContrast?: boolean;\n\n  /** Toolbar content */\n  children: React.ReactNode;\n}\n\nexport type ToolbarFactory = Factory<{\n  props: ToolbarProps;\n  ref: HTMLDivElement;\n  stylesNames: ToolbarStylesNames;\n  vars: ToolbarCssVariables;\n  variant: ToggleVariant;\n  staticComponents: {\n    Group: typeof ToolbarGroup;\n    Toggle: typeof ToolbarToggle;\n    ToggleGroup: typeof ToolbarToggleGroup;\n    ToggleItem: typeof ToolbarToggleItem;\n    Divider: typeof ToolbarDivider;\n  };\n}>;\n\nconst defaultProps = {\n  orientation: 'horizontal',\n  loop: true,\n  withBorder: true,\n  variant: 'filled',\n} satisfies Partial<ToolbarProps>;\n\nconst varsResolver = createVarsResolver<ToolbarFactory>(\n  (theme, { size, radius, color, variant, autoContrast }) => {\n    const activeColors = theme.variantColorResolver({\n      color: color || theme.primaryColor,\n      theme,\n      variant: variant || 'filled',\n      autoContrast,\n    });\n\n    return {\n      root: {\n        '--toolbar-toggle-size':\n          size !== undefined ? getSize(size, 'toolbar-toggle-size') : undefined,\n        '--toolbar-padding': size !== undefined ? getSize(size, 'toolbar-padding') : undefined,\n        '--toolbar-gap': size !== undefined ? getSize(size, 'toolbar-gap') : undefined,\n        '--toolbar-radius': radius !== undefined ? getRadius(radius) : undefined,\n      },\n      toggle: {\n        '--toolbar-toggle-active-bg': activeColors.background,\n        '--toolbar-toggle-active-hover': activeColors.hover,\n        '--toolbar-toggle-active-color': activeColors.color,\n      },\n    };\n  }\n);\n\nexport const Toolbar = factory<ToolbarFactory>((_props) => {\n  const props = useProps('Toolbar', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    orientation,\n    loop,\n    size,\n    radius,\n    withBorder,\n    color,\n    autoContrast,\n    variant,\n    children,\n    attributes,\n    onKeyDown,\n    onFocus,\n    ref,\n    ...others\n  } = props;\n\n  const { dir } = useDirection();\n\n  const getStyles = useStyles<ToolbarFactory>({\n    name: 'Toolbar',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { toolbarRef, handleKeyDown, handleItemFocus } = useToolbarNavigation({\n    orientation: orientation!,\n    loop: loop!,\n    dir,\n  });\n\n  const mergedRef = useMergedRef(toolbarRef, ref);\n\n  return (\n    <ToolbarProvider value={{ getStyles, orientation: orientation! }}>\n      <Box\n        ref={mergedRef}\n        role=\"toolbar\"\n        aria-orientation={orientation}\n        {...getStyles('root')}\n        data-orientation={orientation}\n        data-with-border={withBorder || undefined}\n        variant={variant}\n        size={size}\n        {...others}\n        onKeyDown={(event) => {\n          handleKeyDown(event);\n          onKeyDown?.(event);\n        }}\n        onFocus={(event) => {\n          handleItemFocus(event);\n          onFocus?.(event);\n        }}\n      >\n        {children}\n      </Box>\n    </ToolbarProvider>\n  );\n});\n\nToolbar.classes = classes;\nToolbar.displayName = '@mantine/core/Toolbar';\nToolbar.Group = ToolbarGroup;\nToolbar.Toggle = ToolbarToggle;\nToolbar.ToggleGroup = ToolbarToggleGroup;\nToolbar.ToggleItem = ToolbarToggleItem;\nToolbar.Divider = ToolbarDivider;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAwFA,MAAM,eAAe;CACnB,aAAa;CACb,MAAM;CACN,YAAY;CACZ,SAAS;AACX;AAEA,MAAM,eAAeA,6BAAAA,oBAClB,OAAO,EAAE,MAAM,QAAQ,OAAO,SAAS,mBAAmB;CACzD,MAAM,eAAe,MAAM,qBAAqB;EAC9C,OAAO,SAAS,MAAM;EACtB;EACA,SAAS,WAAW;EACpB;CACF,CAAC;CAED,OAAO;EACL,MAAM;GACJ,yBACE,SAAS,KAAA,IAAYC,iBAAAA,QAAQ,MAAM,qBAAqB,IAAI,KAAA;GAC9D,qBAAqB,SAAS,KAAA,IAAYA,iBAAAA,QAAQ,MAAM,iBAAiB,IAAI,KAAA;GAC7E,iBAAiB,SAAS,KAAA,IAAYA,iBAAAA,QAAQ,MAAM,aAAa,IAAI,KAAA;GACrE,oBAAoB,WAAW,KAAA,IAAYC,iBAAAA,UAAU,MAAM,IAAI,KAAA;EACjE;EACA,QAAQ;GACN,8BAA8B,aAAa;GAC3C,iCAAiC,aAAa;GAC9C,iCAAiC,aAAa;EAChD;CACF;AACF,CACF;AAEA,MAAa,UAAUC,gBAAAA,SAAyB,WAAW;CACzD,MAAM,QAAQC,kBAAAA,SAAS,WAAW,cAAc,MAAM;CACtD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,aACA,MACA,MACA,QACA,YACA,OACA,cACA,SACA,UACA,YACA,WACA,SACA,KACA,GAAG,WACD;CAEJ,MAAM,EAAE,QAAQC,0BAAAA,aAAa;CAE7B,MAAM,YAAYC,mBAAAA,UAA0B;EAC1C,MAAM;EACN,SAAA,uBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,YAAY,eAAe,oBAAoBC,+BAAAA,qBAAqB;EAC7D;EACP;EACN;CACF,CAAC;CAED,MAAM,aAAA,GAAYC,eAAAA,aAAAA,CAAa,YAAY,GAAG;CAE9C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,wBAAAA,iBAAD;EAAiB,OAAO;GAAE;GAAwB;EAAa;EAC7D,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;GACE,KAAK;GACL,MAAK;GACL,oBAAkB;GAClB,GAAI,UAAU,MAAM;GACpB,oBAAkB;GAClB,oBAAkB,cAAc,KAAA;GACvB;GACH;GACN,GAAI;GACJ,YAAY,UAAU;IACpB,cAAc,KAAK;IACnB,YAAY,KAAK;GACnB;GACA,UAAU,UAAU;IAClB,gBAAgB,KAAK;IACrB,UAAU,KAAK;GACjB;GAEC;EACE,CAAA;CACU,CAAA;AAErB,CAAC;AAED,QAAQ,UAAUC,uBAAAA;AAClB,QAAQ,cAAc;AACtB,QAAQ,QAAQC,qBAAAA;AAChB,QAAQ,SAASC,sBAAAA;AACjB,QAAQ,cAAcC,2BAAAA;AACtB,QAAQ,aAAaC,0BAAAA;AACrB,QAAQ,UAAUC,uBAAAA"}

package/cjs/components/Toolbar/Toolbar.context.cjs

@@ -0,0 +1,8 @@
+"use client";
+//#region packages/@mantine/core/src/components/Toolbar/Toolbar.context.ts
+const [ToolbarProvider, useToolbarContext] = require("../../core/utils/create-safe-context/create-safe-context.cjs").createSafeContext("Toolbar component was not found in tree");
+//#endregion
+exports.ToolbarProvider = ToolbarProvider;
+exports.useToolbarContext = useToolbarContext;
+
+//# sourceMappingURL=Toolbar.context.cjs.map

package/cjs/components/Toolbar/Toolbar.context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.context.cjs","names":["createSafeContext"],"sources":["../../../src/components/Toolbar/Toolbar.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { ToolbarFactory } from './Toolbar';\n\nexport interface ToolbarContextValue {\n  getStyles: GetStylesApi<ToolbarFactory>;\n  orientation: 'horizontal' | 'vertical';\n}\n\nexport const [ToolbarProvider, useToolbarContext] = createSafeContext<ToolbarContextValue>(\n  'Toolbar component was not found in tree'\n);\n"],"mappings":";;AAQA,MAAa,CAAC,iBAAiB,2FAAqBA,CAAAA,CAAAA,kBAClD,yCACF"}

package/cjs/components/Toolbar/Toolbar.module.cjs

@@ -0,0 +1,12 @@
+"use client";
+//#region packages/@mantine/core/src/components/Toolbar/Toolbar.module.css
+var Toolbar_module_default = {
+	"root": "m_a2d26014",
+	"group": "m_b6dffd8d",
+	"toggle": "m_3b209606",
+	"divider": "m_d1258ea7"
+};
+//#endregion
+exports.default = Toolbar_module_default;
+
+//# sourceMappingURL=Toolbar.module.cjs.map

package/cjs/components/Toolbar/Toolbar.module.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.module.cjs","names":[],"sources":["../../../src/components/Toolbar/Toolbar.module.css"],"sourcesContent":[".root {\n  --toolbar-toggle-size-xs: 22px;\n  --toolbar-toggle-size-sm: 26px;\n  --toolbar-toggle-size-md: 30px;\n  --toolbar-toggle-size-lg: 36px;\n  --toolbar-toggle-size-xl: 42px;\n\n  --toolbar-padding-xs: 4px;\n  --toolbar-padding-sm: 5px;\n  --toolbar-padding-md: 6px;\n  --toolbar-padding-lg: 8px;\n  --toolbar-padding-xl: 12px;\n\n  --toolbar-gap-xs: calc(var(--mantine-spacing-xs) / 2);\n  --toolbar-gap-sm: var(--mantine-spacing-xs);\n  --toolbar-gap-md: var(--mantine-spacing-sm);\n  --toolbar-gap-lg: var(--mantine-spacing-sm);\n  --toolbar-gap-xl: var(--mantine-spacing-md);\n\n  --toolbar-toggle-size: var(--toolbar-toggle-size-md);\n  --toolbar-padding: var(--toolbar-padding-md);\n  --toolbar-gap: var(--toolbar-gap-md);\n  --_tr: var(--toolbar-radius, var(--mantine-radius-default));\n  --toolbar-toggle-radius: max(calc(var(--_tr) - var(--toolbar-padding)), min(var(--_tr), 2px));\n\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--toolbar-gap);\n  background-color: var(--mantine-color-body);\n  border-radius: var(--toolbar-radius, var(--mantine-radius-default));\n  padding: var(--toolbar-padding);\n\n  &:where([data-with-border]) {\n    border: 1px solid;\n\n    @mixin where-light {\n      border-color: var(--mantine-color-gray-4);\n    }\n\n    @mixin where-dark {\n      border-color: var(--mantine-color-dark-4);\n    }\n  }\n\n  &:where([data-orientation='vertical']) {\n    flex-direction: column;\n    align-items: stretch;\n    width: fit-content;\n  }\n}\n\n.group {\n  display: flex;\n  background-color: var(--mantine-color-body);\n\n  & :where([data-toolbar-toggle]) {\n    &:focus-visible {\n      position: relative;\n      z-index: 1;\n    }\n\n    &:not(:only-child):first-child {\n      border-end-end-radius: 0;\n      border-start-end-radius: 0;\n      border-inline-end-width: calc(1px / 2);\n    }\n\n    &:not(:only-child):last-child {\n      border-end-start-radius: 0;\n      border-start-start-radius: 0;\n      border-inline-start-width: calc(1px / 2);\n    }\n\n    &:not(:only-child):not(:first-child):not(:last-child) {\n      border-radius: 0;\n      border-inline-width: calc(1px / 2);\n    }\n  }\n\n  &:where([data-orientation='vertical']) {\n    flex-direction: column;\n\n    & :where([data-toolbar-toggle]) {\n      &:not(:only-child):first-child {\n        border-end-start-radius: 0;\n        border-end-end-radius: 0;\n        border-start-end-radius: var(--toolbar-toggle-radius);\n        border-inline-end-width: 1px;\n        border-bottom-width: calc(1px / 2);\n      }\n\n      &:not(:only-child):last-child {\n        border-start-start-radius: 0;\n        border-start-end-radius: 0;\n        border-end-start-radius: var(--toolbar-toggle-radius);\n        border-inline-start-width: 1px;\n        border-top-width: calc(1px / 2);\n      }\n\n      &:not(:only-child):not(:first-child):not(:last-child) {\n        border-radius: 0;\n        border-inline-width: 1px;\n        border-bottom-width: calc(1px / 2);\n        border-top-width: calc(1px / 2);\n      }\n    }\n  }\n}\n\n.toggle {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: var(--toolbar-toggle-radius);\n  cursor: pointer;\n  appearance: none;\n  text-decoration: none;\n  line-height: 1;\n  user-select: none;\n  font-size: var(--mantine-font-size-xs);\n  width: var(--toolbar-toggle-size);\n  min-width: var(--toolbar-toggle-size);\n  height: var(--toolbar-toggle-size);\n  padding: calc(var(--toolbar-toggle-size) / 5);\n  border: 1px solid;\n  font-weight: var(--mantine-font-weight-medium);\n\n  &:where([data-auto-width]) {\n    width: auto;\n    padding: 0 calc(var(--toolbar-toggle-size) / 4);\n  }\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n    color: var(--mantine-color-gray-7);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-6);\n    border-color: var(--mantine-color-dark-4);\n    color: var(--mantine-color-dark-1);\n  }\n\n  @mixin hover {\n    &:where(:not([data-disabled], [data-active])) {\n      @mixin where-light {\n        background-color: var(--mantine-color-gray-0);\n      }\n\n      @mixin where-dark {\n        background-color: var(--mantine-color-dark-5);\n      }\n    }\n  }\n\n  &:where([data-active]) {\n    background-color: var(--toolbar-toggle-active-bg, var(--mantine-primary-color-light));\n    color: var(--toolbar-toggle-active-color, var(--mantine-primary-color-light-color));\n    border-color: transparent;\n\n    @mixin hover {\n      &:where(:not([data-disabled])) {\n        background-color: var(\n          --toolbar-toggle-active-hover,\n          var(--mantine-primary-color-light-hover)\n        );\n      }\n    }\n  }\n\n  &:where([data-disabled]) {\n    cursor: not-allowed;\n    color: var(--mantine-color-disabled-color);\n    background-color: var(--mantine-color-disabled);\n    border-color: transparent;\n  }\n\n  &:where([data-disabled][data-active]) {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-4);\n      color: var(--mantine-color-gray-6);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-4);\n      color: var(--mantine-color-dark-2);\n    }\n  }\n}\n\n.divider {\n  @mixin where-light {\n    background-color: var(--mantine-color-gray-4);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-4);\n  }\n\n  &:where([data-orientation='horizontal']) {\n    width: 1px;\n    align-self: stretch;\n  }\n\n  &:where([data-orientation='vertical']) {\n    height: 1px;\n    align-self: stretch;\n  }\n}\n"],"mappings":""}

package/cjs/components/Toolbar/ToolbarDivider/ToolbarDivider.cjs

@@ -0,0 +1,31 @@
+"use client";
+const require_use_props = require("../../../core/MantineProvider/use-props/use-props.cjs");
+const require_factory = require("../../../core/factory/factory.cjs");
+const require_Box = require("../../../core/Box/Box.cjs");
+const require_Toolbar_context = require("../Toolbar.context.cjs");
+const require_Toolbar_module = require("../Toolbar.module.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/@mantine/core/src/components/Toolbar/ToolbarDivider/ToolbarDivider.tsx
+const defaultProps = {};
+const ToolbarDivider = require_factory.factory((_props) => {
+	const { classNames, className, style, styles, vars, "aria-orientation": ariaOrientation, ...others } = require_use_props.useProps("ToolbarDivider", defaultProps, _props);
+	const ctx = require_Toolbar_context.useToolbarContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+		...others,
+		role: "separator",
+		"aria-orientation": ariaOrientation ?? (ctx.orientation === "horizontal" ? "vertical" : "horizontal"),
+		...ctx.getStyles("divider", {
+			className,
+			classNames,
+			style,
+			styles
+		}),
+		"data-orientation": ctx.orientation
+	});
+});
+ToolbarDivider.classes = require_Toolbar_module.default;
+ToolbarDivider.displayName = "@mantine/core/ToolbarDivider";
+//#endregion
+exports.ToolbarDivider = ToolbarDivider;
+
+//# sourceMappingURL=ToolbarDivider.cjs.map

package/cjs/components/Toolbar/ToolbarDivider/ToolbarDivider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarDivider.cjs","names":["factory","useProps","useToolbarContext","Box","classes"],"sources":["../../../../src/components/Toolbar/ToolbarDivider/ToolbarDivider.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useToolbarContext } from '../Toolbar.context';\nimport classes from '../Toolbar.module.css';\n\nexport type ToolbarDividerStylesNames = 'divider';\n\nexport interface ToolbarDividerProps\n  extends BoxProps, CompoundStylesApiProps<ToolbarDividerFactory>, ElementProps<'div'> {}\n\nexport type ToolbarDividerFactory = Factory<{\n  props: ToolbarDividerProps;\n  ref: HTMLDivElement;\n  stylesNames: ToolbarDividerStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps: Partial<ToolbarDividerProps> = {};\n\nexport const ToolbarDivider = factory<ToolbarDividerFactory>((_props) => {\n  const props = useProps('ToolbarDivider', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    'aria-orientation': ariaOrientation,\n    ...others\n  } = props;\n  const ctx = useToolbarContext();\n\n  return (\n    <Box\n      {...others}\n      role=\"separator\"\n      aria-orientation={\n        ariaOrientation ?? (ctx.orientation === 'horizontal' ? 'vertical' : 'horizontal')\n      }\n      {...ctx.getStyles('divider', { className, classNames, style, styles })}\n      data-orientation={ctx.orientation}\n    />\n  );\n});\n\nToolbarDivider.classes = classes;\nToolbarDivider.displayName = '@mantine/core/ToolbarDivider';\n"],"mappings":";;;;;;;;AAwBA,MAAM,eAA6C,CAAC;AAEpD,MAAa,iBAAiBA,gBAAAA,SAAgC,WAAW;CAEvE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,oBAAoB,iBACpB,GAAG,WARSC,kBAAAA,SAAS,kBAAkB,cAAc,MAS/C;CACR,MAAM,MAAMC,wBAAAA,kBAAkB;CAE9B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,GAAI;EACJ,MAAK;EACL,oBACE,oBAAoB,IAAI,gBAAgB,eAAe,aAAa;EAEtE,GAAI,IAAI,UAAU,WAAW;GAAE;GAAW;GAAY;GAAO;EAAO,CAAC;EACrE,oBAAkB,IAAI;CACvB,CAAA;AAEL,CAAC;AAED,eAAe,UAAUC,uBAAAA;AACzB,eAAe,cAAc"}

package/cjs/components/Toolbar/ToolbarGroup/ToolbarGroup.cjs

@@ -0,0 +1,31 @@
+"use client";
+const require_use_props = require("../../../core/MantineProvider/use-props/use-props.cjs");
+const require_factory = require("../../../core/factory/factory.cjs");
+const require_Box = require("../../../core/Box/Box.cjs");
+const require_Toolbar_context = require("../Toolbar.context.cjs");
+const require_Toolbar_module = require("../Toolbar.module.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/@mantine/core/src/components/Toolbar/ToolbarGroup/ToolbarGroup.tsx
+const defaultProps = {};
+const ToolbarGroup = require_factory.factory((_props) => {
+	const { classNames, className, style, styles, vars, children, ...others } = require_use_props.useProps("ToolbarGroup", defaultProps, _props);
+	const ctx = require_Toolbar_context.useToolbarContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+		...others,
+		role: "group",
+		...ctx.getStyles("group", {
+			className,
+			classNames,
+			style,
+			styles
+		}),
+		"data-orientation": ctx.orientation,
+		children
+	});
+});
+ToolbarGroup.classes = require_Toolbar_module.default;
+ToolbarGroup.displayName = "@mantine/core/ToolbarGroup";
+//#endregion
+exports.ToolbarGroup = ToolbarGroup;
+
+//# sourceMappingURL=ToolbarGroup.cjs.map

package/cjs/components/Toolbar/ToolbarGroup/ToolbarGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarGroup.cjs","names":["factory","useProps","useToolbarContext","Box","classes"],"sources":["../../../../src/components/Toolbar/ToolbarGroup/ToolbarGroup.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useToolbarContext } from '../Toolbar.context';\nimport classes from '../Toolbar.module.css';\n\nexport type ToolbarGroupStylesNames = 'group';\n\nexport interface ToolbarGroupProps\n  extends BoxProps, CompoundStylesApiProps<ToolbarGroupFactory>, ElementProps<'div'> {}\n\nexport type ToolbarGroupFactory = Factory<{\n  props: ToolbarGroupProps;\n  ref: HTMLDivElement;\n  stylesNames: ToolbarGroupStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps: Partial<ToolbarGroupProps> = {};\n\nexport const ToolbarGroup = factory<ToolbarGroupFactory>((_props) => {\n  const props = useProps('ToolbarGroup', defaultProps, _props);\n  const { classNames, className, style, styles, vars, children, ...others } = props;\n  const ctx = useToolbarContext();\n\n  return (\n    <Box\n      {...others}\n      role=\"group\"\n      {...ctx.getStyles('group', { className, classNames, style, styles })}\n      data-orientation={ctx.orientation}\n    >\n      {children}\n    </Box>\n  );\n});\n\nToolbarGroup.classes = classes;\nToolbarGroup.displayName = '@mantine/core/ToolbarGroup';\n"],"mappings":";;;;;;;;AAwBA,MAAM,eAA2C,CAAC;AAElD,MAAa,eAAeA,gBAAAA,SAA8B,WAAW;CAEnE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,UAAU,GAAG,WADnDC,kBAAAA,SAAS,gBAAgB,cAAc,MAC2B;CAChF,MAAM,MAAMC,wBAAAA,kBAAkB;CAE9B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,GAAI;EACJ,MAAK;EACL,GAAI,IAAI,UAAU,SAAS;GAAE;GAAW;GAAY;GAAO;EAAO,CAAC;EACnE,oBAAkB,IAAI;EAErB;CACE,CAAA;AAET,CAAC;AAED,aAAa,UAAUC,uBAAAA;AACvB,aAAa,cAAc"}

package/cjs/components/Toolbar/ToolbarToggle/ToolbarToggle.cjs

@@ -0,0 +1,47 @@
+"use client";
+const require_use_props = require("../../../core/MantineProvider/use-props/use-props.cjs");
+const require_polymorphic_factory = require("../../../core/factory/polymorphic-factory.cjs");
+const require_Box = require("../../../core/Box/Box.cjs");
+const require_Toolbar_context = require("../Toolbar.context.cjs");
+const require_Toolbar_module = require("../Toolbar.module.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/@mantine/core/src/components/Toolbar/ToolbarToggle/ToolbarToggle.tsx
+const defaultProps = {};
+const ToolbarToggle = require_polymorphic_factory.polymorphicFactory((_props) => {
+	const { classNames, className, style, styles, vars, disabled, active, autoWidth, children, component, onClick, ...others } = require_use_props.useProps("ToolbarToggle", defaultProps, _props);
+	const ctx = require_Toolbar_context.useToolbarContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+		component: component || "button",
+		type: !component || component === "button" ? "button" : void 0,
+		...others,
+		...ctx.getStyles("toggle", {
+			className,
+			classNames,
+			style,
+			styles,
+			focusable: true
+		}),
+		"data-toolbar-toggle": true,
+		"data-active": active || void 0,
+		"data-disabled": disabled || void 0,
+		"data-auto-width": autoWidth || void 0,
+		disabled,
+		"aria-disabled": disabled || void 0,
+		"aria-pressed": active,
+		tabIndex: disabled ? -1 : 0,
+		onClick: (event) => {
+			if (disabled) {
+				event.preventDefault();
+				return;
+			}
+			onClick?.(event);
+		},
+		children
+	});
+});
+ToolbarToggle.classes = require_Toolbar_module.default;
+ToolbarToggle.displayName = "@mantine/core/ToolbarToggle";
+//#endregion
+exports.ToolbarToggle = ToolbarToggle;
+
+//# sourceMappingURL=ToolbarToggle.cjs.map

package/cjs/components/Toolbar/ToolbarToggle/ToolbarToggle.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarToggle.cjs","names":["polymorphicFactory","useProps","useToolbarContext","Box","classes"],"sources":["../../../../src/components/Toolbar/ToolbarToggle/ToolbarToggle.tsx"],"sourcesContent":["import {\n  Box,\n  BoxComponentProps,\n  CompoundStylesApiProps,\n  polymorphicFactory,\n  PolymorphicFactory,\n  useProps,\n} from '../../../core';\nimport { useToolbarContext } from '../Toolbar.context';\nimport classes from '../Toolbar.module.css';\n\nexport type ToolbarToggleStylesNames = 'toggle';\n\nexport interface ToolbarToggleProps\n  extends BoxComponentProps, CompoundStylesApiProps<ToolbarToggleFactory> {\n  /** If set, the toggle is disabled */\n  disabled?: boolean;\n\n  /** If set, the toggle is displayed in active state */\n  active?: boolean;\n\n  /** If set, the toggle width adjusts to content instead of being square, `false` by default */\n  autoWidth?: boolean;\n}\n\nexport type ToolbarToggleFactory = PolymorphicFactory<{\n  props: ToolbarToggleProps;\n  defaultRef: HTMLButtonElement;\n  defaultComponent: 'button';\n  stylesNames: ToolbarToggleStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps: Partial<ToolbarToggleProps> = {};\n\nexport const ToolbarToggle = polymorphicFactory<ToolbarToggleFactory>(\n  (_props: ToolbarToggleProps & { component?: any }) => {\n    const props = useProps('ToolbarToggle', defaultProps, _props);\n    const {\n      classNames,\n      className,\n      style,\n      styles,\n      vars,\n      disabled,\n      active,\n      autoWidth,\n      children,\n      component,\n      onClick,\n      ...others\n    } = props as typeof props & {\n      children?: React.ReactNode;\n      component?: any;\n      onClick?: React.MouseEventHandler<HTMLElement>;\n    };\n    const ctx = useToolbarContext();\n\n    return (\n      <Box\n        component={component || 'button'}\n        type={!component || component === 'button' ? 'button' : undefined}\n        {...others}\n        {...ctx.getStyles('toggle', { className, classNames, style, styles, focusable: true })}\n        data-toolbar-toggle\n        data-active={active || undefined}\n        data-disabled={disabled || undefined}\n        data-auto-width={autoWidth || undefined}\n        disabled={disabled}\n        aria-disabled={disabled || undefined}\n        aria-pressed={active}\n        tabIndex={disabled ? -1 : 0}\n        onClick={(event: React.MouseEvent<HTMLElement>) => {\n          if (disabled) {\n            event.preventDefault();\n            return;\n          }\n          onClick?.(event);\n        }}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n\nToolbarToggle.classes = classes;\nToolbarToggle.displayName = '@mantine/core/ToolbarToggle';\n"],"mappings":";;;;;;;;AAiCA,MAAM,eAA4C,CAAC;AAEnD,MAAa,gBAAgBA,4BAAAA,oBAC1B,WAAqD;CAEpD,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,UACA,QACA,WACA,UACA,WACA,SACA,GAAG,WAbSC,kBAAAA,SAAS,iBAAiB,cAAc,MAc9C;CAKR,MAAM,MAAMC,wBAAAA,kBAAkB;CAE9B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,WAAW,aAAa;EACxB,MAAM,CAAC,aAAa,cAAc,WAAW,WAAW,KAAA;EACxD,GAAI;EACJ,GAAI,IAAI,UAAU,UAAU;GAAE;GAAW;GAAY;GAAO;GAAQ,WAAW;EAAK,CAAC;EACrF,uBAAA;EACA,eAAa,UAAU,KAAA;EACvB,iBAAe,YAAY,KAAA;EAC3B,mBAAiB,aAAa,KAAA;EACpB;EACV,iBAAe,YAAY,KAAA;EAC3B,gBAAc;EACd,UAAU,WAAW,KAAK;EAC1B,UAAU,UAAyC;GACjD,IAAI,UAAU;IACZ,MAAM,eAAe;IACrB;GACF;GACA,UAAU,KAAK;EACjB;EAEC;CACE,CAAA;AAET,CACF;AAEA,cAAc,UAAUC,uBAAAA;AACxB,cAAc,cAAc"}

package/cjs/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.cjs

@@ -0,0 +1,61 @@
+"use client";
+const require_use_props = require("../../../core/MantineProvider/use-props/use-props.cjs");
+const require_factory = require("../../../core/factory/factory.cjs");
+const require_Box = require("../../../core/Box/Box.cjs");
+const require_Toolbar_context = require("../Toolbar.context.cjs");
+const require_Toolbar_module = require("../Toolbar.module.cjs");
+const require_ToolbarToggleGroup_context = require("./ToolbarToggleGroup.context.cjs");
+let _mantine_hooks = require("@mantine/hooks");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/@mantine/core/src/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.tsx
+const defaultProps = {};
+function normalizeGroupValue(type, value) {
+	if (type === "single") return Array.isArray(value) ? value[0] ?? null : value ?? null;
+	if (Array.isArray(value)) return value;
+	return value == null ? [] : [value];
+}
+const ToolbarToggleGroup = require_factory.factory((_props) => {
+	const { classNames, className, style, styles, vars, type, value, defaultValue, onChange, disabled, children, ...others } = require_use_props.useProps("ToolbarToggleGroup", defaultProps, _props);
+	const ctx = require_Toolbar_context.useToolbarContext();
+	const [_value, handleChange] = (0, _mantine_hooks.useUncontrolled)({
+		value,
+		defaultValue,
+		finalValue: type === "single" ? null : [],
+		onChange
+	});
+	const normalizedValue = normalizeGroupValue(type, _value);
+	const handleItemChange = (itemValue) => {
+		if (type === "single") handleChange(normalizedValue === itemValue ? null : itemValue);
+		else {
+			const currentValue = normalizedValue;
+			if (currentValue.includes(itemValue)) handleChange(currentValue.filter((v) => v !== itemValue));
+			else handleChange([...currentValue, itemValue]);
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToolbarToggleGroup_context.ToolbarToggleGroupProvider, {
+		value: {
+			value: normalizedValue,
+			onChange: handleItemChange,
+			type,
+			disabled: disabled || false
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+			...others,
+			role: "group",
+			...ctx.getStyles("group", {
+				className,
+				classNames,
+				style,
+				styles
+			}),
+			"data-orientation": ctx.orientation,
+			children
+		})
+	});
+});
+ToolbarToggleGroup.classes = require_Toolbar_module.default;
+ToolbarToggleGroup.displayName = "@mantine/core/ToolbarToggleGroup";
+//#endregion
+exports.ToolbarToggleGroup = ToolbarToggleGroup;
+
+//# sourceMappingURL=ToolbarToggleGroup.cjs.map

package/cjs/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarToggleGroup.cjs","names":["factory","useProps","useToolbarContext","useUncontrolled","currentValue","ToolbarToggleGroupProvider","Box","classes"],"sources":["../../../../src/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.tsx"],"sourcesContent":["import { useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useToolbarContext } from '../Toolbar.context';\nimport {\n  ToolbarToggleGroupProvider,\n  type ToolbarToggleGroupContextValue,\n} from './ToolbarToggleGroup.context';\nimport classes from '../Toolbar.module.css';\n\nexport type ToolbarToggleGroupStylesNames = 'group';\n\ninterface ToolbarToggleGroupBaseProps\n  extends\n    BoxProps,\n    CompoundStylesApiProps<ToolbarToggleGroupFactory>,\n    Omit<ElementProps<'div'>, 'onChange' | 'value' | 'defaultValue'> {\n  /** Disables all toggle items within this group */\n  disabled?: boolean;\n\n  /** `Toolbar.ToggleItem` components */\n  children: React.ReactNode;\n}\n\nexport interface ToolbarToggleGroupSingleProps extends ToolbarToggleGroupBaseProps {\n  /** Selection mode: `'single'` allows at most one active item, `'multiple'` allows any number of active items */\n  type: 'single';\n\n  /** Controlled value, `null` when no item is active */\n  value?: string | null;\n\n  /** Uncontrolled default value */\n  defaultValue?: string | null;\n\n  /** Called with the new value when an item is toggled, `null` when the active item is deselected */\n  onChange?: (value: string | null) => void;\n}\n\nexport interface ToolbarToggleGroupMultipleProps extends ToolbarToggleGroupBaseProps {\n  /** Selection mode: `'single'` allows at most one active item, `'multiple'` allows any number of active items */\n  type: 'multiple';\n\n  /** Controlled value, array of active item values */\n  value?: string[];\n\n  /** Uncontrolled default value */\n  defaultValue?: string[];\n\n  /** Called with the array of active item values when an item is toggled */\n  onChange?: (value: string[]) => void;\n}\n\nexport type ToolbarToggleGroupProps =\n  | ToolbarToggleGroupSingleProps\n  | ToolbarToggleGroupMultipleProps;\n\nexport type ToolbarToggleGroupFactory = Factory<{\n  props: ToolbarToggleGroupProps;\n  ref: HTMLDivElement;\n  stylesNames: ToolbarToggleGroupStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps = {} as Partial<ToolbarToggleGroupProps>;\n\nfunction normalizeGroupValue(\n  type: 'single' | 'multiple',\n  value: string | string[] | null | undefined\n): string | string[] | null {\n  if (type === 'single') {\n    return Array.isArray(value) ? (value[0] ?? null) : (value ?? null);\n  }\n\n  if (Array.isArray(value)) {\n    return value;\n  }\n\n  return value == null ? [] : [value];\n}\n\nexport const ToolbarToggleGroup = factory<ToolbarToggleGroupFactory>((_props) => {\n  const props = useProps('ToolbarToggleGroup', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    type,\n    value,\n    defaultValue,\n    onChange,\n    disabled,\n    children,\n    ...others\n  } = props as ToolbarToggleGroupBaseProps & {\n    type: 'single' | 'multiple';\n    value?: string | string[] | null;\n    defaultValue?: string | string[] | null;\n    onChange?: (value: any) => void;\n  };\n\n  const ctx = useToolbarContext();\n\n  const finalValue = type === 'single' ? null : [];\n  const [_value, handleChange] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue,\n    onChange,\n  });\n\n  const normalizedValue = normalizeGroupValue(type, _value);\n\n  const handleItemChange = (itemValue: string) => {\n    if (type === 'single') {\n      const currentValue = normalizedValue as string | null;\n      handleChange(currentValue === itemValue ? null : itemValue);\n    } else {\n      const currentValue = normalizedValue as string[];\n      if (currentValue.includes(itemValue)) {\n        handleChange(currentValue.filter((v) => v !== itemValue));\n      } else {\n        handleChange([...currentValue, itemValue]);\n      }\n    }\n  };\n\n  const contextValue: ToolbarToggleGroupContextValue = {\n    value: normalizedValue,\n    onChange: handleItemChange,\n    type,\n    disabled: disabled || false,\n  };\n\n  return (\n    <ToolbarToggleGroupProvider value={contextValue}>\n      <Box\n        {...others}\n        role=\"group\"\n        {...ctx.getStyles('group', { className, classNames, style, styles })}\n        data-orientation={ctx.orientation}\n      >\n        {children}\n      </Box>\n    </ToolbarToggleGroupProvider>\n  );\n});\n\nToolbarToggleGroup.classes = classes;\nToolbarToggleGroup.displayName = '@mantine/core/ToolbarToggleGroup';\n"],"mappings":";;;;;;;;;;AAsEA,MAAM,eAAe,CAAC;AAEtB,SAAS,oBACP,MACA,OAC0B;CAC1B,IAAI,SAAS,UACX,OAAO,MAAM,QAAQ,KAAK,IAAK,MAAM,MAAM,OAAS,SAAS;CAG/D,IAAI,MAAM,QAAQ,KAAK,GACrB,OAAO;CAGT,OAAO,SAAS,OAAO,CAAC,IAAI,CAAC,KAAK;AACpC;AAEA,MAAa,qBAAqBA,gBAAAA,SAAoC,WAAW;CAE/E,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,MACA,OACA,cACA,UACA,UACA,UACA,GAAG,WAbSC,kBAAAA,SAAS,sBAAsB,cAAc,MAcnD;CAOR,MAAM,MAAMC,wBAAAA,kBAAkB;CAG9B,MAAM,CAAC,QAAQ,iBAAA,GAAgBC,eAAAA,gBAAAA,CAAgB;EAC7C;EACA;EACA,YAJiB,SAAS,WAAW,OAAO,CAAC;EAK7C;CACF,CAAC;CAED,MAAM,kBAAkB,oBAAoB,MAAM,MAAM;CAExD,MAAM,oBAAoB,cAAsB;EAC9C,IAAI,SAAS,UAEX,aAAaC,oBAAiB,YAAY,OAAO,SAAS;OACrD;GACL,MAAM,eAAe;GACrB,IAAI,aAAa,SAAS,SAAS,GACjC,aAAa,aAAa,QAAQ,MAAM,MAAM,SAAS,CAAC;QAExD,aAAa,CAAC,GAAG,cAAc,SAAS,CAAC;EAE7C;CACF;CASA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,mCAAAA,4BAAD;EAA4B,OAAO;GAPnC,OAAO;GACP,UAAU;GACV;GACA,UAAU,YAAY;EAIwB;EAC5C,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;GACE,GAAI;GACJ,MAAK;GACL,GAAI,IAAI,UAAU,SAAS;IAAE;IAAW;IAAY;IAAO;GAAO,CAAC;GACnE,oBAAkB,IAAI;GAErB;EACE,CAAA;CACqB,CAAA;AAEhC,CAAC;AAED,mBAAmB,UAAUC,uBAAAA;AAC7B,mBAAmB,cAAc"}

package/cjs/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.context.cjs

@@ -0,0 +1,8 @@
+"use client";
+//#region packages/@mantine/core/src/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.context.ts
+const [ToolbarToggleGroupProvider, useToolbarToggleGroupContext] = require("../../../core/utils/create-safe-context/create-safe-context.cjs").createSafeContext("Toolbar.ToggleGroup component was not found in tree");
+//#endregion
+exports.ToolbarToggleGroupProvider = ToolbarToggleGroupProvider;
+exports.useToolbarToggleGroupContext = useToolbarToggleGroupContext;
+
+//# sourceMappingURL=ToolbarToggleGroup.context.cjs.map

package/cjs/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarToggleGroup.context.cjs","names":["createSafeContext"],"sources":["../../../../src/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.context.ts"],"sourcesContent":["import { createSafeContext } from '../../../core';\n\nexport interface ToolbarToggleGroupContextValue {\n  value: string | string[] | null;\n  onChange: (itemValue: string) => void;\n  type: 'single' | 'multiple';\n  disabled: boolean;\n}\n\nexport const [ToolbarToggleGroupProvider, useToolbarToggleGroupContext] =\n  createSafeContext<ToolbarToggleGroupContextValue>(\n    'Toolbar.ToggleGroup component was not found in tree'\n  );\n"],"mappings":";;AASA,MAAa,CAAC,4BAA4B,yGACxCA,CAAAA,CAAAA,kBACE,qDACF"}

package/cjs/components/Toolbar/ToolbarToggleItem/ToolbarToggleItem.cjs

@@ -0,0 +1,51 @@
+"use client";
+const require_use_props = require("../../../core/MantineProvider/use-props/use-props.cjs");
+const require_factory = require("../../../core/factory/factory.cjs");
+const require_Box = require("../../../core/Box/Box.cjs");
+const require_Toolbar_context = require("../Toolbar.context.cjs");
+const require_Toolbar_module = require("../Toolbar.module.cjs");
+const require_ToolbarToggleGroup_context = require("../ToolbarToggleGroup/ToolbarToggleGroup.context.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/@mantine/core/src/components/Toolbar/ToolbarToggleItem/ToolbarToggleItem.tsx
+const defaultProps = {};
+const ToolbarToggleItem = require_factory.factory((_props) => {
+	const { classNames, className, style, styles, vars, value, disabled, autoWidth, children, onClick, ...others } = require_use_props.useProps("ToolbarToggleItem", defaultProps, _props);
+	const ctx = require_Toolbar_context.useToolbarContext();
+	const groupCtx = require_ToolbarToggleGroup_context.useToolbarToggleGroupContext();
+	const isActive = groupCtx.type === "single" ? groupCtx.value === value : groupCtx.value.includes(value);
+	const isDisabled = disabled || groupCtx.disabled;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+		component: "button",
+		...others,
+		type: "button",
+		...ctx.getStyles("toggle", {
+			className,
+			classNames,
+			style,
+			styles,
+			focusable: true
+		}),
+		"data-toolbar-toggle": true,
+		"data-active": isActive || void 0,
+		"data-disabled": isDisabled || void 0,
+		"data-auto-width": autoWidth || void 0,
+		disabled: isDisabled,
+		tabIndex: isDisabled ? -1 : 0,
+		"aria-pressed": isActive,
+		onClick: (event) => {
+			if (isDisabled) {
+				event.preventDefault();
+				return;
+			}
+			groupCtx.onChange(value);
+			onClick?.(event);
+		},
+		children
+	});
+});
+ToolbarToggleItem.classes = require_Toolbar_module.default;
+ToolbarToggleItem.displayName = "@mantine/core/ToolbarToggleItem";
+//#endregion
+exports.ToolbarToggleItem = ToolbarToggleItem;
+
+//# sourceMappingURL=ToolbarToggleItem.cjs.map

package/cjs/components/Toolbar/ToolbarToggleItem/ToolbarToggleItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarToggleItem.cjs","names":["factory","useProps","useToolbarContext","useToolbarToggleGroupContext","Box","classes"],"sources":["../../../../src/components/Toolbar/ToolbarToggleItem/ToolbarToggleItem.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useToolbarContext } from '../Toolbar.context';\nimport { useToolbarToggleGroupContext } from '../ToolbarToggleGroup/ToolbarToggleGroup.context';\nimport classes from '../Toolbar.module.css';\n\nexport type ToolbarToggleItemStylesNames = 'toggle';\n\nexport interface ToolbarToggleItemProps\n  extends BoxProps, CompoundStylesApiProps<ToolbarToggleItemFactory>, ElementProps<'button'> {\n  /** Value used to identify the item in ToggleGroup */\n  value: string;\n\n  /** If set, the toggle item is disabled */\n  disabled?: boolean;\n\n  /** If set, the toggle item width adjusts to content instead of being square, `false` by default */\n  autoWidth?: boolean;\n}\n\nexport type ToolbarToggleItemFactory = Factory<{\n  props: ToolbarToggleItemProps;\n  ref: HTMLButtonElement;\n  stylesNames: ToolbarToggleItemStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps: Partial<ToolbarToggleItemProps> = {};\n\nexport const ToolbarToggleItem = factory<ToolbarToggleItemFactory>((_props) => {\n  const props = useProps('ToolbarToggleItem', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    value,\n    disabled,\n    autoWidth,\n    children,\n    onClick,\n    ...others\n  } = props;\n  const ctx = useToolbarContext();\n  const groupCtx = useToolbarToggleGroupContext();\n\n  const isActive =\n    groupCtx.type === 'single'\n      ? groupCtx.value === value\n      : (groupCtx.value as string[]).includes(value);\n\n  const isDisabled = disabled || groupCtx.disabled;\n\n  return (\n    <Box\n      component=\"button\"\n      {...others}\n      type=\"button\"\n      {...ctx.getStyles('toggle', { className, classNames, style, styles, focusable: true })}\n      data-toolbar-toggle\n      data-active={isActive || undefined}\n      data-disabled={isDisabled || undefined}\n      data-auto-width={autoWidth || undefined}\n      disabled={isDisabled}\n      tabIndex={isDisabled ? -1 : 0}\n      aria-pressed={isActive}\n      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n        if (isDisabled) {\n          event.preventDefault();\n          return;\n        }\n        groupCtx.onChange(value);\n        onClick?.(event);\n      }}\n    >\n      {children}\n    </Box>\n  );\n});\n\nToolbarToggleItem.classes = classes;\nToolbarToggleItem.displayName = '@mantine/core/ToolbarToggleItem';\n"],"mappings":";;;;;;;;;AAkCA,MAAM,eAAgD,CAAC;AAEvD,MAAa,oBAAoBA,gBAAAA,SAAmC,WAAW;CAE7E,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,OACA,UACA,WACA,UACA,SACA,GAAG,WAZSC,kBAAAA,SAAS,qBAAqB,cAAc,MAalD;CACR,MAAM,MAAMC,wBAAAA,kBAAkB;CAC9B,MAAM,WAAWC,mCAAAA,6BAA6B;CAE9C,MAAM,WACJ,SAAS,SAAS,WACd,SAAS,UAAU,QAClB,SAAS,MAAmB,SAAS,KAAK;CAEjD,MAAM,aAAa,YAAY,SAAS;CAExC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,WAAU;EACV,GAAI;EACJ,MAAK;EACL,GAAI,IAAI,UAAU,UAAU;GAAE;GAAW;GAAY;GAAO;GAAQ,WAAW;EAAK,CAAC;EACrF,uBAAA;EACA,eAAa,YAAY,KAAA;EACzB,iBAAe,cAAc,KAAA;EAC7B,mBAAiB,aAAa,KAAA;EAC9B,UAAU;EACV,UAAU,aAAa,KAAK;EAC5B,gBAAc;EACd,UAAU,UAA+C;GACvD,IAAI,YAAY;IACd,MAAM,eAAe;IACrB;GACF;GACA,SAAS,SAAS,KAAK;GACvB,UAAU,KAAK;EACjB;EAEC;CACE,CAAA;AAET,CAAC;AAED,kBAAkB,UAAUC,uBAAAA;AAC5B,kBAAkB,cAAc"}