@coveord/plasma-mantine 52.27.4 → 53.0.0

package/dist/esm/components/browser-preview/BrowserPreview.module.css

@@ -0,0 +1,21 @@
+.root {
+    box-shadow: var(--mantine-shadow-md);
+    border-radius: var(--mantine-radius-default);
+    border: 1px solid;
+    border-color: var(--mantine-color-gray-3);
+    flex: 1;
+}
+
+.header {
+    box-shadow: var(--mantine-shadow-xs);
+    border-radius: var(--mantine-radius-default) var(--mantine-radius-default) 0 0;
+}
+
+.content {
+    overflow: auto;
+    flex-grow: 1;
+}
+
+.infoIcon {
+    color: var(--mantine-color-gray-5);
+}

package/dist/esm/components/button/Button.d.ts

@@ -1,16 +1,39 @@
-import { Button as MantineButton, ButtonProps as MantineButtonProps } from '@mantine/core';
+import { ButtonGroup, ButtonProps as MantineButtonProps } from '@mantine/core';
+import { ButtonCssVariables, ButtonStylesNames, ButtonVariant } from '@mantine/core/lib/components/Button/Button';
 import { MouseEventHandler } from 'react';
 import { ButtonWithDisabledTooltipProps } from './ButtonWithDisabledTooltip';
 export interface ButtonProps extends MantineButtonProps, ButtonWithDisabledTooltipProps {
     onClick?: MouseEventHandler<HTMLButtonElement>;
 }
-export declare const Button: (<C = "button">(props: import("@mantine/utils").PolymorphicComponentProps<C, ButtonProps>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & Omit<import("react").FunctionComponent<(ButtonProps & {
+export declare const Button: (<C = "button">(props: import("@mantine/core").PolymorphicComponentProps<C, ButtonProps>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & Omit<import("react").FunctionComponent<(ButtonProps & {
     component?: any;
-} & Omit<Pick<any, string | number | symbol>, "component" | keyof ButtonProps> & {
+} & Omit<Omit<any, "ref">, "component" | keyof ButtonProps> & {
     ref?: any;
+    renderRoot?: (props: any) => any;
 }) | (ButtonProps & {
-    component: import("react").ElementType<any>;
-})>, never> & {
-    Group: typeof MantineButton.Group;
+    component: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>;
+    renderRoot?: (props: Record<string, any>) => any;
+})>, never> & import("@mantine/core/lib/core/factory/factory").ThemeExtend<{
+    props: ButtonProps;
+    defaultRef: HTMLButtonElement;
+    defaultComponent: 'button';
+    stylesNames: ButtonStylesNames;
+    vars: ButtonCssVariables;
+    variant: ButtonVariant;
+    staticComponents: {
+        Group: typeof ButtonGroup;
+    };
+}> & import("@mantine/core/lib/core/factory/factory").ComponentClasses<{
+    props: ButtonProps;
+    defaultRef: HTMLButtonElement;
+    defaultComponent: 'button';
+    stylesNames: ButtonStylesNames;
+    vars: ButtonCssVariables;
+    variant: ButtonVariant;
+    staticComponents: {
+        Group: typeof ButtonGroup;
+    };
+}> & {
+    Group: typeof ButtonGroup;
 };
 //# sourceMappingURL=Button.d.ts.map

package/dist/esm/components/button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,IAAI,aAAa,EAAE,WAAW,IAAI,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACzF,OAAO,EAAyB,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAG1E,OAAO,EAA4B,8BAA8B,EAAC,MAAM,6BAA6B,CAAC;AAEtG,MAAM,WAAW,WAAY,SAAQ,kBAAkB,EAAE,8BAA8B;IAEnF,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CAClD;AA6CD,eAAO,MAAM,MAAM;;;;;;;WAA6D,OAAO,cAAc,KAAK;CAAW,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,WAAW,EAGX,WAAW,IAAI,kBAAkB,EAEpC,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,kBAAkB,EAAE,iBAAiB,EAAE,aAAa,EAAC,MAAM,4CAA4C,CAAC;AAChH,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAExC,OAAO,EAA4B,8BAA8B,EAAC,MAAM,6BAA6B,CAAC;AAEtG,MAAM,WAAW,WAAY,SAAQ,kBAAkB,EAAE,8BAA8B;IAEnF,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CAClD;AAcD,eAAO,MAAM,MAAM;;;;;;;;;WAXR,WAAW;gBACN,iBAAiB;sBACX,QAAQ;iBACb,iBAAiB;UACxB,kBAAkB;aACf,aAAa;sBACJ;QACd,KAAK,EAAE,kBAAkB,CAAC;KAC7B;;WARM,WAAW;gBACN,iBAAiB;sBACX,QAAQ;iBACb,iBAAiB;UACxB,kBAAkB;aACf,aAAa;sBACJ;QACd,KAAK,EAAE,kBAAkB,CAAC;KAC7B;;WADU,kBAAkB;CA6BhC,CAAC"}

package/dist/esm/components/button/Button.js

@@ -1,32 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button as MantineButton } from '@mantine/core';
-import { forwardRef, useState } from 'react';
-import { createPolymorphicComponent } from '../../utils';
+import { Button as MantineButton, polymorphicFactory } from '@mantine/core';
+import { useClickWithLoading } from '../../hooks/useClickWithLoading';
 import { ButtonWithDisabledTooltip } from './ButtonWithDisabledTooltip';
-const useLoadingHandler = (handler)=>{
-    const [isLoading, setIsLoading] = useState(false);
-    const handleClick = async (event)=>{
-        const possiblePromise = handler?.(event);
-        try {
-            if (possiblePromise instanceof Promise) {
-                setIsLoading(true);
-                await possiblePromise;
-                setIsLoading(false);
-            }
-        } catch (err) {
-            setIsLoading(false);
-            console.error(err);
-        }
-    };
-    return {
-        isLoading,
-        handleClick
-    };
-};
-const _Button = /*#__PURE__*/ forwardRef(({ disabledTooltip, disabled, disabledTooltipProps, loading, onClick, ...others }, ref)=>{
-    const { isLoading, handleClick } = useLoadingHandler(onClick);
+export const Button = polymorphicFactory(({ disabledTooltip, disabled, disabledTooltipProps, loading, onClick, 'data-disabled': dataDisabled, ...others }, ref)=>{
+    const { isLoading, handleClick } = useClickWithLoading(onClick);
     return /*#__PURE__*/ _jsx(ButtonWithDisabledTooltip, {
-        disabled: disabled,
+        disabled: disabled || dataDisabled,
         disabledTooltip: disabledTooltip,
         disabledTooltipProps: disabledTooltipProps,
         fullWidth: others.fullWidth,
@@ -36,13 +15,13 @@ const _Button = /*#__PURE__*/ forwardRef(({ disabledTooltip, disabled, disabledT
             },
             ref: ref,
             loading: isLoading || loading,
-            onClick: handleClick,
-            disabled: disabled,
+            onClick: dataDisabled ? (e)=>e.preventDefault() : handleClick,
+            disabled: disabled || dataDisabled,
+            "data-loading": isLoading || loading || undefined,
             ...others
         })
     });
 });
-export const Button = createPolymorphicComponent(_Button);
 Button.Group = MantineButton.Group;
 
 //# sourceMappingURL=Button.js.map

package/dist/esm/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import {Button as MantineButton, ButtonProps as MantineButtonProps} from '@mantine/core';\nimport {forwardRef, MouseEvent, MouseEventHandler, useState} from 'react';\n\nimport {createPolymorphicComponent} from '../../utils';\nimport {ButtonWithDisabledTooltip, ButtonWithDisabledTooltipProps} from './ButtonWithDisabledTooltip';\n\nexport interface ButtonProps extends MantineButtonProps, ButtonWithDisabledTooltipProps {\n    /* Handler executed on click */\n    onClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nconst useLoadingHandler = (handler?: MouseEventHandler<HTMLButtonElement>) => {\n    const [isLoading, setIsLoading] = useState(false);\n\n    const handleClick = async (event: MouseEvent<HTMLButtonElement>) => {\n        const possiblePromise: unknown = handler?.(event);\n        try {\n            if (possiblePromise instanceof Promise) {\n                setIsLoading(true);\n                await possiblePromise;\n                setIsLoading(false);\n            }\n        } catch (err) {\n            setIsLoading(false);\n            console.error(err);\n        }\n    };\n\n    return {isLoading, handleClick};\n};\n\nconst _Button = forwardRef<HTMLButtonElement, ButtonProps>(\n    ({disabledTooltip, disabled, disabledTooltipProps, loading, onClick, ...others}, ref) => {\n        const {isLoading, handleClick} = useLoadingHandler(onClick);\n        return (\n            <ButtonWithDisabledTooltip\n                disabled={disabled}\n                disabledTooltip={disabledTooltip}\n                disabledTooltipProps={disabledTooltipProps}\n                fullWidth={others.fullWidth}\n            >\n                <MantineButton\n                    loaderProps={{variant: 'oval'}}\n                    ref={ref}\n                    loading={isLoading || loading}\n                    onClick={handleClick}\n                    disabled={disabled}\n                    {...others}\n                />\n            </ButtonWithDisabledTooltip>\n        );\n    },\n);\n\nexport const Button = createPolymorphicComponent<'button', ButtonProps, {Group: typeof MantineButton.Group}>(_Button);\nButton.Group = MantineButton.Group;\n"],"names":["Button","MantineButton","forwardRef","useState","createPolymorphicComponent","ButtonWithDisabledTooltip","useLoadingHandler","handler","isLoading","setIsLoading","handleClick","event","possiblePromise","Promise","err","console","error","_Button","disabledTooltip","disabled","disabledTooltipProps","loading","onClick","others","ref","fullWidth","loaderProps","variant","Group"],"mappings":";AAAA,SAAQA,UAAUC,aAAa,QAA0C,gBAAgB;AACzF,SAAQC,UAAU,EAAiCC,QAAQ,QAAO,QAAQ;AAE1E,SAAQC,0BAA0B,QAAO,cAAc;AACvD,SAAQC,yBAAyB,QAAuC,8BAA8B;AAOtG,MAAMC,oBAAoB,CAACC;IACvB,MAAM,CAACC,WAAWC,aAAa,GAAGN,SAAS;IAE3C,MAAMO,cAAc,OAAOC;QACvB,MAAMC,kBAA2BL,UAAUI;QAC3C,IAAI;YACA,IAAIC,2BAA2BC,SAAS;gBACpCJ,aAAa;gBACb,MAAMG;gBACNH,aAAa;YACjB;QACJ,EAAE,OAAOK,KAAK;YACVL,aAAa;YACbM,QAAQC,KAAK,CAACF;QAClB;IACJ;IAEA,OAAO;QAACN;QAAWE;IAAW;AAClC;AAEA,MAAMO,wBAAUf,WACZ,CAAC,EAACgB,eAAe,EAAEC,QAAQ,EAAEC,oBAAoB,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGC,QAAO,EAAEC;IAC7E,MAAM,EAAChB,SAAS,EAAEE,WAAW,EAAC,GAAGJ,kBAAkBgB;IACnD,qBACI,KAACjB;QACGc,UAAUA;QACVD,iBAAiBA;QACjBE,sBAAsBA;QACtBK,WAAWF,OAAOE,SAAS;kBAE3B,cAAA,KAACxB;YACGyB,aAAa;gBAACC,SAAS;YAAM;YAC7BH,KAAKA;YACLH,SAASb,aAAaa;YACtBC,SAASZ;YACTS,UAAUA;YACT,GAAGI,MAAM;;;AAI1B;AAGJ,OAAO,MAAMvB,SAASI,2BAAuFa,SAAS;AACtHjB,OAAO4B,KAAK,GAAG3B,cAAc2B,KAAK"}
+{"version":3,"sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import {\n    ButtonGroup,\n    Factory,\n    Button as MantineButton,\n    ButtonProps as MantineButtonProps,\n    polymorphicFactory,\n} from '@mantine/core';\nimport {ButtonCssVariables, ButtonStylesNames, ButtonVariant} from '@mantine/core/lib/components/Button/Button';\nimport {MouseEventHandler} from 'react';\nimport {useClickWithLoading} from '../../hooks/useClickWithLoading';\nimport {ButtonWithDisabledTooltip, ButtonWithDisabledTooltipProps} from './ButtonWithDisabledTooltip';\n\nexport interface ButtonProps extends MantineButtonProps, ButtonWithDisabledTooltipProps {\n    /* Handler executed on click */\n    onClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\ntype ButtonOverloadFactory = Factory<{\n    props: ButtonProps;\n    defaultRef: HTMLButtonElement;\n    defaultComponent: 'button';\n    stylesNames: ButtonStylesNames;\n    vars: ButtonCssVariables;\n    variant: ButtonVariant;\n    staticComponents: {\n        Group: typeof ButtonGroup;\n    };\n}>;\n\nexport const Button = polymorphicFactory<ButtonOverloadFactory>(\n    (\n        {disabledTooltip, disabled, disabledTooltipProps, loading, onClick, 'data-disabled': dataDisabled, ...others},\n        ref,\n    ) => {\n        const {isLoading, handleClick} = useClickWithLoading(onClick);\n        return (\n            <ButtonWithDisabledTooltip\n                disabled={disabled || dataDisabled}\n                disabledTooltip={disabledTooltip}\n                disabledTooltipProps={disabledTooltipProps}\n                fullWidth={others.fullWidth}\n            >\n                <MantineButton\n                    loaderProps={{variant: 'oval'}}\n                    ref={ref}\n                    loading={isLoading || loading}\n                    onClick={dataDisabled ? (e) => e.preventDefault() : handleClick}\n                    disabled={disabled || dataDisabled}\n                    data-loading={isLoading || loading || undefined}\n                    {...others}\n                />\n            </ButtonWithDisabledTooltip>\n        );\n    },\n);\nButton.Group = MantineButton.Group;\n"],"names":["Button","MantineButton","polymorphicFactory","useClickWithLoading","ButtonWithDisabledTooltip","disabledTooltip","disabled","disabledTooltipProps","loading","onClick","dataDisabled","others","ref","isLoading","handleClick","fullWidth","loaderProps","variant","e","preventDefault","data-loading","undefined","Group"],"mappings":";AAAA,SAGIA,UAAUC,aAAa,EAEvBC,kBAAkB,QACf,gBAAgB;AAGvB,SAAQC,mBAAmB,QAAO,kCAAkC;AACpE,SAAQC,yBAAyB,QAAuC,8BAA8B;AAmBtG,OAAO,MAAMJ,SAASE,mBAClB,CACI,EAACG,eAAe,EAAEC,QAAQ,EAAEC,oBAAoB,EAAEC,OAAO,EAAEC,OAAO,EAAE,iBAAiBC,YAAY,EAAE,GAAGC,QAAO,EAC7GC;IAEA,MAAM,EAACC,SAAS,EAAEC,WAAW,EAAC,GAAGX,oBAAoBM;IACrD,qBACI,KAACL;QACGE,UAAUA,YAAYI;QACtBL,iBAAiBA;QACjBE,sBAAsBA;QACtBQ,WAAWJ,OAAOI,SAAS;kBAE3B,cAAA,KAACd;YACGe,aAAa;gBAACC,SAAS;YAAM;YAC7BL,KAAKA;YACLJ,SAASK,aAAaL;YACtBC,SAASC,eAAe,CAACQ,IAAMA,EAAEC,cAAc,KAAKL;YACpDR,UAAUA,YAAYI;YACtBU,gBAAcP,aAAaL,WAAWa;YACrC,GAAGV,MAAM;;;AAI1B,GACF;AACFX,OAAOsB,KAAK,GAAGrB,cAAcqB,KAAK"}

package/dist/esm/components/button/ButtonWithDisabledTooltip.d.ts

@@ -24,6 +24,6 @@ export declare const ButtonWithDisabledTooltip: (<C = "div">(props: import("@man
 } & Omit<Pick<any, string | number | symbol>, "component" | keyof ButtonWithDisabledTooltipProps> & {
     ref?: any;
 }) | (ButtonWithDisabledTooltipProps & {
-    component: import("react").ElementType<any>;
+    component: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>;
 })>, never> & Record<string, never>;
 //# sourceMappingURL=ButtonWithDisabledTooltip.d.ts.map

package/dist/esm/components/button/ButtonWithDisabledTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonWithDisabledTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/button/ButtonWithDisabledTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAC,MAAM,eAAe,CAAC;AACzD,OAAO,EAAa,SAAS,EAAC,MAAM,OAAO,CAAC;AAI5C,MAAM,WAAW,8BAA8B;IAC3C;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,oBAAoB,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC;IAC7E;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAeD,eAAO,MAAM,yBAAyB;;;;;;mCAErC,CAAC"}
+{"version":3,"file":"ButtonWithDisabledTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/button/ButtonWithDisabledTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAC,MAAM,eAAe,CAAC;AACzD,OAAO,EAAC,SAAS,EAAa,MAAM,OAAO,CAAC;AAI5C,MAAM,WAAW,8BAA8B;IAC3C;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,oBAAoB,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC;IAC7E;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAeD,eAAO,MAAM,yBAAyB;;;;;;mCAErC,CAAC"}

package/dist/esm/components/button/ButtonWithDisabledTooltip.js

@@ -8,7 +8,7 @@ const _ButtonWithDisabledTooltip = /*#__PURE__*/ forwardRef(({ disabledTooltip,
         ...disabledTooltipProps,
         children: /*#__PURE__*/ _jsx(Box, {
             ref: ref,
-            sx: {
+            style: {
                 '&:hover': {
                     cursor: 'not-allowed'
                 },

package/dist/esm/components/button/ButtonWithDisabledTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/button/ButtonWithDisabledTooltip.tsx"],"sourcesContent":["import {Box, Tooltip, TooltipProps} from '@mantine/core';\nimport {forwardRef, ReactNode} from 'react';\n\nimport {createPolymorphicComponent} from '../../utils';\n\nexport interface ButtonWithDisabledTooltipProps {\n    /**\n     * The tooltip message to display when disabled\n     */\n    disabledTooltip?: string;\n    /**\n     * Whether the button underneath the tooltip is disabled\n     */\n    disabled?: boolean;\n    children?: ReactNode;\n    /**\n     * Additional tooltip props to set on the disabled button tooltip\n     */\n    disabledTooltipProps?: Omit<TooltipProps, 'disabled' | 'label' | 'children'>;\n    /**\n     * Sets button width to 100% of parent element\n     */\n    fullWidth?: boolean;\n}\n\nconst _ButtonWithDisabledTooltip = forwardRef<HTMLDivElement, ButtonWithDisabledTooltipProps>(\n    ({disabledTooltip, disabled, children, disabledTooltipProps, fullWidth, ...others}, ref) =>\n        disabledTooltip ? (\n            <Tooltip label={disabledTooltip} disabled={!disabled} {...disabledTooltipProps}>\n                <Box ref={ref} sx={{'&:hover': {cursor: 'not-allowed'}, width: fullWidth && '100%'}} {...others}>\n                    {children}\n                </Box>\n            </Tooltip>\n        ) : (\n            <>{children}</>\n        ),\n);\n\nexport const ButtonWithDisabledTooltip = createPolymorphicComponent<'div', ButtonWithDisabledTooltipProps>(\n    _ButtonWithDisabledTooltip,\n);\n"],"names":["Box","Tooltip","forwardRef","createPolymorphicComponent","_ButtonWithDisabledTooltip","disabledTooltip","disabled","children","disabledTooltipProps","fullWidth","others","ref","label","sx","cursor","width","ButtonWithDisabledTooltip"],"mappings":";AAAA,SAAQA,GAAG,EAAEC,OAAO,QAAqB,gBAAgB;AACzD,SAAQC,UAAU,QAAkB,QAAQ;AAE5C,SAAQC,0BAA0B,QAAO,cAAc;AAsBvD,MAAMC,2CAA6BF,WAC/B,CAAC,EAACG,eAAe,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,oBAAoB,EAAEC,SAAS,EAAE,GAAGC,QAAO,EAAEC,MAChFN,gCACI,KAACJ;QAAQW,OAAOP;QAAiBC,UAAU,CAACA;QAAW,GAAGE,oBAAoB;kBAC1E,cAAA,KAACR;YAAIW,KAAKA;YAAKE,IAAI;gBAAC,WAAW;oBAACC,QAAQ;gBAAa;gBAAGC,OAAON,aAAa;YAAM;YAAI,GAAGC,MAAM;sBAC1FH;;uBAIT;kBAAGA;;AAIf,OAAO,MAAMS,4BAA4Bb,2BACrCC,4BACF"}
+{"version":3,"sources":["../../../../src/components/button/ButtonWithDisabledTooltip.tsx"],"sourcesContent":["import {Box, Tooltip, TooltipProps} from '@mantine/core';\nimport {ReactNode, forwardRef} from 'react';\n\nimport {createPolymorphicComponent} from '../../utils';\n\nexport interface ButtonWithDisabledTooltipProps {\n    /**\n     * The tooltip message to display when disabled\n     */\n    disabledTooltip?: string;\n    /**\n     * Whether the button underneath the tooltip is disabled\n     */\n    disabled?: boolean;\n    children?: ReactNode;\n    /**\n     * Additional tooltip props to set on the disabled button tooltip\n     */\n    disabledTooltipProps?: Omit<TooltipProps, 'disabled' | 'label' | 'children'>;\n    /**\n     * Sets button width to 100% of parent element\n     */\n    fullWidth?: boolean;\n}\n\nconst _ButtonWithDisabledTooltip = forwardRef<HTMLDivElement, ButtonWithDisabledTooltipProps>(\n    ({disabledTooltip, disabled, children, disabledTooltipProps, fullWidth, ...others}, ref) =>\n        disabledTooltip ? (\n            <Tooltip label={disabledTooltip} disabled={!disabled} {...disabledTooltipProps}>\n                <Box ref={ref} style={{'&:hover': {cursor: 'not-allowed'}, width: fullWidth && '100%'}} {...others}>\n                    {children}\n                </Box>\n            </Tooltip>\n        ) : (\n            <>{children}</>\n        ),\n);\n\nexport const ButtonWithDisabledTooltip = createPolymorphicComponent<'div', ButtonWithDisabledTooltipProps>(\n    _ButtonWithDisabledTooltip,\n);\n"],"names":["Box","Tooltip","forwardRef","createPolymorphicComponent","_ButtonWithDisabledTooltip","disabledTooltip","disabled","children","disabledTooltipProps","fullWidth","others","ref","label","style","cursor","width","ButtonWithDisabledTooltip"],"mappings":";AAAA,SAAQA,GAAG,EAAEC,OAAO,QAAqB,gBAAgB;AACzD,SAAmBC,UAAU,QAAO,QAAQ;AAE5C,SAAQC,0BAA0B,QAAO,cAAc;AAsBvD,MAAMC,2CAA6BF,WAC/B,CAAC,EAACG,eAAe,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,oBAAoB,EAAEC,SAAS,EAAE,GAAGC,QAAO,EAAEC,MAChFN,gCACI,KAACJ;QAAQW,OAAOP;QAAiBC,UAAU,CAACA;QAAW,GAAGE,oBAAoB;kBAC1E,cAAA,KAACR;YAAIW,KAAKA;YAAKE,OAAO;gBAAC,WAAW;oBAACC,QAAQ;gBAAa;gBAAGC,OAAON,aAAa;YAAM;YAAI,GAAGC,MAAM;sBAC7FH;;uBAIT;kBAAGA;;AAIf,OAAO,MAAMS,4BAA4Bb,2BACrCC,4BACF"}

package/dist/esm/components/code-editor/CodeEditor.d.ts

@@ -1,16 +1,6 @@
-import { DefaultProps, InputWrapperBaseProps, Selectors } from '@mantine/core';
+import { InputWrapperProps, StackProps } from '@mantine/core';
 import { FunctionComponent } from 'react';
-declare const useStyles: (params: {
-    error?: boolean;
-}, options?: import("@mantine/core").UseStylesOptions<string>) => {
-    classes: {
-        root: string;
-        editor: string;
-    };
-    cx: (...args: any) => string;
-    theme: import("@mantine/core").MantineTheme;
-};
-interface CodeEditorProps extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>, DefaultProps<Selectors<typeof useStyles>> {
+interface CodeEditorProps extends Omit<InputWrapperProps, 'inputContainer' | 'inputWrapperOrder' | 'classNames' | 'styles' | 'vars' | 'onChange'>, Omit<StackProps, 'onChange'> {
     /**
      * The language syntax of the editor
      *

package/dist/esm/components/code-editor/CodeEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIH,YAAY,EAGZ,qBAAqB,EAGrB,SAAS,EAIZ,MAAM,eAAe,CAAC;AAIvB,OAAO,EAAC,iBAAiB,EAA8B,MAAM,OAAO,CAAC;AAOrE,QAAA,MAAM,SAAS;YAA0C,OAAO;;;;;;;;CAW7D,CAAC;AAEJ,UAAU,eACN,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,CAAC,MAAM,GAAG,OAAO,CAAC,CAAC;IACrF,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,kDAAkD;IAClD,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,+CAA+C;IAC/C,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB,qDAAqD;IACrD,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;CAClC;AASD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAsJzD,CAAC"}
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKH,iBAAiB,EAIjB,UAAU,EAKb,MAAM,eAAe,CAAC;AAIvB,OAAO,EAAC,iBAAiB,EAA8B,MAAM,OAAO,CAAC;AAQrE,UAAU,eACN,SAAQ,IAAI,CACJ,iBAAiB,EACjB,gBAAgB,GAAG,mBAAmB,GAAG,YAAY,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,CACzF,EACD,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC;IAChC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,CAAC,MAAM,GAAG,OAAO,CAAC,CAAC;IACrF,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,kDAAkD;IAClD,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,+CAA+C;IAC/C,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB,qDAAqD;IACrD,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;CAClC;AASD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CA+JzD,CAAC"}

package/dist/esm/components/code-editor/CodeEditor.js

@@ -1,24 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Center, createStyles, Group, Input, Loader, px, Space, Stack, useComponentDefaultProps } from '@mantine/core';
+import { Box, Center, Group, Input, Loader, Space, Stack, px, useMantineColorScheme, useMantineTheme, useProps } from '@mantine/core';
 import { useUncontrolled } from '@mantine/hooks';
 import Editor, { loader } from '@monaco-editor/react';
 import { useEffect, useRef, useState } from 'react';
+import cx from 'clsx';
 import { useParentHeight } from '../../hooks';
-import { XML } from './languages/xml';
 import { CopyToClipboard } from '../copyToClipboard';
+import CodeEditorClasses from './CodeEditor.module.css';
+import { XML } from './languages/xml';
 import { Search } from './search';
-const useStyles = createStyles((theme, { error })=>({
-        root: {},
-        editor: {
-            border: `1px solid ${theme.colors.gray[2]}`,
-            borderRadius: theme.defaultRadius,
-            backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,
-            height: '100%',
-            outlineColor: error ? theme.colors.red[6] : null,
-            outlineStyle: error ? 'solid' : 'none',
-            outlineWidth: 'thin'
-        }
-    }));
 const defaultProps = {
     language: 'plaintext',
     monacoLoader: 'local',
@@ -26,7 +16,7 @@ const defaultProps = {
     minHeight: 300
 };
 export const CodeEditor = (props)=>{
-    const { language, defaultValue, onChange, onCopy, onSearch, onFocus, value, label, required, labelProps, error, errorProps, description, descriptionProps, minHeight, maxHeight, disabled, monacoLoader, ...others } = useComponentDefaultProps('CodeEditor', defaultProps, props);
+    const { language, defaultValue, onChange, onCopy, onSearch, onFocus, value, label, required, labelProps, error, errorProps, description, descriptionProps, minHeight, maxHeight, disabled, monacoLoader, ...others } = useProps('CodeEditor', defaultProps, props);
     const [loaded, setLoaded] = useState(false);
     const [_value, handleChange] = useUncontrolled({
         value,
@@ -57,11 +47,8 @@ export const CodeEditor = (props)=>{
     };
     const [hasMonacoError, setHasMonacoError] = useState(false);
     const renderErrorOutline = !!error || hasMonacoError;
-    const { classes, theme } = useStyles({
-        error: renderErrorOutline
-    }, {
-        name: 'CodeEditor'
-    });
+    const theme = useMantineTheme();
+    const { colorScheme } = useMantineColorScheme();
     useEffect(()=>{
         if (monacoLoader === 'local') {
             loadLocalMonaco();
@@ -95,8 +82,8 @@ export const CodeEditor = (props)=>{
         ]
     }) : null;
     const _buttons = /*#__PURE__*/ _jsxs(Group, {
-        position: "right",
-        spacing: 0,
+        justify: "right",
+        gap: 0,
         children: [
             /*#__PURE__*/ _jsx(Search, {
                 handleSearch: handleSearch
@@ -110,12 +97,16 @@ export const CodeEditor = (props)=>{
     const _editor = loaded ? /*#__PURE__*/ _jsx(Box, {
         p: "md",
         pl: "xs",
-        className: classes.editor,
+        className: cx(CodeEditorClasses.editor, {
+            [CodeEditorClasses.valid]: !renderErrorOutline
+        }, {
+            [CodeEditorClasses.error]: renderErrorOutline
+        }),
         "data-testid": "editor-wrapper",
         children: /*#__PURE__*/ _jsx(Editor, {
             onValidate: handleValidate,
             defaultLanguage: language,
-            theme: theme.colorScheme === 'light' ? 'light' : 'vs-dark',
+            theme: colorScheme === 'light' ? 'light' : 'vs-dark',
             options: {
                 minimap: {
                     enabled: false
@@ -139,14 +130,13 @@ export const CodeEditor = (props)=>{
             }
         })
     }) : /*#__PURE__*/ _jsx(Center, {
-        className: classes.editor,
+        className: CodeEditorClasses.editor,
         children: /*#__PURE__*/ _jsx(Loader, {})
     });
     return /*#__PURE__*/ _jsxs(Stack, {
         justify: "flex-start",
-        className: classes.root,
-        spacing: 0,
-        sx: {
+        gap: 0,
+        style: {
             height: Math.max(parentHeight, minHeight),
             maxHeight
         },

package/dist/esm/components/code-editor/CodeEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"sourcesContent":["import {\n    Box,\n    Center,\n    createStyles,\n    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\n    Loader,\n    px,\n    Selectors,\n    Space,\n    Stack,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport {editor as monacoEditor} from 'monaco-editor';\nimport Editor, {loader, Monaco} from '@monaco-editor/react';\nimport {FunctionComponent, useEffect, useRef, useState} from 'react';\n\nimport {useParentHeight} from '../../hooks';\nimport {XML} from './languages/xml';\nimport {CopyToClipboard} from '../copyToClipboard';\nimport {Search} from './search';\n\nconst useStyles = createStyles((theme, {error}: {error?: boolean}) => ({\n    root: {},\n    editor: {\n        border: `1px solid ${theme.colors.gray[2]}`,\n        borderRadius: theme.defaultRadius,\n        backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,\n        height: '100%',\n        outlineColor: error ? theme.colors.red[6] : null,\n        outlineStyle: error ? 'solid' : 'none',\n        outlineWidth: 'thin',\n    },\n}));\n\ninterface CodeEditorProps\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * The language syntax of the editor\n     *\n     * @default 'plaintext'\n     */\n    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml' | (string & unknown);\n    /** Default value for uncontrolled input */\n    defaultValue?: string;\n    /** Value for controlled input */\n    value?: string;\n    /** onChange value for controlled input */\n    onChange?(value: string): void;\n    /** Called whenever the search icon is clicked  */\n    onSearch?(): void;\n    /** Called whenever the copy icon is clicked */\n    onCopy?(): void;\n    /** Called whenever the code editor gets the focus */\n    onFocus?(): void;\n    /**\n     * The minimal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height is too short, it will use this value as minimum.\n     *\n     * @default 300\n     */\n    minHeight?: number;\n    /**\n     * The maximal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height would be too high for your liking, you can use this prop to set a maximum.\n     */\n    maxHeight?: number;\n    disabled?: boolean;\n    /**\n     * Defines how the monaco editor files will be loaded.\n     * Note that using `'local'` requires [some additional configuration](https://github.com/suren-atoyan/monaco-react#use-monaco-editor-as-an-npm-package).\n     *\n     * @default 'local'\n     */\n    monacoLoader?: 'cdn' | 'local';\n}\n\nconst defaultProps: Partial<CodeEditorProps> = {\n    language: 'plaintext',\n    monacoLoader: 'local',\n    defaultValue: '',\n    minHeight: 300,\n};\n\nexport const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {\n    const {\n        language,\n        defaultValue,\n        onChange,\n        onCopy,\n        onSearch,\n        onFocus,\n        value,\n        label,\n        required,\n        labelProps,\n        error,\n        errorProps,\n        description,\n        descriptionProps,\n        minHeight,\n        maxHeight,\n        disabled,\n        monacoLoader,\n        ...others\n    } = useComponentDefaultProps('CodeEditor', defaultProps, props);\n    const [loaded, setLoaded] = useState(false);\n    const [_value, handleChange] = useUncontrolled<string>({\n        value,\n        defaultValue,\n        onChange,\n        finalValue: '',\n    });\n    const [parentHeight, ref] = useParentHeight();\n    const editorRef = useRef(null);\n    const loadLocalMonaco = async () => {\n        const monacoInstance = await import('monaco-editor');\n        loader.config({monaco: monacoInstance});\n        setLoaded(true);\n    };\n\n    const registerLanguages = (monaco: Monaco) => {\n        if (monaco && language === 'xml') {\n            XML.register(monaco);\n        }\n    };\n\n    const handleSearch = () => {\n        if (editorRef.current) {\n            editorRef.current.focus();\n            editorRef.current.trigger('editor', 'actions.find', '');\n            onSearch?.();\n        }\n    };\n\n    const [hasMonacoError, setHasMonacoError] = useState(false);\n    const renderErrorOutline = !!error || hasMonacoError;\n    const {classes, theme} = useStyles({error: renderErrorOutline}, {name: 'CodeEditor'});\n\n    useEffect(() => {\n        if (monacoLoader === 'local') {\n            loadLocalMonaco();\n        } else {\n            setLoaded(true);\n        }\n    }, []);\n\n    const handleValidate = (markers: monacoEditor.IMarker[]) => {\n        setHasMonacoError(\n            markers.some((marker) => marker.severity === loader.__getMonacoInstance().MarkerSeverity.Error),\n        );\n    };\n\n    const _label = label ? (\n        <Input.Label required={required} {...labelProps}>\n            {label}\n        </Input.Label>\n    ) : null;\n\n    const _description = description ? (\n        <Input.Description {...descriptionProps}>{description}</Input.Description>\n    ) : null;\n\n    const _error = error ? (\n        <Input.Error mt=\"xs\" {...errorProps}>\n            {error}\n        </Input.Error>\n    ) : (\n        <Space h=\"xs\" />\n    );\n\n    const _header =\n        _label || _description ? (\n            <Box>\n                {_label}\n                {_description}\n            </Box>\n        ) : null;\n\n    const _buttons = (\n        <Group position=\"right\" spacing={0}>\n            <Search handleSearch={handleSearch} />\n            <CopyToClipboard value={_value} onCopy={() => onCopy?.()} />\n        </Group>\n    );\n\n    const _editor = loaded ? (\n        <Box p=\"md\" pl=\"xs\" className={classes.editor} data-testid=\"editor-wrapper\">\n            <Editor\n                onValidate={handleValidate}\n                defaultLanguage={language}\n                theme={theme.colorScheme === 'light' ? 'light' : 'vs-dark'}\n                options={{\n                    minimap: {enabled: false},\n                    wordWrap: 'on',\n                    scrollBeyondLastLine: false,\n                    formatOnPaste: true,\n                    fontSize: px(theme.fontSizes.xs),\n                    readOnly: disabled,\n                    tabSize: 2,\n                }}\n                value={_value}\n                onChange={handleChange}\n                onMount={(editor, monaco) => {\n                    editorRef.current = editor;\n                    registerLanguages(monaco);\n                    editor.onDidFocusEditorText(() => onFocus?.());\n                    editor.onDidBlurEditorText(async () => {\n                        await editor.getAction('editor.action.formatDocument').run();\n                    });\n                }}\n            />\n        </Box>\n    ) : (\n        <Center className={classes.editor}>\n            <Loader />\n        </Center>\n    );\n\n    return (\n        <Stack\n            justify=\"flex-start\"\n            className={classes.root}\n            spacing={0}\n            sx={{height: Math.max(parentHeight, minHeight), maxHeight}}\n            ref={ref}\n            {...others}\n        >\n            {_header}\n            {_buttons}\n            {_editor}\n            {_error}\n        </Stack>\n    );\n};\n"],"names":["Box","Center","createStyles","Group","Input","Loader","px","Space","Stack","useComponentDefaultProps","useUncontrolled","Editor","loader","useEffect","useRef","useState","useParentHeight","XML","CopyToClipboard","Search","useStyles","theme","error","root","editor","border","colors","gray","borderRadius","defaultRadius","backgroundColor","colorScheme","white","black","height","outlineColor","red","outlineStyle","outlineWidth","defaultProps","language","monacoLoader","defaultValue","minHeight","CodeEditor","props","onChange","onCopy","onSearch","onFocus","value","label","required","labelProps","errorProps","description","descriptionProps","maxHeight","disabled","others","loaded","setLoaded","_value","handleChange","finalValue","parentHeight","ref","editorRef","loadLocalMonaco","monacoInstance","config","monaco","registerLanguages","register","handleSearch","current","focus","trigger","hasMonacoError","setHasMonacoError","renderErrorOutline","classes","name","handleValidate","markers","some","marker","severity","__getMonacoInstance","MarkerSeverity","Error","_label","Label","_description","Description","_error","mt","h","_header","_buttons","position","spacing","_editor","p","pl","className","data-testid","onValidate","defaultLanguage","options","minimap","enabled","wordWrap","scrollBeyondLastLine","formatOnPaste","fontSize","fontSizes","xs","readOnly","tabSize","onMount","onDidFocusEditorText","onDidBlurEditorText","getAction","run","justify","sx","Math","max"],"mappings":";AAAA,SACIA,GAAG,EACHC,MAAM,EACNC,YAAY,EAEZC,KAAK,EACLC,KAAK,EAELC,MAAM,EACNC,EAAE,EAEFC,KAAK,EACLC,KAAK,EACLC,wBAAwB,QACrB,gBAAgB;AACvB,SAAQC,eAAe,QAAO,iBAAiB;AAE/C,OAAOC,UAASC,MAAM,QAAe,uBAAuB;AAC5D,SAA2BC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAO,QAAQ;AAErE,SAAQC,eAAe,QAAO,cAAc;AAC5C,SAAQC,GAAG,QAAO,kBAAkB;AACpC,SAAQC,eAAe,QAAO,qBAAqB;AACnD,SAAQC,MAAM,QAAO,WAAW;AAEhC,MAAMC,YAAYlB,aAAa,CAACmB,OAAO,EAACC,KAAK,EAAoB,GAAM,CAAA;QACnEC,MAAM,CAAC;QACPC,QAAQ;YACJC,QAAQ,CAAC,UAAU,EAAEJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE,CAAC,CAAC;YAC3CC,cAAcP,MAAMQ,aAAa;YACjCC,iBAAiBT,MAAMU,WAAW,KAAK,UAAUV,MAAMW,KAAK,GAAGX,MAAMY,KAAK;YAC1EC,QAAQ;YACRC,cAAcb,QAAQD,MAAMK,MAAM,CAACU,GAAG,CAAC,EAAE,GAAG;YAC5CC,cAAcf,QAAQ,UAAU;YAChCgB,cAAc;QAClB;IACJ,CAAA;AAiDA,MAAMC,eAAyC;IAC3CC,UAAU;IACVC,cAAc;IACdC,cAAc;IACdC,WAAW;AACf;AAEA,OAAO,MAAMC,aAAiD,CAACC;IAC3D,MAAM,EACFL,QAAQ,EACRE,YAAY,EACZI,QAAQ,EACRC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACPC,KAAK,EACLC,KAAK,EACLC,QAAQ,EACRC,UAAU,EACV/B,KAAK,EACLgC,UAAU,EACVC,WAAW,EACXC,gBAAgB,EAChBb,SAAS,EACTc,SAAS,EACTC,QAAQ,EACRjB,YAAY,EACZ,GAAGkB,QACN,GAAGlD,yBAAyB,cAAc8B,cAAcM;IACzD,MAAM,CAACe,QAAQC,UAAU,GAAG9C,SAAS;IACrC,MAAM,CAAC+C,QAAQC,aAAa,GAAGrD,gBAAwB;QACnDwC;QACAR;QACAI;QACAkB,YAAY;IAChB;IACA,MAAM,CAACC,cAAcC,IAAI,GAAGlD;IAC5B,MAAMmD,YAAYrD,OAAO;IACzB,MAAMsD,kBAAkB;QACpB,MAAMC,iBAAiB,MAAM,MAAM,CAAC;QACpCzD,OAAO0D,MAAM,CAAC;YAACC,QAAQF;QAAc;QACrCR,UAAU;IACd;IAEA,MAAMW,oBAAoB,CAACD;QACvB,IAAIA,UAAU/B,aAAa,OAAO;YAC9BvB,IAAIwD,QAAQ,CAACF;QACjB;IACJ;IAEA,MAAMG,eAAe;QACjB,IAAIP,UAAUQ,OAAO,EAAE;YACnBR,UAAUQ,OAAO,CAACC,KAAK;YACvBT,UAAUQ,OAAO,CAACE,OAAO,CAAC,UAAU,gBAAgB;YACpD7B;QACJ;IACJ;IAEA,MAAM,CAAC8B,gBAAgBC,kBAAkB,GAAGhE,SAAS;IACrD,MAAMiE,qBAAqB,CAAC,CAAC1D,SAASwD;IACtC,MAAM,EAACG,OAAO,EAAE5D,KAAK,EAAC,GAAGD,UAAU;QAACE,OAAO0D;IAAkB,GAAG;QAACE,MAAM;IAAY;IAEnFrE,UAAU;QACN,IAAI4B,iBAAiB,SAAS;YAC1B2B;QACJ,OAAO;YACHP,UAAU;QACd;IACJ,GAAG,EAAE;IAEL,MAAMsB,iBAAiB,CAACC;QACpBL,kBACIK,QAAQC,IAAI,CAAC,CAACC,SAAWA,OAAOC,QAAQ,KAAK3E,OAAO4E,mBAAmB,GAAGC,cAAc,CAACC,KAAK;IAEtG;IAEA,MAAMC,SAASxC,sBACX,KAAC/C,MAAMwF,KAAK;QAACxC,UAAUA;QAAW,GAAGC,UAAU;kBAC1CF;SAEL;IAEJ,MAAM0C,eAAetC,4BACjB,KAACnD,MAAM0F,WAAW;QAAE,GAAGtC,gBAAgB;kBAAGD;SAC1C;IAEJ,MAAMwC,SAASzE,sBACX,KAAClB,MAAMsF,KAAK;QAACM,IAAG;QAAM,GAAG1C,UAAU;kBAC9BhC;uBAGL,KAACf;QAAM0F,GAAE;;IAGb,MAAMC,UACFP,UAAUE,6BACN,MAAC7F;;YACI2F;YACAE;;SAEL;IAER,MAAMM,yBACF,MAAChG;QAAMiG,UAAS;QAAQC,SAAS;;0BAC7B,KAAClF;gBAAOuD,cAAcA;;0BACtB,KAACxD;gBAAgBgC,OAAOY;gBAAQf,QAAQ,IAAMA;;;;IAItD,MAAMuD,UAAU1C,uBACZ,KAAC5D;QAAIuG,GAAE;QAAKC,IAAG;QAAKC,WAAWxB,QAAQzD,MAAM;QAAEkF,eAAY;kBACvD,cAAA,KAAC/F;YACGgG,YAAYxB;YACZyB,iBAAiBpE;YACjBnB,OAAOA,MAAMU,WAAW,KAAK,UAAU,UAAU;YACjD8E,SAAS;gBACLC,SAAS;oBAACC,SAAS;gBAAK;gBACxBC,UAAU;gBACVC,sBAAsB;gBACtBC,eAAe;gBACfC,UAAU7G,GAAGe,MAAM+F,SAAS,CAACC,EAAE;gBAC/BC,UAAU5D;gBACV6D,SAAS;YACb;YACArE,OAAOY;YACPhB,UAAUiB;YACVyD,SAAS,CAAChG,QAAQ+C;gBACdJ,UAAUQ,OAAO,GAAGnD;gBACpBgD,kBAAkBD;gBAClB/C,OAAOiG,oBAAoB,CAAC,IAAMxE;gBAClCzB,OAAOkG,mBAAmB,CAAC;oBACvB,MAAMlG,OAAOmG,SAAS,CAAC,gCAAgCC,GAAG;gBAC9D;YACJ;;uBAIR,KAAC3H;QAAOwG,WAAWxB,QAAQzD,MAAM;kBAC7B,cAAA,KAACnB;;IAIT,qBACI,MAACG;QACGqH,SAAQ;QACRpB,WAAWxB,QAAQ1D,IAAI;QACvB8E,SAAS;QACTyB,IAAI;YAAC5F,QAAQ6F,KAAKC,GAAG,CAAC/D,cAActB;YAAYc;QAAS;QACzDS,KAAKA;QACJ,GAAGP,MAAM;;YAETuC;YACAC;YACAG;YACAP;;;AAGb,EAAE"}
+{"version":3,"sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"sourcesContent":["import {\n    Box,\n    Center,\n    Group,\n    Input,\n    InputWrapperProps,\n    Loader,\n    Space,\n    Stack,\n    StackProps,\n    px,\n    useMantineColorScheme,\n    useMantineTheme,\n    useProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport Editor, {Monaco, loader} from '@monaco-editor/react';\nimport {editor as monacoEditor} from 'monaco-editor';\nimport {FunctionComponent, useEffect, useRef, useState} from 'react';\n\nimport cx from 'clsx';\nimport {useParentHeight} from '../../hooks';\nimport {CopyToClipboard} from '../copyToClipboard';\nimport CodeEditorClasses from './CodeEditor.module.css';\nimport {XML} from './languages/xml';\nimport {Search} from './search';\ninterface CodeEditorProps\n    extends Omit<\n            InputWrapperProps,\n            'inputContainer' | 'inputWrapperOrder' | 'classNames' | 'styles' | 'vars' | 'onChange'\n        >,\n        Omit<StackProps, 'onChange'> {\n    /**\n     * The language syntax of the editor\n     *\n     * @default 'plaintext'\n     */\n    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml' | (string & unknown);\n    /** Default value for uncontrolled input */\n    defaultValue?: string;\n    /** Value for controlled input */\n    value?: string;\n    /** onChange value for controlled input */\n    onChange?(value: string): void;\n    /** Called whenever the search icon is clicked  */\n    onSearch?(): void;\n    /** Called whenever the copy icon is clicked */\n    onCopy?(): void;\n    /** Called whenever the code editor gets the focus */\n    onFocus?(): void;\n    /**\n     * The minimal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height is too short, it will use this value as minimum.\n     *\n     * @default 300\n     */\n    minHeight?: number;\n    /**\n     * The maximal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height would be too high for your liking, you can use this prop to set a maximum.\n     */\n    maxHeight?: number;\n    disabled?: boolean;\n    /**\n     * Defines how the monaco editor files will be loaded.\n     * Note that using `'local'` requires [some additional configuration](https://github.com/suren-atoyan/monaco-react#use-monaco-editor-as-an-npm-package).\n     *\n     * @default 'local'\n     */\n    monacoLoader?: 'cdn' | 'local';\n}\n\nconst defaultProps: Partial<CodeEditorProps> = {\n    language: 'plaintext',\n    monacoLoader: 'local',\n    defaultValue: '',\n    minHeight: 300,\n};\n\nexport const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {\n    const {\n        language,\n        defaultValue,\n        onChange,\n        onCopy,\n        onSearch,\n        onFocus,\n        value,\n        label,\n        required,\n        labelProps,\n        error,\n        errorProps,\n        description,\n        descriptionProps,\n        minHeight,\n        maxHeight,\n        disabled,\n        monacoLoader,\n        ...others\n    } = useProps('CodeEditor', defaultProps, props);\n    const [loaded, setLoaded] = useState(false);\n    const [_value, handleChange] = useUncontrolled<string>({\n        value,\n        defaultValue,\n        onChange,\n        finalValue: '',\n    });\n    const [parentHeight, ref] = useParentHeight();\n    const editorRef = useRef(null);\n    const loadLocalMonaco = async () => {\n        const monacoInstance = await import('monaco-editor');\n        loader.config({monaco: monacoInstance});\n        setLoaded(true);\n    };\n\n    const registerLanguages = (monaco: Monaco) => {\n        if (monaco && language === 'xml') {\n            XML.register(monaco);\n        }\n    };\n\n    const handleSearch = () => {\n        if (editorRef.current) {\n            editorRef.current.focus();\n            editorRef.current.trigger('editor', 'actions.find', '');\n            onSearch?.();\n        }\n    };\n\n    const [hasMonacoError, setHasMonacoError] = useState(false);\n    const renderErrorOutline = !!error || hasMonacoError;\n    const theme = useMantineTheme();\n    const {colorScheme} = useMantineColorScheme();\n\n    useEffect(() => {\n        if (monacoLoader === 'local') {\n            loadLocalMonaco();\n        } else {\n            setLoaded(true);\n        }\n    }, []);\n\n    const handleValidate = (markers: monacoEditor.IMarker[]) => {\n        setHasMonacoError(\n            markers.some((marker) => marker.severity === loader.__getMonacoInstance().MarkerSeverity.Error),\n        );\n    };\n\n    const _label = label ? (\n        <Input.Label required={required} {...labelProps}>\n            {label}\n        </Input.Label>\n    ) : null;\n\n    const _description = description ? (\n        <Input.Description {...descriptionProps}>{description}</Input.Description>\n    ) : null;\n\n    const _error = error ? (\n        <Input.Error mt=\"xs\" {...errorProps}>\n            {error}\n        </Input.Error>\n    ) : (\n        <Space h=\"xs\" />\n    );\n\n    const _header =\n        _label || _description ? (\n            <Box>\n                {_label}\n                {_description}\n            </Box>\n        ) : null;\n\n    const _buttons = (\n        <Group justify=\"right\" gap={0}>\n            <Search handleSearch={handleSearch} />\n            <CopyToClipboard value={_value} onCopy={() => onCopy?.()} />\n        </Group>\n    );\n\n    const _editor = loaded ? (\n        <Box\n            p=\"md\"\n            pl=\"xs\"\n            className={cx(\n                CodeEditorClasses.editor,\n                {[CodeEditorClasses.valid]: !renderErrorOutline},\n                {[CodeEditorClasses.error]: renderErrorOutline},\n            )}\n            data-testid=\"editor-wrapper\"\n        >\n            <Editor\n                onValidate={handleValidate}\n                defaultLanguage={language}\n                theme={colorScheme === 'light' ? 'light' : 'vs-dark'}\n                options={{\n                    minimap: {enabled: false},\n                    wordWrap: 'on',\n                    scrollBeyondLastLine: false,\n                    formatOnPaste: true,\n                    fontSize: px(theme.fontSizes.xs) as number,\n                    readOnly: disabled,\n                    tabSize: 2,\n                }}\n                value={_value}\n                onChange={handleChange}\n                onMount={(editor, monaco) => {\n                    editorRef.current = editor;\n                    registerLanguages(monaco);\n                    editor.onDidFocusEditorText(() => onFocus?.());\n                    editor.onDidBlurEditorText(async () => {\n                        await editor.getAction('editor.action.formatDocument').run();\n                    });\n                }}\n            />\n        </Box>\n    ) : (\n        <Center className={CodeEditorClasses.editor}>\n            <Loader />\n        </Center>\n    );\n\n    return (\n        <Stack\n            justify=\"flex-start\"\n            gap={0}\n            style={{height: Math.max(parentHeight, minHeight), maxHeight}}\n            ref={ref}\n            {...others}\n        >\n            {_header}\n            {_buttons}\n            {_editor}\n            {_error}\n        </Stack>\n    );\n};\n"],"names":["Box","Center","Group","Input","Loader","Space","Stack","px","useMantineColorScheme","useMantineTheme","useProps","useUncontrolled","Editor","loader","useEffect","useRef","useState","cx","useParentHeight","CopyToClipboard","CodeEditorClasses","XML","Search","defaultProps","language","monacoLoader","defaultValue","minHeight","CodeEditor","props","onChange","onCopy","onSearch","onFocus","value","label","required","labelProps","error","errorProps","description","descriptionProps","maxHeight","disabled","others","loaded","setLoaded","_value","handleChange","finalValue","parentHeight","ref","editorRef","loadLocalMonaco","monacoInstance","config","monaco","registerLanguages","register","handleSearch","current","focus","trigger","hasMonacoError","setHasMonacoError","renderErrorOutline","theme","colorScheme","handleValidate","markers","some","marker","severity","__getMonacoInstance","MarkerSeverity","Error","_label","Label","_description","Description","_error","mt","h","_header","_buttons","justify","gap","_editor","p","pl","className","editor","valid","data-testid","onValidate","defaultLanguage","options","minimap","enabled","wordWrap","scrollBeyondLastLine","formatOnPaste","fontSize","fontSizes","xs","readOnly","tabSize","onMount","onDidFocusEditorText","onDidBlurEditorText","getAction","run","style","height","Math","max"],"mappings":"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"}

package/dist/esm/components/code-editor/CodeEditor.module.css

@@ -0,0 +1,24 @@
+.editor {
+    border: 1px solid var(--mantine-color-gray-3);
+    border-radius: var(--mantine-radius-default);
+    z-index: 1;
+    height: 100%;
+    outline-width: thin;
+
+    @mixin light {
+        background-color: var(--mantine-color-white);
+    }
+    @mixin dark {
+        background-color: var(--mantine-color-black);
+    }
+}
+
+.valid {
+    outline-color: auto;
+    outline-style: none;
+}
+
+.error {
+    outline-color: var(--mantine-color-red-6);
+    outline-style: solid;
+}

package/dist/esm/components/code-editor/search/Search.js

@@ -3,6 +3,8 @@ import { SearchSize16Px } from '@coveord/plasma-react-icons';
 import { ActionIcon } from '@mantine/core';
 const SearchButton = ({ handleSearch })=>/*#__PURE__*/ _jsx(ActionIcon, {
         onClick: handleSearch,
+        variant: "subtle",
+        color: "gray",
         children: /*#__PURE__*/ _jsx(SearchSize16Px, {
             height: 16
         })

package/dist/esm/components/code-editor/search/Search.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/code-editor/search/Search.tsx"],"sourcesContent":["import {SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon} from '@mantine/core';\n\nexport interface SearchProps {\n    handleSearch: () => void;\n}\n\nconst SearchButton: React.FunctionComponent<SearchProps> = ({handleSearch}) => (\n    <ActionIcon onClick={handleSearch}>\n        <SearchSize16Px height={16}></SearchSize16Px>\n    </ActionIcon>\n);\n\nexport const Search: React.FunctionComponent<SearchProps> = ({...params}) => <SearchButton {...params} />;\n"],"names":["SearchSize16Px","ActionIcon","SearchButton","handleSearch","onClick","height","Search","params"],"mappings":";AAAA,SAAQA,cAAc,QAAO,8BAA8B;AAC3D,SAAQC,UAAU,QAAO,gBAAgB;AAMzC,MAAMC,eAAqD,CAAC,EAACC,YAAY,EAAC,iBACtE,KAACF;QAAWG,SAASD;kBACjB,cAAA,KAACH;YAAeK,QAAQ;;;AAIhC,OAAO,MAAMC,SAA+C,CAAC,EAAC,GAAGC,QAAO,iBAAK,KAACL;QAAc,GAAGK,MAAM;OAAK"}
+{"version":3,"sources":["../../../../../src/components/code-editor/search/Search.tsx"],"sourcesContent":["import {SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon} from '@mantine/core';\n\nexport interface SearchProps {\n    handleSearch: () => void;\n}\n\nconst SearchButton: React.FunctionComponent<SearchProps> = ({handleSearch}) => (\n    <ActionIcon onClick={handleSearch} variant=\"subtle\" color=\"gray\">\n        <SearchSize16Px height={16}></SearchSize16Px>\n    </ActionIcon>\n);\n\nexport const Search: React.FunctionComponent<SearchProps> = ({...params}) => <SearchButton {...params} />;\n"],"names":["SearchSize16Px","ActionIcon","SearchButton","handleSearch","onClick","variant","color","height","Search","params"],"mappings":";AAAA,SAAQA,cAAc,QAAO,8BAA8B;AAC3D,SAAQC,UAAU,QAAO,gBAAgB;AAMzC,MAAMC,eAAqD,CAAC,EAACC,YAAY,EAAC,iBACtE,KAACF;QAAWG,SAASD;QAAcE,SAAQ;QAASC,OAAM;kBACtD,cAAA,KAACN;YAAeO,QAAQ;;;AAIhC,OAAO,MAAMC,SAA+C,CAAC,EAAC,GAAGC,QAAO,iBAAK,KAACP;QAAc,GAAGO,MAAM;OAAK"}

package/dist/esm/components/collection/Collection.d.ts

@@ -1,8 +1,8 @@
-import { DefaultProps, InputWrapperBaseProps, MantineNumberSize, Selectors } from '@mantine/core';
+import { BoxProps, Factory, MantineSpacing, StylesApiProps, __InputWrapperProps } from '@mantine/core';
 import { ReorderPayload } from '@mantine/form/lib/types';
-import { ReactNode } from 'react';
-import useStyles from './Collection.styles';
-interface CollectionProps<T> extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>, DefaultProps<Selectors<typeof useStyles>> {
+import { ForwardedRef, ReactNode } from 'react';
+import { CustomComponentThemeExtend } from '../../utils';
+export interface CollectionProps<T> extends __InputWrapperProps, BoxProps, StylesApiProps<CollectionFactory> {
     /**
      * The default value each new item should have
      */
@@ -55,7 +55,7 @@ interface CollectionProps<T> extends Omit<InputWrapperBaseProps, 'inputContainer
     /**
      * Function that gets called when a new item needs to be added to the collection
      *
-     * @param value The the value of the item to insert
+     * @param value The value of the item to insert
      * @param index The index of the new item to insert
      */
     onInsertItem?: (value: T, index: number) => void;
@@ -91,11 +91,11 @@ interface CollectionProps<T> extends Omit<InputWrapperBaseProps, 'inputContainer
      */
     addDisabledTooltip?: string;
     /**
-     * The spacing between the colleciton items
+     * The gap between the colleciton items
      *
      * @default 'xs'
      */
-    spacing?: MantineNumberSize;
+    gap?: MantineSpacing;
     /**
      * Whether the collection is required. When required is true, the collection will hide the remove button if there is only one item
      *
@@ -103,6 +103,20 @@ interface CollectionProps<T> extends Omit<InputWrapperBaseProps, 'inputContainer
      */
     required?: boolean;
 }
-export declare const Collection: <T>(props: CollectionProps<T>) => import("react/jsx-runtime").JSX.Element;
-export {};
+export type CollectionStylesNames = 'root' | 'item' | 'itemDragging' | 'dragHandle';
+export type CollectionFactory = Factory<{
+    props: CollectionProps<unknown>;
+    ref: HTMLDivElement;
+    stylesNames: CollectionStylesNames;
+}>;
+export declare const Collection: {
+    <T>(props: CollectionProps<T> & {
+        ref?: ForwardedRef<HTMLDivElement>;
+    }): import("react/jsx-runtime").JSX.Element;
+    extend: CustomComponentThemeExtend<{
+        props: CollectionProps<unknown>;
+        ref: HTMLDivElement;
+        stylesNames: CollectionStylesNames;
+    }>;
+};
 //# sourceMappingURL=Collection.d.ts.map

package/dist/esm/components/collection/Collection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/Collection.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEH,YAAY,EAGZ,qBAAqB,EACrB,iBAAiB,EACjB,SAAS,EAIZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,cAAc,EAAC,MAAM,yBAAyB,CAAC;AAEvD,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAGhC,OAAO,SAAS,MAAM,qBAAqB,CAAC;AAG5C,UAAU,eAAe,CAAC,CAAC,CACvB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;OAEG;IACH,OAAO,EAAE,CAAC,CAAC;IACX;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAChD;;;;OAIG;IACH,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,KAAK,MAAM,CAAC;IACxC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAClD;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,OAAO,CAAC;IACpC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAYD,eAAO,MAAM,UAAU,2EAsItB,CAAC"}
+{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/Collection.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEH,QAAQ,EACR,OAAO,EAGP,cAAc,EAEd,cAAc,EAEd,mBAAmB,EAGtB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,cAAc,EAAC,MAAM,yBAAyB,CAAC;AAEvD,OAAO,EAAC,YAAY,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAC,0BAA0B,EAAW,MAAM,aAAa,CAAC;AAMjE,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,mBAAmB,EAAE,QAAQ,EAAE,cAAc,CAAC,iBAAiB,CAAC;IACxG;;OAEG;IACH,OAAO,EAAE,CAAC,CAAC;IACX;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAChD;;;;OAIG;IACH,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,KAAK,MAAM,CAAC;IACxC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAClD;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,OAAO,CAAC;IACpC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,GAAG,CAAC,EAAE,cAAc,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,MAAM,GAAG,cAAc,GAAG,YAAY,CAAC;AAEpF,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IACpC,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IAChC,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,qBAAqB,CAAC;CACtC,CAAC,CAAC;AAYH,eAAO,MAAM,UAAU;;cAA2C,aAAa,cAAc,CAAC;;;eAfnF,gBAAgB,OAAO,CAAC;aAC1B,cAAc;qBACN,qBAAqB;;CA+JrC,CAAC"}