@bspk/ui 1.3.11 → 1.3.16

package/src/components/UIProvider/UIProvider.tsx

@@ -1,7 +1,6 @@
 import { useState, ReactNode } from 'react';
-import { AriaLiveMessageHandler, sendAriaLiveMessage } from './AriaLiveMessageHandler';
-import { useEventListener } from '-/hooks/useAddEventListener';
 import { useDebounceState } from '-/hooks/useDebounceState';
+import { useEventListener } from '-/hooks/useEventListener';
 import { useIsomorphicEffect } from '-/hooks/useIsomorphicEffect';
 import { UIContext, ColorTheme } from '-/utils/uiContext';
 
@@ -51,11 +50,9 @@ export function UIProvider({ children }: UIProviderProps) {
                 isMobile: deviceWidth < 640,
                 isTablet: deviceWidth > 640 && deviceWidth < 1024,
                 isDesktop: deviceWidth >= 1024,
-                sendAriaLiveMessage,
             }}
         >
             {children}
-            <AriaLiveMessageHandler />
         </UIContext.Provider>
     );
 }

package/src/components/UIProvider/UIProviderExample.tsx

@@ -1,12 +1,9 @@
 import { UIProviderProps } from '.';
-import { Button } from '-/components/Button';
-import { useUIContext } from '-/hooks/useUIContext';
 import { ComponentExample, Preset } from '-/utils/demo';
 
 export const presets: Preset<UIProviderProps>[] = [];
 
 export const UIProviderExample: ComponentExample<UIProviderProps> = {
-    containerStyle: { width: '100%' },
     defaultState: {},
     disableProps: [],
     presets,
@@ -55,38 +52,6 @@ export function ResponsiveComponent() {
             {isDesktop && <p>This is a desktop device.</p>}
         </div>
     );
-}`}
-                        language="typescript"
-                    />
-                </div>
-            ),
-        },
-        {
-            title: 'ARIA Live Messages',
-            content: ({ Syntax }) => (
-                <div style={{}}>
-                    <p>
-                        Example usage of sending ARIA live messages. This allows for dynamic updates to assistive
-                        technologies, such as screen readers.
-                    </p>
-                    <AriaLiveExample />
-                    <Syntax
-                        code={`// Example usage of sending ARIA live messages
-import { useContext } from 'react';
-import { useUIContext } from '-/hooks/useUIContext';
-
-export function AriaLiveExample() {
-    const {sendAriaLiveMessage} = useUIContext();
-
-    const handleClick = () => {
-        sendAriaLiveMessage('Action completed successfully', 'polite');
-    };
-
-    return (
-        <div>
-            <button onClick={handleClick}>Perform Action</button>
-        </div>
-    );
 }`}
                         language="typescript"
                     />
@@ -96,51 +61,3 @@ export function AriaLiveExample() {
     ],
     variants: {},
 };
-
-export function AriaLiveExample() {
-    const { sendAriaLiveMessage } = useUIContext();
-
-    return (
-        <p>
-            <Button
-                data-bspk="link"
-                label="Send a polite ARIA Live Message "
-                onClick={() => {
-                    sendAriaLiveMessage?.(
-                        `Action completed successfully at ${new Date().toLocaleTimeString()}`,
-                        'polite',
-                    );
-                }}
-                style={{
-                    padding: 0,
-                    margin: 0,
-                    border: 'none',
-                    background: 'none',
-                    color: 'inherit',
-                    cursor: 'pointer',
-                }}
-                variant="tertiary"
-            />
-
-            <Button
-                data-bspk="link"
-                label="Send an assertive ARIA Live Message "
-                onClick={() => {
-                    sendAriaLiveMessage?.(
-                        `Critical update occurred at ${new Date().toLocaleTimeString()}`,
-                        'assertive',
-                    );
-                }}
-                style={{
-                    padding: 0,
-                    margin: 0,
-                    border: 'none',
-                    background: 'none',
-                    color: 'inherit',
-                    cursor: 'pointer',
-                }}
-                variant="tertiary"
-            />
-        </p>
-    );
-}

package/src/hooks/useControlledState.ts

@@ -0,0 +1,31 @@
+import { useState, useRef, useCallback } from 'react';
+
+/**
+ * A custom hook to manage controlled and uncontrolled state.
+ *
+ * Allows a component to either be controlled by an external value or manage its own internal state. This is helpful for
+ * components that should operate in both controlled and uncontrolled modes.
+ */
+export function useControlledState<T>(
+    initialValue: T,
+    onChange?: (value: T) => void,
+): [T, (value: T | ((prev: T) => T)) => void] {
+    const [internalValue, setInternalValue] = useState(initialValue);
+
+    const stateRef = useRef<T>(initialValue);
+
+    return [
+        internalValue,
+        useCallback(
+            (next: T | ((prev: T) => T)) => {
+                const nextValue = typeof next === 'function' ? (next as (p: T) => T)(stateRef.current) : next;
+
+                setInternalValue(nextValue);
+                onChange?.(nextValue);
+
+                stateRef.current = nextValue;
+            },
+            [onChange],
+        ),
+    ] as const;
+}

package/src/types/meta.ts

@@ -3,14 +3,6 @@
  * the meta output file.
  */
 
-export const COMPONENT_PHASE_ORDER: ComponentPhase[] = [
-    'Utility', // Utility components are not tracked in the progress
-    'Backlog', // components that are not actively being worked on
-    'Dev', // components that are actively being developed
-    'UXReview', // components that are in UX Review
-    'Stable', // production ready
-];
-
 export const COMPONENT_PHASES: Record<
     ComponentPhase,
     {

package/src/utils/createCustomEvent.ts

@@ -1,4 +1,4 @@
-import { useEventListener } from '-/hooks/useAddEventListener';
+import { useEventListener } from '-/hooks/useEventListener';
 
 export type CustomEventDetail =
     | Array<CustomEventDetail>

package/src/utils/demo.ts

@@ -108,6 +108,18 @@ export type ComponentExample<Props = Record<string, unknown>, PropName extends k
     disableProps?: PropName[] | true;
     /** The sections of the example. */
     sections?: ComponentPageSection<Props>[];
+    /**
+     * Whether to render the example in a full page layout.
+     *
+     * @default false
+     */
+    fullPage?: boolean;
+    /**
+     * Hide the demo entirely.
+     *
+     * @default false
+     */
+    hideDemo?: boolean;
 };
 
 export type Syntax = (params: {
@@ -144,12 +156,17 @@ export type Preset<Props> = {
      * A description of the design pattern this preset demonstrates. When applied, it showcases the specific use case or
      * behavior of the component.
      */
-    designPattern?: string;
+    designPattern?: boolean | string;
     /** The name of the preset. This is used to display the preset in the UI. */
     label: string;
     /** The props of the component. This is used to set props of the component. These values can't be changed in the UI. */
     propState: Omit<Props, OnHandlers> & Record<OnHandlers, unknown>;
-    otherState?: Record<string, Record<string, unknown> | unknown> & Record<string, unknown>;
+    /**
+     * Hide the demo for this preset.
+     *
+     * @default false
+     */
+    hideDemo?: boolean;
 };
 
 export type DemoPreset<P = Record<string, unknown>> = Preset<P> & {

package/src/utils/dom.ts

@@ -4,3 +4,11 @@ export function getElementById<T extends HTMLElement = HTMLElement>(id?: string
     if (!id) return null;
     return document.querySelector<T>(`[id="${id}"]`);
 }
+
+export function getElement<T extends HTMLElement = HTMLElement>(
+    selector: string,
+    parent: HTMLElement | ParentNode = document,
+): T | null {
+    if (typeof parent === 'undefined') return null;
+    return parent.querySelector<T>(selector);
+}

package/src/utils/handleKeyDown.ts

@@ -3,6 +3,14 @@ import { KeyboardEventCode } from './keyboard';
 
 export type KeysCallback = Partial<Record<KeyboardEventCode, ((event: KeyboardEvent) => void) | null>>;
 
+export const getEventCode = (event: KeyboardEvent) => {
+    let eventCode = event.code as KeyboardEventCode;
+    if (event.ctrlKey && event.altKey && event.code === 'Space') eventCode = 'Ctrl+Option+Space';
+    if (event.shiftKey && !eventCode.startsWith('Shift')) eventCode = `Shift+${event.code}` as KeyboardEventCode;
+
+    return eventCode;
+};
+
 /**
  * Handles multiple keydown events with specific callbacks for each key.
  *
@@ -14,9 +22,7 @@ export function handleKeyDown(
     { stopPropagation = false, preventDefault = false }: { stopPropagation?: boolean; preventDefault?: boolean } = {},
 ) {
     return (event: KeyboardEvent) => {
-        let eventCode = event.code as KeyboardEventCode;
-        if (event.ctrlKey && event.altKey && event.code === 'Space') eventCode = 'Ctrl+Option+Space';
-
+        const eventCode = getEventCode(event);
         const callback = keysCallback[eventCode];
 
         if (callback) {

package/src/utils/keyboard.ts

@@ -136,8 +136,11 @@ export type KeyboardEventKey =
 
 export type KeyboardEventCodeCustom = 'Ctrl+Option+Space';
 
-export type KeyboardEventCode =
-    | KeyboardEventCodeCustom
+export type KeyboardEventCodeShift = `Shift+${KeyboardEventCodeBase}`;
+
+export type KeyboardEventCode = KeyboardEventCodeBase | KeyboardEventCodeCustom | KeyboardEventCodeShift;
+
+export type KeyboardEventCodeBase =
     | 'AltLeft'
     | 'AltRight'
     | 'ArrowDown'

package/src/utils/sendAriaLiveMessage.ts

@@ -0,0 +1,17 @@
+/**
+ * This utility function sends an ARIA live message to assistive technologies by dynamically creating a live region
+ * element in the DOM.
+ *
+ * @param message The message to be announced by screen readers.
+ * @param live The ARIA live attribute value, either 'assertive' or 'polite'. Defaults to 'polite'.
+ */
+export function sendAriaLiveMessage(message: string, live: 'assertive' | 'polite' = 'polite') {
+    // remove existing AriaLiveMessage element from dom
+    document.querySelectorAll('[data-bspk-aria-live]').forEach((el) => el.remove());
+
+    // add new AriaLiveMessage element to dom
+    document.body.insertAdjacentHTML(
+        'beforeend',
+        `<div data-bspk-aria-live aria-live=${live || 'polite'} data-sr-only role="alert">${message}</div>`,
+    );
+}

package/src/utils/sizing.ts

@@ -0,0 +1,30 @@
+export const SIZING_VALUES = [
+    '0',
+    '4',
+    '8',
+    '12',
+    '16',
+    '20',
+    '24',
+    '28',
+    '32',
+    '40',
+    '44',
+    '48',
+    '52',
+    '56',
+    '60',
+    '64',
+    '68',
+    '72',
+] as const;
+
+export type SizingPixels = `${(typeof SIZING_VALUES)[number]}`;
+
+export function numToSizingVar(numStr?: string): string | undefined {
+    if (numStr === undefined || ['auto', '0'].includes(numStr)) return numStr;
+
+    if (!SIZING_VALUES.includes(numStr as SizingPixels)) return undefined;
+
+    return `var(--spacing-sizing-${(Number(numStr) / 4).toString().padStart(2, '0')})`;
+}

package/src/utils/uiContext.ts

@@ -12,7 +12,6 @@ export type UIContextProps = {
     isMobile: boolean;
     isTablet: boolean;
     isDesktop: boolean;
-    sendAriaLiveMessage: (message: string, live?: AriaLiveMessage['live']) => void;
 };
 
 export const UIContext = createContext<UIContextProps | undefined>(undefined);

package/.scripts/index.ts

@@ -1,110 +0,0 @@
-#!/usr/bin/env npx tsx
-/* eslint-disable @cspell/spellchecker */
-/* eslint-disable no-console */
-/**
- * A simple CLI script to run development tasks.
- *
- * After you run `npm link` to install dependencies, you can run this script with: $ ui {task} [args]
- *
- * For example to create a new component, you can run:
- *
- * $ ui newc Dropdown
- *
- * To see a list of available tasks, run:
- *
- * $ ui
- *
- * This will show an arrow-navigable menu of available tasks.
- *
- * You can add new tasks by creating a new TypeScript file in the `.scripts/tasks` directory.
- *
- * Each task file should execute be able to be run directly with:
- *
- * $ npx tsx .scripts/tasks/{task-file}.ts [args]
- *
- * Each task file should have a comment block at the top with the following format:
- *
- * // UI: {tag} - {description}
- *
- * Where `{tag}` is the command you want to use to run the task, and `{description}` is a brief description of what the
- * task does.
- *
- * For example:
- *
- * // UI: newc - Create a new component
- *
- * This will allow you to run the task with:
- *
- * $ ui newc [args]
- *
- * The script will pass any additional arguments to the task file.
- */
-
-// look for tasks with the pattern "UI: {tag} - {description}" in a comment block near the top of the file
-
-import { execSync } from 'child_process';
-import fs from 'fs';
-import path from 'path';
-import inquirer from 'inquirer';
-
-const tasksDir = path.resolve('./.scripts/tasks');
-
-const tasks: { [key: string]: { description: string; filePath: string } } = {};
-
-fs.readdirSync(tasksDir).forEach((file) => {
-    if (file.endsWith('.ts')) {
-        const filePath = path.join(tasksDir, file);
-        const content = fs.readFileSync(filePath, 'utf-8');
-        const match = content.match(/UI:\s*(\S+)\s*-\s*(.+)/);
-        if (match) {
-            const [, tag, description] = match;
-            tasks[tag] = { description, filePath };
-        }
-    }
-});
-
-const [taskTag, ...args] = process.argv.slice(2);
-
-function runTask(taskKey?: string) {
-    const task = taskKey && tasks[taskKey];
-    if (!task) return;
-
-    console.log(`Running task: ${taskKey} - ${task.description}`);
-    try {
-        execSync(`npx tsx ${task.filePath} ${args.join(' ')}`, { stdio: 'inherit' });
-        process.exit(0);
-    } catch (error) {
-        console.error(`Task "${taskKey}" failed:`, error);
-        process.exit(1);
-    }
-}
-
-runTask(taskTag);
-// List available tasks if no valid task is provided make it a arrow navigable menu
-
-async function createArrowKeyMenu() {
-    const questions = [
-        {
-            type: 'list',
-            name: 'selectedOption',
-            message: 'Choose an task:',
-            choices: [
-                ...Object.keys(tasks),
-                new inquirer.Separator(), // Optional separator
-                'Exit',
-            ],
-        },
-    ];
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const answers = await inquirer.prompt(questions as any);
-    console.log('You selected:', answers.selectedOption);
-    runTask(answers.selectedOption);
-
-    if (answers.selectedOption === 'Exit') {
-        process.exit(); // Exit the process if 'Exit' is chosen
-    }
-    // You can add logic here based on the selected option
-}
-
-createArrowKeyMenu();

package/dist/components/Layout/Layout.d.ts

@@ -1,50 +0,0 @@
-import { ElementType, ReactNode } from 'react';
-import { ElementProps } from '-/types/common';
-export type LayoutProps<As extends ElementType = ElementType> = {
-    /**
-     * The content of the Layout.
-     *
-     * @required
-     */
-    children?: ReactNode;
-    /**
-     * Determines if the flex-direction should be displayed as a column.
-     *
-     * @default false
-     */
-    column?: boolean;
-    /** The gap between the children. */
-    gap?: '4' | '16';
-    /**
-     * The element type to render as.
-     *
-     * @default div
-     * @type ElementType
-     */
-    as?: As;
-    /**
-     * The alignment style to apply to the Layout.
-     *
-     * @default flex-start
-     */
-    align?: 'center' | 'flex-end' | 'flex-start' | 'stretch';
-    /**
-     * The justification style to apply to the Layout.
-     *
-     * @default flex-start
-     */
-    justify?: 'center' | 'flex-end' | 'flex-start' | 'stretch';
-};
-/**
- * Utility component used within other components for layout purposes.
- *
- * @example
- *     import { Layout } from '@bspk/ui/Layout';
- *
- *     <Layout>Low effort example</Layout>;
- *
- * @name Layout
- * @phase Utility
- */
-export declare function Layout<As extends ElementType = ElementType>({ children, column, gap, style, as, align, justify, ...props }: ElementProps<LayoutProps<As>, As>): import("react/jsx-runtime").JSX.Element;
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Layout/Layout.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Utility component used within other components for layout purposes.
- *
- * @example
- *     import { Layout } from '@bspk/ui/Layout';
- *
- *     <Layout>Low effort example</Layout>;
- *
- * @name Layout
- * @phase Utility
- */
-export function Layout({ children, column, gap = '16', style, as, align = 'flex-start', justify = 'flex-start', ...props }) {
-    const As = as || 'div';
-    const alignItems = align || 'flex-start';
-    const justifyContent = justify || 'flex-start';
-    return (_jsx(As, { ...props, 
-        // data-bspk="layout" -- Utility components do not need a data-bspk attribute
-        style: {
-            ...style,
-            display: 'flex',
-            flexDirection: column ? 'column' : 'row',
-            gap: gap ? `${gap}px` : 'px',
-            alignItems,
-            justifyContent,
-        }, children: children }));
-}
-//# sourceMappingURL=Layout.js.map

package/dist/components/Layout/Layout.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../../../src/components/Layout/Layout.tsx"],"names":[],"mappings":";AAwCA;;;;;;;;;;GAUG;AACH,MAAM,UAAU,MAAM,CAAuC,EACzD,QAAQ,EACR,MAAM,EACN,GAAG,GAAG,IAAI,EACV,KAAK,EACL,EAAE,EACF,KAAK,GAAG,YAAY,EACpB,OAAO,GAAG,YAAY,EACtB,GAAG,KAAK,EACwB;IAChC,MAAM,EAAE,GAAgB,EAAE,IAAI,KAAK,CAAC;IAEpC,MAAM,UAAU,GAAG,KAAK,IAAI,YAAY,CAAC;IACzC,MAAM,cAAc,GAAG,OAAO,IAAI,YAAY,CAAC;IAE/C,OAAO,CACH,KAAC,EAAE,OACK,KAAK;QACT,6EAA6E;QAC7E,KAAK,EAAE;YACH,GAAG,KAAK;YACR,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK;YACxC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI;YAC5B,UAAU;YACV,cAAc;SACjB,YAEA,QAAQ,GACR,CACR,CAAC;AACN,CAAC"}

package/dist/components/Layout/LayoutExample.d.ts

@@ -1,4 +0,0 @@
-import { LayoutProps } from './Layout';
-import { ComponentExample, Preset } from '-/utils/demo';
-export declare const presets: Preset<LayoutProps>[];
-export declare const LayoutExample: ComponentExample<LayoutProps>;

package/dist/components/Layout/LayoutExample.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const presets = [];
-export const LayoutExample = {
-    render: ({ props, Component }) => {
-        return (_jsxs(Component, { ...props, children: [_jsx("div", { children: "Alpha" }), _jsx("div", { children: "Beta" }), _jsx("div", { children: "Gamma" })] }));
-    },
-    presets,
-};
-//# sourceMappingURL=LayoutExample.js.map

package/dist/components/Layout/LayoutExample.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LayoutExample.js","sourceRoot":"","sources":["../../../src/components/Layout/LayoutExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,OAAO,GAA0B,EAAE,CAAC;AAEjD,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,OAAO,CACH,MAAC,SAAS,OAAK,KAAK,aAChB,kCAAgB,EAChB,iCAAe,EACf,kCAAgB,IACR,CACf,CAAC;IACN,CAAC;IACD,OAAO;CACV,CAAC"}

package/dist/components/Layout/index.d.ts

@@ -1 +0,0 @@
-export * from './Layout';

package/dist/components/Layout/index.js

@@ -1,2 +0,0 @@
-export * from './Layout';
-//# sourceMappingURL=index.js.map

package/dist/components/Layout/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Layout/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/dist/components/UIProvider/AriaLiveMessageHandler.d.ts

@@ -1,13 +0,0 @@
-export declare function sendAriaLiveMessage(message: string, live?: 'assertive' | 'polite'): void;
-/**
- * AriaLiveMessageHandler is a single use component that listens for aria-live messages and displays them to the user.
- *
- * We use a custom event to communicate between components and this handler.
- *
- * We don't store the message in context to avoid unnecessary re-renders of all components that consume the context. :)
- *
- * We queue messages to ensure that they are read by screen readers.
- *
- * After the message is read, we clear it after a short delay to allow for subsequent messages to be read.
- */
-export declare function AriaLiveMessageHandler(): import("react/jsx-runtime").JSX.Element | undefined;

package/dist/components/UIProvider/AriaLiveMessageHandler.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { useEventListener } from '../../hooks/useAddEventListener';
-import { useTimeout } from '../../hooks/useTimeout';
-const CUSTOM_EVENT_NAME = 'bspk-aria-live';
-export function sendAriaLiveMessage(message, live = 'polite') {
-    document.dispatchEvent(new CustomEvent(CUSTOM_EVENT_NAME, { detail: { message, live } }));
-}
-/**
- * AriaLiveMessageHandler is a single use component that listens for aria-live messages and displays them to the user.
- *
- * We use a custom event to communicate between components and this handler.
- *
- * We don't store the message in context to avoid unnecessary re-renders of all components that consume the context. :)
- *
- * We queue messages to ensure that they are read by screen readers.
- *
- * After the message is read, we clear it after a short delay to allow for subsequent messages to be read.
- */
-export function AriaLiveMessageHandler() {
-    const [ariaLiveMessage, setAriaLiveMessage] = useState(undefined);
-    const timeout = useTimeout();
-    useEventListener(CUSTOM_EVENT_NAME, (event) => {
-        const { message, live } = event.detail;
-        // Clear any existing message to ensure that screen readers read the new message
-        setAriaLiveMessage(undefined);
-        timeout.set(() => setAriaLiveMessage({ message, live: live || 'polite' }), 10);
-    }, document);
-    return (ariaLiveMessage && (_jsx("div", { "aria-live": ariaLiveMessage?.live || 'polite', "data-sr-only": true, role: "alert", children: ariaLiveMessage?.message })));
-}
-//# sourceMappingURL=AriaLiveMessageHandler.js.map

package/dist/components/UIProvider/AriaLiveMessageHandler.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AriaLiveMessageHandler.js","sourceRoot":"","sources":["../../../src/components/UIProvider/AriaLiveMessageHandler.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,MAAM,iBAAiB,GAAG,gBAAgB,CAAC;AAE3C,MAAM,UAAU,mBAAmB,CAAC,OAAe,EAAE,OAA+B,QAAQ;IACxF,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,iBAAiB,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;AAC9F,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,sBAAsB;IAClC,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAA8B,SAAS,CAAC,CAAC;IAE/F,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,gBAAgB,CACZ,iBAAiB,EACjB,CAAC,KAAkB,EAAE,EAAE;QACnB,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QACvC,gFAAgF;QAChF,kBAAkB,CAAC,SAAS,CAAC,CAAC;QAC9B,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,IAAI,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IACnF,CAAC,EACD,QAAQ,CACX,CAAC;IAEF,OAAO,CACH,eAAe,IAAI,CACf,2BAAgB,eAAe,EAAE,IAAI,IAAI,QAAQ,wBAAe,IAAI,EAAC,OAAO,YACvE,eAAe,EAAE,OAAO,GACvB,CACT,CACJ,CAAC;AACN,CAAC"}

package/dist/hooks/useAddEventListener.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useAddEventListener.js","sourceRoot":"","sources":["../../src/hooks/useAddEventListener.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,MAAM,UAAU,gBAAgB,CAM5B,SAAgC,EAChC,OAOS,EACT,OAAW,EACX,QAAkB,EAClB,OAA2C;IAE3C,mCAAmC;IACnC,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAErC,mBAAmB,CAAC,GAAG,EAAE;QACrB,YAAY,CAAC,OAAO,GAAG,OAAO,CAAC;IACnC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,mBAAmB,CAAC,GAAG,EAAE;QACrB,IAAI,QAAQ;YAAE,OAAO;QAErB,8BAA8B;QAC9B,MAAM,aAAa,GAAe,OAAO,IAAI,MAAM,CAAC;QAEpD,IAAI,CAAC,CAAC,aAAa,IAAI,aAAa,CAAC,gBAAgB,CAAC;YAAE,OAAO;QAE/D,kEAAkE;QAClE,MAAM,QAAQ,GAAmB,CAAC,KAAK,EAAE,EAAE;YACvC,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC,CAAC;QAEF,aAAa,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;QAE7D,mCAAmC;QACnC,OAAO,GAAG,EAAE;YACR,aAAa,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;QACpE,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;AACtC,CAAC"}