@addev-be/ui 3.3.1 → 3.3.7

package/assets/icons/table.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M48 264V160H232V264H48zm0 48H232V432H64c-8.8 0-16-7.2-16-16V312zM280 432V312H464V416c0 8.8-7.2 16-16 16H280zM464 264H280V160H464V264zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M48 264V160H232V264H48zm0 48H232V432H64c-8.8 0-16-7.2-16-16V312zM280 432V312H464V416c0 8.8-7.2 16-16 16H280zM464 264H280V160H464V264zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"/></svg>

package/dist/components/auth/PasswordResetForm.js

@@ -9,6 +9,7 @@ import "lodash";
 import "../forms/Form/index.js";
 import "../forms/Form/styles.js";
 import "../forms/NumberInput.js";
+import "../forms/SqlPrefixFilterCombobox/SqlPrefixFilterCombobox.js";
 import { useParams as x, Link as R } from "react-router-dom";
 import "../common/Accordion/Accordion.js";
 import "../common/Avatar/styles.js";
@@ -26,7 +27,7 @@ import "../common/TreeView/TreeContext.js";
 import { FormContainer as j } from "./styles.js";
 import { StackedLabel as w } from "../forms/VerticalLabel.js";
 import { useAuthentication as E } from "../../hooks/providers.js";
-const ne = () => {
+const ae = () => {
   const { key: t } = x(), [s, y] = o(""), [i, C] = o(""), [n, v] = o(-1), [p, k] = o(-1), [c, u] = o(""), { resetPassword: d, checkRecoveryKey: l } = E();
   S(() => {
     t && l(t).then((r) => {
@@ -75,5 +76,5 @@ const ne = () => {
   ] }) });
 };
 export {
-  ne as PasswordResetForm
+  ae as PasswordResetForm
 };

package/dist/components/forms/SqlPrefixFilterCombobox/SqlPrefixFilterCombobox.d.ts

@@ -0,0 +1,9 @@
+import { UseSqlPrefixFilterComboboxStateProps } from './useSqlPrefixFilterComboboxState';
+export type SqlPrefixFilterComboboxProps<T> = UseSqlPrefixFilterComboboxStateProps<T> & {
+    label?: string;
+    itemKey: (item: T, index: number) => string;
+    noResultsText?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+};
+export declare const SqlPrefixFilterCombobox: <T>({ label, value, itemKey, itemLabel, readOnly, noResultsText, placeholder, ...props }: SqlPrefixFilterComboboxProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/SqlPrefixFilterCombobox/SqlPrefixFilterCombobox.js

@@ -0,0 +1,140 @@
+import { jsx as o, jsxs as a, Fragment as _ } from "react/jsx-runtime";
+import { CardForm as h } from "../Form/index.js";
+import r from "styled-components";
+import { useSqlPrefixFilterComboboxState as $ } from "./useSqlPrefixFilterComboboxState.js";
+const A = 20, B = 40, O = r.div`
+  position: relative;
+  width: 100%;
+`, j = r.input`
+  font-family: var(--font-input);
+  font-size: var(--text-base);
+  font-weight: 500;
+  border: 1px solid var(--color-base-300);
+  color: var(--color-text-800);
+  background: var(--color-base-0);
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--space-2);
+  border-radius: var(--rounded-md);
+
+  &:focus {
+    outline: none;
+    border-color: var(--color-sky-500);
+    box-shadow: 0 0 0 1px var(--color-sky-500);
+  }
+`, q = r.div`
+  position: absolute;
+  top: calc(100% + var(--space-1));
+  left: 0;
+  right: 0;
+  z-index: 20;
+  max-height: ${A}rem;
+  background: var(--color-base-0);
+  border: 1px solid var(--color-base-300);
+  border-radius: var(--rounded-md);
+  box-shadow: var(--shadow-lg);
+  overflow-y: auto;
+  overflow-x: hidden;
+`, K = r.button`
+  width: 100%;
+  border: 0;
+  height: ${B}px;
+  padding: 0 var(--space-3);
+  text-align: left;
+  cursor: pointer;
+  background: ${({ $highlighted: t }) => t ? "var(--color-base-100)" : "var(--color-base-0)"};
+  color: var(--color-text-800);
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    background: var(--color-base-100);
+  }
+`, l = r.div`
+  padding: var(--space-2) var(--space-3);
+  color: var(--color-text-500);
+  font-size: var(--text-sm);
+`, V = ({
+  label: t,
+  value: g,
+  itemKey: v,
+  itemLabel: i,
+  readOnly: p = !1,
+  noResultsText: b = "Aucun resultat",
+  placeholder: x,
+  ...f
+}) => {
+  const {
+    bottomSpacerHeight: m,
+    filteredRows: s,
+    handleBlur: w,
+    handleChange: S,
+    handleFocus: C,
+    handleKeyDown: y,
+    handleOpenAllItems: d,
+    handleSuggestionsScroll: I,
+    inputValue: k,
+    isLoading: c,
+    opened: u,
+    highlightedIndex: F,
+    selectedLabel: H,
+    selectItem: D,
+    suggestionsContainerRef: E,
+    topSpacerHeight: M,
+    visibleRows: R,
+    visibleStartIndex: z
+  } = $({
+    ...f,
+    itemLabel: i,
+    value: g
+  });
+  return p ? /* @__PURE__ */ o(h.Input, { label: t, value: H, readOnly: !0 }) : /* @__PURE__ */ o(h.Row, { label: t, children: /* @__PURE__ */ a(O, { children: [
+    /* @__PURE__ */ o(
+      j,
+      {
+        type: "text",
+        value: k,
+        placeholder: u ? void 0 : x,
+        autoComplete: "off",
+        onMouseDown: d,
+        onClick: d,
+        onFocus: C,
+        onBlur: w,
+        onKeyDown: y,
+        onChange: (e) => S(e.target.value)
+      }
+    ),
+    u && /* @__PURE__ */ a(
+      q,
+      {
+        ref: E,
+        onScroll: I,
+        children: [
+          s.length > 0 ? /* @__PURE__ */ a(_, { children: [
+            /* @__PURE__ */ o("div", { style: { height: M } }),
+            R.map((e, G) => {
+              const n = z + G;
+              return /* @__PURE__ */ o(
+                K,
+                {
+                  type: "button",
+                  $highlighted: n === F,
+                  onMouseDown: (T) => {
+                    T.preventDefault(), D(e);
+                  },
+                  children: i(e, n)
+                },
+                v(e, n)
+              );
+            }),
+            /* @__PURE__ */ o("div", { style: { height: m } })
+          ] }) : c ? /* @__PURE__ */ o(l, { children: "Chargement..." }) : /* @__PURE__ */ o(l, { children: b }),
+          c && s.length > 0 && /* @__PURE__ */ o(l, { children: "Chargement..." })
+        ]
+      }
+    )
+  ] }) });
+};
+export {
+  V as SqlPrefixFilterCombobox
+};

package/dist/components/forms/SqlPrefixFilterCombobox/useSqlPrefixFilterComboboxState.d.ts

@@ -0,0 +1,36 @@
+import { ConditionDTO, OrderByDTO, SqlRequestRow } from '../../../services/sqlRequests';
+export type UseSqlPrefixFilterComboboxStateProps<T> = {
+    requestName: string;
+    columns: string[];
+    returnColumns?: string[];
+    parser?: (row: SqlRequestRow<T>) => T;
+    value: T | null;
+    itemLabel: (item: T, index: number) => string;
+    filterField: string;
+    conditions?: ConditionDTO[];
+    orderBy?: OrderByDTO[];
+    onChange?: (value: T | null) => void;
+    initialPageSize?: number;
+    pageSize?: number;
+};
+export declare const useSqlPrefixFilterComboboxState: <T>({ requestName, columns, returnColumns, parser, value, itemLabel, filterField, conditions, orderBy, onChange, initialPageSize, pageSize, }: UseSqlPrefixFilterComboboxStateProps<T>) => {
+    bottomSpacerHeight: number;
+    filteredRows: T[];
+    handleBlur: () => void;
+    handleChange: (nextValue: string) => void;
+    handleFocus: () => void;
+    handleKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    handleOpenAllItems: () => void;
+    handleSuggestionsScroll: (event: React.UIEvent<HTMLDivElement>) => void;
+    inputValue: string;
+    isLoading: boolean;
+    opened: boolean;
+    highlightedIndex: number;
+    resetToSelectedValue: () => void;
+    selectedLabel: string;
+    selectItem: (item: T | null) => void;
+    suggestionsContainerRef: import('react').RefObject<HTMLDivElement | null>;
+    topSpacerHeight: number;
+    visibleRows: T[];
+    visibleStartIndex: number;
+};

package/dist/components/forms/SqlPrefixFilterCombobox/useSqlPrefixFilterComboboxState.js

@@ -0,0 +1,275 @@
+import { useSqlRequestHandler as De } from "../../../services/sqlRequests.js";
+import { useRef as b, useMemo as g, useState as i, useCallback as o, useEffect as R } from "react";
+const Fe = 25, ye = 50, N = 40, qe = 80, Ce = 8, Te = 6, pe = 2, Ue = 250, v = (r) => (r ?? "").normalize("NFD").replace(/[\u0300-\u036f]/g, "").trim().toLowerCase(), se = (r) => v(r).replace(/[^a-z0-9]+/g, ""), be = (r) => {
+  const u = se(r);
+  if (!u) return "";
+  const d = v(r).match(/^[a-z0-9]+/)?.[0] ?? "";
+  return /[^a-z0-9]/i.test(r ?? "") && d || u.slice(0, pe);
+}, Ge = ({
+  requestName: r,
+  columns: u,
+  returnColumns: M = u,
+  parser: d,
+  value: z,
+  itemLabel: S,
+  filterField: k,
+  conditions: G = [],
+  orderBy: B = [],
+  onChange: oe,
+  initialPageSize: O = Fe,
+  pageSize: V = ye
+}) => {
+  const K = b(null), P = b(null), Y = b(0), T = b(!1), re = b(
+    /* @__PURE__ */ new Map()
+  ), [ce] = De(r), f = g(
+    () => z ? S(z, -1) : "",
+    [S, z]
+  ), [p, W] = i(f), [n, x] = i(!1), [c, m] = i(!1), [h, _] = i(-1), [a, X] = i([]), [Z, $] = i(!1), [D, le] = i(!1), [Ie, ue] = i(0), [I, J] = i(null), F = g(() => !n || c ? "" : se(p), [p, n, c]), Q = g(
+    () => v(p).length === 0,
+    [p]
+  ), y = g(
+    () => !n || c ? "" : be(p),
+    [p, n, c]
+  ), ae = g(
+    () => JSON.stringify({
+      requestName: r,
+      columns: u,
+      returnColumns: M,
+      filterField: k,
+      conditions: G,
+      orderBy: B,
+      initialPageSize: O,
+      pageSize: V,
+      hasParser: !!d
+    }),
+    [
+      u,
+      G,
+      k,
+      O,
+      B,
+      V,
+      d,
+      r,
+      M
+    ]
+  ), w = g(
+    () => `${ae}::${y || "__all__"}`,
+    [ae, y]
+  ), s = g(() => c || !F ? a : a.filter(
+    (e, t) => se(S(e, t)).startsWith(
+      F
+    )
+  ), [S, F, a, c]), q = Math.max(
+    0,
+    Math.floor(Ie / N) - Te
+  ), we = Ce + Te * 2, ee = Math.min(
+    s.length,
+    q + we
+  ), Ee = g(
+    () => s.slice(q, ee),
+    [s, ee, q]
+  ), Re = q * N, Se = (s.length - ee) * N, l = o(() => {
+    K.current !== null && (window.clearTimeout(K.current), K.current = null);
+  }, []);
+  R(
+    () => () => {
+      l();
+    },
+    [l]
+  ), R(() => {
+    n || (T.current = !1);
+  }, [n]), R(() => {
+    n || W(I ?? f);
+  }, [n, I, f]), R(() => {
+    I !== null && I === f && J(null);
+  }, [I, f]);
+  const C = o(() => {
+    P.current && (P.current.scrollTop = 0), ue(0);
+  }, []), A = o(() => {
+    x(!1), m(!1), _(-1), X([]), $(!1), C();
+  }, [C]), H = o(() => {
+    T.current = !1, J(null), W(f), A();
+  }, [A, f]), L = o(
+    async (e, t, U) => {
+      const ie = ++Y.current;
+      le(!0);
+      const fe = [...G];
+      y && fe.push({
+        field: k,
+        operator: "startsWith",
+        value: y
+      });
+      const Oe = (t ? O : V) + 1, Ve = {
+        columns: u,
+        returnColumns: M,
+        conditions: fe,
+        orderBy: B,
+        start: e,
+        length: Oe,
+        getCount: !1
+      };
+      try {
+        const xe = await ce(Ve);
+        if (Y.current !== ie) return;
+        const te = xe.data ?? [], he = t ? O : V, ne = te.length > he, ge = (ne ? te.slice(0, he) : te).map((j) => d ? d(j) : j);
+        X((j) => {
+          const de = t ? ge : [...j, ...ge];
+          return re.current.set(U, {
+            rows: de,
+            hasMore: ne
+          }), de;
+        }), $(ne);
+      } finally {
+        Y.current === ie && le(!1);
+      }
+    },
+    [
+      u,
+      G,
+      k,
+      O,
+      B,
+      V,
+      d,
+      M,
+      y,
+      ce
+    ]
+  );
+  R(() => {
+    if (!n) return;
+    const e = re.current.get(w);
+    if (e) {
+      X(e.rows), $(e.hasMore), _(-1), C();
+      return;
+    }
+    X([]), $(!1);
+    const t = window.setTimeout(
+      () => {
+        _(-1), C(), L(0, !0, w);
+      },
+      c ? 0 : 120
+    );
+    return () => {
+      window.clearTimeout(t);
+    };
+  }, [
+    L,
+    n,
+    w,
+    C,
+    c
+  ]), R(() => {
+    if (!n || h < 0) return;
+    const e = P.current;
+    if (!e) return;
+    const t = h * N, U = t + N;
+    t < e.scrollTop ? e.scrollTop = t : U > e.scrollTop + e.clientHeight && (e.scrollTop = U - e.clientHeight);
+  }, [h, n]);
+  const E = o(
+    (e) => {
+      const t = e ? S(e, -1) : "";
+      T.current = !0, l(), J(t), W(t), A(), oe?.(e);
+    },
+    [l, A, S, oe]
+  ), me = o(() => {
+    T.current = !1, l(), x(!0), m(!0);
+  }, [l]), _e = o(() => {
+    T.current = !1, l(), x(!0), m(!0);
+  }, [l]), Ae = o(() => {
+    if (l(), Q) {
+      E(null);
+      return;
+    }
+    if (T.current || I !== null) {
+      A();
+      return;
+    }
+    K.current = window.setTimeout(() => {
+      H();
+    }, 150);
+  }, [
+    l,
+    A,
+    Q,
+    I,
+    H,
+    E
+  ]), He = o((e) => {
+    T.current = !1, J(null), W(e), x(!0), m(!1), _(v(e).length === 0 ? -1 : 0);
+  }, []), Le = o(
+    (e) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault(), x(!0), m(!1), _(
+          (t) => Math.min(t + 1, s.length - 1)
+        );
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault(), m(!1), _((t) => Math.max(t - 1, 0));
+        return;
+      }
+      if (e.key === "Enter") {
+        if (e.preventDefault(), Q) {
+          E(null);
+          return;
+        }
+        if (h >= 0 && s[h]) {
+          E(s[h]);
+          return;
+        }
+        if (s.length === 1) {
+          E(s[0]);
+          return;
+        }
+        H();
+        return;
+      }
+      e.key === "Escape" && (e.preventDefault(), H());
+    },
+    [s, h, Q, H, E]
+  ), Me = o(
+    (e) => {
+      const t = e.currentTarget;
+      ue(t.scrollTop), t.scrollTop + t.clientHeight >= t.scrollHeight - qe && !D && Z && L(a.length, !1, w);
+    },
+    [Z, D, L, w, a.length]
+  );
+  return R(() => {
+    !n || c || !F || D || !Z || s.length > 0 || a.length === 0 || a.length >= Ue || L(a.length, !1, w);
+  }, [
+    s.length,
+    Z,
+    D,
+    L,
+    F,
+    n,
+    w,
+    a.length,
+    c
+  ]), {
+    bottomSpacerHeight: Se,
+    filteredRows: s,
+    handleBlur: Ae,
+    handleChange: He,
+    handleFocus: me,
+    handleKeyDown: Le,
+    handleOpenAllItems: _e,
+    handleSuggestionsScroll: Me,
+    inputValue: p,
+    isLoading: D,
+    opened: n,
+    highlightedIndex: h,
+    resetToSelectedValue: H,
+    selectedLabel: f,
+    selectItem: E,
+    suggestionsContainerRef: P,
+    topSpacerHeight: Re,
+    visibleRows: Ee,
+    visibleStartIndex: q
+  };
+};
+export {
+  Ge as useSqlPrefixFilterComboboxState
+};

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

@@ -9,3 +9,4 @@ export * from './Form/styles';
 export * from './Form/Row';
 export * from './styles';
 export * from './NumberInput';
+export * from './SqlPrefixFilterCombobox/SqlPrefixFilterCombobox';

package/dist/components/forms/index.js

@@ -1,37 +1,39 @@
 import { AutoTextArea as r } from "./AutoTextArea.js";
 import { BillitIdentifier as m } from "./BillitIdentifier/index.js";
 import { Button as p, StyledButton as x } from "./Button.js";
-import { Select as d } from "./Select.js";
-import { IconButton as i } from "./IconButton.js";
-import { IndeterminateCheckbox as f } from "./IndeterminateCheckbox.js";
+import { Select as i } from "./Select.js";
+import { IconButton as d } from "./IconButton.js";
+import { IndeterminateCheckbox as u } from "./IndeterminateCheckbox.js";
 import { CardForm as C } from "./Form/index.js";
-import { FormCondensedFields as c, FormFields as y, FormGroupContainer as b, FormGroupHeader as s, FormRowContainer as I, FormRowLabel as B, ReadOnlyValue as R, StyledCheckbox as k, inputCss as w } from "./Form/styles.js";
+import { FormCondensedFields as b, FormFields as c, FormGroupContainer as y, FormGroupHeader as s, FormRowContainer as I, FormRowLabel as B, ReadOnlyValue as R, StyledCheckbox as k, inputCss as w } from "./Form/styles.js";
 import { FormRow as h } from "./Form/Row.js";
-import { Input as L, StackedLabelContainer as N, StyledNumericFormat as T, StyledTextArea as H, inputStyle as O } from "./styles.js";
-import { NumberInput as g } from "./NumberInput.js";
+import { Input as L, StackedLabelContainer as N, StyledNumericFormat as T, StyledTextArea as q, inputStyle as H } from "./styles.js";
+import { NumberInput as P } from "./NumberInput.js";
+import { SqlPrefixFilterCombobox as g } from "./SqlPrefixFilterCombobox/SqlPrefixFilterCombobox.js";
 export {
   r as AutoTextArea,
   m as BillitIdentifier,
   p as Button,
   C as CardForm,
-  c as FormCondensedFields,
-  y as FormFields,
-  b as FormGroupContainer,
+  b as FormCondensedFields,
+  c as FormFields,
+  y as FormGroupContainer,
   s as FormGroupHeader,
   h as FormRow,
   I as FormRowContainer,
   B as FormRowLabel,
-  i as IconButton,
-  f as IndeterminateCheckbox,
+  d as IconButton,
+  u as IndeterminateCheckbox,
   L as Input,
-  g as NumberInput,
+  P as NumberInput,
   R as ReadOnlyValue,
-  d as Select,
+  i as Select,
+  g as SqlPrefixFilterCombobox,
   N as StackedLabelContainer,
   x as StyledButton,
   k as StyledCheckbox,
   T as StyledNumericFormat,
-  H as StyledTextArea,
+  q as StyledTextArea,
   w as inputCss,
-  O as inputStyle
+  H as inputStyle
 };

package/dist/components/grid/DataGrid/helpers/columns.js

@@ -45,7 +45,15 @@ const W = (e) => e?.order !== -1, _ = (e = 2, a = "") => `#0${e > 0 ? `.${E("0",
   key: e,
   type: "text",
   name: a,
-  render: (t) => /* @__PURE__ */ g(u, { href: `tel:${t}`, ...r?.typography, as: "a", children: t }),
+  render: (t) => /* @__PURE__ */ g(
+    u,
+    {
+      href: `tel:${t}`,
+      ...r?.typography,
+      as: "a",
+      children: t
+    }
+  ),
   getter: (t) => t[e] ?? "",
   sortGetter: (t) => t[e] ?? "",
   footer: (t, o) => `${o.length} éléments`,
@@ -155,7 +163,19 @@ const W = (e) => e?.order !== -1, _ = (e = 2, a = "") => `#0${e > 0 ? `.${E("0",
     type: "number",
     name: a,
     textAlign: "right",
-    render: typeof t == "function" ? (n, l) => /* @__PURE__ */ g(u, { ...o?.typography, children: f(n, r, t(l)) }) : (n) => /* @__PURE__ */ g(u, { ...o?.typography, children: f(n, r, t) }),
+    render: typeof t == "function" ? (n, l) => /* @__PURE__ */ g(
+      u,
+      {
+        ...o?.typography,
+        children: f(n, r, t(l))
+      }
+    ) : (n) => /* @__PURE__ */ g(
+      u,
+      {
+        ...o?.typography,
+        children: f(n, r, t)
+      }
+    ),
     excelOptions: {
       formatter: () => _(r, " €"),
       valueGetter: (n) => C(n, r)

package/dist/components/grid/DataGrid/types.d.ts

@@ -2,6 +2,7 @@ import { CSSProperties, Context, Dispatch, FC, MouseEvent, MouseEventHandler, Re
 import { DataGridEditableCellFC } from './DataGridEditableCell/types';
 import { SpaceProps } from '../../../helpers/styled/space';
 import { ThemeColor } from '../../../theme';
+import { TypographyProps } from '../../../helpers/styled/typography';
 import * as z from 'zod';
 export type DataGridCellFCProps = {
     onDoubleClick?: MouseEventHandler;
@@ -24,13 +25,7 @@ type CommonGridColumnProps<R, T> = {
     component?: DataGridCellFC;
     color?: ThemeColor;
     excelOptions?: ExcelOptions;
-    typography?: {
-        bold?: boolean;
-        italic?: boolean;
-        underline?: boolean;
-        ellipsis?: boolean;
-        lineClamp?: number;
-    };
+    typography?: TypographyProps;
     textAlign?: 'left' | 'right' | 'center';
     filter?: DataGridFilter;
     footer?: DataGridFooterFunction<R> | Record<string, DataGridFooterFunction<R> | null>;

package/dist/components/grid/SqlRequestDataGrid/helpers/columns.js

@@ -172,7 +172,19 @@ const et = (e, m, r) => f(
     decimals: r,
     currency: t,
     textAlign: "right",
-    render: typeof t == "function" ? (n, a) => /* @__PURE__ */ i(p, { ...l?.typography, children: s(n, r, t(a)) }) : (n) => /* @__PURE__ */ i(p, { ...l?.typography, children: s(n, r, t) }),
+    render: typeof t == "function" ? (n, a) => /* @__PURE__ */ i(
+      p,
+      {
+        ...l?.typography,
+        children: s(n, r, t(a))
+      }
+    ) : (n) => /* @__PURE__ */ i(
+      p,
+      {
+        ...l?.typography,
+        children: s(n, r, t)
+      }
+    ),
     excelOptions: {
       formatter: typeof t == "function" ? (n) => c(r, t(n)) : () => c(r, t),
       valueGetter: (n) => G(n, r)

package/dist/helpers/styled/typography.d.ts

@@ -1,9 +1,9 @@
 export type TypographyProps = {
-    ellipsis?: boolean;
-    bold?: boolean;
-    italic?: boolean;
-    underline?: boolean;
-    lineClamp?: number;
+    $ellipsis?: boolean;
+    $bold?: boolean;
+    $italic?: boolean;
+    $underline?: boolean;
+    $lineClamp?: number;
 };
 export declare const typography: import('styled-components').RuleSet<TypographyProps>;
 export declare const StyledTypography: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, TypographyProps>> & string;

package/dist/helpers/styled/typography.js

@@ -1,19 +1,11 @@
-import o, { css as t } from "styled-components";
-const i = t`
-  ${({ ellipsis: e }) => e && "white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"}
-  ${({ bold: e }) => e && "font-weight: bold;"}
-  ${({ italic: e }) => e && "font-style: italic;"}
-  ${({ underline: e }) => e && "text-decoration: underline;"}
-  ${({ lineClamp: e }) => e && `display: -webkit-box; -webkit-line-clamp: ${e}; -webkit-box-orient: vertical; overflow: hidden;`}
-`, l = /* @__PURE__ */ new Set([
-  "ellipsis",
-  "bold",
-  "italic",
-  "underline",
-  "lineClamp"
-]), r = o.span.withConfig({
-  shouldForwardProp: (e) => !l.has(e)
-})`
+import t, { css as o } from "styled-components";
+const i = o`
+  ${({ $ellipsis: e }) => e && "white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"}
+  ${({ $bold: e }) => e && "font-weight: bold;"}
+  ${({ $italic: e }) => e && "font-style: italic;"}
+  ${({ $underline: e }) => e && "text-decoration: underline;"}
+  ${({ $lineClamp: e }) => e && `display: -webkit-box; -webkit-line-clamp: ${e}; -webkit-box-orient: vertical; overflow: hidden;`}
+`, r = t.span`
   ${i}
 `;
 export {