@coveord/plasma-mantine 55.8.0 → 55.8.2

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import {\n    Button as MantineButton,\n    ButtonCssVariables,\n    type ButtonGroup,\n    ButtonProps as MantineButtonProps,\n    ButtonStylesNames,\n    ButtonVariant,\n    Factory,\n    polymorphicFactory,\n} from '@mantine/core';\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,SACIA,UAAUC,aAAa,EAOvBC,kBAAkB,QACf,gBAAgB;AAEvB,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"}
+{"version":3,"sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import {\n    Button as MantineButton,\n    ButtonCssVariables,\n    type ButtonGroup,\n    ButtonProps as MantineButtonProps,\n    ButtonStylesNames,\n    ButtonVariant,\n    Factory,\n    polymorphicFactory,\n} from '@mantine/core';\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        Primary: typeof ButtonPrimary;\n        Secondary: typeof ButtonSecondary;\n        Tertiary: typeof ButtonTertiary;\n        Quaternary: typeof ButtonQuaternary;\n        DestructivePrimary: typeof ButtonDestructive;\n        DestructiveSecondary: typeof ButtonDestructiveSecondary;\n        DestructiveTertiary: typeof ButtonDestructiveTertiary;\n        DestructiveQuaternary: typeof ButtonDestructiveQuaternary;\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);\nconst ButtonPrimary = Button.withProps({variant: 'filled'});\nconst ButtonSecondary = Button.withProps({variant: 'light'});\nconst ButtonTertiary = Button.withProps({\n    variant: 'default',\n    vars: (theme) => ({\n        root: {\n            '--button-color': 'var(--mantine-primary-color-filled)',\n            '--button-height': '32px',\n            '--button-padding-x': theme.spacing.sm,\n        },\n    }),\n});\nconst ButtonQuaternary = Button.withProps({variant: 'subtle'});\n\nconst ButtonDestructive = Button.withProps({variant: 'filled', color: 'var(--mantine-color-error)'});\nconst ButtonDestructiveSecondary = Button.withProps({\n    variant: 'light',\n    color: 'var(--mantine-color-error)',\n});\nconst ButtonDestructiveTertiary = Button.withProps({\n    variant: 'default',\n    vars: (theme) => ({\n        root: {\n            '--button-color': 'var(--mantine-color-error)',\n            '--button-height': '32px',\n            '--button-padding-x': theme.spacing.sm,\n        },\n    }),\n});\nconst ButtonDestructiveQuaternary = Button.withProps({variant: 'subtle', color: 'var(--mantine-color-error)'});\n\nButton.Group = MantineButton.Group;\nButton.Primary = ButtonPrimary;\nButton.Secondary = ButtonSecondary;\nButton.Tertiary = ButtonTertiary;\nButton.Quaternary = ButtonQuaternary;\nButton.DestructivePrimary = ButtonDestructive;\nButton.DestructiveSecondary = ButtonDestructiveSecondary;\nButton.DestructiveTertiary = ButtonDestructiveTertiary;\nButton.DestructiveQuaternary = ButtonDestructiveQuaternary;\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","ButtonPrimary","withProps","ButtonSecondary","ButtonTertiary","vars","theme","root","spacing","sm","ButtonQuaternary","ButtonDestructive","color","ButtonDestructiveSecondary","ButtonDestructiveTertiary","ButtonDestructiveQuaternary","Group","Primary","Secondary","Tertiary","Quaternary","DestructivePrimary","DestructiveSecondary","DestructiveTertiary","DestructiveQuaternary"],"mappings":";AAAA,SACIA,UAAUC,aAAa,EAOvBC,kBAAkB,QACf,gBAAgB;AAEvB,SAAQC,mBAAmB,QAAO,kCAAkC;AACpE,SAAQC,yBAAyB,QAAuC,8BAA8B;AA2BtG,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;AACF,MAAMW,gBAAgBtB,OAAOuB,SAAS,CAAC;IAACN,SAAS;AAAQ;AACzD,MAAMO,kBAAkBxB,OAAOuB,SAAS,CAAC;IAACN,SAAS;AAAO;AAC1D,MAAMQ,iBAAiBzB,OAAOuB,SAAS,CAAC;IACpCN,SAAS;IACTS,MAAM,CAACC,QAAW,CAAA;YACdC,MAAM;gBACF,kBAAkB;gBAClB,mBAAmB;gBACnB,sBAAsBD,MAAME,OAAO,CAACC,EAAE;YAC1C;QACJ,CAAA;AACJ;AACA,MAAMC,mBAAmB/B,OAAOuB,SAAS,CAAC;IAACN,SAAS;AAAQ;AAE5D,MAAMe,oBAAoBhC,OAAOuB,SAAS,CAAC;IAACN,SAAS;IAAUgB,OAAO;AAA4B;AAClG,MAAMC,6BAA6BlC,OAAOuB,SAAS,CAAC;IAChDN,SAAS;IACTgB,OAAO;AACX;AACA,MAAME,4BAA4BnC,OAAOuB,SAAS,CAAC;IAC/CN,SAAS;IACTS,MAAM,CAACC,QAAW,CAAA;YACdC,MAAM;gBACF,kBAAkB;gBAClB,mBAAmB;gBACnB,sBAAsBD,MAAME,OAAO,CAACC,EAAE;YAC1C;QACJ,CAAA;AACJ;AACA,MAAMM,8BAA8BpC,OAAOuB,SAAS,CAAC;IAACN,SAAS;IAAUgB,OAAO;AAA4B;AAE5GjC,OAAOqC,KAAK,GAAGpC,cAAcoC,KAAK;AAClCrC,OAAOsC,OAAO,GAAGhB;AACjBtB,OAAOuC,SAAS,GAAGf;AACnBxB,OAAOwC,QAAQ,GAAGf;AAClBzB,OAAOyC,UAAU,GAAGV;AACpB/B,OAAO0C,kBAAkB,GAAGV;AAC5BhC,OAAO2C,oBAAoB,GAAGT;AAC9BlC,OAAO4C,mBAAmB,GAAGT;AAC7BnC,OAAO6C,qBAAqB,GAAGT"}

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

@@ -21,7 +21,7 @@ export interface ButtonWithDisabledTooltipProps {
 }
 export declare const ButtonWithDisabledTooltip: (<C = "div">(props: import("@mantine/utils").PolymorphicComponentProps<C, ButtonWithDisabledTooltipProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(ButtonWithDisabledTooltipProps & {
     component?: any;
-} & Omit<Pick<any, string | number | symbol>, keyof ButtonWithDisabledTooltipProps | "component"> & {
+} & Omit<Pick<any, string | number | symbol>, "component" | keyof ButtonWithDisabledTooltipProps> & {
     ref?: any;
 }) | (ButtonWithDisabledTooltipProps & {
     component: React.ElementType<any>;

package/dist/esm/components/checkbox/CheckboxIcon.d.ts

@@ -0,0 +1,7 @@
+import { ComponentPropsWithoutRef, FunctionComponent } from 'react';
+interface CheckboxIconProps extends ComponentPropsWithoutRef<'svg'> {
+    indeterminate: boolean | undefined;
+}
+export declare const CheckboxIcon: FunctionComponent<CheckboxIconProps>;
+export {};
+//# sourceMappingURL=CheckboxIcon.d.ts.map

package/dist/esm/components/checkbox/CheckboxIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/CheckboxIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,wBAAwB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAElE,UAAU,iBAAkB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IAC/D,aAAa,EAAE,OAAO,GAAG,SAAS,CAAC;CACtC;AAED,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAM7D,CAAC"}

package/dist/esm/components/checkbox/CheckboxIcon.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconCheck, IconMinus } from '@coveord/plasma-react-icons';
+export const CheckboxIcon = ({ indeterminate, ...others })=>{
+    if (indeterminate) {
+        return /*#__PURE__*/ _jsx(IconMinus, {
+            stroke: 3,
+            ...others
+        });
+    }
+    return /*#__PURE__*/ _jsx(IconCheck, {
+        stroke: 3,
+        ...others
+    });
+};
+
+//# sourceMappingURL=CheckboxIcon.js.map

package/dist/esm/components/checkbox/CheckboxIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/checkbox/CheckboxIcon.tsx"],"sourcesContent":["import {IconCheck, IconMinus} from '@coveord/plasma-react-icons';\nimport {ComponentPropsWithoutRef, FunctionComponent} from 'react';\n\ninterface CheckboxIconProps extends ComponentPropsWithoutRef<'svg'> {\n    indeterminate: boolean | undefined;\n}\n\nexport const CheckboxIcon: FunctionComponent<CheckboxIconProps> = ({indeterminate, ...others}: CheckboxIconProps) => {\n    if (indeterminate) {\n        return <IconMinus stroke={3} {...others} />;\n    }\n\n    return <IconCheck stroke={3} {...others} />;\n};\n"],"names":["IconCheck","IconMinus","CheckboxIcon","indeterminate","others","stroke"],"mappings":";AAAA,SAAQA,SAAS,EAAEC,SAAS,QAAO,8BAA8B;AAOjE,OAAO,MAAMC,eAAqD,CAAC,EAACC,aAAa,EAAE,GAAGC,QAA0B;IAC5G,IAAID,eAAe;QACf,qBAAO,KAACF;YAAUI,QAAQ;YAAI,GAAGD,MAAM;;IAC3C;IAEA,qBAAO,KAACJ;QAAUK,QAAQ;QAAI,GAAGD,MAAM;;AAC3C,EAAE"}

package/dist/esm/components/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CheckboxIcon';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/esm/components/checkbox/index.js

@@ -0,0 +1,3 @@
+export * from './CheckboxIcon';
+
+//# sourceMappingURL=index.js.map

package/dist/esm/components/checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/checkbox/index.ts"],"sourcesContent":["export * from './CheckboxIcon';\n"],"names":[],"mappings":"AAAA,cAAc,iBAAiB"}

package/dist/esm/components/child-form/ChildForm.js

@@ -20,7 +20,6 @@ export const ChildForm = polymorphicFactory((props, ref)=>{
         ...others,
         ...getStyles('root'),
         children: /*#__PURE__*/ _jsxs(Paper, {
-            bg: "gray.0",
             p: "md",
             ...getStyles('paper'),
             children: [

package/dist/esm/components/child-form/ChildForm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/child-form/ChildForm.tsx"],"sourcesContent":["import {\n    Collapse,\n    CollapseProps,\n    Factory,\n    Paper,\n    polymorphicFactory,\n    Stack,\n    StylesApiProps,\n    Text,\n    Title,\n    useProps,\n    useStyles,\n} from '@mantine/core';\nimport classes from './ChildForm.module.css';\n\nexport type ChildFormStylesNames = 'root' | 'paper';\n\nexport interface ChildFormProps extends CollapseProps, StylesApiProps<ChildFormFactory> {\n    /**\n     * Title of the child form.\n     */\n    title?: string;\n    /**\n     * Description of the child form.\n     */\n    description?: string;\n}\n\ntype ChildFormFactory = Factory<{\n    props: ChildFormProps;\n    defaultRef: HTMLDivElement;\n    defaultComponent: 'div';\n    stylesNames: ChildFormStylesNames;\n}>;\n\nconst defaultProps: Partial<ChildFormProps> = {};\n\nexport const ChildForm = polymorphicFactory<ChildFormFactory>((props, ref) => {\n    const {className, children, style, classNames, styles, unstyled, vars, title, description, ...others} = useProps(\n        'ChildForm',\n        defaultProps,\n        props,\n    );\n\n    const getStyles = useStyles<ChildFormFactory>({\n        name: 'ChildForm',\n        classes,\n        props,\n        className,\n        style,\n        classNames,\n        styles,\n        unstyled,\n        vars,\n    });\n\n    return (\n        <Collapse ref={ref} {...others} {...getStyles('root')}>\n            <Paper bg=\"gray.0\" p=\"md\" {...getStyles('paper')}>\n                {(title || description) && (\n                    <Stack gap={0} mb=\"md\">\n                        {title && <Title order={5}>{title}</Title>}\n                        {description && <Text c=\"gray.7\">{description}</Text>}\n                    </Stack>\n                )}\n                <Stack gap=\"md\">{children}</Stack>\n            </Paper>\n        </Collapse>\n    );\n});\n"],"names":["Collapse","Paper","polymorphicFactory","Stack","Text","Title","useProps","useStyles","classes","defaultProps","ChildForm","props","ref","className","children","style","classNames","styles","unstyled","vars","title","description","others","getStyles","name","bg","p","gap","mb","order","c"],"mappings":";AAAA,SACIA,QAAQ,EAGRC,KAAK,EACLC,kBAAkB,EAClBC,KAAK,EAELC,IAAI,EACJC,KAAK,EACLC,QAAQ,EACRC,SAAS,QACN,gBAAgB;AACvB,OAAOC,aAAa,yBAAyB;AAsB7C,MAAMC,eAAwC,CAAC;AAE/C,OAAO,MAAMC,YAAYR,mBAAqC,CAACS,OAAOC;IAClE,MAAM,EAACC,SAAS,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,UAAU,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,KAAK,EAAEC,WAAW,EAAE,GAAGC,QAAO,GAAGhB,SACpG,aACAG,cACAE;IAGJ,MAAMY,YAAYhB,UAA4B;QAC1CiB,MAAM;QACNhB;QACAG;QACAE;QACAE;QACAC;QACAC;QACAC;QACAC;IACJ;IAEA,qBACI,KAACnB;QAASY,KAAKA;QAAM,GAAGU,MAAM;QAAG,GAAGC,UAAU,OAAO;kBACjD,cAAA,MAACtB;YAAMwB,IAAG;YAASC,GAAE;YAAM,GAAGH,UAAU,QAAQ;;gBAC1CH,CAAAA,SAASC,WAAU,mBACjB,MAAClB;oBAAMwB,KAAK;oBAAGC,IAAG;;wBACbR,uBAAS,KAACf;4BAAMwB,OAAO;sCAAIT;;wBAC3BC,6BAAe,KAACjB;4BAAK0B,GAAE;sCAAUT;;;;8BAG1C,KAAClB;oBAAMwB,KAAI;8BAAMb;;;;;AAIjC,GAAG"}
+{"version":3,"sources":["../../../../src/components/child-form/ChildForm.tsx"],"sourcesContent":["import {\n    Collapse,\n    CollapseProps,\n    Factory,\n    Paper,\n    polymorphicFactory,\n    Stack,\n    StylesApiProps,\n    Text,\n    Title,\n    useProps,\n    useStyles,\n} from '@mantine/core';\nimport classes from './ChildForm.module.css';\n\nexport type ChildFormStylesNames = 'root' | 'paper';\n\nexport interface ChildFormProps extends CollapseProps, StylesApiProps<ChildFormFactory> {\n    /**\n     * Title of the child form.\n     */\n    title?: string;\n    /**\n     * Description of the child form.\n     */\n    description?: string;\n}\n\ntype ChildFormFactory = Factory<{\n    props: ChildFormProps;\n    defaultRef: HTMLDivElement;\n    defaultComponent: 'div';\n    stylesNames: ChildFormStylesNames;\n}>;\n\nconst defaultProps: Partial<ChildFormProps> = {};\n\nexport const ChildForm = polymorphicFactory<ChildFormFactory>((props, ref) => {\n    const {className, children, style, classNames, styles, unstyled, vars, title, description, ...others} = useProps(\n        'ChildForm',\n        defaultProps,\n        props,\n    );\n\n    const getStyles = useStyles<ChildFormFactory>({\n        name: 'ChildForm',\n        classes,\n        props,\n        className,\n        style,\n        classNames,\n        styles,\n        unstyled,\n        vars,\n    });\n\n    return (\n        <Collapse ref={ref} {...others} {...getStyles('root')}>\n            <Paper p=\"md\" {...getStyles('paper')}>\n                {(title || description) && (\n                    <Stack gap={0} mb=\"md\">\n                        {title && <Title order={5}>{title}</Title>}\n                        {description && <Text c=\"gray.7\">{description}</Text>}\n                    </Stack>\n                )}\n                <Stack gap=\"md\">{children}</Stack>\n            </Paper>\n        </Collapse>\n    );\n});\n"],"names":["Collapse","Paper","polymorphicFactory","Stack","Text","Title","useProps","useStyles","classes","defaultProps","ChildForm","props","ref","className","children","style","classNames","styles","unstyled","vars","title","description","others","getStyles","name","p","gap","mb","order","c"],"mappings":";AAAA,SACIA,QAAQ,EAGRC,KAAK,EACLC,kBAAkB,EAClBC,KAAK,EAELC,IAAI,EACJC,KAAK,EACLC,QAAQ,EACRC,SAAS,QACN,gBAAgB;AACvB,OAAOC,aAAa,yBAAyB;AAsB7C,MAAMC,eAAwC,CAAC;AAE/C,OAAO,MAAMC,YAAYR,mBAAqC,CAACS,OAAOC;IAClE,MAAM,EAACC,SAAS,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,UAAU,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,KAAK,EAAEC,WAAW,EAAE,GAAGC,QAAO,GAAGhB,SACpG,aACAG,cACAE;IAGJ,MAAMY,YAAYhB,UAA4B;QAC1CiB,MAAM;QACNhB;QACAG;QACAE;QACAE;QACAC;QACAC;QACAC;QACAC;IACJ;IAEA,qBACI,KAACnB;QAASY,KAAKA;QAAM,GAAGU,MAAM;QAAG,GAAGC,UAAU,OAAO;kBACjD,cAAA,MAACtB;YAAMwB,GAAE;YAAM,GAAGF,UAAU,QAAQ;;gBAC9BH,CAAAA,SAASC,WAAU,mBACjB,MAAClB;oBAAMuB,KAAK;oBAAGC,IAAG;;wBACbP,uBAAS,KAACf;4BAAMuB,OAAO;sCAAIR;;wBAC3BC,6BAAe,KAACjB;4BAAKyB,GAAE;sCAAUR;;;;8BAG1C,KAAClB;oBAAMuB,KAAI;8BAAMZ;;;;;AAIjC,GAAG"}

package/dist/esm/components/child-form/ChildForm.module.css

@@ -1,7 +1,8 @@
 .paper {
-    border: 1px solid var(--mantine-color-gray-3);
+    border: 2px solid var(--mantine-color-default-border);
     border-radius: var(--mantine-radius-default);
     box-shadow:
-        0 1px 0 -1px var(--mantine-color-gray-3) inset,
+        0 1px 0 -1px var(--mantine-color-default-border) inset,
         0 4px 2px -2px rgb(55 55 55 / 3%) inset;
+    background-color: var(--mantine-color-gray-light);
 }

package/dist/esm/components/chip/Chip.d.ts

@@ -0,0 +1,12 @@
+import { ChipGroup } from '@mantine/core';
+export declare const Chip: import("@mantine/core").MantineComponent<{
+    props: import("@mantine/core").ChipProps;
+    ref: HTMLInputElement;
+    stylesNames: import("@mantine/core").ChipStylesNames;
+    vars: import("@mantine/core").ChipCssVariables;
+    variant: import("@mantine/core").ChipVariant;
+    staticComponents: {
+        Group: typeof ChipGroup;
+    };
+}>;
+//# sourceMappingURL=Chip.d.ts.map

package/dist/esm/components/chip/Chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../src/components/chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,SAAS,EAA+B,MAAM,eAAe,CAAC;AAEnF,eAAO,MAAM,IAAI;;;;;;;;;EAAqG,CAAC"}

package/dist/esm/components/chip/Chip.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChipGroup, factory, Chip as MantineChip } from '@mantine/core';
+export const Chip = factory(({ variant: _variant, ...props }, ref)=>/*#__PURE__*/ _jsx(MantineChip, {
+        ...props,
+        ref: ref
+    }));
+Chip.Group = ChipGroup;
+
+//# sourceMappingURL=Chip.js.map

package/dist/esm/components/chip/Chip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/chip/Chip.tsx"],"sourcesContent":["import {ChipFactory, ChipGroup, factory, Chip as MantineChip} from '@mantine/core';\n\nexport const Chip = factory<ChipFactory>(({variant: _variant, ...props}, ref) => <MantineChip {...props} ref={ref} />);\n\nChip.Group = ChipGroup;\n"],"names":["ChipGroup","factory","Chip","MantineChip","variant","_variant","props","ref","Group"],"mappings":";AAAA,SAAqBA,SAAS,EAAEC,OAAO,EAAEC,QAAQC,WAAW,QAAO,gBAAgB;AAEnF,OAAO,MAAMD,OAAOD,QAAqB,CAAC,EAACG,SAASC,QAAQ,EAAE,GAAGC,OAAM,EAAEC,oBAAQ,KAACJ;QAAa,GAAGG,KAAK;QAAEC,KAAKA;QAAS;AAEvHL,KAAKM,KAAK,GAAGR"}

package/dist/esm/components/chip/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Chip';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/chip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/chip/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/esm/components/chip/index.js

@@ -0,0 +1,3 @@
+export * from './Chip';
+
+//# sourceMappingURL=index.js.map

package/dist/esm/components/chip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/chip/index.ts"],"sourcesContent":["export * from './Chip';\n"],"names":[],"mappings":"AAAA,cAAc,SAAS"}

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,EAKH,iBAAiB,EAIjB,UAAU,EAKb,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAiB,MAAM,IAAI,YAAY,EAAC,MAAM,eAAe,CAAC;AACrE,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,oEAAoE;IACpE,YAAY,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,YAAY,CAAC,qBAAqB,GAAG,IAAI,CAAC,CAAC;IACjF;;;;;;;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;IAC/B;;;;OAIG;IACH,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,oCAAoC,EAAE,SAAS,CAAC,CAAC;CAChF;AASD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CA+LzD,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;AAGvB,OAAO,EAAiB,MAAM,IAAI,YAAY,EAAC,MAAM,eAAe,CAAC;AACrE,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,oEAAoE;IACpE,YAAY,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,YAAY,CAAC,qBAAqB,GAAG,IAAI,CAAC,CAAC;IACjF;;;;;;;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;IAC/B;;;;OAIG;IACH,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,oCAAoC,EAAE,SAAS,CAAC,CAAC;CAChF;AASD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CA4LzD,CAAC"}

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

@@ -42,20 +42,12 @@ export const CodeEditor = (props)=>{
         }
     };
     const registerThemes = (monaco)=>{
-        monaco.editor.defineTheme('light-disabled', {
+        monaco.editor.defineTheme('light', {
             base: 'vs',
             inherit: true,
             rules: [],
             colors: {
-                'editor.background': theme.colors.gray[2]
-            }
-        });
-        monaco.editor.defineTheme('vs-dark-disabled', {
-            base: 'vs-dark',
-            inherit: true,
-            rules: [],
-            colors: {
-                'editor.background': theme.colors.navy[7]
+                'editor.background': theme.colors.gray[0]
             }
         });
     };
@@ -69,7 +61,7 @@ export const CodeEditor = (props)=>{
     const [hasMonacoError, setHasMonacoError] = useState(false);
     const hasMonacoErrorRef = useRef(false);
     hasMonacoErrorRef.current = hasMonacoError;
-    const renderErrorOutline = !!error || hasMonacoError;
+    const hasError = !!error || hasMonacoError;
     const theme = useMantineTheme();
     const { colorScheme } = useMantineColorScheme();
     useEffect(()=>{
@@ -92,13 +84,13 @@ export const CodeEditor = (props)=>{
         children: description
     }) : null;
     const _error = error ? /*#__PURE__*/ _jsx(Input.Error, {
-        mt: "xs",
         ...errorProps,
         children: error
     }) : /*#__PURE__*/ _jsx(Space, {
-        h: "xs"
+        h: "sm"
     });
-    const _header = _label || _description ? /*#__PURE__*/ _jsxs(Box, {
+    const _header = _label || _description ? /*#__PURE__*/ _jsxs(Stack, {
+        gap: "xxs",
         children: [
             _label,
             _description
@@ -106,7 +98,7 @@ export const CodeEditor = (props)=>{
     }) : null;
     const _buttons = /*#__PURE__*/ _jsxs(Group, {
         justify: "right",
-        gap: 0,
+        gap: "xs",
         children: [
             /*#__PURE__*/ _jsx(Search, {
                 handleSearch: handleSearch
@@ -124,10 +116,8 @@ export const CodeEditor = (props)=>{
     const _editor = loaded ? /*#__PURE__*/ _jsx(Box, {
         p: "md",
         pl: "xs",
-        className: cx(CodeEditorClasses.editor, {
-            [CodeEditorClasses.valid]: !renderErrorOutline
-        }, {
-            [CodeEditorClasses.error]: renderErrorOutline
+        className: cx(CodeEditorClasses.root, {
+            [CodeEditorClasses.error]: hasError
         }, {
             [CodeEditorClasses.disabled]: disabled
         }),
@@ -145,17 +135,22 @@ export const CodeEditor = (props)=>{
                 formatOnPaste: true,
                 fontSize: px(theme.fontSizes.xs),
                 readOnly: disabled,
+                stickyScroll: {
+                    enabled: false
+                },
                 tabSize
             },
             value: _value,
             onChange: handleChange,
-            onMount: (editor, monaco)=>{
+            beforeMount: (monaco)=>{
+                registerLanguages(monaco);
+                registerThemes(monaco);
+            },
+            onMount: (editor)=>{
                 editorRef.current = editor;
                 if (editorHandle) {
                     editorHandle.current = editor;
                 }
-                registerLanguages(monaco);
-                registerThemes(monaco);
                 editor.onDidFocusEditorText(()=>onFocus?.());
                 editor.onDidBlurEditorText(async ()=>{
                     // monaco editor has a timeout of 500ms populating errors, we want to ensure that checking errors happen after that
@@ -173,14 +168,19 @@ export const CodeEditor = (props)=>{
     });
     return /*#__PURE__*/ _jsxs(Stack, {
         justify: "flex-start",
-        gap: 0,
+        gap: "sm",
         h: Math.max(parentHeight, minHeight),
         mah: maxHeight,
         ref: ref,
         ...others,
         children: [
-            _header,
-            _buttons,
+            /*#__PURE__*/ _jsxs(Group, {
+                justify: "space-between",
+                children: [
+                    _header,
+                    _buttons
+                ]
+            }),
             _editor,
             _error
         ]

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    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 {MarkerSeverity, 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    /** Ref object that provides access to the editor's functionality */\n    editorHandle?: React.MutableRefObject<monacoEditor.IStandaloneCodeEditor | null>;\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     * Options to pass to the monaco editor.\n     * Currently only supporting [`tabSize`](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html#tabSize).\n     *\n     */\n    options?: Pick<monacoEditor.IStandaloneEditorConstructionOptions, 'tabSize'>;\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        options: {tabSize} = {tabSize: 2},\n        editorHandle,\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\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 registerThemes = (monaco: Monaco) => {\n        monaco.editor.defineTheme('light-disabled', {\n            base: 'vs',\n            inherit: true,\n            rules: [],\n            colors: {\n                'editor.background': theme.colors.gray[2],\n            },\n        });\n        monaco.editor.defineTheme('vs-dark-disabled', {\n            base: 'vs-dark',\n            inherit: true,\n            rules: [],\n            colors: {\n                'editor.background': theme.colors.navy[7],\n            },\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 hasMonacoErrorRef = useRef(false);\n\n    hasMonacoErrorRef.current = hasMonacoError;\n\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(markers.some((marker) => marker.severity === MarkerSeverity.Error));\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    let editorTheme = colorScheme === 'light' ? 'light' : 'vs-dark';\n    if (disabled) {\n        editorTheme += '-disabled';\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                {[CodeEditorClasses.disabled]: disabled},\n            )}\n            data-testid=\"editor-wrapper\"\n        >\n            <Editor\n                onValidate={handleValidate}\n                defaultLanguage={language}\n                theme={editorTheme}\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,\n                }}\n                value={_value}\n                onChange={handleChange}\n                onMount={(editor, monaco) => {\n                    editorRef.current = editor;\n                    if (editorHandle) {\n                        editorHandle.current = editor;\n                    }\n                    registerLanguages(monaco);\n                    registerThemes(monaco);\n                    editor.onDidFocusEditorText(() => onFocus?.());\n                    editor.onDidBlurEditorText(async () => {\n                        // monaco editor has a timeout of 500ms populating errors, we want to ensure that checking errors happen after that\n                        setTimeout(async () => {\n                            if (!hasMonacoErrorRef.current) {\n                                await editor?.getAction('editor.action.formatDocument')?.run();\n                            }\n                        }, 550);\n                    });\n                }}\n            />\n        </Box>\n    ) : (\n        <Center className={CodeEditorClasses.editor}>\n            <Loader />\n        </Center>\n    );\n\n    return (\n        <Stack justify=\"flex-start\" gap={0} h={Math.max(parentHeight, minHeight)} mah={maxHeight} ref={ref} {...others}>\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","MarkerSeverity","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","options","tabSize","editorHandle","others","loaded","setLoaded","_value","handleChange","finalValue","parentHeight","ref","editorRef","loadLocalMonaco","monacoInstance","config","monaco","registerLanguages","register","registerThemes","editor","defineTheme","base","inherit","rules","colors","theme","gray","navy","handleSearch","current","focus","trigger","hasMonacoError","setHasMonacoError","hasMonacoErrorRef","renderErrorOutline","colorScheme","handleValidate","markers","some","marker","severity","Error","_label","Label","_description","Description","_error","mt","h","_header","_buttons","justify","gap","editorTheme","_editor","p","pl","className","valid","data-testid","onValidate","defaultLanguage","minimap","enabled","wordWrap","scrollBeyondLastLine","formatOnPaste","fontSize","fontSizes","xs","readOnly","onMount","onDidFocusEditorText","onDidBlurEditorText","setTimeout","getAction","run","Math","max","mah"],"mappings":"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"}
+{"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 {MarkerSeverity, 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    /** Ref object that provides access to the editor's functionality */\n    editorHandle?: React.MutableRefObject<monacoEditor.IStandaloneCodeEditor | null>;\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     * Options to pass to the monaco editor.\n     * Currently only supporting [`tabSize`](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html#tabSize).\n     *\n     */\n    options?: Pick<monacoEditor.IStandaloneEditorConstructionOptions, 'tabSize'>;\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        options: {tabSize} = {tabSize: 2},\n        editorHandle,\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\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 registerThemes = (monaco: Monaco) => {\n        monaco.editor.defineTheme('light', {\n            base: 'vs',\n            inherit: true,\n            rules: [],\n            colors: {\n                'editor.background': theme.colors.gray[0],\n            },\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 hasMonacoErrorRef = useRef(false);\n\n    hasMonacoErrorRef.current = hasMonacoError;\n\n    const hasError = !!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(markers.some((marker) => marker.severity === MarkerSeverity.Error));\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 ? <Input.Error {...errorProps}>{error}</Input.Error> : <Space h=\"sm\" />;\n\n    const _header =\n        _label || _description ? (\n            <Stack gap=\"xxs\">\n                {_label}\n                {_description}\n            </Stack>\n        ) : null;\n\n    const _buttons = (\n        <Group justify=\"right\" gap=\"xs\">\n            <Search handleSearch={handleSearch} />\n            <CopyToClipboard value={_value} onCopy={() => onCopy?.()} />\n        </Group>\n    );\n    let editorTheme = colorScheme === 'light' ? 'light' : 'vs-dark';\n    if (disabled) {\n        editorTheme += '-disabled';\n    }\n\n    const _editor = loaded ? (\n        <Box\n            p=\"md\"\n            pl=\"xs\"\n            className={cx(\n                CodeEditorClasses.root,\n                {[CodeEditorClasses.error]: hasError},\n                {[CodeEditorClasses.disabled]: disabled},\n            )}\n            data-testid=\"editor-wrapper\"\n        >\n            <Editor\n                onValidate={handleValidate}\n                defaultLanguage={language}\n                theme={editorTheme}\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                    stickyScroll: {enabled: false},\n                    tabSize,\n                }}\n                value={_value}\n                onChange={handleChange}\n                beforeMount={(monaco) => {\n                    registerLanguages(monaco);\n                    registerThemes(monaco);\n                }}\n                onMount={(editor) => {\n                    editorRef.current = editor;\n                    if (editorHandle) {\n                        editorHandle.current = editor;\n                    }\n                    editor.onDidFocusEditorText(() => onFocus?.());\n                    editor.onDidBlurEditorText(async () => {\n                        // monaco editor has a timeout of 500ms populating errors, we want to ensure that checking errors happen after that\n                        setTimeout(async () => {\n                            if (!hasMonacoErrorRef.current) {\n                                await editor?.getAction('editor.action.formatDocument')?.run();\n                            }\n                        }, 550);\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=\"sm\"\n            h={Math.max(parentHeight, minHeight)}\n            mah={maxHeight}\n            ref={ref}\n            {...others}\n        >\n            <Group justify=\"space-between\">\n                {_header}\n                {_buttons}\n            </Group>\n            {_editor}\n            {_error}\n        </Stack>\n    );\n};\n"],"names":["Box","Center","Group","Input","Loader","Space","Stack","px","useMantineColorScheme","useMantineTheme","useProps","useUncontrolled","Editor","loader","MarkerSeverity","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","options","tabSize","editorHandle","others","loaded","setLoaded","_value","handleChange","finalValue","parentHeight","ref","editorRef","loadLocalMonaco","monacoInstance","config","monaco","registerLanguages","register","registerThemes","editor","defineTheme","base","inherit","rules","colors","theme","gray","handleSearch","current","focus","trigger","hasMonacoError","setHasMonacoError","hasMonacoErrorRef","hasError","colorScheme","handleValidate","markers","some","marker","severity","Error","_label","Label","_description","Description","_error","h","_header","gap","_buttons","justify","editorTheme","_editor","p","pl","className","root","data-testid","onValidate","defaultLanguage","minimap","enabled","wordWrap","scrollBeyondLastLine","formatOnPaste","fontSize","fontSizes","xs","readOnly","stickyScroll","beforeMount","onMount","onDidFocusEditorText","onDidBlurEditorText","setTimeout","getAction","run","Math","max","mah"],"mappings":"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"}

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

@@ -1,35 +1,36 @@
-.editor {
-    border: 1px solid var(--mantine-color-gray-3);
-    border-radius: var(--mantine-radius-default);
+.root {
+    --ce-bg: var(--mantine-color-gray-0);
+    --ce-border-color: var(--mantine-color-default-border);
+
+    border: 1px solid var(--ce-border-color);
+    border-radius: var(--mantine-radius-lg);
     z-index: 1;
     height: 100%;
-    outline-width: thin;
+    background-color: var(--ce-bg);
 
     @mixin light {
-        background-color: var(--mantine-color-white);
+        --ce-bg: var(--mantine-color-gray-0);
     }
 
     @mixin dark {
-        background-color: var(--mantine-color-black);
+        --ce-bg: var(--mantine-color-black);
     }
 }
 
-.valid {
-    outline-color: auto;
-    outline-style: none;
-}
-
 .error {
-    outline-color: var(--mantine-color-red-6);
-    outline-style: solid;
+    --ce-border-color: var(--mantine-color-error);
 }
 
 .disabled {
     @mixin light {
-        background-color: var(--mantine-color-gray-2);
-    }
+        --ce-bg: var(--mantine-color-gray-1);
+        --ce-border-color: var(--mantine-color-gray-1);
 
-    @mixin dark {
-        background-color: var(--mantine-color-navy-7);
+        :global {
+            .monaco-editor {
+                --vscode-editor-background: var(--ce-bg);
+                --vscode-editorGutter-background: var(--ce-bg);
+            }
+        }
     }
 }

package/dist/esm/components/code-editor/search/Search.d.ts

@@ -1,5 +1,6 @@
+import { FunctionComponent } from 'react';
 export interface SearchProps {
     handleSearch: () => void;
 }
-export declare const Search: React.FunctionComponent<SearchProps>;
+export declare const Search: FunctionComponent<SearchProps>;
 //# sourceMappingURL=Search.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../../../src/components/code-editor/search/Search.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,WAAW;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;CAC5B;AAQD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAiD,CAAC"}
+{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../../../src/components/code-editor/search/Search.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAGxC,MAAM,WAAW,WAAW;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;CAC5B;AAQD,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,CAAiD,CAAC"}

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

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { SearchSize16Px } from '@coveord/plasma-react-icons';
-import { ActionIcon } from '@mantine/core';
-const SearchButton = ({ handleSearch })=>/*#__PURE__*/ _jsx(ActionIcon, {
+import { IconSearch } from '@coveord/plasma-react-icons';
+import { ActionIcon } from '../../action-icon';
+const SearchButton = ({ handleSearch })=>/*#__PURE__*/ _jsx(ActionIcon.Quaternary, {
         onClick: handleSearch,
-        variant: "subtle",
-        color: "gray",
-        children: /*#__PURE__*/ _jsx(SearchSize16Px, {
-            height: 16
+        children: /*#__PURE__*/ _jsx(IconSearch, {
+            "aria-label": "Search",
+            size: 16
         })
     });
 export const Search = ({ ...params })=>/*#__PURE__*/ _jsx(SearchButton, {

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} 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"}
+{"version":3,"sources":["../../../../../src/components/code-editor/search/Search.tsx"],"sourcesContent":["import {IconSearch} from '@coveord/plasma-react-icons';\nimport {FunctionComponent} from 'react';\nimport {ActionIcon} from '../../action-icon';\n\nexport interface SearchProps {\n    handleSearch: () => void;\n}\n\nconst SearchButton: FunctionComponent<SearchProps> = ({handleSearch}) => (\n    <ActionIcon.Quaternary onClick={handleSearch}>\n        <IconSearch aria-label=\"Search\" size={16} />\n    </ActionIcon.Quaternary>\n);\n\nexport const Search: FunctionComponent<SearchProps> = ({...params}) => <SearchButton {...params} />;\n"],"names":["IconSearch","ActionIcon","SearchButton","handleSearch","Quaternary","onClick","aria-label","size","Search","params"],"mappings":";AAAA,SAAQA,UAAU,QAAO,8BAA8B;AAEvD,SAAQC,UAAU,QAAO,oBAAoB;AAM7C,MAAMC,eAA+C,CAAC,EAACC,YAAY,EAAC,iBAChE,KAACF,WAAWG,UAAU;QAACC,SAASF;kBAC5B,cAAA,KAACH;YAAWM,cAAW;YAASC,MAAM;;;AAI9C,OAAO,MAAMC,SAAyC,CAAC,EAAC,GAAGC,QAAO,iBAAK,KAACP;QAAc,GAAGO,MAAM;OAAK"}

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

@@ -1,4 +1,4 @@
-import { BoxProps, Factory, MantineSpacing, StylesApiProps, __InputWrapperProps } from '@mantine/core';
+import { __InputWrapperProps, BoxProps, Factory, MantineSpacing, StylesApiProps } from '@mantine/core';
 import { ReorderPayload } from '@mantine/form/lib/types';
 import { ForwardedRef, ReactNode } from 'react';
 import { CustomComponentThemeExtend } from '../../utils';
@@ -28,8 +28,9 @@ export interface CollectionProps<T> extends __InputWrapperProps, BoxProps, Style
      * @see {@link https://react-hook-form.com/api/usefieldarray/} for using a collection with ReactHookForm.
      *
      * @param originalItem The original item
+     * @param itemIndex The index of the original item
      */
-    getItemId?: (originalItem: T) => string;
+    getItemId?: (originalItem: T, itemIndex: number) => string;
     /**
      * Unused, has no effect
      */
@@ -109,7 +110,7 @@ export interface CollectionProps<T> extends __InputWrapperProps, BoxProps, Style
      */
     required?: boolean;
 }
-export type CollectionStylesNames = 'root' | 'item' | 'itemDragging' | 'dragHandle';
+export type CollectionStylesNames = 'root' | 'item' | 'items' | 'itemDragging' | 'dragHandle';
 export type CollectionFactory = Factory<{
     props: CollectionProps<unknown>;
     ref: HTMLDivElement;

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,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;;;;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;AAaH,eAAO,MAAM,UAAU;KAAI,CAAC,SAAU,eAAe,CAAC,CAAC,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAA;KAAC;;eAhBpF,eAAe,CAAC,OAAO,CAAC;aAC1B,cAAc;qBACN,qBAAqB;;CAkKrC,CAAC"}
+{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/Collection.tsx"],"names":[],"mappings":"AAIA,OAAO,EACH,mBAAmB,EAEnB,QAAQ,EACR,OAAO,EAEP,cAAc,EAEd,cAAc,EAGjB,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;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3D;;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;;;;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,OAAO,GAAG,cAAc,GAAG,YAAY,CAAC;AAE9F,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;AAaH,eAAO,MAAM,UAAU;KAAI,CAAC,SAAU,eAAe,CAAC,CAAC,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAA;KAAC;;eAhBpF,eAAe,CAAC,OAAO,CAAC;aAC1B,cAAc;qBACN,qBAAqB;;CA4JrC,CAAC"}

package/dist/esm/components/collection/Collection.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { AddSize16Px } from '@coveord/plasma-react-icons';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconPlus } from '@coveord/plasma-react-icons';
 import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
 import { restrictToParentElement, restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { Box, Group, Input, Stack, Tooltip, useProps, useStyles } from '@mantine/core';
+import { Box, Input, Stack, useProps, useStyles } from '@mantine/core';
 import { useDidUpdate } from '@mantine/hooks';
 import { identity } from '../../utils';
 import { Button } from '../button';
@@ -16,7 +16,7 @@ const defaultProps = {
     addDisabledTooltip: 'There is already an empty item',
     disabled: false,
     readOnly: false,
-    gap: 'xs',
+    gap: 'md',
     required: false,
     getItemId: ({ id })=>id
 };
@@ -59,14 +59,16 @@ export const Collection = (props)=>{
         ...errorProps,
         children: error
     }) : null;
-    const _header = _label || _description ? /*#__PURE__*/ _jsxs(_Fragment, {
+    const _header = _label || _description ? /*#__PURE__*/ _jsxs(Stack, {
+        gap: "xxs",
+        pb: "xs",
         children: [
             _label,
             _description
         ]
     }) : null;
     const standardizedItems = value.map((item, index)=>({
-            id: getItemId?.(item) ?? String(index),
+            id: getItemId?.(item, index) ?? String(index),
             data: item
         }));
     const items = standardizedItems.map((item, index)=>/*#__PURE__*/ _jsx(CollectionItem, {
@@ -78,22 +80,14 @@ export const Collection = (props)=>{
             children: children(item.data, index)
         }, item.id));
     const addAllowed = allowAdd?.(value) ?? true;
-    const _addButton = canEdit ? /*#__PURE__*/ _jsx(Group, {
-        children: /*#__PURE__*/ _jsx(Tooltip, {
-            label: addDisabledTooltip,
-            disabled: addAllowed,
-            children: /*#__PURE__*/ _jsx(Box, {
-                children: /*#__PURE__*/ _jsx(Button, {
-                    variant: "subtle",
-                    leftSection: /*#__PURE__*/ _jsx(AddSize16Px, {
-                        height: 16
-                    }),
-                    onClick: ()=>onInsertItem(newItem, value?.length ?? 0),
-                    disabled: !addAllowed,
-                    children: addLabel
-                })
-            })
-        })
+    const _addButton = canEdit ? /*#__PURE__*/ _jsx(Button.Quaternary, {
+        leftSection: /*#__PURE__*/ _jsx(IconPlus, {
+            size: 16
+        }),
+        onClick: ()=>onInsertItem(newItem, value?.length ?? 0),
+        disabled: !addAllowed,
+        disabledTooltip: addDisabledTooltip,
+        children: addLabel
     }) : null;
     const getIndex = (id)=>standardizedItems.findIndex((item)=>item.id === id);
     const handleDragEnd = ({ over, active })=>{
@@ -130,6 +124,7 @@ export const Collection = (props)=>{
                         _header,
                         /*#__PURE__*/ _jsxs(Stack, {
                             gap: gap,
+                            ...getStyles('items'),
                             children: [
                                 items,
                                 _addButton,