@olaboot/esm-form-engine-lib 4.1.0

package/dist/components/sidebar/sidebar.scss

@@ -0,0 +1,114 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.pageLink {
+  border-left: 0.5rem solid colors.$teal-20;
+  display: flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  background-color: colors.$white;
+  margin: 0 0 0.063rem;
+
+  :hover {
+    cursor: pointer;
+  }
+}
+
+.pageLinkTablet {
+  height: layout.$spacing-09;
+}
+
+.pageLink button {
+  @include type.type-style('body-01');
+  font-family: inherit;
+  display: block;
+  background-color: inherit;
+  width: 100%;
+  border: none;
+  outline: none;
+  text-align: left;
+  min-height: 2rem;
+  white-space: normal;
+  word-wrap: break-word;
+  margin: 0 0 0.063rem;
+  color: colors.$gray-100;
+
+  :hover {
+    cursor: pointer;
+  }
+}
+
+.activePage {
+  border-left: 0.5rem solid colors.$teal-50;
+  background-color: #ededed;
+
+  button {
+    font-weight: 600;
+  }
+}
+
+.errorPage {
+  border-left: 0.5rem solid colors.$red-40;
+  background-color: colors.$red-10;
+
+  button {
+    color: colors.$red-60 !important;
+  }
+}
+
+.activeErrorPage {
+  @extend .errorPage;
+  background-color: colors.$red-30;
+  border-left: 0.5rem solid colors.$red-60;
+
+  button {
+    font-weight: 600;
+  }
+}
+
+.sidebar {
+  width: 11.25rem;
+  min-height: 8rem;
+  overscroll-behavior: contain;
+}
+
+.sideNavActions {
+  margin-left: 0.6rem;
+}
+
+@media all and (device-width: 600px) and (device-height: 1024px) and (orientation: portrait) {
+  .sidebar {
+    width: 11rem;
+    max-height: 500px;
+    margin-right: 20px;
+    position: fixed;
+  }
+}
+
+.divider {
+  border: 0;
+  border-top: 1px solid colors.$gray-40;
+  margin: 1rem 0.5rem;
+}
+
+.button {
+  width: 10rem;
+}
+
+.topMargin {
+  margin-top: 1.5rem;
+}
+
+.saveButton {
+  @extend .button;
+  margin-bottom: 0.625rem;
+
+  &:global(.cds--inline-loading) {
+    min-height: layout.$spacing-05;
+  }
+}
+
+.closeButton {
+  @extend .button;
+}

package/dist/components/sidebar/useCurrentActivePage.d.ts

@@ -0,0 +1,34 @@
+import { type FormPage } from '../../types';
+interface UseCurrentActivePageProps {
+    pages: FormPage[];
+    defaultPage: string;
+    activePages: string[];
+    evaluatedPagesVisibility: boolean;
+}
+interface UseCurrentActivePageResult {
+    currentActivePage: string | null;
+    requestPage: (pageId: string) => void;
+}
+/**
+ * Hook to manage the currently active page in a form sidebar.
+ *
+ * This implementation includes a locking mechanism to handle a specific limitation with Waypoint:
+ * When dealing with short forms where multiple pages are visible in the viewport simultaneously,
+ * Waypoint's initial visibility detection can be unpredictable. It might:
+ * 1. Report pages in a different order than their DOM position
+ * 2. Miss reporting some visible pages in the first few renders
+ * 3. Report visibility events before our desired initial scroll position is established
+ *
+ * The locking mechanism (isInitialPhaseRef) prevents these early Waypoint events from
+ * overriding our intended initial page selection. Without this lock:
+ * - The form might initially select the first page
+ * - But then immediately jump to a different page due to Waypoint's visibility events
+ * - This creates a jarring user experience where the form appears to "jump" during initialization
+ *
+ * The lock is released either:
+ * 1. Automatically after a timeout (allowing for initial render and scroll stabilization)
+ * 2. Immediately when the user explicitly interacts with the form
+ */
+export declare const useCurrentActivePage: ({ pages, defaultPage, activePages, evaluatedPagesVisibility, }: UseCurrentActivePageProps) => UseCurrentActivePageResult;
+export {};
+//# sourceMappingURL=useCurrentActivePage.d.ts.map

package/dist/components/sidebar/useCurrentActivePage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCurrentActivePage.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/useCurrentActivePage.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG5C,UAAU,yBAAyB;IACjC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,wBAAwB,EAAE,OAAO,CAAC;CACnC;AAED,UAAU,0BAA0B;IAClC,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,oBAAoB,GAAI,gEAKlC,yBAAyB,KAAG,0BA+F9B,CAAC"}

package/dist/components/sidebar/useCurrentActivePage.js

@@ -0,0 +1,114 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { scrollIntoView } from "../../utils/form-helper.js";
+/**
+ * Hook to manage the currently active page in a form sidebar.
+ *
+ * This implementation includes a locking mechanism to handle a specific limitation with Waypoint:
+ * When dealing with short forms where multiple pages are visible in the viewport simultaneously,
+ * Waypoint's initial visibility detection can be unpredictable. It might:
+ * 1. Report pages in a different order than their DOM position
+ * 2. Miss reporting some visible pages in the first few renders
+ * 3. Report visibility events before our desired initial scroll position is established
+ *
+ * The locking mechanism (isInitialPhaseRef) prevents these early Waypoint events from
+ * overriding our intended initial page selection. Without this lock:
+ * - The form might initially select the first page
+ * - But then immediately jump to a different page due to Waypoint's visibility events
+ * - This creates a jarring user experience where the form appears to "jump" during initialization
+ *
+ * The lock is released either:
+ * 1. Automatically after a timeout (allowing for initial render and scroll stabilization)
+ * 2. Immediately when the user explicitly interacts with the form
+ */ export const useCurrentActivePage = ({ pages, defaultPage, activePages, evaluatedPagesVisibility })=>{
+    const [currentActivePage, setCurrentActivePage] = useState(null);
+    const [isInitialized, setIsInitialized] = useState(false);
+    const [requestedPage, setRequestedPage] = useState(null);
+    const isInitialPhaseRef = useRef(true);
+    // Initialize the active page
+    useEffect(()=>{
+        if (isInitialized || !evaluatedPagesVisibility) return;
+        const initializePage = ()=>{
+            // Try to find and set the default page
+            const defaultPageObject = pages.find(({ label })=>label === defaultPage);
+            if (defaultPageObject && !defaultPageObject.isHidden) {
+                setCurrentActivePage(defaultPageObject.id);
+                scrollIntoView(defaultPageObject.id);
+            } else {
+                // Fall back to first visible page
+                const firstVisiblePage = pages.find((page)=>!page.isHidden);
+                if (firstVisiblePage) {
+                    setCurrentActivePage(firstVisiblePage.id);
+                }
+            }
+        };
+        initializePage();
+        setIsInitialized(true);
+    }, [
+        pages,
+        defaultPage,
+        evaluatedPagesVisibility,
+        isInitialized
+    ]);
+    useEffect(()=>{
+        let initialLockTimeout = null;
+        // Lock out Waypoint updates for 200ms to allow for:
+        // 1. Initial render completion
+        // 2. Scroll position establishment
+        // 3. Waypoint to complete its initial visibility detection
+        if (isInitialized) {
+            initialLockTimeout = setTimeout(()=>{
+                isInitialPhaseRef.current = false;
+            }, 200);
+        }
+        // Cleanup
+        return ()=>{
+            if (initialLockTimeout) {
+                clearTimeout(initialLockTimeout);
+            }
+        };
+    }, [
+        isInitialized
+    ]);
+    // Handle active pages updates from viewport visibility
+    useEffect(()=>{
+        if (isInitialPhaseRef.current) return;
+        let clearRequestTimeout = null;
+        // If there's a requested page and it's visible, keep it active
+        if (requestedPage && activePages.includes(requestedPage)) {
+            setCurrentActivePage(requestedPage);
+            clearRequestTimeout = setTimeout(()=>{
+                setRequestedPage(null);
+            }, 100);
+            return;
+        }
+        // If there's no requested page, use the topmost visible page
+        if (!requestedPage && activePages.length > 0) {
+            const topVisiblePage = activePages.reduce((top, current)=>{
+                const topIndex = pages.findIndex((page)=>page.id === top);
+                const currentIndex = pages.findIndex((page)=>page.id === current);
+                return topIndex < currentIndex ? top : current;
+            });
+            setCurrentActivePage(topVisiblePage);
+        }
+        return ()=>{
+            if (clearRequestTimeout) {
+                clearTimeout(clearRequestTimeout);
+            }
+        };
+    }, [
+        activePages,
+        requestedPage,
+        pages
+    ]);
+    // Handle page requests
+    const requestPage = useCallback((pageId)=>{
+        isInitialPhaseRef.current = false; // Release the lock on explicit user interaction
+        setRequestedPage(pageId);
+        setCurrentActivePage(pageId);
+        scrollIntoView(pageId);
+    }, []);
+    return {
+        currentActivePage,
+        requestPage
+    };
+};

package/dist/components/sidebar/useCurrentActivePage.test.js

@@ -0,0 +1,208 @@
+import { useCurrentActivePage } from "./useCurrentActivePage.js";
+import { scrollIntoView } from "../../utils/form-helper.js";
+import { renderHook } from "@testing-library/react";
+import { act } from "react";
+jest.mock('../../utils/form-helper', ()=>({
+        scrollIntoView: jest.fn()
+    }));
+describe('useCurrentActivePage', ()=>{
+    const mockPages = [
+        {
+            id: 'page-1',
+            label: 'Page 1',
+            isHidden: false
+        },
+        {
+            id: 'page-2',
+            label: 'Page 2',
+            isHidden: false
+        },
+        {
+            id: 'page-3',
+            label: 'Page 3',
+            isHidden: false
+        },
+        {
+            id: 'page-4',
+            label: 'Page 4',
+            isHidden: false
+        },
+        {
+            id: 'page-5',
+            label: 'Hidden Page',
+            isHidden: true
+        }
+    ];
+    beforeEach(()=>{
+        jest.useFakeTimers();
+    });
+    afterEach(()=>{
+        jest.clearAllTimers();
+        jest.useRealTimers();
+    });
+    describe('Initialization', ()=>{
+        it('should initialize with default page when available and not hidden', ()=>{
+            const { result } = renderHook(()=>useCurrentActivePage({
+                    pages: mockPages,
+                    defaultPage: 'Page 2',
+                    activePages: [],
+                    evaluatedPagesVisibility: true
+                }));
+            expect(result.current.currentActivePage).toBe('page-2');
+            expect(scrollIntoView).toHaveBeenCalledWith('page-2');
+        });
+        it('should initialize with first visible page when default page is hidden', ()=>{
+            const { result } = renderHook(()=>useCurrentActivePage({
+                    pages: mockPages,
+                    defaultPage: 'Hidden Page',
+                    activePages: [],
+                    evaluatedPagesVisibility: true
+                }));
+            expect(result.current.currentActivePage).toBe('page-1');
+        });
+        it('should not initialize until evaluatedPagesVisibility is true', ()=>{
+            const { result, rerender } = renderHook(({ evaluated })=>useCurrentActivePage({
+                    pages: mockPages,
+                    defaultPage: 'Page 1',
+                    activePages: [],
+                    evaluatedPagesVisibility: evaluated
+                }), {
+                initialProps: {
+                    evaluated: false
+                }
+            });
+            expect(result.current.currentActivePage).toBeNull();
+            rerender({
+                evaluated: true
+            });
+            expect(result.current.currentActivePage).toBe('page-1');
+        });
+        it('should handle empty pages array', ()=>{
+            const { result } = renderHook(()=>useCurrentActivePage({
+                    pages: [],
+                    defaultPage: 'Page 1',
+                    activePages: [],
+                    evaluatedPagesVisibility: true
+                }));
+            expect(result.current.currentActivePage).toBeNull();
+            expect(scrollIntoView).not.toHaveBeenCalled();
+        });
+        it('should handle all hidden pages', ()=>{
+            const allHiddenPages = mockPages.map((page)=>({
+                    ...page,
+                    isHidden: true
+                }));
+            const { result } = renderHook(()=>useCurrentActivePage({
+                    pages: allHiddenPages,
+                    defaultPage: 'Page 1',
+                    activePages: [],
+                    evaluatedPagesVisibility: true
+                }));
+            expect(result.current.currentActivePage).toBeNull();
+        });
+    });
+    describe('Waypoint Interaction', ()=>{
+        it('should ignore Waypoint updates during initial phase', ()=>{
+            const { result } = renderHook(()=>useCurrentActivePage({
+                    pages: mockPages,
+                    defaultPage: 'Page 1',
+                    activePages: [
+                        'page-2'
+                    ],
+                    evaluatedPagesVisibility: true
+                }));
+            expect(result.current.currentActivePage).toBe('page-1');
+            // Fast-forward halfway through the lock timeout
+            act(()=>{
+                jest.advanceTimersByTime(250);
+            });
+            // Should still be on initial page
+            expect(result.current.currentActivePage).toBe('page-1');
+        });
+        it('should respect Waypoint updates after initial phase', ()=>{
+            const { result, rerender } = renderHook(()=>useCurrentActivePage({
+                    pages: mockPages,
+                    defaultPage: 'Page 1',
+                    activePages: [
+                        'page-2'
+                    ],
+                    evaluatedPagesVisibility: true
+                }));
+            // Fast-forward past the lock timeout
+            act(()=>{
+                jest.advanceTimersByTime(500);
+            });
+            // Update active pages
+            rerender({
+                pages: mockPages,
+                defaultPage: 'Page 1',
+                activePages: [
+                    'page-2'
+                ],
+                evaluatedPagesVisibility: true
+            });
+            expect(result.current.currentActivePage).toBe('page-2');
+        });
+        it('should select topmost visible page when multiple pages are visible', ()=>{
+            const { result } = renderHook(()=>useCurrentActivePage({
+                    pages: mockPages,
+                    defaultPage: 'Page 1',
+                    activePages: [
+                        'page-2',
+                        'page-1',
+                        'page-3'
+                    ],
+                    evaluatedPagesVisibility: true
+                }));
+            // Fast-forward past the lock timeout
+            act(()=>{
+                jest.advanceTimersByTime(500);
+            });
+            expect(result.current.currentActivePage).toBe('page-1');
+        });
+    });
+    describe('User Interaction', ()=>{
+        it('should handle page requests and scroll to requested page', ()=>{
+            const { result } = renderHook(()=>useCurrentActivePage({
+                    pages: mockPages,
+                    defaultPage: 'Page 1',
+                    activePages: [
+                        'page-1'
+                    ],
+                    evaluatedPagesVisibility: true
+                }));
+            act(()=>{
+                result.current.requestPage('page-2');
+            });
+            expect(result.current.currentActivePage).toBe('page-2');
+            expect(scrollIntoView).toHaveBeenCalledWith('page-2');
+        });
+        it('should maintain requested page if visible, even when other pages become visible', ()=>{
+            const { result, rerender } = renderHook(()=>useCurrentActivePage({
+                    pages: mockPages,
+                    defaultPage: 'Page 1',
+                    activePages: [
+                        'page-2'
+                    ],
+                    evaluatedPagesVisibility: true
+                }));
+            // Request a specific page
+            act(()=>{
+                result.current.requestPage('page-2');
+            });
+            // Update active pages to include multiple pages
+            rerender({
+                pages: mockPages,
+                defaultPage: 'Page 1',
+                activePages: [
+                    'page-1',
+                    'page-2',
+                    'page-3'
+                ],
+                evaluatedPagesVisibility: true
+            });
+            // Should maintain the requested page
+            expect(result.current.currentActivePage).toBe('page-2');
+        });
+    });
+});

package/dist/components/sidebar/usePageObserver.d.ts

@@ -0,0 +1,11 @@
+import { type FormPage } from '../../types';
+interface PageObserverState {
+    pages: FormPage[];
+    pagesWithErrors: string[];
+    activePages: string[];
+    evaluatedPagesVisibility: boolean;
+    hasMultiplePages: boolean | null;
+}
+export declare const usePageObserver: () => PageObserverState;
+export {};
+//# sourceMappingURL=usePageObserver.d.ts.map

package/dist/components/sidebar/usePageObserver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePageObserver.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/usePageObserver.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG5C,UAAU,iBAAiB;IACzB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,wBAAwB,EAAE,OAAO,CAAC;IAClC,gBAAgB,EAAE,OAAO,GAAG,IAAI,CAAC;CAClC;AAED,eAAO,MAAM,eAAe,yBAgC3B,CAAC"}

package/dist/components/sidebar/usePageObserver.js

@@ -0,0 +1,42 @@
+import { useState, useEffect } from "react";
+import { pageObserver } from "./page-observer.js";
+export const usePageObserver = ()=>{
+    const [state, setState] = useState({
+        pages: [],
+        pagesWithErrors: [],
+        activePages: [],
+        evaluatedPagesVisibility: false,
+        hasMultiplePages: null
+    });
+    useEffect(()=>{
+        const subscriptions = [
+            pageObserver.getScrollablePagesObservable().subscribe((pages)=>{
+                setState((prev)=>({
+                        ...prev,
+                        pages,
+                        hasMultiplePages: pages.length > 1
+                    }));
+            }),
+            pageObserver.getPagesWithErrorsObservable().subscribe((errors)=>{
+                setState((prev)=>({
+                        ...prev,
+                        pagesWithErrors: Array.from(errors)
+                    }));
+            }),
+            pageObserver.getActivePagesObservable().subscribe((activePages)=>{
+                setState((prev)=>({
+                        ...prev,
+                        activePages: Array.from(activePages)
+                    }));
+            }),
+            pageObserver.getEvaluatedPagesVisibilityObservable().subscribe((evaluated)=>{
+                setState((prev)=>({
+                        ...prev,
+                        evaluatedPagesVisibility: evaluated
+                    }));
+            })
+        ];
+        return ()=>subscriptions.forEach((sub)=>sub.unsubscribe());
+    }, []);
+    return state;
+};

package/dist/components/value/value.component.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const ValueEmpty: () => React.JSX.Element;
+export declare const ValueDisplay: ({ value }: {
+    value: any;
+}) => React.JSX.Element;
+//# sourceMappingURL=value.component.d.ts.map

package/dist/components/value/value.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"value.component.d.ts","sourceRoot":"","sources":["../../../src/components/value/value.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,UAAU,yBAQtB,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI;;CAAS,sBAKrC,CAAC"}

package/dist/components/value/value.component.js

@@ -0,0 +1,24 @@
+import React from "react";
+import styles from "./value.scss";
+import { useTranslation } from "react-i18next";
+export const ValueEmpty = ()=>{
+    const { t } = useTranslation();
+    return /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("span", {
+        className: styles.empty
+    }, "(", t('blank', 'Blank'), ")"));
+};
+export const ValueDisplay = ({ value })=>{
+    if (Array.isArray(value)) {
+        return /*#__PURE__*/ React.createElement(ListDisplay, {
+            valueArray: value
+        });
+    }
+    return /*#__PURE__*/ React.createElement("div", {
+        className: styles.value
+    }, value);
+};
+const ListDisplay = ({ valueArray })=>{
+    return /*#__PURE__*/ React.createElement("ul", null, valueArray.map((item)=>/*#__PURE__*/ React.createElement("li", {
+            className: styles.item
+        }, item)));
+};

package/dist/components/value/value.scss

@@ -0,0 +1,17 @@
+@use '@carbon/colors';
+
+.value {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: colors.$gray-60;
+}
+
+.empty {
+  @extend .value;
+  color: colors.$gray-30;
+}
+
+.item {
+  @extend .value;
+  margin-bottom: 0.5rem;
+}

package/dist/components/value/view/field-value-view.component.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface FieldValueViewProps {
+    isInline: boolean;
+    label: string;
+    value: any;
+    conceptName: string;
+}
+declare const FieldValueView: React.FC<FieldValueViewProps>;
+export default FieldValueView;
+//# sourceMappingURL=field-value-view.component.d.ts.map

package/dist/components/value/view/field-value-view.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-value-view.component.d.ts","sourceRoot":"","sources":["../../../../src/components/value/view/field-value-view.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,GAAG,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAoBjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/value/view/field-value-view.component.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { isEmpty } from "../../../validators/form-validator.js";
+import LabelField from "../../label/label.component.js";
+import { ValueDisplay, ValueEmpty } from "../value.component.js";
+import styles from "./field-value-view.scss";
+const FieldValueView = ({ label, conceptName, value, isInline })=>/*#__PURE__*/ React.createElement(React.Fragment, null, isInline ? /*#__PURE__*/ React.createElement("div", {
+        className: styles.inlineFlexRow
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles.inlineFlexColumn
+    }, /*#__PURE__*/ React.createElement(LabelField, {
+        value: label,
+        tooltipText: conceptName
+    })), /*#__PURE__*/ React.createElement("div", {
+        className: styles.inlineFlexColumn
+    }, isEmpty(value) ? /*#__PURE__*/ React.createElement(ValueEmpty, null) : /*#__PURE__*/ React.createElement(ValueDisplay, {
+        value: value
+    }))) : /*#__PURE__*/ React.createElement("div", {
+        className: styles.readonly
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles.formField
+    }, /*#__PURE__*/ React.createElement(LabelField, {
+        value: label,
+        tooltipText: conceptName
+    }), /*#__PURE__*/ React.createElement("div", {
+        className: styles.value
+    }, isEmpty(value) ? /*#__PURE__*/ React.createElement(ValueEmpty, null) : /*#__PURE__*/ React.createElement(ValueDisplay, {
+        value: value
+    })))));
+export default FieldValueView;

package/dist/components/value/view/field-value-view.scss

@@ -0,0 +1,31 @@
+@use '@carbon/colors';
+
+.formField {
+  margin-top: 10px;
+}
+
+.formField > div > div > label {
+  color: colors.$gray-70;
+}
+
+.readonly {
+  border-bottom: 0.5px colors.$gray-30;
+  border-style: solid;
+}
+
+.readonly > div {
+  padding-bottom: 7px !important;
+}
+
+.value {
+  color: colors.$gray-70;
+}
+
+.inlineFlexRow {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.inlineFlexColumn {
+  width: 300px;
+}

package/dist/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const ConceptTrue = "cf82933b-3f3f-45e7-a5ab-5d31aaee3da3";
+export declare const ConceptFalse = "488b58ff-64f5-4f8a-8979-fa79940b1594";
+export declare const UnspecifiedValue = "VALUE_UNSPECIFIED";
+export declare const encounterRepresentation: string;
+export declare const FormsStore = "forms-engine-store";
+export declare const PatientChartWorkspaceHeaderSlot = "patient-chart-workspace-header-slot";
+export declare const codedTypes: string[];
+export declare const NullSelectOption = "OPTION_NULL";
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,yCAAyC,CAAC;AAClE,eAAO,MAAM,YAAY,yCAAyC,CAAC;AACnE,eAAO,MAAM,gBAAgB,sBAAsB,CAAC;AACpD,eAAO,MAAM,uBAAuB,QAMI,CAAC;AACzC,eAAO,MAAM,UAAU,uBAAuB,CAAC;AAC/C,eAAO,MAAM,+BAA+B,wCAAwC,CAAC;AACrF,eAAO,MAAM,UAAU,UAAsD,CAAC;AAC9E,eAAO,MAAM,gBAAgB,gBAAgB,CAAC"}