@homebound/beam 2.186.1 → 2.186.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/Css.d.ts +0 -55
  2. package/dist/Css.js +0 -16
  3. package/dist/components/Filters/FilterModal.js +1 -1
  4. package/dist/components/Filters/Filters.js +1 -1
  5. package/dist/components/LoadingSkeleton.js +1 -1
  6. package/dist/components/Modal/Modal.js +1 -1
  7. package/dist/components/Modal/TestModalContent.js +1 -1
  8. package/dist/components/SuperDrawer/ConfirmCloseModal.js +1 -1
  9. package/dist/components/SuperDrawer/SuperDrawer.js +1 -1
  10. package/dist/components/SuperDrawer/SuperDrawerContent.js +1 -1
  11. package/dist/components/Tabs.js +2 -2
  12. package/dist/forms/FormStateApp.js +1 -1
  13. package/dist/inputs/RichTextField.js +1 -1
  14. package/dist/inputs/SwitchGroup.js +1 -1
  15. package/dist/inputs/TextFieldBase.js +1 -1
  16. package/package.json +1 -1
package/dist/Css.d.ts CHANGED
@@ -2889,61 +2889,6 @@ declare class CssBuilder<T extends Properties1> {
2889
2889
  get transition(): CssBuilder<T & {
2890
2890
  transition: import("csstype").Property.Transition<string & {}> | undefined;
2891
2891
  }>;
2892
- get childGap0(): CssBuilder<T & {
2893
- marginBottom: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2894
- marginLeft: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2895
- marginTop: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2896
- }>;
2897
- get childGap1(): CssBuilder<T & {
2898
- marginBottom: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2899
- marginLeft: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2900
- marginTop: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2901
- }>;
2902
- get childGap2(): CssBuilder<T & {
2903
- marginBottom: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2904
- marginLeft: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2905
- marginTop: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2906
- }>;
2907
- get childGap3(): CssBuilder<T & {
2908
- marginBottom: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2909
- marginLeft: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2910
- marginTop: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2911
- }>;
2912
- get childGap4(): CssBuilder<T & {
2913
- marginBottom: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2914
- marginLeft: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2915
- marginTop: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2916
- }>;
2917
- get childGap5(): CssBuilder<T & {
2918
- marginBottom: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2919
- marginLeft: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2920
- marginTop: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2921
- }>;
2922
- get childGap6(): CssBuilder<T & {
2923
- marginBottom: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2924
- marginLeft: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2925
- marginTop: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2926
- }>;
2927
- get childGap7(): CssBuilder<T & {
2928
- marginBottom: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2929
- marginLeft: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2930
- marginTop: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2931
- }>;
2932
- get childGap8(): CssBuilder<T & {
2933
- marginBottom: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2934
- marginLeft: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2935
- marginTop: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2936
- }>;
2937
- childGap(inc: number | string): CssBuilder<T & {
2938
- marginBottom: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2939
- marginLeft: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2940
- marginTop: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2941
- }>;
2942
- childGapPx(px: number): CssBuilder<T & {
2943
- marginBottom: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2944
- marginLeft: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2945
- marginTop: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | undefined;
2946
- }>;
2947
2892
  get buttonBase(): CssBuilder<T & {
2948
2893
  fontWeight: import("csstype").Property.FontWeight | undefined;
2949
2894
  } & {
package/dist/Css.js CHANGED
@@ -857,22 +857,6 @@ class CssBuilder {
857
857
  fontFamily(value) { return this.add("fontFamily", value); }
858
858
  // animation
859
859
  get transition() { return this.add("transition", "background-color 200ms, border-color 200ms, box-shadow 200ms, left 200ms, right 200ms, margin 200ms"); }
860
- // childGap
861
- get childGap0() { return this.childGap(0); }
862
- get childGap1() { return this.childGap(1); }
863
- get childGap2() { return this.childGap(2); }
864
- get childGap3() { return this.childGap(3); }
865
- get childGap4() { return this.childGap(4); }
866
- get childGap5() { return this.childGap(5); }
867
- get childGap6() { return this.childGap(6); }
868
- get childGap7() { return this.childGap(7); }
869
- get childGap8() { return this.childGap(8); }
870
- childGap(inc) {
871
- const direction = this.opts.rules["flexDirection"];
872
- const p = direction === "column" ? "marginTop" : direction === "column-reverse" ? "marginBottom" : "marginLeft";
873
- return this.addIn("& > * + *", exports.Css.add(p, maybeInc(inc)).important.$);
874
- }
875
- childGapPx(px) { return this.childGap(`${px}px`); }
876
860
  // buttonBase
877
861
  get buttonBase() { return this.add("fontWeight", 500).add("fontSize", "14px").add("lineHeight", "20px").add("outline", 0).add("borderRadius", "4px").add("display", "inline-flex").add("alignItems", "center").add("whiteSpace", "nowrap").add("transition", "background-color 200ms, border-color 200ms, box-shadow 200ms, left 200ms, right 200ms, margin 200ms"); }
878
862
  // listReset
package/dist/components/Filters/FilterModal.js CHANGED
@@ -16,7 +16,7 @@ function FilterModal(props) {
16
16
  const [modalFilter, setModalFilter] = (0, react_1.useState)(filter);
17
17
  return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalHeader, { children: "More Filters" }, void 0), (0, jsx_runtime_1.jsx)(Modal_1.ModalBody, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.df.fdc.$ }, { children: (0, utils_1.safeEntries)(filters).map(([key, f]) => ((0, jsx_runtime_1.jsx)(ModalFilterItem, Object.assign({ label: f.hideLabelInModal ? undefined : f.label }, { children: f.render(modalFilter[key], (value) => setModalFilter((0, Filters_1.updateFilter)(modalFilter, key, value)), testId, true, false) }), key))) }), void 0) }, void 0), (0, jsx_runtime_1.jsxs)(Modal_1.ModalFooter, Object.assign({ xss: Css_1.Css.jcsb.$ }, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ label: "Clear", variant: "tertiary", disabled: (0, utils_1.safeKeys)(filters).filter((fk) => modalFilter[fk] !== undefined).length === 0, onClick: () =>
18
18
  // Only remove the filters keys that exist in the modal.
19
- setModalFilter((0, utils_1.safeKeys)(filters).reduce((acc, fk) => (0, utils_1.omitKey)(fk, acc), modalFilter)) }, testId.modalClear), void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.childGap1.$ }, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ label: "Cancel", variant: "tertiary", onClick: closeModal }, testId.modalClose), void 0), (0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ label: "Apply", onClick: () => {
19
+ setModalFilter((0, utils_1.safeKeys)(filters).reduce((acc, fk) => (0, utils_1.omitKey)(fk, acc), modalFilter)) }, testId.modalClear), void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.gap1.$ }, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ label: "Cancel", variant: "tertiary", onClick: closeModal }, testId.modalClose), void 0), (0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ label: "Apply", onClick: () => {
20
20
  onApply(modalFilter);
21
21
  closeModal();
22
22
  } }, testId.modalApply), void 0)] }), void 0)] }), void 0)] }, void 0));
package/dist/components/Filters/Filters.js CHANGED
@@ -32,7 +32,7 @@ function Filters(props) {
32
32
  const maybeGroupByField = groupBy ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SelectField_1.SelectField, { label: "Group by", compact: !vertical, inlineLabel: !vertical, sizeToContent: !vertical, options: groupBy.options, getOptionValue: (o) => o.id, getOptionLabel: (o) => o.name, value: groupBy.value, onSelect: (g) => g && groupBy.setValue(g) }, void 0) }, void 0)) : null;
33
33
  // Return list of filter components. `onSelect` should update the `filter`
34
34
  return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
35
- ...(vertical ? Css_1.Css.df.fdc.childGap2.$ : Css_1.Css.df.aic.childGap1.$),
35
+ ...(vertical ? Css_1.Css.df.fdc.gap2.$ : Css_1.Css.df.aic.gap1.$),
36
36
  } }, testId, { children: [maybeGroupByField, (0, utils_1.safeEntries)(pageFilters).map(([key, f]) => ((0, jsx_runtime_1.jsx)("div", { children: f.render(filter[key], (value) => onChange((0, Filters_1.updateFilter)(filter, key, value)), testId, false, vertical) }, key))), Object.keys(modalFilters).length > 0 && ((0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ label: "More Filters", endAdornment: numModalFilters > 0 && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.wPx(16).hPx(16).fs0.br100.bgLightBlue700.white.tinySb.df.aic.jcc.$ }, { children: numModalFilters }), void 0)), variant: "secondary", onClick: () => openModal({
37
37
  // Spreading `props` to pass along `data-testid`
38
38
  content: (0, jsx_runtime_1.jsx)(Filters_1.FilterModal, Object.assign({}, props, { filter: filter, onApply: onChange, filters: modalFilters }), void 0),
package/dist/components/LoadingSkeleton.js CHANGED
@@ -14,7 +14,7 @@ function LoadingSkeleton({ rows = 1, columns = 1, size = "md", randomizeWidths =
14
14
  .add("flexGrow", flexGrowForCell)
15
15
  .bgGray300.if(contrast).bgGray700.$ }, `row-${rowNumber}-cell-${i}`)));
16
16
  };
17
- return ((0, jsx_runtime_1.jsx)("div", Object.assign({ "aria-label": "Loading" }, { children: rowArray.map((_, i) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.df.childGap1.mb1.hPx(rowHeight).$ }, { children: rowCells(i) }), `row-${i}`))) }), void 0));
17
+ return ((0, jsx_runtime_1.jsx)("div", Object.assign({ "aria-label": "Loading" }, { children: rowArray.map((_, i) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.df.gap1.mb1.hPx(rowHeight).$ }, { children: rowCells(i) }), `row-${i}`))) }), void 0));
18
18
  }
19
19
  exports.LoadingSkeleton = LoadingSkeleton;
20
20
  /** Create the illusion of random widths by cycling through a list of widths that look nice in order */
package/dist/components/Modal/Modal.js CHANGED
@@ -90,7 +90,7 @@ exports.ModalBody = ModalBody;
90
90
  function ModalFooter({ children, xss, }) {
91
91
  const { modalFooterDiv } = (0, BeamContext_1.useBeamContext)();
92
92
  const testId = (0, utils_1.useTestIds)({}, testIdPrefix);
93
- return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...Css_1.Css.p3.df.aic.jcfe.childGap1.$, ...xss } }, testId.footer, { children: children }), void 0), modalFooterDiv);
93
+ return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...Css_1.Css.p3.df.aic.jcfe.gap1.$, ...xss } }, testId.footer, { children: children }), void 0), modalFooterDiv);
94
94
  }
95
95
  exports.ModalFooter = ModalFooter;
96
96
  const testIdPrefix = "modal";
package/dist/components/Modal/TestModalContent.js CHANGED
@@ -22,7 +22,7 @@ function TestModalContent(props) {
22
22
  const [leftActionDisabled, setLeftActionDisabled] = (0, react_1.useState)(false);
23
23
  const [date, setDate] = (0, react_1.useState)(formStateDomain_1.jan1);
24
24
  const [internalValue, setValue] = (0, react_1.useState)("");
25
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalHeader, { children: props.withTag ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Modal Title with Tag" }, void 0), (0, jsx_runtime_1.jsx)(Tag_1.Tag, { text: "In progress", type: "info", xss: Css_1.Css.ml1.$ }, void 0)] }), void 0)) : props.withTextArea ? ((0, jsx_runtime_1.jsx)(inputs_1.TextAreaField, { label: "Title", placeholder: "Test title", value: internalValue, onChange: (v) => setValue(v), preventNewLines: true, hideLabel: true, borderless: true, xss: Css_1.Css.xl.$ }, void 0)) : ("The title of the modal that might wrap") }, void 0), (0, jsx_runtime_1.jsxs)(Modal_1.ModalBody, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.gap1.fdc.aifs.$ }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.childGap1.$ }, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "More", onClick: () => setNumSentences(numSentences + 2) }, void 0), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Clear", onClick: () => setNumSentences(0) }, void 0), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Primary", onClick: () => setPrimaryDisabled(!primaryDisabled) }, void 0), showLeftAction && ((0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Left Action", onClick: () => setLeftActionDisabled(!leftActionDisabled) }, void 0))] }), void 0), (0, jsx_runtime_1.jsx)("p", { children: "The body content of the modal. This content can be anything!".repeat(numSentences) }, void 0)] }), void 0), withDateField && (0, jsx_runtime_1.jsx)(inputs_1.DateField, { value: date, label: "Date", onChange: setDate }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)(Modal_1.ModalFooter, Object.assign({ xss: showLeftAction ? Css_1.Css.jcsb.$ : undefined }, { children: [showLeftAction && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Clear", onClick: (0, addon_actions_1.action)("Clear Action"), variant: "tertiary", disabled: leftActionDisabled }, void 0) }, void 0)), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.childGap1.$ }, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Cancel", onClick: closeModal, variant: "tertiary" }, void 0), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Apply", onClick: (0, addon_actions_1.action)("Primary action"), disabled: primaryDisabled }, void 0)] }), void 0)] }), void 0)] }, void 0));
25
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalHeader, { children: props.withTag ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Modal Title with Tag" }, void 0), (0, jsx_runtime_1.jsx)(Tag_1.Tag, { text: "In progress", type: "info", xss: Css_1.Css.ml1.$ }, void 0)] }), void 0)) : props.withTextArea ? ((0, jsx_runtime_1.jsx)(inputs_1.TextAreaField, { label: "Title", placeholder: "Test title", value: internalValue, onChange: (v) => setValue(v), preventNewLines: true, hideLabel: true, borderless: true, xss: Css_1.Css.xl.$ }, void 0)) : ("The title of the modal that might wrap") }, void 0), (0, jsx_runtime_1.jsxs)(Modal_1.ModalBody, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.gap1.fdc.aifs.$ }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.gap1.$ }, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "More", onClick: () => setNumSentences(numSentences + 2) }, void 0), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Clear", onClick: () => setNumSentences(0) }, void 0), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Primary", onClick: () => setPrimaryDisabled(!primaryDisabled) }, void 0), showLeftAction && ((0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Left Action", onClick: () => setLeftActionDisabled(!leftActionDisabled) }, void 0))] }), void 0), (0, jsx_runtime_1.jsx)("p", { children: "The body content of the modal. This content can be anything!".repeat(numSentences) }, void 0)] }), void 0), withDateField && (0, jsx_runtime_1.jsx)(inputs_1.DateField, { value: date, label: "Date", onChange: setDate }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)(Modal_1.ModalFooter, Object.assign({ xss: showLeftAction ? Css_1.Css.jcsb.$ : undefined }, { children: [showLeftAction && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Clear", onClick: (0, addon_actions_1.action)("Clear Action"), variant: "tertiary", disabled: leftActionDisabled }, void 0) }, void 0)), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.gap1.$ }, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Cancel", onClick: closeModal, variant: "tertiary" }, void 0), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Apply", onClick: (0, addon_actions_1.action)("Primary action"), disabled: primaryDisabled }, void 0)] }), void 0)] }), void 0)] }, void 0));
26
26
  }
27
27
  exports.TestModalContent = TestModalContent;
28
28
  function TestModalFilterTable() {
package/dist/components/SuperDrawer/ConfirmCloseModal.js CHANGED
@@ -15,7 +15,7 @@ function ConfirmCloseModal(props) {
15
15
  // after a close and could/will cause other close attempts to fail.
16
16
  modalState.current = undefined;
17
17
  }
18
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.ModalHeader, { children: "Confirm" }, void 0), (0, jsx_runtime_1.jsx)(components_1.ModalBody, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.tc.wPx(400).$ }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ css: Css_1.Css.lgSb.gray900.mb2.$ }, { children: "Are you sure you want to cancel?" }), void 0), (0, jsx_runtime_1.jsx)("p", Object.assign({ css: Css_1.Css.base.gray700.$ }, { children: "Any data you've entered so far will be lost." }), void 0)] }), void 0) }, void 0), (0, jsx_runtime_1.jsx)(components_1.ModalFooter, Object.assign({ xss: Css_1.Css.jcc.$ }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.fdc.childGap1.aic.$ }, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, { label: continueText, onClick: closeModal }, void 0), (0, jsx_runtime_1.jsx)(components_1.Button, { variant: "tertiary", label: discardText, onClick: () => {
18
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.ModalHeader, { children: "Confirm" }, void 0), (0, jsx_runtime_1.jsx)(components_1.ModalBody, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.tc.wPx(400).$ }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ css: Css_1.Css.lgSb.gray900.mb2.$ }, { children: "Are you sure you want to cancel?" }), void 0), (0, jsx_runtime_1.jsx)("p", Object.assign({ css: Css_1.Css.base.gray700.$ }, { children: "Any data you've entered so far will be lost." }), void 0)] }), void 0) }, void 0), (0, jsx_runtime_1.jsx)(components_1.ModalFooter, Object.assign({ xss: Css_1.Css.jcc.$ }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.fdc.gap1.aic.$ }, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, { label: continueText, onClick: closeModal }, void 0), (0, jsx_runtime_1.jsx)(components_1.Button, { variant: "tertiary", label: discardText, onClick: () => {
19
19
  // The order of these calls doesn't really matter; close this modal and tell the call to do their close
20
20
  onClose();
21
21
  closeModal();
package/dist/components/SuperDrawer/SuperDrawer.js CHANGED
@@ -82,7 +82,7 @@ function SuperDrawer() {
82
82
  // Preventing clicks from triggering parent onClick
83
83
  onClick: (e) => e.stopPropagation() }, { children: (0, jsx_runtime_1.jsxs)(form_state_1.AutoSaveStatusProvider, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.df.p3.bb.bGray200.df.aic.jcsb.gap2.$ }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.xl2Sb.gray900.mr2.$ }, testId.title, { ref: drawerHeaderRef }, { children: !modalState.current && (title || null) }), void 0), !modalState.current && (titleLeftContent || null)] }), void 0), !modalState.current && (
84
84
  // Forcing height to 32px to match title height
85
- (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.childGap3.aic.hPx(32).fs0.$ }, { children: [titleRightContent || null, !hideControls && ((0, jsx_runtime_1.jsx)(components_1.ButtonGroup, Object.assign({ buttons: [
85
+ (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.gap3.aic.hPx(32).fs0.$ }, { children: [titleRightContent || null, !hideControls && ((0, jsx_runtime_1.jsx)(components_1.ButtonGroup, Object.assign({ buttons: [
86
86
  {
87
87
  icon: "chevronLeft",
88
88
  onClick: () => onPrevClick && onPrevClick(),
package/dist/components/SuperDrawer/SuperDrawerContent.js CHANGED
@@ -37,6 +37,6 @@ const SuperDrawerContent = ({ children, actions }) => {
37
37
  return (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { css: Css_1.Css.p3.fg1.$, style: { overflow: "auto" } }, "content");
38
38
  }
39
39
  }
40
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [wrapWithMotionAndMaybeBack(children), actions && ((0, jsx_runtime_1.jsx)("footer", Object.assign({ css: Css_1.Css.bt.bGray200.p3.df.aic.jcfe.$ }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.df.childGap1.$ }, { children: actions.map((buttonProps, i) => ((0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({}, buttonProps), i))) }), void 0) }), void 0))] }, void 0));
40
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [wrapWithMotionAndMaybeBack(children), actions && ((0, jsx_runtime_1.jsx)("footer", Object.assign({ css: Css_1.Css.bt.bGray200.p3.df.aic.jcfe.$ }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.df.gap1.$ }, { children: actions.map((buttonProps, i) => ((0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({}, buttonProps), i))) }), void 0) }), void 0))] }, void 0));
41
41
  };
42
42
  exports.SuperDrawerContent = SuperDrawerContent;
package/dist/components/Tabs.js CHANGED
@@ -79,10 +79,10 @@ function Tabs(props) {
79
79
  setActive(selected);
80
80
  }
81
81
  }
82
- return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: [!hideTabs(props) && ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, css: { ...Css_1.Css.dif.childGap1.$, ...(includeBottomBorder ? { ...Css_1.Css.bb.bGray200.$ } : {}) }, "aria-label": ariaLabel, role: "tablist" }, tid, { children: tabs.map((tab) => {
82
+ return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: { ...Css_1.Css.df.aic.$, ...(includeBottomBorder ? { ...Css_1.Css.bb.bGray200.$ } : {}) } }, { children: [!hideTabs(props) && ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, css: Css_1.Css.dif.gap1.asfe.$, "aria-label": ariaLabel, role: "tablist" }, tid, { children: tabs.map((tab) => {
83
83
  const uniqueValue = uniqueTabValue(tab);
84
84
  return ((0, jsx_runtime_1.jsx)(TabImpl, Object.assign({ active: active === uniqueValue, focusProps: focusProps, isFocusVisible: isFocusVisible, onClick: onClick, onKeyUp: onKeyUp, onBlur: onBlur, tab: tab }, tid[(0, defaultTestId_1.defaultTestId)(uniqueValue)]), uniqueValue));
85
- }) }), void 0)), right && (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.ml("auto").df.aic.gap1.$ }, { children: right }), void 0)] }), void 0));
85
+ }) }), void 0)), right && (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.ml("auto").df.aic.gap1.pb1.$ }, { children: right }), void 0)] }), void 0));
86
86
  }
87
87
  exports.Tabs = Tabs;
88
88
  function TabImpl(props) {
package/dist/forms/FormStateApp.js CHANGED
@@ -56,7 +56,7 @@ function FormStateApp() {
56
56
  { value: "a:4", label: "Iguana" },
57
57
  { value: "a:5", label: "Turtle" },
58
58
  ];
59
- return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.$ }, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.wPx(700).$ }, { children: [(0, jsx_runtime_1.jsxs)(FormLines_1.FormLines, Object.assign({ labelSuffix: { required: "*", optional: "(Opt)" } }, { children: [(0, jsx_runtime_1.jsx)("b", { children: "Author" }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.firstName }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.middleInitial }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.lastName }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundDateField, { field: formState.birthday }, void 0), (0, jsx_runtime_1.jsxs)(forms_1.FieldGroup, { children: [(0, jsx_runtime_1.jsx)(forms_1.StaticField, { label: "Revenue", value: "$500" }, void 0), (0, jsx_runtime_1.jsx)(forms_1.StaticField, Object.assign({ label: "Website" }, { children: (0, jsx_runtime_1.jsx)("a", Object.assign({ href: "https://google.com" }, { children: "google.com" }), void 0) }), void 0)] }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundNumberField, { field: formState.heightInInches }, void 0), (0, jsx_runtime_1.jsx)(forms_1.FormDivider, {}, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundSelectField, { field: formState.favoriteSport, options: sports }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundMultiSelectField, { field: formState.favoriteShapes, options: shapes }, void 0), (0, jsx_runtime_1.jsx)(BoundCheckboxGroupField_1.BoundCheckboxGroupField, { field: formState.favoriteColors, options: colors }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundToggleChipGroupField, { field: formState.animals, options: animals }, void 0), (0, jsx_runtime_1.jsx)(forms_1.FormDivider, {}, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundSwitchField, { field: formState.isAvailable }, void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("strong", { children: ["Books", (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "plus", onClick: () => formState.books.add({ id: String(formState.books.value.length) }) }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(components_1.GridTable, { columns: columns, rows: rows }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.childGap1.$ }, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, { onClick: () => formState.revertChanges(), label: "Cancel" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Button, { onClick: () => {
59
+ return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.$ }, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.wPx(700).$ }, { children: [(0, jsx_runtime_1.jsxs)(FormLines_1.FormLines, Object.assign({ labelSuffix: { required: "*", optional: "(Opt)" } }, { children: [(0, jsx_runtime_1.jsx)("b", { children: "Author" }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.firstName }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.middleInitial }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.lastName }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundDateField, { field: formState.birthday }, void 0), (0, jsx_runtime_1.jsxs)(forms_1.FieldGroup, { children: [(0, jsx_runtime_1.jsx)(forms_1.StaticField, { label: "Revenue", value: "$500" }, void 0), (0, jsx_runtime_1.jsx)(forms_1.StaticField, Object.assign({ label: "Website" }, { children: (0, jsx_runtime_1.jsx)("a", Object.assign({ href: "https://google.com" }, { children: "google.com" }), void 0) }), void 0)] }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundNumberField, { field: formState.heightInInches }, void 0), (0, jsx_runtime_1.jsx)(forms_1.FormDivider, {}, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundSelectField, { field: formState.favoriteSport, options: sports }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundMultiSelectField, { field: formState.favoriteShapes, options: shapes }, void 0), (0, jsx_runtime_1.jsx)(BoundCheckboxGroupField_1.BoundCheckboxGroupField, { field: formState.favoriteColors, options: colors }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundToggleChipGroupField, { field: formState.animals, options: animals }, void 0), (0, jsx_runtime_1.jsx)(forms_1.FormDivider, {}, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundSwitchField, { field: formState.isAvailable }, void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("strong", { children: ["Books", (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "plus", onClick: () => formState.books.add({ id: String(formState.books.value.length) }) }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(components_1.GridTable, { columns: columns, rows: rows }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.gap1.$ }, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, { onClick: () => formState.revertChanges(), label: "Cancel" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Button, { onClick: () => {
60
60
  if (formState.canSave()) {
61
61
  formState.commitChanges();
62
62
  }
package/dist/inputs/RichTextField.js CHANGED
@@ -134,7 +134,7 @@ function attachTributeJs(mergeTags, editorElement) {
134
134
  const trixCssOverrides = {
135
135
  ...Css_1.Css.relative.add({ wordBreak: "break-word" }).br4.bGray300.ba.$,
136
136
  // Put the toolbar on the bottom
137
- ...Css_1.Css.df.fdcr.childGap1.$,
137
+ ...Css_1.Css.df.fdcr.gap1.$,
138
138
  // Some basic copy/paste from TextFieldBase
139
139
  "& trix-editor": Css_1.Css.bgWhite.sm.gray900.bn.p1.$,
140
140
  // Highlight on focus
package/dist/inputs/SwitchGroup.js CHANGED
@@ -19,6 +19,6 @@ function SwitchGroup(props) {
19
19
  const groupState = (0, utils_1.toGroupState)(values, onChange);
20
20
  const { groupProps, labelProps } = (0, react_aria_1.useCheckboxGroup)({ ...props, "aria-label": label }, groupState);
21
21
  const { isSelected, addValue, removeValue } = groupState;
22
- return ((0, jsx_runtime_1.jsxs)("fieldset", Object.assign({}, groupProps, { children: [(0, jsx_runtime_1.jsx)("legend", Object.assign({}, labelProps, { css: Css_1.Css.sm.gray500.mb1.$ }, { children: label }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.df.fdc.childGap2.$ }, { children: options.map(({ label, value }) => ((0, jsx_runtime_1.jsx)(Switch_1.Switch, { compact: compact, label: label, onChange: (isSelected) => (isSelected ? addValue(value) : removeValue(value)), selected: isSelected(value), withIcon: withIcon }, value))) }), void 0)] }), void 0));
22
+ return ((0, jsx_runtime_1.jsxs)("fieldset", Object.assign({}, groupProps, { children: [(0, jsx_runtime_1.jsx)("legend", Object.assign({}, labelProps, { css: Css_1.Css.sm.gray500.mb1.$ }, { children: label }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.df.fdc.gap2.$ }, { children: options.map(({ label, value }) => ((0, jsx_runtime_1.jsx)(Switch_1.Switch, { compact: compact, label: label, onChange: (isSelected) => (isSelected ? addValue(value) : removeValue(value)), selected: isSelected(value), withIcon: withIcon }, value))) }), void 0)] }), void 0));
23
23
  }
24
24
  exports.SwitchGroup = SwitchGroup;
package/dist/inputs/TextFieldBase.js CHANGED
@@ -99,7 +99,7 @@ function TextFieldBase(props) {
99
99
  children: inputProps.readOnly ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
100
100
  // Use input wrapper to get common styles, but then we need to override some
101
101
  ...fieldStyles.inputWrapperReadOnly,
102
- ...(multiline ? Css_1.Css.fdc.aifs.childGap2.$ : Css_1.Css.truncate.$),
102
+ ...(multiline ? Css_1.Css.fdc.aifs.gap2.$ : Css_1.Css.truncate.$),
103
103
  ...xss,
104
104
  }, "data-readonly": "true" }, tid, { children: [!multiline && inlineLabel && label && !hideLabel && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, Object.assign({ labelProps: labelProps, label: label }, tid.label), void 0)), multiline
105
105
  ? (_g = inputProps.value) === null || _g === void 0 ? void 0 : _g.split("\n\n").map((p, i) => ((0, jsx_runtime_1.jsx)("p", Object.assign({ css: Css_1.Css.my1.$ }, { children: p.split("\n").map((sentence, j) => ((0, jsx_runtime_1.jsxs)("span", { children: [sentence, (0, jsx_runtime_1.jsx)("br", {}, void 0)] }, j))) }), i)))
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@homebound/beam",
3
- "version": "2.186.1",
3
+ "version": "2.186.3",
4
4
  "author": "Homebound",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",