mosuk-ui 1.0.2 → 1.0.4

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

@@ -1,15 +1,10 @@
 @layer mosuk-ui {
-    @layer index-10 {
+    @layer index-12 {
         .a {
-            display: block;
-
             font-size: var(--text-sm, 0.875rem);
             font-weight: 400;
-            text-align: start;
             line-height: var(--leading-relaxed, 1.625);
 
-            cursor: pointer;
-
             transition: all 200ms ease-in-out;
 
             &:not(:hover) {
@@ -19,75 +14,6 @@
             &:hover {
                 color: var(--color-primary-500, #0074e7);
             }
-
-            &: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.20em;
-                    margin-left: calc(var(--spacing, .25rem) * 2);
-                }
-
-                &:not(:hover) {
-                    .icon {
-                        transition: all 600ms ease-in-out;
-
-                        svg {
-                            transition: all 600ms ease-in-out;
-                        }
-                    }
-
-                    .text {
-                        transition: all 600ms ease-in-out;
-                    }
-                }
-
-                &:hover {
-                    .icon {
-                        background-color: var(--color-gray-100, oklch(0.967 0.003 264.542));
-                        color: var(--color-primary-500, #0074e7);
-
-                        svg {
-                            color: var(--color-primary-500, #0074e7);
-                            transition: all 200ms ease-in-out;
-                        }
-
-                        transition: all 200ms ease-in-out;
-                    }
-
-                    .text {
-                        color: var(--color-primary-500, #0074e7);
-                        transition: all 200ms ease-in-out;
-                    }
-                }
-            }
-        }
-    }
-
-    @layer index-20 {
-        .a {
-            &: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);
-                }
-            }
         }
     }
 }

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

@@ -1,19 +1,6 @@
 import { A as BaseA } from './component';
 import type { AProps } from './component.interface';
-import { AIcon } from './icon/component';
-import { AIconProps } from './icon/component.interface';
-import { AText } from './text/component';
-import { ATextProps } from './text/component.interface';
-export declare const A: typeof BaseA & {
-    Icon: typeof AIcon;
-    Text: typeof AText;
-};
+export declare const A: typeof BaseA;
 export declare namespace A {
     type Props = AProps;
-    namespace Icon {
-        type Props = AIconProps;
-    }
-    namespace Text {
-        type Props = ATextProps;
-    }
 }

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

@@ -1,7 +1,2 @@
 import { A as BaseA } from './component';
-import { AIcon } from './icon/component';
-import { AText } from './text/component';
-export var A = Object.assign(BaseA, {
-    Icon: AIcon,
-    Text: AText,
-});
+export var A = BaseA;

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

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

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

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

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

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

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

@@ -1,31 +1,16 @@
 @layer mosuk-ui {
-    @layer index-10 {
+    @layer index-11 {
         .a {
-            line-height: 0;
+            display: inline-block;
 
-            cursor: default;
+            width: 100%;
+            height: 1.2em;
+            min-height: 1.2em;
 
-            .text {
-                width: 100%;
-                height: 1.2em;
-                min-height: 1.2em;
+            font-size: var(--text-sm, 0.875rem);
+            line-height: var(--leading-none, 1);
 
-                line-height: 0;
-
-                border-radius: calc(infinity * 1px);
-            }
-
-            &:has(.icon) {
-                .icon {
-                    cursor: default;
-                }
-                
-                .text {
-                    width: 50%;
-
-                    margin-top: 0.4em;
-                }
-            }
+            border-radius: calc(infinity * 1px);
         }
     }
 }

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

@@ -1,19 +1,6 @@
 import { ASkeleton as BaseASkeleton } from './component';
-import { ASkeletonProps } from './component.interface';
-import { AIconSKeleton } from './icon/component';
-import { AIconSkeletonProps } from './icon/component.interface';
-import { ATextSkeleton } from './text/component';
-import { ATextSkeletonProps } from './text/component.interface';
-export declare const ASkeleton: typeof BaseASkeleton & {
-    Icon: typeof AIconSKeleton;
-    Text: typeof ATextSkeleton;
-};
-export declare namespace A {
+import type { ASkeletonProps } from './component.interface';
+export declare const ASkeleton: typeof BaseASkeleton;
+export declare namespace ASkeleton {
     type Props = ASkeletonProps;
-    namespace Icon {
-        type Props = AIconSkeletonProps;
-    }
-    namespace Text {
-        type Props = ATextSkeletonProps;
-    }
 }

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

@@ -1,7 +1,2 @@
 import { ASkeleton as BaseASkeleton } from './component';
-import { AIconSKeleton } from './icon/component';
-import { ATextSkeleton } from './text/component';
-export var ASkeleton = Object.assign(BaseASkeleton, {
-    Icon: AIconSKeleton,
-    Text: ATextSkeleton,
-});
+export var ASkeleton = BaseASkeleton;

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

@@ -7,7 +7,11 @@
         }
 
         .counter {
-            transition: --value 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
+            transition: --value 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
+
+            &:not(:hover) {
+                transition: --value 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
+            }
         }
     }
 }

package/components/texts/data/component/component.d.ts

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

package/components/texts/{p/component/text → data/component}/component.interface.d.ts

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

package/components/texts/{p/component/text → data/component}/component.js

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

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

@@ -0,0 +1,15 @@
+@layer mosuk-ui {
+    @layer index-12 {
+        .h3 {
+            font-size: var(--text-base, 1rem);
+            font-weight: 400;
+            line-height: var(--leading-relaxed, 1.625);
+
+            transition: all 200ms ease-in-out;
+
+            &:not(:hover) {
+                transition: all 600ms ease-in-out;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,6 @@
+import { Data as BaseData } from './component';
+import type { DataProps } from './component.interface';
+export declare const Data: typeof BaseData;
+export declare namespace Data {
+    type Props = DataProps;
+}

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

@@ -0,0 +1,2 @@
+import { Data as BaseData } from './component';
+export var Data = BaseData;

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

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

package/components/texts/{h1/component/text → data/skeleton}/component.interface.d.ts

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

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

@@ -0,0 +1,31 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React from 'react';
+import { Skeleton } from '../../../display/skeleton/component/component';
+import styles from './component.module.css';
+export function DataSkeleton(_a) {
+    var as = _a.as, rest = __rest(_a, ["as"]);
+    var Component = (as || 'div');
+    return (React.createElement(Skeleton, __assign({}, rest, { as: Component, className: classNames('mosuk-data-skeleton', styles.data, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

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

@@ -0,0 +1,16 @@
+@layer mosuk-ui {
+    @layer index-11 {
+        .data {
+            display: inline-block;
+
+            width: 100%;
+            height: 1.2em;
+            min-height: 1.2em;
+
+            font-size: var(--text-base, 1rem);
+            line-height: var(--leading-none, 1);
+
+            border-radius: calc(infinity * 1px);
+        }
+    }
+}

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

@@ -0,0 +1,6 @@
+import { DataSkeleton as BaseDataSkeleton } from './component';
+import type { DataSkeletonProps } from './component.interface';
+export declare const DataSkeleton: typeof BaseDataSkeleton;
+export declare namespace DataSkeleton {
+    type Props = DataSkeletonProps;
+}

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

@@ -0,0 +1,2 @@
+import { DataSkeleton as BaseDataSkeleton } from './component';
+export var DataSkeleton = BaseDataSkeleton;

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

@@ -1,11 +1,8 @@
 @layer mosuk-ui {
-    @layer index-10 {
+    @layer index-12 {
         .h1 {
-            display: block;
-
             font-size: var(--text-xl, 1.25rem);
             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) * 10) - calc(var(--spacing, .25rem) * 2.6125));
-
-                    line-height: var(--leading-relaxed, 1.625);
-                    vertical-align: top;
-
-                    margin-top: 0.15em;
-                    margin-left: calc(var(--spacing, .25rem) * 2.6125);
-                }
-            }
-        }
-    }
-
-    @layer index-20 {
-        .h1 {
-            &:has(.icon) {
-                .icon {
-                    display: inline-flex;
-
-                    width: calc(var(--spacing, .25rem) * 10);
-                    height: calc(var(--spacing, .25rem) * 10);
-                    min-width: calc(var(--spacing, .25rem) * 10);
-                    min-height: calc(var(--spacing, .25rem) * 10);
-                    font-size: var(--text-base, 1rem);
-
-                    padding: calc(var(--spacing, .25rem) * 2.6125);
-
-                    cursor: default;
-                }
-            }
         }
     }
 }

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

@@ -1,19 +1,6 @@
 import { H1 as BaseH1 } from './component';
 import type { H1Props } from './component.interface';
-import { H1Icon } from './icon/component';
-import { H1IconProps } from './icon/component.interface';
-import { H1Text } from './text/component';
-import { H1TextProps } from './text/component.interface';
-export declare const H1: typeof BaseH1 & {
-    Icon: typeof H1Icon;
-    Text: typeof H1Text;
-};
+export declare const H1: typeof BaseH1;
 export declare namespace H1 {
     type Props = H1Props;
-    namespace Icon {
-        type Props = H1IconProps;
-    }
-    namespace Text {
-        type Props = H1TextProps;
-    }
 }

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

@@ -1,7 +1,2 @@
 import { H1 as BaseH1 } from './component';
-import { H1Icon } from './icon/component';
-import { H1Text } from './text/component';
-export var H1 = Object.assign(BaseH1, {
-    Icon: H1Icon,
-    Text: H1Text,
-});
+export var H1 = BaseH1;

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

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

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

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

package/components/texts/h1/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 H1Skeleton(_a) {
     var as = _a.as, rest = __rest(_a, ["as"]);
-    var Component = (as || 'div');
-    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-h1-skeleton', styles.h1, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+    var Component = (as || 'h1');
+    return (React.createElement(Skeleton, __assign({}, rest, { as: Component, className: classNames('mosuk-h1-skeleton', styles.h1, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
 }

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

@@ -1,62 +1,16 @@
 @layer mosuk-ui {
-    @layer texts {
-        @layer layer-1 {
-            .h1 {
-                display: block;
-
-                width: 100%;
-
-                font-size: var(--text-xl, 1.25rem);
-                text-align: start;
-                line-height: 0;
-
-                .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) * 10) - calc(var(--spacing, .25rem) * 2.6125));
-
-                        line-height: var(--leading-relaxed, 1.625);
-                        vertical-align: top;
-
-                        margin-top: 0.15em;
-                        margin-left: calc(var(--spacing, .25rem) * 2.6125);
-                    }
-                }
-            }
-        }
-    }
-
-    @layer index-20 {
+    @layer index-11 {
         .h1 {
-            &:has(.icon) {
-                .icon {
-                    display: inline-flex;
+            display: inline-block;
 
-                    width: calc(var(--spacing, .25rem) * 10);
-                    height: calc(var(--spacing, .25rem) * 10);
-                    min-width: calc(var(--spacing, .25rem) * 10);
-                    min-height: calc(var(--spacing, .25rem) * 10);
-                    font-size: var(--text-base, 1rem);
+            width: 100%;
+            height: 1.2em;
+            min-height: 1.2em;
 
-                    padding: calc(var(--spacing, .25rem) * 2.6125);
+            font-size: var(--text-xl, 1.25rem);
+            line-height: var(--leading-none, 1);
 
-                    cursor: default;
-                }
-            }
+            border-radius: calc(infinity * 1px);
         }
     }
 }

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

@@ -1,19 +1,6 @@
 import { H1Skeleton as BaseH1Skeleton } from './component';
-import { H1SkeletonProps } from './component.interface';
-import { H1IconSKeleton } from './icon/component';
-import { H1IconSkeletonProps } from './icon/component.interface';
-import { H1TextSkeleton } from './text/component';
-import { H1TextSkeletonProps } from './text/component.interface';
-export declare const H1Skeleton: typeof BaseH1Skeleton & {
-    Icon: typeof H1IconSKeleton;
-    Text: typeof H1TextSkeleton;
-};
-export declare namespace H1 {
+import type { H1SkeletonProps } from './component.interface';
+export declare const H1Skeleton: typeof BaseH1Skeleton;
+export declare namespace H1Skeleton {
     type Props = H1SkeletonProps;
-    namespace Icon {
-        type Props = H1IconSkeletonProps;
-    }
-    namespace Text {
-        type Props = H1TextSkeletonProps;
-    }
 }

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

@@ -1,7 +1,2 @@
 import { H1Skeleton as BaseH1Skeleton } from './component';
-import { H1IconSKeleton } from './icon/component';
-import { H1TextSkeleton } from './text/component';
-export var H1Skeleton = Object.assign(BaseH1Skeleton, {
-    Icon: H1IconSKeleton,
-    Text: H1TextSkeleton,
-});
+export var H1Skeleton = BaseH1Skeleton;

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

@@ -1,11 +1,8 @@
 @layer mosuk-ui {
-    @layer index-10 {
+    @layer index-12 {
         .h2 {
-            display: block;
-
-            font-size: 1.125rem;
+            font-size: var(--text-lg, 1.125rem);
             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) * 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;
-                }
-            }
         }
     }
 }