@synerise/ds-typography 1.1.25 → 1.1.27

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.27](https://github.com/synerise/synerise-design/compare/@synerise/ds-typography@1.1.26...@synerise/ds-typography@1.1.27) (2026-07-23)
+
+**Note:** Version bump only for package @synerise/ds-typography
+
+## [1.1.26](https://github.com/synerise/synerise-design/compare/@synerise/ds-typography@1.1.25...@synerise/ds-typography@1.1.26) (2026-06-17)
+
+**Note:** Version bump only for package @synerise/ds-typography
+
 ## [1.1.25](https://github.com/synerise/synerise-design/compare/@synerise/ds-typography@1.1.24...@synerise/ds-typography@1.1.25) (2026-06-11)
 
 **Note:** Version bump only for package @synerise/ds-typography

package/CLAUDE.md

@@ -0,0 +1,199 @@
+# Typography (`@synerise/ds-typography`)
+
+> Collection of typography primitives: a custom `Title` (h1–h7), `Text` and `Paragraph` size variants, form-label helpers (`Description`, `ErrorText`, `Label`), an `Ellipsis` wrapper, and a `macro` namespace of reusable styled-components CSS snippets.
+
+## Package structure
+
+```
+src/
+ Title.tsx — DS Title component (h1–h7 levels, ellipsis support)
+ Title.types.ts — Title Props interface
+ Text.tsx — DS Text component (medium/small/xsmall spans) + Ellipsis
+ Paragraph.tsx — DS Paragraph component (medium/small/xsmall spans)
+ Ellipsis.tsx — Overflow-detection wrapper that shows a tooltip when truncated
+ CommonElements.ts — All styled-component primitives (H1–H7, Text variants, Description, ErrorText, Label, EllipsisText)
+ Typography.ts — DS-composed default export: `{ Title, Text, Paragraph }` (antd-free)
+ index.ts — Public exports
+ style/
+ macro-utils.ts — CSS snippet exports for use in consumer styled-components
+```
+
+## Public exports
+
+### `default` (DS-composed `Typography` namespace)
+
+A plain object `{ Title, Text, Paragraph }` whose members are the **DS-implemented** components below
+(not antd). It exists so existing `import Typography from '@synerise/ds-typography'` +
+`<Typography.Title>` / `<Typography.Text>` / `<Typography.Paragraph>` call sites keep working without
+antd. antd-only members (`Typography.Link`, `copyable`, `editable`, `code`, `ellipsis`) are **dropped** —
+a repo-wide audit (portal-ui-bridge, portal-next, universal-list) found zero usages.
+
+### `Title`
+
+DS-customised heading. Renders `<h1>`–`<h6>` elements (level 7 renders as `<h6>`). Accepts standard
+heading HTML attributes (`HTMLAttributes<HTMLHeadingElement>`) plus the props below.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `level` | `1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7` | `1` | Heading level. Maps to DS type scale (h700–h100). Level 7 renders as `<h6>`. |
+| `withoutMargin` | `boolean` | `undefined` | Removes the default `margin-bottom` (`0.5em`) from the heading element. |
+| `ellipsis` | `EllipsisProps` | `undefined` | When provided, wraps the title in an `Ellipsis` component. |
+| `className` | `string` | `undefined` | Merged with `'ds-title'`. |
+| `data-*` | `string` | — | Any `data-*` attribute is forwarded onto the heading element (typed via `DataAttributes`). |
+| `...rest` | `HTMLAttributes<HTMLHeadingElement>` | — | All remaining heading attributes pass through (e.g. `style`, `id`). |
+
+Type scale mapping:
+
+| level | macro | font-size |
+|-------|-------|-----------|
+| 1 | h700 | 24px |
+| 2 | h600 | 21px |
+| 3 | h500 | 18px |
+| 4 | h400 | 16px |
+| 5 | h300 | 14px |
+| 6 | h200 | 13px |
+| 7 | h100 | 10px |
+
+### `Text`
+
+Inline text span in three sizes. Renders a styled `<span>`.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size` | `'medium' \| 'small' \| 'xsmall'` | `'medium'` | Font size variant (14px / 13px / 11px). |
+| `ellipsis` | `EllipsisProps` | `undefined` | When provided, wraps content in `Ellipsis`. |
+| `className` | `string` | `undefined` | Applied to the `Ellipsis` wrapper when `ellipsis` is set; otherwise appended to the span (`'ds-text'`). |
+| `style` | `CSSProperties` | `undefined` | Applied to the `Ellipsis` wrapper when `ellipsis` is set; otherwise applied to the span. |
+| `data-*` | `string` | — | Forwarded onto the outer element — the `Ellipsis` wrapper when `ellipsis` is set, otherwise the span (typed via `DataAttributes`). |
+| `children` | `ReactNode` | — | |
+
+> When `ellipsis` is set, `style` / `className` / `data-*` are applied to the outer `Ellipsis`
+> wrapper (so e.g. `style={{ maxWidth }}` still constrains the truncation box) — colocated with where
+> truncation is measured.
+
+### `TextSize`
+
+Type alias exported from `Text.tsx`: `'medium' | 'small' | 'xsmall'`.
+
+### `Paragraph`
+
+Block text element in three sizes. Renders a styled `<span>` with class `ds-paragraph`.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size` | `'medium' \| 'small' \| 'xsmall'` | `'medium'` | Font size variant. |
+| `className` | `string` | `undefined` | Merged with `'ds-paragraph'`. |
+| `style` | `CSSProperties` | `undefined` | Applied to the paragraph span. |
+| `data-*` | `string` | — | Any `data-*` attribute is forwarded onto the paragraph span (typed via `DataAttributes`). |
+| `children` | `ReactNode` | — | |
+
+> Note: `Paragraph` supports `className` / `style` / `data-*` but (unlike `Text`) has no `ellipsis` prop.
+
+### `Ellipsis`
+
+Overflow-detection wrapper that conditionally shows a tooltip when text is truncated.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `tooltip` | `ReactNode` | `undefined` | Tooltip content — only shown when text is actually truncated. |
+| `tooltipProps` | `TooltipProps` | `undefined` | Extra props forwarded to `@synerise/ds-tooltip` — only applied when truncated. |
+| `className` | `string` | `undefined` | Applied to the outer `EllipsisText` div. |
+| `style` | `CSSProperties` | `undefined` | Applied to the outer `EllipsisText` div. |
+| `data-*` | `string` | — | Any `data-*` attribute is forwarded onto the outer `EllipsisText` div (typed via `DataAttributes`). |
+| `children` | `ReactNode` | — | |
+
+### `EllipsisProps`
+
+Type exported from `Ellipsis.tsx` (re-exported via `export * from './Text'`).
+
+### `Description`
+
+Styled `<div>` for secondary/help text. Props: `disabled?: boolean` (reduces opacity to 0.4). Color: `grey-600`.
+
+### `ErrorText`
+
+Styled `<div>` for field error messages. Color: `red-600`, bottom margin 4px. No custom props.
+
+### `Label`
+
+Styled `<label>` for form field labels. Color: `grey-800`, font-weight 500, `display: block`, `cursor: pointer`. No custom props.
+
+### `macro`
+
+Namespace of reusable styled-components CSS snippets for typography styling in consumer components:
+
+| Export | Description |
+|--------|-------------|
+| `h700`–`h100` | Heading scales (font-size, line-height, letter-spacing, grey-800 color) |
+| `medium`, `small`, `xsmall` | Body text scales |
+| `link` | Blue-600 link style with hover |
+| `linkbutton` | Grey link variant |
+| `heading`, `regular` | Base weight/color mixins used by heading/body macros |
+| `tag`, `tooltip`, `xsAvatar`, `xlAvatar`, `xlAvatarIcon` | Specific UI element sizes |
+| `flexCentered` | Flex centering utility |
+
+## Usage patterns
+
+```tsx
+import Typography, { Title, Text, Paragraph, Description, ErrorText, Label, macro } from '@synerise/ds-typography';
+
+// DS Title (h1–h7)
+<Title level={4} withoutMargin>Section heading</Title>
+
+// DS Title with overflow tooltip
+<Title level={3} ellipsis={{ tooltip: 'Full title text' }}>Long title that may truncate</Title>
+
+// DS Text
+<Text size="small">Helper text</Text>
+
+// DS Text with ellipsis
+<Text size="medium" ellipsis={{ tooltip: 'Full content' }} style={{ maxWidth: 200 }}>
+ Long inline text
+</Text>
+
+// DS Paragraph
+<Paragraph size="medium">Body copy</Paragraph>
+
+// Form helpers
+<Label htmlFor="field">Field name</Label>
+<Description>Secondary info</Description>
+<Description disabled>Disabled info</Description>
+<ErrorText>Validation error</ErrorText>
+
+// Default export namespace — DS Title/Text/Paragraph (antd-free)
+import Typography from '@synerise/ds-typography';
+<Typography.Title level={4}>Heading</Typography.Title>
+<Typography.Text strong>Bold</Typography.Text>
+
+// macro — for use inside styled-components definitions
+import styled from 'styled-components';
+import { macro } from '@synerise/ds-typography';
+
+const MyHeading = styled.div`
+ ${macro.h400};
+`;
+```
+
+## Styling
+
+All styled primitives live in `CommonElements.ts`. Typography tokens come from `macro-utils.ts` (hardcoded scale values using `theme.palette` for colour). No variant prop on styled elements — size is selected by mapping to a different component.
+
+`EllipsisText` sets `overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%` on a `<div>`, and makes inner heading/text elements `display: inline` or inherit parent styles.
+
+## Key dependencies
+
+- `@synerise/ds-tooltip` — used by `Ellipsis` to show the overflow tooltip (regular dependency, not peer)
+- `lodash.debounce` — debounces the `ResizeObserver` callback in `Ellipsis` (100ms, leading + trailing)
+- `classnames` — used in `Title`/`Text` to merge `'ds-title'`/`'ds-text'` with consumer `className`
+- **No antd** — the package is antd-free. The default export is a DS-composed `{ Title, Text, Paragraph }`.
+
+## Implementation notes
+
+- **Default export is DS, not antd** — `import Typography from '@synerise/ds-typography'` now gives a DS-composed `{ Title, Text, Paragraph }` namespace (the same DS components as the named exports). antd-only members (`Link`, `copyable`, `editable`, `code`, antd `ellipsis`) were dropped after a repo-wide audit found zero usages.
+- **`Text` `strong`** — `strong` renders the span at `font-weight: 500`. When `ellipsis` is unset, `style` / `className` / `data-*` are applied to the rendered span. When `ellipsis` is set, they are applied to the outer `Ellipsis` wrapper (the `EllipsisText` div that measures truncation), so `style={{ maxWidth }}` keeps constraining the truncation box.
+- **`data-*` forwarding** — `Title`, `Text`, `Paragraph` and `Ellipsis` accept arbitrary `data-*` attributes (typed via the shared `DataAttributes` from `@synerise/ds-utils`) and forward them onto their outer element. For `Title` the heading carries `style`/`data-*` (via `...rest`); for `Text`/`Paragraph` the rendered span, or the `Ellipsis` wrapper when `ellipsis` is set.
+- **`Title` default margin** — headings have `margin-bottom: 0.5em` by default (own styled-component value, no longer reliant on antd's global reset); `withoutMargin` sets it to `0`.
+- **`Title` level 7 renders as `<h6>`** — there is no `<h7>` in HTML. `H7` in `CommonElements.ts` is `styled.h6`. Intentional for the h100 scale.
+- **`Paragraph`** — renders block-level styled spans (`display: block`) in medium/small/xsmall; no `className`/`style`/`ellipsis` support (unlike `Text`).
+- **`Ellipsis` uses `ResizeObserver`** — observes both the text element and `document.body` to detect layout changes. Cleans up observer and debounce on unmount.
+- **Uses Vitest** — `"test": "vitest run"`.

package/dist/CommonElements.js

@@ -27,43 +27,43 @@ const XSmallText = /* @__PURE__ */ styled.span.withConfig({
 const MediumParagraph = /* @__PURE__ */ styled.span.withConfig({
   displayName: "CommonElements__MediumParagraph",
   componentId: "sc-102d2aw-6"
-})(["", ""], () => css(["", ";"], medium));
+})(["display:block;", ""], () => css(["", ";"], medium));
 const SmallParagraph = /* @__PURE__ */ styled.span.withConfig({
   displayName: "CommonElements__SmallParagraph",
   componentId: "sc-102d2aw-7"
-})(["", ""], () => css(["", ";"], small));
+})(["display:block;", ""], () => css(["", ";"], small));
 const XSmallParagraph = /* @__PURE__ */ styled.span.withConfig({
   displayName: "CommonElements__XSmallParagraph",
   componentId: "sc-102d2aw-8"
-})(["", ""], () => css(["", ";"], xsmall));
+})(["display:block;", ""], () => css(["", ";"], xsmall));
 const H1 = /* @__PURE__ */ styled.h1.withConfig({
   displayName: "CommonElements__H1",
   componentId: "sc-102d2aw-9"
-})(["", " ", ""], () => css(["", ";"], h700), (props) => props.withoutMargin && css(["margin-bottom:0;"]));
+})(["", " margin-bottom:", ";"], () => css(["", ";"], h700), (props) => props.withoutMargin ? "0" : "0.5em");
 const H2 = /* @__PURE__ */ styled.h2.withConfig({
   displayName: "CommonElements__H2",
   componentId: "sc-102d2aw-10"
-})(["", " ", ""], () => css(["", ";"], h600), (props) => props.withoutMargin && css(["margin-bottom:0;"]));
+})(["", " margin-bottom:", ";"], () => css(["", ";"], h600), (props) => props.withoutMargin ? "0" : "0.5em");
 const H3 = /* @__PURE__ */ styled.h3.withConfig({
   displayName: "CommonElements__H3",
   componentId: "sc-102d2aw-11"
-})(["", " ", ""], () => css(["", ";"], h500), (props) => props.withoutMargin && css(["margin-bottom:0;"]));
+})(["", " margin-bottom:", ";"], () => css(["", ";"], h500), (props) => props.withoutMargin ? "0" : "0.5em");
 const H4 = /* @__PURE__ */ styled.h4.withConfig({
   displayName: "CommonElements__H4",
   componentId: "sc-102d2aw-12"
-})(["", " ", ""], () => css(["", ";"], h400), (props) => props.withoutMargin && css(["margin-bottom:0;"]));
+})(["", " margin-bottom:", ";"], () => css(["", ";"], h400), (props) => props.withoutMargin ? "0" : "0.5em");
 const H5 = /* @__PURE__ */ styled.h5.withConfig({
   displayName: "CommonElements__H5",
   componentId: "sc-102d2aw-13"
-})(["", " ", ""], () => css(["", ";"], h300), (props) => props.withoutMargin && css(["margin-bottom:0;"]));
+})(["", " margin-bottom:", ";"], () => css(["", ";"], h300), (props) => props.withoutMargin ? "0" : "0.5em");
 const H6 = /* @__PURE__ */ styled.h6.withConfig({
   displayName: "CommonElements__H6",
   componentId: "sc-102d2aw-14"
-})(["", " ", ""], () => css(["", ";"], h200), (props) => props.withoutMargin && css(["margin-bottom:0;"]));
+})(["", " margin-bottom:", ";"], () => css(["", ";"], h200), (props) => props.withoutMargin ? "0" : "0.5em");
 const H7 = /* @__PURE__ */ styled.h6.withConfig({
   displayName: "CommonElements__H7",
   componentId: "sc-102d2aw-15"
-})(["", " ", ""], () => css(["", ";"], h100), (props) => props.withoutMargin && css(["margin-bottom:0;"]));
+})(["", " margin-bottom:", ";"], () => css(["", ";"], h100), (props) => props.withoutMargin ? "0" : "0.5em");
 const EllipsisText = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CommonElements__EllipsisText",
   componentId: "sc-102d2aw-16"

package/dist/Ellipsis.d.ts

@@ -1,10 +1,11 @@
 import { default as React, CSSProperties, ReactNode } from 'react';
 import { TooltipProps } from '@synerise/ds-tooltip';
-export type EllipsisProps = {
+import { DataAttributes } from '@synerise/ds-utils';
+export type EllipsisProps = DataAttributes & {
     tooltip?: ReactNode;
     tooltipProps?: TooltipProps;
     children?: ReactNode;
     className?: string;
     style?: CSSProperties;
 };
-export declare const Ellipsis: ({ tooltip, children, className, tooltipProps, style, }: EllipsisProps) => React.JSX.Element;
+export declare const Ellipsis: ({ tooltip, children, className, tooltipProps, style, ...dataAttributes }: EllipsisProps) => React.JSX.Element;

package/dist/Ellipsis.js

@@ -8,7 +8,8 @@ const Ellipsis = ({
   children,
   className,
   tooltipProps,
-  style
+  style,
+  ...dataAttributes
 }) => {
   const textComponentRef = useRef(null);
   const [truncated, setTruncated] = useState(false);
@@ -31,7 +32,7 @@ const Ellipsis = ({
       debouncedResize.cancel();
     };
   }, [resizeObserver, debouncedResize]);
-  return /* @__PURE__ */ jsx(Tooltip, { title: truncated ? tooltip : void 0, ...truncated ? tooltipProps : {}, children: /* @__PURE__ */ jsx(EllipsisText, { style, className, ref: textComponentRef, children }) });
+  return /* @__PURE__ */ jsx(Tooltip, { title: truncated ? tooltip : void 0, ...truncated ? tooltipProps : {}, children: /* @__PURE__ */ jsx(EllipsisText, { ...dataAttributes, style, className, ref: textComponentRef, children }) });
 };
 export {
   Ellipsis

package/dist/Paragraph.d.ts

@@ -1,7 +1,10 @@
-import { default as React, ReactNode } from 'react';
-type TextProps = {
+import { default as React, CSSProperties, ReactNode } from 'react';
+import { DataAttributes } from '@synerise/ds-utils';
+type ParagraphProps = DataAttributes & {
     size?: 'medium' | 'small' | 'xsmall';
     children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
 };
-export declare const Paragraph: ({ size, children }: TextProps) => React.JSX.Element;
+export declare const Paragraph: ({ size, children, className, style, ...dataAttributes }: ParagraphProps) => React.JSX.Element;
 export {};

package/dist/Paragraph.js

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
 import { XSmallParagraph, SmallParagraph, MediumParagraph } from "./CommonElements.js";
 const MapSizeToComponent = {
   medium: MediumParagraph,
@@ -7,10 +8,13 @@ const MapSizeToComponent = {
 };
 const Paragraph = ({
   size = "medium",
-  children
+  children,
+  className,
+  style,
+  ...dataAttributes
 }) => {
   const Component = MapSizeToComponent[size];
-  return /* @__PURE__ */ jsx(Component, { className: "ds-paragraph", children });
+  return /* @__PURE__ */ jsx(Component, { ...dataAttributes, className: classNames("ds-paragraph", className), style, children });
 };
 export {
   Paragraph

package/dist/Text.d.ts

@@ -1,12 +1,15 @@
 import { default as React, CSSProperties, ReactNode } from 'react';
+import { DataAttributes } from '@synerise/ds-utils';
 import { EllipsisProps } from './Ellipsis';
 export type TextSize = 'medium' | 'small' | 'xsmall';
-type TextProps = {
+type TextProps = DataAttributes & {
     size?: TextSize;
     ellipsis?: EllipsisProps;
     children?: ReactNode;
     className?: string;
     style?: CSSProperties;
+    /** Renders the text with a heavier (500) weight. */
+    strong?: boolean;
 };
-export declare const Text: ({ size, className, children, ellipsis, style, }: TextProps) => React.JSX.Element;
+export declare const Text: ({ size, className, children, ellipsis, style, strong, ...dataAttributes }: TextProps) => React.JSX.Element;
 export default Text;

package/dist/Text.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
 import { XSmallText, SmallText, MediumText } from "./CommonElements.js";
 import { Ellipsis } from "./Ellipsis.js";
-import "./style/index.css";
 const MapSizeToComponent = {
   medium: MediumText,
   small: SmallText,
@@ -12,15 +12,21 @@ const Text = ({
   className,
   children,
   ellipsis,
-  style
+  style,
+  strong,
+  ...dataAttributes
 }) => {
   const Component = MapSizeToComponent[size];
-  const textClassNames = `ds-text ${!ellipsis && className}`;
-  const content = /* @__PURE__ */ jsx(Component, { className: textClassNames, children });
+  const mergedStyle = strong ? {
+    fontWeight: 500,
+    ...style
+  } : style;
   if (ellipsis === void 0) {
-    return content;
+    return /* @__PURE__ */ jsx(Component, { ...dataAttributes, className: classNames("ds-text", className), style: mergedStyle, children });
   }
-  return /* @__PURE__ */ jsx(Ellipsis, { className, style, ...ellipsis, children: content });
+  return /* @__PURE__ */ jsx(Ellipsis, { ...dataAttributes, className, style, ...ellipsis, children: /* @__PURE__ */ jsx(Component, { className: "ds-text", style: strong ? {
+    fontWeight: 500
+  } : void 0, children }) });
 };
 export {
   Text,

package/dist/Title.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { Props } from './Title.types';
-declare const Title: ({ level, withoutMargin, children, className, ellipsis, ...antdProps }: Props) => React.JSX.Element;
+declare const Title: ({ level, withoutMargin, children, className, ellipsis, ...rest }: Props) => React.JSX.Element;
 export default Title;

package/dist/Title.js

@@ -17,11 +17,11 @@ const Title = ({
   children,
   className,
   ellipsis,
-  ...antdProps
+  ...rest
 }) => {
   const TitleElement = StyledElements[level];
   const elementClassName = classNames("ds-title", className);
-  const content = /* @__PURE__ */ jsx(TitleElement, { ...antdProps, className: elementClassName, withoutMargin: Boolean(withoutMargin), children });
+  const content = /* @__PURE__ */ jsx(TitleElement, { ...rest, className: elementClassName, withoutMargin: Boolean(withoutMargin), children });
   if (ellipsis === void 0) {
     return content;
   }

package/dist/Title.types.d.ts

@@ -1,6 +1,7 @@
-import { TitleProps } from 'antd/es/typography/Title';
+import { HTMLAttributes } from 'react';
+import { DataAttributes } from '@synerise/ds-utils';
 import { EllipsisProps } from './Ellipsis';
-export type Props = Omit<TitleProps, 'level' | 'ellipsis'> & {
+export type Props = HTMLAttributes<HTMLHeadingElement> & DataAttributes & {
     level: 1 | 2 | 3 | 4 | 5 | 6 | 7;
     withoutMargin?: boolean;
     ellipsis?: EllipsisProps;

package/dist/Typography.d.ts

@@ -1 +1,24 @@
-export { Typography as default } from 'antd';
+/**
+ * DS-native replacement for antd's `Typography` namespace (the former default export).
+ * `Title` / `Text` / `Paragraph` are the DS-implemented components — no antd, no duplication.
+ * antd-only members (`Link`, `copyable`, `editable`, …) are intentionally dropped: a repo-wide
+ * audit found zero usages across portal-ui-bridge, portal-next and universal-list.
+ */
+declare const Typography: {
+    Title: ({ level, withoutMargin, children, className, ellipsis, ...rest }: import('./Title.types').Props) => import("react").JSX.Element;
+    Text: ({ size, className, children, ellipsis, style, strong, ...dataAttributes }: import('@synerise/ds-utils').DataAttributes & {
+        size?: import('./Text').TextSize;
+        ellipsis?: import('./Ellipsis').EllipsisProps;
+        children?: import('react').ReactNode;
+        className?: string;
+        style?: import('react').CSSProperties;
+        strong?: boolean;
+    }) => import("react").JSX.Element;
+    Paragraph: ({ size, children, className, style, ...dataAttributes }: import('@synerise/ds-utils').DataAttributes & {
+        size?: "medium" | "small" | "xsmall";
+        children?: import('react').ReactNode;
+        className?: string;
+        style?: import('react').CSSProperties;
+    }) => import("react").JSX.Element;
+};
+export default Typography;

package/dist/Typography.js

@@ -1,4 +1,11 @@
-import { Typography } from "antd";
+import { Paragraph } from "./Paragraph.js";
+import { Text } from "./Text.js";
+import Title from "./Title.js";
+const Typography = {
+  Title,
+  Text,
+  Paragraph
+};
 export {
   Typography as default
 };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { Typography as default } from 'antd';
+export { default } from './Typography';
 export { Description, ErrorText, Label } from './CommonElements';
 export { default as Title } from './Title';
 export * from './Text';

package/dist/index.js

@@ -1,6 +1,6 @@
-import { Typography } from "antd";
+import { default as default2 } from "./Typography.js";
 import { Description, ErrorText, Label } from "./CommonElements.js";
-import { default as default2 } from "./Title.js";
+import { default as default3 } from "./Title.js";
 import { Text } from "./Text.js";
 import { Paragraph } from "./Paragraph.js";
 import * as style_macroUtils from "./style/macro-utils.js";
@@ -10,7 +10,7 @@ export {
   Label,
   Paragraph,
   Text,
-  default2 as Title,
-  Typography as default,
+  default3 as Title,
+  default2 as default,
   style_macroUtils as macro
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-typography",
-  "version": "1.1.25",
+  "version": "1.1.27",
   "description": "Typography UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -17,6 +17,7 @@
   "files": [
     "/dist",
     "CHANGELOG.md",
+    "CLAUDE.md",
     "README.md",
     "package.json",
     "LICENSE.md"
@@ -41,7 +42,8 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-tooltip": "^1.5.2",
+    "@synerise/ds-tooltip": "^1.5.4",
+    "@synerise/ds-utils": "^1.10.2",
     "classnames": "^2.5.1",
     "lodash.debounce": "^4.0.8"
   },
@@ -50,10 +52,9 @@
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
-    "antd": "4.24.16",
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "fe3379f50afdce6d8c61a2222ebbf03324107c95"
+  "gitHead": "d0a43cc43d8528a36f105aceea52ab470edb71d9"
 }

package/dist/style/index.css

@@ -1 +0,0 @@
-.ant-typography{color:#6a7580;word-break:break-word}.ant-typography.ant-typography-secondary{color:#232936}.ant-typography.ant-typography-success{color:#54cb0b}.ant-typography.ant-typography-warning{color:#fab700}.ant-typography.ant-typography-danger{color:#f52922}a.ant-typography.ant-typography-danger:active,a.ant-typography.ant-typography-danger:focus{color:#cf1313}a.ant-typography.ant-typography-danger:hover{color:#ff584d}.ant-typography.ant-typography-disabled{color:#b5bdc3;cursor:not-allowed;user-select:none}.ant-typography p,div.ant-typography{margin-bottom:1em}.ant-typography h1,div.ant-typography-h1,div.ant-typography-h1>textarea,h1.ant-typography{margin-bottom:.5em;color:#384350;font-weight:500;font-size:24px;line-height:1.23}.ant-typography h2,div.ant-typography-h2,div.ant-typography-h2>textarea,h2.ant-typography{margin-bottom:.5em;color:#384350;font-weight:500;font-size:21px;line-height:1.35}.ant-typography h3,div.ant-typography-h3,div.ant-typography-h3>textarea,h3.ant-typography{margin-bottom:.5em;color:#384350;font-weight:500;font-size:18px;line-height:1.35}.ant-typography h4,div.ant-typography-h4,div.ant-typography-h4>textarea,h4.ant-typography{margin-bottom:.5em;color:#384350;font-weight:500;font-size:16px;line-height:1.4}.ant-typography h5,div.ant-typography-h5,div.ant-typography-h5>textarea,h5.ant-typography{margin-bottom:.5em;color:#384350;font-weight:500;font-size:15px;line-height:1.5}.ant-typography+h1.ant-typography,.ant-typography+h2.ant-typography,.ant-typography+h3.ant-typography,.ant-typography+h4.ant-typography,.ant-typography+h5.ant-typography{margin-top:1.2em}.ant-typography div+h1,.ant-typography div+h2,.ant-typography div+h3,.ant-typography div+h4,.ant-typography div+h5,.ant-typography h1+h1,.ant-typography h1+h2,.ant-typography h1+h3,.ant-typography h1+h4,.ant-typography h1+h5,.ant-typography h2+h1,.ant-typography h2+h2,.ant-typography h2+h3,.ant-typography h2+h4,.ant-typography h2+h5,.ant-typography h3+h1,.ant-typography h3+h2,.ant-typography h3+h3,.ant-typography h3+h4,.ant-typography h3+h5,.ant-typography h4+h1,.ant-typography h4+h2,.ant-typography h4+h3,.ant-typography h4+h4,.ant-typography h4+h5,.ant-typography h5+h1,.ant-typography h5+h2,.ant-typography h5+h3,.ant-typography h5+h4,.ant-typography h5+h5,.ant-typography li+h1,.ant-typography li+h2,.ant-typography li+h3,.ant-typography li+h4,.ant-typography li+h5,.ant-typography p+h1,.ant-typography p+h2,.ant-typography p+h3,.ant-typography p+h4,.ant-typography p+h5,.ant-typography ul+h1,.ant-typography ul+h2,.ant-typography ul+h3,.ant-typography ul+h4,.ant-typography ul+h5{margin-top:1.2em}a.ant-typography-ellipsis,span.ant-typography-ellipsis{display:inline-block;max-width:100%}.ant-typography a,a.ant-typography{color:#0b68ff;outline:0;cursor:pointer;transition:color .3s;text-decoration:none}.ant-typography a:focus-visible,.ant-typography a:hover,a.ant-typography:focus-visible,a.ant-typography:hover{color:#238afe}.ant-typography a:active,a.ant-typography:active{color:#0b68ff}.ant-typography a:active,.ant-typography a:hover,a.ant-typography:active,a.ant-typography:hover{text-decoration:underline}.ant-typography a.ant-typography-disabled,.ant-typography a[disabled],a.ant-typography.ant-typography-disabled,a.ant-typography[disabled]{color:#b5bdc3;cursor:not-allowed}.ant-typography a.ant-typography-disabled:active,.ant-typography a.ant-typography-disabled:hover,.ant-typography a[disabled]:active,.ant-typography a[disabled]:hover,a.ant-typography.ant-typography-disabled:active,a.ant-typography.ant-typography-disabled:hover,a.ant-typography[disabled]:active,a.ant-typography[disabled]:hover{color:#b5bdc3}.ant-typography a.ant-typography-disabled:active,.ant-typography a[disabled]:active,a.ant-typography.ant-typography-disabled:active,a.ant-typography[disabled]:active{pointer-events:none}.ant-typography code{margin:0 .2em;padding:.2em .4em .1em;font-size:85%;background:rgba(150,150,150,.1);border:1px solid rgba(100,100,100,.2);border-radius:3px}.ant-typography kbd{margin:0 .2em;padding:.15em .4em .1em;font-size:90%;background:rgba(150,150,150,.06);border:1px solid rgba(100,100,100,.2);border-bottom-width:2px;border-radius:3px}.ant-typography mark{padding:0;background-color:#ffe58f}.ant-typography ins,.ant-typography u{text-decoration:underline;text-decoration-skip-ink:auto}.ant-typography del,.ant-typography s{text-decoration:line-through}.ant-typography strong{font-weight:600}.ant-typography-copy,.ant-typography-edit,.ant-typography-expand{color:#0b68ff;outline:0;cursor:pointer;transition:color .3s;margin-left:4px}.ant-typography-copy:focus-visible,.ant-typography-copy:hover,.ant-typography-edit:focus-visible,.ant-typography-edit:hover,.ant-typography-expand:focus-visible,.ant-typography-expand:hover{color:#238afe}.ant-typography-copy:active,.ant-typography-edit:active,.ant-typography-expand:active{color:#0b68ff}.ant-typography-copy-success,.ant-typography-copy-success:focus,.ant-typography-copy-success:hover{color:#54cb0b}.ant-typography-edit-content{position:relative}div.ant-typography-edit-content{left:-16px;margin-top:-5px;margin-bottom:calc(1em - 4px - 1px)}.ant-typography-edit-content-confirm{position:absolute;right:10px;bottom:8px;color:#232936;font-weight:400;font-size:13px;font-style:normal;pointer-events:none}.ant-typography-edit-content textarea{height:1em;margin:0!important;-moz-transition:none}.ant-typography ol,.ant-typography ul{margin:0 0 1em;padding:0}.ant-typography ol li,.ant-typography ul li{margin:0 0 0 20px;padding:0 0 0 4px}.ant-typography ul{list-style-type:circle}.ant-typography ul ul{list-style-type:disc}.ant-typography ol{list-style-type:decimal}.ant-typography blockquote,.ant-typography pre{margin:1em 0}.ant-typography pre{padding:.4em .6em;white-space:pre-wrap;word-wrap:break-word;background:rgba(150,150,150,.1);border:1px solid rgba(100,100,100,.2);border-radius:3px}.ant-typography pre code{display:inline;margin:0;padding:0;font-size:inherit;font-family:inherit;background:0 0;border:0}.ant-typography blockquote{padding:0 0 0 .6em;border-left:4px solid rgba(100,100,100,.2);opacity:.85}.ant-typography-single-line{white-space:nowrap}.ant-typography-ellipsis-single-line{overflow:hidden;text-overflow:ellipsis}a.ant-typography-ellipsis-single-line,span.ant-typography-ellipsis-single-line{vertical-align:bottom}.ant-typography-ellipsis-multiple-line{display:-webkit-box;overflow:hidden;-webkit-line-clamp:3;/*! autoprefixer: ignore next */-webkit-box-orient:vertical}.ant-typography-rtl{direction:rtl}.ant-typography-rtl .ant-typography-copy,.ant-typography-rtl .ant-typography-edit,.ant-typography-rtl .ant-typography-expand{margin-right:4px;margin-left:0}.ant-typography-rtl .ant-typography-expand{float:left}div.ant-typography-edit-content.ant-typography-rtl{right:-16px;left:auto}.ant-typography-rtl .ant-typography-edit-content-confirm{right:auto;left:10px}.ant-typography-rtl.ant-typography ol li,.ant-typography-rtl.ant-typography ul li{margin:0 20px 0 0;padding:0 4px 0 0}