@homebound/beam 2.378.1 → 2.379.0

package/dist/inputs/RadioGroupField.d.ts

@@ -1,89 +0,0 @@
-import { ReactNode } from "react";
-import { PresentationFieldProps } from "../components/PresentationContext";
-export interface RadioFieldOption<K extends string> {
-    /** The label for a specific option, i.e. "Cheddar". */
-    label: string;
-    /** An optional longer description to render under the label. */
-    description?: string | (() => ReactNode);
-    /** The undisplayed value, i.e. an id of some sort. */
-    value: K;
-    /** Disable only specific option, with an optional reason */
-    disabled?: boolean | ReactNode;
-}
-export interface RadioGroupFieldProps<K extends string> extends Pick<PresentationFieldProps, "labelStyle"> {
-    /** The label for the choice itself, i.e. "Favorite Cheese". */
-    label: string;
-    /** The currently selected option value (i.e. an id). */
-    value: K | undefined;
-    /** Called when an option is selected. We don't support unselecting. */
-    onChange: (value: K) => void;
-    /** The list of options. */
-    options: RadioFieldOption<K>[];
-    disabled?: boolean;
-    errorMsg?: string;
-    helperText?: string | ReactNode;
-    onBlur?: () => void;
-    onFocus?: () => void;
-}
-/**
- * Provides a radio group with label.
- *
- * This is generally meant to be used in a form vs. being raw radio buttons.
- *
- * TODO: Add hover (non selected and selected) styles
- */
-export declare function RadioGroupField<K extends string>(props: RadioGroupFieldProps<K>): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const radioReset: {
-    outline: import("csstype").Property.Outline<string | 0> | undefined;
-    appearance: import("csstype").Property.Appearance | undefined;
-    paddingTop: import("csstype").Property.PaddingTop<string | 0> | undefined;
-    paddingBottom: import("csstype").Property.PaddingBottom<string | 0> | undefined;
-    paddingRight: import("csstype").Property.PaddingRight<string | 0> | undefined;
-    paddingLeft: import("csstype").Property.PaddingLeft<string | 0> | undefined;
-    display: import("csstype").Property.Display | undefined;
-    verticalAlign: import("csstype").Property.VerticalAlign<string | 0> | undefined;
-    userSelect: import("csstype").Property.UserSelect | undefined;
-    flexShrink: import("csstype").Property.FlexShrink | undefined;
-    height: import("csstype").Property.Height<string | 0> | undefined;
-    width: import("csstype").Property.Width<string | 0> | undefined;
-    borderRadius: import("csstype").Property.BorderRadius<string | 0> | undefined;
-};
-export declare const radioDefault: {
-    transition: import("csstype").Property.Transition<string> | undefined;
-    color: import("csstype").Property.Color | undefined;
-    backgroundColor: import("csstype").Property.BackgroundColor | undefined;
-    borderColor: import("csstype").Property.BorderColor | undefined;
-    borderStyle: import("csstype").Property.BorderStyle | undefined;
-    borderWidth: import("csstype").Property.BorderWidth<string | 0> | undefined;
-};
-export declare const radioUnchecked: {
-    cursor: import("csstype").Property.Cursor | undefined;
-} & {
-    borderColor: import("csstype").Property.BorderColor | undefined;
-};
-export declare const radioChecked: {
-    borderColor: import("csstype").Property.BorderColor | undefined;
-    backgroundImage: import("csstype").Property.BackgroundImage | undefined;
-    backgroundColor: import("csstype").Property.BackgroundColor | undefined;
-    backgroundSize: import("csstype").Property.BackgroundSize<string | 0> | undefined;
-    backgroundPosition: import("csstype").Property.BackgroundPosition<string | 0> | undefined;
-    backgroundRepeat: import("csstype").Property.BackgroundRepeat | undefined;
-};
-export declare const radioFocus: {
-    boxShadow: import("csstype").Property.BoxShadow | undefined;
-    outline: import("csstype").Property.Outline<string | 0> | undefined;
-    outlineOffset: import("csstype").Property.OutlineOffset<string | 0> | undefined;
-};
-export declare const radioHover: {
-    color: import("csstype").Property.Color | undefined;
-    borderColor: import("csstype").Property.BorderColor | undefined;
-};
-export declare const radioDisabled: {
-    backgroundColor: import("csstype").Property.BackgroundColor | undefined;
-    backgroundSize: import("csstype").Property.BackgroundSize<string | 0> | undefined;
-    backgroundPosition: import("csstype").Property.BackgroundPosition<string | 0> | undefined;
-    backgroundRepeat: import("csstype").Property.BackgroundRepeat | undefined;
-    cursor: import("csstype").Property.Cursor | undefined;
-    color: import("csstype").Property.Color | undefined;
-};
-//# sourceMappingURL=RadioGroupField.d.ts.map

package/dist/inputs/RadioGroupField.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RadioGroupField.d.ts","sourceRoot":"","sources":["../../src/inputs/RadioGroupField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,SAAS,EAAmB,MAAM,OAAO,CAAC;AAM7D,OAAO,EAAE,sBAAsB,EAAE,0CAA2C;AAQ5E,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,MAAM;IAEhD,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,SAAS,CAAC,CAAC;IACzC,sDAAsD;IACtD,KAAK,EAAE,CAAC,CAAC;IACT,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,IAAI,CAAC,sBAAsB,EAAE,YAAY,CAAC;IACxG,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,KAAK,EAAE,CAAC,GAAG,SAAS,CAAC;IACrB,uEAAuE;IACvE,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,2BAA2B;IAC3B,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,oDAgD/E;AAwED,eAAO,MAAM,UAAU;;;;;;;;;;;;;;CAGtB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;CAOxB,CAAC;AAGF,eAAO,MAAM,cAAc;;;;CAAgC,CAAC;AAG5D,eAAO,MAAM,YAAY;;;;;;;CAUxB,CAAC;AAGF,eAAO,MAAM,UAAU;;;;CAKtB,CAAC;AAEF,eAAO,MAAM,UAAU;;;CAGtB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;CAMzB,CAAC"}

package/dist/inputs/RadioGroupField.js

@@ -1,118 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.radioDisabled = exports.radioHover = exports.radioFocus = exports.radioChecked = exports.radioUnchecked = exports.radioDefault = exports.radioReset = void 0;
-exports.RadioGroupField = RadioGroupField;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
-const react_aria_1 = require("react-aria");
-const react_stately_1 = require("react-stately");
-const components_1 = require("../components");
-const HelperText_1 = require("../components/HelperText");
-const Label_1 = require("../components/Label");
-const Css_1 = require("../Css");
-const ErrorMessage_1 = require("./ErrorMessage");
-const defaultTestId_1 = require("../utils/defaultTestId");
-const useTestIds_1 = require("../utils/useTestIds");
-let nextNameId = 0;
-/**
- * Provides a radio group with label.
- *
- * This is generally meant to be used in a form vs. being raw radio buttons.
- *
- * TODO: Add hover (non selected and selected) styles
- */
-function RadioGroupField(props) {
-    const { label, labelStyle, value, onChange, options, disabled = false, errorMsg, helperText, ...otherProps } = props;
-    // useRadioGroupState uses a random group name, so use our name
-    const name = (0, react_1.useMemo)(() => `radio-group-${++nextNameId}`, []);
-    const state = (0, react_stately_1.useRadioGroupState)({
-        name,
-        value,
-        onChange: (value) => onChange(value),
-        isDisabled: disabled,
-        isReadOnly: false,
-    });
-    const tid = (0, useTestIds_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
-    // We use useRadioGroup b/c it does neat keyboard up/down stuff
-    // TODO: Pass read only, required, error message to useRadioGroup
-    const { labelProps, radioGroupProps } = (0, react_aria_1.useRadioGroup)({ label, isDisabled: disabled }, state);
-    return (
-    // default styling to position `<Label />` above.
-    (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.fdc.gap1.aifs.if(labelStyle === "left").fdr.gap2.jcsb.$, children: [(0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, ...labelProps, ...tid.label, hidden: labelStyle === "hidden" }), (0, jsx_runtime_1.jsxs)("div", { ...radioGroupProps, children: [options.map((option) => {
-                        const isDisabled = state.isDisabled || !!option.disabled;
-                        return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, components_1.maybeTooltip)({
-                                title: (0, components_1.resolveTooltip)(option.disabled),
-                                placement: "bottom",
-                                children: ((0, jsx_runtime_1.jsx)(Radio, { parentId: name, option: option, state: { ...state, isDisabled }, ...otherProps, ...tid[option.value] })),
-                            }) }, option.value));
-                    }), errorMsg && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { errorMsg: errorMsg, ...tid.errorMsg }), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { helperText: helperText })] })] }));
-}
-// Not meant to be standalone, but its own component so it can use hooks
-function Radio(props) {
-    const { parentId, option: { description, label, value }, state, ...others } = props;
-    const disabled = state.isDisabled;
-    const labelId = `${parentId}-${value}-label`;
-    const descriptionId = `${parentId}-${value}-description`;
-    const ref = (0, react_1.useRef)(null);
-    const { inputProps } = (0, react_aria_1.useRadio)({ value, "aria-labelledby": labelId }, state, ref);
-    const { focusProps, isFocusVisible } = (0, react_aria_1.useFocusRing)();
-    const { hoverProps, isHovered } = (0, react_aria_1.useHover)({ isDisabled: disabled });
-    return ((0, jsx_runtime_1.jsxs)("label", { css: Css_1.Css.df.cursorPointer.mb1.if(disabled).add("cursor", "initial").$, ...hoverProps, children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", ref: ref, css: {
-                    ...exports.radioReset,
-                    ...exports.radioDefault,
-                    ...(!disabled && state.selectedValue === value ? exports.radioChecked : exports.radioUnchecked),
-                    ...(disabled ? exports.radioDisabled : {}),
-                    ...(isHovered ? exports.radioHover : {}),
-                    ...(isFocusVisible ? exports.radioFocus : {}),
-                    // Nudge down so the center of the circle lines up with the label text
-                    ...Css_1.Css.mtPx(2).mr1.$,
-                }, disabled: disabled, "aria-labelledby": labelId, ...inputProps, ...focusProps, ...others }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { id: labelId, css: Css_1.Css.smMd.gray800.if(disabled).gray400.$, ...(description ? { "aria-describedby": descriptionId } : {}), children: label }), description && ((0, jsx_runtime_1.jsx)("div", { id: descriptionId, css: Css_1.Css.sm.gray700.if(disabled).gray400.$, children: typeof description === "function" ? description() : description }))] })] }));
-}
-const whiteCircle = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='4'/%3e%3c/svg%3e";
-// Didn't put these in radioReset yet, are they needed?
-// color-adjust: exact;
-// -webkit-print-color-adjust: exact;
-exports.radioReset = {
-    ...Css_1.Css.add("appearance", "none").p0.dib.vam.add("userSelect", "none").fs0.h2.w2.br100.$,
-    ...Css_1.Css.add("outline", "0px solid transparent").$,
-};
-exports.radioDefault = {
-    // By default we're a white circle with a gray border
-    ...Css_1.Css.bgWhite.bcGray300.ba.$,
-    // Set the "selected" color that will be used by background=currentColor + box shadow, but is initially ignored
-    ...Css_1.Css.blue700.$,
-    // Apply our default transitions
-    ...Css_1.Css.transition.$,
-};
-// Unchecked means a gray border
-exports.radioUnchecked = Css_1.Css.cursorPointer.bcGray300.$;
-// Checked means a blue circle (achieved by a blue background + white dot background image)
-exports.radioChecked = {
-    // Make the background become the current (blue) color
-    ...Css_1.Css.add("backgroundColor", "currentColor")
-        .add("backgroundSize", "100% 100%")
-        .add("backgroundPosition", "center")
-        .add("backgroundRepeat", "no-repeat").$,
-    // And use backgroundImage to draw a white dot in the middle of the background
-    ...Css_1.Css.add("backgroundImage", `url("${whiteCircle}")`).$,
-    // Make our border the same color as the dot
-    ...Css_1.Css.add("borderColor", "currentColor").$,
-};
-// When active draw another circle via boxShadow
-exports.radioFocus = {
-    // The box shadow ends up drawing over this afaict?
-    ...Css_1.Css.add("outline", "2px solid transparent").add("outlineOffset", "2px").$,
-    // Draw 1st box shadow of white/outline, 2nd box current (blue) of another outline
-    ...Css_1.Css.bshFocus.$,
-};
-exports.radioHover = {
-    // Change both the dot and the border to a darker blue
-    ...Css_1.Css.blue900.bcBlue900.$,
-};
-exports.radioDisabled = {
-    ...Css_1.Css.cursorNotAllowed.gray100.$,
-    ...Css_1.Css.add("backgroundColor", "currentColor")
-        .add("backgroundSize", "100% 100%")
-        .add("backgroundPosition", "center")
-        .add("backgroundRepeat", "no-repeat").$,
-};

package/dist/inputs/RichTextField.d.ts

@@ -1,33 +0,0 @@
-import { PresentationFieldProps } from "../components/PresentationContext";
-import "tributejs/dist/tribute.css";
-import "trix/dist/trix";
-import "trix/dist/trix.css";
-export interface RichTextFieldProps extends Pick<PresentationFieldProps, "fullWidth"> {
-    /** The initial html value to show in the trix editor. */
-    value: string | undefined;
-    onChange: (html: string | undefined, text: string | undefined, mergeTags: string[]) => void;
-    /**
-     * A list of tags/names to show in a popup when the user `@`-s.
-     *
-     * Currently we don't support mergeTags being updated.
-     */
-    mergeTags?: string[];
-    label?: string;
-    autoFocus?: boolean;
-    placeholder?: string;
-    /** Called when the component loses focus */
-    onBlur?: () => void;
-    /** Called when the component is in focus. */
-    onFocus?: () => void;
-    /** For rendering formatted text */
-    readOnly?: boolean;
-}
-/**
- * Provides a simple rich text editor based on trix.
- *
- * See [trix]{@link https://github.com/basecamp/trix}.
- *
- * We also integrate [tributejs]{@link https://github.com/zurb/tribute} for @ mentions.
- */
-export declare function RichTextField(props: RichTextFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=RichTextField.d.ts.map

package/dist/inputs/RichTextField.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RichTextField.d.ts","sourceRoot":"","sources":["../../src/inputs/RichTextField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,sBAAsB,EAA0B,0CAA2C;AAIpG,OAAO,4BAA4B,CAAC;AACpC,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAE5B,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,sBAAsB,EAAE,WAAW,CAAC;IACnF,yDAAyD;IACzD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,MAAM,GAAG,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC5F;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,oDA+HtD"}

package/dist/inputs/RichTextField.js

@@ -1,174 +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 = RichTextField;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("@emotion/react");
-const dompurify_1 = __importDefault(require("dompurify"));
-const react_2 = require("react");
-const Label_1 = require("../components/Label");
-const PresentationContext_1 = require("../components/PresentationContext");
-const Css_1 = require("../Css");
-const utils_1 = require("../utils");
-const tributejs_1 = __importDefault(require("tributejs"));
-require("tributejs/dist/tribute.css");
-require("trix/dist/trix");
-require("trix/dist/trix.css");
-/**
- * Provides a simple rich text editor based on trix.
- *
- * See [trix]{@link https://github.com/basecamp/trix}.
- *
- * We also integrate [tributejs]{@link https://github.com/zurb/tribute} for @ mentions.
- */
-function RichTextField(props) {
-    const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
-    const { mergeTags, label, value = "", onChange, onBlur = utils_1.noop, onFocus = utils_1.noop, readOnly, fullWidth = fieldProps?.fullWidth ?? false, } = props;
-    // We get a reference to the Editor instance after trix-init fires
-    const [editor, setEditor] = (0, react_2.useState)();
-    const editorElement = (0, react_2.useRef)();
-    // Keep track of what we pass to onChange, so that we can make ourselves keep looking
-    // like a controlled input, i.e. by only calling loadHTML if a new incoming `value` !== `currentHtml`,
-    // otherwise we'll constantly call loadHTML and reset the user's cursor location.
-    const currentHtml = (0, react_2.useRef)(undefined);
-    // Use a ref for onChange b/c so trixChange always has the latest
-    const onChangeRef = (0, react_2.useRef)(onChange);
-    onChangeRef.current = onChange;
-    const onBlurRef = (0, react_2.useRef)(onBlur);
-    onBlurRef.current = onBlur;
-    const onFocusRef = (0, react_2.useRef)(onFocus);
-    onFocusRef.current = onFocus;
-    // Generate a unique id to be used for matching `trix-initialize` event for this instance.
-    const id = (0, react_2.useMemo)(() => {
-        if (readOnly)
-            return;
-        const id = `trix-editor-${trixId}`;
-        trixId++;
-        function onEditorInit(e) {
-            const targetEl = e.target;
-            if (targetEl.id === id) {
-                editorElement.current = targetEl;
-                const editor = editorElement.current.editor;
-                setEditor(editor);
-                if (mergeTags !== undefined) {
-                    attachTributeJs(mergeTags, editorElement.current);
-                }
-                currentHtml.current = value;
-                editor.loadHTML(value || "");
-                // Remove listener once we've initialized
-                window.removeEventListener("trix-initialize", onEditorInit);
-                function trixChange(e) {
-                    const { textContent, innerHTML } = e.target;
-                    const onChange = onChangeRef.current;
-                    // If the user only types whitespace, treat that as undefined
-                    if ((textContent || "").trim() === "") {
-                        currentHtml.current = undefined;
-                        onChange && onChange(undefined, undefined, []);
-                    }
-                    else {
-                        currentHtml.current = innerHTML;
-                        const mentions = extractIdsFromMentions(mergeTags || [], textContent || "");
-                        onChange && onChange(innerHTML, textContent || undefined, mentions);
-                    }
-                }
-                const trixBlur = () => (0, utils_1.maybeCall)(onBlurRef.current);
-                const trixFocus = () => (0, utils_1.maybeCall)(onFocusRef.current);
-                // We don't want to allow file attachment for now.  In addition to hiding the button, also disable drag-and-drop
-                // https://github.com/basecamp/trix#storing-attached-files
-                const preventDefault = (e) => e.preventDefault();
-                window.addEventListener("trix-file-accept", preventDefault);
-                editorElement.current.addEventListener("trix-change", trixChange);
-                editorElement.current.addEventListener("trix-blur", trixBlur);
-                editorElement.current.addEventListener("trix-focus", trixFocus);
-            }
-        }
-        // Attaching listener to the `window` to we're listening prior to render.
-        // The <trix-editor /> web component's `trix-initialize` event may fire before a `useEffect` hook in the component is executed, making it difficult ot attach the event listener locally.
-        window.addEventListener("trix-initialize", onEditorInit);
-        return id;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [readOnly]);
-    (0, react_2.useEffect)(() => {
-        // If our value prop changes (without the change coming from us), reload it
-        if (!readOnly && editor && value !== currentHtml.current) {
-            editor.loadHTML(value || "");
-        }
-    }, [value, readOnly, editor]);
-    const { placeholder, autoFocus } = props;
-    if (!readOnly) {
-        return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.w100.if(!fullWidth).maxw("550px").$, children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { labelProps: {}, label: label }), (0, jsx_runtime_1.jsxs)("div", { css: { ...Css_1.Css.br4.bgWhite.$, ...trixCssOverrides }, children: [(0, jsx_runtime_1.jsx)("input", { type: "hidden", id: `input-${id}`, value: value }), (0, react_2.createElement)("trix-editor", {
-                            id: id,
-                            input: `input-${id}`,
-                            // Autofocus attribute is case sensitive since this is standard HTML
-                            ...(autoFocus ? { autofocus: true } : {}),
-                            ...(placeholder ? { placeholder } : {}),
-                        })] }), (0, jsx_runtime_1.jsx)(react_1.Global, { styles: [tributeOverrides] })] }));
-    }
-    else {
-        return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.w100.if(!fullWidth).maxw("550px").$, children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.mh("120px").bgWhite.sm.gray900.bn.p1.br4.bcGray300.ba.$, dangerouslySetInnerHTML: { __html: dompurify_1.default.sanitize(value) || placeholder || "" }, "data-readonly": "true" })] }));
-    }
-}
-function attachTributeJs(mergeTags, editorElement) {
-    const values = mergeTags.map((value) => ({ value }));
-    const tribute = new tributejs_1.default({
-        trigger: "@",
-        lookup: "value",
-        /** Not using allowSpaces due to a bug: {@link https://github.com/zurb/tribute/issues/606}
-         * This will prevent lookups that include a space. However, it can still tag a name with spaces in it. Just the autocomplete menu will disappear once the user types a space. */
-        allowSpaces: false,
-        /** {@link https://github.com/zurb/tribute#hide-menu-when-no-match-is-returned} */
-        noMatchTemplate: () => `<span style:"visibility: hidden;"></span>`,
-        // According to the Tribute Types, `original.value` should always be present.
-        // However, we have received errors in DataDog for "Cannot read properties of undefined (reading 'original')", so we're adding some checks.
-        selectTemplate: (item) => item?.original?.value ? `<span style="color: ${Css_1.Palette.Blue700};">@${item.original.value}</span>` : "",
-        values,
-    });
-    // In dev mode, this fails because jsdom doesn't support contentEditable. Note that
-    // before create-react-app 4.x / a newer jsdom, the trix-initialize event wasn't
-    // even fired during unit tests anyway.
-    try {
-        tribute.attach(editorElement);
-    }
-    catch { }
-}
-const trixCssOverrides = {
-    ...Css_1.Css.relative.add({ wordBreak: "break-word" }).br4.bcGray300.ba.$,
-    // Put the toolbar on the bottom
-    ...Css_1.Css.df.fdcr.gap1.$,
-    // Some basic copy/paste from TextFieldBase
-    "& trix-editor": Css_1.Css.bgWhite.sm.gray900.bn.p1.$,
-    // Highlight on focus
-    "&:focus-within": Css_1.Css.bcBlue700.$,
-    "& trix-toolbar": Css_1.Css.m1.$,
-    // Make the buttons closer to ours
-    "& .trix-button:not(:first-of-type)": Css_1.Css.bn.$,
-    "& .trix-button-group": Css_1.Css.bn.m0.$,
-    "& .trix-button": Css_1.Css.bgWhite.sm.$,
-    // Height is hard-coded to 1.6 in trix, and the default width is wider than we want
-    "& .trix-button--icon": Css_1.Css.w("1.6em").p0.mxPx(4).bn.$,
-    // icons are hard-coded svg's, so this is a simpler way to get lighter gray for now
-    "& .trix-button--icon::before": Css_1.Css.add("opacity", "0.3").$,
-    // trix defaults to is active = blue bg - turn that off + make icon darker
-    "& .trix-button.trix-active": Css_1.Css.bgWhite.add("opacity", "0.7").$,
-    // We don't support file attachment yet, so hide that control for now.
-    "& .trix-button-group--file-tools": Css_1.Css.dn.$,
-    // Other things that are unused and we want to hide
-    "& .trix-button--icon-heading-1": Css_1.Css.dn.$,
-    "& .trix-button--icon-code": Css_1.Css.dn.$,
-    "& .trix-button--icon-quote": Css_1.Css.dn.$,
-    "& .trix-button--icon-increase-nesting-level": Css_1.Css.dn.$,
-    "& .trix-button--icon-decrease-nesting-level": Css_1.Css.dn.$,
-    "& .trix-button-group--history-tools": Css_1.Css.dn.$,
-};
-// Style the @ mention box
-const tributeOverrides = {
-    ".tribute-container": Css_1.Css.add({ minWidth: "300px" }).$,
-    ".tribute-container > ul": Css_1.Css.sm.bgWhite.ba.br4.bcBlue700.oh.$,
-};
-function extractIdsFromMentions(mergeTags, content) {
-    return mergeTags.filter((tag) => content.includes(`@${tag}`));
-}
-// Used for creating unique identified for each trix-editor instance
-let trixId = 1;

package/dist/inputs/RichTextField.mock.d.ts

@@ -1,4 +0,0 @@
-import { RichTextFieldProps } from "./RichTextField";
-/** Mocks out `RichTextField` as a text `<input>` field. */
-export declare function RichTextField(props: RichTextFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=RichTextField.mock.d.ts.map

package/dist/inputs/RichTextField.mock.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RichTextField.mock.d.ts","sourceRoot":"","sources":["../../src/inputs/RichTextField.mock.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,2DAA2D;AAC3D,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,oDAmBtD"}

package/dist/inputs/RichTextField.mock.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RichTextField = RichTextField;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const change_case_1 = require("change-case");
-const react_1 = require("react");
-const utils_1 = require("../utils");
-/** Mocks out `RichTextField` as a text `<input>` field. */
-function RichTextField(props) {
-    const { onBlur = () => { }, onFocus = () => { }, readOnly } = props;
-    const [value, setValue] = (0, react_1.useState)(props.value || "");
-    const tid = (0, utils_1.useTestIds)(props, defaultTestId(props.label || "richTextField"));
-    return ((0, jsx_runtime_1.jsx)("input", { type: "text", value: value, onChange: (e) => {
-            const { value } = e.target;
-            setValue(value);
-            props.onChange(value, value, props.mergeTags || []);
-        }, onBlur: onBlur, onFocus: onFocus, readOnly: readOnly, ...tid }));
-}
-function defaultTestId(label) {
-    return (0, change_case_1.camelCase)(label);
-}

package/dist/inputs/SelectField.d.ts

@@ -1,24 +0,0 @@
-import { Value } from "./";
-import { ComboBoxBaseProps } from "./internal/ComboBoxBase";
-import { HasIdIsh, HasNameIsh, Optional } from "../types";
-export interface SelectFieldProps<O, V extends Value> extends Omit<ComboBoxBaseProps<O, V>, "values" | "onSelect" | "multiselect"> {
-    /** The current value; it can be `undefined`, even if `V` cannot be. */
-    value: V | undefined;
-    /**
-     * Called when a value is selected, or `undefined` if `unsetLabel` is being used.
-     *
-     * Ideally callers that didn't pass `unsetLabel` would not have to handle the ` | undefined` here.
-     */
-    onSelect: (value: V | undefined, opt: O | undefined) => void;
-}
-/**
- * Provides a non-native select/dropdown widget.
- *
- * The `O` type is a list of options to show, the `V` is the primitive value of a
- * given `O` (i.e. it's id) that you want to use as the current/selected value.
- */
-export declare function SelectField<O extends HasIdIsh<V> & HasNameIsh, V extends Value>(props: Optional<SelectFieldProps<O, V>, "getOptionValue" | "getOptionLabel">): JSX.Element;
-export declare function SelectField<O extends HasIdIsh<V>, V extends Value>(props: Optional<SelectFieldProps<O, V>, "getOptionValue">): JSX.Element;
-export declare function SelectField<O extends HasNameIsh, V extends Value>(props: Optional<SelectFieldProps<O, V>, "getOptionLabel">): JSX.Element;
-export declare function SelectField<O, V extends Value>(props: SelectFieldProps<O, V>): JSX.Element;
-//# sourceMappingURL=SelectField.d.ts.map

package/dist/inputs/SelectField.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectField.d.ts","sourceRoot":"","sources":["../../src/inputs/SelectField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,WAAmB;AACnC,OAAO,EAAgB,iBAAiB,EAAe,gCAAyC;AAChG,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,iBAAkB;AAG3D,MAAM,WAAW,gBAAgB,CAAC,CAAC,EAAE,CAAC,SAAS,KAAK,CAClD,SAAQ,IAAI,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,aAAa,CAAC;IAC5E,uEAAuE;IACvE,KAAK,EAAE,CAAC,GAAG,SAAS,CAAC;IACrB;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,EAAE,GAAG,EAAE,CAAC,GAAG,SAAS,KAAK,IAAI,CAAC;CAC9D;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,GAAG,UAAU,EAAE,CAAC,SAAS,KAAK,EAC7E,KAAK,EAAE,QAAQ,CAAC,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,GAAG,gBAAgB,CAAC,GAC3E,GAAG,CAAC,OAAO,CAAC;AACf,wBAAgB,WAAW,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,KAAK,EAChE,KAAK,EAAE,QAAQ,CAAC,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,CAAC,GACxD,GAAG,CAAC,OAAO,CAAC;AACf,wBAAgB,WAAW,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,KAAK,EAC/D,KAAK,EAAE,QAAQ,CAAC,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,CAAC,GACxD,GAAG,CAAC,OAAO,CAAC;AACf,wBAAgB,WAAW,CAAC,CAAC,EAAE,CAAC,SAAS,KAAK,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC"}

package/dist/inputs/SelectField.js

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectField = SelectField;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
-const ComboBoxBase_1 = require("./internal/ComboBoxBase");
-const options_1 = require("../utils/options");
-function SelectField(props) {
-    const { getOptionValue = options_1.defaultOptionValue, getOptionLabel = options_1.defaultOptionLabel, options, onSelect, value, ...otherProps } = props;
-    const values = (0, react_1.useMemo)(() => [value], [value]);
-    return ((0, jsx_runtime_1.jsx)(ComboBoxBase_1.ComboBoxBase, { ...otherProps, options: options, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, values: values, onSelect: (values, options) => {
-            // If the user used `unsetLabel`, then values will be `[undefined]` and options `[unsetOption]`
-            if (values.length > 0 && options.length > 0) {
-                const option = options[0];
-                onSelect(values[0], option === ComboBoxBase_1.unsetOption ? undefined : option);
-            }
-        } }));
-}

package/dist/inputs/Switch.d.ts

@@ -1,34 +0,0 @@
-import { ReactNode } from "react";
-export interface SwitchProps {
-    /** Whether the element should receive focus on render. */
-    autoFocus?: boolean;
-    /** Whether to render a compact version of Switch */
-    compact?: boolean;
-    /** Whether the field is disabled. If a ReactNode, it's treated as a "disabled reason" that's shown in a tooltip. */
-    disabled?: boolean | ReactNode;
-    /** Input label */
-    label: string;
-    /** Where to put the label. */
-    labelStyle?: "form" | "inline" | "filter" | "hidden" | "left" | "centered";
-    /** Whether to hide the label */
-    hideLabel?: boolean;
-    /** Handler when the interactive element state changes. */
-    onChange: (value: boolean) => void;
-    /** Whether the switch is selected */
-    selected: boolean;
-    /** Whether to include icons like the check mark */
-    withIcon?: boolean;
-    /** Adds tooltip for the switch */
-    tooltip?: ReactNode;
-}
-export declare function Switch(props: SwitchProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const switchHoverStyles: {
-    backgroundColor: import("csstype").Property.BackgroundColor | undefined;
-};
-export declare const switchFocusStyles: {
-    boxShadow: import("csstype").Property.BoxShadow | undefined;
-};
-export declare const switchSelectedHoverStyles: {
-    backgroundColor: import("csstype").Property.BackgroundColor | undefined;
-};
-//# sourceMappingURL=Switch.d.ts.map

package/dist/inputs/Switch.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/inputs/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AAS1C,MAAM,WAAW,WAAW;IAC1B,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oHAAoH;IACpH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC;IAC3E,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0DAA0D;IAC1D,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,qCAAqC;IACrC,QAAQ,EAAE,OAAO,CAAC;IAClB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,oDAqFxC;AAQD,eAAO,MAAM,iBAAiB;;CAAkB,CAAC;AACjD,eAAO,MAAM,iBAAiB;;CAAiB,CAAC;AAChD,eAAO,MAAM,yBAAyB;;CAAkB,CAAC"}

package/dist/inputs/Switch.js

@@ -1,77 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.switchSelectedHoverStyles = exports.switchFocusStyles = exports.switchHoverStyles = void 0;
-exports.Switch = Switch;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
-const react_aria_1 = require("react-aria");
-const components_1 = require("../components");
-const Label_1 = require("../components/Label");
-const PresentationContext_1 = require("../components/PresentationContext");
-const Css_1 = require("../Css");
-const Icon_1 = require("../components/Icon");
-const utils_1 = require("../utils");
-function Switch(props) {
-    const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
-    const { labelLeftFieldWidth = "50%" } = fieldProps ?? {};
-    const { selected: isSelected, disabled = false, onChange, withIcon, compact = false, label, labelStyle = "inline", hideLabel = false, ...otherProps } = props;
-    const isDisabled = !!disabled;
-    const ariaProps = { isSelected, isDisabled, ...otherProps };
-    const state = (0, utils_1.toToggleState)(isSelected, onChange);
-    const ref = (0, react_1.useRef)(null);
-    const { inputProps } = (0, react_aria_1.useSwitch)({ ...ariaProps, "aria-label": label }, state, ref);
-    const { isFocusVisible: isKeyboardFocus, focusProps } = (0, react_aria_1.useFocusRing)(otherProps);
-    const { hoverProps, isHovered } = (0, react_aria_1.useHover)(ariaProps);
-    const tooltip = (0, components_1.resolveTooltip)(disabled, props.tooltip);
-    const tid = (0, utils_1.useTestIds)(otherProps, label);
-    return ((0, jsx_runtime_1.jsxs)("label", { ...hoverProps, css: {
-            ...Css_1.Css.relative.cursorPointer.df.wmaxc.usn.$,
-            ...(labelStyle === "form" && Css_1.Css.fdc.$),
-            ...(labelStyle === "left" && Css_1.Css.w100.aic.jcsb.$),
-            ...(labelStyle === "inline" && Css_1.Css.gap2.aic.$),
-            ...(labelStyle === "filter" && Css_1.Css.jcsb.gap1.aic.wa.sm.$),
-            ...(labelStyle === "centered" && Css_1.Css.fdc.aic.$),
-            ...(isDisabled && Css_1.Css.cursorNotAllowed.gray400.$),
-        }, children: [labelStyle !== "inline" && labelStyle !== "hidden" && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, tooltip: tooltip, xss: Css_1.Css.if(labelStyle === "filter").gray900.$, inline: labelStyle === "left" || labelStyle === "filter" }) })), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.if(labelStyle === "left").w(labelLeftFieldWidth).$, children: (0, jsx_runtime_1.jsx)("div", { "aria-hidden": "true", css: {
-                        ...Css_1.Css.wPx(40).hPx(toggleHeight(compact)).bgGray200.br12.relative.transition.$,
-                        ...(isHovered && exports.switchHoverStyles),
-                        ...(isKeyboardFocus && exports.switchFocusStyles),
-                        ...(isDisabled && Css_1.Css.bgGray300.$),
-                        ...(isSelected && Css_1.Css.bgBlue700.$),
-                        ...(isSelected && isHovered && exports.switchSelectedHoverStyles),
-                    }, children: (0, jsx_runtime_1.jsx)("div", { css: {
-                            ...switchCircleDefaultStyles(compact),
-                            ...(isDisabled && Css_1.Css.bgGray100.$),
-                            ...(isSelected && switchCircleSelectedStyles(compact)),
-                        }, children: withIcon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: isSelected ? "check" : "x", color: isSelected ? Css_1.Palette.Blue700 : Css_1.Palette.Gray400 })) }) }) }), labelStyle === "inline" && ((0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, tooltip: tooltip, inline: true, xss: Css_1.Css.smMd.gray900.if(compact).add("lineHeight", "1").$ })), (0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", { ref: ref, ...inputProps, ...focusProps, ...tid }) })] }));
-}
-/** Styles */
-// Element sizes
-const toggleHeight = (isCompact) => (isCompact ? 16 : 24);
-const circleDiameter = (isCompact) => (isCompact ? 12 : 20);
-// Switcher/Toggle element styles
-exports.switchHoverStyles = Css_1.Css.bgGray400.$;
-exports.switchFocusStyles = Css_1.Css.bshFocus.$;
-exports.switchSelectedHoverStyles = Css_1.Css.bgBlue900.$;
-// Circle inside Switcher/Toggle element styles
-function switchCircleDefaultStyles(isCompact) {
-    return {
-        ...Css_1.Css.wPx(circleDiameter(isCompact))
-            .hPx(circleDiameter(isCompact))
-            .br100.bgWhite.bshBasic.absolute.leftPx(2)
-            .topPx(2).transition.df.aic.jcc.$,
-        svg: Css_1.Css.hPx(toggleHeight(isCompact) / 2).wPx(toggleHeight(isCompact) / 2).$,
-    };
-}
-/**
- * Affecting the `left` property due to transitions only working when there is
- * a previous value to work from.
- *
- * Calculation is as follows:
- * - `100%` is the toggle width
- * - `${circleDiameter(isCompact)}px` is the circle diameter
- * - `2px` is to keep 2px edge spacing.
- */
-function switchCircleSelectedStyles(isCompact) {
-    return Css_1.Css.left(`calc(100% - ${circleDiameter(isCompact)}px - 2px);`).$;
-}