@mantine/code-highlight 7.0.0-alpha.7 → 7.0.0-alpha.9

package/esm/InlineCodeHighlight.js

@@ -1,4 +1,4 @@
-'use client';
+import { __rest } from 'tslib';
 import React from 'react';
 import cx from 'clsx';
 import { factory, useProps, useStyles, Box } from '@mantine/core';
@@ -6,64 +6,28 @@ import hljs from 'highlight.js';
 import _classes from './CodeHighlight.module.css.js';
 import themeClasses from './CodeHighlight.theme.module.css.js';
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const classes = __spreadProps(__spreadValues({}, _classes), { code: cx(_classes.code, themeClasses.theme) });
+const classes = Object.assign(Object.assign({}, _classes), { code: cx(_classes.code, themeClasses.theme) });
 const defaultProps = {
-  language: "tsx"
+    language: 'tsx',
 };
 const InlineCodeHighlight = factory((_props, ref) => {
-  const props = useProps("InlineCodeHighlight", defaultProps, _props);
-  const _a = props, { classNames, className, style, styles, unstyled, vars, code, language } = _a, others = __objRest(_a, ["classNames", "className", "style", "styles", "unstyled", "vars", "code", "language"]);
-  const getStyles = useStyles({
-    name: "InlineCodeHighlight",
-    props,
-    classes,
-    className,
-    style,
-    classNames,
-    styles,
-    unstyled,
-    rootSelector: "code"
-  });
-  const highlighted = hljs.highlight(code.trim(), { language }).value;
-  return /* @__PURE__ */ React.createElement(Box, __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, getStyles("code")), {
-    component: "code",
-    ref
-  }), others), {
-    dangerouslySetInnerHTML: { __html: highlighted }
-  }));
+    const props = useProps('InlineCodeHighlight', defaultProps, _props);
+    const { classNames, className, style, styles, unstyled, vars, code, language } = props, others = __rest(props, ["classNames", "className", "style", "styles", "unstyled", "vars", "code", "language"]);
+    const getStyles = useStyles({
+        name: 'InlineCodeHighlight',
+        props,
+        classes,
+        className,
+        style,
+        classNames,
+        styles,
+        unstyled,
+        rootSelector: 'code',
+    });
+    const highlighted = hljs.highlight(code.trim(), { language: language }).value;
+    return (React.createElement(Box, Object.assign({}, getStyles('code'), { component: "code", ref: ref }, others, { dangerouslySetInnerHTML: { __html: highlighted } })));
 });
-InlineCodeHighlight.displayName = "@mantine/core/InlineCodeHighlight";
+InlineCodeHighlight.displayName = '@mantine/core/InlineCodeHighlight';
 
 export { InlineCodeHighlight };
 //# sourceMappingURL=InlineCodeHighlight.js.map

package/esm/InlineCodeHighlight.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineCodeHighlight.js","sources":["../src/InlineCodeHighlight.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'clsx';\nimport {\n  Box,\n  BoxProps,\n  StylesApiProps,\n  factory,\n  ElementProps,\n  useProps,\n  useStyles,\n  Factory,\n} from '@mantine/core';\nimport hljs from 'highlight.js';\nimport _classes from './CodeHighlight.module.css';\nimport themeClasses from './CodeHighlight.theme.module.css';\n\nconst classes = { ..._classes, code: cx(_classes.code, themeClasses.theme) };\n\nexport type InlineCodeHighlightStylesNames = 'code';\nexport type InlineCodeHighlightVariant = string;\n\nexport interface InlineCodeHighlightProps\n  extends BoxProps,\n    StylesApiProps<InlineCodeHighlightFactory>,\n    ElementProps<'div'> {\n  /** Code to highlight */\n  code: string;\n\n  /** Code language, `'tsx'` by default */\n  language?: string;\n}\n\nexport type InlineCodeHighlightFactory = Factory<{\n  props: InlineCodeHighlightProps;\n  ref: HTMLElement;\n  stylesNames: InlineCodeHighlightStylesNames;\n}>;\n\nconst defaultProps: Partial<InlineCodeHighlightProps> = {\n  language: 'tsx',\n};\n\nexport const InlineCodeHighlight = factory<InlineCodeHighlightFactory>((_props, ref) => {\n  const props = useProps('InlineCodeHighlight', defaultProps, _props);\n  const { classNames, className, style, styles, unstyled, vars, code, language, ...others } = props;\n\n  const getStyles = useStyles<InlineCodeHighlightFactory>({\n    name: 'InlineCodeHighlight',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    rootSelector: 'code',\n  });\n\n  const highlighted = hljs.highlight(code.trim(), { language: language! }).value;\n\n  return (\n    <Box\n      {...getStyles('code')}\n      component=\"code\"\n      ref={ref}\n      {...others}\n      dangerouslySetInnerHTML={{ __html: highlighted }}\n    />\n  );\n});\n\nInlineCodeHighlight.displayName = '@mantine/core/InlineCodeHighlight';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"InlineCodeHighlight.js","sources":["../src/InlineCodeHighlight.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'clsx';\nimport {\n  Box,\n  BoxProps,\n  StylesApiProps,\n  factory,\n  ElementProps,\n  useProps,\n  useStyles,\n  Factory,\n} from '@mantine/core';\nimport hljs from 'highlight.js';\nimport _classes from './CodeHighlight.module.css';\nimport themeClasses from './CodeHighlight.theme.module.css';\n\nconst classes = { ..._classes, code: cx(_classes.code, themeClasses.theme) };\n\nexport type InlineCodeHighlightStylesNames = 'code';\nexport type InlineCodeHighlightVariant = string;\n\nexport interface InlineCodeHighlightProps\n  extends BoxProps,\n    StylesApiProps<InlineCodeHighlightFactory>,\n    ElementProps<'div'> {\n  /** Code to highlight */\n  code: string;\n\n  /** Code language, `'tsx'` by default */\n  language?: string;\n}\n\nexport type InlineCodeHighlightFactory = Factory<{\n  props: InlineCodeHighlightProps;\n  ref: HTMLElement;\n  stylesNames: InlineCodeHighlightStylesNames;\n}>;\n\nconst defaultProps: Partial<InlineCodeHighlightProps> = {\n  language: 'tsx',\n};\n\nexport const InlineCodeHighlight = factory<InlineCodeHighlightFactory>((_props, ref) => {\n  const props = useProps('InlineCodeHighlight', defaultProps, _props);\n  const { classNames, className, style, styles, unstyled, vars, code, language, ...others } = props;\n\n  const getStyles = useStyles<InlineCodeHighlightFactory>({\n    name: 'InlineCodeHighlight',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    rootSelector: 'code',\n  });\n\n  const highlighted = hljs.highlight(code.trim(), { language: language! }).value;\n\n  return (\n    <Box\n      {...getStyles('code')}\n      component=\"code\"\n      ref={ref}\n      {...others}\n      dangerouslySetInnerHTML={{ __html: highlighted }}\n    />\n  );\n});\n\nInlineCodeHighlight.displayName = '@mantine/core/InlineCodeHighlight';\n"],"names":[],"mappings":";;;;;;;;AAgBA,MAAM,OAAO,mCAAQ,QAAQ,KAAE,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC,KAAK,CAAC,GAAE,CAAC;AAsB7E,MAAM,YAAY,GAAsC;IACtD,QAAQ,EAAE,KAAK;CAChB,CAAC;MAEW,mBAAmB,GAAG,OAAO,CAA6B,CAAC,MAAM,EAAE,GAAG;IACjF,MAAM,KAAK,GAAG,QAAQ,CAAC,qBAAqB,EAAE,YAAY,EAAE,MAAM,CAAC,CAAC;IACpE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,KAAgB,KAAK,EAAhB,MAAM,UAAK,KAAK,EAA3F,sFAAmF,CAAQ,CAAC;IAElG,MAAM,SAAS,GAAG,SAAS,CAA6B;QACtD,IAAI,EAAE,qBAAqB;QAC3B,KAAK;QACL,OAAO;QACP,SAAS;QACT,KAAK;QACL,UAAU;QACV,MAAM;QACN,QAAQ;QACR,YAAY,EAAE,MAAM;KACrB,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAS,EAAE,CAAC,CAAC,KAAK,CAAC;IAE/E,QACE,oBAAC,GAAG,oBACE,SAAS,CAAC,MAAM,CAAC,IACrB,SAAS,EAAC,MAAM,EAChB,GAAG,EAAE,GAAG,IACJ,MAAM,IACV,uBAAuB,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,IAChD,EACF;AACJ,CAAC,EAAE;AAEH,mBAAmB,CAAC,WAAW,GAAG,mCAAmC;;;;"}

package/esm/src/mantine-code-highlight/src/CodeHighlight.js

@@ -0,0 +1,46 @@
+import { __rest } from '../../../node_modules/tslib/tslib.es6.js';
+import React from 'react';
+import cx from 'clsx';
+import { factory, useProps, useStyles, Box, CopyButton, Tooltip, ActionIcon, ScrollArea } from '@mantine/core';
+import { useHighlight } from './use-highlight.js';
+import { CopyIcon } from './CopyIcon.js';
+import _classes from './CodeHighlight.module.css.js';
+import themeClasses from './CodeHighlight.theme.module.css.js';
+
+const classes = Object.assign(Object.assign({}, _classes), { root: cx(_classes.root, themeClasses.theme) });
+const defaultProps = {
+    copyLabel: 'Copy code',
+    copiedLabel: 'Copied',
+    language: 'tsx',
+    withCopyButton: true,
+};
+const CodeHighlight = factory((_props, ref) => {
+    const props = useProps('CodeHighlight', defaultProps, _props);
+    const { classNames, className, style, styles, unstyled, vars, children, code, copiedLabel, copyLabel, language, withCopyButton, highlightOnClient } = props, others = __rest(props, ["classNames", "className", "style", "styles", "unstyled", "vars", "children", "code", "copiedLabel", "copyLabel", "language", "withCopyButton", "highlightOnClient"]);
+    const getStyles = useStyles({
+        name: 'CodeHighlight',
+        props,
+        classes,
+        className,
+        style,
+        classNames,
+        styles,
+        unstyled,
+    });
+    const getCodeProps = useHighlight({
+        code,
+        language: language,
+        highlightOnClient,
+    });
+    return (React.createElement(Box, Object.assign({}, getStyles('root'), { ref: ref }, others, { dir: "ltr" }),
+        withCopyButton && (React.createElement(CopyButton, { value: code.trim() }, ({ copied, copy }) => (React.createElement(Tooltip, { label: copied ? copiedLabel : copyLabel, fz: "sm", position: "left" },
+            React.createElement(ActionIcon, Object.assign({ onClick: copy, variant: "none" }, getStyles('copy')),
+                React.createElement(CopyIcon, { copied: copied })))))),
+        React.createElement(ScrollArea, { type: "auto", dir: "ltr", offsetScrollbars: false },
+            React.createElement("pre", Object.assign({}, getStyles('pre')),
+                React.createElement("code", Object.assign({}, getStyles('code'), getCodeProps()))))));
+});
+CodeHighlight.displayName = '@mantine/core/CodeHighlight';
+
+export { CodeHighlight };
+//# sourceMappingURL=CodeHighlight.js.map

package/esm/src/mantine-code-highlight/src/CodeHighlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeHighlight.js","sources":["../../../../src/CodeHighlight.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'clsx';\nimport {\n  Box,\n  BoxProps,\n  StylesApiProps,\n  factory,\n  ElementProps,\n  useProps,\n  useStyles,\n  CopyButton,\n  Tooltip,\n  ActionIcon,\n  ScrollArea,\n  Factory,\n} from '@mantine/core';\nimport { useHighlight } from './use-highlight';\nimport { CopyIcon } from './CopyIcon';\nimport _classes from './CodeHighlight.module.css';\nimport themeClasses from './CodeHighlight.theme.module.css';\n\nconst classes = { ..._classes, root: cx(_classes.root, themeClasses.theme) };\n\nexport type CodeHighlightStylesNames = 'root' | 'code' | 'pre' | 'copy';\nexport type CodeHighlightVariant = string;\n\nexport interface CodeHighlightProps\n  extends BoxProps,\n    StylesApiProps<CodeHighlightFactory>,\n    ElementProps<'div'> {\n  /** Code to highlight */\n  code: string;\n\n  /** Code language, `'tsx'` by default */\n  language?: string;\n\n  /** Determines whether copy button should be displayed, `true` by default */\n  withCopyButton?: boolean;\n\n  /** Copy tooltip label, `'Copy code'` by default */\n  copyLabel?: string;\n\n  /** Copied tooltip label, `'Copied'` by default */\n  copiedLabel?: string;\n\n  /** Determines whether code should be highlighted only after component is mounted to the dom (disables code highlight on server), `false` by default */\n  highlightOnClient?: boolean;\n}\n\nexport type CodeHighlightFactory = Factory<{\n  props: CodeHighlightProps;\n  ref: HTMLDivElement;\n  stylesNames: CodeHighlightStylesNames;\n  variant: CodeHighlightVariant;\n}>;\n\nconst defaultProps: Partial<CodeHighlightProps> = {\n  copyLabel: 'Copy code',\n  copiedLabel: 'Copied',\n  language: 'tsx',\n  withCopyButton: true,\n};\n\nexport const CodeHighlight = factory<CodeHighlightFactory>((_props, ref) => {\n  const props = useProps('CodeHighlight', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    code,\n    copiedLabel,\n    copyLabel,\n    language,\n    withCopyButton,\n    highlightOnClient,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CodeHighlightFactory>({\n    name: 'CodeHighlight',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n  });\n\n  const getCodeProps = useHighlight({\n    code,\n    language: language!,\n    highlightOnClient,\n  });\n\n  return (\n    <Box {...getStyles('root')} ref={ref} {...others} dir=\"ltr\">\n      {withCopyButton && (\n        <CopyButton value={code.trim()}>\n          {({ copied, copy }) => (\n            <Tooltip label={copied ? copiedLabel : copyLabel} fz=\"sm\" position=\"left\">\n              <ActionIcon onClick={copy} variant=\"none\" {...getStyles('copy')}>\n                <CopyIcon copied={copied} />\n              </ActionIcon>\n            </Tooltip>\n          )}\n        </CopyButton>\n      )}\n\n      <ScrollArea type=\"auto\" dir=\"ltr\" offsetScrollbars={false}>\n        <pre {...getStyles('pre')}>\n          <code {...getStyles('code')} {...getCodeProps()} />\n        </pre>\n      </ScrollArea>\n    </Box>\n  );\n});\n\nCodeHighlight.displayName = '@mantine/core/CodeHighlight';\n"],"names":[],"mappings":";;;;;;;;;AAqBA,MAAM,OAAO,mCAAQ,QAAQ,KAAE,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC,KAAK,CAAC,GAAE,CAAC;AAmC7E,MAAM,YAAY,GAAgC;IAChD,SAAS,EAAE,WAAW;IACtB,WAAW,EAAE,QAAQ;IACrB,QAAQ,EAAE,KAAK;IACf,cAAc,EAAE,IAAI;CACrB,CAAC;MAEW,aAAa,GAAG,OAAO,CAAuB,CAAC,MAAM,EAAE,GAAG;IACrE,MAAM,KAAK,GAAG,QAAQ,CAAC,eAAe,EAAE,YAAY,EAAE,MAAM,CAAC,CAAC;IAC9D,MAAM,EACJ,UAAU,EACV,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,SAAS,EACT,QAAQ,EACR,cAAc,EACd,iBAAiB,KAEf,KAAK,EADJ,MAAM,UACP,KAAK,EAfH,qKAeL,CAAQ,CAAC;IAEV,MAAM,SAAS,GAAG,SAAS,CAAuB;QAChD,IAAI,EAAE,eAAe;QACrB,KAAK;QACL,OAAO;QACP,SAAS;QACT,KAAK;QACL,UAAU;QACV,MAAM;QACN,QAAQ;KACT,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,YAAY,CAAC;QAChC,IAAI;QACJ,QAAQ,EAAE,QAAS;QACnB,iBAAiB;KAClB,CAAC,CAAC;IAEH,QACE,oBAAC,GAAG,oBAAK,SAAS,CAAC,MAAM,CAAC,IAAE,GAAG,EAAE,GAAG,IAAM,MAAM,IAAE,GAAG,EAAC,KAAK;QACxD,cAAc,KACb,oBAAC,UAAU,IAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,IAC3B,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAChB,oBAAC,OAAO,IAAC,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,EAAE,EAAE,EAAC,IAAI,EAAC,QAAQ,EAAC,MAAM;YACvE,oBAAC,UAAU,kBAAC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAC,MAAM,IAAK,SAAS,CAAC,MAAM,CAAC;gBAC7D,oBAAC,QAAQ,IAAC,MAAM,EAAE,MAAM,GAAI,CACjB,CACL,CACX,CACU,CACd;QAED,oBAAC,UAAU,IAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,KAAK,EAAC,gBAAgB,EAAE,KAAK;YACvD,6CAAS,SAAS,CAAC,KAAK,CAAC;gBACvB,8CAAU,SAAS,CAAC,MAAM,CAAC,EAAM,YAAY,EAAE,EAAI,CAC/C,CACK,CACT,EACN;AACJ,CAAC,EAAE;AAEH,aAAa,CAAC,WAAW,GAAG,6BAA6B;;;;"}

package/esm/src/mantine-code-highlight/src/CodeHighlight.module.css.js

@@ -0,0 +1,4 @@
+var _classes = {"code":"mantine-XIBJZDt","pre":"mantine-RDvBcjB","header":"mantine-cmEtjrV","controls":"mantine-059sM-t","copy":"mantine-tB-P5PD","control":"mantine-NTm-nGn","file":"mantine-PBrPXnu","files":"mantine-IvOddiX","codeWrapper":"mantine-YfYyOiA","showCodeButton":"mantine-haNyFRC","root":"mantine-k6OJW8l"};
+
+export default _classes;
+//# sourceMappingURL=CodeHighlight.module.css.js.map

package/esm/src/mantine-code-highlight/src/CodeHighlight.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeHighlight.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/src/mantine-code-highlight/src/CodeHighlight.theme.module.css.js

@@ -0,0 +1,4 @@
+var themeClasses = {"theme":"mantine-h-DP-Yw"};
+
+export default themeClasses;
+//# sourceMappingURL=CodeHighlight.theme.module.css.js.map

package/esm/src/mantine-code-highlight/src/CodeHighlight.theme.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeHighlight.theme.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/src/mantine-code-highlight/src/CodeHighlightTabs.js

@@ -0,0 +1,80 @@
+import { __rest } from '../../../node_modules/tslib/tslib.es6.js';
+import React from 'react';
+import hljs from 'highlight.js';
+import cx from 'clsx';
+import { useUncontrolled } from '@mantine/hooks';
+import { rem, createVarsResolver, factory, useProps, useStyles, UnstyledButton, Box, ScrollArea, Tooltip, ActionIcon, CopyButton } from '@mantine/core';
+import { CopyIcon } from './CopyIcon.js';
+import { FileIcon } from './FileIcon.js';
+import { ExpandIcon } from './ExpandIcon.js';
+import _classes from './CodeHighlight.module.css.js';
+import themeClasses from './CodeHighlight.theme.module.css.js';
+
+const classes = Object.assign(Object.assign({}, _classes), { root: cx(_classes.root, themeClasses.theme) });
+const defaultProps = {
+    withHeader: true,
+    copyLabel: 'Copy code',
+    copiedLabel: 'Copied',
+    maxCollapsedHeight: rem('8rem'),
+    expandCodeLabel: 'Expand code',
+    collapseCodeLabel: 'Collapse code',
+};
+const varsResolver = createVarsResolver((_, { maxCollapsedHeight }) => ({
+    root: { '--ch-max-collapsed-height': rem(maxCollapsedHeight) },
+}));
+const CodeHighlightTabs = factory((_props, ref) => {
+    const props = useProps('CodeHighlightTabs', defaultProps, _props);
+    const { classNames, className, style, styles, unstyled, vars, children, code, defaultActiveTab, activeTab, onTabChange, withHeader, copiedLabel, copyLabel, getFileIcon, maxCollapsedHeight, expanded, defaultExpanded, onExpandedChange, expandCodeLabel, collapseCodeLabel, withExpandButton } = props, others = __rest(props, ["classNames", "className", "style", "styles", "unstyled", "vars", "children", "code", "defaultActiveTab", "activeTab", "onTabChange", "withHeader", "copiedLabel", "copyLabel", "getFileIcon", "maxCollapsedHeight", "expanded", "defaultExpanded", "onExpandedChange", "expandCodeLabel", "collapseCodeLabel", "withExpandButton"]);
+    const getStyles = useStyles({
+        name: 'CodeHighlightTabs',
+        props,
+        classes,
+        className,
+        style,
+        classNames,
+        styles,
+        unstyled,
+        vars,
+        varsResolver,
+    });
+    const [value, setValue] = useUncontrolled({
+        defaultValue: defaultActiveTab,
+        value: activeTab,
+        finalValue: 0,
+        onChange: onTabChange,
+    });
+    const [_expanded, setExpanded] = useUncontrolled({
+        defaultValue: defaultExpanded,
+        value: expanded,
+        finalValue: true,
+        onChange: onExpandedChange,
+    });
+    const nodes = Array.isArray(code) ? code : [code];
+    const currentCode = nodes[value];
+    const highlighted = hljs.highlight(currentCode.code.trim(), {
+        language: currentCode.language,
+    }).value;
+    const files = nodes.map((node, index) => (React.createElement(UnstyledButton, Object.assign({}, getStyles('file'), { key: node.fileName, mod: { active: index === value }, onClick: () => setValue(index) }),
+        React.createElement(FileIcon, { fileIcon: node.icon, getFileIcon: getFileIcon, fileName: node.fileName }),
+        React.createElement("span", null, node.fileName))));
+    return (React.createElement(Box, Object.assign({}, getStyles('root'), { ref: ref }, others, { dir: "ltr" }),
+        withHeader && (React.createElement("div", Object.assign({}, getStyles('header')),
+            React.createElement(ScrollArea, { type: "never", dir: "ltr", offsetScrollbars: false },
+                React.createElement("div", Object.assign({}, getStyles('files')), files)),
+            React.createElement("div", Object.assign({}, getStyles('controls')),
+                withExpandButton && (React.createElement(Tooltip, { label: _expanded ? collapseCodeLabel : expandCodeLabel, fz: "sm", position: "left" },
+                    React.createElement(ActionIcon, Object.assign({ onClick: () => setExpanded(!_expanded), variant: "none" }, getStyles('control')),
+                        React.createElement(ExpandIcon, { expanded: _expanded })))),
+                React.createElement(CopyButton, { value: currentCode.code.trim() }, ({ copied, copy }) => (React.createElement(Tooltip, { label: copied ? copiedLabel : copyLabel, fz: "sm", position: "left" },
+                    React.createElement(ActionIcon, Object.assign({ onClick: copy, variant: "none" }, getStyles('control')),
+                        React.createElement(CopyIcon, { copied: copied })))))))),
+        React.createElement(ScrollArea, { type: "auto", dir: "ltr", offsetScrollbars: false },
+            React.createElement(Box, Object.assign({}, getStyles('codeWrapper'), { mod: { expanded: _expanded } }),
+                React.createElement("pre", Object.assign({}, getStyles('pre')),
+                    React.createElement("code", Object.assign({}, getStyles('code'), { dangerouslySetInnerHTML: { __html: highlighted } }))))),
+        React.createElement(UnstyledButton, Object.assign({}, getStyles('showCodeButton'), { mod: { hidden: _expanded }, onClick: () => setExpanded(true) }), "Expand code")));
+});
+CodeHighlightTabs.displayName = '@mantine/core/CodeHighlightTabs';
+
+export { CodeHighlightTabs };
+//# sourceMappingURL=CodeHighlightTabs.js.map

package/esm/src/mantine-code-highlight/src/CodeHighlightTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeHighlightTabs.js","sources":["../../../../src/CodeHighlightTabs.tsx"],"sourcesContent":["import React from 'react';\nimport hljs from 'highlight.js';\nimport cx from 'clsx';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  StylesApiProps,\n  factory,\n  ElementProps,\n  useProps,\n  useStyles,\n  CopyButton,\n  Tooltip,\n  ActionIcon,\n  UnstyledButton,\n  ScrollArea,\n  createVarsResolver,\n  rem,\n  Factory,\n} from '@mantine/core';\nimport { CopyIcon } from './CopyIcon';\nimport { FileIcon } from './FileIcon';\nimport { ExpandIcon } from './ExpandIcon';\nimport _classes from './CodeHighlight.module.css';\nimport themeClasses from './CodeHighlight.theme.module.css';\n\nconst classes = { ..._classes, root: cx(_classes.root, themeClasses.theme) };\n\nexport type CodeHighlightTabsStylesNames =\n  | 'root'\n  | 'code'\n  | 'codeWrapper'\n  | 'showCodeButton'\n  | 'pre'\n  | 'controls'\n  | 'control'\n  | 'header'\n  | 'file'\n  | 'files';\n\nexport type CodeHighlightTabsVariant = string;\nexport type CodeHighlightTabsCssVariables = {\n  root: '--ch-max-collapsed-height';\n};\n\nexport interface CodeHighlightTabsCode {\n  language?: string;\n  code: string;\n  fileName?: string;\n  icon?: React.ReactNode;\n}\n\nexport interface CodeHighlightTabsProps\n  extends BoxProps,\n    StylesApiProps<CodeHighlightTabsFactory>,\n    ElementProps<'div'> {\n  /** Code to highlight with meta data (file name and icon) */\n  code: CodeHighlightTabsCode | CodeHighlightTabsCode[];\n\n  /** Default active tab index */\n  defaultActiveTab?: number;\n\n  /** Index of controlled active tab state */\n  activeTab?: number;\n\n  /** Called when tab changes */\n  onTabChange?(tab: number): void;\n\n  /** Determines whether header with file names and copy button should be rendered, `true` by default */\n  withHeader?: boolean;\n\n  /** Copy tooltip label, `'Copy code'` by default */\n  copyLabel?: string;\n\n  /** Copied tooltip label, `'Copied'` by default */\n  copiedLabel?: string;\n\n  /** Function that returns icon based on file name */\n  getFileIcon?(fileName: string): React.ReactNode;\n\n  /** `max-height` of code in collapsed state */\n  maxCollapsedHeight?: React.CSSProperties['maxHeight'];\n\n  /** Controlled expanded state */\n  expanded?: boolean;\n\n  /** Uncontrolled expanded state initial value */\n  defaultExpanded?: boolean;\n\n  /** Called when expanded state changes */\n  onExpandedChange?(expanded: boolean): void;\n\n  /** Expand button label and tooltip, `'Expand code'` by default */\n  expandCodeLabel?: string;\n\n  /** Collapse button label and tooltip, `'Collapse code'` by default */\n  collapseCodeLabel?: string;\n\n  /** Determines whether to show the expand button, `false` by default */\n  withExpandButton?: boolean;\n}\n\nexport type CodeHighlightTabsFactory = Factory<{\n  props: CodeHighlightTabsProps;\n  ref: HTMLDivElement;\n  stylesNames: CodeHighlightTabsStylesNames;\n}>;\n\nconst defaultProps: Partial<CodeHighlightTabsProps> = {\n  withHeader: true,\n  copyLabel: 'Copy code',\n  copiedLabel: 'Copied',\n  maxCollapsedHeight: rem('8rem'),\n  expandCodeLabel: 'Expand code',\n  collapseCodeLabel: 'Collapse code',\n};\n\nconst varsResolver = createVarsResolver<CodeHighlightTabsFactory>((_, { maxCollapsedHeight }) => ({\n  root: { '--ch-max-collapsed-height': rem(maxCollapsedHeight) },\n}));\n\nexport const CodeHighlightTabs = factory<CodeHighlightTabsFactory>((_props, ref) => {\n  const props = useProps('CodeHighlightTabs', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    code,\n    defaultActiveTab,\n    activeTab,\n    onTabChange,\n    withHeader,\n    copiedLabel,\n    copyLabel,\n    getFileIcon,\n    maxCollapsedHeight,\n    expanded,\n    defaultExpanded,\n    onExpandedChange,\n    expandCodeLabel,\n    collapseCodeLabel,\n    withExpandButton,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CodeHighlightTabsFactory>({\n    name: 'CodeHighlightTabs',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    varsResolver,\n  });\n\n  const [value, setValue] = useUncontrolled({\n    defaultValue: defaultActiveTab,\n    value: activeTab,\n    finalValue: 0,\n    onChange: onTabChange,\n  });\n\n  const [_expanded, setExpanded] = useUncontrolled({\n    defaultValue: defaultExpanded,\n    value: expanded,\n    finalValue: true,\n    onChange: onExpandedChange,\n  });\n\n  const nodes = Array.isArray(code) ? code : [code];\n  const currentCode = nodes[value];\n\n  const highlighted = hljs.highlight(currentCode.code.trim(), {\n    language: currentCode.language!,\n  }).value;\n\n  const files = nodes.map((node, index) => (\n    <UnstyledButton\n      {...getStyles('file')}\n      key={node.fileName}\n      mod={{ active: index === value }}\n      onClick={() => setValue(index)}\n    >\n      <FileIcon fileIcon={node.icon} getFileIcon={getFileIcon} fileName={node.fileName} />\n      <span>{node.fileName}</span>\n    </UnstyledButton>\n  ));\n\n  return (\n    <Box {...getStyles('root')} ref={ref} {...others} dir=\"ltr\">\n      {withHeader && (\n        <div {...getStyles('header')}>\n          <ScrollArea type=\"never\" dir=\"ltr\" offsetScrollbars={false}>\n            <div {...getStyles('files')}>{files}</div>\n          </ScrollArea>\n          <div {...getStyles('controls')}>\n            {withExpandButton && (\n              <Tooltip\n                label={_expanded ? collapseCodeLabel : expandCodeLabel}\n                fz=\"sm\"\n                position=\"left\"\n              >\n                <ActionIcon\n                  onClick={() => setExpanded(!_expanded)}\n                  variant=\"none\"\n                  {...getStyles('control')}\n                >\n                  <ExpandIcon expanded={_expanded} />\n                </ActionIcon>\n              </Tooltip>\n            )}\n\n            <CopyButton value={currentCode.code.trim()}>\n              {({ copied, copy }) => (\n                <Tooltip label={copied ? copiedLabel : copyLabel} fz=\"sm\" position=\"left\">\n                  <ActionIcon onClick={copy} variant=\"none\" {...getStyles('control')}>\n                    <CopyIcon copied={copied} />\n                  </ActionIcon>\n                </Tooltip>\n              )}\n            </CopyButton>\n          </div>\n        </div>\n      )}\n\n      <ScrollArea type=\"auto\" dir=\"ltr\" offsetScrollbars={false}>\n        <Box {...getStyles('codeWrapper')} mod={{ expanded: _expanded }}>\n          <pre {...getStyles('pre')}>\n            <code {...getStyles('code')} dangerouslySetInnerHTML={{ __html: highlighted }} />\n          </pre>\n        </Box>\n      </ScrollArea>\n      <UnstyledButton\n        {...getStyles('showCodeButton')}\n        mod={{ hidden: _expanded }}\n        onClick={() => setExpanded(true)}\n      >\n        Expand code\n      </UnstyledButton>\n    </Box>\n  );\n});\n\nCodeHighlightTabs.displayName = '@mantine/core/CodeHighlightTabs';\n"],"names":[],"mappings":";;;;;;;;;;;;AA2BA,MAAM,OAAO,mCAAQ,QAAQ,KAAE,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC,KAAK,CAAC,GAAE,CAAC;AAkF7E,MAAM,YAAY,GAAoC;IACpD,UAAU,EAAE,IAAI;IAChB,SAAS,EAAE,WAAW;IACtB,WAAW,EAAE,QAAQ;IACrB,kBAAkB,EAAE,GAAG,CAAC,MAAM,CAAC;IAC/B,eAAe,EAAE,aAAa;IAC9B,iBAAiB,EAAE,eAAe;CACnC,CAAC;AAEF,MAAM,YAAY,GAAG,kBAAkB,CAA2B,CAAC,CAAC,EAAE,EAAE,kBAAkB,EAAE,MAAM;IAChG,IAAI,EAAE,EAAE,2BAA2B,EAAE,GAAG,CAAC,kBAAkB,CAAC,EAAE;CAC/D,CAAC,CAAC,CAAC;MAES,iBAAiB,GAAG,OAAO,CAA2B,CAAC,MAAM,EAAE,GAAG;IAC7E,MAAM,KAAK,GAAG,QAAQ,CAAC,mBAAmB,EAAE,YAAY,EAAE,MAAM,CAAC,CAAC;IAClE,MAAM,EACJ,UAAU,EACV,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,gBAAgB,EAChB,SAAS,EACT,WAAW,EACX,UAAU,EACV,WAAW,EACX,SAAS,EACT,WAAW,EACX,kBAAkB,EAClB,QAAQ,EACR,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,KAEd,KAAK,EADJ,MAAM,UACP,KAAK,EAxBH,oUAwBL,CAAQ,CAAC;IAEV,MAAM,SAAS,GAAG,SAAS,CAA2B;QACpD,IAAI,EAAE,mBAAmB;QACzB,KAAK;QACL,OAAO;QACP,SAAS;QACT,KAAK;QACL,UAAU;QACV,MAAM;QACN,QAAQ;QACR,IAAI;QACJ,YAAY;KACb,CAAC,CAAC;IAEH,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,eAAe,CAAC;QACxC,YAAY,EAAE,gBAAgB;QAC9B,KAAK,EAAE,SAAS;QAChB,UAAU,EAAE,CAAC;QACb,QAAQ,EAAE,WAAW;KACtB,CAAC,CAAC;IAEH,MAAM,CAAC,SAAS,EAAE,WAAW,CAAC,GAAG,eAAe,CAAC;QAC/C,YAAY,EAAE,eAAe;QAC7B,KAAK,EAAE,QAAQ;QACf,UAAU,EAAE,IAAI;QAChB,QAAQ,EAAE,gBAAgB;KAC3B,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC;IAClD,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;IAEjC,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE;QAC1D,QAAQ,EAAE,WAAW,CAAC,QAAS;KAChC,CAAC,CAAC,KAAK,CAAC;IAET,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAClC,oBAAC,cAAc,oBACT,SAAS,CAAC,MAAM,CAAC,IACrB,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,GAAG,EAAE,EAAE,MAAM,EAAE,KAAK,KAAK,KAAK,EAAE,EAChC,OAAO,EAAE,MAAM,QAAQ,CAAC,KAAK,CAAC;QAE9B,oBAAC,QAAQ,IAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI;QACpF,kCAAO,IAAI,CAAC,QAAQ,CAAQ,CACb,CAClB,CAAC,CAAC;IAEH,QACE,oBAAC,GAAG,oBAAK,SAAS,CAAC,MAAM,CAAC,IAAE,GAAG,EAAE,GAAG,IAAM,MAAM,IAAE,GAAG,EAAC,KAAK;QACxD,UAAU,KACT,6CAAS,SAAS,CAAC,QAAQ,CAAC;YAC1B,oBAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAC,GAAG,EAAC,KAAK,EAAC,gBAAgB,EAAE,KAAK;gBACxD,6CAAS,SAAS,CAAC,OAAO,CAAC,GAAG,KAAK,CAAO,CAC/B;YACb,6CAAS,SAAS,CAAC,UAAU,CAAC;gBAC3B,gBAAgB,KACf,oBAAC,OAAO,IACN,KAAK,EAAE,SAAS,GAAG,iBAAiB,GAAG,eAAe,EACtD,EAAE,EAAC,IAAI,EACP,QAAQ,EAAC,MAAM;oBAEf,oBAAC,UAAU,kBACT,OAAO,EAAE,MAAM,WAAW,CAAC,CAAC,SAAS,CAAC,EACtC,OAAO,EAAC,MAAM,IACV,SAAS,CAAC,SAAS,CAAC;wBAExB,oBAAC,UAAU,IAAC,QAAQ,EAAE,SAAS,GAAI,CACxB,CACL,CACX;gBAED,oBAAC,UAAU,IAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,IACvC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAChB,oBAAC,OAAO,IAAC,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,EAAE,EAAE,EAAC,IAAI,EAAC,QAAQ,EAAC,MAAM;oBACvE,oBAAC,UAAU,kBAAC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAC,MAAM,IAAK,SAAS,CAAC,SAAS,CAAC;wBAChE,oBAAC,QAAQ,IAAC,MAAM,EAAE,MAAM,GAAI,CACjB,CACL,CACX,CACU,CACT,CACF,CACP;QAED,oBAAC,UAAU,IAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,KAAK,EAAC,gBAAgB,EAAE,KAAK;YACvD,oBAAC,GAAG,oBAAK,SAAS,CAAC,aAAa,CAAC,IAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE;gBAC7D,6CAAS,SAAS,CAAC,KAAK,CAAC;oBACvB,8CAAU,SAAS,CAAC,MAAM,CAAC,IAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI,CAC7E,CACF,CACK;QACb,oBAAC,cAAc,oBACT,SAAS,CAAC,gBAAgB,CAAC,IAC/B,GAAG,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAC1B,OAAO,EAAE,MAAM,WAAW,CAAC,IAAI,CAAC,mBAGjB,CACb,EACN;AACJ,CAAC,EAAE;AAEH,iBAAiB,CAAC,WAAW,GAAG,iCAAiC;;;;"}

package/esm/src/mantine-code-highlight/src/CopyIcon.js

@@ -0,0 +1,17 @@
+import { __rest } from '../../../node_modules/tslib/tslib.es6.js';
+import { rem } from '@mantine/core';
+import React from 'react';
+
+function CopyIcon(_a) {
+    var { copied, style } = _a, others = __rest(_a, ["copied", "style"]);
+    return (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", style: Object.assign({ width: rem(18), height: rem(18) }, style), viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }, others), copied ? (React.createElement(React.Fragment, null,
+        React.createElement("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        React.createElement("path", { d: "M5 12l5 5l10 -10" }))) : (React.createElement(React.Fragment, null,
+        React.createElement("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        React.createElement("path", { d: "M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" }),
+        React.createElement("path", { d: "M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" })))));
+}
+CopyIcon.displayName = '@mantine/code-highlight/CopyIcon';
+
+export { CopyIcon };
+//# sourceMappingURL=CopyIcon.js.map

package/esm/src/mantine-code-highlight/src/CopyIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyIcon.js","sources":["../../../../src/CopyIcon.tsx"],"sourcesContent":["import { rem } from '@mantine/core';\nimport React from 'react';\n\ninterface CopyIconProps extends React.ComponentPropsWithoutRef<'svg'> {\n  copied: boolean;\n}\n\nexport function CopyIcon({ copied, style, ...others }: CopyIconProps) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      style={{ width: rem(18), height: rem(18), ...style }}\n      viewBox=\"0 0 24 24\"\n      strokeWidth=\"2\"\n      stroke=\"currentColor\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...others}\n    >\n      {copied ? (\n        <>\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n          <path d=\"M5 12l5 5l10 -10\"></path>\n        </>\n      ) : (\n        <>\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n          <path d=\"M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z\"></path>\n          <path d=\"M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2\"></path>\n        </>\n      )}\n    </svg>\n  );\n}\n\nCopyIcon.displayName = '@mantine/code-highlight/CopyIcon';\n"],"names":[],"mappings":";;;;SAOgB,QAAQ,CAAC,EAA2C;QAA3C,EAAE,MAAM,EAAE,KAAK,OAA4B,EAAvB,MAAM,cAA1B,mBAA4B,CAAF;IACjD,QACE,2CACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,kBAAI,KAAK,EAAE,GAAG,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,IAAK,KAAK,GAClD,OAAO,EAAC,WAAW,EACnB,WAAW,EAAC,GAAG,EACf,MAAM,EAAC,cAAc,EACrB,IAAI,EAAC,MAAM,EACX,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,IAClB,MAAM,GAET,MAAM,IACL;QACE,8BAAM,MAAM,EAAC,MAAM,EAAC,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAQ;QACzD,8BAAM,CAAC,EAAC,kBAAkB,GAAQ,CACjC,KAEH;QACE,8BAAM,MAAM,EAAC,MAAM,EAAC,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAQ;QACzD,8BAAM,CAAC,EAAC,8EAA8E,GAAQ;QAC9F,8BAAM,CAAC,EAAC,8DAA8D,GAAQ,CAC7E,CACJ,CACG,EACN;AACJ,CAAC;AAED,QAAQ,CAAC,WAAW,GAAG,kCAAkC;;;;"}

package/esm/src/mantine-code-highlight/src/ExpandIcon.js

@@ -0,0 +1,23 @@
+import { __rest } from '../../../node_modules/tslib/tslib.es6.js';
+import { rem } from '@mantine/core';
+import React from 'react';
+
+function ExpandIcon(_a) {
+    var { expanded, style } = _a, others = __rest(_a, ["expanded", "style"]);
+    return (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", style: Object.assign({ width: rem(18), height: rem(18) }, style), viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }, others), expanded ? (React.createElement(React.Fragment, null,
+        React.createElement("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        React.createElement("path", { d: "M12 13v-8l-3 3m6 0l-3 -3" }),
+        React.createElement("path", { d: "M9 17l1 0" }),
+        React.createElement("path", { d: "M14 17l1 0" }),
+        React.createElement("path", { d: "M19 17l1 0" }),
+        React.createElement("path", { d: "M4 17l1 0" }))) : (React.createElement(React.Fragment, null,
+        React.createElement("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        React.createElement("path", { d: "M12 11v8l3 -3m-6 0l3 3" }),
+        React.createElement("path", { d: "M9 7l1 0" }),
+        React.createElement("path", { d: "M14 7l1 0" }),
+        React.createElement("path", { d: "M19 7l1 0" }),
+        React.createElement("path", { d: "M4 7l1 0" })))));
+}
+
+export { ExpandIcon };
+//# sourceMappingURL=ExpandIcon.js.map

package/esm/src/mantine-code-highlight/src/ExpandIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandIcon.js","sources":["../../../../src/ExpandIcon.tsx"],"sourcesContent":["import { rem } from '@mantine/core';\nimport React from 'react';\n\ninterface ExpandIconProps extends React.ComponentPropsWithoutRef<'svg'> {\n  expanded: boolean;\n}\n\nexport function ExpandIcon({ expanded, style, ...others }: ExpandIconProps) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      style={{ width: rem(18), height: rem(18), ...style }}\n      viewBox=\"0 0 24 24\"\n      strokeWidth=\"2\"\n      stroke=\"currentColor\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...others}\n    >\n      {expanded ? (\n        <>\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n          <path d=\"M12 13v-8l-3 3m6 0l-3 -3\" />\n          <path d=\"M9 17l1 0\" />\n          <path d=\"M14 17l1 0\" />\n          <path d=\"M19 17l1 0\" />\n          <path d=\"M4 17l1 0\" />\n        </>\n      ) : (\n        <>\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n          <path d=\"M12 11v8l3 -3m-6 0l3 3\" />\n          <path d=\"M9 7l1 0\" />\n          <path d=\"M14 7l1 0\" />\n          <path d=\"M19 7l1 0\" />\n          <path d=\"M4 7l1 0\" />\n        </>\n      )}\n    </svg>\n  );\n}\n"],"names":[],"mappings":";;;;SAOgB,UAAU,CAAC,EAA+C;QAA/C,EAAE,QAAQ,EAAE,KAAK,OAA8B,EAAzB,MAAM,cAA5B,qBAA8B,CAAF;IACrD,QACE,2CACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,kBAAI,KAAK,EAAE,GAAG,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,IAAK,KAAK,GAClD,OAAO,EAAC,WAAW,EACnB,WAAW,EAAC,GAAG,EACf,MAAM,EAAC,cAAc,EACrB,IAAI,EAAC,MAAM,EACX,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,IAClB,MAAM,GAET,QAAQ,IACP;QACE,8BAAM,MAAM,EAAC,MAAM,EAAC,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAG;QACpD,8BAAM,CAAC,EAAC,0BAA0B,GAAG;QACrC,8BAAM,CAAC,EAAC,WAAW,GAAG;QACtB,8BAAM,CAAC,EAAC,YAAY,GAAG;QACvB,8BAAM,CAAC,EAAC,YAAY,GAAG;QACvB,8BAAM,CAAC,EAAC,WAAW,GAAG,CACrB,KAEH;QACE,8BAAM,MAAM,EAAC,MAAM,EAAC,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAG;QACpD,8BAAM,CAAC,EAAC,wBAAwB,GAAG;QACnC,8BAAM,CAAC,EAAC,UAAU,GAAG;QACrB,8BAAM,CAAC,EAAC,WAAW,GAAG;QACtB,8BAAM,CAAC,EAAC,WAAW,GAAG;QACtB,8BAAM,CAAC,EAAC,UAAU,GAAG,CACpB,CACJ,CACG,EACN;AACJ;;;;"}

package/esm/src/mantine-code-highlight/src/FileIcon.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+function FileIcon({ fileIcon, fileName, getFileIcon }) {
+    if (fileIcon) {
+        return React.createElement(React.Fragment, null, fileIcon);
+    }
+    if (getFileIcon && fileName) {
+        return React.createElement(React.Fragment, null, getFileIcon(fileName));
+    }
+    return null;
+}
+
+export { FileIcon };
+//# sourceMappingURL=FileIcon.js.map

package/esm/src/mantine-code-highlight/src/FileIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileIcon.js","sources":["../../../../src/FileIcon.tsx"],"sourcesContent":["import React from 'react';\n\ninterface FileIconProps {\n  fileName: string | undefined;\n  getFileIcon?: ((fileName: string) => React.ReactNode) | undefined;\n  fileIcon: React.ReactNode | undefined;\n}\n\nexport function FileIcon({ fileIcon, fileName, getFileIcon }: FileIconProps) {\n  if (fileIcon) {\n    return <>{fileIcon}</>;\n  }\n\n  if (getFileIcon && fileName) {\n    return <>{getFileIcon(fileName)}</>;\n  }\n\n  return null;\n}\n"],"names":[],"mappings":";;SAQgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAiB;IACzE,IAAI,QAAQ,EAAE;QACZ,OAAO,0CAAG,QAAQ,CAAI,CAAC;KACxB;IAED,IAAI,WAAW,IAAI,QAAQ,EAAE;QAC3B,OAAO,0CAAG,WAAW,CAAC,QAAQ,CAAC,CAAI,CAAC;KACrC;IAED,OAAO,IAAI,CAAC;AACd;;;;"}

package/esm/src/mantine-code-highlight/src/InlineCodeHighlight.js

@@ -0,0 +1,33 @@
+import { __rest } from '../../../node_modules/tslib/tslib.es6.js';
+import React from 'react';
+import cx from 'clsx';
+import { factory, useProps, useStyles, Box } from '@mantine/core';
+import hljs from 'highlight.js';
+import _classes from './CodeHighlight.module.css.js';
+import themeClasses from './CodeHighlight.theme.module.css.js';
+
+const classes = Object.assign(Object.assign({}, _classes), { code: cx(_classes.code, themeClasses.theme) });
+const defaultProps = {
+    language: 'tsx',
+};
+const InlineCodeHighlight = factory((_props, ref) => {
+    const props = useProps('InlineCodeHighlight', defaultProps, _props);
+    const { classNames, className, style, styles, unstyled, vars, code, language } = props, others = __rest(props, ["classNames", "className", "style", "styles", "unstyled", "vars", "code", "language"]);
+    const getStyles = useStyles({
+        name: 'InlineCodeHighlight',
+        props,
+        classes,
+        className,
+        style,
+        classNames,
+        styles,
+        unstyled,
+        rootSelector: 'code',
+    });
+    const highlighted = hljs.highlight(code.trim(), { language: language }).value;
+    return (React.createElement(Box, Object.assign({}, getStyles('code'), { component: "code", ref: ref }, others, { dangerouslySetInnerHTML: { __html: highlighted } })));
+});
+InlineCodeHighlight.displayName = '@mantine/core/InlineCodeHighlight';
+
+export { InlineCodeHighlight };
+//# sourceMappingURL=InlineCodeHighlight.js.map

package/esm/src/mantine-code-highlight/src/InlineCodeHighlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineCodeHighlight.js","sources":["../../../../src/InlineCodeHighlight.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'clsx';\nimport {\n  Box,\n  BoxProps,\n  StylesApiProps,\n  factory,\n  ElementProps,\n  useProps,\n  useStyles,\n  Factory,\n} from '@mantine/core';\nimport hljs from 'highlight.js';\nimport _classes from './CodeHighlight.module.css';\nimport themeClasses from './CodeHighlight.theme.module.css';\n\nconst classes = { ..._classes, code: cx(_classes.code, themeClasses.theme) };\n\nexport type InlineCodeHighlightStylesNames = 'code';\nexport type InlineCodeHighlightVariant = string;\n\nexport interface InlineCodeHighlightProps\n  extends BoxProps,\n    StylesApiProps<InlineCodeHighlightFactory>,\n    ElementProps<'div'> {\n  /** Code to highlight */\n  code: string;\n\n  /** Code language, `'tsx'` by default */\n  language?: string;\n}\n\nexport type InlineCodeHighlightFactory = Factory<{\n  props: InlineCodeHighlightProps;\n  ref: HTMLElement;\n  stylesNames: InlineCodeHighlightStylesNames;\n}>;\n\nconst defaultProps: Partial<InlineCodeHighlightProps> = {\n  language: 'tsx',\n};\n\nexport const InlineCodeHighlight = factory<InlineCodeHighlightFactory>((_props, ref) => {\n  const props = useProps('InlineCodeHighlight', defaultProps, _props);\n  const { classNames, className, style, styles, unstyled, vars, code, language, ...others } = props;\n\n  const getStyles = useStyles<InlineCodeHighlightFactory>({\n    name: 'InlineCodeHighlight',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    rootSelector: 'code',\n  });\n\n  const highlighted = hljs.highlight(code.trim(), { language: language! }).value;\n\n  return (\n    <Box\n      {...getStyles('code')}\n      component=\"code\"\n      ref={ref}\n      {...others}\n      dangerouslySetInnerHTML={{ __html: highlighted }}\n    />\n  );\n});\n\nInlineCodeHighlight.displayName = '@mantine/core/InlineCodeHighlight';\n"],"names":[],"mappings":";;;;;;;;AAgBA,MAAM,OAAO,mCAAQ,QAAQ,KAAE,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC,KAAK,CAAC,GAAE,CAAC;AAsB7E,MAAM,YAAY,GAAsC;IACtD,QAAQ,EAAE,KAAK;CAChB,CAAC;MAEW,mBAAmB,GAAG,OAAO,CAA6B,CAAC,MAAM,EAAE,GAAG;IACjF,MAAM,KAAK,GAAG,QAAQ,CAAC,qBAAqB,EAAE,YAAY,EAAE,MAAM,CAAC,CAAC;IACpE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,KAAgB,KAAK,EAAhB,MAAM,UAAK,KAAK,EAA3F,sFAAmF,CAAQ,CAAC;IAElG,MAAM,SAAS,GAAG,SAAS,CAA6B;QACtD,IAAI,EAAE,qBAAqB;QAC3B,KAAK;QACL,OAAO;QACP,SAAS;QACT,KAAK;QACL,UAAU;QACV,MAAM;QACN,QAAQ;QACR,YAAY,EAAE,MAAM;KACrB,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAS,EAAE,CAAC,CAAC,KAAK,CAAC;IAE/E,QACE,oBAAC,GAAG,oBACE,SAAS,CAAC,MAAM,CAAC,IACrB,SAAS,EAAC,MAAM,EAChB,GAAG,EAAE,GAAG,IACJ,MAAM,IACV,uBAAuB,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,IAChD,EACF;AACJ,CAAC,EAAE;AAEH,mBAAmB,CAAC,WAAW,GAAG,mCAAmC;;;;"}

package/esm/src/mantine-code-highlight/src/index.js

@@ -0,0 +1,4 @@
+export { CodeHighlightTabs } from './CodeHighlightTabs.js';
+export { CodeHighlight } from './CodeHighlight.js';
+export { InlineCodeHighlight } from './InlineCodeHighlight.js';
+//# sourceMappingURL=index.js.map

package/esm/src/mantine-code-highlight/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/esm/src/mantine-code-highlight/src/use-highlight.js

@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react';
+import hljs from 'highlight.js';
+
+function useHighlight({ code, language, highlightOnClient }) {
+    const getHighlightedCode = () => hljs.highlight(code.trim(), { language: language }).value;
+    const [highlighted, setHighlighted] = useState(!highlightOnClient);
+    const [highlightedCode, setHighlightedCode] = useState(highlightOnClient ? code : getHighlightedCode());
+    const getCodeProps = () => highlighted
+        ? { dangerouslySetInnerHTML: { __html: highlightedCode } }
+        : { children: code.trim() };
+    useEffect(() => {
+        if (highlightOnClient) {
+            setHighlightedCode(getHighlightedCode());
+            setHighlighted(true);
+        }
+    }, []);
+    return getCodeProps;
+}
+
+export { useHighlight };
+//# sourceMappingURL=use-highlight.js.map

package/esm/src/mantine-code-highlight/src/use-highlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-highlight.js","sources":["../../../../src/use-highlight.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport hljs from 'highlight.js';\n\ninterface UseHighlightInput {\n  code: string;\n  language: string;\n  highlightOnClient: boolean | undefined;\n}\n\nexport function useHighlight({ code, language, highlightOnClient }: UseHighlightInput) {\n  const getHighlightedCode = () => hljs.highlight(code.trim(), { language: language! }).value;\n  const [highlighted, setHighlighted] = useState(!highlightOnClient);\n  const [highlightedCode, setHighlightedCode] = useState(\n    highlightOnClient ? code : getHighlightedCode()\n  );\n\n  const getCodeProps = () =>\n    highlighted\n      ? { dangerouslySetInnerHTML: { __html: highlightedCode } }\n      : { children: code.trim() };\n\n  useEffect(() => {\n    if (highlightOnClient) {\n      setHighlightedCode(getHighlightedCode());\n      setHighlighted(true);\n    }\n  }, []);\n\n  return getCodeProps;\n}\n"],"names":[],"mappings":";;;SASgB,YAAY,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAqB;IACnF,MAAM,kBAAkB,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAS,EAAE,CAAC,CAAC,KAAK,CAAC;IAC5F,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,iBAAiB,CAAC,CAAC;IACnE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CACpD,iBAAiB,GAAG,IAAI,GAAG,kBAAkB,EAAE,CAChD,CAAC;IAEF,MAAM,YAAY,GAAG,MACnB,WAAW;UACP,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE;UACxD,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;IAEhC,SAAS,CAAC;QACR,IAAI,iBAAiB,EAAE;YACrB,kBAAkB,CAAC,kBAAkB,EAAE,CAAC,CAAC;YACzC,cAAc,CAAC,IAAI,CAAC,CAAC;SACtB;KACF,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,YAAY,CAAC;AACtB;;;;"}

package/esm/use-highlight.js

@@ -1,19 +1,20 @@
-'use client';
 import { useState, useEffect } from 'react';
 import hljs from 'highlight.js';
 
 function useHighlight({ code, language, highlightOnClient }) {
-  const getHighlightedCode = () => hljs.highlight(code.trim(), { language }).value;
-  const [highlighted, setHighlighted] = useState(!highlightOnClient);
-  const [highlightedCode, setHighlightedCode] = useState(highlightOnClient ? code : getHighlightedCode());
-  const getCodeProps = () => highlighted ? { dangerouslySetInnerHTML: { __html: highlightedCode } } : { children: code.trim() };
-  useEffect(() => {
-    if (highlightOnClient) {
-      setHighlightedCode(getHighlightedCode());
-      setHighlighted(true);
-    }
-  }, []);
-  return getCodeProps;
+    const getHighlightedCode = () => hljs.highlight(code.trim(), { language: language }).value;
+    const [highlighted, setHighlighted] = useState(!highlightOnClient);
+    const [highlightedCode, setHighlightedCode] = useState(highlightOnClient ? code : getHighlightedCode());
+    const getCodeProps = () => highlighted
+        ? { dangerouslySetInnerHTML: { __html: highlightedCode } }
+        : { children: code.trim() };
+    useEffect(() => {
+        if (highlightOnClient) {
+            setHighlightedCode(getHighlightedCode());
+            setHighlighted(true);
+        }
+    }, []);
+    return getCodeProps;
 }
 
 export { useHighlight };

package/esm/use-highlight.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-highlight.js","sources":["../src/use-highlight.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport hljs from 'highlight.js';\n\ninterface UseHighlightInput {\n  code: string;\n  language: string;\n  highlightOnClient: boolean | undefined;\n}\n\nexport function useHighlight({ code, language, highlightOnClient }: UseHighlightInput) {\n  const getHighlightedCode = () => hljs.highlight(code.trim(), { language: language! }).value;\n  const [highlighted, setHighlighted] = useState(!highlightOnClient);\n  const [highlightedCode, setHighlightedCode] = useState(\n    highlightOnClient ? code : getHighlightedCode()\n  );\n\n  const getCodeProps = () =>\n    highlighted\n      ? { dangerouslySetInnerHTML: { __html: highlightedCode } }\n      : { children: code.trim() };\n\n  useEffect(() => {\n    if (highlightOnClient) {\n      setHighlightedCode(getHighlightedCode());\n      setHighlighted(true);\n    }\n  }, []);\n\n  return getCodeProps;\n}\n"],"names":[],"mappings":";;;;AAEO,SAAS,YAAY,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAE,EAAE;AACpE,EAAE,MAAM,kBAAkB,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;AACnF,EAAE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,iBAAiB,CAAC,CAAC;AACrE,EAAE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,iBAAiB,GAAG,IAAI,GAAG,kBAAkB,EAAE,CAAC,CAAC;AAC1G,EAAE,MAAM,YAAY,GAAG,MAAM,WAAW,GAAG,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;AAChI,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,IAAI,iBAAiB,EAAE;AAC3B,MAAM,kBAAkB,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAC/C,MAAM,cAAc,CAAC,IAAI,CAAC,CAAC;AAC3B,KAAK;AACL,GAAG,EAAE,EAAE,CAAC,CAAC;AACT,EAAE,OAAO,YAAY,CAAC;AACtB;;"}
+{"version":3,"file":"use-highlight.js","sources":["../src/use-highlight.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport hljs from 'highlight.js';\n\ninterface UseHighlightInput {\n  code: string;\n  language: string;\n  highlightOnClient: boolean | undefined;\n}\n\nexport function useHighlight({ code, language, highlightOnClient }: UseHighlightInput) {\n  const getHighlightedCode = () => hljs.highlight(code.trim(), { language: language! }).value;\n  const [highlighted, setHighlighted] = useState(!highlightOnClient);\n  const [highlightedCode, setHighlightedCode] = useState(\n    highlightOnClient ? code : getHighlightedCode()\n  );\n\n  const getCodeProps = () =>\n    highlighted\n      ? { dangerouslySetInnerHTML: { __html: highlightedCode } }\n      : { children: code.trim() };\n\n  useEffect(() => {\n    if (highlightOnClient) {\n      setHighlightedCode(getHighlightedCode());\n      setHighlighted(true);\n    }\n  }, []);\n\n  return getCodeProps;\n}\n"],"names":[],"mappings":";;;SASgB,YAAY,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAqB;IACnF,MAAM,kBAAkB,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAS,EAAE,CAAC,CAAC,KAAK,CAAC;IAC5F,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,iBAAiB,CAAC,CAAC;IACnE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CACpD,iBAAiB,GAAG,IAAI,GAAG,kBAAkB,EAAE,CAChD,CAAC;IAEF,MAAM,YAAY,GAAG,MACnB,WAAW;UACP,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE;UACxD,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;IAEhC,SAAS,CAAC;QACR,IAAI,iBAAiB,EAAE;YACrB,kBAAkB,CAAC,kBAAkB,EAAE,CAAC,CAAC;YACzC,cAAc,CAAC,IAAI,CAAC,CAAC;SACtB;KACF,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,YAAY,CAAC;AACtB;;;;"}

package/package.json

@@ -1,13 +1,20 @@
 {
   "name": "@mantine/code-highlight",
   "description": "Code highlight with Mantine theme",
-  "version": "7.0.0-alpha.7",
-  "main": "cjs/index.js",
-  "module": "esm/index.js",
-  "types": "lib/index.d.ts",
+  "version": "7.0.0-alpha.9",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js"
+    },
+    "./styles.css": "./esm/index.css"
+  },
   "license": "MIT",
   "author": "Vitaly Rtishchev <rtivital@gmail.com>",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "homepage": "https://mantine.dev/others/prism/",
   "repository": {
     "url": "https://github.com/mantinedev/mantine.git",
@@ -29,14 +36,15 @@
     "syntax-highlight"
   ],
   "peerDependencies": {
-    "@mantine/core": "7.0.0-alpha.7",
-    "@mantine/hooks": "7.0.0-alpha.7",
+    "@mantine/core": "7.0.0-alpha.9",
+    "@mantine/hooks": "7.0.0-alpha.9",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
     "highlight.js": "^11.7.0",
-    "clsx": "1.1.1"
+    "clsx": "1.1.1",
+    "tslib": "^2.5.2"
   },
   "devDependencies": {}
 }