@alphakits/ui 1.31.4 → 2.0.0

package/dist/notification/component.d.ts

@@ -1,17 +1,36 @@
-/// <reference types="react" />
-import React from 'react';
-import { MouseEvent } from "react";
-import { ToastPlateProps } from "../toast-plate/index";
-type NotificationProps = ToastPlateProps & {
+import { default as React, MouseEvent } from 'react';
+import { ToastPlateProps } from '../toast-plate';
+export declare type NotificationProps = ToastPlateProps & {
+    /**
+     * Управление видимостью компонента
+     */
     visible?: boolean;
+    /**
+     * Отступ от верхнего края
+     */
     offset?: number;
+    /**
+     * Время до закрытия компонента
+     */
     autoCloseDelay?: number;
+    /**
+     * Обработчик события истечения времени до закрытия компонента
+     */
     onCloseTimeout?: () => void;
+    /**
+     * Обработчик события наведения курсора на компонент
+     */
     onMouseEnter?: (event?: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Обработчик события снятия курсора с компонента
+     */
     onMouseLeave?: (event?: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Обработчик клика вне компонента
+     */
     onClickOutside?: (event?: MouseEvent<any>) => void;
 };
-declare const Notification: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+export declare const Notification: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     className?: string | undefined;
     contentClassName?: string | undefined;
     children?: React.ReactNode;
@@ -24,12 +43,32 @@ declare const Notification: React.ForwardRefExoticComponent<React.HTMLAttributes
     block?: boolean | undefined;
     onClose?: ((event?: React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent> | undefined) => void) | undefined;
 } & {
+    /**
+     * Управление видимостью компонента
+     */
     visible?: boolean | undefined;
+    /**
+     * Отступ от верхнего края
+     */
     offset?: number | undefined;
+    /**
+     * Время до закрытия компонента
+     */
     autoCloseDelay?: number | undefined;
+    /**
+     * Обработчик события истечения времени до закрытия компонента
+     */
     onCloseTimeout?: (() => void) | undefined;
+    /**
+     * Обработчик события наведения курсора на компонент
+     */
     onMouseEnter?: ((event?: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent> | undefined) => void) | undefined;
+    /**
+     * Обработчик события снятия курсора с компонента
+     */
     onMouseLeave?: ((event?: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent> | undefined) => void) | undefined;
+    /**
+     * Обработчик клика вне компонента
+     */
     onClickOutside?: ((event?: React.MouseEvent<any, globalThis.MouseEvent> | undefined) => void) | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
-export { NotificationProps, Notification };

package/dist/notification/component.js

@@ -1 +1,103 @@
-import{__rest as o,__assign as e}from"tslib";import t,{forwardRef as i,useRef as n,useState as s,useCallback as r,useEffect as l}from"react";import a from"react-merge-refs";import{useSwipeable as c,LEFT as m,RIGHT as u,UP as p}from"react-swipeable";import d from"classnames";import{Portal as f}from"../portal/component.js";import{ToastPlate as C}from"../toast-plate/component.js";import{useClickOutside as v}from"./utils/index.js";import"react-dom";import"../portal/utils.js";import"@alphakits/icons/dist/AlertCircleM";import"@alphakits/icons/dist/CheckmarkCircleM";import"@alphakits/icons/dist/ClockCircleM";import"@alphakits/icons/dist/CloseS";import"../button/component.js";import"../hooks/useFocus/index.js";import"../loader/component.js";var k="index-module_notificationComponent__YDzix",_="index-module_isVisible__1y-6b",h="index-module_isClosing__1kAgn",M="index-module_toastContent__1EfFL",x="."+k,b=i((function(i,b){var j,y=i.className,E=i.children,w=i.visible,T=i.offset,g=void 0===T?108:T,D=i.hasCloser,L=void 0===D||D,N=i.autoCloseDelay,A=void 0===N?5e3:N,F=i.onClose,O=i.onCloseTimeout,S=i.onMouseEnter,z=i.onMouseLeave,P=i.onClickOutside,V=i.style,Y=o(i,["className","children","visible","offset","hasCloser","autoCloseDelay","onClose","onCloseTimeout","onMouseEnter","onMouseLeave","onClickOutside","style"]),q=n(null),B=n(0),G=n(0),H=s(!1),I=H[0],J=H[1],K=r((function(){B.current=window.setTimeout((function(){O&&O()}),A)}),[A,O]),Q=r((function(){clearTimeout(B.current)}),[]);l((function(){return function(){clearTimeout(G.current)}}),[]),l((function(){return w&&K(),function(){Q()}}),[K,Q,w]);var R=r((function(o){Q(),S&&S(o)}),[S,Q]),U=r((function(o){Q(),K(),z&&z(o)}),[z,K,Q]),W=r((function(o){var e=!!o.target.closest(x);P&&w&&!e&&P(o)}),[P,w]);v(q,W);var X=c({onSwiped:function(o){var e=o.dir;F&&[m,u,p].includes(e)&&(J(!0),G.current=window.setTimeout((function(){J(!1),F()}),100))},delta:100,trackMouse:!0});return t.createElement(f,null,t.createElement("div",e({},X),t.createElement(C,e({className:d(k,(j={},j[_]=w,j[h]=I,j),y),contentClassName:M,style:e({top:g},V),onMouseEnter:R,onMouseLeave:U,ref:a([b,q]),role:w?"alert":void 0,hasCloser:L,onClose:F},Y),E)))}));b.defaultProps={autoCloseDelay:5e3,offset:108};export{b as Notification};
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as F, useRef as u, useState as G, useCallback as r, useEffect as R } from "react";
+import L from "react-merge-refs";
+import { useSwipeable as M, LEFT as U, RIGHT as V, UP as $ } from "react-swipeable";
+import q from "classnames";
+import { Portal as z } from "../portal/component.js";
+import { ToastPlate as B } from "../toast-plate/component.js";
+import { useClickOutside as D } from "./utils/index.js";
+import s from "./index.module.css.js";
+const J = `.${s.notificationComponent}`, K = F(
+  ({
+    className: g,
+    children: h,
+    visible: e,
+    offset: N = 108,
+    hasCloser: P = !0,
+    autoCloseDelay: p = 5e3,
+    onClose: n,
+    onCloseTimeout: a,
+    onMouseEnter: c,
+    onMouseLeave: f,
+    onClickOutside: m,
+    style: S,
+    ...k
+  }, x) => {
+    const d = u(null), T = u(0), w = u(0), [y, C] = G(!1), i = r(() => {
+      T.current = window.setTimeout(() => {
+        a && a();
+      }, p);
+    }, [p, a]), o = r(() => {
+      clearTimeout(T.current);
+    }, []);
+    R(
+      () => () => {
+        clearTimeout(w.current);
+      },
+      []
+    ), R(() => (e && i(), () => {
+      o();
+    }), [i, o, e]);
+    const A = r(
+      (t) => {
+        o(), c && c(t);
+      },
+      [c, o]
+    ), E = r(
+      (t) => {
+        o(), i(), f && f(t);
+      },
+      [f, i, o]
+    ), H = r(
+      (t) => {
+        const j = !!t.target.closest(J);
+        m && e && !j && m(t);
+      },
+      [m, e]
+    );
+    D(d, H);
+    const I = M({
+      onSwiped: ({ dir: t }) => {
+        n && [U, V, $].includes(t) && (C(!0), w.current = window.setTimeout(() => {
+          C(!1), n();
+        }, 100));
+      },
+      delta: 100,
+      trackMouse: !0
+    });
+    return /* @__PURE__ */ l(z, { children: /* @__PURE__ */ l("div", { ...I, children: /* @__PURE__ */ l(
+      B,
+      {
+        className: q(
+          s.notificationComponent,
+          {
+            [s.isVisible]: e,
+            [s.isClosing]: y
+          },
+          g
+        ),
+        contentClassName: s.toastContent,
+        style: {
+          top: N,
+          ...S
+        },
+        onMouseEnter: A,
+        onMouseLeave: E,
+        ref: L([x, d]),
+        role: e ? "alert" : void 0,
+        hasCloser: P,
+        onClose: n,
+        ...k,
+        children: h
+      }
+    ) }) });
+  }
+);
+K.defaultProps = {
+  autoCloseDelay: 5e3,
+  offset: 108
+};
+export {
+  K as Notification
+};
+//# sourceMappingURL=component.js.map

package/dist/notification/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sources":["../../src/notification/component.tsx"],"sourcesContent":["import React, {\n    forwardRef, MouseEvent, useCallback, useEffect, useRef, useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport {\n    LEFT, RIGHT, UP, useSwipeable,\n} from 'react-swipeable';\nimport cn from 'classnames';\n\nimport { Portal } from '../portal';\nimport { ToastPlate, ToastPlateProps } from '../toast-plate';\n\nimport { useClickOutside } from './utils';\n\nimport styles from './index.module.css';\n\nexport type NotificationProps = ToastPlateProps & {\n    /**\n     * Управление видимостью компонента\n     */\n    visible?: boolean;\n\n    /**\n     * Отступ от верхнего края\n     */\n    offset?: number;\n\n    /**\n     * Время до закрытия компонента\n     */\n    autoCloseDelay?: number;\n\n    /**\n     * Обработчик события истечения времени до закрытия компонента\n     */\n    onCloseTimeout?: () => void;\n\n    /**\n     * Обработчик события наведения курсора на компонент\n     */\n    onMouseEnter?: (event?: MouseEvent<HTMLDivElement>) => void;\n\n    /**\n     * Обработчик события снятия курсора с компонента\n     */\n    onMouseLeave?: (event?: MouseEvent<HTMLDivElement>) => void;\n\n    /**\n     * Обработчик клика вне компонента\n     */\n    onClickOutside?: (event?: MouseEvent<any>) => void;\n};\n\nconst notificationClassNameSelector = `.${styles.notificationComponent}`;\n\nexport const Notification = forwardRef<HTMLDivElement, NotificationProps>(\n    (\n        {\n            className,\n            children,\n            visible,\n            offset = 108,\n            hasCloser = true,\n            autoCloseDelay = 5000,\n            onClose,\n            onCloseTimeout,\n            onMouseEnter,\n            onMouseLeave,\n            onClickOutside,\n            style,\n            ...restProps\n        },\n        ref,\n    ) => {\n        const notificationRef = useRef<HTMLDivElement>(null);\n        const autoCloseTimeoutRef = useRef(0);\n        const closeTimeoutRef = useRef(0);\n\n        const [isClosing, setIsClosing] = useState(false);\n\n        const startAutoCloseTimer = useCallback(() => {\n            autoCloseTimeoutRef.current = window.setTimeout(() => {\n                if (onCloseTimeout) {\n                    onCloseTimeout();\n                }\n            }, autoCloseDelay);\n        }, [autoCloseDelay, onCloseTimeout]);\n\n        const stopAutoCloseTimer = useCallback(() => {\n            clearTimeout(autoCloseTimeoutRef.current);\n        }, []);\n\n        useEffect(\n            () => () => {\n                clearTimeout(closeTimeoutRef.current);\n            },\n            [],\n        );\n\n        useEffect(() => {\n            if (visible) {\n                startAutoCloseTimer();\n            }\n\n            return () => {\n                stopAutoCloseTimer();\n            };\n        }, [startAutoCloseTimer, stopAutoCloseTimer, visible]);\n\n        const handleMouseEnter = useCallback(\n            (event) => {\n                stopAutoCloseTimer();\n\n                if (onMouseEnter) {\n                    onMouseEnter(event);\n                }\n            },\n            [onMouseEnter, stopAutoCloseTimer],\n        );\n\n        const handleMouseLeave = useCallback(\n            (event) => {\n                stopAutoCloseTimer();\n                startAutoCloseTimer();\n\n                if (onMouseLeave) {\n                    onMouseLeave(event);\n                }\n            },\n            [onMouseLeave, startAutoCloseTimer, stopAutoCloseTimer],\n        );\n\n        const handleOutsideClick = useCallback(\n            (event) => {\n                const isTargetNotification = !!event.target.closest(notificationClassNameSelector);\n\n                /*\n                 *  проверка isTargetNotification нужна для предотвращения срабатывания handleOutsideClick\n                 *  при клике на другие нотификации, если их несколько на странице\n                 */\n                if (onClickOutside && visible && !isTargetNotification) {\n                    onClickOutside(event);\n                }\n            },\n            [onClickOutside, visible],\n        );\n\n        useClickOutside(notificationRef, handleOutsideClick);\n\n        const swipeableHandlers = useSwipeable({\n            onSwiped: ({ dir }) => {\n                if (onClose && [LEFT, RIGHT, UP].includes(dir)) {\n                    setIsClosing(true);\n\n                    closeTimeoutRef.current = window.setTimeout(() => {\n                        setIsClosing(false);\n                        onClose();\n                    }, 100);\n                }\n            },\n            delta: 100,\n            trackMouse: true,\n        });\n\n        return (\n            <Portal>\n                <div { ...swipeableHandlers }>\n                    <ToastPlate\n                        className={ cn(\n                            styles.notificationComponent,\n                            {\n                                [styles.isVisible]: visible,\n                                [styles.isClosing]: isClosing,\n                            },\n                            className,\n                        ) }\n                        contentClassName={ styles.toastContent }\n                        style={ {\n                            top: offset,\n                            ...style,\n                        } }\n                        onMouseEnter={ handleMouseEnter }\n                        onMouseLeave={ handleMouseLeave }\n                        ref={ mergeRefs([ref, notificationRef]) }\n                        role={ visible ? 'alert' : undefined }\n                        hasCloser={ hasCloser }\n                        onClose={ onClose }\n                        { ...restProps }\n                    >\n                        { children }\n                    </ToastPlate>\n                </div>\n            </Portal>\n        );\n    },\n);\n\n/**\n * Для отображения в сторибуке\n */\nNotification.defaultProps = {\n    autoCloseDelay: 5000,\n    offset: 108,\n};\n"],"names":["notificationClassNameSelector","styles","Notification","forwardRef","className","children","visible","offset","hasCloser","autoCloseDelay","onClose","onCloseTimeout","onMouseEnter","onMouseLeave","onClickOutside","style","restProps","ref","notificationRef","useRef","autoCloseTimeoutRef","closeTimeoutRef","isClosing","setIsClosing","useState","startAutoCloseTimer","useCallback","stopAutoCloseTimer","useEffect","handleMouseEnter","event","handleMouseLeave","handleOutsideClick","isTargetNotification","useClickOutside","swipeableHandlers","useSwipeable","dir","LEFT","RIGHT","UP","jsx","Portal","ToastPlate","cn","mergeRefs"],"mappings":"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"}

package/dist/notification/index.d.ts

@@ -1 +1 @@
-export * from "./component";
+export * from './component';

package/dist/notification/index.js

@@ -1 +1,5 @@
-export{Notification}from"./component.js";import"tslib";import"react";import"react-merge-refs";import"react-swipeable";import"classnames";import"../portal/component.js";import"react-dom";import"../portal/utils.js";import"../toast-plate/component.js";import"@alphakits/icons/dist/AlertCircleM";import"@alphakits/icons/dist/CheckmarkCircleM";import"@alphakits/icons/dist/ClockCircleM";import"@alphakits/icons/dist/CloseS";import"../button/component.js";import"../hooks/useFocus/index.js";import"../loader/component.js";import"./utils/index.js";
+import { Notification as t } from "./component.js";
+export {
+  t as Notification
+};
+//# sourceMappingURL=index.js.map

package/dist/notification/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/notification/index.module.css

@@ -0,0 +1 @@
+:root{--text-primary-color: var(--color-text-primary);--text-secondary-color: var(--color-text-secondary);--text-tertiary-color: var(--color-text-tertiary);--border-radius: 4px;--focus-color: var(--color-border-link);--font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, sans-serif;--disabled-cursor: not-allowed;--arrow-transform: rotate(180deg)}:root{--notification-desktop-content-width: 278px}.index-module_notificationComponent__khhkj{visibility:hidden;position:fixed;right:var(--gap-s);transform:translateY(-500px);display:inline-flex;width:calc(100% - var(--gap-xl));max-width:calc(100vw - var(--gap-xl));-webkit-user-select:none;user-select:none;z-index:9999;transition:transform .2s ease-out}@media screen and (min-width:600px){.index-module_notificationComponent__khhkj{right:var(--gap-4xl);width:auto;transform:translate(var(--notification-desktop-content-width))}}.index-module_notificationComponent__khhkj.index-module_isVisible__snkQ9{visibility:visible;transform:translate(0)}.index-module_notificationComponent__khhkj.index-module_isClosing__wPaVu{transition:transform .1s ease-out;transform:translate(100vw)}@media screen and (min-width:600px){.index-module_notificationComponent__khhkj.index-module_isClosing__wPaVu{transform:translate(calc(var(--notification-desktop-content-width) + var(--gap-4xl)))}}@media screen and (min-width:600px){.index-module_toastContent__gDwuN{width:var(--notification-desktop-content-width)}}

package/dist/notification/index.module.css.js

@@ -0,0 +1,15 @@
+import './index.module.css';
+const n = "index-module_notificationComponent__khhkj", o = "index-module_isVisible__snkQ9", t = "index-module_isClosing__wPaVu", i = "index-module_toastContent__gDwuN", s = {
+  notificationComponent: n,
+  isVisible: o,
+  isClosing: t,
+  toastContent: i
+};
+export {
+  s as default,
+  t as isClosing,
+  o as isVisible,
+  n as notificationComponent,
+  i as toastContent
+};
+//# sourceMappingURL=index.module.css.js.map

package/dist/notification/index.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/notification/utils/index.d.ts

@@ -1,4 +1,2 @@
-/// <reference types="react" />
-import React from 'react';
-declare function useClickOutside(ref: React.RefObject<HTMLElement>, cb: (e: React.MouseEvent | React.TouchEvent) => void): void;
-export { useClickOutside };
+import { default as React } from 'react';
+export declare function useClickOutside(ref: React.RefObject<HTMLElement>, cb: (e: React.MouseEvent | React.TouchEvent) => void): void;

package/dist/notification/utils/index.js

@@ -1 +1,15 @@
-import e from"react";function t(t,n){e.useEffect((function(){var e=function(e){t.current&&!t.current.contains(e.target)&&n(e)};return document.addEventListener("click",e),document.addEventListener("touchend",e),function(){document.removeEventListener("click",e),document.removeEventListener("touchend",e)}}),[t,n])}export{t as useClickOutside};
+import r from "react";
+function u(t, n) {
+  r.useEffect(() => {
+    const e = (c) => {
+      !t.current || t.current.contains(c.target) || n(c);
+    };
+    return document.addEventListener("click", e), document.addEventListener("touchend", e), () => {
+      document.removeEventListener("click", e), document.removeEventListener("touchend", e);
+    };
+  }, [t, n]);
+}
+export {
+  u as useClickOutside
+};
+//# sourceMappingURL=index.js.map

package/dist/notification/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/notification/utils/index.ts"],"sourcesContent":["import React from 'react';\n\n/*\n * Дублирую хук из @alfalab/hooks, так как не подходят названия событий\n * https://github.com/alfa-laboratory/utils/blob/develop/packages/hooks/src/useClickOutside/hook.ts\n * issue завел, когда изменения будут реализованы, отсюда можно будет удалить\n * https://github.com/alfa-laboratory/utils/issues/35\n */\nexport function useClickOutside(\n    ref: React.RefObject<HTMLElement>,\n    cb: (e: React.MouseEvent | React.TouchEvent) => void,\n): void {\n    React.useEffect(() => {\n        const handler = (event: any) => {\n            if (!ref.current || ref.current.contains(event.target)) {\n                return;\n            }\n\n            cb(event);\n        };\n\n        document.addEventListener('click', handler);\n        document.addEventListener('touchend', handler);\n\n        return () => {\n            document.removeEventListener('click', handler);\n            document.removeEventListener('touchend', handler);\n        };\n    }, [ref, cb]);\n}\n"],"names":["useClickOutside","ref","cb","React","handler","event"],"mappings":";AAQO,SAASA,EACZC,GACAC,GACI;AACJ,EAAAC,EAAM,UAAU,MAAM;AAClB,UAAMC,IAAU,CAACC,MAAe;AAC5B,MAAI,CAACJ,EAAI,WAAWA,EAAI,QAAQ,SAASI,EAAM,MAAM,KAIrDH,EAAGG,CAAK;AAAA,IACZ;AAEA,oBAAS,iBAAiB,SAASD,CAAO,GAC1C,SAAS,iBAAiB,YAAYA,CAAO,GAEtC,MAAM;AACT,eAAS,oBAAoB,SAASA,CAAO,GAC7C,SAAS,oBAAoB,YAAYA,CAAO;AAAA,IACpD;AAAA,EACJ,GAAG,CAACH,GAAKC,CAAE,CAAC;AAChB;"}

package/dist/padding/component.d.ts

@@ -1,9 +1,13 @@
-/// <reference types="react" />
-import React from 'react';
-interface PaddingProps {
+import { default as React } from 'react';
+export interface PaddingProps {
     children?: React.ReactNode;
+    /**
+     * @param padding - значение паддинга в строке ("0px 0px 0px 0px")
+     */
     padding: string;
+    /**
+     * @param className - дополнительный класс
+     */
     className?: string;
 }
-declare const Padding: React.FC<PaddingProps>;
-export { PaddingProps, Padding };
+export declare const Padding: React.FC<PaddingProps>;

package/dist/padding/component.js

@@ -1 +1,6 @@
-import e from"react";var a=function(a){var r=a.padding,t=void 0===r?"":r,d=a.className,i=a.children;return e.createElement("div",{style:{padding:t},className:d},i)};export{a as Padding};
+import { jsx as i } from "react/jsx-runtime";
+const s = ({ padding: o = "", className: t, children: d }) => /* @__PURE__ */ i("div", { style: { padding: o }, className: t, children: d });
+export {
+  s as Padding
+};
+//# sourceMappingURL=component.js.map

package/dist/padding/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sources":["../../src/padding/component.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface PaddingProps {\n    children?: React.ReactNode;\n\n    /**\n     * @param padding - значение паддинга в строке (\"0px 0px 0px 0px\")\n     */\n    padding: string;\n\n    /**\n     * @param className - дополнительный класс\n     */\n    className?: string;\n}\n\nexport const Padding: React.FC<PaddingProps> = ({ padding = '', className, children }) => (\n    <div style={ { padding } } className={ className }>\n        { children }\n    </div>\n);\n"],"names":["Padding","padding","className","children","jsx"],"mappings":";AAgBO,MAAMA,IAAkC,CAAC,EAAE,SAAAC,IAAU,IAAI,WAAAC,GAAW,UAAAC,EAAA,MACvE,gBAAAC,EAAC,SAAI,OAAQ,EAAE,SAAAH,EAAA,GAAY,WAAAC,GACrB,UAAAC,EAAA,CACN;"}

package/dist/padding/index.d.ts

@@ -1 +1 @@
-export * from "./component";
+export * from './component';

package/dist/padding/index.js

@@ -1 +1,5 @@
-export{Padding}from"./component.js";import"react";
+import { Padding as r } from "./component.js";
+export {
+  r as Padding
+};
+//# sourceMappingURL=index.js.map

package/dist/padding/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/page-container/component.d.ts

@@ -1,15 +1,14 @@
-/// <reference types="react" />
-import React from 'react';
-type ImageProps = {
+import { default as React } from 'react';
+declare type ImageProps = {
     image: string;
     imageDescription: string;
 } | {
     image?: never;
     imageDescription?: never;
 };
-type Props = {
+declare type Props = {
     children?: React.ReactNode;
     color: string;
 } & ImageProps;
-declare const PageContainer: React.FC<Props>;
-export { PageContainer };
+export declare const PageContainer: React.FC<Props>;
+export {};

package/dist/page-container/component.js

@@ -1 +1,18 @@
-import e from"react";var a="index-module_pageContainer__1SGLI",l="index-module_image__2Vlah",r="index-module_bg__3H4DG",t=function(t){var n=t.children,i=t.color,m=t.image,c=t.imageDescription;return e.createElement("div",{style:{backgroundColor:i},className:a},m&&e.createElement("section",null,e.createElement("img",{className:l,src:m,alt:c}),e.createElement("div",{className:r})),e.createElement("div",null,n))};export{t as PageContainer};
+import { jsxs as o, jsx as s } from "react/jsx-runtime";
+import e from "./index.module.css.js";
+const n = ({
+  children: r,
+  color: i,
+  image: a,
+  imageDescription: t
+}) => /* @__PURE__ */ o("div", { style: { backgroundColor: i }, className: e.pageContainer, children: [
+  a && /* @__PURE__ */ o("section", { children: [
+    /* @__PURE__ */ s("img", { className: e.image, src: a, alt: t }),
+    /* @__PURE__ */ s("div", { className: e.bg })
+  ] }),
+  /* @__PURE__ */ s("div", { children: r })
+] });
+export {
+  n as PageContainer
+};
+//# sourceMappingURL=component.js.map

package/dist/page-container/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sources":["../../src/page-container/component.tsx"],"sourcesContent":["import React from 'react';\n\nimport styles from './index.module.css';\n\ntype ImageProps = {\n    image: string;\n    imageDescription: string;\n} | {\n    image?: never;\n    imageDescription?: never;\n};\n\ntype Props = {\n    children?: React.ReactNode;\n    color: string;\n} & ImageProps;\n\nexport const PageContainer: React.FC<Props> = ({\n    children,\n    color,\n    image,\n    imageDescription,\n}) => (\n    <div style={ { backgroundColor: color } } className={ styles.pageContainer }>\n        { image && (\n            <section>\n                <img className={ styles.image } src={ image } alt={ imageDescription } />\n                <div className={ styles.bg } />\n            </section>\n        ) }\n\n        <div>{ children }</div>\n    </div>\n);\n"],"names":["PageContainer","children","color","image","imageDescription","jsxs","styles","jsx"],"mappings":";;AAiBO,MAAMA,IAAiC,CAAC;AAAA,EAC3C,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,kBAAAC;AACJ,MACI,gBAAAC,EAAC,SAAI,OAAQ,EAAE,iBAAiBH,EAAA,GAAU,WAAYI,EAAO,eACvD,UAAA;AAAA,EAAAH,uBACG,WAAA,EACG,UAAA;AAAA,IAAA,gBAAAI,EAAC,SAAI,WAAYD,EAAO,OAAQ,KAAMH,GAAQ,KAAMC,GAAmB;AAAA,IACvE,gBAAAG,EAAC,OAAA,EAAI,WAAYD,EAAO,GAAA,CAAK;AAAA,EAAA,GACjC;AAAA,EAGJ,gBAAAC,EAAC,SAAM,UAAAN,EAAA,CAAU;AAAA,EAAA,CACrB;"}

package/dist/page-container/index.d.ts

@@ -1 +1 @@
-export * from "./component";
+export * from './component';

package/dist/page-container/index.js

@@ -1 +1,5 @@
-export{PageContainer}from"./component.js";import"react";
+import { PageContainer as r } from "./component.js";
+export {
+  r as PageContainer
+};
+//# sourceMappingURL=index.js.map

package/dist/page-container/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/page-container/index.module.css

@@ -0,0 +1 @@
+.index-module_pageContainer__GxW31{position:relative}.index-module_pageContainer__GxW31>div{position:relative;z-index:3;margin:0 auto;max-width:1240px}.index-module_image__-yy-Z,.index-module_bg__p3-N0{position:absolute;width:100%;height:100%;top:0;left:0}.index-module_image__-yy-Z{fit-content:"cover"}.index-module_bg__p3-N0{background:#25252799}

package/dist/page-container/index.module.css.js

@@ -0,0 +1,13 @@
+import './index.module.css';
+const e = "index-module_pageContainer__GxW31", n = "index-module_image__-yy-Z", a = "index-module_bg__p3-N0", o = {
+  pageContainer: e,
+  image: n,
+  bg: a
+};
+export {
+  a as bg,
+  o as default,
+  n as image,
+  e as pageContainer
+};
+//# sourceMappingURL=index.module.css.js.map

package/dist/page-container/index.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/page-loading/component.d.ts

@@ -1,3 +1,2 @@
 /// <reference types="react" />
-declare const PageLoading: () => JSX.Element;
-export { PageLoading };
+export declare const PageLoading: () => JSX.Element;

package/dist/page-loading/component.js

@@ -1 +1,8 @@
-import e from"react";import{Loader as t}from"../loader/component.js";import"classnames";var o="index-module_component__M4URt",r=function(){return e.createElement("div",{className:o},e.createElement(t,null))};export{r as PageLoading};
+import { jsx as o } from "react/jsx-runtime";
+import { Loader as r } from "../loader/component.js";
+import m from "./index.module.css.js";
+const s = () => /* @__PURE__ */ o("div", { className: m.component, children: /* @__PURE__ */ o(r, {}) });
+export {
+  s as PageLoading
+};
+//# sourceMappingURL=component.js.map

package/dist/page-loading/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sources":["../../src/page-loading/component.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Loader } from '../loader';\n\nimport styles from './index.module.css';\n\nexport const PageLoading = () => (\n    <div className={ styles.component }>\n        <Loader />\n    </div>\n);\n"],"names":["PageLoading","jsx","styles","Loader"],"mappings":";;;AAMO,MAAMA,IAAc,MACvB,gBAAAC,EAAC,OAAA,EAAI,WAAYC,EAAO,WACpB,UAAA,gBAAAD,EAACE,GAAA,CAAA,CAAO,EAAA,CACZ;"}

package/dist/page-loading/index.d.ts

@@ -1 +1 @@
-export * from "./component";
+export * from './component';

package/dist/page-loading/index.js

@@ -1 +1,5 @@
-export{PageLoading}from"./component.js";import"react";import"../loader/component.js";import"classnames";
+import { PageLoading as e } from "./component.js";
+export {
+  e as PageLoading
+};
+//# sourceMappingURL=index.js.map

package/dist/page-loading/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/page-loading/index.module.css

@@ -0,0 +1 @@
+.index-module_component__8H4iT{width:100%;height:100%;display:flex;justify-content:center;align-items:center}

package/dist/page-loading/index.module.css.js

@@ -0,0 +1,9 @@
+import './index.module.css';
+const o = "index-module_component__8H4iT", n = {
+  component: o
+};
+export {
+  o as component,
+  n as default
+};
+//# sourceMappingURL=index.module.css.js.map

package/dist/page-loading/index.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/page-with-controls/component.d.ts

@@ -1,14 +1,12 @@
-/// <reference types="react" />
-import React from 'react';
-import { ReactNode } from "react";
-type ImageProps = {
+import { default as React, ReactNode } from 'react';
+declare type ImageProps = {
     image: string;
     imageDescription: string;
 } | {
     image?: never;
     imageDescription?: never;
 };
-type ButtonProps = {
+declare type ButtonProps = {
     href?: string;
     leftAddons: ReactNode;
     disabled?: boolean;
@@ -16,9 +14,9 @@ type ButtonProps = {
     onClick?: () => void;
     text: string;
 };
-type Props = {
+declare type Props = {
     children?: React.ReactNode;
     buttons: ButtonProps[];
 } & ImageProps;
-declare const PageWithControls: React.FC<Props>;
-export { PageWithControls };
+export declare const PageWithControls: React.FC<Props>;
+export {};

package/dist/page-with-controls/component.js

@@ -1 +1,16 @@
-import{__rest as t,__assign as o}from"tslib";import e from"react";import{Button as r}from"../button/component.js";import{FlexColumns as m}from"../flex-columns/component.js";import{Grid as n}from"../grid/component.js";import{Typography as i}from"../typography/component.js";import"react-merge-refs";import"classnames";import"../hooks/useFocus/index.js";import"../loader/component.js";import"../grid/col/component.js";import"../grid/utils/index.js";import"../gutters.module-e2c68a2e.js";import"../grid/row/component.js";import"../typography/text/component.js";import"../colors.module-31cce552.js";import"../typography/title/index.js";import"../typography/title/component.js";var p=function(p){var c=p.children,s=p.buttons;return e.createElement(n.Row,null,e.createElement(n.Col,{width:7},e.createElement(m,{columns:1,gr:32},c)),e.createElement(n.Col,{width:4,offset:1},e.createElement(m,{columns:1,gr:16},s.map((function(m){var n=m.text,p=t(m,["text"]);return e.createElement(r,o({view:"ghost"},p),e.createElement(i.Title,{tag:"div",view:"xxsmall",color:"primary",weight:"regular"},n))})))))};export{p as PageWithControls};
+import { jsxs as h, jsx as r } from "react/jsx-runtime";
+import { Button as n } from "../button/component.js";
+import { FlexColumns as i } from "../flex-columns/component.js";
+import { Grid as o } from "../grid/component.js";
+import { Typography as s } from "../typography/component.js";
+const f = ({
+  children: l,
+  buttons: t
+}) => /* @__PURE__ */ h(o.Row, { children: [
+  /* @__PURE__ */ r(o.Col, { width: 7, children: /* @__PURE__ */ r(i, { columns: 1, gr: 32, children: l }) }),
+  /* @__PURE__ */ r(o.Col, { width: 4, offset: 1, children: /* @__PURE__ */ r(i, { columns: 1, gr: 16, children: t.map(({ text: m, ...e }) => /* @__PURE__ */ r(n, { view: "ghost", ...e, children: /* @__PURE__ */ r(s.Title, { tag: "div", view: "xxsmall", color: "primary", weight: "regular", children: m }) })) }) })
+] });
+export {
+  f as PageWithControls
+};
+//# sourceMappingURL=component.js.map

package/dist/page-with-controls/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sources":["../../src/page-with-controls/component.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\n\nimport { Button } from '../button';\nimport { FlexColumns } from '../flex-columns';\nimport { Grid } from '../grid';\nimport { Typography } from '../typography';\n\ntype ImageProps = {\n    image: string;\n    imageDescription: string;\n} | {\n    image?: never;\n    imageDescription?: never;\n};\n\ntype ButtonProps = {\n    href?: string;\n    leftAddons: ReactNode;\n    disabled?: boolean;\n    loading?: boolean;\n    onClick?: () => void;\n    text: string;\n};\n\ntype Props = {\n    children?: React.ReactNode;\n    buttons: ButtonProps[];\n} & ImageProps;\n\nexport const PageWithControls: React.FC<Props> = ({\n    children,\n    buttons,\n}) => (\n    <Grid.Row>\n        <Grid.Col width={ 7 }>\n            <FlexColumns columns={ 1 } gr={ 32 }>\n                { children }\n            </FlexColumns>\n        </Grid.Col>\n        <Grid.Col width={ 4 } offset={ 1 }>\n            <FlexColumns columns={ 1 } gr={ 16 }>\n                { buttons.map(({ text, ...props }) => (\n                    <Button view=\"ghost\" { ...props }>\n                        <Typography.Title tag=\"div\" view=\"xxsmall\" color=\"primary\" weight=\"regular\">\n                            { text }\n                        </Typography.Title>\n                    </Button>\n                )) }\n            </FlexColumns>\n        </Grid.Col>\n    </Grid.Row>\n);\n"],"names":["PageWithControls","children","buttons","jsxs","Grid","jsx","FlexColumns","text","props","Button","Typography"],"mappings":";;;;;AA6BO,MAAMA,IAAoC,CAAC;AAAA,EAC9C,UAAAC;AAAA,EACA,SAAAC;AACJ,MACI,gBAAAC,EAACC,EAAK,KAAL,EACG,UAAA;AAAA,EAAA,gBAAAC,EAACD,EAAK,KAAL,EAAS,OAAQ,GACd,UAAA,gBAAAC,EAACC,GAAA,EAAY,SAAU,GAAI,IAAK,IAC1B,UAAAL,EAAA,CACN,GACJ;AAAA,EACA,gBAAAI,EAACD,EAAK,KAAL,EAAS,OAAQ,GAAI,QAAS,GAC3B,UAAA,gBAAAC,EAACC,GAAA,EAAY,SAAU,GAAI,IAAK,IAC1B,UAAAJ,EAAQ,IAAI,CAAC,EAAE,MAAAK,GAAM,GAAGC,0BACrBC,GAAA,EAAO,MAAK,SAAU,GAAGD,GACtB,4BAACE,EAAW,OAAX,EAAiB,KAAI,OAAM,MAAK,WAAU,OAAM,WAAU,QAAO,WAC5D,aACN,EAAA,CACJ,CACH,GACL,EAAA,CACJ;AAAA,EAAA,CACJ;"}

package/dist/page-with-controls/index.d.ts

@@ -1 +1 @@
-export * from "./component";
+export * from './component';

package/dist/page-with-controls/index.js

@@ -1 +1,5 @@
-export{PageWithControls}from"./component.js";import"tslib";import"react";import"../button/component.js";import"react-merge-refs";import"classnames";import"../hooks/useFocus/index.js";import"../loader/component.js";import"../flex-columns/component.js";import"../grid/component.js";import"../grid/col/component.js";import"../grid/utils/index.js";import"../gutters.module-e2c68a2e.js";import"../grid/row/component.js";import"../typography/component.js";import"../typography/text/component.js";import"../colors.module-31cce552.js";import"../typography/title/index.js";import"../typography/title/component.js";
+import { PageWithControls as t } from "./component.js";
+export {
+  t as PageWithControls
+};
+//# sourceMappingURL=index.js.map

package/dist/page-with-controls/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/picker-button/common/index.d.ts

@@ -1 +1 @@
-export * from "./labeled-button/index";
+export * from './labeled-button';

package/dist/picker-button/common/index.js

@@ -1 +1,5 @@
-export{LabeledButton}from"./labeled-button/index.js";import"react";import"classnames";import"../../typography/component.js";import"../../typography/text/component.js";import"../../colors.module-31cce552.js";import"../../typography/title/index.js";import"tslib";import"../../typography/title/component.js";
+import { LabeledButton as t } from "./labeled-button/index.js";
+export {
+  t as LabeledButton
+};
+//# sourceMappingURL=index.js.map

package/dist/picker-button/common/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/picker-button/common/labeled-button/index.d.ts

@@ -1,12 +1,9 @@
-/// <reference types="react" />
-import React from 'react';
-import { MouseEvent } from "react";
-type LabeledButtonProps = {
+import { default as React, MouseEvent } from 'react';
+export declare type LabeledButtonProps = {
     label: string | React.ReactNode;
     value: string | React.ReactNode;
     id?: string;
     className?: string;
     onClick: (event: MouseEvent<HTMLButtonElement>) => void;
 };
-declare const LabeledButton: React.ForwardRefExoticComponent<LabeledButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export { LabeledButtonProps, LabeledButton };
+export declare const LabeledButton: React.ForwardRefExoticComponent<LabeledButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/picker-button/common/labeled-button/index.js

@@ -1 +1,19 @@
-import t,{forwardRef as e}from"react";import o from"classnames";import{Typography as r}from"../../../typography/component.js";import"../../../typography/text/component.js";import"../../../colors.module-31cce552.js";import"../../../typography/title/index.js";import"tslib";import"../../../typography/title/component.js";var i="index-module_wrapper__33gwN",m=e((function(e,m){var p=e.label,a=e.value,l=e.id,c=e.className,n=e.onClick;return t.createElement("button",{className:o(i,c),ref:m,id:l,type:"button",onClick:n},t.createElement(r.Text,{view:"caps",weight:"medium",color:"tertiary"},p),t.createElement(r.Text,{view:"title",weight:"medium",color:"primary"},a))}));export{m as LabeledButton};
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import s from "classnames";
+import { Typography as t } from "../../../typography/component.js";
+import n from "./index.module.css.js";
+const u = l(({
+  label: e,
+  value: o,
+  id: i,
+  className: m,
+  onClick: p
+}, a) => /* @__PURE__ */ c("button", { className: s(n.wrapper, m), ref: a, id: i, type: "button", onClick: p, children: [
+  /* @__PURE__ */ r(t.Text, { view: "caps", weight: "medium", color: "tertiary", children: e }),
+  /* @__PURE__ */ r(t.Text, { view: "title", weight: "medium", color: "primary", children: o })
+] }));
+export {
+  u as LabeledButton
+};
+//# sourceMappingURL=index.js.map