@kwiz/fluentui 1.0.0

package/dist/controls/list.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles, tokens } from '@fluentui/react-components';
+import { LOGO_BLUE_SQUARE, LOGO_WHITE_SQUARE, isNullOrUndefined, isString } from '@kwiz/common';
+import { KnownClassNames, mixins } from '../styles/styles';
+import { Horizontal } from './horizontal';
+import { Section } from './section';
+import { Vertical } from './vertical';
+const useStyles = makeStyles({
+    list: {
+        rowGap: 0
+    },
+    listItem: {
+        padding: tokens.spacingVerticalS,
+        ':hover': {
+            backgroundColor: tokens.colorNeutralBackground1Hover
+        }
+    },
+    listItemSelected: {
+        backgroundColor: tokens.colorNeutralBackground1Selected
+    },
+    media: {
+        width: '32px',
+        fontSize: tokens.fontSizeBase600,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center'
+    },
+    image: {
+        width: tokens.lineHeightBase600,
+        height: tokens.lineHeightBase600,
+        backgroundPosition: 'center center',
+        backgroundSize: 'cover',
+        borderRadius: tokens.borderRadiusCircular,
+        border: `1px solid ${tokens.colorNeutralStroke1}`
+    },
+    listItemBody: {
+        rowGap: 0,
+        width: 'calc(100% - 44px)'
+    },
+    listItemHeader: mixins.ellipsis,
+    listItemContent: Object.assign(Object.assign({}, mixins.ellipsis), { fontSize: tokens.fontSizeBase200 }),
+    listItemMedia: Object.assign(Object.assign({}, mixins.ellipsis), { maxWidth: '20%', '& svg': {
+            height: tokens.fontSizeBase300
+        }, '& button': {
+            padding: 0,
+            minWidth: 0,
+            minHeight: 0,
+            height: '14px'
+        } }),
+    listItemMediaNoTrim: {
+        overflow: 'visible',
+        maxWidth: 'fit-content'
+    },
+    listItemMultilineContent: {
+        whiteSpace: 'pre-line'
+    }
+});
+export const ListEx = (props) => {
+    const cssNames = useStyles();
+    const listItemElm = (item) => _jsxs(Horizontal, { css: [cssNames.listItem, item.selected && cssNames.listItemSelected], onClick: item.onClick, children: [item.media && _jsx(Section, { css: [cssNames.media], onClick: (e) => {
+                    if (!item.onClickOnMedia)
+                        e.stopPropagation(); //media may have its on onclick
+                }, children: isString(item.media)
+                    ? _jsx("div", { className: cssNames.image, style: { backgroundImage: `url('${encodeURI(item.media)}'), url('${props.dark ? LOGO_WHITE_SQUARE : LOGO_BLUE_SQUARE}')` } })
+                    : item.media }), _jsxs(Vertical, { main: true, css: [cssNames.listItemBody], children: [_jsxs(Horizontal, { main: true, children: [_jsx(Section, { main: true, css: [cssNames.listItemHeader], children: item.header }), item.headerMedia && _jsx(Section, { onClick: (e) => {
+                                    e.stopPropagation(); //media may have its on onclick
+                                }, css: [cssNames.listItemMedia, props.showAllHeaderMedia && cssNames.listItemMediaNoTrim], children: item.headerMedia })] }), !isNullOrUndefined(item.content)
+                        ? (Array.isArray(item.content) ? item.content : [item.content]).map((c, idx) => isNullOrUndefined(c) ? undefined : _jsx(Section, { css: [cssNames.listItemContent, props.multiline ? cssNames.listItemMultilineContent : undefined], children: c }, idx))
+                        : undefined] })] }, item.key);
+    return (_jsx(Vertical, { css: [cssNames.list, KnownClassNames.list], children: props.items.map(item => listItemElm(item)) }));
+};
+//# sourceMappingURL=list.js.map

package/dist/controls/list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","sourceRoot":"","sources":["../../src/controls/list.tsx"],"names":[],"mappings":"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"}

package/dist/controls/loading.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+interface IProps {
+}
+export declare const Loading: React.FunctionComponent<IProps>;
+export {};

package/dist/controls/loading.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LOGO_ANIM_SMALL } from '@kwiz/common';
+import { Centered } from './centered';
+export const Loading = (props) => {
+    return (_jsx(Centered, { children: _jsx("img", { src: LOGO_ANIM_SMALL, alt: "loading", style: { width: '15vw' } }) }));
+};
+//# sourceMappingURL=loading.js.map

package/dist/controls/loading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading.js","sourceRoot":"","sources":["../../src/controls/loading.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAKtC,MAAM,CAAC,MAAM,OAAO,GAAoC,CAAC,KAAK,EAAE,EAAE;IAC9D,OAAO,CACH,KAAC,QAAQ,cAAC,cAAK,GAAG,EAAE,eAAe,EAAE,GAAG,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAI,GAAW,CAC7F,CAAC;AACN,CAAC,CAAA"}

package/dist/controls/please-wait.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { IPrompterProps } from './prompt';
+interface IProps {
+    step?: number;
+    max?: number;
+    /** do not wrap in a dialog */
+    contentOnly?: boolean;
+    cancelText?: string;
+    onCancel?: () => void;
+}
+export declare const PleaseWait: React.FunctionComponent<React.PropsWithChildren<IProps>>;
+export declare const PleaseWaitPrompt: (props: {
+    message: string;
+    step?: number;
+    max?: number;
+}) => IPrompterProps;
+export {};

package/dist/controls/please-wait.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Field, ProgressBar } from '@fluentui/react-components';
+import { isFunction } from '@kwiz/common';
+import { Prompter } from './prompt';
+export const PleaseWait = (props) => {
+    const field = _jsx(Field, { validationMessage: "please wait...", validationState: "none", children: _jsx(ProgressBar, { value: props.step, max: props.max }) });
+    return (props.contentOnly
+        ? field
+        : _jsx(Prompter, { hideOk: true, hideCancel: !isFunction(props.onCancel), cancelButtonText: props.cancelText || 'cancel', onCancel: props.onCancel, children: field }));
+};
+export const PleaseWaitPrompt = (props) => ({
+    //title: 'please wait...',
+    hideOk: true, hideCancel: true,
+    children: _jsx(Field, { validationMessage: props.message, validationState: "none", children: _jsx(ProgressBar, { value: props.step, max: props.max }) })
+});
+//# sourceMappingURL=please-wait.js.map

package/dist/controls/please-wait.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"please-wait.js","sourceRoot":"","sources":["../../src/controls/please-wait.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAkB,QAAQ,EAAE,MAAM,UAAU,CAAC;AASpD,MAAM,CAAC,MAAM,UAAU,GAA6D,CAAC,KAAK,EAAE,EAAE;IAC1F,MAAM,KAAK,GAAG,KAAC,KAAK,IAAC,iBAAiB,EAAC,gBAAgB,EAAC,eAAe,EAAC,MAAM,YAC1E,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,GAAI,GAC9C,CAAC;IACT,OAAO,CAAC,KAAK,CAAC,WAAW;QACrB,CAAC,CAAC,KAAK;QACP,CAAC,CAAC,KAAC,QAAQ,IAAC,MAAM,QACd,UAAU,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,EACvC,gBAAgB,EAAE,KAAK,CAAC,UAAU,IAAI,QAAQ,EAC9C,QAAQ,EAAE,KAAK,CAAC,QAAQ,YAAG,KAAK,GAAY,CACnD,CAAC;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAwD,EAAkB,EAAE,CAAC,CAAC;IAC3G,0BAA0B;IAC1B,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI;IAC9B,QAAQ,EAAE,KAAC,KAAK,IAAC,iBAAiB,EAAE,KAAK,CAAC,OAAO,EAAE,eAAe,EAAC,MAAM,YACrE,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,GAAI,GAC9C;CACX,CAAC,CAAC"}

package/dist/controls/prompt.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ButtonEXProps } from './button';
+export interface IPrompterProps {
+    hideOk?: boolean;
+    hideCancel?: boolean;
+    /** return false to prevent closing the dialog. */
+    onOK?: () => Promise<void> | void;
+    onCancel?: () => void;
+    okButtonText?: string;
+    cancelButtonText?: string;
+    title?: string;
+    okButtonProps?: Partial<ButtonEXProps>;
+    cancelButtonProps?: Partial<ButtonEXProps>;
+    children?: JSX.Element;
+}
+export declare const Prompter: React.FunctionComponent<React.PropsWithChildren<IPrompterProps>>;

package/dist/controls/prompt.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogActions, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger } from '@fluentui/react-components';
+import { isNullOrEmptyString } from '@kwiz/common';
+import React from 'react';
+import { ButtonEXSecondary } from './button';
+export const Prompter = (props) => {
+    let okProps = Object.assign(Object.assign({}, (props.okButtonProps || {})), { onClick: () => props.onOK(), title: props.okButtonText || 'yes' });
+    let cancelProps = Object.assign(Object.assign({}, (props.cancelButtonProps || {})), { onClick: () => props.onCancel(), title: props.cancelButtonText || 'no' });
+    React.useEffect(() => {
+        let handler = (e) => {
+            if (e.key === "Enter")
+                props.onOK();
+            else if (e.key === "Escape")
+                props.onCancel();
+        };
+        document.addEventListener("keydown", handler);
+        return () => document.removeEventListener("keydown", handler);
+    });
+    return (_jsx(Dialog, { open: true, children: _jsxs(DialogSurface, { children: [!isNullOrEmptyString(props.title) && _jsx(DialogTitle, { children: props.title }), _jsxs(DialogBody, { children: [_jsx(DialogContent, { children: props.children }), _jsxs(DialogActions, { children: [props.hideOk ? undefined : _jsx(DialogTrigger, { disableButtonEnhancement: true, children: _jsx(ButtonEXSecondary, Object.assign({}, okProps)) }), props.hideCancel ? undefined : _jsx(DialogTrigger, { disableButtonEnhancement: true, children: _jsx(ButtonEXSecondary, Object.assign({}, cancelProps)) })] })] })] }) }));
+};
+//# sourceMappingURL=prompt.js.map

package/dist/controls/prompt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prompt.js","sourceRoot":"","sources":["../../src/controls/prompt.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACzI,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAiB,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAe5D,MAAM,CAAC,MAAM,QAAQ,GAAqE,CAAC,KAAK,EAAE,EAAE;IAChG,IAAI,OAAO,mCACJ,CAAC,KAAK,CAAC,aAAoB,IAAI,EAAE,CAAC,KACrC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,EAC3B,KAAK,EAAE,KAAK,CAAC,YAAY,IAAI,KAAK,GACrC,CAAC;IACF,IAAI,WAAW,mCACR,CAAC,KAAK,CAAC,iBAAwB,IAAI,EAAE,CAAC,KACzC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,EAC/B,KAAK,EAAE,KAAK,CAAC,gBAAgB,IAAI,IAAI,GACxC,CAAC;IACF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,OAAO,GAAG,CAAC,CAAgB,EAAE,EAAE;YAC/B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;gBAAE,KAAK,CAAC,IAAI,EAAE,CAAC;iBAC/B,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;gBAAE,KAAK,CAAC,QAAQ,EAAE,CAAC;QAElD,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QAC9C,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAClE,CAAC,CAAC,CAAC;IACH,OAAO,CACH,KAAC,MAAM,IAAC,IAAI,kBACR,MAAC,aAAa,eACT,CAAC,mBAAmB,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,KAAC,WAAW,cAAE,KAAK,CAAC,KAAK,GAAe,EAC9E,MAAC,UAAU,eACP,KAAC,aAAa,cACT,KAAK,CAAC,QAAQ,GACH,EAChB,MAAC,aAAa,eACT,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAC,aAAa,IAAC,wBAAwB,kBAC/D,KAAC,iBAAiB,oBAAK,OAAO,EAAI,GACtB,EACf,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAC,aAAa,IAAC,wBAAwB,kBACnE,KAAC,iBAAiB,oBAAK,WAAW,EAAI,GAC1B,IACJ,IACP,IACD,GACX,CACZ,CAAC;AACN,CAAC,CAAA"}

package/dist/controls/search.d.ts

@@ -0,0 +1,13 @@
+import { InputProps } from '@fluentui/react-components';
+import React from 'react';
+interface IProps extends InputProps {
+    main?: boolean;
+    delay?: number;
+    /** if changing the value in the caller - change this prop to reset */
+    resetValue?: string;
+    onChangeDeferred?: (newValue: string) => void;
+    onChangeSync?: (newValue: string) => void;
+}
+/** value is set on first load. to change the value after it was first set - change the compoenet's key. */
+export declare const Search: React.FunctionComponent<React.PropsWithChildren<IProps>>;
+export {};

package/dist/controls/search.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input, makeStyles } from '@fluentui/react-components';
+import { DismissRegular, SearchRegular } from "@fluentui/react-icons";
+import { debounce, isFunction, isNullOrEmptyString } from '@kwiz/common';
+import React, { useState } from 'react';
+import { GetLogger } from '../_modules/config';
+import { useStateEX } from '../helpers/hooks';
+import { mixins } from '../styles/styles';
+const logger = GetLogger("Search");
+const useStyles = makeStyles({
+    main: mixins.main,
+    clickable: mixins.clickable,
+});
+/** value is set on first load. to change the value after it was first set - change the compoenet's key. */
+export const Search = (props) => {
+    const cssNames = useStyles();
+    const [resetKey, setResetKey] = useState(1);
+    let delay = props.delay || 1;
+    //cannot call debounce every render, since it won't be the same debounced instance...
+    var notifyParent = React.useMemo(() => debounce(v => {
+        logger.log(`Set: ${v}`);
+        props.onChangeDeferred(v);
+    }, delay * 1000), [delay]);
+    let [value, setValue] = useStateEX(props.value, {
+        onChange: newValue => {
+            if (isFunction(props.onChangeSync))
+                props.onChangeSync(newValue);
+            if (isFunction(props.onChangeDeferred))
+                notifyParent(newValue);
+            return newValue;
+        }
+    });
+    //once props change, reset this control value to match
+    React.useEffect(() => {
+        setValue(props.resetValue);
+        //todo: bug: setting value does not sync into the text box
+        setResetKey(resetKey + 1);
+    }, [props.resetValue]);
+    return (_jsx(Input, Object.assign({}, props, { value: value, onChange: (e, data) => setValue(data.value), className: props.main ? cssNames.main : undefined, contentBefore: !isNullOrEmptyString(value) ? undefined : _jsx(SearchRegular, {}), contentAfter: isNullOrEmptyString(value)
+            ? undefined
+            : _jsx(DismissRegular, { className: cssNames.clickable, onClick: () => {
+                    setValue("");
+                    //todo: bug: setting value does not sync into the text box
+                    setResetKey(resetKey + 1);
+                } }) }), resetKey));
+};
+//# sourceMappingURL=search.js.map

package/dist/controls/search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.js","sourceRoot":"","sources":["../../src/controls/search.tsx"],"names":[],"mappings":"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"}

package/dist/controls/section.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface ISectionProps {
+    main?: boolean;
+    css?: string[];
+    style?: React.CSSProperties;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    rootProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    title?: string;
+    left?: boolean;
+    right?: boolean;
+}
+export declare const Section: React.ForwardRefExoticComponent<ISectionProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/controls/section.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles, mergeClasses, tokens } from '@fluentui/react-components';
+import { isFunction, isNotEmptyArray } from '@kwiz/common';
+import React from 'react';
+import { KnownClassNames, mixins } from '../styles/styles';
+const useStyles = makeStyles({
+    main: mixins.main,
+    clickable: mixins.clickable,
+    left: Object.assign(Object.assign({}, mixins.float), { float: "left", marginRight: tokens.spacingHorizontalXXL }),
+    right: Object.assign(Object.assign({}, mixins.float), { float: "right", marginRight: tokens.spacingHorizontalXXL })
+});
+export const Section = React.forwardRef((props, ref) => {
+    const cssNames = useStyles();
+    let css = [KnownClassNames.section];
+    if (props.main)
+        css.push(cssNames.main);
+    if (isFunction(props.onClick))
+        css.push(cssNames.clickable);
+    if (props.left)
+        css.push(cssNames.left);
+    else if (props.right)
+        css.push(cssNames.right);
+    if (isNotEmptyArray(props.css))
+        css.push(...props.css);
+    return (_jsx("div", Object.assign({ ref: ref }, (props.rootProps || {}), { title: props.title, style: props.style, className: mergeClasses(...css), onClick: props.onClick, children: props.children })));
+});
+//# sourceMappingURL=section.js.map

package/dist/controls/section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"section.js","sourceRoot":"","sources":["../../src/controls/section.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE3D,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC,IAAI;IACjB,SAAS,EAAE,MAAM,CAAC,SAAS;IAC3B,IAAI,kCACG,MAAM,CAAC,KAAK,KACf,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,MAAM,CAAC,oBAAoB,GAC3C;IACD,KAAK,kCACE,MAAM,CAAC,KAAK,KACf,KAAK,EAAE,OAAO,EACd,WAAW,EAAE,MAAM,CAAC,oBAAoB,GAC3C;CACJ,CAAC,CAAC;AAcH,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAyD,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC3G,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,IAAI,GAAG,GAAa,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;IAC9C,IAAI,KAAK,CAAC,IAAI;QAAE,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IACxC,IAAI,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC;QACzB,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;IAEjC,IAAI,KAAK,CAAC,IAAI;QAAE,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;SACnC,IAAI,KAAK,CAAC,KAAK;QAAE,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE/C,IAAI,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC;QAAE,GAAG,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEvD,OAAO,CACH,4BAAK,GAAG,EAAE,GAAG,IAAM,CAAC,KAAK,CAAC,SAAS,IAAI,EAAE,CAAC,IAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAC9E,SAAS,EAAE,YAAY,CAAC,GAAG,GAAG,CAAC,EAC/B,OAAO,EAAE,KAAK,CAAC,OAAO,YACrB,KAAK,CAAC,QAAQ,IACb,CACT,CAAC;AACN,CAAC,CAAC,CAAC"}

package/dist/controls/svg.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+interface IProps {
+    size: number;
+}
+export declare const YouTubeIcon: React.FunctionComponent<React.PropsWithChildren<IProps>>;
+export declare const MermaidIcon: React.FunctionComponent<React.PropsWithChildren<IProps>>;
+export declare const TeamsIcon: React.FunctionComponent<React.PropsWithChildren<IProps>>;
+export declare const SVGLinkIcon: (props: {
+    size: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const SVGSplitIcon: (props: {
+    size: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const HubSpotIcon: (props: {
+    size: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const GetSVGLinkIcon: (props: {
+    size: number;
+}) => string;
+export declare const GetSVGSplitIcon: (props: {
+    size: number;
+}) => string;
+export {};

package/dist/controls/svg.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tokens } from '@fluentui/react-components';
+export const YouTubeIcon = (props) => {
+    return (_jsx("svg", { height: `${props.size}px`, width: `${props.size}px`, version: "1.1", id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: "0 0 461.001 461.001", xmlSpace: "preserve", children: _jsx("g", { children: _jsx("path", { style: { fill: "#F61C0D" }, d: "M365.257,67.393H95.744C42.866,67.393,0,110.259,0,163.137v134.728\r\nc0,52.878,42.866,95.744,95.744,95.744h269.513c52.878,0,95.744-42.866,95.744-95.744V163.137\r\nC461.001,110.259,418.135,67.393,365.257,67.393z M300.506,237.056l-126.06,60.123c-3.359,1.602-7.239-0.847-7.239-4.568V168.607\r\nc0-3.774,3.982-6.22,7.348-4.514l126.06,63.881C304.363,229.873,304.298,235.248,300.506,237.056z" }) }) }));
+};
+export const MermaidIcon = (props) => {
+    return (_jsxs("svg", { height: `${props.size}px`, width: `${props.size}px`, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 490.16 490.16", children: [_jsx("defs", { children: _jsx("style", { children: `.mm-cls-1{fill:#ff3670;}.mm-cls-2{fill:#fff;}` }) }), _jsx("rect", { className: "mm-cls-1", width: "490.16", height: "490.16", rx: "84.61" }), _jsx("path", { className: "mm-cls-2", d: "M407.48,111.18A165.2,165.2,0,0,0,245.08,220,165.2,165.2,0,0,0,82.68,111.18a165.5,165.5,0,0,0,72.06,143.64,88.81,88.81,0,0,1,38.53,73.45v50.86H296.9V328.27a88.8,88.8,0,0,1,38.52-73.45,165.41,165.41,0,0,0,72.06-143.64Z" }), _jsx("path", { className: "mm-cls-2", d: "M160.63,328.27a56.09,56.09,0,0,0-24.27-46.49,198.74,198.74,0,0,1-28.54-23.66A196.87,196.87,0,0,1,82.53,227V379.13h78.1Z" }), _jsx("path", { className: "mm-cls-2", d: "M329.53,328.27a56.09,56.09,0,0,1,24.27-46.49,198.74,198.74,0,0,0,28.54-23.66A196.87,196.87,0,0,0,407.63,227V379.13h-78.1Z" })] }));
+};
+export const TeamsIcon = (props) => {
+    return (_jsxs("svg", { height: `${props.size}px`, width: `${props.size}px`, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 2228.833 2073.333", children: [_jsx("path", { fill: "#5059C9", d: "M1554.637,777.5h575.713c54.391,0,98.483,44.092,98.483,98.483c0,0,0,0,0,0v524.398 c0,199.901-162.051,361.952-361.952,361.952h0h-1.711c-199.901,0.028-361.975-162-362.004-361.901c0-0.017,0-0.034,0-0.052V828.971 C1503.167,800.544,1526.211,777.5,1554.637,777.5L1554.637,777.5z" }), _jsx("circle", { fill: "#5059C9", cx: "1943.75", cy: "440.583", r: "233.25" }), _jsx("circle", { fill: "#7B83EB", cx: "1218.083", cy: "336.917", r: "336.917" }), _jsx("path", { fill: "#7B83EB", d: "M1667.323,777.5H717.01c-53.743,1.33-96.257,45.931-95.01,99.676v598.105 c-7.505,322.519,247.657,590.16,570.167,598.053c322.51-7.893,577.671-275.534,570.167-598.053V877.176 C1763.579,823.431,1721.066,778.83,1667.323,777.5z" }), _jsx("path", { opacity: ".1", d: "M1244,777.5v838.145c-0.258,38.435-23.549,72.964-59.09,87.598 c-11.316,4.787-23.478,7.254-35.765,7.257H667.613c-6.738-17.105-12.958-34.21-18.142-51.833 c-18.144-59.477-27.402-121.307-27.472-183.49V877.02c-1.246-53.659,41.198-98.19,94.855-99.52H1244z" }), _jsx("path", { opacity: ".2", d: "M1192.167,777.5v889.978c-0.002,12.287-2.47,24.449-7.257,35.765 c-14.634,35.541-49.163,58.833-87.598,59.09H691.975c-8.812-17.105-17.105-34.21-24.362-51.833 c-7.257-17.623-12.958-34.21-18.142-51.833c-18.144-59.476-27.402-121.307-27.472-183.49V877.02 c-1.246-53.659,41.198-98.19,94.855-99.52H1192.167z" }), _jsx("path", { opacity: ".2", d: "M1192.167,777.5v786.312c-0.395,52.223-42.632,94.46-94.855,94.855h-447.84 c-18.144-59.476-27.402-121.307-27.472-183.49V877.02c-1.246-53.659,41.198-98.19,94.855-99.52H1192.167z" }), _jsx("path", { opacity: ".2", d: "M1140.333,777.5v786.312c-0.395,52.223-42.632,94.46-94.855,94.855H649.472 c-18.144-59.476-27.402-121.307-27.472-183.49V877.02c-1.246-53.659,41.198-98.19,94.855-99.52H1140.333z" }), _jsx("path", { opacity: ".1", d: "M1244,509.522v163.275c-8.812,0.518-17.105,1.037-25.917,1.037 c-8.812,0-17.105-0.518-25.917-1.037c-17.496-1.161-34.848-3.937-51.833-8.293c-104.963-24.857-191.679-98.469-233.25-198.003 c-7.153-16.715-12.706-34.071-16.587-51.833h258.648C1201.449,414.866,1243.801,457.217,1244,509.522z" }), _jsx("path", { opacity: ".2", d: "M1192.167,561.355v111.442c-17.496-1.161-34.848-3.937-51.833-8.293 c-104.963-24.857-191.679-98.469-233.25-198.003h190.228C1149.616,466.699,1191.968,509.051,1192.167,561.355z" }), _jsx("path", { opacity: ".2", d: "M1192.167,561.355v111.442c-17.496-1.161-34.848-3.937-51.833-8.293 c-104.963-24.857-191.679-98.469-233.25-198.003h190.228C1149.616,466.699,1191.968,509.051,1192.167,561.355z" }), _jsx("path", { opacity: ".2", d: "M1140.333,561.355v103.148c-104.963-24.857-191.679-98.469-233.25-198.003 h138.395C1097.783,466.699,1140.134,509.051,1140.333,561.355z" }), _jsxs("linearGradient", { id: "a", gradientUnits: "userSpaceOnUse", x1: "198.099", y1: "1683.0726", x2: "942.2344", y2: "394.2607", gradientTransform: "matrix(1 0 0 -1 0 2075.3333)", children: [_jsx("stop", { offset: "0", stopColor: "#5a62c3" }), _jsx("stop", { offset: ".5", stopColor: "#4d55bd" }), _jsx("stop", { offset: "1", stopColor: "#3940ab" })] }), _jsx("path", { fill: "url(#a)", d: "M95.01,466.5h950.312c52.473,0,95.01,42.538,95.01,95.01v950.312c0,52.473-42.538,95.01-95.01,95.01 H95.01c-52.473,0-95.01-42.538-95.01-95.01V561.51C0,509.038,42.538,466.5,95.01,466.5z" }), _jsx("path", { fill: "#FFF", d: "M820.211,828.193H630.241v517.297H509.211V828.193H320.123V727.844h500.088V828.193z" })] }));
+};
+export const SVGLinkIcon = (props) => {
+    return (_jsx("svg", { fill: tokens.colorNeutralForeground1, height: `${props.size}px`, width: `${props.size}px`, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 490.16 490.16", children: _jsx("g", { children: _jsxs("g", { children: [_jsx("path", { d: "M409.657,32.474c-43.146-43.146-113.832-43.146-156.978,0l-84.763,84.762c29.07-8.262,60.589-6.12,88.129,6.732\r\n\t\t\tl44.063-44.064c17.136-17.136,44.982-17.136,62.118,0c17.136,17.136,17.136,44.982,0,62.118l-55.386,55.386l-36.414,36.414\r\n\t\t\tc-17.136,17.136-44.982,17.136-62.119,0l-47.43,47.43c11.016,11.017,23.868,19.278,37.332,24.48\r\n\t\t\tc36.415,14.382,78.643,8.874,110.467-16.219c3.06-2.447,6.426-5.201,9.18-8.262l57.222-57.222l34.578-34.578\r\n\t\t\tC453.109,146.306,453.109,75.926,409.657,32.474z" }), _jsx("path", { d: "M184.135,320.114l-42.228,42.228c-17.136,17.137-44.982,17.137-62.118,0c-17.136-17.136-17.136-44.981,0-62.118\r\n\t\t\tl91.8-91.799c17.136-17.136,44.982-17.136,62.119,0l47.43-47.43c-11.016-11.016-23.868-19.278-37.332-24.48\r\n\t\t\tc-38.25-15.3-83.232-8.262-115.362,20.502c-1.53,1.224-3.06,2.754-4.284,3.978l-91.8,91.799\r\n\t\t\tc-43.146,43.146-43.146,113.832,0,156.979c43.146,43.146,113.832,43.146,156.978,0l82.927-83.845\r\n\t\t\tC230.035,335.719,220.243,334.496,184.135,320.114z" })] }) }) }));
+};
+export const SVGSplitIcon = (props) => {
+    return _jsx("svg", { fill: tokens.colorNeutralForeground1, height: `${props.size}px`, width: `${props.size}px`, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 17 17", children: _jsx("path", { d: "M10.646 13.146l0.707 0.707-2.853 2.854-2.854-2.854 0.707-0.707 1.647 1.647v-3.772h1v3.772l1.646-1.647zM8 2.207v3.772h1v-3.772l1.646 1.646 0.707-0.707-2.853-2.853-2.854 2.853 0.707 0.707 1.647-1.646zM0 8v1h17v-1h-17z" }) });
+};
+export const HubSpotIcon = (props) => {
+    return _jsx("svg", { fill: tokens.colorNeutralForeground1, height: `${props.size}px`, width: `${props.size}px`, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: _jsx("path", { d: "M267.4 211.6c-25.1 23.7-40.8 57.3-40.8 94.6 0 29.3 9.7 56.3 26 78L203.1 434c-4.4-1.6-9.1-2.5-14-2.5-10.8 0-20.9 4.2-28.5 11.8-7.6 7.6-11.8 17.8-11.8 28.6s4.2 20.9 11.8 28.5c7.6 7.6 17.8 11.6 28.5 11.6 10.8 0 20.9-3.9 28.6-11.6 7.6-7.6 11.8-17.8 11.8-28.5 0-4.2-.6-8.2-1.9-12.1l50-50.2c22 16.9 49.4 26.9 79.3 26.9 71.9 0 130-58.3 130-130.2 0-65.2-47.7-119.2-110.2-128.7V116c17.5-7.4 28.2-23.8 28.2-42.9 0-26.1-20.9-47.9-47-47.9S311.2 47 311.2 73.1c0 19.1 10.7 35.5 28.2 42.9v61.2c-15.2 2.1-29.6 6.7-42.7 13.6-27.6-20.9-117.5-85.7-168.9-124.8 1.2-4.4 2-9 2-13.8C129.8 23.4 106.3 0 77.4 0 48.6 0 25.2 23.4 25.2 52.2c0 28.9 23.4 52.3 52.2 52.3 9.8 0 18.9-2.9 26.8-7.6l163.2 114.7zm89.5 163.6c-38.1 0-69-30.9-69-69s30.9-69 69-69 69 30.9 69 69-30.9 69-69 69z" }) });
+};
+//get icons as html
+export const GetSVGLinkIcon = (props) => {
+    return (`<svg fill="${tokens.colorNeutralForeground1}" height="${props.size}px" width="${props.size}px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490.16 490.16">
+            <g>
+                <g>
+                    <path d="M409.657,32.474c-43.146-43.146-113.832-43.146-156.978,0l-84.763,84.762c29.07-8.262,60.589-6.12,88.129,6.732
+			l44.063-44.064c17.136-17.136,44.982-17.136,62.118,0c17.136,17.136,17.136,44.982,0,62.118l-55.386,55.386l-36.414,36.414
+			c-17.136,17.136-44.982,17.136-62.119,0l-47.43,47.43c11.016,11.017,23.868,19.278,37.332,24.48
+			c36.415,14.382,78.643,8.874,110.467-16.219c3.06-2.447,6.426-5.201,9.18-8.262l57.222-57.222l34.578-34.578
+			C453.109,146.306,453.109,75.926,409.657,32.474z"/>
+                    <path d="M184.135,320.114l-42.228,42.228c-17.136,17.137-44.982,17.137-62.118,0c-17.136-17.136-17.136-44.981,0-62.118
+			l91.8-91.799c17.136-17.136,44.982-17.136,62.119,0l47.43-47.43c-11.016-11.016-23.868-19.278-37.332-24.48
+			c-38.25-15.3-83.232-8.262-115.362,20.502c-1.53,1.224-3.06,2.754-4.284,3.978l-91.8,91.799
+			c-43.146,43.146-43.146,113.832,0,156.979c43.146,43.146,113.832,43.146,156.978,0l82.927-83.845
+			C230.035,335.719,220.243,334.496,184.135,320.114z"/>
+                </g>
+            </g>
+        </svg>`);
+};
+export const GetSVGSplitIcon = (props) => {
+    return `<svg fill="${tokens.colorNeutralForeground1}" height="${props.size}px" width="${props.size}px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17">
+	<path d="M10.646 13.146l0.707 0.707-2.853 2.854-2.854-2.854 0.707-0.707 1.647 1.647v-3.772h1v3.772l1.646-1.647zM8 2.207v3.772h1v-3.772l1.646 1.646 0.707-0.707-2.853-2.853-2.854 2.853 0.707 0.707 1.647-1.646zM0 8v1h17v-1h-17z" />
+</svg>`;
+};
+//# sourceMappingURL=svg.js.map

package/dist/controls/svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg.js","sourceRoot":"","sources":["../../src/controls/svg.tsx"],"names":[],"mappings":"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"}

package/dist/controls/vertical-content.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface IProps {
+    css?: string[];
+}
+export declare const VerticalContent: React.FunctionComponent<React.PropsWithChildren<IProps>>;
+export {};

package/dist/controls/vertical-content.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles, mergeClasses } from '@fluentui/react-components';
+import { isNotEmptyArray } from '@kwiz/common';
+import React from 'react';
+import { useWindowSize } from '../helpers/hooks';
+const useStyles = makeStyles({
+    verticalContainer: {
+        position: "relative",
+        ['& > div']: {
+            position: "absolute",
+            transform: "rotate(90deg)"
+        }
+    }
+});
+export const VerticalContent = (props) => {
+    const classes = useStyles();
+    let css = [classes.verticalContainer];
+    const size = useWindowSize();
+    let div = React.useRef();
+    let rotate = React.useRef();
+    if (isNotEmptyArray(props.css))
+        css.push(...props.css);
+    React.useEffect(() => {
+        if (div.current && rotate.current) {
+            let rootDiv = div.current;
+            let rotateDiv = rotate.current;
+            rootDiv.style.height = `${rotateDiv.clientWidth}px`;
+            rootDiv.style.width = `${rotateDiv.clientHeight}px`;
+            rootDiv.style.minHeight = `${rotateDiv.clientWidth}px`;
+            rootDiv.style.minWidth = `${rotateDiv.clientHeight}px`;
+            rotateDiv.style.top = `${(rotateDiv.clientWidth - rotateDiv.clientHeight) / 2}px`;
+            rotateDiv.style.left = `-${(rotateDiv.clientWidth - rotateDiv.clientHeight) / 2}px`;
+        }
+    }, [div, rotate, size.height, size.width]);
+    return (_jsx("div", { ref: div, className: mergeClasses(...css), children: _jsx("div", { ref: rotate, children: props.children }) }));
+};
+//# sourceMappingURL=vertical-content.js.map

package/dist/controls/vertical-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical-content.js","sourceRoot":"","sources":["../../src/controls/vertical-content.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,iBAAiB,EAAE;QACf,QAAQ,EAAE,UAAU;QACpB,CAAC,SAAS,CAAC,EAAE;YACT,QAAQ,EAAE,UAAU;YACpB,SAAS,EAAE,eAAe;SAC7B;KACJ;CACJ,CAAC,CAAC;AAKH,MAAM,CAAC,MAAM,eAAe,GAA6D,CAAC,KAAK,EAAE,EAAE;IAC/F,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAC5B,IAAI,GAAG,GAAa,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAChD,MAAM,IAAI,GAAG,aAAa,EAAE,CAAC;IAE7B,IAAI,GAAG,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC;IACzB,IAAI,MAAM,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC;IAE5B,IAAI,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC;QAAE,GAAG,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEvD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,GAAG,CAAC,OAAO,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;YAChC,IAAI,OAAO,GAAI,GAAG,CAAC,OAA0B,CAAC;YAC9C,IAAI,SAAS,GAAI,MAAM,CAAC,OAA0B,CAAC;YACnD,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,SAAS,CAAC,WAAW,IAAI,CAAC;YACpD,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,SAAS,CAAC,YAAY,IAAI,CAAC;YACpD,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,SAAS,CAAC,WAAW,IAAI,CAAC;YACvD,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,SAAS,CAAC,YAAY,IAAI,CAAC;YAEvD,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC,SAAS,CAAC,WAAW,GAAG,SAAS,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC;YAClF,SAAS,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,SAAS,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC;QACxF,CAAC;IACL,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAE3C,OAAO,CACH,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,YAAY,CAAC,GAAG,GAAG,CAAC,YAC1C,cAAK,GAAG,EAAE,MAAM,YACX,KAAK,CAAC,QAAQ,GACb,GACJ,CACT,CAAC;AACN,CAAC,CAAA"}

package/dist/controls/vertical.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ISectionProps } from './section';
+interface IProps extends ISectionProps {
+    wrap?: boolean;
+    nogap?: boolean;
+}
+export declare const Vertical: React.FunctionComponent<React.PropsWithChildren<IProps>>;
+export {};

package/dist/controls/vertical.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles } from '@fluentui/react-components';
+import { isNotEmptyArray } from '@kwiz/common';
+import { KnownClassNames, mixins } from '../styles/styles';
+import { Section } from './section';
+const useStyles = makeStyles({
+    vertical: Object.assign(Object.assign({}, mixins.flex), { flexDirection: 'column' }),
+    wrap: mixins.wrap,
+    nogap: mixins.nogap
+});
+export const Vertical = (props) => {
+    const cssNames = useStyles();
+    let css = [KnownClassNames.vertical];
+    css.push(cssNames.vertical);
+    if (props.wrap)
+        css.push(cssNames.wrap);
+    if (props.nogap)
+        css.push(cssNames.nogap);
+    if (isNotEmptyArray(props.css))
+        css.push(...props.css);
+    return (_jsx(Section, Object.assign({}, props, { css: css })));
+};
+//# sourceMappingURL=vertical.js.map

package/dist/controls/vertical.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical.js","sourceRoot":"","sources":["../../src/controls/vertical.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAiB,OAAO,EAAE,MAAM,WAAW,CAAC;AAEnD,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,QAAQ,kCACD,MAAM,CAAC,IAAI,KACd,aAAa,EAAE,QAAQ,GAC1B;IACD,IAAI,EAAE,MAAM,CAAC,IAAI;IACjB,KAAK,EAAE,MAAM,CAAC,KAAK;CACtB,CAAC,CAAA;AAMF,MAAM,CAAC,MAAM,QAAQ,GAA6D,CAAC,KAAK,EAAE,EAAE;IACxF,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,IAAI,GAAG,GAAa,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;IAE/C,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,IAAI,KAAK,CAAC,IAAI;QACV,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,KAAK,CAAC,KAAK;QACX,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE7B,IAAI,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC;QAAE,GAAG,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEvD,OAAO,CACH,KAAC,OAAO,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI,CACnC,CAAC;AACN,CAAC,CAAA"}

package/dist/exports-index.d.ts

@@ -0,0 +1,3 @@
+export * from './_modules/exports-index';
+export * from './controls/exports-index';
+export * from './styles/exports-index';

package/dist/exports-index.js

@@ -0,0 +1,4 @@
+export * from './_modules/exports-index';
+export * from './controls/exports-index';
+export * from './styles/exports-index';
+//# sourceMappingURL=exports-index.js.map

package/dist/exports-index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"exports-index.js","sourceRoot":"","sources":["../src/exports-index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC"}

package/dist/helpers/hooks.d.ts

@@ -0,0 +1,22 @@
+import { MutableRefObject, SetStateAction } from "react";
+/** Empty array ensures that effect is only run on mount */
+export declare const useEffectOnlyOnMount: any[];
+/** set state on steroids. provide promise callback after render, onChange transformer and automatic skip-set when value not changed */
+export declare function useStateEX<ValueType>(initialValue: ValueType, options?: {
+    onChange?: (newValue: SetStateAction<ValueType>) => SetStateAction<ValueType>;
+    skipUpdateIfSame?: boolean;
+    name?: string;
+}): [
+    ValueType,
+    (newValue: SetStateAction<ValueType>) => Promise<ValueType>,
+    MutableRefObject<ValueType>
+];
+export declare function useTrackFocus(props: {
+    onFocus: () => void;
+    onLoseFocus: () => void;
+}): MutableRefObject<HTMLDivElement>;
+export declare function useWindowSize(): {
+    width: number;
+    height: number;
+};
+export declare function useIsInPrint(): boolean;