@zohodesk/library-platform 1.0.2-exp.1.1 → 1.0.2-exp.1.2

package/es/library/custom-component/frameworks/ui/CreateSlotComponent.js

@@ -1,26 +1,81 @@
-import React from "react";
+import React, { Children } from "react";
 import ComponentRegistry from "./ComponentRegistry";
-export default function createSlotComponent(slotShape) {
-  let {
-    elements
-  } = slotShape;
-  let finalElements = elements.map(element => {
-    let {
-      type,
-      styles = {},
-      slots = [],
-      properties = {}
-    } = element;
-    let View = ComponentRegistry.get(type);
-
-    if (View) {
-      return /*#__PURE__*/React.createElement(View, { ...properties,
-        styles: styles,
-        slots: slots
-      });
+export function generateSlotChildren() {
+  let slots = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let children = arguments.length > 1 ? arguments[1] : undefined;
+  let slotChildren = {},
+      slotChildrenMap = {};
+  Children.forEach(children, child => {
+    if (typeof child.type === "function" && child.props && child.props.slotName) {
+      const {
+        slotName
+      } = child.props;
+      const displayName = child.type.displayName;
+      slotChildrenMap[slotName] = slotChildrenMap[slotName] || {};
+      slotChildrenMap[slotName][displayName] = {
+        props: child.props,
+        type: child.type
+      };
     }
+  });
+  slots.map(slot => {
+    const {
+      name,
+      elements
+    } = slot;
+    slotChildren[name] = [];
+    elements.map((element, index) => {
+      const {
+        type,
+        name: elementName,
+        styles,
+        slots,
+        properties = {}
+      } = element;
+      const {
+        props: childProps = {},
+        type: ChildType
+      } = (slotChildrenMap[name] || {})[`Custom(${elementName})`] || {};
+      let View = ComponentRegistry.get(type) || ChildType;
+      let finalisedProps = { ...properties,
+        ...childProps
+      };
+
+      if (styles) {
+        finalisedProps.styles = styles;
+      }
+
+      if (slots) {
+        finalisedProps.slots = slots;
+      }
 
-    return null;
+      if (View) {
+        slotChildren[name].push( /*#__PURE__*/React.createElement(View, { ...finalisedProps,
+          key: `${name}_${elementName}_${index}`
+        }, childProps.children));
+      }
+    });
   });
-  return finalElements;
-}
+  return slotChildren;
+}
+/*export default function createSlotComponent(slotShape: Slot, children: any): any {
+    let {elements} = slotShape;
+    let finalElements = elements.map((element) => {
+        let {
+            type,
+            styles = {},
+            slots = [],
+            properties={}
+        } = element;
+        let View = ComponentRegistry.get(type);
+        if(View) {
+            return (<View 
+                {...properties} 
+                styles={styles}
+                slots={slots}  
+            />)
+        }
+        return null
+    });
+    return finalElements
+}*/

package/es/library/dot/components/action-location/frameworks/ui/ActionComponentMapping.js

@@ -1,7 +1,7 @@
-import ActionIcon, { Button, FilterDropdown } from "../../../../legacy-to-new-arch/action-icon/frameworks/ui/ActionIcon";
+import ActionIcon from "../../../../legacy-to-new-arch/action-icon/frameworks/ui/ActionIcon";
+import TableColumnSort from "../../../../legacy-to-new-arch/table-column-sort/frameworks/ui/TableColumnSort";
 const ActionComponentMapping = {
-  'ActionIcon': ActionIcon,
-  'Button': Button,
-  'TableFilterDropdown': FilterDropdown
+  ['ActionIcon']: ActionIcon,
+  ['TableColumnSort']: TableColumnSort
 };
 export default ActionComponentMapping;

package/es/library/dot/components/table-list/adapters/presenters/TableTranslator.js

@@ -1,15 +1,11 @@
 class TableTranslator {
   static translate(state) {
-    var _state;
-
     const {
       data,
       selectionConfig,
-      selection
-    } = state.properties;
-    const {
+      selection,
       sortBy
-    } = (_state = state) === null || _state === void 0 ? void 0 : _state.behaviours;
+    } = state.properties;
     const headers = TableTranslator.translateHeaders(data.headers, sortBy);
     const rows = TableTranslator.translateRows(data.rows, selection, selectionConfig);
     state = { ...state,
@@ -25,10 +21,9 @@ class TableTranslator {
 
   static translateHeaders(headers, sortBy) {
     return headers.map(header => {
-      const sortOrder = (sortBy === null || sortBy === void 0 ? void 0 : sortBy.id) === header.id ? sortBy === null || sortBy === void 0 ? void 0 : sortBy.order : 'none';
+      const sortOrder = (sortBy === null || sortBy === void 0 ? void 0 : sortBy.name) === header.name ? sortBy === null || sortBy === void 0 ? void 0 : sortBy.order : 'none';
       return { ...header,
-        sortOrder,
-        sortTooltip: sortOrder === 'none' ? '' : sortOrder === 'ascending' ? 'Click to Sort Descending' : 'Click to Sort Ascending'
+        sortOrder
       };
     });
   }

package/es/library/dot/components/table-list/frameworks/ui/EventHandlersFactory.js

@@ -1,7 +1,6 @@
 import { TableListConstants } from "../../../../../../cc/table-list";
-import { SelectItemController, SelectAllController, ScrollController, FieldChangeController, FieldClickController, SortByController, SortedController } from "../../adapters/controllers";
+import { SelectItemController, SelectAllController, ScrollController, FieldChangeController, FieldClickController, SortByController } from "../../adapters/controllers";
 import TableRowConstants from "../../../../../../cc/table-list/row/Constants";
-import { SORTBY_SORTED } from "../../../../../../bc/sort-by/Constants";
 import RowClickController from "../../adapters/controllers/RowClickController";
 
 class EventHandlersFactory {
@@ -12,7 +11,6 @@ class EventHandlersFactory {
       [TableListConstants.TABLE_LIST_TOGGLE_ALL_SELECTION]: new SelectAllController().handle,
       [TableListConstants.TABLE_LIST_SCROLLED]: new ScrollController().handle,
       [TableListConstants.TABLE_LIST_SORTED]: new SortByController().handle,
-      [SORTBY_SORTED]: new SortedController().handle,
       [TableRowConstants.TABLE_ROW_FIELD_CHANGED]: new FieldChangeController().handle,
       [TableRowConstants.TABLE_ROW_FIELD_CLICKED]: new FieldClickController().handle
     };

package/es/library/dot/components/table-list/frameworks/ui/TableList.js

@@ -3,7 +3,6 @@ import { createCustomComponent } from "../../../../../custom-component";
 import TableTranslator from "../../adapters/presenters/TableTranslator";
 import TableListView from "./TableListView";
 import EventHandlersFactory from "./EventHandlersFactory";
-import SortByBehaviourFactory from "../../../../../behaviours/sort-by/frameworks/ui/SortByBehaviourFactory";
 const TableList = createCustomComponent({
   name: 'TableList',
   View: TableListView,
@@ -11,6 +10,6 @@ const TableList = createCustomComponent({
   setInitialState: () => ({}),
   transformState: TableTranslator.translate,
   eventHandlers: EventHandlersFactory.create(),
-  behaviours: [SortByBehaviourFactory.create()]
+  behaviours: []
 });
 export default TableList;

package/es/library/dot/components/table-list/frameworks/ui/TableListView.js

@@ -4,6 +4,7 @@ import Header from "./sub-components/Header";
 import Body from "./sub-components/Body";
 import Rows from "./sub-components/Rows";
 import NoData from "./sub-components/NoData";
+import ErrorState from "./sub-components/ErrorState";
 import Loading from "./sub-components/Loading";
 import ColumnResizingLine from "./sub-components/ColumnResizingLine";
 import handleScroll from "./handlers/HandleScroll"; // @ts-ignore
@@ -27,7 +28,8 @@ function TableListView(_ref2, _ref) {
     rowCursor,
     rowActionsConfig,
     selection,
-    emptyStateUiType
+    emptyStateUiType,
+    isError
   } = state.properties;
   const {
     headers,
@@ -39,7 +41,7 @@ function TableListView(_ref2, _ref) {
   } = rowActionsConfig;
   const hasRows = rows.length > 0; // TODO: derive from state.properties
 
-  const isDataEmpty = !hasRows && !isLoading; // TODO: derive from state.properties
+  const isDataEmpty = !hasRows && !isLoading && !isError; // TODO: derive from state.properties
 
   return /*#__PURE__*/React.createElement("div", {
     className: style.wrapper,
@@ -69,6 +71,8 @@ function TableListView(_ref2, _ref) {
   }), /*#__PURE__*/React.createElement(NoData, {
     isDataEmpty: isDataEmpty,
     emptyStateUiType: emptyStateUiType
+  }), /*#__PURE__*/React.createElement(ErrorState, {
+    isError: isError
   }), /*#__PURE__*/React.createElement(Loading, {
     isLoading: isLoading,
     hasRows: hasRows

package/es/library/dot/components/table-list/frameworks/ui/css/TableList.module.css

@@ -25,6 +25,9 @@
 .emptyContent {
     padding: var(--zd_size160) 0 var(--zd_size60) 
 }
+.errorContent {
+    padding: var(--zd_size60) 0 
+}
 .actions {
     gap: var(--zd_size8) 
 }

package/es/library/dot/components/table-list/frameworks/ui/sub-components/ErrorState.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import ErrorOopsSomethingMiss from '@zohodesk/dot/lib/version2/errorstate/OopsSomethingMiss/OopsSomethingMiss'; // import RequestUrlNotFound from '@zohodesk/dot/lib/version2/errorstate/UrlNotFound/UrlNotFound';
+// import UnableToProcess from '@zohodesk/dot/lib/version2/errorstate/UnableToProcessRequest/UnableToProcessRequest';
+// import Inconvenience from '@zohodesk/dot/lib/version2/errorstate/Inconvenience/Inconvenience';
+
+/* @ts-ignore */
+
+import style from "../css/TableList.module.css";
+export default function ErrorState(_ref) {
+  let {
+    isError
+  } = _ref;
+
+  if (isError) {
+    return /*#__PURE__*/React.createElement(Flex, {
+      $ui_displayMode: "flex",
+      $ui_alignItems: "center",
+      $ui_justifyContent: "center",
+      $ui_className: `${style.contentWrapper} ${style.errorContent}`
+    }, /*#__PURE__*/React.createElement(ErrorOopsSomethingMiss, {
+      title: "Oops! Something is missing",
+      description: "We are unable to process your request. Please try again later."
+    }));
+  }
+
+  return null;
+}

package/es/library/dot/components/table-list/frameworks/ui/sub-components/header/HeaderData.js

@@ -1,16 +1,15 @@
 import React from 'react';
 import TableHead from '@zohodesk-private/desk-components/es/table/TableHead/TableHead';
+import TableHeading from '@zohodesk-private/desk-components/es/table/TableHeading/TableHeading';
 import { AlignmentOfFlex } from "../../../../../../../../cc/table-list/data-types/Header";
 import ActionEventMediator from "../../../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
 import { ActionViewGap } from "../../../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
-import HeaderText from "./HeaderText";
 import ColumnResizer from "./ColumnResizer";
 
 function HeaderData(_ref) {
   let {
     header,
     sortedBy,
-    sortTooltip,
     isResizing,
     isResizerEnabled,
     isFlexibleColumns,
@@ -41,14 +40,8 @@ function HeaderData(_ref) {
         $ui_alignItems: 'center',
         $ui_justifyContent: AlignmentOfFlex[alignment]
       } : null
-    }, /*#__PURE__*/React.createElement(HeaderText, {
-      id: id,
-      name: name,
-      text: text,
-      sortable: sortable,
-      sortedBy: sortedBy,
-      sortTooltip: sortTooltip,
-      dispatch: dispatch
+    }, /*#__PURE__*/React.createElement(TableHeading, {
+      $i18n_text: text
     }), hasActions ? /*#__PURE__*/React.createElement(ActionEventMediator, {
       actions: actions,
       gap: ActionViewGap.SMALL

package/es/library/dot/components/table-list/frameworks/ui/sub-components/header/Headers.js

@@ -11,8 +11,7 @@ function Headers(_ref) {
   } = _ref;
   return headers.map((header, index) => {
     const {
-      sortOrder,
-      sortTooltip
+      sortOrder
     } = header;
     let isResizing = currentlyResizingColumn === header.id; // TODO: To be adopted with properties
 
@@ -20,7 +19,6 @@ function Headers(_ref) {
       key: index,
       header: header,
       sortedBy: sortOrder,
-      sortTooltip: sortTooltip,
       isResizing: isResizing,
       isResizerEnabled: isResizerEnabled,
       isFlexibleColumns: isFlexibleColumns,

package/es/library/dot/legacy-to-new-arch/action-icon/frameworks/ui/ActionIcon.js

@@ -1,27 +1,11 @@
 import { createCustomComponent } from "../../../../../custom-component";
-import Properties from "../../../../../../cc/action-icon/Properties";
-import ActionIconView, { ButtonView, FilterDropdownView } from "./ActionIconView";
+import { ActionIconProperties } from "../../../../../../cc/action-icon";
+import ActionIconView from "./ActionIconView";
 const ActionIcon = createCustomComponent({
   name: 'ActionIcon',
   View: ActionIconView,
-  properties: Properties,
+  properties: ActionIconProperties,
   events: [],
   eventHandlers: {}
 });
-export default ActionIcon; // NOTE: This is a sample of Button action component
-
-export const Button = createCustomComponent({
-  name: 'Button',
-  View: ButtonView,
-  properties: Properties,
-  events: [],
-  eventHandlers: {}
-}); // NOTE: This is a sample of FilterDropdown action component
-
-export const FilterDropdown = createCustomComponent({
-  name: 'FilterDropdown',
-  View: FilterDropdownView,
-  properties: Properties,
-  events: [],
-  eventHandlers: {}
-});
+export default ActionIcon;

package/es/library/dot/legacy-to-new-arch/action-icon/frameworks/ui/ActionIconView.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import ActionIcon from '@zohodesk-private/desk-components/es/ActionIcon/ActionIcon';
-import Constants from "../../../../../../cc/action-icon/Constants"; // @ts-ignore
-
-import style from "./css/ActionIcon.module.css";
+import Constants from "../../../../../../cc/action-icon/Constants";
 export default function ActionIconView(_ref, ref) {
   let {
     state,
@@ -12,16 +10,13 @@ export default function ActionIconView(_ref, ref) {
     icon,
     label,
     hoverVariant,
-    isDisabled,
-    isVisible
+    isDisabled
   } = state.properties;
   const {
     dispatch
   } = helpers;
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement(ActionIcon, {
     ref: ref,
-    className: isVisible ? '' : style.hide
-  }, /*#__PURE__*/React.createElement(ActionIcon, {
     $ui_iconName: icon,
     $ui_hoverVariant: hoverVariant,
     $flag_disabled: isDisabled,
@@ -31,80 +26,5 @@ export default function ActionIconView(_ref, ref) {
         type: Constants.ACTION_ICON_CLICKED
       });
     } : null
-  }));
-} // NOTE: This is a sample of Button action component
-
-export function ButtonView(_ref2, ref) {
-  let {
-    state,
-    helpers
-  } = _ref2;
-  const {
-    dispatch
-  } = helpers;
-  const {
-    sourceEvent,
-    payload
-  } = state.properties.appendToActionPayload.eventMappings[0];
-  const {
-    value
-  } = payload;
-  return /*#__PURE__*/React.createElement("span", {
-    "data-title": value,
-    onClick: () => dispatch({
-      type: sourceEvent
-    }),
-    ref: ref
-  }, value);
-  return /*#__PURE__*/React.createElement("button", {
-    ref: ref,
-    onClick: () => {
-      dispatch({
-        type: sourceEvent
-      });
-    }
-  }, value);
-} // NOTE: This is a sample of FilterDropdown action component
-
-export function FilterDropdownView(_ref3, ref) {
-  let {
-    state,
-    helpers
-  } = _ref3;
-  const {
-    dispatch
-  } = helpers;
-  const {
-    options,
-    isMultiselectable
-  } = state.properties;
-  const {
-    sourceEvent,
-    payload
-  } = state.properties.appendToActionPayload.eventMappings[0];
-  const {
-    fieldName: value
-  } = payload;
-  return /*#__PURE__*/React.createElement("span", {
-    "data-title": value,
-    onClick: () => dispatch({
-      type: sourceEvent
-    }),
-    ref: ref
-  }, value);
-  return /*#__PURE__*/React.createElement("select", {
-    "data-title": '',
-    ref: ref,
-    onChange: e => dispatch({
-      type: sourceEvent,
-      payload: {
-        sourcePayload: {
-          selectedValue: e.target.value
-        }
-      }
-    })
-  }, options.map((option, index) => /*#__PURE__*/React.createElement("option", {
-    key: index,
-    value: option.value
-  }, option.label)));
+  });
 }

package/es/library/dot/legacy-to-new-arch/table-column-sort/frameworks/ui/TableColumnSort.js

@@ -0,0 +1,11 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import { TableColumnSortProperties } from "../../../../../../cc/table-column-sort";
+import TableColumnSortView from "./TableColumnSortView";
+const TableColumnSort = createCustomComponent({
+  name: 'TableColumnSort',
+  View: TableColumnSortView,
+  properties: TableColumnSortProperties,
+  events: [],
+  eventHandlers: {}
+});
+export default TableColumnSort;

package/es/library/dot/legacy-to-new-arch/table-column-sort/frameworks/ui/TableColumnSortView.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import SortDropdown from '@zohodesk-private/desk-components/es/table/SortDropdown/SortDropdown';
+import { TableColumnSortConstants } from "../../../../../../cc/table-column-sort"; // @ts-ignore
+
+import style from "./css/TableColumnSort.module.css";
+
+function TableColumnSortView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  let {
+    dispatch
+  } = helpers;
+  let {
+    value,
+    ascendingLabel,
+    descendingLabel
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(SortDropdown, {
+    selectedValue: value,
+    ascendingLabel: ascendingLabel,
+    descendingLabel: descendingLabel,
+    onSort: _ref2 => {
+      let {
+        value
+      } = _ref2;
+      return dispatch({
+        type: TableColumnSortConstants.SORT_CLICKED,
+        payload: {
+          value
+        }
+      });
+    },
+    customStyle: {
+      parentContainer: `${style.parentContainer} ${value !== 'none' ? style.active : ''}`
+    },
+    customAttributes_container: {
+      ref
+    }
+  });
+}
+
+export default TableColumnSortView;

package/es/library/dot/legacy-to-new-arch/table-column-sort/frameworks/ui/css/TableColumnSort.module.css

@@ -0,0 +1,10 @@
+.parentContainer {
+  visibility: hidden;
+  opacity: 0;
+}
+
+:global(.GLOBAL_ZDDC_tableHead:hover) .parentContainer,
+.active {
+  visibility: visible;
+  opacity: 1;
+}

package/es/library/dot/legacy-to-new-arch/table-field-components/coloured-multiselect-field/frameworks/ui/ColouredMultiSelectField.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../../custom-component";
+import ColouredMultiSelectProperties from "../../../../../../../cc/fields/coloured-multi-select/Properties";
+import ColouredMultiSelectEvents from "../../../../../../../cc/fields/coloured-multi-select/Events";
+import { ColouredMultiSelectFieldView } from "./ColouredMultiSelectFieldView";
+const ColouredMultiSelectField = createCustomComponent({
+  name: 'ColouredMultiSelectField',
+  View: ColouredMultiSelectFieldView,
+  properties: ColouredMultiSelectProperties,
+  events: ColouredMultiSelectEvents,
+  eventHandlers: {}
+});
+export default ColouredMultiSelectField;

package/es/library/dot/legacy-to-new-arch/table-field-components/coloured-multiselect-field/frameworks/ui/ColouredMultiSelectFieldView.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Tags } from "../../../..";
+export function ColouredMultiSelectFieldView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    value,
+    options
+  } = state.properties;
+  const selectedOptions = value.map(item => {
+    const option = options.find(opt => opt.value === item);
+    return {
+      id: option.value,
+      label: option.value,
+      color: option.colorCode
+    };
+  });
+  return /*#__PURE__*/React.createElement(Tags, {
+    getRef: ref,
+    tags: selectedOptions
+  });
+}

package/es/library/dot/legacy-to-new-arch/table-field-components/coloured-picklist-field/frameworks/ui/ColouredPickListField.js

@@ -0,0 +1,14 @@
+import { createCustomComponent } from "../../../../../../custom-component";
+import ColouredPickListProperties from "../../../../../../../cc/fields/coloured-pick-list/Properties";
+import ColouredPickListEvents from "../../../../../../../cc/fields/coloured-pick-list/Events";
+import TextToFieldClickBehaviourFactory from "../../../../../../behaviours/text-to-field-click/frameworks/ui/TextToFieldClickBehaviourFactory";
+import { ColouredPickListFieldView } from "./ColouredPickListFieldView";
+const ColouredPickListField = createCustomComponent({
+  name: 'ColouredPickListField',
+  View: ColouredPickListFieldView,
+  properties: ColouredPickListProperties,
+  behaviours: [TextToFieldClickBehaviourFactory.create()],
+  events: ColouredPickListEvents,
+  eventHandlers: {}
+});
+export default ColouredPickListField;

package/es/library/dot/legacy-to-new-arch/table-field-components/coloured-picklist-field/frameworks/ui/ColouredPickListFieldView.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import ColoredTag from '@zohodesk-private/desk-components/es/ColoredTag/ColoredTag';
+import { TagsConstants } from "../../../../../../../cc/tags";
+export function ColouredPickListFieldView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  let {
+    dispatch
+  } = helpers;
+  const {
+    value,
+    options
+  } = state.properties;
+  const selectedOption = options.find(option => option.value === value);
+  return /*#__PURE__*/React.createElement(ColoredTag, {
+    $data_id: value,
+    $data_text: value,
+    $data_color: selectedOption.colorCode || '',
+    $event_onClick: id => {
+      dispatch({
+        type: TagsConstants.TAG_CLICKED,
+        payload: {
+          id
+        }
+      });
+    },
+    $customProps_tag: {
+      getRef: ref
+    }
+  });
+}

package/es/library/dot/legacy-to-new-arch/table-field-components/index.js

@@ -8,6 +8,8 @@ import PhoneField from "./phone-field/frameworks/ui/PhoneField";
 import CurrencyField from "./currency-field/frameworks/ui/CurrencyField";
 import LookUpField from "./lookup-field/frameworks/ui/LookupField";
 import PickListField from "./picklist-field/frameworks/ui/PickListField";
+import ColouredPickListField from "./coloured-picklist-field/frameworks/ui/ColouredPickListField";
+import ColouredMultiSelectField from "./coloured-multiselect-field/frameworks/ui/ColouredMultiSelectField";
 import PercentageField from "./percentage-field/frameworks/ui/PercentageField";
 import DateField from "./date-field/frameworks/ui/DateField";
 import DateTimeField from "./datetime-field/frameworks/ui/DateTimeField";
@@ -24,6 +26,8 @@ const FieldComponents = {
   [FieldTypes.CurrencyField]: CurrencyField,
   [FieldTypes.LookUpField]: LookUpField,
   [FieldTypes.PickListField]: PickListField,
+  [FieldTypes.ColouredPickListField]: ColouredPickListField,
+  [FieldTypes.ColouredMultiSelectField]: ColouredMultiSelectField,
   [FieldTypes.PercentageField]: PercentageField,
   [FieldTypes.DateField]: DateField,
   [FieldTypes.DateTimeField]: DateTimeField,

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActionsRenderer.module.css

@@ -1,7 +1,7 @@
 [dir=ltr] .actions {
-    padding-left: var(--zd_size4) 
+    padding-left: var(--zd_size6) 
 }[dir=rtl] .actions {
-    padding-right: var(--zd_size4) 
+    padding-right: var(--zd_size6) 
 }
 
 .gap_small {