@manuscripts/style-guide 3.4.2 → 3.4.4

package/dist/types/{hooks/use-deep-compare.d.ts → defaultTheme.d.ts}

@@ -1,5 +1,5 @@
 /*!
- * © 2022 Atypon Systems LLC
+ * © 2026 Atypon Systems LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -13,5 +13,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export declare const useDeepCompareMemo: <T, D>(callback: () => T, deps: D) => T;
-export declare const useDeepCompareCallback: <T, D>(callback: () => T, deps: D) => () => T;
+import type { Theme } from './theme';
+export declare const defaultTheme: Theme;

package/dist/types/index.d.ts

@@ -14,12 +14,13 @@
  * limitations under the License.
  */
 export { Theme } from './theme';
+export { defaultTheme } from './defaultTheme';
+export * as colors from './colors';
 export * from './components/AlertMessage';
 export * from './components/Message';
 export * from './components/Button';
 export * from './components/ContextMenu';
 export * from './components/RadioButton';
-export * from './components/AutoSaveInput';
 export * from './components/Avatar';
 export * from './components/Dialog';
 export * from './components/DraggableModal';
@@ -30,11 +31,7 @@ export * from './components/Resizer';
 export * from './components/SaveStatus';
 export * from './components/StyledModal';
 export * from './components/Sidebar';
-export * from './components/RichText';
 export * from './components/TextField';
-export * from './components/TextFieldContainer';
-export * from './components/TextFieldError';
-export * from './components/TextFieldGroupContainer';
 export * from './components/ToggleSwitch';
 export { ToggleHeader, ToggleIcon } from './components/ToggleHeader';
 export * from './components/Tooltip';
@@ -54,6 +51,5 @@ export * from './components/SelectedItemsBox';
 export * from './hooks/use-dropdown';
 export * from './hooks/use-menus';
 export * from './hooks/use-scroll-detection';
-export { useDeepCompareMemo, useDeepCompareCallback, } from './hooks/use-deep-compare';
 export * from './lib/files';
 export * from './lib/menus';

package/dist/types/theme.d.ts

@@ -82,10 +82,12 @@ interface Background {
     dark: string;
     selected: string;
     tracked: States;
+    muted: string;
 }
 interface Border {
     field: States;
     tracked: States;
+    muted: string;
 }
 interface Brand {
     dark: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "3.4.2",
+  "version": "3.4.4",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",

package/dist/cjs/components/AutoSaveInput.js

@@ -1,45 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AutoSaveInput = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-class AutoSaveInput extends react_1.default.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            focused: false,
-        };
-        this.handleSubmit = () => {
-            window.setTimeout(this.props.form.submitForm, 10);
-        };
-        this.handleFocus = () => {
-            this.setState({ focused: true });
-        };
-        this.handleBlur = (event) => {
-            this.setState({ focused: false });
-            this.props.field.onBlur(event);
-            if (this.props.saveOn === 'blur') {
-                this.handleSubmit();
-            }
-        };
-        this.handleChange = (event) => {
-            this.props.field.onChange(event);
-            if (this.props.saveOn === 'change') {
-                this.handleSubmit();
-            }
-        };
-    }
-    componentWillUnmount() {
-        if (this.state.focused) {
-            this.handleSubmit();
-        }
-    }
-    render() {
-        const { component: Component, field, placeholder, disabled, testId, } = this.props;
-        return ((0, jsx_runtime_1.jsx)(Component, { ...field, placeholder: placeholder, disabled: disabled, checked: !!field.value, onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: this.handleChange, "data-testid": testId && `${testId}__input`, "aria-invalid": this.props.isInvalid || undefined }));
-    }
-}
-exports.AutoSaveInput = AutoSaveInput;

package/dist/cjs/components/RichText/RichText.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RichText = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const prosemirror_state_1 = require("prosemirror-state");
-const prosemirror_view_1 = require("prosemirror-view");
-const react_1 = require("react");
-const schema_1 = require("./schema");
-const RichText = ({ className, value }) => {
-    const editorRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        const state = prosemirror_state_1.EditorState.create({
-            doc: (0, schema_1.parseRichText)(value),
-            schema: schema_1.schema,
-        });
-        const view = new prosemirror_view_1.EditorView(null, {
-            editable: () => false,
-            state,
-        });
-        editorRef.current && editorRef.current.replaceChildren(view.dom);
-    }, [value]);
-    return (0, jsx_runtime_1.jsx)("div", { className: className, ref: editorRef });
-};
-exports.RichText = RichText;

package/dist/cjs/components/RichText/RichTextField.js

@@ -1,68 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RichTextField = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const prosemirror_commands_1 = require("prosemirror-commands");
-const prosemirror_history_1 = require("prosemirror-history");
-const prosemirror_keymap_1 = require("prosemirror-keymap");
-const prosemirror_state_1 = require("prosemirror-state");
-const prosemirror_view_1 = require("prosemirror-view");
-const react_1 = require("react");
-const styled_components_1 = __importDefault(require("styled-components"));
-const schema_1 = require("./schema");
-const Container = styled_components_1.default.div `
-  & .ProseMirror {
-    font-family: ${(props) => props.theme.font.family.sans};
-    font-size: ${(props) => props.theme.font.size.medium};
-    line-height: 1.25;
-    color: ${(props) => props.theme.colors.text.primary};
-    border-radius: ${(props) => props.theme.grid.radius.small};
-    border: 1px solid ${(props) => props.theme.colors.text.muted};
-    padding: ${(props) => props.theme.grid.unit * 2}px
-      ${(props) => props.theme.grid.unit * 3}px;
-
-    &:focus {
-      outline: none;
-      border-color: ${(props) => props.theme.colors.border.field.hover};
-      background-color: ${(props) => props.theme.colors.background.fifth};
-    }
-  }
-`;
-const RichTextField = ({ value, onChange, }) => {
-    const editorRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        const dispatch = (view, tr) => {
-            const { state, transactions } = view.state.applyTransaction(tr);
-            view.updateState(state);
-            if (onChange && transactions.some((tr) => tr.docChanged)) {
-                const value = (0, schema_1.serializeRichText)(state.doc);
-                onChange(value);
-            }
-        };
-        const state = prosemirror_state_1.EditorState.create({
-            doc: (0, schema_1.parseRichText)(value),
-            plugins: [
-                (0, prosemirror_history_1.history)(),
-                (0, prosemirror_keymap_1.keymap)(prosemirror_commands_1.baseKeymap),
-                (0, prosemirror_keymap_1.keymap)({
-                    'Mod-b': (0, prosemirror_commands_1.toggleMark)(schema_1.schema.marks.bold),
-                    'Mod-i': (0, prosemirror_commands_1.toggleMark)(schema_1.schema.marks.italic),
-                    'Mod-y': prosemirror_history_1.redo,
-                    'Mod-z': prosemirror_history_1.undo,
-                }),
-            ],
-            schema: schema_1.schema,
-        });
-        const view = new prosemirror_view_1.EditorView(null, {
-            editable: () => true,
-            state,
-            dispatchTransaction: (tr) => dispatch(view, tr),
-        });
-        editorRef.current && editorRef.current.appendChild(view.dom);
-    }, [value, onChange]);
-    return (0, jsx_runtime_1.jsx)(Container, { ref: editorRef });
-};
-exports.RichTextField = RichTextField;

package/dist/cjs/components/RichText/index.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RichTextField = exports.RichText = void 0;
-var RichText_1 = require("./RichText");
-Object.defineProperty(exports, "RichText", { enumerable: true, get: function () { return RichText_1.RichText; } });
-var RichTextField_1 = require("./RichTextField");
-Object.defineProperty(exports, "RichTextField", { enumerable: true, get: function () { return RichTextField_1.RichTextField; } });

package/dist/cjs/components/RichText/schema.js

@@ -1,111 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.serializeRichText = exports.parseRichText = exports.schema = void 0;
-const prosemirror_model_1 = require("prosemirror-model");
-exports.schema = new prosemirror_model_1.Schema({
-    marks: {
-        bold: {
-            parseDOM: [
-                {
-                    tag: 'b',
-                    getAttrs: (dom) => dom.style.fontWeight !== 'normal' && null,
-                },
-                {
-                    tag: 'strong',
-                },
-                {
-                    style: 'font-weight',
-                    getAttrs: (value) => /^(bold(er)?|[5-9]\d{2,})$/.test(value) && null,
-                },
-            ],
-            toDOM() {
-                return ['b'];
-            },
-        },
-        italic: {
-            parseDOM: [
-                {
-                    tag: 'i',
-                },
-                {
-                    tag: 'em',
-                },
-                {
-                    style: 'font-style=italic',
-                },
-            ],
-            toDOM() {
-                return ['i'];
-            },
-        },
-        smallcaps: {
-            parseDOM: [
-                {
-                    style: 'font-variant=small-caps',
-                },
-                {
-                    style: 'font-variant-caps=small-caps',
-                },
-            ],
-            toDOM: () => [
-                'span',
-                {
-                    style: 'font-variant:small-caps',
-                },
-            ],
-        },
-        subscript: {
-            excludes: 'superscript',
-            group: 'position',
-            parseDOM: [
-                {
-                    tag: 'sub',
-                },
-                {
-                    style: 'vertical-align=sub',
-                },
-            ],
-            toDOM: () => ['sub'],
-        },
-        superscript: {
-            excludes: 'subscript',
-            group: 'position',
-            parseDOM: [
-                {
-                    tag: 'sup',
-                },
-                {
-                    style: 'vertical-align=super',
-                },
-            ],
-            toDOM: () => ['sup'],
-        },
-    },
-    nodes: {
-        text: {},
-        rich: {
-            content: 'text*',
-            marks: 'bold italic smallcaps subscript superscript',
-            parseDOM: [
-                {
-                    tag: 'div',
-                },
-            ],
-            toDOM: () => ['div', 0],
-        },
-    },
-    topNode: 'rich',
-});
-const parser = prosemirror_model_1.DOMParser.fromSchema(exports.schema);
-const serializer = prosemirror_model_1.DOMSerializer.fromSchema(exports.schema);
-const parseRichText = (value) => {
-    const node = document.createElement('div');
-    node.innerHTML = value;
-    return parser.parse(node);
-};
-exports.parseRichText = parseRichText;
-const serializeRichText = (node) => {
-    const element = serializer.serializeNode(node);
-    return element.innerHTML;
-};
-exports.serializeRichText = serializeRichText;

package/dist/cjs/components/TextFieldContainer.js

@@ -1,15 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextFieldContainer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const TextField_1 = require("./TextField");
-const TextFieldError_1 = require("./TextFieldError");
-const TextFieldContainer = ({ label, error, children }) => {
-    const childrenWithErrorProp = react_1.default.Children.map(children, (child) => react_1.default.cloneElement(child, { error: String(error) }));
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [label ? ((0, jsx_runtime_1.jsxs)(TextField_1.TextFieldLabel, { children: [label, " ", childrenWithErrorProp] })) : (childrenWithErrorProp), error && ((0, jsx_runtime_1.jsx)(TextFieldError_1.TextFieldError, { children: (0, jsx_runtime_1.jsx)(TextFieldError_1.TextFieldErrorItem, { children: error }) }))] }));
-};
-exports.TextFieldContainer = TextFieldContainer;

package/dist/cjs/components/TextFieldError.js

@@ -1,34 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextFieldError = exports.TextFieldErrorItem = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = __importDefault(require("styled-components"));
-const Arrow = styled_components_1.default.div `
-  width: 0;
-  height: 0;
-  position: absolute;
-  border: 5px solid transparent;
-  top: -5px;
-  left: calc(16px);
-  border-bottom-color: ${(props) => props.theme.colors.background.error};
-  border-top-width: 0;
-  margin: 0 5px;
-`;
-const Container = styled_components_1.default.div `
-  background: ${(props) => props.theme.colors.background.error};
-  border-radius: 2px;
-  color: ${(props) => props.theme.colors.text.error};
-  font-family: ${(props) => props.theme.font.family.sans};
-  margin-top: 5px;
-  margin-bottom: 5px;
-  position: relative;
-  padding: 4px;
-`;
-exports.TextFieldErrorItem = styled_components_1.default.div `
-  margin: 8px;
-`;
-const TextFieldError = ({ children }) => ((0, jsx_runtime_1.jsxs)(Container, { children: [(0, jsx_runtime_1.jsx)(Arrow, {}), children] }));
-exports.TextFieldError = TextFieldError;

package/dist/cjs/components/TextFieldGroupContainer.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextFieldGroupContainer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const TextField_1 = require("./TextField");
-const TextFieldError_1 = require("./TextFieldError");
-const hasErrors = (errors) => Object.values(errors).some((error) => !!error);
-const TextFieldGroupContainer = ({ children, errors }) => {
-    return ((0, jsx_runtime_1.jsxs)(TextField_1.TextFieldGroup, { children: [children, errors && hasErrors(errors) && ((0, jsx_runtime_1.jsx)(TextFieldError_1.TextFieldError, { children: Object.entries(errors).map(([key, error]) => error && ((0, jsx_runtime_1.jsx)(TextFieldError_1.TextFieldErrorItem, { id: `${key}-text-field-error`, children: error }, key))) }))] }));
-};
-exports.TextFieldGroupContainer = TextFieldGroupContainer;

package/dist/cjs/hooks/use-deep-compare.js

@@ -1,31 +0,0 @@
-"use strict";
-/*!
- * © 2022 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDeepCompareCallback = exports.useDeepCompareMemo = void 0;
-const lodash_1 = require("lodash");
-const react_1 = require("react");
-const useDeepCompare = (deps) => {
-    const ref = (0, react_1.useRef)(deps);
-    if (!(0, lodash_1.isEqual)(deps, ref.current)) {
-        ref.current = deps;
-    }
-    return ref.current;
-};
-const useDeepCompareMemo = (callback, deps) => (0, react_1.useMemo)(callback, [useDeepCompare(deps)]);
-exports.useDeepCompareMemo = useDeepCompareMemo;
-const useDeepCompareCallback = (callback, deps) => (0, react_1.useCallback)(callback, [useDeepCompare(deps)]);
-exports.useDeepCompareCallback = useDeepCompareCallback;

package/dist/es/components/AutoSaveInput.js

@@ -1,38 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-export class AutoSaveInput extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            focused: false,
-        };
-        this.handleSubmit = () => {
-            window.setTimeout(this.props.form.submitForm, 10);
-        };
-        this.handleFocus = () => {
-            this.setState({ focused: true });
-        };
-        this.handleBlur = (event) => {
-            this.setState({ focused: false });
-            this.props.field.onBlur(event);
-            if (this.props.saveOn === 'blur') {
-                this.handleSubmit();
-            }
-        };
-        this.handleChange = (event) => {
-            this.props.field.onChange(event);
-            if (this.props.saveOn === 'change') {
-                this.handleSubmit();
-            }
-        };
-    }
-    componentWillUnmount() {
-        if (this.state.focused) {
-            this.handleSubmit();
-        }
-    }
-    render() {
-        const { component: Component, field, placeholder, disabled, testId, } = this.props;
-        return (_jsx(Component, { ...field, placeholder: placeholder, disabled: disabled, checked: !!field.value, onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: this.handleChange, "data-testid": testId && `${testId}__input`, "aria-invalid": this.props.isInvalid || undefined }));
-    }
-}

package/dist/es/components/RichText/RichText.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { EditorState } from 'prosemirror-state';
-import { EditorView } from 'prosemirror-view';
-import { useEffect, useRef } from 'react';
-import { parseRichText, schema } from './schema';
-export const RichText = ({ className, value }) => {
-    const editorRef = useRef(null);
-    useEffect(() => {
-        const state = EditorState.create({
-            doc: parseRichText(value),
-            schema,
-        });
-        const view = new EditorView(null, {
-            editable: () => false,
-            state,
-        });
-        editorRef.current && editorRef.current.replaceChildren(view.dom);
-    }, [value]);
-    return _jsx("div", { className: className, ref: editorRef });
-};

package/dist/es/components/RichText/RichTextField.js

@@ -1,61 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { baseKeymap, toggleMark } from 'prosemirror-commands';
-import { history, redo, undo } from 'prosemirror-history';
-import { keymap } from 'prosemirror-keymap';
-import { EditorState } from 'prosemirror-state';
-import { EditorView } from 'prosemirror-view';
-import { useEffect, useRef } from 'react';
-import styled from 'styled-components';
-import { parseRichText, schema, serializeRichText } from './schema';
-const Container = styled.div `
-  & .ProseMirror {
-    font-family: ${(props) => props.theme.font.family.sans};
-    font-size: ${(props) => props.theme.font.size.medium};
-    line-height: 1.25;
-    color: ${(props) => props.theme.colors.text.primary};
-    border-radius: ${(props) => props.theme.grid.radius.small};
-    border: 1px solid ${(props) => props.theme.colors.text.muted};
-    padding: ${(props) => props.theme.grid.unit * 2}px
-      ${(props) => props.theme.grid.unit * 3}px;
-
-    &:focus {
-      outline: none;
-      border-color: ${(props) => props.theme.colors.border.field.hover};
-      background-color: ${(props) => props.theme.colors.background.fifth};
-    }
-  }
-`;
-export const RichTextField = ({ value, onChange, }) => {
-    const editorRef = useRef(null);
-    useEffect(() => {
-        const dispatch = (view, tr) => {
-            const { state, transactions } = view.state.applyTransaction(tr);
-            view.updateState(state);
-            if (onChange && transactions.some((tr) => tr.docChanged)) {
-                const value = serializeRichText(state.doc);
-                onChange(value);
-            }
-        };
-        const state = EditorState.create({
-            doc: parseRichText(value),
-            plugins: [
-                history(),
-                keymap(baseKeymap),
-                keymap({
-                    'Mod-b': toggleMark(schema.marks.bold),
-                    'Mod-i': toggleMark(schema.marks.italic),
-                    'Mod-y': redo,
-                    'Mod-z': undo,
-                }),
-            ],
-            schema,
-        });
-        const view = new EditorView(null, {
-            editable: () => true,
-            state,
-            dispatchTransaction: (tr) => dispatch(view, tr),
-        });
-        editorRef.current && editorRef.current.appendChild(view.dom);
-    }, [value, onChange]);
-    return _jsx(Container, { ref: editorRef });
-};

package/dist/es/components/RichText/index.js

@@ -1,2 +0,0 @@
-export { RichText } from './RichText';
-export { RichTextField } from './RichTextField';

package/dist/es/components/RichText/schema.js

@@ -1,106 +0,0 @@
-import { DOMParser, DOMSerializer, Schema, } from 'prosemirror-model';
-export const schema = new Schema({
-    marks: {
-        bold: {
-            parseDOM: [
-                {
-                    tag: 'b',
-                    getAttrs: (dom) => dom.style.fontWeight !== 'normal' && null,
-                },
-                {
-                    tag: 'strong',
-                },
-                {
-                    style: 'font-weight',
-                    getAttrs: (value) => /^(bold(er)?|[5-9]\d{2,})$/.test(value) && null,
-                },
-            ],
-            toDOM() {
-                return ['b'];
-            },
-        },
-        italic: {
-            parseDOM: [
-                {
-                    tag: 'i',
-                },
-                {
-                    tag: 'em',
-                },
-                {
-                    style: 'font-style=italic',
-                },
-            ],
-            toDOM() {
-                return ['i'];
-            },
-        },
-        smallcaps: {
-            parseDOM: [
-                {
-                    style: 'font-variant=small-caps',
-                },
-                {
-                    style: 'font-variant-caps=small-caps',
-                },
-            ],
-            toDOM: () => [
-                'span',
-                {
-                    style: 'font-variant:small-caps',
-                },
-            ],
-        },
-        subscript: {
-            excludes: 'superscript',
-            group: 'position',
-            parseDOM: [
-                {
-                    tag: 'sub',
-                },
-                {
-                    style: 'vertical-align=sub',
-                },
-            ],
-            toDOM: () => ['sub'],
-        },
-        superscript: {
-            excludes: 'subscript',
-            group: 'position',
-            parseDOM: [
-                {
-                    tag: 'sup',
-                },
-                {
-                    style: 'vertical-align=super',
-                },
-            ],
-            toDOM: () => ['sup'],
-        },
-    },
-    nodes: {
-        text: {},
-        rich: {
-            content: 'text*',
-            marks: 'bold italic smallcaps subscript superscript',
-            parseDOM: [
-                {
-                    tag: 'div',
-                },
-            ],
-            toDOM: () => ['div', 0],
-        },
-    },
-    topNode: 'rich',
-});
-const parser = DOMParser.fromSchema(schema);
-const serializer = DOMSerializer.fromSchema(schema);
-export const parseRichText = (value) => {
-    const node = document.createElement('div');
-    node.innerHTML = value;
-    return parser.parse(node);
-};
-export const serializeRichText = (node) => {
-    const element = serializer.serializeNode(node);
-    return element.innerHTML;
-};

package/dist/es/components/TextFieldContainer.js

@@ -1,8 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { TextFieldLabel } from './TextField';
-import { TextFieldError, TextFieldErrorItem } from './TextFieldError';
-export const TextFieldContainer = ({ label, error, children }) => {
-    const childrenWithErrorProp = React.Children.map(children, (child) => React.cloneElement(child, { error: String(error) }));
-    return (_jsxs(React.Fragment, { children: [label ? (_jsxs(TextFieldLabel, { children: [label, " ", childrenWithErrorProp] })) : (childrenWithErrorProp), error && (_jsx(TextFieldError, { children: _jsx(TextFieldErrorItem, { children: error }) }))] }));
-};