@pushwoosh/kit-typography 1.8.7 → 1.10.0

package/code/code.component.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { CodeBox } from './code.styles';
+import { CodeBox } from './styles';
 /** Monospaced text block — renders `<div>` with the `code` typography variant. */
 export function Code(props) {
   const {

package/code/index.d.ts

@@ -1,3 +1,3 @@
 export * from './code.component';
-export * from './code.styles';
+export * from './styles';
 export * from './code.types';

package/code/index.js

@@ -1,3 +1,3 @@
 export * from './code.component';
-export * from './code.styles';
+export * from './styles';
 export * from './code.types';

package/code/styles.d.ts

@@ -0,0 +1,4 @@
+/** Styled `<div>` behind {@link Code}; use it when you need to extend the styles. */
+export declare const CodeBox: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;

package/code/{code.styles.js → styles.js}

@@ -3,6 +3,6 @@ import { variants } from '../map';
 /** Styled `<div>` behind {@link Code}; use it when you need to extend the styles. */
 export const CodeBox = styled.div.withConfig({
   displayName: "CodeBox",
-  componentId: "sc-15hd43f-0"
+  componentId: "sc-fzmnuy-0"
 })(["", ""], variants.code);
 CodeBox.displayName = 'CodeBox';

package/footnote/footnote.component.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { FootnoteBox } from './footnote.styles';
+import { FootnoteBox } from './styles';
 /** Small secondary text — renders `<div>` with the `footnote` typography variant. */
 export function Footnote(props) {
   const {

package/footnote/index.d.ts

@@ -1,3 +1,3 @@
 export * from './footnote.component';
-export * from './footnote.styles';
+export * from './styles';
 export * from './footnote.types';

package/footnote/index.js

@@ -1,3 +1,3 @@
 export * from './footnote.component';
-export * from './footnote.styles';
+export * from './styles';
 export * from './footnote.types';

package/footnote/styles.d.ts

@@ -0,0 +1,4 @@
+/** Styled `<div>` behind {@link Footnote}; use it when you need to extend the styles. */
+export declare const FootnoteBox: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;

package/footnote/{footnote.styles.js → styles.js}

@@ -3,6 +3,6 @@ import { variants } from '../map';
 /** Styled `<div>` behind {@link Footnote}; use it when you need to extend the styles. */
 export const FootnoteBox = styled.div.withConfig({
   displayName: "FootnoteBox",
-  componentId: "sc-1yebxfg-0"
+  componentId: "sc-f46k3r-0"
 })(["", ""], variants.footnote);
 FootnoteBox.displayName = 'FootnoteBox';

package/global-styles/global-styles.component.d.ts

@@ -2,4 +2,4 @@
  * App-wide baseline, mounted once at the app root: border-box sizing, body typography and link colours
  * from the kit tokens, antialiased smoothing, and a cleared focus outline on `button` and `a`.
  */
-export declare const GlobalStyles: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+export declare const GlobalStyles: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;

package/h1/h1.component.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { H1Box } from './h1.styles';
+import { H1Box } from './styles';
 /** Page title — renders `<h1>` with the `h1` typography variant. */
 export function H1(props) {
   const {

package/h1/index.d.ts

@@ -1,3 +1,3 @@
 export * from './h1.component';
-export * from './h1.styles';
+export * from './styles';
 export * from './h1.types';

package/h1/index.js

@@ -1,3 +1,3 @@
 export * from './h1.component';
-export * from './h1.styles';
+export * from './styles';
 export * from './h1.types';

package/h1/styles.d.ts

@@ -0,0 +1,4 @@
+/** Styled `<h1>` behind {@link H1}; use it when you need to extend the styles. */
+export declare const H1Box: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;

package/h1/{h1.styles.js → styles.js}

@@ -3,6 +3,6 @@ import { variants } from '../map';
 /** Styled `<h1>` behind {@link H1}; use it when you need to extend the styles. */
 export const H1Box = styled.h1.withConfig({
   displayName: "H1Box",
-  componentId: "sc-nenzzw-0"
+  componentId: "sc-58pfxn-0"
 })(["margin:0;", ""], variants.h1);
 H1Box.displayName = 'H1Box';

package/h2/h2.component.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { H2Box } from './h2.styles';
+import { H2Box } from './styles';
 /** Section heading — renders `<h2>` with the `h2` typography variant. */
 export function H2(props) {
   const {

package/h2/index.d.ts

@@ -1,3 +1,3 @@
 export * from './h2.component';
-export * from './h2.styles';
+export * from './styles';
 export * from './h2.types';

package/h2/index.js

@@ -1,3 +1,3 @@
 export * from './h2.component';
-export * from './h2.styles';
+export * from './styles';
 export * from './h2.types';

package/h2/styles.d.ts

@@ -0,0 +1,4 @@
+/** Styled `<h2>` behind {@link H2}; use it when you need to extend the styles. */
+export declare const H2Box: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;

package/h2/{h2.styles.js → styles.js}

@@ -3,6 +3,6 @@ import { variants } from '../map';
 /** Styled `<h2>` behind {@link H2}; use it when you need to extend the styles. */
 export const H2Box = styled.h2.withConfig({
   displayName: "H2Box",
-  componentId: "sc-ev7pmn-0"
+  componentId: "sc-1a137gg-0"
 })(["margin:0;", ""], variants.h2);
 H2Box.displayName = 'H2Box';

package/h3/h3.component.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { H3Box } from './h3.styles';
+import { H3Box } from './styles';
 /** Sub-section heading — renders `<h3>` with the `h3` typography variant. */
 export function H3(props) {
   const {

package/h3/index.d.ts

@@ -1,3 +1,3 @@
 export * from './h3.component';
-export * from './h3.styles';
+export * from './styles';
 export * from './h3.types';

package/h3/index.js

@@ -1,3 +1,3 @@
 export * from './h3.component';
-export * from './h3.styles';
+export * from './styles';
 export * from './h3.types';

package/h3/styles.d.ts

@@ -0,0 +1,4 @@
+/** Styled `<h3>` behind {@link H3}; use it when you need to extend the styles. */
+export declare const H3Box: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;

package/h3/{h3.styles.js → styles.js}

@@ -3,6 +3,6 @@ import { variants } from '../map';
 /** Styled `<h3>` behind {@link H3}; use it when you need to extend the styles. */
 export const H3Box = styled.h3.withConfig({
   displayName: "H3Box",
-  componentId: "sc-mhts3r-0"
+  componentId: "sc-4j45cg-0"
 })(["margin:0;", ""], variants.h3);
 H3Box.displayName = 'H3Box';

package/h4/h4.component.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { H4Box } from './h4.styles';
+import { H4Box } from './styles';
 /** Small heading — renders `<h4>` with the `h4` typography variant. */
 export function H4(props) {
   const {

package/h4/index.d.ts

@@ -1,3 +1,3 @@
 export * from './h4.component';
-export * from './h4.styles';
+export * from './styles';
 export * from './h4.types';

package/h4/index.js

@@ -1,3 +1,3 @@
 export * from './h4.component';
-export * from './h4.styles';
+export * from './styles';
 export * from './h4.types';

package/h4/styles.d.ts

@@ -0,0 +1,4 @@
+/** Styled `<h4>` behind {@link H4}; use it when you need to extend the styles. */
+export declare const H4Box: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;

package/h4/{h4.styles.js → styles.js}

@@ -3,6 +3,6 @@ import { variants } from '../map';
 /** Styled `<h4>` behind {@link H4}; use it when you need to extend the styles. */
 export const H4Box = styled.h4.withConfig({
   displayName: "H4Box",
-  componentId: "sc-1178dfn-0"
+  componentId: "sc-1eb3cj5-0"
 })(["margin:0;", ""], variants.h4);
 H4Box.displayName = 'H4Box';

package/h5/h5.component.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { H5Box } from './h5.styles';
+import { H5Box } from './styles';
 /** Smallest heading, rendered uppercase — renders `<h5>` with the `h5` typography variant. */
 export function H5(props) {
   const {

package/h5/index.d.ts

@@ -1,3 +1,3 @@
 export * from './h5.component';
-export * from './h5.styles';
+export * from './styles';
 export * from './h5.types';

package/h5/index.js

@@ -1,3 +1,3 @@
 export * from './h5.component';
-export * from './h5.styles';
+export * from './styles';
 export * from './h5.types';

package/h5/styles.d.ts

@@ -0,0 +1,4 @@
+/** Styled `<h5>` behind {@link H5}; use it when you need to extend the styles. */
+export declare const H5Box: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;

package/h5/{h5.styles.js → styles.js}

@@ -3,6 +3,6 @@ import { variants } from '../map';
 /** Styled `<h5>` behind {@link H5}; use it when you need to extend the styles. */
 export const H5Box = styled.h5.withConfig({
   displayName: "H5Box",
-  componentId: "sc-1nc3vby-0"
+  componentId: "sc-uuwth8-0"
 })(["margin:0;", " text-transform:uppercase;"], variants.h5);
 H5Box.displayName = 'H5Box';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/kit-typography",
-  "version": "1.8.7",
+  "version": "1.10.0",
   "description": "React component for build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -11,19 +11,18 @@
     "directory": "dist"
   },
   "dependencies": {
-    "@pushwoosh/kit-constants": "^2.1.0"
+    "@pushwoosh/kit-constants": "^2.1.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.31",
     "@types/react-dom": "^18.3.7",
-    "@types/styled-components": "^5.1.34",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "styled-components": "^5.3.11"
+    "styled-components": "^6.5.3"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
-    "styled-components": ">=5.3.3"
+    "styled-components": "^6.5.3"
   },
   "engines": {
     "node": ">= 24"

package/paragraph/index.d.ts

@@ -1,3 +1,3 @@
 export * from './paragraph.component';
-export * from './paragraph.styles';
+export * from './styles';
 export * from './paragraph.types';

package/paragraph/index.js

@@ -1,3 +1,3 @@
 export * from './paragraph.component';
-export * from './paragraph.styles';
+export * from './styles';
 export * from './paragraph.types';

package/paragraph/paragraph.component.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ParagraphBox } from './paragraph.styles';
+import { ParagraphBox } from './styles';
 /** Body text — renders `<p>` with the `standard` variant; consecutive paragraphs get a top margin. */
 export function Paragraph(props) {
   const {

package/paragraph/styles.d.ts

@@ -0,0 +1,4 @@
+/** Styled `<p>` behind {@link Paragraph}; use it when you need to extend the styles. */
+export declare const ParagraphBox: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;

package/paragraph/{paragraph.styles.js → styles.js}

@@ -3,6 +3,6 @@ import { variants } from '../map';
 /** Styled `<p>` behind {@link Paragraph}; use it when you need to extend the styles. */
 export const ParagraphBox = styled.p.withConfig({
   displayName: "ParagraphBox",
-  componentId: "sc-1o1vp14-0"
+  componentId: "sc-6035vo-0"
 })(["margin:0;", " & + &{margin:0.5em 0 0;}"], variants.standard);
 ParagraphBox.displayName = 'ParagraphBox';

package/text/Text.d.ts

@@ -3,9 +3,11 @@ import { type TypographyVariant } from '../map';
  * Inline text in any typography variant: `$variant`, plus `$color`, `$uppercase` and `$ellipsis`.
  * `$ellipsis` needs a bounded width — it makes the span `inline-block` at `max-width: 100%`.
  */
-export declare const Text: import("styled-components").StyledComponent<"span", any, {
+export declare const Text: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $color?: string;
     $uppercase?: boolean;
     $ellipsis?: boolean;
     $variant?: TypographyVariant;
-}, never>;
+}>> & string;

package/code/code.styles.d.ts

@@ -1,2 +0,0 @@
-/** Styled `<div>` behind {@link Code}; use it when you need to extend the styles. */
-export declare const CodeBox: import("styled-components").StyledComponent<"div", any, {}, never>;

package/footnote/footnote.styles.d.ts

@@ -1,2 +0,0 @@
-/** Styled `<div>` behind {@link Footnote}; use it when you need to extend the styles. */
-export declare const FootnoteBox: import("styled-components").StyledComponent<"div", any, {}, never>;

package/h1/h1.styles.d.ts

@@ -1,2 +0,0 @@
-/** Styled `<h1>` behind {@link H1}; use it when you need to extend the styles. */
-export declare const H1Box: import("styled-components").StyledComponent<"h1", any, {}, never>;

package/h2/h2.styles.d.ts

@@ -1,2 +0,0 @@
-/** Styled `<h2>` behind {@link H2}; use it when you need to extend the styles. */
-export declare const H2Box: import("styled-components").StyledComponent<"h2", any, {}, never>;

package/h3/h3.styles.d.ts

@@ -1,2 +0,0 @@
-/** Styled `<h3>` behind {@link H3}; use it when you need to extend the styles. */
-export declare const H3Box: import("styled-components").StyledComponent<"h3", any, {}, never>;

package/h4/h4.styles.d.ts

@@ -1,2 +0,0 @@
-/** Styled `<h4>` behind {@link H4}; use it when you need to extend the styles. */
-export declare const H4Box: import("styled-components").StyledComponent<"h4", any, {}, never>;

package/h5/h5.styles.d.ts

@@ -1,2 +0,0 @@
-/** Styled `<h5>` behind {@link H5}; use it when you need to extend the styles. */
-export declare const H5Box: import("styled-components").StyledComponent<"h5", any, {}, never>;

package/paragraph/paragraph.styles.d.ts

@@ -1,2 +0,0 @@
-/** Styled `<p>` behind {@link Paragraph}; use it when you need to extend the styles. */
-export declare const ParagraphBox: import("styled-components").StyledComponent<"p", any, {}, never>;