@oneblink/apps-react 2.5.3-beta.5 → 2.6.0-beta.1

package/dist/form-elements/FormElementRadio.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementRadio.js","sourceRoot":"","sources":["../../src/form-elements/FormElementRadio.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Radio } from '@mui/material'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport useBooleanState from '../hooks/useBooleanState'\nimport { FormTypes } from '@oneblink/types'\nimport OptionButton from './OptionButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.RadioButtonElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  conditionallyShownOptions: FormTypes.ChoiceElementOption[] | undefined\n}\n\nfunction FormElementRadio({\n  id,\n  element,\n  value,\n  onChange,\n  conditionallyShownOptions,\n  validationMessage,\n  displayValidationMessage,\n}: Props) {\n  const [isDirty, setIsDirty] = useBooleanState(false)\n  const filteredOptions = useFormElementOptions({\n    element,\n    value,\n    onChange,\n    conditionallyShownOptions,\n  })\n\n  return (\n    <div className=\"cypress-radio-element\">\n      <FormElementLabelContainer\n        className=\"ob-radio\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <FormElementOptions options={element.options}>\n          {!element.buttons ? (\n            <div>\n              {filteredOptions.map((option) => (\n                <div className=\"control\" key={option.value}>\n                  <label\n                    className=\"radio ob-radio__input-label cypress-radio-label\"\n                    htmlFor={`${id}_${option.value}`}\n                  >\n                    <Radio\n                      color=\"primary\"\n                      className=\"ob-radio__input cypress-radio-control\"\n                      classes={{\n                        checked: 'ob-radio__input-checked',\n                      }}\n                      disableRipple\n                      value={option.value || ''}\n                      id={`${id}_${option.value}`}\n                      disabled={element.readOnly}\n                      checked={value === option.value}\n                      onChange={(e) => {\n                        setIsDirty()\n                        onChange(element, e.target.value)\n                      }}\n                    />\n                    {` ${option.label}`}\n                  </label>\n                </div>\n              ))}\n            </div>\n          ) : (\n            <div className=\"buttons ob-buttons ob-buttons-radio cypress-radio-button-group\">\n              {filteredOptions.map((option) => {\n                const isSelected = value === option.value\n                return (\n                  <div className=\"ob-button-radio-container\" key={option.value}>\n                    <OptionButton\n                      element={element}\n                      option={option}\n                      isSelected={isSelected}\n                      onClick={() => {\n                        setIsDirty()\n                        onChange(element, option.value)\n                      }}\n                      className={clsx(\n                        'button ob-button ob-button__input ob-radio__button cypress-radio-button-control',\n                        {\n                          'is-primary': isSelected,\n                          'is-light': !isSelected,\n                        },\n                      )}\n                    />\n                  </div>\n                )\n              })}\n            </div>\n          )}\n        </FormElementOptions>\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\nexport default React.memo(FormElementRadio)\n"]}
+{"version":3,"file":"FormElementRadio.js","sourceRoot":"","sources":["../../src/form-elements/FormElementRadio.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Radio } from '@mui/material'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport useBooleanState from '../hooks/useBooleanState'\nimport { FormTypes } from '@oneblink/types'\nimport OptionButton from './OptionButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport {\n  FormElementValueChangeHandler,\n  FormElementConditionallyShownElement,\n} from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.RadioButtonElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  conditionallyShownOptionsElement:\n    | FormElementConditionallyShownElement\n    | undefined\n}\n\nfunction FormElementRadio({\n  id,\n  element,\n  value,\n  onChange,\n  conditionallyShownOptionsElement,\n  validationMessage,\n  displayValidationMessage,\n}: Props) {\n  const [isDirty, setIsDirty] = useBooleanState(false)\n  const filteredOptions = useFormElementOptions({\n    element,\n    value,\n    onChange,\n    conditionallyShownOptionsElement,\n  })\n\n  return (\n    <div className=\"cypress-radio-element\">\n      <FormElementLabelContainer\n        className=\"ob-radio\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <FormElementOptions\n          options={element.options}\n          conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n        >\n          {!element.buttons ? (\n            <div>\n              {filteredOptions.map((option) => (\n                <div className=\"control\" key={option.value}>\n                  <label\n                    className=\"radio ob-radio__input-label cypress-radio-label\"\n                    htmlFor={`${id}_${option.value}`}\n                  >\n                    <Radio\n                      color=\"primary\"\n                      className=\"ob-radio__input cypress-radio-control\"\n                      classes={{\n                        checked: 'ob-radio__input-checked',\n                      }}\n                      disableRipple\n                      value={option.value || ''}\n                      id={`${id}_${option.value}`}\n                      disabled={element.readOnly}\n                      checked={value === option.value}\n                      onChange={(e) => {\n                        setIsDirty()\n                        onChange(element, e.target.value)\n                      }}\n                    />\n                    {` ${option.label}`}\n                  </label>\n                </div>\n              ))}\n            </div>\n          ) : (\n            <div className=\"buttons ob-buttons ob-buttons-radio cypress-radio-button-group\">\n              {filteredOptions.map((option) => {\n                const isSelected = value === option.value\n                return (\n                  <div className=\"ob-button-radio-container\" key={option.value}>\n                    <OptionButton\n                      element={element}\n                      option={option}\n                      isSelected={isSelected}\n                      onClick={() => {\n                        setIsDirty()\n                        onChange(element, option.value)\n                      }}\n                      className={clsx(\n                        'button ob-button ob-button__input ob-radio__button cypress-radio-button-control',\n                        {\n                          'is-primary': isSelected,\n                          'is-light': !isSelected,\n                        },\n                      )}\n                    />\n                  </div>\n                )\n              })}\n            </div>\n          )}\n        </FormElementOptions>\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\nexport default React.memo(FormElementRadio)\n"]}

package/dist/form-elements/FormElementSelect.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FormTypes } from '@oneblink/types';
-import { FormElementValueChangeHandler } from '../types/form';
+import { FormElementValueChangeHandler, FormElementConditionallyShownElement } from '../types/form';
 declare type Props = {
     id: string;
     element: FormTypes.SelectElement;
@@ -8,8 +8,8 @@ declare type Props = {
     onChange: FormElementValueChangeHandler<string | string[]>;
     displayValidationMessage: boolean;
     validationMessage: string | undefined;
-    conditionallyShownOptions: FormTypes.ChoiceElementOption[] | undefined;
+    conditionallyShownOptionsElement: FormElementConditionallyShownElement | undefined;
 };
-declare function FormElementSelect({ id, element, value, onChange, validationMessage, displayValidationMessage, conditionallyShownOptions, }: Props): JSX.Element;
+declare function FormElementSelect({ id, element, value, onChange, validationMessage, displayValidationMessage, conditionallyShownOptionsElement, }: Props): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementSelect>;
 export default _default;

package/dist/form-elements/FormElementSelect.js

@@ -5,13 +5,13 @@ import useFormElementOptions from '../hooks/useFormElementOptions';
 import LookupButton from '../components/renderer/LookupButton';
 import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
 import ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox';
-function FormElementSelect({ id, element, value, onChange, validationMessage, displayValidationMessage, conditionallyShownOptions, }) {
+function FormElementSelect({ id, element, value, onChange, validationMessage, displayValidationMessage, conditionallyShownOptionsElement, }) {
     const [isDirty, setIsDirty] = useBooleanState(false);
     const filteredOptions = useFormElementOptions({
         element,
         value,
         onChange,
-        conditionallyShownOptions,
+        conditionallyShownOptionsElement,
     });
     const selectedValuesAsArray = React.useMemo(() => {
         if (Array.isArray(value))
@@ -22,7 +22,7 @@ function FormElementSelect({ id, element, value, onChange, validationMessage, di
     }, [value]);
     return (React.createElement("div", { className: "cypress-select-element" },
         React.createElement(FormElementLabelContainer, { className: "ob-select", id: id, element: element, required: element.required },
-            React.createElement(FormElementOptions, { options: element.options },
+            React.createElement(FormElementOptions, { options: element.options, conditionallyShownOptionsElement: conditionallyShownOptionsElement },
                 element.multi && element.canToggleAll && (React.createElement(ToggleAllCheckbox, { id: id, element: element, options: filteredOptions, selected: selectedValuesAsArray, disabled: element.readOnly, onChange: onChange })),
                 !element.multi ? (React.createElement("div", { className: "field has-addons" },
                     React.createElement("div", { className: "control is-expanded" },

package/dist/form-elements/FormElementSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementSelect.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\n\nimport useBooleanState from '../hooks/useBooleanState'\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox'\nimport { FormElementValueChangeHandler } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.SelectElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string | string[]>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  conditionallyShownOptions: FormTypes.ChoiceElementOption[] | undefined\n}\n\nfunction FormElementSelect({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  conditionallyShownOptions,\n}: Props) {\n  const [isDirty, setIsDirty] = useBooleanState(false)\n\n  const filteredOptions = useFormElementOptions({\n    element,\n    value,\n    onChange,\n    conditionallyShownOptions,\n  })\n\n  const selectedValuesAsArray = React.useMemo(() => {\n    if (Array.isArray(value)) return value\n    if (typeof value === 'string') return [value]\n    return []\n  }, [value])\n\n  return (\n    <div className=\"cypress-select-element\">\n      <FormElementLabelContainer\n        className=\"ob-select\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <FormElementOptions options={element.options}>\n          {element.multi && element.canToggleAll && (\n            <ToggleAllCheckbox\n              id={id}\n              element={element}\n              options={filteredOptions}\n              selected={selectedValuesAsArray}\n              disabled={element.readOnly}\n              onChange={onChange as FormElementValueChangeHandler<string[]>}\n            />\n          )}\n          {!element.multi ? (\n            <div className=\"field has-addons\">\n              <div className=\"control is-expanded\">\n                <div className=\"select is-fullwidth\">\n                  <select\n                    id={id}\n                    name={element.name}\n                    className=\"cypress-select-single-control ob-input ob-select__single\"\n                    value={typeof value === 'string' ? value : ''}\n                    onChange={(e) =>\n                      onChange(element, e.target.value || undefined)\n                    }\n                    required={element.required}\n                    disabled={element.readOnly}\n                    onBlur={setIsDirty}\n                  >\n                    <option value=\"\">Please choose</option>\n                    {filteredOptions.map(({ label, value }) => (\n                      <option key={value} value={value}>\n                        {label}\n                      </option>\n                    ))}\n                  </select>\n                </div>\n              </div>\n            </div>\n          ) : (\n            <div className=\"select is-multiple control\">\n              <select\n                multiple\n                id={id}\n                name={element.name}\n                className=\"cypress-select-multiple-control ob-input ob-select__multi\"\n                value={Array.isArray(value) ? value : []}\n                onChange={(e) => {\n                  const vals = []\n                  for (let i = 0; i < e.target.selectedOptions.length; i++) {\n                    vals.push(e.target.selectedOptions[i].value)\n                  }\n                  onChange(element, vals.length ? vals : undefined)\n                }}\n                required={element.required}\n                disabled={element.readOnly}\n                onBlur={setIsDirty}\n              >\n                {filteredOptions.map(({ label, value }) => (\n                  <option key={value} value={value}>\n                    {label}\n                  </option>\n                ))}\n              </select>\n\n              <LookupButton\n                hasMarginTop\n                value={value}\n                validationMessage={validationMessage}\n              />\n            </div>\n          )}\n\n          {(isDirty || displayValidationMessage) && !!validationMessage && (\n            <div role=\"alert\" className=\"has-margin-top-8\">\n              <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n                {validationMessage}\n              </div>\n            </div>\n          )}\n        </FormElementOptions>\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementSelect)\n"]}
+{"version":3,"file":"FormElementSelect.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\n\nimport useBooleanState from '../hooks/useBooleanState'\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox'\nimport {\n  FormElementValueChangeHandler,\n  FormElementConditionallyShownElement,\n} from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.SelectElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string | string[]>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  conditionallyShownOptionsElement:\n    | FormElementConditionallyShownElement\n    | undefined\n}\n\nfunction FormElementSelect({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  conditionallyShownOptionsElement,\n}: Props) {\n  const [isDirty, setIsDirty] = useBooleanState(false)\n\n  const filteredOptions = useFormElementOptions({\n    element,\n    value,\n    onChange,\n    conditionallyShownOptionsElement,\n  })\n\n  const selectedValuesAsArray = React.useMemo(() => {\n    if (Array.isArray(value)) return value\n    if (typeof value === 'string') return [value]\n    return []\n  }, [value])\n\n  return (\n    <div className=\"cypress-select-element\">\n      <FormElementLabelContainer\n        className=\"ob-select\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <FormElementOptions\n          options={element.options}\n          conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n        >\n          {element.multi && element.canToggleAll && (\n            <ToggleAllCheckbox\n              id={id}\n              element={element}\n              options={filteredOptions}\n              selected={selectedValuesAsArray}\n              disabled={element.readOnly}\n              onChange={onChange as FormElementValueChangeHandler<string[]>}\n            />\n          )}\n          {!element.multi ? (\n            <div className=\"field has-addons\">\n              <div className=\"control is-expanded\">\n                <div className=\"select is-fullwidth\">\n                  <select\n                    id={id}\n                    name={element.name}\n                    className=\"cypress-select-single-control ob-input ob-select__single\"\n                    value={typeof value === 'string' ? value : ''}\n                    onChange={(e) =>\n                      onChange(element, e.target.value || undefined)\n                    }\n                    required={element.required}\n                    disabled={element.readOnly}\n                    onBlur={setIsDirty}\n                  >\n                    <option value=\"\">Please choose</option>\n                    {filteredOptions.map(({ label, value }) => (\n                      <option key={value} value={value}>\n                        {label}\n                      </option>\n                    ))}\n                  </select>\n                </div>\n              </div>\n            </div>\n          ) : (\n            <div className=\"select is-multiple control\">\n              <select\n                multiple\n                id={id}\n                name={element.name}\n                className=\"cypress-select-multiple-control ob-input ob-select__multi\"\n                value={Array.isArray(value) ? value : []}\n                onChange={(e) => {\n                  const vals = []\n                  for (let i = 0; i < e.target.selectedOptions.length; i++) {\n                    vals.push(e.target.selectedOptions[i].value)\n                  }\n                  onChange(element, vals.length ? vals : undefined)\n                }}\n                required={element.required}\n                disabled={element.readOnly}\n                onBlur={setIsDirty}\n              >\n                {filteredOptions.map(({ label, value }) => (\n                  <option key={value} value={value}>\n                    {label}\n                  </option>\n                ))}\n              </select>\n\n              <LookupButton\n                hasMarginTop\n                value={value}\n                validationMessage={validationMessage}\n              />\n            </div>\n          )}\n\n          {(isDirty || displayValidationMessage) && !!validationMessage && (\n            <div role=\"alert\" className=\"has-margin-top-8\">\n              <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n                {validationMessage}\n              </div>\n            </div>\n          )}\n        </FormElementOptions>\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementSelect)\n"]}

package/dist/hooks/useFormElementOptions.d.ts

@@ -1,9 +1,9 @@
 import { FormTypes } from '@oneblink/types';
-import { FormElementValueChangeHandler } from '../types/form';
-export default function useFormElementOptions<T>({ element, value, onChange, conditionallyShownOptions, onFilter, }: {
+import { FormElementValueChangeHandler, FormElementConditionallyShownElement } from '../types/form';
+export default function useFormElementOptions<T>({ element, value, onChange, conditionallyShownOptionsElement, onFilter, }: {
     element: FormTypes.FormElementWithOptions;
     value: unknown | undefined;
     onChange: FormElementValueChangeHandler<T>;
-    conditionallyShownOptions: FormTypes.ChoiceElementOption[] | undefined;
+    conditionallyShownOptionsElement: FormElementConditionallyShownElement | undefined;
     onFilter?: (choiceElementOption: FormTypes.ChoiceElementOption) => boolean;
 }): FormTypes.ChoiceElementOption[];

package/dist/hooks/useFormElementOptions.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export default function useFormElementOptions({ element, value, onChange, conditionallyShownOptions, onFilter, }) {
+export default function useFormElementOptions({ element, value, onChange, conditionallyShownOptionsElement, onFilter, }) {
+    const conditionallyShownOptions = conditionallyShownOptionsElement === null || conditionallyShownOptionsElement === void 0 ? void 0 : conditionallyShownOptionsElement.options;
     //options that are shown due to conditional logic
     const shownOptions = React.useMemo(() => {
         if (!element.options) {
@@ -16,7 +17,8 @@ export default function useFormElementOptions({ element, value, onChange, condit
     //options that are shown based on conditional logic and user input
     const filteredOptions = React.useMemo(() => shownOptions.filter((option) => !onFilter || onFilter(option)), [shownOptions, onFilter]);
     React.useEffect(() => {
-        if (!element.options) {
+        if (!element.options ||
+            (conditionallyShownOptionsElement === null || conditionallyShownOptionsElement === void 0 ? void 0 : conditionallyShownOptionsElement.dependencyIsLoading)) {
             return;
         }
         if (typeof value === 'string' &&
@@ -32,7 +34,13 @@ export default function useFormElementOptions({ element, value, onChange, condit
                 onChange(element, newValueArray);
             }
         }
-    }, [element, shownOptions, onChange, value]);
+    }, [
+        element,
+        shownOptions,
+        onChange,
+        value,
+        conditionallyShownOptionsElement === null || conditionallyShownOptionsElement === void 0 ? void 0 : conditionallyShownOptionsElement.dependencyIsLoading,
+    ]);
     return filteredOptions;
 }
 //# sourceMappingURL=useFormElementOptions.js.map

package/dist/hooks/useFormElementOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormElementOptions.js","sourceRoot":"","sources":["../../src/hooks/useFormElementOptions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAI,EAC/C,OAAO,EACP,KAAK,EACL,QAAQ,EACR,yBAAyB,EACzB,QAAQ,GAOT;IACC,iDAAiD;IACjD,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAkC,GAAG,EAAE;QACvE,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;YACpB,OAAO,EAAE,CAAA;SACV;QACD,IAAI,CAAC,yBAAyB,IAAI,CAAC,QAAQ,EAAE;YAC3C,OAAO,OAAO,CAAC,OAAO,CAAA;SACvB;QACD,OAAO,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE;YACvC,OAAO,CACL,CAAC,yBAAyB;gBAC1B,yBAAyB,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,CAAC,CAC7D,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,yBAAyB,EAAE,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAA;IAE1D,kEAAkE;IAClE,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CACnC,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,CAAC,CAAC,EACpE,CAAC,YAAY,EAAE,QAAQ,CAAC,CACzB,CAAA;IAED,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;YACpB,OAAM;SACP;QAED,IACE,OAAO,KAAK,KAAK,QAAQ;YACzB,KAAK;YACL,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC,EACtD;YACA,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;YAC5B,OAAM;SACP;QAED,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACxB,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,aAAa,EAAE,EAAE,CAC9C,YAAY,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,aAAa,KAAK,MAAM,CAAC,KAAK,CAAC,CAC9D,CAAA;YACD,IAAI,QAAQ,CAAC,MAAM,KAAK,KAAK,CAAC,MAAM,EAAE;gBACpC,MAAM,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAA;gBAC5D,QAAQ,CAAC,OAAO,EAAE,aAA8B,CAAC,CAAA;aAClD;SACF;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAA;IAE5C,OAAO,eAAe,CAAA;AACxB,CAAC","sourcesContent":["import { FormTypes } from '@oneblink/types'\nimport * as React from 'react'\nimport { FormElementValueChangeHandler } from '../types/form'\n\nexport default function useFormElementOptions<T>({\n  element,\n  value,\n  onChange,\n  conditionallyShownOptions,\n  onFilter,\n}: {\n  element: FormTypes.FormElementWithOptions\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<T>\n  conditionallyShownOptions: FormTypes.ChoiceElementOption[] | undefined\n  onFilter?: (choiceElementOption: FormTypes.ChoiceElementOption) => boolean\n}) {\n  //options that are shown due to conditional logic\n  const shownOptions = React.useMemo<FormTypes.ChoiceElementOption[]>(() => {\n    if (!element.options) {\n      return []\n    }\n    if (!conditionallyShownOptions && !onFilter) {\n      return element.options\n    }\n    return element.options.filter((option) => {\n      return (\n        !conditionallyShownOptions ||\n        conditionallyShownOptions.some(({ id }) => id === option.id)\n      )\n    })\n  }, [conditionallyShownOptions, element.options, onFilter])\n\n  //options that are shown based on conditional logic and user input\n  const filteredOptions = React.useMemo<FormTypes.ChoiceElementOption[]>(\n    () => shownOptions.filter((option) => !onFilter || onFilter(option)),\n    [shownOptions, onFilter],\n  )\n\n  React.useEffect(() => {\n    if (!element.options) {\n      return\n    }\n\n    if (\n      typeof value === 'string' &&\n      value &&\n      !shownOptions.some((option) => value === option.value)\n    ) {\n      onChange(element, undefined)\n      return\n    }\n\n    if (Array.isArray(value)) {\n      const newValue = value.filter((selectedValue) =>\n        shownOptions.some((option) => selectedValue === option.value),\n      )\n      if (newValue.length !== value.length) {\n        const newValueArray = newValue.length ? newValue : undefined\n        onChange(element, newValueArray as T | undefined)\n      }\n    }\n  }, [element, shownOptions, onChange, value])\n\n  return filteredOptions\n}\n"]}
+{"version":3,"file":"useFormElementOptions.js","sourceRoot":"","sources":["../../src/hooks/useFormElementOptions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAI,EAC/C,OAAO,EACP,KAAK,EACL,QAAQ,EACR,gCAAgC,EAChC,QAAQ,GAST;IACC,MAAM,yBAAyB,GAAG,gCAAgC,aAAhC,gCAAgC,uBAAhC,gCAAgC,CAAE,OAAO,CAAA;IAC3E,iDAAiD;IACjD,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAkC,GAAG,EAAE;QACvE,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;YACpB,OAAO,EAAE,CAAA;SACV;QACD,IAAI,CAAC,yBAAyB,IAAI,CAAC,QAAQ,EAAE;YAC3C,OAAO,OAAO,CAAC,OAAO,CAAA;SACvB;QACD,OAAO,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE;YACvC,OAAO,CACL,CAAC,yBAAyB;gBAC1B,yBAAyB,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,CAAC,CAC7D,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,yBAAyB,EAAE,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAA;IAE1D,kEAAkE;IAClE,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CACnC,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,CAAC,CAAC,EACpE,CAAC,YAAY,EAAE,QAAQ,CAAC,CACzB,CAAA;IAED,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IACE,CAAC,OAAO,CAAC,OAAO;aAChB,gCAAgC,aAAhC,gCAAgC,uBAAhC,gCAAgC,CAAE,mBAAmB,CAAA,EACrD;YACA,OAAM;SACP;QAED,IACE,OAAO,KAAK,KAAK,QAAQ;YACzB,KAAK;YACL,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC,EACtD;YACA,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;YAC5B,OAAM;SACP;QAED,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACxB,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,aAAa,EAAE,EAAE,CAC9C,YAAY,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,aAAa,KAAK,MAAM,CAAC,KAAK,CAAC,CAC9D,CAAA;YACD,IAAI,QAAQ,CAAC,MAAM,KAAK,KAAK,CAAC,MAAM,EAAE;gBACpC,MAAM,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAA;gBAC5D,QAAQ,CAAC,OAAO,EAAE,aAA8B,CAAC,CAAA;aAClD;SACF;IACH,CAAC,EAAE;QACD,OAAO;QACP,YAAY;QACZ,QAAQ;QACR,KAAK;QACL,gCAAgC,aAAhC,gCAAgC,uBAAhC,gCAAgC,CAAE,mBAAmB;KACtD,CAAC,CAAA;IAEF,OAAO,eAAe,CAAA;AACxB,CAAC","sourcesContent":["import { FormTypes } from '@oneblink/types'\nimport * as React from 'react'\nimport {\n  FormElementValueChangeHandler,\n  FormElementConditionallyShownElement,\n} from '../types/form'\n\nexport default function useFormElementOptions<T>({\n  element,\n  value,\n  onChange,\n  conditionallyShownOptionsElement,\n  onFilter,\n}: {\n  element: FormTypes.FormElementWithOptions\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<T>\n  conditionallyShownOptionsElement:\n    | FormElementConditionallyShownElement\n    | undefined\n  onFilter?: (choiceElementOption: FormTypes.ChoiceElementOption) => boolean\n}) {\n  const conditionallyShownOptions = conditionallyShownOptionsElement?.options\n  //options that are shown due to conditional logic\n  const shownOptions = React.useMemo<FormTypes.ChoiceElementOption[]>(() => {\n    if (!element.options) {\n      return []\n    }\n    if (!conditionallyShownOptions && !onFilter) {\n      return element.options\n    }\n    return element.options.filter((option) => {\n      return (\n        !conditionallyShownOptions ||\n        conditionallyShownOptions.some(({ id }) => id === option.id)\n      )\n    })\n  }, [conditionallyShownOptions, element.options, onFilter])\n\n  //options that are shown based on conditional logic and user input\n  const filteredOptions = React.useMemo<FormTypes.ChoiceElementOption[]>(\n    () => shownOptions.filter((option) => !onFilter || onFilter(option)),\n    [shownOptions, onFilter],\n  )\n\n  React.useEffect(() => {\n    if (\n      !element.options ||\n      conditionallyShownOptionsElement?.dependencyIsLoading\n    ) {\n      return\n    }\n\n    if (\n      typeof value === 'string' &&\n      value &&\n      !shownOptions.some((option) => value === option.value)\n    ) {\n      onChange(element, undefined)\n      return\n    }\n\n    if (Array.isArray(value)) {\n      const newValue = value.filter((selectedValue) =>\n        shownOptions.some((option) => selectedValue === option.value),\n      )\n      if (newValue.length !== value.length) {\n        const newValueArray = newValue.length ? newValue : undefined\n        onChange(element, newValueArray as T | undefined)\n      }\n    }\n  }, [\n    element,\n    shownOptions,\n    onChange,\n    value,\n    conditionallyShownOptionsElement?.dependencyIsLoading,\n  ])\n\n  return filteredOptions\n}\n"]}

package/dist/index.d.ts

@@ -21,3 +21,4 @@ export { default as MuiV4CompatibleDatePicker } from './components/pickers/V4Com
 export { default as MuiV4CompatibleDateTimePicker } from './components/pickers/V4CompatibleDateTimePicker';
 export { default as MuiV4CompatibleTimePicker } from './components/pickers/V4CompatibleTimePicker';
 export { default as ProgressBar } from './components/renderer/ProgressBar';
+export { default as PaymentReceipt } from './PaymentReceipt';

package/dist/index.js

@@ -21,4 +21,5 @@ export { default as MuiV4CompatibleDatePicker } from './components/pickers/V4Com
 export { default as MuiV4CompatibleDateTimePicker } from './components/pickers/V4CompatibleDateTimePicker';
 export { default as MuiV4CompatibleTimePicker } from './components/pickers/V4CompatibleTimePicker';
 export { default as ProgressBar } from './components/renderer/ProgressBar';
+export { default as PaymentReceipt } from './PaymentReceipt';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,wBAAwB,IAAI,YAAY,EACxC,sBAAsB,GACvB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,kDAAkD,CAAA;AAC5F,OAAO,EAAE,OAAO,IAAI,mCAAmC,EAAE,MAAM,4DAA4D,CAAA;AAC3H,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,uDAAuD,CAAA;AACjH,OAAO,EAAE,OAAO,IAAI,+BAA+B,EAAE,MAAM,wDAAwD,CAAA;AACnH,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,uDAAuD,CAAA;AACjH,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,+CAA+C,CAAA;AAEjG,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,yBAAyB,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAClF,OAAO,EACL,OAAO,IAAI,YAAY,EACvB,wBAAwB,GACzB,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAA;AACzE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAClF,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,wCAAwC,CAAA;AAElG,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,6CAA6C,CAAA;AAClG,OAAO,EAAE,OAAO,IAAI,6BAA6B,EAAE,MAAM,iDAAiD,CAAA;AAC1G,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,6CAA6C,CAAA;AAClG,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mCAAmC,CAAA","sourcesContent":["export {\n  OneBlinkFormUncontrolled as OneBlinkForm,\n  OneBlinkFormControlled,\n} from './OneBlinkForm'\nexport { default as OneBlinkAutoSaveForm } from './OneBlinkAutoSaveForm'\nexport { default as OneBlinkReadOnlyForm } from './OneBlinkReadOnlyForm'\nexport { OneBlinkFormStoreProvider } from './components/formStore/OneBlinkFormStoreProvider'\nexport { default as OneBlinkFormStoreClearFiltersButton } from './components/formStore/OneBlinkFormStoreClearFiltersButton'\nexport { default as OneBlinkFormStoreColumnsButton } from './components/formStore/OneBlinkFormStoreColumnsButton'\nexport { default as OneBlinkFormStoreDownloadButton } from './components/formStore/OneBlinkFormStoreDownloadButton'\nexport { default as OneBlinkFormStoreRefreshButton } from './components/formStore/OneBlinkFormStoreRefreshButton'\nexport { default as OneBlinkFormStoreTable } from './components/formStore/OneBlinkFormStoreTable'\n\nexport { default as useIsMounted } from './hooks/useIsMounted'\nexport { default as useBooleanState } from './hooks/useBooleanState'\nexport { default as useNullableState } from './hooks/useNullableState'\nexport { default as useClickOutsideElement } from './hooks/useClickOutsideElement'\nexport {\n  default as useIsOffline,\n  IsOfflineContextProvider,\n} from './hooks/useIsOffline'\nexport { default as useLogin } from './hooks/useLogin'\nexport { default as useAuth, AuthContextProvider } from './hooks/useAuth'\nexport { default as useLoadDataState } from './hooks/useLoadDataState'\nexport { default as useFormSubmissionState } from './hooks/useFormSubmissionState'\nexport { default as useFormSubmissionAutoSaveState } from './hooks/useFormSubmissionAutoSaveState'\n\nexport { default as MuiV4CompatibleDatePicker } from './components/pickers/V4CompatibleDatePicker'\nexport { default as MuiV4CompatibleDateTimePicker } from './components/pickers/V4CompatibleDateTimePicker'\nexport { default as MuiV4CompatibleTimePicker } from './components/pickers/V4CompatibleTimePicker'\nexport { default as ProgressBar } from './components/renderer/ProgressBar'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,wBAAwB,IAAI,YAAY,EACxC,sBAAsB,GACvB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,kDAAkD,CAAA;AAC5F,OAAO,EAAE,OAAO,IAAI,mCAAmC,EAAE,MAAM,4DAA4D,CAAA;AAC3H,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,uDAAuD,CAAA;AACjH,OAAO,EAAE,OAAO,IAAI,+BAA+B,EAAE,MAAM,wDAAwD,CAAA;AACnH,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,uDAAuD,CAAA;AACjH,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,+CAA+C,CAAA;AAEjG,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,yBAAyB,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAClF,OAAO,EACL,OAAO,IAAI,YAAY,EACvB,wBAAwB,GACzB,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAA;AACzE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAClF,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,wCAAwC,CAAA;AAElG,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,6CAA6C,CAAA;AAClG,OAAO,EAAE,OAAO,IAAI,6BAA6B,EAAE,MAAM,iDAAiD,CAAA;AAC1G,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,6CAA6C,CAAA;AAClG,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mCAAmC,CAAA;AAC1E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAA","sourcesContent":["export {\n  OneBlinkFormUncontrolled as OneBlinkForm,\n  OneBlinkFormControlled,\n} from './OneBlinkForm'\nexport { default as OneBlinkAutoSaveForm } from './OneBlinkAutoSaveForm'\nexport { default as OneBlinkReadOnlyForm } from './OneBlinkReadOnlyForm'\nexport { OneBlinkFormStoreProvider } from './components/formStore/OneBlinkFormStoreProvider'\nexport { default as OneBlinkFormStoreClearFiltersButton } from './components/formStore/OneBlinkFormStoreClearFiltersButton'\nexport { default as OneBlinkFormStoreColumnsButton } from './components/formStore/OneBlinkFormStoreColumnsButton'\nexport { default as OneBlinkFormStoreDownloadButton } from './components/formStore/OneBlinkFormStoreDownloadButton'\nexport { default as OneBlinkFormStoreRefreshButton } from './components/formStore/OneBlinkFormStoreRefreshButton'\nexport { default as OneBlinkFormStoreTable } from './components/formStore/OneBlinkFormStoreTable'\n\nexport { default as useIsMounted } from './hooks/useIsMounted'\nexport { default as useBooleanState } from './hooks/useBooleanState'\nexport { default as useNullableState } from './hooks/useNullableState'\nexport { default as useClickOutsideElement } from './hooks/useClickOutsideElement'\nexport {\n  default as useIsOffline,\n  IsOfflineContextProvider,\n} from './hooks/useIsOffline'\nexport { default as useLogin } from './hooks/useLogin'\nexport { default as useAuth, AuthContextProvider } from './hooks/useAuth'\nexport { default as useLoadDataState } from './hooks/useLoadDataState'\nexport { default as useFormSubmissionState } from './hooks/useFormSubmissionState'\nexport { default as useFormSubmissionAutoSaveState } from './hooks/useFormSubmissionAutoSaveState'\n\nexport { default as MuiV4CompatibleDatePicker } from './components/pickers/V4CompatibleDatePicker'\nexport { default as MuiV4CompatibleDateTimePicker } from './components/pickers/V4CompatibleDateTimePicker'\nexport { default as MuiV4CompatibleTimePicker } from './components/pickers/V4CompatibleTimePicker'\nexport { default as ProgressBar } from './components/renderer/ProgressBar'\nexport { default as PaymentReceipt } from './PaymentReceipt'\n"]}

package/dist/styles/list.scss

@@ -0,0 +1,109 @@
+.ob-list {
+  width: 100%;
+
+  &.has-dividers {
+    .ob-list__item:not(:last-child) {
+      border-bottom: 1px solid $grey-lighter;
+    }
+  }
+
+  &.has-borders {
+    border: 1px solid $grey-lighter;
+  }
+
+  &.has-shadow {
+    background-color: $white;
+    box-shadow: $elevation-1;
+  }
+}
+
+.ob-list__item {
+  display: flex;
+  width: 100%;
+  padding: $size-8;
+
+  &.is-clickable {
+    cursor: pointer;
+
+    &:hover {
+      background-color: $white-bis;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+.ob-list__avatar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: $size-5;
+  min-height: $size-5;
+  padding-left: $size-8;
+  padding-right: $size-6;
+}
+
+.ob-list__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+}
+
+.ob-list__actions {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-left: $size-6;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.ob-list__text-primary {
+  color: $black;
+}
+
+.ob-list__text-tertiary,
+.ob-list__text-secondary {
+  font-size: 0.8rem;
+  color: $grey;
+}
+
+.ob-button.ob-list__button {
+  min-width: unset;
+}
+
+.ob-list__key {
+  padding-right: $size-6;
+  width: 120px;
+  color: $black;
+  word-break: break-word;
+}
+
+.ob-list__content-wrapper {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: row;
+}
+
+@media only screen and (max-width: $mobile) {
+  .ob-list__content-wrapper {
+    flex-direction: column;
+  }
+
+  .ob-list__key {
+    padding-right: 0;
+    width: 100%;
+  }
+
+  .section .ob-list {
+    margin-right: -$section-padding-mobile-x;
+    margin-left: -$section-padding-mobile-x;
+    width: calc(100% + #{$section-padding-mobile-x * 2});
+  }
+}

package/dist/styles/receipt.scss

@@ -0,0 +1,24 @@
+$lighterWarning: hsl(38, 100%, 50%);
+
+.ob-receipt {
+  max-width: 400px;
+  margin: auto;
+}
+
+.ob-receipt__button {
+  flex: 1;
+}
+
+.ob-payment-receipt__warning .ob-list__text-secondary {
+  color: $black;
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.ob-payment-receipt__warning .ob-list__content-wrapper {
+  padding: 1rem;
+}
+
+.ob-payment-receipt__warning {
+  background-color: $lighterWarning;
+}

package/dist/styles.css

@@ -9321,6 +9321,127 @@ textarea:disabled {
   width: 100%;
 }
 
+.ob-list {
+  width: 100%;
+}
+.ob-list.has-dividers .ob-list__item:not(:last-child) {
+  border-bottom: 1px solid hsl(0deg, 0%, 86%);
+}
+.ob-list.has-borders {
+  border: 1px solid hsl(0deg, 0%, 86%);
+}
+.ob-list.has-shadow {
+  background-color: hsl(0deg, 0%, 100%);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
+}
+
+.ob-list__item {
+  display: flex;
+  width: 100%;
+  padding: 0.5rem;
+}
+.ob-list__item.is-clickable {
+  cursor: pointer;
+}
+.ob-list__item.is-clickable:hover {
+  background-color: hsl(0deg, 0%, 98%);
+}
+.ob-list__item.is-clickable:focus {
+  outline: none;
+}
+
+.ob-list__avatar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
+  padding-left: 0.5rem;
+  padding-right: 1rem;
+}
+
+.ob-list__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+}
+
+.ob-list__actions {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-left: 1rem;
+}
+.ob-list__actions:focus {
+  outline: none;
+}
+
+.ob-list__text-primary {
+  color: hsl(0deg, 0%, 4%);
+}
+
+.ob-list__text-tertiary,
+.ob-list__text-secondary {
+  font-size: 0.8rem;
+  color: hsl(0deg, 0%, 48%);
+}
+
+.ob-button.ob-list__button {
+  min-width: unset;
+}
+
+.ob-list__key {
+  padding-right: 1rem;
+  width: 120px;
+  color: hsl(0deg, 0%, 4%);
+  word-break: break-word;
+}
+
+.ob-list__content-wrapper {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: row;
+}
+
+@media only screen and (max-width: 767px) {
+  .ob-list__content-wrapper {
+    flex-direction: column;
+  }
+  .ob-list__key {
+    padding-right: 0;
+    width: 100%;
+  }
+  .section .ob-list {
+    margin-right: -0.5rem;
+    margin-left: -0.5rem;
+    width: calc(100% + 1rem);
+  }
+}
+.ob-receipt {
+  max-width: 400px;
+  margin: auto;
+}
+
+.ob-receipt__button {
+  flex: 1;
+}
+
+.ob-payment-receipt__warning .ob-list__text-secondary {
+  color: hsl(0deg, 0%, 4%);
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.ob-payment-receipt__warning .ob-list__content-wrapper {
+  padding: 1rem;
+}
+
+.ob-payment-receipt__warning {
+  background-color: hsl(38deg, 100%, 50%);
+}
+
 .flatpickr-calendar {
   background: transparent;
   opacity: 0;