@wix/patterns-fields 1.0.0

package/dist/esm/components/document/document-control.js

@@ -0,0 +1,90 @@
+import React, { useCallback, useRef } from 'react';
+import { getMediaTitle } from '../../utils/media-utils';
+import { getMediaURL } from '../../auto-field-types';
+import { Text, Box, TableListItem, TableActionCell } from '@wix/design-system';
+import { Delete, Replace, Document, Link, Download, } from '@wix/wix-ui-icons-common';
+import { useTranslations } from '../../hooks';
+import { classes } from './form-document-field.st.css.js';
+import { DocumentLoader } from './document-loader';
+import { openDocument } from './utils';
+import { useWixPatternsContainer } from '@wix/patterns';
+const DOCUMENT_VIEW_ACTIONS_WIDTH = '196px';
+const DocumentComponent = ({ mediaURI }) => {
+    return (React.createElement(Box, { gap: "SP2", verticalAlign: "middle", className: classes.textWidth },
+        React.createElement(Box, { width: "24px", height: "24px", children: React.createElement(Document, null) }),
+        React.createElement(Text, { dataHook: "document-view-name", secondary: true, ellipsis: true, children: getMediaTitle(mediaURI) })));
+};
+export const DocumentControl = React.forwardRef(({ mediaURI, readOnly, onReplace, onDelete, onDownload, dataHook, className, loading, loaderBorderStyle, loaderClassName, onOpenPasteURLForm, }, ref) => {
+    const { t } = useTranslations();
+    const { environment } = useWixPatternsContainer();
+    const metaSiteId = environment.msid;
+    const handleOpenDocument = useCallback(() => {
+        openDocument(getMediaURL(mediaURI, metaSiteId));
+    }, [mediaURI, metaSiteId]);
+    const handleDownload = useCallback(() => {
+        onDownload(mediaURI);
+    }, [mediaURI, onDownload]);
+    const containerRef = useRef(null);
+    const handleOnKeydown = useCallback((event) => {
+        const actions = containerRef?.current?.querySelector(`[data-hook="document-view-actions-button"]`);
+        if (actions?.contains(document.activeElement)) {
+            return;
+        }
+        if (event.key === 'Enter') {
+            handleOpenDocument();
+        }
+    }, [handleOpenDocument, containerRef]);
+    return loading ? (React.createElement(DocumentLoader, { borderStyle: loaderBorderStyle, className: loaderClassName })) : (React.createElement("div", { ref: containerRef, onKeyDown: handleOnKeydown },
+        React.createElement(TableListItem, { dataHook: dataHook, ref: ref, className: className, onClick: handleOpenDocument, verticalPadding: "tiny", options: [
+                {
+                    value: React.createElement(DocumentComponent, { mediaURI: mediaURI }),
+                    width: '75%',
+                },
+                {
+                    value: (React.createElement(TableActionCell, { dataHook: "document-view-actions-button", alwaysShowSecondaryActions: true, numOfVisibleSecondaryActions: 1, primaryAction: {
+                            onClick: handleOpenDocument,
+                            skin: 'standard',
+                            text: t('CMS.document.action.open'),
+                            dataHook: 'document-view-open-action',
+                        }, popoverMenuProps: {
+                            textSize: 'medium',
+                            minWidth: '232px',
+                        }, secondaryActions: [
+                            {
+                                icon: React.createElement(Download, null),
+                                onClick: handleDownload,
+                                disabled: readOnly,
+                                dataHook: 'document-view-download-action',
+                                text: t('CMS.document.action.download'),
+                            },
+                            {
+                                icon: React.createElement(Replace, null),
+                                onClick: onReplace,
+                                text: t('CMS.document.action.replace'),
+                                dataHook: 'document-view-replace-action',
+                                disabled: readOnly,
+                            },
+                            {
+                                icon: React.createElement(Link, null),
+                                onClick: onOpenPasteURLForm,
+                                text: t('CMS.document.action.replaceWithUrl'),
+                                dataHook: 'document-view-replace-with-url-action',
+                                disabled: readOnly,
+                            },
+                            {
+                                divider: true,
+                            },
+                            {
+                                icon: React.createElement(Delete, null),
+                                onClick: onDelete,
+                                text: t('CMS.document.action.delete'),
+                                dataHook: 'document-view-delete-action',
+                                disabled: readOnly,
+                            },
+                        ] })),
+                    width: DOCUMENT_VIEW_ACTIONS_WIDTH,
+                    align: 'right',
+                },
+            ] })));
+});
+//# sourceMappingURL=document-control.js.map

package/dist/esm/components/document/document-control.js.map

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

package/dist/esm/components/document/document-loader.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Box, Loader } from '@wix/design-system';
+import { style, classes } from './form-document-field.st.css.js';
+export const DocumentLoader = ({ className, borderStyle: _borderStyle, }) => (React.createElement(Box, { align: "center", verticalAlign: "middle", className: style(classes.documentLoader, className) },
+    React.createElement(Loader, { size: "tiny" })));
+//# sourceMappingURL=document-loader.js.map

package/dist/esm/components/document/document-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"document-loader.js","sourceRoot":"","sources":["../../../../src/components/document/document-loader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAEjD,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAOjE,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EACtD,SAAS,EACT,WAAW,EAAE,YAAY,GAC1B,EAAE,EAAE,CAAC,CACJ,oBAAC,GAAG,IACF,KAAK,EAAC,QAAQ,EACd,aAAa,EAAC,QAAQ,EACtB,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,EAAE,SAAS,CAAC;IAEnD,oBAAC,MAAM,IAAC,IAAI,EAAC,MAAM,GAAG,CAClB,CACP,CAAC"}

package/dist/esm/components/document/document-view.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Badge, Box } from '@wix/design-system';
+import { DocumentSmall } from '@wix/wix-ui-icons-common';
+import { getMediaTitle } from '../../utils/media-utils';
+export const DocumentView = ({ data }) => {
+    return data ? (React.createElement(Box, null,
+        React.createElement(Badge, { prefixIcon: React.createElement(DocumentSmall, null), size: "small", skin: "neutralStandard" }, getMediaTitle(data)))) : null;
+};
+//# sourceMappingURL=document-view.js.map

package/dist/esm/components/document/document-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"document-view.js","sourceRoot":"","sources":["../../../../src/components/document/document-view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IACpE,OAAO,IAAI,CAAC,CAAC,CAAC,CACZ,oBAAC,GAAG;QACF,oBAAC,KAAK,IAAC,UAAU,EAAE,oBAAC,aAAa,OAAG,EAAE,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,iBAAiB,IACtE,aAAa,CAAC,IAAI,CAAC,CACd,CACJ,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC"}

package/dist/esm/components/document/form/index.js

@@ -0,0 +1,6 @@
+export * from '../form-document-field';
+export * from '../document-control';
+export * from '../add-document-button';
+export * from '../form-document-input';
+export * from '../utils';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/document/form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/document/form/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,UAAU,CAAC"}

package/dist/esm/components/document/form-document-field.js

@@ -0,0 +1,35 @@
+import React, { useRef } from 'react';
+import { MEDIA_TYPES } from '../../utils/media-utils';
+import { useTranslations, useWithCallback } from '../../hooks';
+import { PasteURLForm, useMediaControl, usePasteURLForm, } from '../media-control';
+import { DocumentControl } from './document-control';
+import { classes } from './form-document-field.st.css.js';
+import { FormDocumentInput } from './form-document-input';
+export { classes as documentClasses } from './form-document-field.st.css.js';
+export const FormDocumentField = ({ data, onChange: onChangeDocument, onClear: onClearDocument, onInput, autoFocus, readOnly, invalid, dataHook, }) => {
+    const { t } = useTranslations();
+    const onChange = useWithCallback(onChangeDocument, onInput);
+    const onClear = useWithCallback(onClearDocument, onInput);
+    const inputRef = useRef(null);
+    const viewRef = useRef(null);
+    const { callMedia, loading, downloadMedia } = useMediaControl({
+        mediaType: MEDIA_TYPES.ALL_MEDIA,
+        value: data,
+        onChange,
+        autoFocus,
+        readOnly,
+        inputRef,
+        viewRef,
+    });
+    const { isOpen, title, onOpen, onClose, onSave } = usePasteURLForm({
+        onChange,
+    });
+    return (React.createElement(React.Fragment, null,
+        !data ? (React.createElement(FormDocumentInput, { dataHook: dataHook, ref: inputRef, theme: "dashes", disabled: readOnly, loading: loading, error: invalid, loaderBorderStyle: "dashed", onAddButtonClick: callMedia, onPasteURLButtonClick: onOpen({
+                title: t('CMS.document.pasteUrl.title'),
+            }) })) : (React.createElement(DocumentControl, { dataHook: dataHook, ref: viewRef, mediaURI: data, readOnly: readOnly, onReplace: callMedia, onDelete: onClear, onDownload: downloadMedia, className: classes.viewWrapper, loading: loading, loaderBorderStyle: "solid", onOpenPasteURLForm: onOpen({
+                title: t('CMS.document.replaceWithUrl.title'),
+            }) })),
+        React.createElement(PasteURLForm, { title: title, value: data, show: isOpen, closeModal: onClose, onSave: onSave })));
+};
+//# sourceMappingURL=form-document-field.js.map

package/dist/esm/components/document/form-document-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-document-field.js","sourceRoot":"","sources":["../../../../src/components/document/form-document-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAI/D,OAAO,EACL,YAAY,EACZ,eAAe,EACf,eAAe,GAChB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAE7E,MAAM,CAAC,MAAM,iBAAiB,GAAoC,CAAC,EACjE,IAAI,EACJ,QAAQ,EAAE,gBAAgB,EAC1B,OAAO,EAAE,eAAe,EACxB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,EAAE,CAAC,EAAE,GAAG,eAAe,EAAE,CAAC;IAEhC,MAAM,QAAQ,GAAG,eAAe,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC;IAC5D,MAAM,OAAO,GAAG,eAAe,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;IAE1D,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE7C,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,aAAa,EAAE,GAAG,eAAe,CAAC;QAC5D,SAAS,EAAE,WAAW,CAAC,SAAS;QAChC,KAAK,EAAE,IAAI;QACX,QAAQ;QACR,SAAS;QACT,QAAQ;QACR,QAAQ;QACR,OAAO;KACR,CAAC,CAAC;IAEH,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,eAAe,CAAC;QACjE,QAAQ;KACT,CAAC,CAAC;IAEH,OAAO,CACL;QACG,CAAC,IAAI,CAAC,CAAC,CAAC,CACP,oBAAC,iBAAiB,IAChB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,QAAQ,EACb,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,OAAO,EACd,iBAAiB,EAAC,QAAQ,EAC1B,gBAAgB,EAAE,SAAS,EAC3B,qBAAqB,EAAE,MAAM,CAAC;gBAC5B,KAAK,EAAE,CAAC,CAAC,6BAA6B,CAAC;aACxC,CAAC,GACF,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,eAAe,IACd,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,OAAO,EACZ,QAAQ,EAAE,IAAI,EACd,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,OAAO,EACjB,UAAU,EAAE,aAAa,EACzB,SAAS,EAAE,OAAO,CAAC,WAAW,EAC9B,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAC,OAAO,EACzB,kBAAkB,EAAE,MAAM,CAAC;gBACzB,KAAK,EAAE,CAAC,CAAC,mCAAmC,CAAC;aAC9C,CAAC,GACF,CACH;QACD,oBAAC,YAAY,IACX,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,MAAM,EACZ,UAAU,EAAE,OAAO,EACnB,MAAM,EAAE,MAAM,GACd,CACD,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/components/document/form-document-field.st.css

@@ -0,0 +1,54 @@
+@property st-global(--wds-border-radius-400);
+@property st-global(--wds-border-radius-300);
+@property st-global(--wds-color-blue-300);
+@property st-global(--wds-color-blue-500);
+@property st-global(--wsr-color-B30);
+@property st-global(--wsr-color-B50);
+@property st-global(--wds-input-shadow-focus-standard);
+@property st-global(--wsr-color-R10);
+@property st-global(--wds-color-red-100);
+
+:vars {
+    BorderRadius: 2px;
+    documentViewBorderRadius: var(--wds-border-radius-300, calc(value(BorderRadius) * 3));
+    documentActionsWidth: 196px;
+
+    addItemWSRBorderRadius: var(--wds-border-radius-400, calc(value(BorderRadius) * 4));
+
+    /* single document view has height of 62px, these paddings are calculated based on this value */
+    documentLoaderPadding: 21px;
+    addDocumentPadding: 17px;
+}
+
+.viewWrapper {
+    border-radius: value(documentViewBorderRadius);
+    border: 1px solid var(--wds-color-blue-300, var(--wsr-color-B30));
+}
+
+.viewWrapper:hover {
+    background: var(--wds-color-blue-500, var(--wsr-color-B50));
+    cursor: pointer;
+}
+
+.textWidth {
+    max-width: calc(100% - value(documentActionsWidth));
+}
+
+.documentLoader {
+    padding-top: value(documentLoaderPadding);
+    padding-bottom: value(documentLoaderPadding);
+}
+
+.addDocument {
+    -st-states: error;
+    padding-top: value(addDocumentPadding) !important;
+    padding-bottom: value(addDocumentPadding) !important;
+}
+.addDocument:error {
+    border: 1px solid var(--wds-color-red-100, var(--wsr-color-R10)) !important;
+}
+
+.addItemWrapper:focus-within {
+    box-shadow: var(--wds-input-shadow-focus-standard, 0 0 0 3px var(--wds-color-blue-300, var(--wsr-color-B30)));
+    border-radius: value(addItemWSRBorderRadius);
+}

package/dist/esm/components/document/form-document-field.st.css.js

@@ -0,0 +1,15 @@
+// @ts-nocheck
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+var _namespace_ = "formdocumentfield1269230364";
+var _style_ = classesRuntime.bind(null, _namespace_);
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st = _style_;
+export var namespace = _namespace_;
+export var classes = { "root": "formdocumentfield1269230364__root", "viewWrapper": "formdocumentfield1269230364__viewWrapper", "textWidth": "formdocumentfield1269230364__textWidth", "documentLoader": "formdocumentfield1269230364__documentLoader", "addDocument": "formdocumentfield1269230364__addDocument", "addItemWrapper": "formdocumentfield1269230364__addItemWrapper" };
+export var keyframes = {};
+export var layers = {};
+export var containers = {};
+export var stVars = { "BorderRadius": "2px", "documentViewBorderRadius": "var(--wds-border-radius-300, calc(2px * 3))", "documentActionsWidth": "196px", "addItemWSRBorderRadius": "var(--wds-border-radius-400, calc(2px * 4))", "documentLoaderPadding": "21px", "addDocumentPadding": "17px" };
+export var vars = { "wds-border-radius-400": "--wds-border-radius-400", "wds-border-radius-300": "--wds-border-radius-300", "wds-color-blue-300": "--wds-color-blue-300", "wds-color-blue-500": "--wds-color-blue-500", "wsr-color-B30": "--wsr-color-B30", "wsr-color-B50": "--wsr-color-B50", "wds-input-shadow-focus-standard": "--wds-input-shadow-focus-standard", "wsr-color-R10": "--wsr-color-R10", "wds-color-red-100": "--wds-color-red-100" };
+//# sourceMappingURL=form-document-field.st.css.js.map

package/dist/esm/components/document/form-document-field.st.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-document-field.st.css.js","sourceRoot":"","sources":["../../../../src/components/document/form-document-field.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,6BAA6B,CAAC;AAChD,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAA2C,OAAO,CAAC;AACnE,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,mCAAmC,EAAC,aAAa,EAAC,0CAA0C,EAAC,WAAW,EAAC,wCAAwC,EAAC,gBAAgB,EAAC,6CAA6C,EAAC,aAAa,EAAC,0CAA0C,EAAC,gBAAgB,EAAC,6CAA6C,EAAC,CAAC;AACvW,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAC,cAAc,EAAC,KAAK,EAAC,0BAA0B,EAAC,6CAA6C,EAAC,sBAAsB,EAAC,OAAO,EAAC,wBAAwB,EAAC,6CAA6C,EAAC,uBAAuB,EAAC,MAAM,EAAC,oBAAoB,EAAC,MAAM,EAAC,CAAC;AACrR,MAAM,CAAC,IAAI,IAAI,GAAG,EAAC,uBAAuB,EAAC,yBAAyB,EAAC,uBAAuB,EAAC,yBAAyB,EAAC,oBAAoB,EAAC,sBAAsB,EAAC,oBAAoB,EAAC,sBAAsB,EAAC,eAAe,EAAC,iBAAiB,EAAC,eAAe,EAAC,iBAAiB,EAAC,iCAAiC,EAAC,mCAAmC,EAAC,eAAe,EAAC,iBAAiB,EAAC,mBAAmB,EAAC,qBAAqB,EAAC,CAAC"}

package/dist/esm/components/document/form-document-input.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { useTranslations } from '../../hooks';
+import { AddDocumentButton, } from './add-document-button';
+import { PasteURLButton } from '../media-control';
+export const FormDocumentInput = React.forwardRef(({ dataHook, disabled, onPasteURLButtonClick, onAddButtonClick, ...addDocumentProps }, ref) => {
+    const { t } = useTranslations();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(AddDocumentButton, { ref: ref, disabled: disabled, dataHook: dataHook, onClick: onAddButtonClick, ...addDocumentProps }),
+        React.createElement(PasteURLButton, { title: t('CMS.document.pasteUrl.button'), disabled: disabled, onClick: onPasteURLButtonClick })));
+});
+//# sourceMappingURL=form-document-input.js.map

package/dist/esm/components/document/form-document-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-document-input.js","sourceRoot":"","sources":["../../../../src/components/document/form-document-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAG9C,OAAO,EACL,iBAAiB,GAElB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,cAAc,EAA4B,MAAM,kBAAkB,CAAC;AAY5E,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAI/C,CACE,EACE,QAAQ,EACR,QAAQ,EACR,qBAAqB,EACrB,gBAAgB,EAChB,GAAG,gBAAgB,EACpB,EACD,GAAG,EACH,EAAE;IACF,MAAM,EAAE,CAAC,EAAE,GAAG,eAAe,EAAE,CAAC;IAEhC,OAAO,CACL;QACE,oBAAC,iBAAiB,IAChB,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,gBAAgB,KACrB,gBAAgB,GACpB;QACF,oBAAC,cAAc,IACb,KAAK,EAAE,CAAC,CAAC,8BAA8B,CAAC,EACxC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,qBAAqB,GAC9B,CACD,CACJ,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/esm/components/document/index.js

@@ -0,0 +1,4 @@
+export * from './document-view';
+// NOTE: Heavy exports (FormDocumentField, DocumentControl, etc.) have been moved to './form' to prevent bundle bloat.
+// Import them explicitly: import { FormDocumentField } from '../fields/components/document/form';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/document/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/document/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAEhC,sHAAsH;AACtH,kGAAkG"}

package/dist/esm/components/document/utils.js

@@ -0,0 +1,9 @@
+export const openDocument = (url) => {
+    const link = document.createElement('a');
+    link.href = url;
+    link.target = '_blank';
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/components/document/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/document/utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,EAAE;IAC1C,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;IAChB,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;IACvB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAEhC,IAAI,CAAC,KAAK,EAAE,CAAC;IACb,IAAI,CAAC,MAAM,EAAE,CAAC;AAChB,CAAC,CAAC"}

package/dist/esm/components/exclamation/exclamation.js

@@ -0,0 +1,31 @@
+import React, { useMemo } from 'react';
+import { Box, Tooltip } from '@wix/design-system';
+import { StatusAlertFilled, StatusWarningFilled, } from '@wix/wix-ui-icons-common';
+import { classes, st } from './exclamation.st.css.js';
+const TOOLTIP_MAX_WIDTH = 230;
+const SMALL_TOOLTIP_MAX_WIDTH = 204;
+const getExclamationIcon = (type) => type === 'error' ? StatusAlertFilled : StatusWarningFilled;
+export const Exclamation = ({ className, type = 'warning', size, }) => {
+    const Icon = useMemo(() => getExclamationIcon(type), [type]);
+    return (React.createElement(Box, { className: st(classes.exclamation, {
+            type,
+        }, className) },
+        React.createElement(Icon, { size: size, "data-hook": "exclamation-icon" })));
+};
+Exclamation.displayName = 'Exclamation';
+export const DetailedExclamation = ({ onShow, tooltipContent, tooltipSize, boxProps, dataHook, ...exclamationProps }) => {
+    const maxWidth = tooltipSize === 'small' ? SMALL_TOOLTIP_MAX_WIDTH : TOOLTIP_MAX_WIDTH;
+    const tooltipProps = {
+        dataHook,
+        appendTo: 'window',
+        size: tooltipSize,
+        maxWidth,
+        onShow,
+        content: tooltipContent,
+    };
+    return (React.createElement(Box, { ...boxProps },
+        React.createElement(Tooltip, { ...tooltipProps },
+            React.createElement(Exclamation, { ...exclamationProps }))));
+};
+DetailedExclamation.displayName = 'DetailedExclamation';
+//# sourceMappingURL=exclamation.js.map

package/dist/esm/components/exclamation/exclamation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"exclamation.js","sourceRoot":"","sources":["../../../../src/components/exclamation/exclamation.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EACL,iBAAiB,EACjB,mBAAmB,GACpB,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,yBAAyB,CAAC;AAEtD,MAAM,iBAAiB,GAAG,GAAG,CAAC;AAC9B,MAAM,uBAAuB,GAAG,GAAG,CAAC;AAQpC,MAAM,kBAAkB,GAAG,CAAC,IAA8B,EAAE,EAAE,CAC5D,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,mBAAmB,CAAC;AAE7D,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAChD,SAAS,EACT,IAAI,GAAG,SAAS,EAChB,IAAI,GACL,EAAE,EAAE;IACH,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAE7D,OAAO,CACL,oBAAC,GAAG,IACF,SAAS,EAAE,EAAE,CACX,OAAO,CAAC,WAAW,EACnB;YACE,IAAI;SACL,EACD,SAAS,CACV;QAED,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,eAAY,kBAAkB,GAAG,CAC7C,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAUxC,MAAM,CAAC,MAAM,mBAAmB,GAAiC,CAAC,EAChE,MAAM,EACN,cAAc,EACd,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,GAAG,gBAAgB,EACpB,EAAE,EAAE;IACH,MAAM,QAAQ,GACZ,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAExE,MAAM,YAAY,GAAG;QACnB,QAAQ;QACR,QAAQ,EAAE,QAAiB;QAC3B,IAAI,EAAE,WAAW;QACjB,QAAQ;QACR,MAAM;QACN,OAAO,EAAE,cAAc;KACxB,CAAC;IAEF,OAAO,CACL,oBAAC,GAAG,OAAK,QAAQ;QACf,oBAAC,OAAO,OAAK,YAAY;YACvB,oBAAC,WAAW,OAAK,gBAAgB,GAAI,CAC7B,CACN,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAC"}

package/dist/esm/components/exclamation/exclamation.st.css

@@ -0,0 +1,52 @@
+@property st-global(--wds-color-fill-warning-primary);
+@property st-global(--wds-color-fill-destructive-primary);
+@property st-global(--wds-color-blue-100);
+@property st-global(--wds-color-blue-200);
+
+.exclamation {
+  -st-states: type(enum(warning, error)), customSize;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.exclamation:type(warning):not(:customSize),
+.exclamation:type(error):not(:customSize) {
+  width: 24px;
+  height: 24px;
+}
+
+.exclamation:type(warning) {
+  color: var(--wds-color-fill-warning-primary);
+}
+
+.exclamation:type(error) {
+  color: var(--wds-color-fill-destructive-primary);
+}
+
+.actions {
+  display: flex;
+  flex-direction: column;
+}
+
+.action {
+  -st-states: accented;
+  white-space: normal !important;
+  height: auto !important;
+  text-align: left;
+  gap: 6px;
+}
+
+.action + .action {
+  margin-top: 6px;
+}
+
+.action:accented {
+  color: var(--wds-color-blue-100);
+}
+.action:accented:hover {
+  color: var(--wds-color-blue-200);
+}

package/dist/esm/components/exclamation/exclamation.st.css.js

@@ -0,0 +1,15 @@
+// @ts-nocheck
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+var _namespace_ = "exclamation1076305043";
+var _style_ = classesRuntime.bind(null, _namespace_);
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st = _style_;
+export var namespace = _namespace_;
+export var classes = { "root": "exclamation1076305043__root", "exclamation": "exclamation1076305043__exclamation", "actions": "exclamation1076305043__actions", "action": "exclamation1076305043__action" };
+export var keyframes = {};
+export var layers = {};
+export var containers = {};
+export var stVars = {};
+export var vars = { "wds-color-fill-warning-primary": "--wds-color-fill-warning-primary", "wds-color-fill-destructive-primary": "--wds-color-fill-destructive-primary", "wds-color-blue-100": "--wds-color-blue-100", "wds-color-blue-200": "--wds-color-blue-200" };
+//# sourceMappingURL=exclamation.st.css.js.map

package/dist/esm/components/exclamation/exclamation.st.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"exclamation.st.css.js","sourceRoot":"","sources":["../../../../src/components/exclamation/exclamation.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,uBAAuB,CAAC;AAC1C,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAA2C,OAAO,CAAC;AACnE,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,6BAA6B,EAAC,aAAa,EAAC,oCAAoC,EAAC,SAAS,EAAC,gCAAgC,EAAC,QAAQ,EAAC,+BAA+B,EAAC,CAAC;AACnM,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAC,gCAAgC,EAAC,kCAAkC,EAAC,oCAAoC,EAAC,sCAAsC,EAAC,oBAAoB,EAAC,sBAAsB,EAAC,oBAAoB,EAAC,sBAAsB,EAAC,CAAC"}

package/dist/esm/components/exclamation/index.js

@@ -0,0 +1,3 @@
+export * from './exclamation';
+export * from './type-mismatch-exclamation';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/exclamation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/exclamation/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,6BAA6B,CAAC"}

package/dist/esm/components/exclamation/type-mismatch-exclamation.js

@@ -0,0 +1,28 @@
+import React, { useCallback } from 'react';
+import { Box, Loader, TextButton } from '@wix/design-system';
+import { DetailedExclamation } from './exclamation';
+import { classes } from './exclamation.st.css.js';
+export const TypeMismatchExclamation = ({ typeName, isConverted, isConverting, convertedValue, onClear, onChange, readOnly, boxProps, onActionMouseDown, onShow, onConvertClick, onClearClick, convertButtonText, convertDisabledText, clearButtonText, tooltipText, }) => {
+    const onConvert = useCallback(() => {
+        onChange(convertedValue);
+        onConvertClick?.();
+    }, [onChange, convertedValue, onConvertClick]);
+    const onClearHandler = useCallback(() => {
+        onClear();
+        onClearClick?.();
+    }, [onClear, onClearClick]);
+    const isConvertAllowed = isConverted && !readOnly;
+    const convertBtn = isConvertAllowed || isConverting ? (React.createElement(TextButton, { className: classes.action, skin: "light", onClick: onConvert, size: "small", underline: "always", disabled: isConverting, suffixIcon: isConverting ? React.createElement(Loader, { color: "white", size: "tiny" }) : undefined, dataHook: "type-mismatch-exclamation-convert-button" }, convertButtonText)) : (React.createElement(TextButton, { className: classes.action, skin: "light", size: "small", underline: "always", disabled: true, dataHook: "type-mismatch-exclamation-convert-disabled-button" }, convertDisabledText));
+    const clearBtn = (React.createElement(TextButton, { className: classes.action, skin: "light", size: "small", underline: "always", disabled: readOnly, onClick: readOnly ? undefined : onClearHandler, dataHook: "type-mismatch-exclamation-clear-button" }, clearButtonText));
+    return (React.createElement(TypeMismatchDetailedExclamation, { boxProps: boxProps, typeName: typeName, tooltipText: tooltipText, tooltipContent: React.createElement("div", { className: classes.actions, onMouseDown: onActionMouseDown },
+            convertBtn,
+            clearBtn), onShow: onShow }));
+};
+TypeMismatchExclamation.displayName = 'TypeMismatchExclamation';
+export const TypeMismatchDetailedExclamation = ({ typeName, tooltipText, tooltipContent, ...props }) => {
+    return (React.createElement(DetailedExclamation, { ...props, dataHook: "type-mismatch-detailed-exclamation-tooltip", type: "warning", tooltipContent: React.createElement(Box, { direction: "vertical", gap: "12px" },
+            tooltipText,
+            tooltipContent) }));
+};
+TypeMismatchDetailedExclamation.displayName = 'TypeMismatchDetailedExclamation';
+//# sourceMappingURL=type-mismatch-exclamation.js.map

package/dist/esm/components/exclamation/type-mismatch-exclamation.js.map

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

package/dist/esm/components/highlighted-text/highlighted-text.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import { style, classes } from './highlighted-text.st.css.js';
+export const HighlightedText = ({ highlight, highlightedBackground = true, className, dataHook, }) => (React.createElement("span", { "data-hook": dataHook, className: style(classes.root, { highlightedBackground }, className) }, highlight.map(({ substring, isHighlighted }, key) => (React.createElement("span", { key: key, className: style(classes.substring, { isHighlighted }), children: substring })))));
+//# sourceMappingURL=highlighted-text.js.map

package/dist/esm/components/highlighted-text/highlighted-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlighted-text.js","sourceRoot":"","sources":["../../../../src/components/highlighted-text/highlighted-text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAW9D,MAAM,CAAC,MAAM,eAAe,GAAiC,CAAC,EAC5D,SAAS,EACT,qBAAqB,GAAG,IAAI,EAC5B,SAAS,EACT,QAAQ,GACT,EAAE,EAAE,CAAC,CACJ,2CACa,QAAQ,EACnB,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,qBAAqB,EAAE,EAAE,SAAS,CAAC,IAEnE,SAAS,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACpD,8BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,aAAa,EAAE,CAAC,EACtD,QAAQ,EAAE,SAAS,GACnB,CACH,CAAC,CACG,CACR,CAAC"}

package/dist/esm/components/highlighted-text/highlighted-text.st.css

@@ -0,0 +1,39 @@
+@property st-global(--wds-color-yellow-200);
+@property st-global(--wds-color-yellow-400);
+@property st-global(--wsr-color-Y20);
+@property st-global(--wsr-color-Y40);
+
+.root {
+    -st-states: highlightedBackground;
+}
+
+.root:highlightedBackground {
+    animation: highlighted 150ms ease-out 1 forwards;
+}
+
+.substring {
+    -st-states: isHighlighted;
+}
+
+.substring:isHighlighted {
+    animation: highlighted-match 150ms ease-out 50ms 1 forwards;
+}
+
+
+@keyframes highlighted {
+    from {
+        background-color: transparent;
+    }
+    to {
+        background-color: var(--wds-color-yellow-400, var(--wsr-color-Y40));
+    }
+}
+
+@keyframes highlighted-match {
+    from {
+        background-color: transparent;
+    }
+    to {
+        background-color: var(--wds-color-yellow-200, var(--wsr-color-Y20));
+    }
+}

package/dist/esm/components/highlighted-text/highlighted-text.st.css.js

@@ -0,0 +1,15 @@
+// @ts-nocheck
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+var _namespace_ = "highlightedtext2964394036";
+var _style_ = classesRuntime.bind(null, _namespace_);
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st = _style_;
+export var namespace = _namespace_;
+export var classes = { "root": "highlightedtext2964394036__root", "substring": "highlightedtext2964394036__substring" };
+export var keyframes = { "highlighted": "highlightedtext2964394036__highlighted", "highlighted-match": "highlightedtext2964394036__highlighted-match" };
+export var layers = {};
+export var containers = {};
+export var stVars = {};
+export var vars = { "wds-color-yellow-200": "--wds-color-yellow-200", "wds-color-yellow-400": "--wds-color-yellow-400", "wsr-color-Y20": "--wsr-color-Y20", "wsr-color-Y40": "--wsr-color-Y40" };
+//# sourceMappingURL=highlighted-text.st.css.js.map

package/dist/esm/components/highlighted-text/highlighted-text.st.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlighted-text.st.css.js","sourceRoot":"","sources":["../../../../src/components/highlighted-text/highlighted-text.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,2BAA2B,CAAC;AAC9C,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAA2C,OAAO,CAAC;AACnE,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,iCAAiC,EAAC,WAAW,EAAC,sCAAsC,EAAC,CAAC;AACnH,MAAM,CAAC,IAAI,SAAS,GAAG,EAAC,aAAa,EAAC,wCAAwC,EAAC,mBAAmB,EAAC,8CAA8C,EAAC,CAAC;AACnJ,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAC,sBAAsB,EAAC,wBAAwB,EAAC,sBAAsB,EAAC,wBAAwB,EAAC,eAAe,EAAC,iBAAiB,EAAC,eAAe,EAAC,iBAAiB,EAAC,CAAC"}

package/dist/esm/components/highlighted-text/index.js

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

package/dist/esm/components/highlighted-text/index.js.map

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

package/dist/esm/components/index.js

@@ -0,0 +1,17 @@
+export * from './address';
+export * from './audio';
+export * from './common';
+export * from './exclamation';
+export * from './time-input';
+export * from './time-view';
+export * from './object';
+export * from './media-gallery';
+export * from './rich-content';
+export * from './rich-text';
+export * from './text';
+export * from './video';
+export * from './document';
+export * from './multi-document';
+export * from './color-view';
+export * from './delete-dialog';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC"}

package/dist/esm/components/media-control/index.js

@@ -0,0 +1,7 @@
+export * from './types';
+export * from './use-media-control';
+export * from './use-paste-url-form';
+export * from './use-document-delete';
+export * from './paste-url-button';
+export * from './paste-url-form';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/media-control/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/media-control/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC"}

package/dist/esm/components/media-control/paste-url-button.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { classes } from './paste-url-button.st.css.js';
+import { TextButton } from '@wix/design-system';
+export const PasteURLButton = ({ disabled, onClick, title, dataHook = 'paste-url-button', }) => {
+    return (React.createElement(TextButton, { size: "small", underline: "always", className: classes.root, disabled: disabled, onClick: onClick, dataHook: dataHook }, title));
+};
+PasteURLButton.displayName = 'PasteURLButton';
+//# sourceMappingURL=paste-url-button.js.map

package/dist/esm/components/media-control/paste-url-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"paste-url-button.js","sourceRoot":"","sources":["../../../../src/components/media-control/paste-url-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAShD,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAC5D,QAAQ,EACR,OAAO,EACP,KAAK,EACL,QAAQ,GAAG,kBAAkB,GAC9B,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,UAAU,IACT,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,QAAQ,EAClB,SAAS,EAAE,OAAO,CAAC,IAAI,EACvB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,IAEjB,KAAK,CACK,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC"}

package/dist/esm/components/media-control/paste-url-button.st.css

@@ -0,0 +1,12 @@
+.root {
+    margin-top: 6px;
+}
+
+.iconButtonTooltip {
+    height: max-content;
+}
+
+.iconButton {
+    width: 24px;
+    height: 24px;
+}