@payloadcms/ui 3.86.0-internal.ac46214 → 4.0.0-internal.1f9ae9a

package/dist/elements/GroupByControl/index.css

@@ -0,0 +1,106 @@
+@layer payload-default {
+  .group-by-control__popup .popup__scroll-container {
+    padding: 0;
+  }
+
+  .group-by-control__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: var(--spacer-6);
+    padding-left: var(--spacer-2);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+    border-radius: var(--radius-large) var(--radius-large) 0 0;
+  }
+
+  .group-by-control__title {
+    align-self: stretch;
+    align-items: center;
+    display: flex;
+    flex: 1;
+    padding: var(--spacer-2);
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-strong-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    line-height: var(--text-body-medium-strong-line-height);
+    color: var(--color-text);
+  }
+
+  .group-by-control__header-actions {
+    display: flex;
+    gap: var(--spacer-1);
+    padding: var(--spacer-2);
+  }
+
+  .group-by-control__body {
+    padding: var(--spacer-2) 0;
+  }
+
+  .group-by-control__row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+    gap: var(--spacer-2);
+    align-items: center;
+    padding: var(--spacer-1) var(--spacer-3);
+  }
+
+  .group-by-control__label {
+    display: flex;
+    align-items: center;
+    height: var(--spacer-4);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    color: var(--color-text-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .group-by-control__input {
+    width: 100%;
+  }
+
+  .group-by-control__select-popup {
+    width: 100%;
+  }
+
+  .group-by-control__select-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    min-height: var(--spacer-4);
+    padding: 0 var(--spacer-1) 0 var(--spacer-2);
+    background: var(--color-bg);
+    border: var(--stroke-width-small) solid var(--color-border);
+    border-radius: var(--button-radius);
+    cursor: pointer;
+    color: var(--color-text);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+  }
+
+  .group-by-control__select-trigger:hover:not(.group-by-control__select-trigger--disabled) {
+    border-color: var(--color-border-hover);
+  }
+
+  .group-by-control__select-trigger--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .group-by-control__select-trigger svg {
+    flex-shrink: 0;
+    color: var(--color-text-secondary);
+  }
+
+  .group-by-control__select-value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/dist/elements/GroupByControl/index.d.ts

@@ -0,0 +1,9 @@
+import type { ClientField, SanitizedCollectionConfig } from 'payload';
+import React from 'react';
+import './index.css';
+export type GroupByControlProps = {
+    readonly collectionSlug: SanitizedCollectionConfig['slug'];
+    readonly fields: ClientField[];
+};
+export declare const GroupByControl: React.FC<GroupByControlProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/GroupByControl/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/GroupByControl/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAS,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAG5E,OAAO,KAAuC,MAAM,OAAO,CAAA;AAY3D,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IAC1D,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;CAC/B,CAAA;AAoBD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAqPxD,CAAA"}

package/dist/elements/GroupByControl/index.js

@@ -0,0 +1,255 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isFieldDisabled } from 'payload/shared';
+import React, { useCallback, useMemo, useRef } from 'react';
+import { CheckIcon } from '../../icons/Check/index.js';
+import { ChevronIcon } from '../../icons/Chevron/index.js';
+import { TrashIcon } from '../../icons/Trash/index.js';
+import { XIcon } from '../../icons/X/index.js';
+import { useAuth } from '../../providers/Auth/index.js';
+import { useListQuery } from '../../providers/ListQuery/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { reduceFieldsToOptions } from '../../utilities/reduceFieldsToOptions.js';
+import { Button } from '../Button/index.js';
+import { Popup, PopupList } from '../Popup/index.js';
+import './index.css';
+const baseClass = 'group-by-control';
+/**
+ * Supported field types for group by functionality.
+ */
+const supportedFieldTypes = ['text', 'textarea', 'number', 'select', 'relationship', 'date', 'checkbox', 'radio', 'email', 'upload'];
+export const GroupByControl = ({
+  collectionSlug,
+  fields
+}) => {
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    permissions
+  } = useAuth();
+  const listQuery = useListQuery();
+  const closeRef = useRef(null);
+  const groupByRaw = listQuery.query?.groupBy;
+  const groupByFieldName = groupByRaw?.replace(/^-/, '');
+  const fieldPermissions = permissions?.collections?.[collectionSlug]?.fields;
+  const reducedFields = useMemo(() => reduceFieldsToOptions({
+    fieldPermissions,
+    fields,
+    i18n
+  }), [fields, fieldPermissions, i18n]);
+  const filteredFields = useMemo(() => reducedFields.filter(field => !isFieldDisabled(field.field, 'groupBy') && field.fieldPath !== 'id' && supportedFieldTypes.includes(field.field.type)), [reducedFields]);
+  const groupByField = reducedFields.find(field_0 => field_0.fieldPath === groupByFieldName);
+  const isActive = Boolean(groupByFieldName && groupByField);
+  const handleFieldSelect = useCallback(value => {
+    void (async () => {
+      if (typeof listQuery.refineListData !== 'function') {
+        return;
+      }
+      await listQuery.refineListData({
+        groupBy: listQuery.query?.groupBy?.startsWith('-') ? `-${value}` : value,
+        page: 1
+      });
+    })();
+  }, [listQuery]);
+  const handleClear = useCallback(() => {
+    void (async () => {
+      if (typeof listQuery.refineListData === 'function') {
+        await listQuery.refineListData({
+          groupBy: ''
+        });
+      }
+      closeRef.current?.();
+    })();
+  }, [listQuery]);
+  const handleDirectionSelect = useCallback(value_0 => {
+    void (async () => {
+      if (!groupByFieldName || typeof listQuery.refineListData !== 'function') {
+        return;
+      }
+      await listQuery.refineListData({
+        groupBy: value_0 === 'asc' ? groupByFieldName : `-${groupByFieldName}`,
+        page: 1
+      });
+    })();
+  }, [groupByFieldName, listQuery]);
+  const directionValue = !groupByRaw || typeof groupByRaw !== 'string' ? 'asc' : groupByRaw.startsWith('-') ? 'desc' : 'asc';
+  // Build the trigger button label
+  const triggerLabel = isActive ? t('general:groupByLabel', {
+    label: groupByField?.label || ''
+  }) : t('general:groupByLabel', {
+    label: ''
+  });
+  return /*#__PURE__*/_jsx(Popup, {
+    className: baseClass,
+    horizontalAlign: "right",
+    portalClassName: `${baseClass}__popup`,
+    render: ({
+      close
+    }) => {
+      closeRef.current = close;
+      return /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__content`,
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__header`,
+          children: [/*#__PURE__*/_jsx("span", {
+            className: `${baseClass}__title`,
+            children: t('general:groupByLabel', {
+              label: ''
+            })
+          }), /*#__PURE__*/_jsxs("div", {
+            className: `${baseClass}__header-actions`,
+            children: [isActive && /*#__PURE__*/_jsx(Button, {
+              "aria-label": t('general:clear'),
+              buttonStyle: "ghost",
+              icon: /*#__PURE__*/_jsx(TrashIcon, {}),
+              onClick: handleClear,
+              round: true,
+              size: "medium"
+            }), /*#__PURE__*/_jsx(Button, {
+              "aria-label": t('general:close'),
+              buttonStyle: "ghost",
+              icon: /*#__PURE__*/_jsx(XIcon, {
+                size: 24
+              }),
+              onClick: close,
+              round: true,
+              size: "medium"
+            })]
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__body`,
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: `${baseClass}__row`,
+            children: [/*#__PURE__*/_jsx("label", {
+              className: `${baseClass}__label`,
+              children: t('general:field')
+            }), /*#__PURE__*/_jsx("div", {
+              className: `${baseClass}__input`,
+              "data-popup-prevent-close": true,
+              children: /*#__PURE__*/_jsx(Popup, {
+                className: `${baseClass}__select-popup`,
+                horizontalAlign: "right",
+                render: ({
+                  close: closeFieldPopup
+                }) => /*#__PURE__*/_jsx(PopupList.ButtonGroup, {
+                  children: filteredFields.map((field_1, i) => /*#__PURE__*/_jsx(PopupList.Button, {
+                    active: field_1.fieldPath === groupByFieldName,
+                    icon: field_1.fieldPath === groupByFieldName ? /*#__PURE__*/_jsx(CheckIcon, {
+                      size: 16
+                    }) : undefined,
+                    onClick: () => {
+                      handleFieldSelect(field_1.fieldPath);
+                      closeFieldPopup();
+                    },
+                    children: field_1.label
+                  }, i))
+                }),
+                renderButton: ({
+                  active,
+                  onClick,
+                  onKeyDown
+                }) => /*#__PURE__*/_jsxs("button", {
+                  className: `${baseClass}__select-trigger`,
+                  onClick: onClick,
+                  onKeyDown: onKeyDown,
+                  type: "button",
+                  children: [/*#__PURE__*/_jsx("span", {
+                    className: `${baseClass}__select-value`,
+                    children: groupByField?.label || t('general:selectValue')
+                  }), /*#__PURE__*/_jsx(ChevronIcon, {
+                    direction: active ? 'up' : 'down',
+                    size: 16
+                  })]
+                }),
+                size: "medium",
+                verticalAlign: "bottom"
+              })
+            })]
+          }), /*#__PURE__*/_jsxs("div", {
+            className: `${baseClass}__row`,
+            children: [/*#__PURE__*/_jsx("label", {
+              className: `${baseClass}__label`,
+              children: t('general:sort')
+            }), /*#__PURE__*/_jsx("div", {
+              className: `${baseClass}__input`,
+              "data-popup-prevent-close": true,
+              children: /*#__PURE__*/_jsx(Popup, {
+                className: `${baseClass}__select-popup`,
+                disabled: !groupByFieldName,
+                horizontalAlign: "right",
+                render: ({
+                  close: closeSortPopup
+                }) => /*#__PURE__*/_jsxs(PopupList.RadioGroup, {
+                  children: [/*#__PURE__*/_jsx(PopupList.RadioGroupItem, {
+                    active: directionValue === 'desc',
+                    onClick: () => {
+                      handleDirectionSelect('desc');
+                      closeSortPopup();
+                    },
+                    children: t('general:descending')
+                  }), /*#__PURE__*/_jsx(PopupList.RadioGroupItem, {
+                    active: directionValue === 'asc',
+                    onClick: () => {
+                      handleDirectionSelect('asc');
+                      closeSortPopup();
+                    },
+                    children: t('general:ascending')
+                  })]
+                }),
+                renderButton: ({
+                  active: active_0,
+                  onClick: onClick_0,
+                  onKeyDown: onKeyDown_0
+                }) => /*#__PURE__*/_jsxs("button", {
+                  className: [`${baseClass}__select-trigger`, !groupByFieldName && `${baseClass}__select-trigger--disabled`].filter(Boolean).join(' '),
+                  disabled: !groupByFieldName,
+                  onClick: onClick_0,
+                  onKeyDown: onKeyDown_0,
+                  type: "button",
+                  children: [/*#__PURE__*/_jsx("span", {
+                    className: `${baseClass}__select-value`,
+                    children: directionValue === 'desc' ? t('general:descending') : t('general:ascending')
+                  }), /*#__PURE__*/_jsx(ChevronIcon, {
+                    direction: active_0 ? 'up' : 'down',
+                    size: 16
+                  })]
+                }),
+                size: "small",
+                verticalAlign: "bottom"
+              })
+            })]
+          })]
+        })]
+      });
+    },
+    renderButton: ({
+      active: active_1,
+      onClick: onClick_1,
+      onKeyDown: onKeyDown_1,
+      ...ariaProps
+    }) => /*#__PURE__*/_jsx(Button, {
+      buttonStyle: "secondary",
+      className: `${baseClass}__trigger`,
+      extraButtonProps: {
+        onKeyDown: onKeyDown_1
+      },
+      icon: /*#__PURE__*/_jsx(ChevronIcon, {
+        direction: active_1 ? 'up' : 'down',
+        size: 16
+      }),
+      id: "toggle-group-by",
+      onClick: onClick_1,
+      selected: active_1 || isActive,
+      size: "medium",
+      ...ariaProps,
+      children: triggerLabel
+    }),
+    size: "large",
+    theme: "auto",
+    verticalAlign: "bottom"
+  });
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/GroupByControl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["isFieldDisabled","React","useCallback","useMemo","useRef","CheckIcon","ChevronIcon","TrashIcon","XIcon","useAuth","useListQuery","useTranslation","reduceFieldsToOptions","Button","Popup","PopupList","baseClass","supportedFieldTypes","GroupByControl","collectionSlug","fields","i18n","t","permissions","listQuery","closeRef","groupByRaw","query","groupBy","groupByFieldName","replace","fieldPermissions","collections","reducedFields","filteredFields","filter","field","fieldPath","includes","type","groupByField","find","isActive","Boolean","handleFieldSelect","value","refineListData","startsWith","page","handleClear","current","handleDirectionSelect","directionValue","triggerLabel","label","_jsx","className","horizontalAlign","portalClassName","render","close","_jsxs","buttonStyle","icon","onClick","round","size","closeFieldPopup","ButtonGroup","map","i","active","undefined","renderButton","onKeyDown","direction","verticalAlign","disabled","closeSortPopup","RadioGroup","RadioGroupItem","join","ariaProps","extraButtonProps","id","selected","theme"],"sources":["../../../src/elements/GroupByControl/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, Field, SanitizedCollectionConfig } from 'payload'\n\nimport { isFieldDisabled } from 'payload/shared'\nimport React, { useCallback, useMemo, useRef } from 'react'\n\nimport { CheckIcon } from '../../icons/Check/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { TrashIcon } from '../../icons/Trash/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { reduceFieldsToOptions } from '../../utilities/reduceFieldsToOptions.js'\nimport { Button } from '../Button/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.css'\n\nexport type GroupByControlProps = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n  readonly fields: ClientField[]\n}\n\nconst baseClass = 'group-by-control'\n\n/**\n * Supported field types for group by functionality.\n */\nconst supportedFieldTypes: Field['type'][] = [\n  'text',\n  'textarea',\n  'number',\n  'select',\n  'relationship',\n  'date',\n  'checkbox',\n  'radio',\n  'email',\n  'upload',\n]\n\nexport const GroupByControl: React.FC<GroupByControlProps> = ({ collectionSlug, fields }) => {\n  const { i18n, t } = useTranslation()\n  const { permissions } = useAuth()\n  const listQuery = useListQuery()\n  const closeRef = useRef<(() => void) | null>(null)\n\n  const groupByRaw = listQuery.query?.groupBy\n  const groupByFieldName = groupByRaw?.replace(/^-/, '')\n\n  const fieldPermissions = permissions?.collections?.[collectionSlug]?.fields\n\n  const reducedFields = useMemo(\n    () =>\n      reduceFieldsToOptions({\n        fieldPermissions,\n        fields,\n        i18n,\n      }),\n    [fields, fieldPermissions, i18n],\n  )\n\n  const filteredFields = useMemo(\n    () =>\n      reducedFields.filter(\n        (field) =>\n          !isFieldDisabled(field.field, 'groupBy') &&\n          field.fieldPath !== 'id' &&\n          supportedFieldTypes.includes(field.field.type),\n      ),\n    [reducedFields],\n  )\n\n  const groupByField = reducedFields.find((field) => field.fieldPath === groupByFieldName)\n  const isActive = Boolean(groupByFieldName && groupByField)\n\n  const handleFieldSelect = useCallback(\n    (value: string) => {\n      void (async () => {\n        if (typeof listQuery.refineListData !== 'function') {\n          return\n        }\n        await listQuery.refineListData({\n          groupBy: listQuery.query?.groupBy?.startsWith('-') ? `-${value}` : value,\n          page: 1,\n        })\n      })()\n    },\n    [listQuery],\n  )\n\n  const handleClear = useCallback(() => {\n    void (async () => {\n      if (typeof listQuery.refineListData === 'function') {\n        await listQuery.refineListData({ groupBy: '' })\n      }\n      closeRef.current?.()\n    })()\n  }, [listQuery])\n\n  const handleDirectionSelect = useCallback(\n    (value: 'asc' | 'desc') => {\n      void (async () => {\n        if (!groupByFieldName || typeof listQuery.refineListData !== 'function') {\n          return\n        }\n        await listQuery.refineListData({\n          groupBy: value === 'asc' ? groupByFieldName : `-${groupByFieldName}`,\n          page: 1,\n        })\n      })()\n    },\n    [groupByFieldName, listQuery],\n  )\n\n  const directionValue =\n    !groupByRaw || typeof groupByRaw !== 'string'\n      ? 'asc'\n      : groupByRaw.startsWith('-')\n        ? 'desc'\n        : 'asc'\n\n  // Build the trigger button label\n  const triggerLabel = isActive\n    ? t('general:groupByLabel', { label: groupByField?.label || '' })\n    : t('general:groupByLabel', { label: '' })\n\n  return (\n    <Popup\n      className={baseClass}\n      horizontalAlign=\"right\"\n      portalClassName={`${baseClass}__popup`}\n      render={({ close }) => {\n        closeRef.current = close\n        return (\n          <div className={`${baseClass}__content`}>\n            <div className={`${baseClass}__header`}>\n              <span className={`${baseClass}__title`}>\n                {t('general:groupByLabel', { label: '' })}\n              </span>\n              <div className={`${baseClass}__header-actions`}>\n                {isActive && (\n                  <Button\n                    aria-label={t('general:clear')}\n                    buttonStyle=\"ghost\"\n                    icon={<TrashIcon />}\n                    onClick={handleClear}\n                    round\n                    size=\"medium\"\n                  />\n                )}\n                <Button\n                  aria-label={t('general:close')}\n                  buttonStyle=\"ghost\"\n                  icon={<XIcon size={24} />}\n                  onClick={close}\n                  round\n                  size=\"medium\"\n                />\n              </div>\n            </div>\n            <div className={`${baseClass}__body`}>\n              <div className={`${baseClass}__row`}>\n                <label className={`${baseClass}__label`}>{t('general:field')}</label>\n                <div className={`${baseClass}__input`} data-popup-prevent-close>\n                  <Popup\n                    className={`${baseClass}__select-popup`}\n                    horizontalAlign=\"right\"\n                    render={({ close: closeFieldPopup }) => (\n                      <PopupList.ButtonGroup>\n                        {filteredFields.map((field, i) => (\n                          <PopupList.Button\n                            active={field.fieldPath === groupByFieldName}\n                            icon={\n                              field.fieldPath === groupByFieldName ? (\n                                <CheckIcon size={16} />\n                              ) : undefined\n                            }\n                            key={i}\n                            onClick={() => {\n                              handleFieldSelect(field.fieldPath)\n                              closeFieldPopup()\n                            }}\n                          >\n                            {field.label}\n                          </PopupList.Button>\n                        ))}\n                      </PopupList.ButtonGroup>\n                    )}\n                    renderButton={({ active, onClick, onKeyDown }) => (\n                      <button\n                        className={`${baseClass}__select-trigger`}\n                        onClick={onClick}\n                        onKeyDown={onKeyDown}\n                        type=\"button\"\n                      >\n                        <span className={`${baseClass}__select-value`}>\n                          {groupByField?.label || t('general:selectValue')}\n                        </span>\n                        <ChevronIcon direction={active ? 'up' : 'down'} size={16} />\n                      </button>\n                    )}\n                    size=\"medium\"\n                    verticalAlign=\"bottom\"\n                  />\n                </div>\n              </div>\n              <div className={`${baseClass}__row`}>\n                <label className={`${baseClass}__label`}>{t('general:sort')}</label>\n                <div className={`${baseClass}__input`} data-popup-prevent-close>\n                  <Popup\n                    className={`${baseClass}__select-popup`}\n                    disabled={!groupByFieldName}\n                    horizontalAlign=\"right\"\n                    render={({ close: closeSortPopup }) => (\n                      <PopupList.RadioGroup>\n                        <PopupList.RadioGroupItem\n                          active={directionValue === 'desc'}\n                          onClick={() => {\n                            handleDirectionSelect('desc')\n                            closeSortPopup()\n                          }}\n                        >\n                          {t('general:descending')}\n                        </PopupList.RadioGroupItem>\n                        <PopupList.RadioGroupItem\n                          active={directionValue === 'asc'}\n                          onClick={() => {\n                            handleDirectionSelect('asc')\n                            closeSortPopup()\n                          }}\n                        >\n                          {t('general:ascending')}\n                        </PopupList.RadioGroupItem>\n                      </PopupList.RadioGroup>\n                    )}\n                    renderButton={({ active, onClick, onKeyDown }) => (\n                      <button\n                        className={[\n                          `${baseClass}__select-trigger`,\n                          !groupByFieldName && `${baseClass}__select-trigger--disabled`,\n                        ]\n                          .filter(Boolean)\n                          .join(' ')}\n                        disabled={!groupByFieldName}\n                        onClick={onClick}\n                        onKeyDown={onKeyDown}\n                        type=\"button\"\n                      >\n                        <span className={`${baseClass}__select-value`}>\n                          {directionValue === 'desc'\n                            ? t('general:descending')\n                            : t('general:ascending')}\n                        </span>\n                        <ChevronIcon direction={active ? 'up' : 'down'} size={16} />\n                      </button>\n                    )}\n                    size=\"small\"\n                    verticalAlign=\"bottom\"\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n        )\n      }}\n      renderButton={({ active, onClick, onKeyDown, ...ariaProps }) => (\n        <Button\n          buttonStyle=\"secondary\"\n          className={`${baseClass}__trigger`}\n          extraButtonProps={{ onKeyDown }}\n          icon={<ChevronIcon direction={active ? 'up' : 'down'} size={16} />}\n          id=\"toggle-group-by\"\n          onClick={onClick}\n          selected={active || isActive}\n          size=\"medium\"\n          {...ariaProps}\n        >\n          {triggerLabel}\n        </Button>\n      )}\n      size=\"large\"\n      theme=\"auto\"\n      verticalAlign=\"bottom\"\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Gutter/index.css

@@ -0,0 +1,17 @@
+@layer payload-default {
+  .gutter--left {
+    padding-left: var(--gutter-h);
+  }
+
+  .gutter--right {
+    padding-right: var(--gutter-h);
+  }
+
+  .gutter--negative-left {
+    margin-left: calc(-1 * var(--gutter-h));
+  }
+
+  .gutter--negative-right {
+    margin-right: calc(-1 * var(--gutter-h));
+  }
+}

package/dist/elements/Gutter/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export type GutterProps = {
     children: React.ReactNode;
     className?: string;

package/dist/elements/Gutter/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Gutter/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IACrC,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAID,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+BxC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Gutter/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IACrC,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAID,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+BxC,CAAA"}

package/dist/elements/Gutter/index.js

@@ -2,7 +2,7 @@
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import './index.scss';
+import './index.css';
 const baseClass = 'gutter';
 export const Gutter = props => {
   const {

package/dist/elements/Gutter/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","baseClass","Gutter","props","children","className","left","negativeLeft","negativeRight","ref","right","shouldPadLeft","shouldPadRight","_jsx","filter","Boolean","join"],"sources":["../../../src/elements/Gutter/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nexport type GutterProps = {\n  children: React.ReactNode\n  className?: string\n  left?: boolean\n  negativeLeft?: boolean\n  negativeRight?: boolean\n  ref?: React.RefObject<HTMLDivElement>\n  right?: boolean\n}\n\nconst baseClass = 'gutter'\n\nexport const Gutter: React.FC<GutterProps> = (props) => {\n  const {\n    children,\n    className,\n    left = true,\n    negativeLeft = false,\n    negativeRight = false,\n    ref,\n    right = true,\n  } = props\n\n  const shouldPadLeft = left && !negativeLeft\n  const shouldPadRight = right && !negativeRight\n\n  return (\n    <div\n      className={[\n        baseClass,\n        shouldPadLeft && `${baseClass}--left`,\n        shouldPadRight && `${baseClass}--right`,\n        negativeLeft && `${baseClass}--negative-left`,\n        negativeRight && `${baseClass}--negative-right`,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      ref={ref}\n    >\n      {children}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAYP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,MAAA,GAAiCC,KAAA;EAC5C,MAAM;IACJC,QAAQ;IACRC,SAAS;IACTC,IAAA,GAAO,IAAI;IACXC,YAAA,GAAe,KAAK;IACpBC,aAAA,GAAgB,KAAK;IACrBC,GAAG;IACHC,KAAA,GAAQ;EAAI,CACb,GAAGP,KAAA;EAEJ,MAAMQ,aAAA,GAAgBL,IAAA,IAAQ,CAACC,YAAA;EAC/B,MAAMK,cAAA,GAAiBF,KAAA,IAAS,CAACF,aAAA;EAEjC,oBACEK,IAAA,CAAC;IACCR,SAAA,EAAW,CACTJ,SAAA,EACAU,aAAA,IAAiB,GAAGV,SAAA,QAAiB,EACrCW,cAAA,IAAkB,GAAGX,SAAA,SAAkB,EACvCM,YAAA,IAAgB,GAAGN,SAAA,iBAA0B,EAC7CO,aAAA,IAAiB,GAAGP,SAAA,kBAA2B,EAC/CI,SAAA,CACD,CACES,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;IACRP,GAAA,EAAKA,GAAA;cAEJL;;AAGP","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","baseClass","Gutter","props","children","className","left","negativeLeft","negativeRight","ref","right","shouldPadLeft","shouldPadRight","_jsx","filter","Boolean","join"],"sources":["../../../src/elements/Gutter/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.css'\n\nexport type GutterProps = {\n  children: React.ReactNode\n  className?: string\n  left?: boolean\n  negativeLeft?: boolean\n  negativeRight?: boolean\n  ref?: React.RefObject<HTMLDivElement>\n  right?: boolean\n}\n\nconst baseClass = 'gutter'\n\nexport const Gutter: React.FC<GutterProps> = (props) => {\n  const {\n    children,\n    className,\n    left = true,\n    negativeLeft = false,\n    negativeRight = false,\n    ref,\n    right = true,\n  } = props\n\n  const shouldPadLeft = left && !negativeLeft\n  const shouldPadRight = right && !negativeRight\n\n  return (\n    <div\n      className={[\n        baseClass,\n        shouldPadLeft && `${baseClass}--left`,\n        shouldPadRight && `${baseClass}--right`,\n        negativeLeft && `${baseClass}--negative-left`,\n        negativeRight && `${baseClass}--negative-right`,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      ref={ref}\n    >\n      {children}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAYP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,MAAA,GAAiCC,KAAA;EAC5C,MAAM;IACJC,QAAQ;IACRC,SAAS;IACTC,IAAA,GAAO,IAAI;IACXC,YAAA,GAAe,KAAK;IACpBC,aAAA,GAAgB,KAAK;IACrBC,GAAG;IACHC,KAAA,GAAQ;EAAI,CACb,GAAGP,KAAA;EAEJ,MAAMQ,aAAA,GAAgBL,IAAA,IAAQ,CAACC,YAAA;EAC/B,MAAMK,cAAA,GAAiBF,KAAA,IAAS,CAACF,aAAA;EAEjC,oBACEK,IAAA,CAAC;IACCR,SAAA,EAAW,CACTJ,SAAA,EACAU,aAAA,IAAiB,GAAGV,SAAA,QAAiB,EACrCW,cAAA,IAAkB,GAAGX,SAAA,SAAkB,EACvCM,YAAA,IAAgB,GAAGN,SAAA,iBAA0B,EAC7CO,aAAA,IAAiB,GAAGP,SAAA,kBAA2B,EAC/CI,SAAA,CACD,CACES,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;IACRP,GAAA,EAAKA,GAAA;cAEJL;;AAGP","ignoreList":[]}

package/dist/elements/HTMLDiff/colors.css

@@ -0,0 +1,17 @@
+@layer payload-default {
+  :root {
+    --diff-delete-pill-bg: var(--color-bg-danger-tertiary-hover);
+    --diff-delete-pill-color: var(--color-text-danger);
+    --diff-delete-pill-border: var(--color-border-danger);
+    --diff-delete-parent-bg: var(--color-bg-danger-tertiary);
+    --diff-delete-parent-color: var(--color-text-danger);
+    --diff-delete-link-color: var(--color-text-danger);
+
+    --diff-create-pill-bg: var(--color-bg-brand-tertiary-hover);
+    --diff-create-pill-color: var(--color-text-brand);
+    --diff-create-pill-border: var(--color-border-brand);
+    --diff-create-parent-bg: var(--color-bg-brand-tertiary);
+    --diff-create-parent-color: var(--color-text-brand);
+    --diff-create-link-color: var(--color-text-brand);
+  }
+}

package/dist/elements/HTMLDiff/index.css

@@ -0,0 +1,170 @@
+@layer payload-default {
+  .html-diff {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-3);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+  }
+
+  .html-diff-no-value {
+    color: var(--color-text-tertiary);
+  }
+
+  .html-diff p {
+    margin: 0;
+    align-content: center;
+  }
+
+  .html-diff pre {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  /* Apply background color to the whole field when it has diffs */
+  .html-diff:has([data-match-type='create']) {
+    background-color: var(--diff-create-parent-bg);
+    margin-block: calc(var(--spacer-2) * -1);
+    padding-block: var(--spacer-2);
+  }
+
+  .html-diff:has([data-match-type='delete']) {
+    background-color: var(--diff-delete-parent-bg);
+    margin-block: calc(var(--spacer-2) * -1);
+    padding-block: var(--spacer-2);
+  }
+
+  .html-diff li::marker {
+    color: var(--color-text);
+  }
+
+  .html-diff li:has(> [data-match-type='create'])::marker {
+    color: var(--diff-create-pill-color);
+  }
+
+  .html-diff li:has(> [data-match-type='delete'])::marker {
+    color: var(--diff-delete-pill-color);
+  }
+
+  .html-diff
+    [data-match-type='delete']:not([data-enable-match='false']):not(
+      :is([data-enable-match='false'] *)
+    ) {
+    color: var(--diff-delete-pill-color);
+    text-decoration-color: var(--diff-delete-pill-color);
+    text-decoration-line: line-through;
+    background-color: var(--diff-delete-pill-bg);
+    border-radius: var(--radius-medium);
+    padding: calc(var(--stroke-width-small) * 1) calc(var(--stroke-width-small) * 2);
+    text-decoration-thickness: var(--stroke-width-small);
+    vertical-align: baseline;
+  }
+
+  .html-diff
+    a[data-match-type='delete']:not([data-enable-match='false']):not(
+      :is([data-enable-match='false'] *)
+    ) {
+    color: var(--diff-delete-link-color);
+  }
+
+  .html-diff
+    a[data-match-type='create']:not([data-enable-match='false']):not(
+      :is([data-enable-match='false'] *)
+    ) {
+    color: var(--diff-create-link-color);
+  }
+
+  .html-diff
+    [data-match-type='create']:not(img):not([data-enable-match='false']):not(
+      :is([data-enable-match='false'] *)
+    ) {
+    background-color: var(--diff-create-pill-bg);
+    color: var(--diff-create-pill-color);
+    border-radius: var(--radius-medium);
+    padding: calc(var(--stroke-width-small) * 1) calc(var(--stroke-width-small) * 2);
+    vertical-align: baseline;
+  }
+
+  .html-diff-create-inline-wrapper,
+  .html-diff-delete-inline-wrapper {
+    display: inline-flex;
+  }
+
+  .html-diff-create-block-wrapper,
+  .html-diff-delete-block-wrapper {
+    display: flex;
+  }
+
+  .html-diff-create-inline-wrapper,
+  .html-diff-delete-inline-wrapper,
+  .html-diff-create-block-wrapper,
+  .html-diff-delete-block-wrapper {
+    position: relative;
+    align-items: center;
+    flex-direction: row;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      width: 100%;
+      height: 100%;
+      content: '';
+    }
+  }
+
+  @media (max-width: 768px) {
+    .html-diff:has([data-match-type='create']),
+    .html-diff:has([data-match-type='delete']) {
+      margin-block: 0;
+      padding-block: 0;
+      background-color: transparent;
+    }
+
+    .html-diff {
+      justify-content: center;
+    }
+
+    .html-diff p {
+      align-content: center;
+    }
+
+    .html-diff p:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff h1:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff h2:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff h3:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff h4:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff h5:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff h6:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff blockquote:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff pre:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff p:not([data-enable-match='false']):has([data-match-type='delete']),
+    .html-diff h1:not([data-enable-match='false']):has([data-match-type='delete']),
+    .html-diff h2:not([data-enable-match='false']):has([data-match-type='delete']),
+    .html-diff h3:not([data-enable-match='false']):has([data-match-type='delete']),
+    .html-diff h4:not([data-enable-match='false']):has([data-match-type='delete']),
+    .html-diff h5:not([data-enable-match='false']):has([data-match-type='delete']),
+    .html-diff h6:not([data-enable-match='false']):has([data-match-type='delete']),
+    .html-diff blockquote:not([data-enable-match='false']):has([data-match-type='delete']),
+    .html-diff pre:not([data-enable-match='false']):has([data-match-type='delete']) {
+      &::before {
+        top: calc(var(--spacer-1) * -1);
+        bottom: calc(var(--spacer-1) * -1);
+        left: calc(var(--spacer-2) * -1);
+        right: calc(var(--spacer-2) * -1);
+      }
+    }
+
+    .html-diff li:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff li:not([data-enable-match='false']):has([data-match-type='delete']) {
+      &::before {
+        left: calc(var(--spacer-2) * -1);
+        right: calc(var(--spacer-2) * -1);
+      }
+    }
+  }
+}

package/dist/elements/HTMLDiff/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import './index.scss';
+import './colors.css';
+import './index.css';
 export { escapeDiffHTML, unescapeDiffHTML } from './escapeHtml.js';
 export declare const getHTMLDiffComponents: ({ fromHTML, postProcess, toHTML, tokenizeByCharacter, }: {
     fromHTML: string;