@coveord/plasma-mantine 55.7.2-next.21 → 55.7.2-next.23

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

@@ -6,7 +6,7 @@
     outline-width: thin;
 
     @mixin light {
-        background-color: var(--mantine-color-white);
+        background-color: var(--mantine-color-gray-0);
     }
 
     @mixin dark {
@@ -20,16 +20,20 @@
 }
 
 .error {
-    outline-color: var(--mantine-color-red-6);
+    outline-color: var(--mantine-color-error);
     outline-style: solid;
 }
 
 .disabled {
     @mixin light {
-        background-color: var(--mantine-color-gray-2);
-    }
+        border: 1px solid var(--mantine-color-gray-1);
+        background-color: var(--mantine-color-gray-1);
 
-    @mixin dark {
-        background-color: var(--mantine-color-navy-7);
+        :global {
+            .monaco-editor {
+                --vscode-editor-background: var(--mantine-color-gray-1);
+                --vscode-editorGutter-background: var(--mantine-color-gray-1);
+            }
+        }
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CollectionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/CollectionItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAQ,UAAU,EAAC,MAAM,eAAe,CAAC;AAChD,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAK3D,UAAU,mBAAoB,SAAQ,yBAAyB;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,yBAA0B,SAAQ,UAAU;IAClD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAmED,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAYpF,CAAC"}
+{"version":3,"file":"CollectionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/CollectionItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAQ,UAAU,EAAC,MAAM,eAAe,CAAC;AAChD,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAK3D,UAAU,mBAAoB,SAAQ,yBAAyB;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,yBAA0B,SAAQ,UAAU;IAClD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAyED,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAYpF,CAAC"}

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

@@ -20,12 +20,13 @@ const RemoveButtonPlaceholder = ()=>/*#__PURE__*/ _jsx("div", {
             width: 28
         }
     });
-const StaticCollectionItem = ({ onRemove, removable = true, children })=>{
+const StaticCollectionItem = ({ onRemove, removable = true, id, children })=>{
     const ctx = useCollectionContext();
     const removeButton = removable && onRemove ? /*#__PURE__*/ _jsx(RemoveButton, {
         onClick: onRemove
     }) : /*#__PURE__*/ _jsx(RemoveButtonPlaceholder, {});
     return /*#__PURE__*/ _jsxs(Group, {
+        "data-testid": `item-${id}`,
         ...ctx.getStyles('item'),
         children: [
             children,
@@ -33,9 +34,10 @@ const StaticCollectionItem = ({ onRemove, removable = true, children })=>{
         ]
     });
 };
-const DisabledCollectionItem = ({ children })=>{
+const DisabledCollectionItem = ({ id, children })=>{
     const ctx = useCollectionContext();
     return /*#__PURE__*/ _jsx(Group, {
+        "data-testid": `item-${id}`,
         ...ctx.getStyles('item'),
         children: children
     });
@@ -49,6 +51,7 @@ const DraggableCollectionItem = ({ id, onRemove, removable = true, children })=>
         id
     });
     return /*#__PURE__*/ _jsxs(Group, {
+        "data-testid": `item-${id}`,
         ref: setNodeRef,
         ...ctx.getStyles('item', {
             style: transform ? {

package/dist/esm/components/collection/CollectionItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/collection/CollectionItem.tsx"],"sourcesContent":["import {DragAndDropSize24Px, IconCircleMinus} from '@coveord/plasma-react-icons';\nimport {useSortable} from '@dnd-kit/sortable';\nimport {CSS} from '@dnd-kit/utilities';\nimport {Group, GroupProps} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\n\nimport {ActionIcon} from '../action-icon';\nimport {useCollectionContext} from './CollectionContext';\n\ninterface CollectionItemProps extends CollectionItemSharedProps {\n    draggable?: boolean;\n    disabled: boolean;\n}\n\ninterface CollectionItemSharedProps extends GroupProps {\n    id: string;\n    onRemove?: React.MouseEventHandler<HTMLButtonElement>;\n    removable?: boolean;\n}\n\nconst RemoveButton: FunctionComponent<{\n    onClick: React.MouseEventHandler<HTMLButtonElement>;\n}> = ({onClick}) => (\n    <ActionIcon.Quaternary style={{alignSelf: 'center'}} onClick={onClick}>\n        <IconCircleMinus aria-label=\"Remove\" size={20} />\n    </ActionIcon.Quaternary>\n);\n\nconst RemoveButtonPlaceholder = () => <div style={{width: 28}} />;\n\nconst StaticCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n    onRemove,\n    removable = true,\n    children,\n}) => {\n    const ctx = useCollectionContext();\n    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : <RemoveButtonPlaceholder />;\n\n    return (\n        <Group {...ctx.getStyles('item')}>\n            {children}\n            {removeButton}\n        </Group>\n    );\n};\n\nconst DisabledCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({children}) => {\n    const ctx = useCollectionContext();\n    return <Group {...ctx.getStyles('item')}>{children}</Group>;\n};\n\nconst DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n    id,\n    onRemove,\n    removable = true,\n    children,\n}) => {\n    const ctx = useCollectionContext();\n    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : null;\n    const {attributes, listeners, setNodeRef, transform, transition, isDragging, setActivatorNodeRef} = useSortable({\n        id,\n    });\n\n    return (\n        <Group\n            ref={setNodeRef}\n            {...ctx.getStyles('item', {\n                style: transform\n                    ? {\n                          transform: CSS.Transform.toString(transform),\n                          transition,\n                      }\n                    : undefined,\n            })}\n            data-isdragging={isDragging}\n        >\n            <div ref={setActivatorNodeRef} {...listeners} {...attributes} {...ctx.getStyles('dragHandle')}>\n                <DragAndDropSize24Px height={16} />\n            </div>\n            {children}\n            {removeButton}\n        </Group>\n    );\n};\n\nexport const CollectionItem: FunctionComponent<PropsWithChildren<CollectionItemProps>> = ({\n    draggable,\n    disabled,\n    ...otherProps\n}) => {\n    if (disabled) {\n        return <DisabledCollectionItem {...otherProps} />;\n    }\n    if (draggable) {\n        return <DraggableCollectionItem {...otherProps} />;\n    }\n    return <StaticCollectionItem {...otherProps} />;\n};\n"],"names":["DragAndDropSize24Px","IconCircleMinus","useSortable","CSS","Group","ActionIcon","useCollectionContext","RemoveButton","onClick","Quaternary","style","alignSelf","aria-label","size","RemoveButtonPlaceholder","div","width","StaticCollectionItem","onRemove","removable","children","ctx","removeButton","getStyles","DisabledCollectionItem","DraggableCollectionItem","id","attributes","listeners","setNodeRef","transform","transition","isDragging","setActivatorNodeRef","ref","Transform","toString","undefined","data-isdragging","height","CollectionItem","draggable","disabled","otherProps"],"mappings":";AAAA,SAAQA,mBAAmB,EAAEC,eAAe,QAAO,8BAA8B;AACjF,SAAQC,WAAW,QAAO,oBAAoB;AAC9C,SAAQC,GAAG,QAAO,qBAAqB;AACvC,SAAQC,KAAK,QAAmB,gBAAgB;AAGhD,SAAQC,UAAU,QAAO,iBAAiB;AAC1C,SAAQC,oBAAoB,QAAO,sBAAsB;AAazD,MAAMC,eAED,CAAC,EAACC,OAAO,EAAC,iBACX,KAACH,WAAWI,UAAU;QAACC,OAAO;YAACC,WAAW;QAAQ;QAAGH,SAASA;kBAC1D,cAAA,KAACP;YAAgBW,cAAW;YAASC,MAAM;;;AAInD,MAAMC,0BAA0B,kBAAM,KAACC;QAAIL,OAAO;YAACM,OAAO;QAAE;;AAE5D,MAAMC,uBAAwF,CAAC,EAC3FC,QAAQ,EACRC,YAAY,IAAI,EAChBC,QAAQ,EACX;IACG,MAAMC,MAAMf;IACZ,MAAMgB,eAAeH,aAAaD,yBAAW,KAACX;QAAaC,SAASU;uBAAe,KAACJ;IAEpF,qBACI,MAACV;QAAO,GAAGiB,IAAIE,SAAS,CAAC,OAAO;;YAC3BH;YACAE;;;AAGb;AAEA,MAAME,yBAA0F,CAAC,EAACJ,QAAQ,EAAC;IACvG,MAAMC,MAAMf;IACZ,qBAAO,KAACF;QAAO,GAAGiB,IAAIE,SAAS,CAAC,OAAO;kBAAGH;;AAC9C;AAEA,MAAMK,0BAA2F,CAAC,EAC9FC,EAAE,EACFR,QAAQ,EACRC,YAAY,IAAI,EAChBC,QAAQ,EACX;IACG,MAAMC,MAAMf;IACZ,MAAMgB,eAAeH,aAAaD,yBAAW,KAACX;QAAaC,SAASU;SAAe;IACnF,MAAM,EAACS,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,UAAU,EAAEC,mBAAmB,EAAC,GAAG/B,YAAY;QAC5GwB;IACJ;IAEA,qBACI,MAACtB;QACG8B,KAAKL;QACJ,GAAGR,IAAIE,SAAS,CAAC,QAAQ;YACtBb,OAAOoB,YACD;gBACIA,WAAW3B,IAAIgC,SAAS,CAACC,QAAQ,CAACN;gBAClCC;YACJ,IACAM;QACV,EAAE;QACFC,mBAAiBN;;0BAEjB,KAACjB;gBAAImB,KAAKD;gBAAsB,GAAGL,SAAS;gBAAG,GAAGD,UAAU;gBAAG,GAAGN,IAAIE,SAAS,CAAC,aAAa;0BACzF,cAAA,KAACvB;oBAAoBuC,QAAQ;;;YAEhCnB;YACAE;;;AAGb;AAEA,OAAO,MAAMkB,iBAA4E,CAAC,EACtFC,SAAS,EACTC,QAAQ,EACR,GAAGC,YACN;IACG,IAAID,UAAU;QACV,qBAAO,KAAClB;YAAwB,GAAGmB,UAAU;;IACjD;IACA,IAAIF,WAAW;QACX,qBAAO,KAAChB;YAAyB,GAAGkB,UAAU;;IAClD;IACA,qBAAO,KAAC1B;QAAsB,GAAG0B,UAAU;;AAC/C,EAAE"}
+{"version":3,"sources":["../../../../src/components/collection/CollectionItem.tsx"],"sourcesContent":["import {DragAndDropSize24Px, IconCircleMinus} from '@coveord/plasma-react-icons';\nimport {useSortable} from '@dnd-kit/sortable';\nimport {CSS} from '@dnd-kit/utilities';\nimport {Group, GroupProps} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\n\nimport {ActionIcon} from '../action-icon';\nimport {useCollectionContext} from './CollectionContext';\n\ninterface CollectionItemProps extends CollectionItemSharedProps {\n    draggable?: boolean;\n    disabled: boolean;\n}\n\ninterface CollectionItemSharedProps extends GroupProps {\n    id: string;\n    onRemove?: React.MouseEventHandler<HTMLButtonElement>;\n    removable?: boolean;\n}\n\nconst RemoveButton: FunctionComponent<{\n    onClick: React.MouseEventHandler<HTMLButtonElement>;\n}> = ({onClick}) => (\n    <ActionIcon.Quaternary style={{alignSelf: 'center'}} onClick={onClick}>\n        <IconCircleMinus aria-label=\"Remove\" size={20} />\n    </ActionIcon.Quaternary>\n);\n\nconst RemoveButtonPlaceholder = () => <div style={{width: 28}} />;\n\nconst StaticCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n    onRemove,\n    removable = true,\n    id,\n    children,\n}) => {\n    const ctx = useCollectionContext();\n    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : <RemoveButtonPlaceholder />;\n\n    return (\n        <Group data-testid={`item-${id}`} {...ctx.getStyles('item')}>\n            {children}\n            {removeButton}\n        </Group>\n    );\n};\n\nconst DisabledCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({id, children}) => {\n    const ctx = useCollectionContext();\n    return (\n        <Group data-testid={`item-${id}`} {...ctx.getStyles('item')}>\n            {children}\n        </Group>\n    );\n};\n\nconst DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n    id,\n    onRemove,\n    removable = true,\n    children,\n}) => {\n    const ctx = useCollectionContext();\n    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : null;\n    const {attributes, listeners, setNodeRef, transform, transition, isDragging, setActivatorNodeRef} = useSortable({\n        id,\n    });\n\n    return (\n        <Group\n            data-testid={`item-${id}`}\n            ref={setNodeRef}\n            {...ctx.getStyles('item', {\n                style: transform\n                    ? {\n                          transform: CSS.Transform.toString(transform),\n                          transition,\n                      }\n                    : undefined,\n            })}\n            data-isdragging={isDragging}\n        >\n            <div ref={setActivatorNodeRef} {...listeners} {...attributes} {...ctx.getStyles('dragHandle')}>\n                <DragAndDropSize24Px height={16} />\n            </div>\n            {children}\n            {removeButton}\n        </Group>\n    );\n};\n\nexport const CollectionItem: FunctionComponent<PropsWithChildren<CollectionItemProps>> = ({\n    draggable,\n    disabled,\n    ...otherProps\n}) => {\n    if (disabled) {\n        return <DisabledCollectionItem {...otherProps} />;\n    }\n    if (draggable) {\n        return <DraggableCollectionItem {...otherProps} />;\n    }\n    return <StaticCollectionItem {...otherProps} />;\n};\n"],"names":["DragAndDropSize24Px","IconCircleMinus","useSortable","CSS","Group","ActionIcon","useCollectionContext","RemoveButton","onClick","Quaternary","style","alignSelf","aria-label","size","RemoveButtonPlaceholder","div","width","StaticCollectionItem","onRemove","removable","id","children","ctx","removeButton","data-testid","getStyles","DisabledCollectionItem","DraggableCollectionItem","attributes","listeners","setNodeRef","transform","transition","isDragging","setActivatorNodeRef","ref","Transform","toString","undefined","data-isdragging","height","CollectionItem","draggable","disabled","otherProps"],"mappings":";AAAA,SAAQA,mBAAmB,EAAEC,eAAe,QAAO,8BAA8B;AACjF,SAAQC,WAAW,QAAO,oBAAoB;AAC9C,SAAQC,GAAG,QAAO,qBAAqB;AACvC,SAAQC,KAAK,QAAmB,gBAAgB;AAGhD,SAAQC,UAAU,QAAO,iBAAiB;AAC1C,SAAQC,oBAAoB,QAAO,sBAAsB;AAazD,MAAMC,eAED,CAAC,EAACC,OAAO,EAAC,iBACX,KAACH,WAAWI,UAAU;QAACC,OAAO;YAACC,WAAW;QAAQ;QAAGH,SAASA;kBAC1D,cAAA,KAACP;YAAgBW,cAAW;YAASC,MAAM;;;AAInD,MAAMC,0BAA0B,kBAAM,KAACC;QAAIL,OAAO;YAACM,OAAO;QAAE;;AAE5D,MAAMC,uBAAwF,CAAC,EAC3FC,QAAQ,EACRC,YAAY,IAAI,EAChBC,EAAE,EACFC,QAAQ,EACX;IACG,MAAMC,MAAMhB;IACZ,MAAMiB,eAAeJ,aAAaD,yBAAW,KAACX;QAAaC,SAASU;uBAAe,KAACJ;IAEpF,qBACI,MAACV;QAAMoB,eAAa,CAAC,KAAK,EAAEJ,IAAI;QAAG,GAAGE,IAAIG,SAAS,CAAC,OAAO;;YACtDJ;YACAE;;;AAGb;AAEA,MAAMG,yBAA0F,CAAC,EAACN,EAAE,EAAEC,QAAQ,EAAC;IAC3G,MAAMC,MAAMhB;IACZ,qBACI,KAACF;QAAMoB,eAAa,CAAC,KAAK,EAAEJ,IAAI;QAAG,GAAGE,IAAIG,SAAS,CAAC,OAAO;kBACtDJ;;AAGb;AAEA,MAAMM,0BAA2F,CAAC,EAC9FP,EAAE,EACFF,QAAQ,EACRC,YAAY,IAAI,EAChBE,QAAQ,EACX;IACG,MAAMC,MAAMhB;IACZ,MAAMiB,eAAeJ,aAAaD,yBAAW,KAACX;QAAaC,SAASU;SAAe;IACnF,MAAM,EAACU,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,UAAU,EAAEC,mBAAmB,EAAC,GAAGhC,YAAY;QAC5GkB;IACJ;IAEA,qBACI,MAAChB;QACGoB,eAAa,CAAC,KAAK,EAAEJ,IAAI;QACzBe,KAAKL;QACJ,GAAGR,IAAIG,SAAS,CAAC,QAAQ;YACtBf,OAAOqB,YACD;gBACIA,WAAW5B,IAAIiC,SAAS,CAACC,QAAQ,CAACN;gBAClCC;YACJ,IACAM;QACV,EAAE;QACFC,mBAAiBN;;0BAEjB,KAAClB;gBAAIoB,KAAKD;gBAAsB,GAAGL,SAAS;gBAAG,GAAGD,UAAU;gBAAG,GAAGN,IAAIG,SAAS,CAAC,aAAa;0BACzF,cAAA,KAACzB;oBAAoBwC,QAAQ;;;YAEhCnB;YACAE;;;AAGb;AAEA,OAAO,MAAMkB,iBAA4E,CAAC,EACtFC,SAAS,EACTC,QAAQ,EACR,GAAGC,YACN;IACG,IAAID,UAAU;QACV,qBAAO,KAACjB;YAAwB,GAAGkB,UAAU;;IACjD;IACA,IAAIF,WAAW;QACX,qBAAO,KAACf;YAAyB,GAAGiB,UAAU;;IAClD;IACA,qBAAO,KAAC3B;QAAsB,GAAG2B,UAAU;;AAC/C,EAAE"}

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

@@ -20,4 +20,6 @@ export * from './read-only';
 export * from './sticky-footer';
 export * from './table';
 export * from './child-form';
+export * from './checkbox';
+export * from './loader';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC"}

package/dist/esm/components/index.js

@@ -20,5 +20,7 @@ export * from './read-only';
 export * from './sticky-footer';
 export * from './table';
 export * from './child-form';
+export * from './checkbox';
+export * from './loader';
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from './accordion';\nexport * from './action-icon';\nexport * from './alert';\nexport * from './badge';\nexport * from './blank-slate';\nexport * from './browser-preview';\nexport * from './button';\nexport * from './code-editor';\nexport * from './collection';\nexport * from './copyToClipboard';\nexport * from './date-range-picker';\nexport * from './ellipsis-text';\nexport * from './header';\nexport * from './info-token';\nexport * from './inline-confirm';\nexport * from './menu';\nexport * from './modal';\nexport * from './prompt';\nexport * from './read-only';\nexport * from './sticky-footer';\nexport * from './table';\nexport * from './child-form';\n"],"names":[],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,gBAAgB;AAC9B,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,gBAAgB;AAC9B,cAAc,oBAAoB;AAClC,cAAc,WAAW;AACzB,cAAc,gBAAgB;AAC9B,cAAc,eAAe;AAC7B,cAAc,oBAAoB;AAClC,cAAc,sBAAsB;AACpC,cAAc,kBAAkB;AAChC,cAAc,WAAW;AACzB,cAAc,eAAe;AAC7B,cAAc,mBAAmB;AACjC,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,cAAc;AAC5B,cAAc,kBAAkB;AAChC,cAAc,UAAU;AACxB,cAAc,eAAe"}
+{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from './accordion';\nexport * from './action-icon';\nexport * from './alert';\nexport * from './badge';\nexport * from './blank-slate';\nexport * from './browser-preview';\nexport * from './button';\nexport * from './code-editor';\nexport * from './collection';\nexport * from './copyToClipboard';\nexport * from './date-range-picker';\nexport * from './ellipsis-text';\nexport * from './header';\nexport * from './info-token';\nexport * from './inline-confirm';\nexport * from './menu';\nexport * from './modal';\nexport * from './prompt';\nexport * from './read-only';\nexport * from './sticky-footer';\nexport * from './table';\nexport * from './child-form';\nexport * from './checkbox';\nexport * from './loader';\n"],"names":[],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,gBAAgB;AAC9B,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,gBAAgB;AAC9B,cAAc,oBAAoB;AAClC,cAAc,WAAW;AACzB,cAAc,gBAAgB;AAC9B,cAAc,eAAe;AAC7B,cAAc,oBAAoB;AAClC,cAAc,sBAAsB;AACpC,cAAc,kBAAkB;AAChC,cAAc,WAAW;AACzB,cAAc,eAAe;AAC7B,cAAc,mBAAmB;AACjC,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,cAAc;AAC5B,cAAc,kBAAkB;AAChC,cAAc,UAAU;AACxB,cAAc,eAAe;AAC7B,cAAc,aAAa;AAC3B,cAAc,WAAW"}

package/dist/esm/components/loader/CircleLoader.d.ts

@@ -0,0 +1,3 @@
+import { MantineLoaderComponent } from '@mantine/core';
+export declare const CircleLoader: MantineLoaderComponent;
+//# sourceMappingURL=CircleLoader.d.ts.map

package/dist/esm/components/loader/CircleLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircleLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/loader/CircleLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,sBAAsB,EAAC,MAAM,eAAe,CAAC;AAK1D,eAAO,MAAM,YAAY,EAAE,sBAEzB,CAAC"}

package/dist/esm/components/loader/CircleLoader.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@mantine/core';
+import cx from 'clsx';
+import { forwardRef } from 'react';
+import classes from './CircleLoader.module.css';
+export const CircleLoader = /*#__PURE__*/ forwardRef(({ className, ...others }, ref)=>/*#__PURE__*/ _jsx(Box, {
+        component: "span",
+        className: cx(classes.root, className),
+        ...others,
+        ref: ref
+    }));
+
+//# sourceMappingURL=CircleLoader.js.map

package/dist/esm/components/loader/CircleLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/loader/CircleLoader.tsx"],"sourcesContent":["import {Box, MantineLoaderComponent} from '@mantine/core';\nimport cx from 'clsx';\nimport {forwardRef} from 'react';\nimport classes from './CircleLoader.module.css';\n\nexport const CircleLoader: MantineLoaderComponent = forwardRef(({className, ...others}, ref) => (\n    <Box component=\"span\" className={cx(classes.root, className)} {...others} ref={ref} />\n));\n"],"names":["Box","cx","forwardRef","classes","CircleLoader","className","others","ref","component","root"],"mappings":";AAAA,SAAQA,GAAG,QAA+B,gBAAgB;AAC1D,OAAOC,QAAQ,OAAO;AACtB,SAAQC,UAAU,QAAO,QAAQ;AACjC,OAAOC,aAAa,4BAA4B;AAEhD,OAAO,MAAMC,6BAAuCF,WAAW,CAAC,EAACG,SAAS,EAAE,GAAGC,QAAO,EAAEC,oBACpF,KAACP;QAAIQ,WAAU;QAAOH,WAAWJ,GAAGE,QAAQM,IAAI,EAAEJ;QAAa,GAAGC,MAAM;QAAEC,KAAKA;QAChF"}

package/dist/esm/components/loader/CircleLoader.module.css

@@ -0,0 +1,29 @@
+.root {
+    --loader-light-color: var(--mantine-primary-color-light);
+
+    display: inline-block;
+    width: var(--loader-size);
+    height: var(--loader-size);
+
+    &::after {
+        content: '';
+        display: block;
+        width: var(--loader-size);
+        height: var(--loader-size);
+        border-radius: 10000px;
+        border-width: calc(var(--loader-size) / 8);
+        border-style: solid;
+        border-color: var(--loader-light-color) var(--loader-light-color) var(--loader-light-color) var(--loader-color);
+        animation: circle-loader-animation 1.2s linear infinite;
+    }
+}
+
+@keyframes circle-loader-animation {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}

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

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

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

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

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

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

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

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

package/dist/esm/components/read-only/ReadOnlyInputStyles.js

@@ -1,7 +1,7 @@
 export const readOnlyInputStyles = (theme)=>({
         wrapper: {
-            '--input-bd': 'transparent',
-            '--input-bg': theme.colors.gray[2],
+            '--input-bd': 'var(--mantine-color-default-border)',
+            '--input-bg': theme.colors.gray[1],
             '--input-color': theme.colors.gray[7],
             '--input-placeholder-color': theme.colors.gray[7]
         },

package/dist/esm/components/read-only/ReadOnlyInputStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/read-only/ReadOnlyInputStyles.ts"],"sourcesContent":["import {type MantineTheme} from '@mantine/core';\n\nexport const readOnlyInputStyles = (theme: MantineTheme) => ({\n    wrapper: {\n        '--input-bd': 'transparent',\n        '--input-bg': theme.colors.gray[2],\n        '--input-color': theme.colors.gray[7],\n        '--input-placeholder-color': theme.colors.gray[7],\n    },\n    label: {\n        '--input-asterisk-color': theme.colors.red[2],\n    },\n    input: {\n        cursor: 'text',\n    },\n});\n"],"names":["readOnlyInputStyles","theme","wrapper","colors","gray","label","red","input","cursor"],"mappings":"AAEA,OAAO,MAAMA,sBAAsB,CAACC,QAAyB,CAAA;QACzDC,SAAS;YACL,cAAc;YACd,cAAcD,MAAME,MAAM,CAACC,IAAI,CAAC,EAAE;YAClC,iBAAiBH,MAAME,MAAM,CAACC,IAAI,CAAC,EAAE;YACrC,6BAA6BH,MAAME,MAAM,CAACC,IAAI,CAAC,EAAE;QACrD;QACAC,OAAO;YACH,0BAA0BJ,MAAME,MAAM,CAACG,GAAG,CAAC,EAAE;QACjD;QACAC,OAAO;YACHC,QAAQ;QACZ;IACJ,CAAA,EAAG"}
+{"version":3,"sources":["../../../../src/components/read-only/ReadOnlyInputStyles.ts"],"sourcesContent":["import {type MantineTheme} from '@mantine/core';\n\nexport const readOnlyInputStyles = (theme: MantineTheme) => ({\n    wrapper: {\n        '--input-bd': 'var(--mantine-color-default-border)',\n        '--input-bg': theme.colors.gray[1],\n        '--input-color': theme.colors.gray[7],\n        '--input-placeholder-color': theme.colors.gray[7],\n    },\n    label: {\n        '--input-asterisk-color': theme.colors.red[2],\n    },\n    input: {\n        cursor: 'text',\n    },\n});\n"],"names":["readOnlyInputStyles","theme","wrapper","colors","gray","label","red","input","cursor"],"mappings":"AAEA,OAAO,MAAMA,sBAAsB,CAACC,QAAyB,CAAA;QACzDC,SAAS;YACL,cAAc;YACd,cAAcD,MAAME,MAAM,CAACC,IAAI,CAAC,EAAE;YAClC,iBAAiBH,MAAME,MAAM,CAACC,IAAI,CAAC,EAAE;YACrC,6BAA6BH,MAAME,MAAM,CAACC,IAAI,CAAC,EAAE;QACrD;QACAC,OAAO;YACH,0BAA0BJ,MAAME,MAAM,CAACG,GAAG,CAAC,EAAE;QACjD;QACAC,OAAO;YACHC,QAAQ;QACZ;IACJ,CAAA,EAAG"}

package/dist/esm/components/table/layouts/row-layout/RowLayout.module.css

@@ -35,7 +35,7 @@
 
     &[data-selected='true'] {
         &[data-multi-selection='false'] {
-            background-color: var(--mantine-color-gray-light);
+            background-color: var(--mantine-color-gray-light-hover);
         }
 
         &[data-multi-selection='true'] {

package/dist/esm/styles/Badge.module.css

@@ -1,3 +1,5 @@
 .root {
+    --badge-fz-md: 12px;
+
     font-weight: 500;
 }

package/dist/esm/styles/Checkbox.module.css

@@ -1,9 +1,45 @@
-.label {
-    font-weight: 400;
+/* 
+`readonly` state on checkboxes is not something that exists in Mantine.
+So we are allowing ourselves some custom style to achieve the desired effect
+*/
+.input {
+    @mixin light {
+        /* targets the default checkbox without overiding mantine's base rules */
+        &:not([data-indeterminate], :checked, [readonly], :disabled, [data-error='true']) {
+            border-color: var(--coveo-color-input-border);
+        }
+
+        /* mantine doesn't have a concept of readonly checkbox */
+        &[readonly] {
+            border-color: var(--mantine-color-default-border);
+            background-color: var(--coveo-color-bg-readonly);
+            color: var(--coveo-color-text-readonly);
+
+            & + .icon {
+                color: var(--coveo-color-text-readonly);
+            }
+        }
+
+        /* mantine hardcodes disabled styles so we need to write custom styles */
+        &:disabled {
+            border-color: var(--mantine-color-default-border);
+            background-color: var(--coveo-color-bg-disabled);
+            color: var(--coveo-color-text-disabled);
+
+            & + .icon {
+                color: var(--coveo-color-text-disabled);
+            }
+        }
+    }
 }
 
-.input {
-    @mixin where-light {
-        border-color: var(--coveo-color-input-border);
+.labelWrapper {
+    @mixin light {
+        &[data-disabled] {
+            .label,
+            .description {
+                color: var(--coveo-color-text-disabled);
+            }
+        }
     }
 }

package/dist/esm/styles/CheckboxIndicator.module.css

@@ -1,5 +1,12 @@
+/* 
+`readonly` state on checkboxes is not something that exists in Mantine.
+So we are allowing ourselves some custom style to achieve the desired effect
+*/
 .indicator {
     @mixin where-light {
-        border-color: var(--coveo-color-input-border);
+        &[readonly] {
+            border-color: var(--coveo-color-input-border);
+            background-color: var(--checkbox-color);
+        }
     }
 }

package/dist/esm/styles/Input.module.css

@@ -10,10 +10,16 @@
     }
 
     &[data-disabled] {
-        --input-section-color: var(--input-disabled-color);
+        > .section {
+            > svg {
+                color: var(--input-disabled-color);
+            }
+        }
     }
 }
 
 .section {
-    color: var(--input-section-color);
+    > svg {
+        color: var(--mantine-color-gray-3);
+    }
 }

package/dist/esm/styles/Pagination.module.css

@@ -1,5 +1,14 @@
+.root {
+    --pagination-active-bg: var(--mantine-primary-color-light);
+    --pagination-active-color: var(--mantine-primary-color-filled);
+}
+
 .control {
     @mixin where-light {
-        border-color: var(--coveo-color-input-border);
+        border-color: var(--mantine-color-default-border);
+    }
+
+    &[data-active] {
+        border: none;
     }
 }

package/dist/esm/styles/Radio.module.css

@@ -1,10 +1,38 @@
 .labelWrapper {
     display: flex;
     align-items: flex-start;
+
+    @mixin light {
+        color: var(--coveo-color-title);
+
+        &[data-disabled] {
+            .label,
+            .description {
+                color: var(--coveo-color-text-disabled);
+            }
+        }
+    }
 }
 
 .radio {
-    @mixin where-light {
-        border-color: var(--coveo-color-input-border);
+    @mixin light {
+        &:not([data-disabled]) {
+            border-color: var(--coveo-color-input-border);
+        }
+
+        &:disabled {
+            background-color: var(--coveo-color-bg-disabled);
+        }
+
+        /* mantine hardcodes disabled styles so we need to write custom styles */
+        &[readonly] {
+            border-color: var(--mantine-color-default-border);
+            background-color: var(--coveo-color-bg-readonly);
+            color: var(--coveo-color-text-readonly);
+
+            & + .icon {
+                color: var(--coveo-color-text-readonly);
+            }
+        }
     }
 }

package/dist/esm/styles/ReadOnlyInput.module.css

@@ -1,12 +1,16 @@
 .input {
     cursor: text;
 
-    --input-bd: transparent;
-    --input-bg: var(--mantine-color-dark-light);
+    --input-bd: var(--mantine-color-default-border);
+    --input-bg: var(--mantine-color-gray-1);
     --input-color: var(--mantine-color-text);
-    --input-placeholder-color: var(--mantine-color-text);
+    --input-placeholder-color: var(--mantine-color-placeholder);
 }
 
 .section {
     --input-section-color: var(--mantine-color-text);
+
+    > svg {
+        color: var(--mantine-color-gray-3);
+    }
 }

package/dist/esm/styles/Select.module.css

@@ -0,0 +1,46 @@
+.option {
+    @mixin light {
+        color: var(--coveo-color-title);
+        border-radius: var(--mantine-radius-sm);
+
+        @mixin hover {
+            &:not([data-combobox-disabled], [data-checked], [data-combobox-selected]) {
+                background-color: var(--mantine-color-default-hover);
+            }
+        }
+
+        &[data-combobox-disabled] {
+            opacity: 1;
+            color: var(--coveo-color-text-disabled);
+        }
+
+        &[data-combobox-active='true'] {
+            background-color: var(--mantine-primary-color-light);
+            color: var(--mantine-primary-color-filled);
+
+            + svg {
+                opacity: 1;
+            }
+        }
+
+        &[data-combobox-selected] {
+            background-color: var(--mantine-primary-color-filled);
+            color: white;
+        }
+    }
+}
+
+.groupLabel {
+    @mixin light {
+        color: var(--mantine-color-placeholder);
+    }
+}
+
+.input {
+    @mixin light {
+        &[data-disabled] {
+            --input-disabled-bg: var(--coveo-color-bg-disabled);
+            --input-bd: var(--mantine-color-default-border);
+        }
+    }
+}

package/dist/esm/theme/Theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../../src/theme/Theme.tsx"],"names":[],"mappings":"AAUA,OAAO,EAmBH,oBAAoB,EAkBvB,MAAM,eAAe,CAAC;AA6BvB,eAAO,MAAM,WAAW,EAAE,oBA0UxB,CAAC"}
+{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../../src/theme/Theme.tsx"],"names":[],"mappings":"AAUA,OAAO,EAmBH,oBAAoB,EAkBvB,MAAM,eAAe,CAAC;AA8BvB,eAAO,MAAM,WAAW,EAAE,oBAoUxB,CAAC"}

package/dist/esm/theme/Theme.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ArrowHeadLeftSize16Px, ArrowHeadRightSize16Px, CheckSize16Px, CrossSize16Px, FilterSize16Px, IconSlash, InfoSize24Px } from '@coveord/plasma-react-icons';
 import { color } from '@coveord/plasma-tokens';
 import { ActionIcon, Alert, AppShell, Badge, Breadcrumbs, Button, Checkbox, CloseButton, ColorSwatch, Combobox, ComboboxSearch, createTheme, deepMerge, Divider, Input, InputWrapper, List, Loader, Modal, MultiSelect, NavLink, Notification, Pagination, Popover, Radio, ScrollArea, SegmentedControl, Select, Skeleton, Stepper, Switch, Table, Tabs, Text, Tooltip } from '@mantine/core';
-import { InfoToken } from '../components';
+import { CheckboxIcon, CircleLoader, InfoToken } from '../components';
 import ActionIconClasses from '../styles/ActionIcon.module.css';
 import AlertClasses from '../styles/Alert.module.css';
 import BadgeClasses from '../styles/Badge.module.css';
@@ -22,6 +22,7 @@ import ReadOnlyInputClasses from '../styles/ReadOnlyInput.module.css';
 import ReadOnlyStateClasses from '../styles/ReadOnlyState.module.css';
 import ScrollAreaClasses from '../styles/ScrollArea.module.css';
 import SegmentedControlClasses from '../styles/SegmentedControl.module.css';
+import SelectClasses from '../styles/Select.module.css';
 import SkeletonClasses from '../styles/Skeleton.module.css';
 import StepperClasses from '../styles/Stepper.module.css';
 import TableClasses from '../styles/Table.module.css';
@@ -134,7 +135,8 @@ export const plasmaTheme = createTheme({
         Badge: Badge.extend({
             classNames: BadgeClasses,
             defaultProps: {
-                variant: 'light'
+                variant: 'light',
+                tt: 'none'
             }
         }),
         Breadcrumbs: Breadcrumbs.extend({
@@ -155,31 +157,20 @@ export const plasmaTheme = createTheme({
         }),
         Checkbox: Checkbox.extend({
             defaultProps: {
-                radius: 'sm'
+                radius: 'sm',
+                icon: CheckboxIcon
             },
             classNames: (theme, props)=>{
                 if (props.readOnly && !props.disabled) {
                     return deepMerge(CheckboxClasses, ReadOnlyStateClasses);
                 }
                 return CheckboxClasses;
-            },
-            vars: (theme, props)=>{
-                if (props.readOnly && !props.disabled) {
-                    return {
-                        root: {
-                            '--checkbox-icon-color': theme.colors.gray[7],
-                            '--checkbox-color': theme.colors.gray[2]
-                        }
-                    };
-                }
-                return {
-                    root: {}
-                };
             }
         }),
         CheckboxIndicator: Checkbox.Indicator.extend({
             defaultProps: {
-                radius: 'sm'
+                radius: 'sm',
+                icon: CheckboxIcon
             },
             classNames: CheckboxIndicatorClasses
         }),
@@ -260,7 +251,11 @@ export const plasmaTheme = createTheme({
         }),
         Loader: Loader.extend({
             defaultProps: {
-                type: 'dots',
+                loaders: {
+                    ...Loader.defaultLoaders,
+                    circle: CircleLoader
+                },
+                type: 'circle',
                 role: 'presentation'
             }
         }),
@@ -353,8 +348,10 @@ export const plasmaTheme = createTheme({
         }),
         Select: Select.extend({
             defaultProps: {
-                allowDeselect: false
-            }
+                allowDeselect: false,
+                withCheckIcon: false
+            },
+            classNames: SelectClasses
         }),
         Skeleton: Skeleton.extend({
             classNames: SkeletonClasses