@aplus-frontend/ui 0.1.26 → 0.1.27

package/es/src/ap-table/utils.d.ts

@@ -8423,7 +8423,7 @@ export declare function updateFormProps(item: ApColumnType<any, any>, fieldProps
  * @returns
  */
 export declare function objectToString(value: any): any;
-export declare function getTableTitle(column: ApColumnType<any>, slot?: (props: {
+export declare function getTableTitle(column: ApColumnType<any>, titleNodeClassName: string, slot?: (props: {
     title: any;
     column: ApColumnType<any>;
 }) => any, tooltipColor?: string): number | boolean | void | VNodeArrayChildren | import("vue/jsx-runtime").JSX.Element | ((props: ColumnTitleProps<any>) => VNodeArrayChildren | VueNode) | null;

package/es/src/ap-table/utils.mjs

@@ -1,19 +1,19 @@
-import { isVNode as d, createVNode as u, mergeProps as a, cloneVNode as T, Fragment as b } from "vue";
-import { isObject as l, isArray as f, isUndefined as y, isFunction as g, omit as h, isBoolean as j, isString as c } from "lodash-unified";
-import { apTableRenderItemMap as F, apTableFormItemMap as O, ellipsisTitleStyle as E } from "./constants.mjs";
-import { isType as S } from "@fruits-chain/utils";
+import { isVNode as T, createVNode as u, mergeProps as f, cloneVNode as b, Fragment as y } from "vue";
+import { isObject as c, isArray as p, isUndefined as g, isFunction as h, omit as j, isBoolean as F, isString as a } from "lodash-unified";
+import { apTableRenderItemMap as O, apTableFormItemMap as E } from "./constants.mjs";
+import { isType as x } from "@fruits-chain/utils";
 import "../ap-form/index.mjs";
-import { Tooltip as x } from "ant-design-vue";
-import { QuestionCircleOutlined as N } from "@ant-design/icons-vue";
+import { Tooltip as N } from "ant-design-vue";
+import { QuestionCircleOutlined as S } from "@ant-design/icons-vue";
 import I from "../ap-form/ap-form-item.vue.mjs";
 function v(t) {
-  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !d(t);
+  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !T(t);
 }
-const C = (t, e, n) => {
-  let o = {};
-  return l(t) ? Object.keys(t).forEach((i) => {
-    l(t[i]) ? o[i] = C(t[i], e[i], n) : o[i] = n(t[i], e);
-  }) : o = n(t, e), o;
+const P = (t, e, n) => {
+  let r = {};
+  return c(t) ? Object.keys(t).forEach((o) => {
+    c(t[o]) ? r[o] = P(t[o], e[o], n) : r[o] = n(t[o], e);
+  }) : r = n(t, e), r;
 }, J = (t, e) => {
   switch (t) {
     case "dayjs":
@@ -21,12 +21,12 @@ const C = (t, e, n) => {
     case "dayjsRange":
       return e.map((n) => n.valueOf());
     case "dayjsDayRange": {
-      const [n, o] = e;
-      return [n.startOf("day").valueOf(), o.endOf("day").valueOf()];
+      const [n, r] = e;
+      return [n.startOf("day").valueOf(), r.endOf("day").valueOf()];
     }
     case "multiple":
     case "multipleNumber":
-      return f(e) ? e : [e];
+      return p(e) ? e : [e];
     case "boolean":
       return e;
     case "object":
@@ -36,93 +36,93 @@ const C = (t, e, n) => {
   }
 };
 function L(t) {
-  return f(t) ? t.join(".") : t;
+  return p(t) ? t.join(".") : t;
 }
-function P(t) {
+function V(t) {
   const e = Object.prototype.toString.call(t).match(/^\[object (.*)\]$/)[1].toLowerCase();
   return e === "string" && typeof t == "object" ? "object" : t === null ? "null" : t === void 0 ? "undefined" : e;
 }
-const V = (t) => P(t) === "map" ? t : new Map(Object.entries(t || {})), p = (t) => {
-  const e = [], n = V(t);
-  return n.forEach((o, i) => {
-    const r = n.get(i) || n.get(`${i}`);
-    if (r) {
-      if (typeof r == "object" && (r != null && r.text)) {
+const w = (t) => V(t) === "map" ? t : new Map(Object.entries(t || {})), d = (t) => {
+  const e = [], n = w(t);
+  return n.forEach((r, o) => {
+    const i = n.get(o) || n.get(`${o}`);
+    if (i) {
+      if (typeof i == "object" && (i != null && i.text)) {
         e.push({
-          text: r == null ? void 0 : r.text,
-          value: i,
-          label: r == null ? void 0 : r.text,
-          disabled: r.disabled
+          text: i == null ? void 0 : i.text,
+          value: o,
+          label: i == null ? void 0 : i.text,
+          disabled: i.disabled
         });
         return;
       }
       e.push({
-        text: r,
-        label: r,
-        value: i
+        text: i,
+        label: i,
+        value: o
       });
     }
   }), e;
-}, Q = (t) => y(t) || t < 0 ? 0 : t, U = (t, e, n) => {
+}, Q = (t) => g(t) || t < 0 ? 0 : t, U = (t, e, n) => {
   if (n)
     return n;
-  const o = ["select", "date"], i = ["text", "textArea", "number"];
+  const r = ["select", "date"], o = ["text", "textArea", "number"];
   if (e === "dateRange")
     return [t("ap.common.chooseText"), t("ap.common.chooseText")];
-  if (o.includes(e))
+  if (r.includes(e))
     return t("ap.common.chooseText");
-  if (i.includes(e))
+  if (o.includes(e))
     return t("ap.common.inputText");
 };
-function w(t, e) {
-  return !t || !g(t) ? t : t(e);
+function A(t, e) {
+  return !t || !h(t) ? t : t(e);
 }
-function z(t) {
+function W(t) {
   let e = t.valueType || "text";
   return t.valueEnum && (e = "status"), e;
 }
-function G(t, e, n, o) {
+function z(t, e, n, r) {
   var s;
-  const i = F[t];
-  if (i)
-    return u(i, a(e, {
+  const o = O[t];
+  if (o)
+    return u(o, f(e, {
       mode: "read"
     }), null);
-  const r = o == null ? void 0 : o[t];
-  return ((s = r == null ? void 0 : r.render) == null ? void 0 : s.call(r, e.value, n, e)) || e.value;
+  const i = r == null ? void 0 : r[t];
+  return ((s = i == null ? void 0 : i.render) == null ? void 0 : s.call(i, e.value, n, e)) || e.value;
 }
-function K(t, e) {
+function G(t, e) {
   if (t.customRenderFormItem)
     return () => {
-      const i = t.customRenderFormItem(t);
-      return T(i, {
+      const o = t.customRenderFormItem(t);
+      return b(o, {
         ...t.fieldProps,
         span: t.span,
-        ...i.props || {}
+        ...o.props || {}
       });
     };
-  const n = O[t.valueType];
+  const n = E[t.valueType];
   if (n)
     return n;
-  const o = e == null ? void 0 : e[t.valueType];
+  const r = e == null ? void 0 : e[t.valueType];
   return () => {
-    var r;
-    const i = (r = o == null ? void 0 : o.renderFormItem) == null ? void 0 : r.call(o, t.fieldProps.field);
-    return i ? u(I, a(t.fieldProps, {
+    var i;
+    const o = (i = r == null ? void 0 : r.renderFormItem) == null ? void 0 : i.call(r, t.fieldProps.field);
+    return o ? u(I, f(t.fieldProps, {
       span: t.span
-    }), v(i) ? i : {
-      default: () => [i]
+    }), v(o) ? o : {
+      default: () => [o]
     }) : null;
   };
 }
-function W(t, e) {
-  const n = w(t.fieldProps, e), o = (n == null ? void 0 : n.field) || n || {}, i = t.valueType === "switch", r = t.valueType === "index", s = i ? {
+function K(t, e) {
+  const n = A(t.fieldProps, e), r = (n == null ? void 0 : n.field) || n || {}, o = t.valueType === "switch", i = t.valueType === "index", s = o ? {
     checked: e.value
   } : {
-    value: r ? e.index + 1 : e.value
+    value: i ? e.index + 1 : e.value
   };
-  return t.valueEnum && (o.valueEnum = t.valueEnum), {
-    ...h(o, ["request"]),
+  return t.valueEnum && (r.valueEnum = t.valueEnum), {
+    ...j(r, ["request"]),
     ...s
   };
 }
@@ -130,18 +130,18 @@ function X(t) {
   const e = {
     ...t
   };
-  return j(t.filters) && t.filters && t.valueEnum && (e.filters = p(t.valueEnum)), e;
+  return F(t.filters) && t.filters && t.valueEnum && (e.filters = d(t.valueEnum)), e;
 }
 function Y(t, e) {
-  var o;
+  var r;
   const n = e || {};
-  return t.valueEnum && !((o = n.field) != null && o.options) && (n.field = {
+  return t.valueEnum && !((r = n.field) != null && r.options) && (n.field = {
     ...n.field,
-    options: p(t.valueEnum)
+    options: d(t.valueEnum)
   }), n;
 }
 function Z(t) {
-  if (!S("Object")(t))
+  if (!x("Object")(t))
     return t;
   try {
     return JSON.stringify(t);
@@ -149,50 +149,50 @@ function Z(t) {
     return t;
   }
 }
-function k(t, e, n) {
-  const o = e == null ? void 0 : e({
+function k(t, e, n, r) {
+  const o = n == null ? void 0 : n({
     title: t.title,
     column: t
   });
   if (o && (o.length > 1 || o[0].children && o[0].children !== "v-if"))
     return o;
-  const r = c(t.title) ? u("span", {
-    style: E,
+  const s = a(t.title) ? u("span", {
+    class: e,
     title: t.title
-  }, [t.title]) : t.title, s = t.tooltip ? c(t.tooltip) ? u(b, null, [t.tooltip]) : t.tooltip(t) : null, m = () => u("span", {
+  }, [t.title]) : t.title, l = t.tooltip ? a(t.tooltip) ? u(y, null, [t.tooltip]) : t.tooltip(t) : null, m = u("span", {
     style: {
       display: "inline-flex",
       alignItems: "center"
     }
-  }, [r, u(x, {
-    title: s,
+  }, [s, u(N, {
+    title: l,
     placement: "bottom"
   }, {
-    default: () => [u(N, {
+    default: () => [u(S, {
       style: {
         padding: "4px",
-        color: n,
+        color: r,
         verticalAlign: "middle"
       }
     }, null)]
   })]);
-  return s ? m : r;
+  return l ? m : s;
 }
 export {
   X as apColumnToColumn,
   L as dataIndexToStr,
-  C as formatParamsValueType,
+  P as formatParamsValueType,
   Q as getColumnOrder,
-  w as getFieldProps,
+  A as getFieldProps,
   U as getPlaceholder,
-  K as getSearchFormItemRenderNode,
-  G as getTableCellRenderNode,
-  W as getTableRenderProps,
-  z as getTableRenderType,
+  G as getSearchFormItemRenderNode,
+  z as getTableCellRenderNode,
+  K as getTableRenderProps,
+  W as getTableRenderType,
   k as getTableTitle,
-  V as objectToMap,
+  w as objectToMap,
   Z as objectToString,
   J as parseFieldValue,
   Y as updateFormProps,
-  p as valueEnumToArray
+  d as valueEnumToArray
 };

package/es/src/business/ap-attachment/ApAttachment.d.ts

@@ -42,7 +42,7 @@ declare const _default: DefineComponent<{
     toolTipBgColor: {
         type: StringConstructor;
     };
-}, () => import("vue/jsx-runtime").JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
+}, () => false | import("vue/jsx-runtime").JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
     attachmentList: {
         type: PropType<Array<AttachmentItemProps>>;
         default: never[];

package/es/src/business/ap-attachment/ApAttachment.mjs

@@ -1,4 +1,4 @@
-import { defineComponent as O, useSlots as T, computed as a, cloneVNode as P, unref as k, toRaw as u, createVNode as o, createTextVNode as S } from "vue";
+import { defineComponent as O, useSlots as T, computed as o, cloneVNode as P, unref as k, toRaw as u, createVNode as a, createTextVNode as S } from "vue";
 import { Tooltip as V, Popover as b } from "ant-design-vue";
 import "../../config-provider/index.mjs";
 import { ApAttachmentProps as z } from "./constans.mjs";
@@ -7,7 +7,7 @@ import "./style.css";
 import { useOssInit as U } from "../../ap-download/hooks/index.mjs";
 import { isArray as _ } from "lodash-unified";
 import { useNamespace as B } from "../../config-provider/hooks/use-namespace.mjs";
-import { useGlobalConfig as h } from "../../config-provider/hooks/use-global-config.mjs";
+import { useGlobalConfig as v } from "../../config-provider/hooks/use-global-config.mjs";
 import { useLocale as G } from "../../config-provider/hooks/use-locale.mjs";
 const Y = /* @__PURE__ */ O({
   name: "ApAttachment",
@@ -16,65 +16,68 @@ const Y = /* @__PURE__ */ O({
     const {
       b: p,
       e: l
-    } = B("ap-attachment"), A = h("uiMode"), g = h("apUpload"), {
+    } = B("ap-attachment"), A = v("uiMode"), g = v("apUpload"), {
       lang: w,
       t: i
-    } = G(), s = T(), C = a(() => w.value === "zh-cn" ? "zh_CN" : "en_US"), n = a(() => t.attachmentList.length === 1), d = a(() => t.attachmentList.length > 0 ? t.attachmentList[0].fileName : ""), N = a(() => n.value ? d.value : i("ap.apAttachment.downloadall")), f = a(() => t.color ? t.color : A.value === "aplus" ? "#0070FF" : "#1890FF"), y = a(() => ({
+    } = G(), s = T(), C = o(() => w.value === "zh-cn" ? "zh_CN" : "en_US"), n = o(() => t.attachmentList.length === 1), d = o(() => t.attachmentList.length > 0 ? t.attachmentList[0].fileName : ""), L = o(() => n.value ? d.value : i("ap.apAttachment.downloadall")), f = o(() => t.color ? t.color : A.value === "aplus" ? "#0070FF" : "#1890FF"), N = o(() => ({
       width: n.value ? "auto" : "266px"
-    })), v = a(() => ({
+    })), h = o(() => ({
       "--download-main-color": f.value,
       "--download-main-color-opacity": I(f.value, 0.6)
-    })), F = a(() => {
+    })), y = o(() => {
       var e;
       return t.getOssAccess || ((e = g.value) == null ? void 0 : e.getOssAccess);
-    }), L = a(() => {
+    }), F = o(() => {
       const e = s.default ? s.default()[0] : null;
       return e ? P(e, {
         style: {
           "font-size": "16px"
         }
       }) : null;
-    }), r = async (e) => {
+    }), m = async (e) => {
       if (!t.disabled) {
-        const c = await U(F.value, k(C)), m = _(u(e)) ? u(e) : [u(e)];
-        await c.downloadFile(M(t.needName, m));
+        const c = await U(y.value, k(C)), r = _(u(e)) ? u(e) : [u(e)];
+        await c.downloadFile(M(t.needName, r));
       }
-    }, x = (e) => e && e.length > 0 ? o("ul", {
+    }, x = (e) => e && e.length > 0 ? a("ul", {
       class: [l("file-list")],
-      style: v.value
-    }, [e.map((c, m) => o("li", {
-      key: m,
+      style: h.value
+    }, [e.map((c, r) => a("li", {
+      key: r,
       class: [l("file-item")],
-      onClick: () => r(c)
-    }, [c.fileName])), o("li", {
+      onClick: () => m(c)
+    }, [c.fileName])), a("li", {
       class: [l("down-load-all")],
-      onClick: () => r(t.attachmentList)
+      onClick: () => m(t.attachmentList)
     }, [i("ap.apAttachment.downloadall")])]) : null;
-    return () => o("div", {
-      class: [p()],
-      style: [y.value, v.value]
-    }, [o(V, {
-      title: N.value,
-      placement: t.textToolTipPlacement,
-      color: t.toolTipBgColor
-    }, {
-      default: () => [o("div", {
-        class: [l("content")],
-        onClick: () => r(n.value ? t.attachmentList[0] : t.attachmentList)
-      }, [s.default ? o("div", {
-        class: [l("text-render")]
-      }, [L.value, S(" ")]) : null, o("div", {
-        class: [l("text-inner")]
-      }, [d.value])])]
-    }), o(b, {
-      content: x(t.attachmentList),
-      placement: t.fileMorePopoverPlacement,
-      color: "#fff"
-    }, {
-      default: () => [!n.value && o("div", {
-        class: [l("more")]
-      }, [i("ap.apAttachment.more")])]
-    })]);
+    return () => {
+      var e;
+      return ((e = t.attachmentList) == null ? void 0 : e.length) > 0 && a("div", {
+        class: [p()],
+        style: [N.value, h.value]
+      }, [a(V, {
+        title: L.value,
+        placement: t.textToolTipPlacement,
+        color: t.toolTipBgColor
+      }, {
+        default: () => [a("div", {
+          class: [l("content")],
+          onClick: () => m(n.value ? t.attachmentList[0] : t.attachmentList)
+        }, [s.default ? a("div", {
+          class: [l("text-render")]
+        }, [F.value, S(" ")]) : null, a("div", {
+          class: [l("text-inner")]
+        }, [d.value])])]
+      }), a(b, {
+        content: x(t.attachmentList),
+        placement: t.fileMorePopoverPlacement,
+        color: "#fff"
+      }, {
+        default: () => [!n.value && a("div", {
+          class: [l("more")]
+        }, [i("ap.apAttachment.more")])]
+      })]);
+    };
   }
 });
 export {

package/es/src/business/ap-attachment/style.css

@@ -39,6 +39,8 @@
   max-width: 312px;
   display: flex;
   flex-direction: column;
+  margin: 0;
+  padding: 0;
 }
 .aplus-ap-attachment__file-item {
   flex: 1;

package/es/src/business/hooks/usePageListApTable.d.ts

@@ -38,11 +38,11 @@ export declare function usePageListApTable(props?: UsePageListApTable): [ApTable
         dataSource: any;
         rowSelection?: {
             select: (item: any) => void;
+            selectAll: () => void;
+            unSelectAll: () => void;
             selectedRows: any[];
             unSelect: (item: any) => void;
             isSelected: (item: any) => boolean;
-            selectAll: () => void;
-            unSelectAll: () => void;
             clearAll: () => void;
             toggleSelect: (item: any) => void;
         } | undefined;

package/es/src/business/index.d.ts

@@ -2748,7 +2748,7 @@ export declare const ApAttachment: DefineComponent<{
     toolTipBgColor: {
         type: StringConstructor;
     };
-}, () => import("vue/jsx-runtime").JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
+}, () => false | import("vue/jsx-runtime").JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
     attachmentList: {
         type: PropType<Array< AttachmentItemProps>>;
         default: never[];

package/es/src/editable-table/interface.d.ts

@@ -12,7 +12,7 @@ export type EditableColumnType<RecordType = any, ExtraValueType = 'text', ValueT
     /**
      * 在title之后展示一个icon并触发tooltip
      */
-    tooltip?: string;
+    tooltip?: any;
     /**
      * 是否可以复制（不可编辑模式下可用）
      */

package/es/src/locale/lang/en.mjs

@@ -85,6 +85,20 @@ const e = {
         totalLeftSuffix: "items",
         totalRightPrefix: "Page",
         totalRightSuffix: ""
+      },
+      setting: {
+        title: "Custom Table",
+        selectAll: "Select All",
+        unSelectAll: "Deselect All",
+        selectAllTip: "Please select the columns to display in the table.",
+        sizeSmall: "Small",
+        sizeNormal: "Normal",
+        selectCount: "Selected fields ({count})",
+        reset: "Reset",
+        fixToLeft: "Fixed on the left",
+        fixToRight: "Fixed on the right",
+        unFixed: "Not fixed",
+        delete: "Delete"
       }
     },
     apUpload: {

package/es/src/locale/lang/zh-cn.mjs

@@ -85,6 +85,20 @@ const e = {
         totalLeftSuffix: "条记录",
         totalRightPrefix: "第",
         totalRightSuffix: "页"
+      },
+      setting: {
+        title: "自定义表格",
+        selectAll: "全选",
+        unSelectAll: "取消全选",
+        selectAllTip: "请选择需要展示在表格的字段",
+        sizeSmall: "紧凑",
+        sizeNormal: "正常",
+        selectCount: "已选字段({count})",
+        reset: "重置",
+        fixToLeft: "固定在左侧",
+        fixToRight: "固定在右侧",
+        unFixed: "不固定",
+        delete: "删除"
       }
     },
     apUpload: {

package/es/src/theme/ap-attachment/ap-attachment.css

@@ -39,6 +39,8 @@
   max-width: 312px;
   display: flex;
   flex-direction: column;
+  margin: 0;
+  padding: 0;
 }
 .aplus-ap-attachment__file-item {
   flex: 1;

package/es/src/theme/ap-download/ap-download.css

@@ -14,6 +14,9 @@
   font-size: 18px;
   margin-right: 5px;
 }
+.aplus-ap-download-inner-wrapper .text {
+  color: var(--download-main-color);
+}
 .aplus-ap-download-inner-wrapper:hover {
   color: var(--download-main-color-opacity);
 }

package/es/src/theme/ap-table/ap-table.css

@@ -7,7 +7,9 @@
   display: flex;
   flex-direction: column;
 }
-.aplus-ap-table-adaptive .ant-table-wrapper,
+.aplus-ap-table-adaptive .ant-table-wrapper {
+  flex: 1;
+}
 .aplus-ap-table-adaptive .ant-spin-nested-loading,
 .aplus-ap-table-adaptive .ant-spin-container {
   height: 100%;
@@ -35,6 +37,8 @@
 .aplus-ap-table__table-wrapper {
   flex: 1;
   max-height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 .aplus-ap-table__table-wrapper-card {
   padding: 16px;
@@ -98,3 +102,27 @@
 .aplus-ap-table-pagination-total-wrapper {
   color: var(--ap-table-pagination-total-color, #526A90);
 }
+.aplus-ap-table-header {
+  padding-bottom: 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.aplus-ap-table-header__title {
+  flex: 1;
+  flex-shrink: 1;
+  min-width: 0;
+}
+.aplus-ap-table-table-header__title {
+  display: -webkit-inline-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+  max-width: 100%;
+  vertical-align: middle;
+  word-break: break-all;
+  flex: 1;
+}

package/es/src/theme/ap-table/setting/modal.css

@@ -0,0 +1,39 @@
+.aplus-ap-column-setting-wrapper {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  height: 100%;
+}
+.aplus-ap-column-setting-left {
+  flex: 1;
+  flex-shrink: 1;
+  min-width: 0;
+  padding-inline: 20px;
+  display: flex;
+  flex-direction: column;
+}
+.aplus-ap-column-setting-left__header {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px;
+}
+.aplus-ap-column-setting-left__content {
+  flex: 1;
+  padding-inline: 12px;
+  padding-block: 16px;
+  overflow-y: auto;
+}
+.aplus-ap-column-setting-left__content .ant-checkbox-wrapper {
+  max-width: 100%;
+}
+.aplus-ap-column-setting-left__content .ant-checkbox-wrapper > span:last-child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.aplus-ap-column-setting-right {
+  width: 240px;
+}

package/es/src/theme/ap-table/setting/select-group.css

@@ -0,0 +1,7 @@
+.aplus-select-group-header {
+  background-color: #F2F6F9;
+  padding: 4px 12px;
+  border-radius: 4px;
+  margin-bottom: 16px;
+  margin-inline: -12px;
+}