mosuk-ui 1.0.2 → 1.0.3

package/components/overlays/drawer/component/component.module.css

@@ -0,0 +1,206 @@
+@layer mosuk-ui {
+    @layer index-17 {
+        :root {
+            --bleed: calc(var(--spacing, 0.25rem) * 24);
+        }
+
+        .viewport {
+            position: fixed;
+            inset: 0;
+            z-index: 200;
+
+            touch-action: none;
+
+            .backdrop {
+                position: fixed;
+                inset: 0;
+
+                width: 100%;
+                min-height: 100dvh;
+
+                background-color: rgba(0, 0, 0, calc((1 - var(--drawer-swipe-progress, 0)) * 0.1));
+                backdrop-filter: blur(calc((1 - var(--drawer-swipe-progress, 0)) * 2px));
+
+                transition-duration: 200ms;
+                transition-property: background-color, backdrop-filter;
+                transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+
+                &[data-starting-style],
+                &[data-ending-style] {
+                    background-color: rgba(0, 0, 0, 0);
+                    backdrop-filter: blur(0);
+                }
+
+                &[data-swiping] {
+                    transition-duration: 0ms;
+                }
+
+                &[data-ending-style] {
+                    transition-duration: calc(var(--drawer-swipe-strength) * 200ms);
+                }
+            }
+
+            .popup {
+                overflow: hidden;
+
+                background-color: var(--color-white);
+
+                outline: none;
+
+                box-shadow: 0 25px 50px -12px rgba(249, 250, 251, var(--tw-shadow-alpha, 0.5));
+
+                will-change: transform;
+                transition: transform 400ms cubic-bezier(0.32, 0.72, 0, 1);
+
+                &[data-swiping] {
+                    user-select: none;
+                }
+
+                &[data-ending-style] {
+                    transition-duration: calc(var(--drawer-swipe-strength) * 400ms);
+                }
+
+                .handle {
+                    position: fixed;
+                    z-index: 10;
+
+                    background-color: color-mix(in oklab, var(--color-gray-400) 50%, transparent);
+                    backdrop-filter: blur(4px);
+
+                    border-radius: calc(infinity * 1px);
+
+                    transition-duration: 200ms;
+
+                    &:not(:hover) {
+                        transition-duration: 600ms;
+                    }
+                }
+
+                .content {
+                    overflow-y: auto;
+                    touch-action: auto;
+
+                    width: 100%;
+                    height: var(--drawer-frontmost-height, 100%);
+
+                    padding: calc(var(--spacing, 0.25rem) * 3);
+
+                    &::-webkit-scrollbar {
+                        display: none;
+                        width: 0;
+                        height: 0;
+                    }
+                }
+            }
+        }
+
+        /* swipeDirection styles */
+
+        .viewport {
+            &:has(.popup[data-swipe-direction='down']) {
+                display: flex;
+                align-items: flex-end;
+                justify-content: center;
+            }
+
+            &:has(.popup[data-swipe-direction='left']) {
+                display: flex;
+                justify-content: flex-start;
+            }
+
+            &:has(.popup[data-swipe-direction='right']) {
+                display: flex;
+                justify-content: flex-end;
+            }
+
+            .popup {
+                &[data-swipe-direction='down'] {
+                    width: 100%;
+                    height: fit-content;
+                    max-width: var(--container-lg, 512px);
+                    max-height: calc(100dvh - var(--bleed));
+
+                    border-top-left-radius: var(--radius-3xl, 1.5rem);
+                    border-top-right-radius: var(--radius-3xl, 1.5rem);
+
+                    transform: translateY(var(--drawer-swipe-movement-y));
+
+                    &[data-starting-style],
+                    &[data-ending-style] {
+                        transform: translateY(100dvh);
+                    }
+
+                    .handle {
+                        top: calc(var(--spacing, 0.25rem) * 2);
+                        left: 0;
+                        right: 0;
+                        bottom: auto;
+
+                        width: calc(var(--spacing, 0.25rem) * 24);
+                        height: calc(var(--spacing, 0.25rem) * 1);
+
+                        margin-inline: auto;
+                    }
+
+                    &:has(.handle) {
+                        .content {
+                            padding-top: calc(var(--spacing, 0.25rem) * 8);
+                        }
+                    }
+                }
+
+                &[data-swipe-direction='left'] {
+                    width: var(--container-lg, 512px);
+                    height: 100%;
+                    max-width: calc(100vw - var(--bleed));
+                    max-height: 100%;
+
+                    transform: translateX(var(--drawer-swipe-movement-x) * -1);
+
+                    &[data-starting-style],
+                    &[data-ending-style] {
+                        transform: translateX(-100dvw);
+                    }
+
+                    .handle {
+                        top: 0;
+                        left: auto;
+                        right: calc(var(--spacing, 0.25rem) * 2);
+                        bottom: 0;
+
+                        width: calc(var(--spacing, 0.25rem) * 1);
+                        height: calc(var(--spacing, 0.25rem) * 24);
+
+                        margin: auto 0;
+                    }
+                }
+
+                &[data-swipe-direction='right'] {
+                    width: var(--container-lg, 512px);
+                    height: 100%;
+                    max-width: calc(100vw - var(--bleed));
+                    max-height: 100%;
+
+                    transform: translateX(var(--drawer-swipe-movement-x));
+
+                    &[data-starting-style],
+                    &[data-ending-style] {
+                        transform: translateX(100dvw);
+                    }
+
+                    .handle {
+                        top: 0;
+                        left: calc(var(--spacing, 0.25rem) * 2);
+                        right: auto;
+                        bottom: 0;
+
+                        width: calc(var(--spacing, 0.25rem) * 1);
+                        height: calc(var(--spacing, 0.25rem) * 24);
+
+                        margin: auto 0;
+                    }
+                }
+            }
+        }
+    }
+}

package/components/overlays/drawer/component/index.d.ts

@@ -0,0 +1,58 @@
+import { DrawerClose } from './close/component';
+import { DrawerCloseProps } from './close/component.interface';
+import { Drawer as Component } from './component';
+import { DrawerProps as ComponentProps } from './component.interface';
+import { DrawerOpen } from './open/component';
+import { DrawerOpenProps } from './open/component.interface';
+import { DrawerPortal } from './portal/component';
+import { DrawerPortalProps } from './portal/component.interface';
+import { DrawerPortalViewportBackdrop } from './portal/viewport/backdrop/component';
+import { DrawerPortalViewportBackdropProps } from './portal/viewport/backdrop/component.interface';
+import { DrawerPortalViewport } from './portal/viewport/component';
+import { DrawerPortalViewportProps } from './portal/viewport/component.interface';
+import { DrawerPortalViewportPopup } from './portal/viewport/popup/component';
+import { DrawerPortalViewportPopupProps } from './portal/viewport/popup/component.interface';
+import { DrawerPortalViewportPopupContent } from './portal/viewport/popup/content/component';
+import { DrawerPortalViewportPopupContentProps } from './portal/viewport/popup/content/component.interface';
+import { DrawerPortalViewportPopupHandle } from './portal/viewport/popup/handle/component';
+import { DrawerPortalViewportPopupHandleProps } from './portal/viewport/popup/handle/component.interface';
+export declare const Drawer: typeof Component & {
+    Open: typeof DrawerOpen;
+    Close: typeof DrawerClose;
+    Portal: typeof DrawerPortal & {
+        Viewport: typeof DrawerPortalViewport & {
+            Backdrop: typeof DrawerPortalViewportBackdrop;
+            Popup: typeof DrawerPortalViewportPopup & {
+                Handle: typeof DrawerPortalViewportPopupHandle;
+                Content: typeof DrawerPortalViewportPopupContent;
+            };
+        };
+    };
+};
+export declare namespace Drawer {
+    type Props = ComponentProps;
+    namespace Open {
+        type Props = DrawerOpenProps;
+    }
+    namespace Close {
+        type Props = DrawerCloseProps;
+    }
+    namespace Portal {
+        type Props = DrawerPortalProps;
+        namespace Viewport {
+            type Props = DrawerPortalViewportProps;
+            namespace Backdrop {
+                type Props = DrawerPortalViewportBackdropProps;
+            }
+            namespace Popup {
+                type Props = DrawerPortalViewportPopupProps;
+                namespace Handle {
+                    type Props = DrawerPortalViewportPopupHandleProps;
+                }
+                namespace Content {
+                    type Props = DrawerPortalViewportPopupContentProps;
+                }
+            }
+        }
+    }
+}

package/components/overlays/drawer/component/index.js

@@ -0,0 +1,22 @@
+import { DrawerClose } from './close/component';
+import { Drawer as Component } from './component';
+import { DrawerOpen } from './open/component';
+import { DrawerPortal } from './portal/component';
+import { DrawerPortalViewportBackdrop } from './portal/viewport/backdrop/component';
+import { DrawerPortalViewport } from './portal/viewport/component';
+import { DrawerPortalViewportPopup } from './portal/viewport/popup/component';
+import { DrawerPortalViewportPopupContent } from './portal/viewport/popup/content/component';
+import { DrawerPortalViewportPopupHandle } from './portal/viewport/popup/handle/component';
+export var Drawer = Object.assign(Component, {
+    Open: DrawerOpen,
+    Close: DrawerClose,
+    Portal: Object.assign(DrawerPortal, {
+        Viewport: Object.assign(DrawerPortalViewport, {
+            Backdrop: DrawerPortalViewportBackdrop,
+            Popup: Object.assign(DrawerPortalViewportPopup, {
+                Handle: DrawerPortalViewportPopupHandle,
+                Content: DrawerPortalViewportPopupContent,
+            }),
+        }),
+    }),
+});

package/components/overlays/drawer/component/open/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DrawerOpenProps } from './component.interface';
+export declare function DrawerOpen({ ...rest }: DrawerOpenProps): React.JSX.Element;

package/components/overlays/drawer/component/open/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { DrawerPreview as BaseUiDrawer } from '@base-ui/react';
+export interface DrawerOpenProps extends BaseUiDrawer.Trigger.Props {
+}

package/components/{texts/h2/component/icon → overlays/drawer/component/open}/component.js

@@ -20,11 +20,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { DrawerPreview as BaseUiDrawer } from '@base-ui/react';
 import classNames from 'classnames';
 import React from 'react';
-import { Icon } from '../../../../actions/icon/component/index';
-import styles from '../component.module.css';
-export function H2Icon(_a) {
+export function DrawerOpen(_a) {
     var rest = __rest(_a, []);
-    return (React.createElement(Icon, __assign({}, rest, { className: classNames('mosuk-h2-icon', styles.icon, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+    return (React.createElement(BaseUiDrawer.Trigger, __assign({}, rest, { className: classNames('mosuk-drawer-open', rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
 }

package/components/overlays/drawer/component/portal/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DrawerPortalProps } from './component.interface';
+export declare function DrawerPortal({ ...rest }: DrawerPortalProps): React.JSX.Element;

package/components/overlays/drawer/component/portal/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { DrawerPreview as BaseUiDrawer } from '@base-ui/react';
+export interface DrawerPortalProps extends BaseUiDrawer.Portal.Props {
+}

package/components/overlays/drawer/component/portal/component.js

@@ -0,0 +1,29 @@
+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 { DrawerPreview as BaseUiDrawer } from '@base-ui/react';
+import classNames from 'classnames';
+import React from 'react';
+export function DrawerPortal(_a) {
+    var rest = __rest(_a, []);
+    return (React.createElement(BaseUiDrawer.Portal, __assign({}, rest, { className: classNames('mosuk-drawer-portal', rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/overlays/drawer/component/portal/viewport/backdrop/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DrawerPortalViewportBackdropProps } from './component.interface';
+export declare function DrawerPortalViewportBackdrop({ ...rest }: DrawerPortalViewportBackdropProps): React.JSX.Element;

package/components/overlays/drawer/component/portal/viewport/backdrop/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { DrawerPreview as BaseUiDrawer } from '@base-ui/react';
+export interface DrawerPortalViewportBackdropProps extends BaseUiDrawer.Backdrop.Props {
+}

package/components/overlays/drawer/component/portal/viewport/backdrop/component.js

@@ -0,0 +1,30 @@
+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 { DrawerPreview as BaseUiDrawer } from '@base-ui/react';
+import classNames from 'classnames';
+import React from 'react';
+import styles from '../../../component.module.css';
+export function DrawerPortalViewportBackdrop(_a) {
+    var rest = __rest(_a, []);
+    return (React.createElement(BaseUiDrawer.Backdrop, __assign({}, rest, { className: classNames('mosuk-drawer-portal-viewport-backdrop', styles.backdrop, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/overlays/drawer/component/portal/viewport/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DrawerPortalViewportProps } from './component.interface';
+export declare function DrawerPortalViewport({ ...rest }: DrawerPortalViewportProps): React.JSX.Element;

package/components/overlays/drawer/component/portal/viewport/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { DrawerPreview as BaseUiDrawer } from '@base-ui/react';
+export interface DrawerPortalViewportProps extends BaseUiDrawer.Viewport.Props {
+}

package/components/overlays/{dialogs/dialog/component/dialog/footer → drawer/component/portal/viewport}/component.js

@@ -20,11 +20,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { DrawerPreview as BaseUiDrawer } from '@base-ui/react';
 import classNames from 'classnames';
 import React from 'react';
 import styles from '../../component.module.css';
-export function DialogDialogFooter(_a) {
+export function DrawerPortalViewport(_a) {
     var rest = __rest(_a, []);
-    var Component = ((rest === null || rest === void 0 ? void 0 : rest.as) || 'div');
-    return (React.createElement(Component, __assign({}, rest, { ref: rest === null || rest === void 0 ? void 0 : rest.ref, className: classNames('mosuk-dialog-dialog-footer', styles.footer, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+    return (React.createElement(BaseUiDrawer.Viewport, __assign({}, rest, { className: classNames('mosuk-drawer-portal-viewport', styles.viewport, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
 }

package/components/overlays/drawer/component/portal/viewport/popup/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DrawerPortalViewportPopupProps } from './component.interface';
+export declare function DrawerPortalViewportPopup({ ...rest }: DrawerPortalViewportPopupProps): React.JSX.Element;

package/components/overlays/drawer/component/portal/viewport/popup/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { DrawerPreview as BaseUiDrawer } from '@base-ui/react';
+export interface DrawerPortalViewportPopupProps extends BaseUiDrawer.Popup.Props {
+}

package/components/{texts/h1/skeleton/icon → overlays/drawer/component/portal/viewport/popup}/component.js

@@ -20,11 +20,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { DrawerPreview as BaseUiDrawer } from '@base-ui/react';
 import classNames from 'classnames';
 import React from 'react';
-import { IconSkeleton } from '../../../../actions/icon/skeleton/component';
-import styles from '../component.module.css';
-export function H1IconSKeleton(_a) {
+import styles from '../../../component.module.css';
+export function DrawerPortalViewportPopup(_a) {
     var rest = __rest(_a, []);
-    return (React.createElement(IconSkeleton, __assign({}, rest, { className: classNames('mosuk-h1-icon-skeleton', styles.icon, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+    return (React.createElement(BaseUiDrawer.Popup, __assign({}, rest, { className: classNames('mosuk-drawer-portal-viewport-popup', styles.popup, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
 }

package/components/overlays/drawer/component/portal/viewport/popup/content/component.d.ts

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

package/components/{texts/a/component/text → overlays/drawer/component/portal/viewport/popup/content}/component.interface.d.ts

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

package/components/overlays/drawer/component/portal/viewport/popup/content/component.js

@@ -0,0 +1,30 @@
+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 styles from '../../../../component.module.css';
+export function DrawerPortalViewportPopupContent(_a) {
+    var as = _a.as, rest = __rest(_a, ["as"]);
+    var Component = (as || 'div');
+    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-drawer-portal-viewport-popup-content', styles.content, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/overlays/drawer/component/portal/viewport/popup/handle/component.d.ts

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

package/components/overlays/{dialogs/dialog/component/dialog/footer → drawer/component/portal/viewport/popup/handle}/component.interface.d.ts

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

package/components/{texts/a/component/text → overlays/drawer/component/portal/viewport/popup/handle}/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 AText(_a) {
+import styles from '../../../../component.module.css';
+export function DrawerPortalViewportPopupHandle(_a) {
     var as = _a.as, rest = __rest(_a, ["as"]);
-    var Component = (as || 'span');
-    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-a-text', styles.text, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+    var Component = (as || 'div');
+    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-drawer-portal-wviewport-popup-handle', styles.handle, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
 }

package/components/overlays/dropdown/component/component.interface.d.ts

@@ -1,4 +1,4 @@
-import { Popover } from '@base-ui-components/react/popover';
+import { Popover } from '@base-ui/react/popover';
 export interface DropdownProps extends Popover.Root.Props {
 }
 export interface DropdownTriggerProps extends Popover.Trigger.Props {

package/components/overlays/dropdown/component/component.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Popover } from '@base-ui-components/react/popover';
+import { Popover } from '@base-ui/react/popover';
 import React from 'react';
 import styles from './component.module.css';
 export function Dropdown(_a) {

package/components/overlays/observer/component/component.d.ts

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

package/components/{texts/h3/component/text → overlays/observer/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 H3Text(_a) {
+import styles from './component.module.css';
+export function Observer(_a) {
     var as = _a.as, rest = __rest(_a, ["as"]);
-    var Component = (as || 'span');
-    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-h3-text', styles.text, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+    var Component = (as || 'aside');
+    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-observer', styles.observer, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
 }

package/components/overlays/observer/component/component.module.css

@@ -0,0 +1,19 @@
+@layer mosuk-ui {
+    @layer index-17 {
+        .observer {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+
+            width: 1px;
+            height: 1px;
+
+            z-index: -1;
+
+            opacity: 0;
+
+
+            pointer-events: none;
+        }
+    }
+}

package/components/{texts/h3/component/text/component.interface.d.ts → overlays/observer/component/component.props.d.ts}

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

package/components/overlays/observer/component/index.d.ts

@@ -0,0 +1,6 @@
+import { Observer as BaseObserver } from './component';
+import type { ObserverProps } from './component.props';
+export declare const Observer: typeof BaseObserver;
+export declare namespace Observer {
+    type Props = ObserverProps;
+}

package/components/overlays/observer/component/index.js

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