mosuk-ui 1.0.2 → 1.0.3

package/components/texts/h2/component/index.d.ts

@@ -1,19 +1,6 @@
 import { H2 as BaseH2 } from './component';
 import type { H2Props } from './component.interface';
-import { H2Icon } from './icon/component';
-import { H2IconProps } from './icon/component.interface';
-import { H2Text } from './text/component';
-import { H2TextProps } from './text/component.interface';
-export declare const H2: typeof BaseH2 & {
-    Icon: typeof H2Icon;
-    Text: typeof H2Text;
-};
+export declare const H2: typeof BaseH2;
 export declare namespace H2 {
     type Props = H2Props;
-    namespace Icon {
-        type Props = H2IconProps;
-    }
-    namespace Text {
-        type Props = H2TextProps;
-    }
 }

package/components/texts/h2/component/index.js

@@ -1,7 +1,2 @@
 import { H2 as BaseH2 } from './component';
-import { H2Icon } from './icon/component';
-import { H2Text } from './text/component';
-export var H2 = Object.assign(BaseH2, {
-    Icon: H2Icon,
-    Text: H2Text,
-});
+export var H2 = BaseH2;

package/components/texts/h2/skeleton/component.d.ts

@@ -1,3 +1,3 @@
 import React, { ElementType } from 'react';
 import { H2SkeletonProps } from './component.interface';
-export declare function H2Skeleton<C extends ElementType = 'div'>({ as, ...rest }: H2SkeletonProps<C>): React.JSX.Element;
+export declare function H2Skeleton<C extends ElementType = 'h2'>({ as, ...rest }: H2SkeletonProps<C>): React.JSX.Element;

package/components/texts/h2/skeleton/component.interface.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
-export type H2SkeletonProps<C extends ElementType = 'div'> = {
+export type H2SkeletonProps<C extends ElementType = 'h2'> = {
     as?: C;
     ref?: Ref<any>;
 } & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/texts/h2/skeleton/component.js

@@ -22,9 +22,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import classNames from 'classnames';
 import React from 'react';
+import { Skeleton } from '../../../display/skeleton/component/component';
 import styles from './component.module.css';
 export function H2Skeleton(_a) {
     var as = _a.as, rest = __rest(_a, ["as"]);
-    var Component = (as || 'div');
-    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-h2-skeleton', styles.h2, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+    var Component = (as || 'h2');
+    return (React.createElement(Skeleton, __assign({}, rest, { as: Component, className: classNames('mosuk-h2-skeleton', styles.h2, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
 }

package/components/texts/h2/skeleton/component.module.css

@@ -1,60 +1,16 @@
 @layer mosuk-ui {
-    @layer index-10 {
+    @layer index-11 {
         .h2 {
-            display: block;
+            display: inline-block;
 
             width: 100%;
+            height: 1.2em;
+            min-height: 1.2em;
 
-            font-size: 1.125rem;
-            text-align: start;
-            line-height: 0;
+            font-size: var(--text-lg, 1.125rem);
+            line-height: var(--leading-none, 1);
 
-            .text {
-                display: inline-flex;
-
-                width: 100%;
-                height: 1.2;
-                min-height: 1.2em;
-
-                line-height: 0;
-
-                border-radius: calc(infinity * 1px);
-            }
-
-            &:has(.icon) {
-                .text {
-                    display: inline-flex;
-
-                    width: 50%;
-                    max-width: calc(100% - calc(var(--spacing, .25rem) * 9) - calc(var(--spacing, .25rem) * 2.5));
-
-                    line-height: var(--leading-relaxed, 1.625);
-                    vertical-align: top;
-
-                    margin-top: 0.25em;
-                    margin-left: calc(var(--spacing, .25rem) * 2.5);
-                }
-            }
-        }
-    }
-
-    @layer index-20 {
-        .h2 {
-            &:has(.icon) {
-                .icon {
-                    display: inline-flex;
-
-                    width: calc(var(--spacing, .25rem) * 9);
-                    height: calc(var(--spacing, .25rem) * 9);
-                    min-width: calc(var(--spacing, .25rem) * 9);
-                    min-height: calc(var(--spacing, .25rem) * 9);
-                    font-size: var(--text-base, 1rem);
-
-                    padding: calc(var(--spacing, .25rem) * 2.5);
-
-                    cursor: default;
-                }
-            }
+            border-radius: calc(infinity * 1px);
         }
     }
 }

package/components/texts/h2/skeleton/index.d.ts

@@ -1,19 +1,6 @@
 import { H2Skeleton as BaseH2Skeleton } from './component';
-import { H2SkeletonProps } from './component.interface';
-import { H2IconSKeleton } from './icon/component';
-import { H2IconSkeletonProps } from './icon/component.interface';
-import { H2TextSkeleton } from './text/component';
-import { H2TextSkeletonProps } from './text/component.interface';
-export declare const H2Skeleton: typeof BaseH2Skeleton & {
-    Icon: typeof H2IconSKeleton;
-    Text: typeof H2TextSkeleton;
-};
-export declare namespace H2 {
+import type { H2SkeletonProps } from './component.interface';
+export declare const H2Skeleton: typeof BaseH2Skeleton;
+export declare namespace H2Skeleton {
     type Props = H2SkeletonProps;
-    namespace Icon {
-        type Props = H2IconSkeletonProps;
-    }
-    namespace Text {
-        type Props = H2TextSkeletonProps;
-    }
 }

package/components/texts/h2/skeleton/index.js

@@ -1,7 +1,2 @@
 import { H2Skeleton as BaseH2Skeleton } from './component';
-import { H2IconSKeleton } from './icon/component';
-import { H2TextSkeleton } from './text/component';
-export var H2Skeleton = Object.assign(BaseH2Skeleton, {
-    Icon: H2IconSKeleton,
-    Text: H2TextSkeleton,
-});
+export var H2Skeleton = BaseH2Skeleton;

package/components/texts/h3/component/component.module.css

@@ -1,11 +1,8 @@
 @layer mosuk-ui {
-    @layer index-10 {
+    @layer index-12 {
         .h3 {
-            display: block;
-
             font-size: var(--text-base, 1rem);
             font-weight: 500;
-            text-align: start;
             line-height: var(--leading-relaxed, 1.625);
 
             transition: all 200ms ease-in-out;
@@ -13,43 +10,6 @@
             &:not(:hover) {
                 transition: all 600ms ease-in-out;
             }
-
-            &:has(.icon) {
-                line-height: 0;
-
-                .text {
-                    display: inline-flex;
-
-                    width: auto;
-                    max-width: calc(100% - calc(var(--spacing, .25rem) * 8) - calc(var(--spacing, .25rem) * 2.5));
-
-                    line-height: var(--leading-relaxed, 1.625);
-                    vertical-align: top;
-
-                    margin-top: 0.2em;
-                    margin-left: calc(var(--spacing, .25rem) * 2.5);
-                }
-            }
-        }
-    }
-
-    @layer index-20 {
-        .h3 {
-            &:has(.icon) {
-                .icon {
-                    display: inline-flex;
-
-                    width: calc(var(--spacing, .25rem) * 8);
-                    height: calc(var(--spacing, .25rem) * 8);
-                    min-width: calc(var(--spacing, .25rem) * 8);
-                    min-height: calc(var(--spacing, .25rem) * 8);
-                    font-size: var(--text-base, 1rem);
-
-                    padding: calc(var(--spacing, .25rem) * 2.5);
-
-                    cursor: default;
-                }
-            }
         }
     }
 }

package/components/texts/h3/component/index.d.ts

@@ -1,19 +1,6 @@
 import { H3 as BaseH3 } from './component';
 import type { H3Props } from './component.interface';
-import { H3Icon } from './icon/component';
-import { H3IconProps } from './icon/component.interface';
-import { H3Text } from './text/component';
-import { H3TextProps } from './text/component.interface';
-export declare const H3: typeof BaseH3 & {
-    Icon: typeof H3Icon;
-    Text: typeof H3Text;
-};
+export declare const H3: typeof BaseH3;
 export declare namespace H3 {
     type Props = H3Props;
-    namespace Icon {
-        type Props = H3IconProps;
-    }
-    namespace Text {
-        type Props = H3TextProps;
-    }
 }

package/components/texts/h3/component/index.js

@@ -1,7 +1,2 @@
 import { H3 as BaseH3 } from './component';
-import { H3Icon } from './icon/component';
-import { H3Text } from './text/component';
-export var H3 = Object.assign(BaseH3, {
-    Icon: H3Icon,
-    Text: H3Text,
-});
+export var H3 = BaseH3;

package/components/texts/h3/skeleton/component.d.ts

@@ -1,3 +1,3 @@
 import React, { ElementType } from 'react';
 import { H3SkeletonProps } from './component.interface';
-export declare function H3Skeleton<C extends ElementType = 'div'>({ as, ...rest }: H3SkeletonProps<C>): React.JSX.Element;
+export declare function H3Skeleton<C extends ElementType = 'h3'>({ as, ...rest }: H3SkeletonProps<C>): React.JSX.Element;

package/components/texts/h3/skeleton/component.interface.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
-export type H3SkeletonProps<C extends ElementType = 'div'> = {
+export type H3SkeletonProps<C extends ElementType = 'h3'> = {
     as?: C;
     ref?: Ref<any>;
 } & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/texts/h3/skeleton/component.js

@@ -22,9 +22,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import classNames from 'classnames';
 import React from 'react';
+import { Skeleton } from '../../../display/skeleton/component/component';
 import styles from './component.module.css';
 export function H3Skeleton(_a) {
     var as = _a.as, rest = __rest(_a, ["as"]);
-    var Component = (as || 'div');
-    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-h3-skeleton', styles.h3, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+    var Component = (as || 'h3');
+    return (React.createElement(Skeleton, __assign({}, rest, { as: Component, className: classNames('mosuk-h3-skeleton', styles.h3, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
 }

package/components/texts/h3/skeleton/component.module.css

@@ -1,60 +1,16 @@
 @layer mosuk-ui {
-    @layer index-10 {
+    @layer index-11 {
         .h3 {
-            display: block;
+            display: inline-block;
 
             width: 100%;
+            height: 1.2em;
+            min-height: 1.2em;
 
             font-size: var(--text-base, 1rem);
-            text-align: start;
-            line-height: 0;
+            line-height: var(--leading-none, 1);
 
-            .text {
-                display: inline-flex;
-
-                width: 100%;
-                height: 1.2em;
-                min-height: 1.2em;
-
-                line-height: 0;
-
-                border-radius: calc(infinity * 1px);
-            }
-
-            &:has(.icon) {                
-                .text {
-                    display: inline-flex;
-
-                    width: 50%;
-                    max-width: calc(100% - calc(var(--spacing, .25rem) * 8) - calc(var(--spacing, .25rem) * 2.5));
-
-                    line-height: var(--leading-relaxed, 1.625);
-                    vertical-align: top;
-
-                    margin-top: 0.2em;
-                    margin-left: calc(var(--spacing, .25rem) * 2.5);
-                }
-            }
-        }
-    }
-
-    @layer index-20 {
-        .h3 {
-            &:has(.icon) {
-                .icon {
-                    display: inline-flex;
-
-                    width: calc(var(--spacing, .25rem) * 8);
-                    height: calc(var(--spacing, .25rem) * 8);
-                    min-width: calc(var(--spacing, .25rem) * 8);
-                    min-height: calc(var(--spacing, .25rem) * 8);
-                    font-size: var(--text-base, 1rem);
-
-                    padding: calc(var(--spacing, .25rem) * 2.5);
-
-                    cursor: default;
-                }
-            }
+            border-radius: calc(infinity * 1px);
         }
     }
 }

package/components/texts/h3/skeleton/index.d.ts

@@ -1,19 +1,6 @@
 import { H3Skeleton as BaseH3Skeleton } from './component';
-import { H3SkeletonProps } from './component.interface';
-import { H3IconSKeleton } from './icon/component';
-import { H3IconSkeletonProps } from './icon/component.interface';
-import { H3TextSkeleton } from './text/component';
-import { H3TextSkeletonProps } from './text/component.interface';
-export declare const H3Skeleton: typeof BaseH3Skeleton & {
-    Icon: typeof H3IconSKeleton;
-    Text: typeof H3TextSkeleton;
-};
-export declare namespace H3 {
+import type { H3SkeletonProps } from './component.interface';
+export declare const H3Skeleton: typeof BaseH3Skeleton;
+export declare namespace H3Skeleton {
     type Props = H3SkeletonProps;
-    namespace Icon {
-        type Props = H3IconSkeletonProps;
-    }
-    namespace Text {
-        type Props = H3TextSkeletonProps;
-    }
 }

package/components/texts/h3/skeleton/index.js

@@ -1,7 +1,2 @@
 import { H3Skeleton as BaseH3Skeleton } from './component';
-import { H3IconSKeleton } from './icon/component';
-import { H3TextSkeleton } from './text/component';
-export var H3Skeleton = Object.assign(BaseH3Skeleton, {
-    Icon: H3IconSKeleton,
-    Text: H3TextSkeleton,
-});
+export var H3Skeleton = BaseH3Skeleton;

package/components/texts/h4/component/component.module.css

@@ -1,11 +1,8 @@
 @layer mosuk-ui {
-    @layer index-10 {
+    @layer index-12 {
         .h4 {
-            display: block;
-
             font-size: var(--text-sm, 0.875rem);
             font-weight: 500;
-            text-align: start;
             line-height: var(--leading-relaxed, 1.625);
 
             transition: all 200ms ease-in-out;
@@ -13,47 +10,6 @@
             &:not(:hover) {
                 transition: all 600ms ease-in-out;
             }
-
-            &:has(.icon) {
-                line-height: 0;
-
-                .text {
-                    display: inline-flex;
-
-                    width: auto;
-                    max-width: calc(100% - calc(var(--spacing, .25rem) * 7) - calc(var(--spacing, .25rem) * 2));
-
-                    line-height: var(--leading-relaxed, 1.625);
-                    vertical-align: top;
-
-                    margin-top: 0.15em;
-                    margin-left: calc(var(--spacing, .25rem) * 2);
-                }
-            }
-
-            &:not(:hover) {
-                transition: all 600ms ease-in-out;
-            }
-        }
-    }
-
-    @layer index-20 {
-        .h4 {
-            &:has(.icon) {
-                .icon {
-                    display: inline-flex;
-
-                    width: calc(var(--spacing, .25rem) * 7);
-                    height: calc(var(--spacing, .25rem) * 7);
-                    min-width: calc(var(--spacing, .25rem) * 7);
-                    min-height: calc(var(--spacing, .25rem) * 7);
-                    font-size: var(--text-base, 1rem);
-
-                    padding: calc(var(--spacing, .25rem) * 2);
-
-                    cursor: default;
-                }
-            }
         }
     }
 }

package/components/texts/h4/component/index.d.ts

@@ -1,19 +1,6 @@
 import { H4 as BaseH4 } from './component';
 import type { H4Props } from './component.interface';
-import { H4Icon } from './icon/component';
-import { H4IconProps } from './icon/component.interface';
-import { H4Text } from './text/component';
-import { H4TextProps } from './text/component.interface';
-export declare const H4: typeof BaseH4 & {
-    Icon: typeof H4Icon;
-    Text: typeof H4Text;
-};
+export declare const H4: typeof BaseH4;
 export declare namespace H4 {
     type Props = H4Props;
-    namespace Icon {
-        type Props = H4IconProps;
-    }
-    namespace Text {
-        type Props = H4TextProps;
-    }
 }

package/components/texts/h4/component/index.js

@@ -1,7 +1,2 @@
 import { H4 as BaseH4 } from './component';
-import { H4Icon } from './icon/component';
-import { H4Text } from './text/component';
-export var H4 = Object.assign(BaseH4, {
-    Icon: H4Icon,
-    Text: H4Text,
-});
+export var H4 = BaseH4;

package/components/texts/h4/skeleton/component.d.ts

@@ -1,3 +1,3 @@
 import React, { ElementType } from 'react';
 import { H4SkeletonProps } from './component.interface';
-export declare function H4Skeleton<C extends ElementType = 'div'>({ as, ...rest }: H4SkeletonProps<C>): React.JSX.Element;
+export declare function H4Skeleton<C extends ElementType = 'h4'>({ as, ...rest }: H4SkeletonProps<C>): React.JSX.Element;

package/components/texts/h4/skeleton/component.interface.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
-export type H4SkeletonProps<C extends ElementType = 'div'> = {
+export type H4SkeletonProps<C extends ElementType = 'h4'> = {
     as?: C;
     ref?: Ref<any>;
 } & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/texts/h4/skeleton/component.js

@@ -22,9 +22,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import classNames from 'classnames';
 import React from 'react';
+import { Skeleton } from '../../../display/skeleton/component/component';
 import styles from './component.module.css';
 export function H4Skeleton(_a) {
     var as = _a.as, rest = __rest(_a, ["as"]);
-    var Component = (as || 'div');
-    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-h4-skeleton', styles.h4, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+    var Component = (as || 'h4');
+    return (React.createElement(Skeleton, __assign({}, rest, { as: Component, className: classNames('mosuk-h4-skeleton', styles.h4, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
 }

package/components/texts/h4/skeleton/component.module.css

@@ -1,60 +1,16 @@
 @layer mosuk-ui {
-    @layer index-10 {
+    @layer index-11 {
         .h4 {
-            display: block;
+            display: inline-block;
 
             width: 100%;
+            height: 1.2em;
+            min-height: 1.2em;
 
             font-size: var(--text-sm, 0.875rem);
-            text-align: start;
-            line-height: 0;
+            line-height: var(--leading-none, 1);
 
-            .text {
-                display: inline-flex;
-
-                width: 100%;
-                height: 1.2em;
-                min-height: 1.2em;
-
-                line-height: 0;
-
-                border-radius: calc(infinity * 1px);
-            }
-
-            &:has(.icon) {
-                .text {
-                    display: inline-flex;
-
-                    width: 50%;
-                    max-width: calc(100% - calc(var(--spacing, .25rem) * 7) - calc(var(--spacing, .25rem) * 2));
-
-                    line-height: var(--leading-relaxed, 1.625);
-                    vertical-align: top;
-
-                    margin-top: 0.4em;
-                    margin-left: calc(var(--spacing, .25rem) * 2);
-                }
-            }
-        }
-    }
-
-    @layer index-20 {
-        .h4 {
-            &:has(.icon) {
-                .icon {
-                    display: inline-flex;
-
-                    width: calc(var(--spacing, .25rem) * 7);
-                    height: calc(var(--spacing, .25rem) * 7);
-                    min-width: calc(var(--spacing, .25rem) * 7);
-                    min-height: calc(var(--spacing, .25rem) * 7);
-                    font-size: var(--text-base, 1rem);
-
-                    padding: calc(var(--spacing, .25rem) * 2);
-
-                    cursor: default;
-                }
-            }
+            border-radius: calc(infinity * 1px);
         }
     }
 }

package/components/texts/h4/skeleton/index.d.ts

@@ -1,19 +1,6 @@
 import { H4Skeleton as BaseH4Skeleton } from './component';
-import { H4SkeletonProps } from './component.interface';
-import { H4IconSKeleton } from './icon/component';
-import { H4IconSkeletonProps } from './icon/component.interface';
-import { H4TextSkeleton } from './text/component';
-import { H4TextSkeletonProps } from './text/component.interface';
-export declare const H4Skeleton: typeof BaseH4Skeleton & {
-    Icon: typeof H4IconSKeleton;
-    Text: typeof H4TextSkeleton;
-};
-export declare namespace H4 {
+import type { H4SkeletonProps } from './component.interface';
+export declare const H4Skeleton: typeof BaseH4Skeleton;
+export declare namespace H4Skeleton {
     type Props = H4SkeletonProps;
-    namespace Icon {
-        type Props = H4IconSkeletonProps;
-    }
-    namespace Text {
-        type Props = H4TextSkeletonProps;
-    }
 }

package/components/texts/h4/skeleton/index.js

@@ -1,7 +1,2 @@
 import { H4Skeleton as BaseH4Skeleton } from './component';
-import { H4IconSKeleton } from './icon/component';
-import { H4TextSkeleton } from './text/component';
-export var H4Skeleton = Object.assign(BaseH4Skeleton, {
-    Icon: H4IconSKeleton,
-    Text: H4TextSkeleton,
-});
+export var H4Skeleton = BaseH4Skeleton;

package/components/texts/h5/component/component.module.css

@@ -1,11 +1,8 @@
 @layer mosuk-ui {
-    @layer index-10 {
+    @layer index-12 {
         .h5 {
-            display: block;
-
             font-size: var(--text-xs, 0.75rem);
             font-weight: 500;
-            text-align: start;
             line-height: var(--leading-relaxed, 1.625);
 
             transition: all 200ms ease-in-out;
@@ -13,43 +10,6 @@
             &:not(:hover) {
                 transition: all 600ms ease-in-out;
             }
-
-            &:has(.icon) {
-                line-height: 0;
-
-                .text {
-                    display: inline-flex;
-
-                    width: auto;
-                    max-width: calc(100% - calc(var(--spacing, .25rem) * 6) - calc(var(--spacing, .25rem) * 1.75));
-
-                    line-height: var(--leading-relaxed, 1.625);
-                    vertical-align: top;
-
-                    margin-top: 0.20em;
-                    margin-left: calc(var(--spacing, .25rem) * 1.75);
-                }
-            }
-        }
-    }
-
-    @layer index-20 {
-        .h5 {
-            &:has(.icon) {
-                .icon {
-                    display: inline-flex;
-
-                    width: calc(var(--spacing, .25rem) * 6);
-                    height: calc(var(--spacing, .25rem) * 6);
-                    min-width: calc(var(--spacing, .25rem) * 6);
-                    min-height: calc(var(--spacing, .25rem) * 6);
-                    font-size: var(--text-base, 1rem);
-
-                    padding: calc(var(--spacing, .25rem) * 1.75);
-
-                    cursor: default;
-                }
-            }
         }
     }
 }