@availity/mui-spaces 0.1.1 → 0.2.1

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.2.1](https://github.com/Availity/element/compare/@availity/mui-spaces@0.2.0...@availity/mui-spaces@0.2.1) (2024-06-17)
+
+### Dependency Updates
+
+* `@availity/mock` updated to version `0.2.0`
+## [0.2.0](https://github.com/Availity/element/compare/@availity/mui-spaces@0.1.1...@availity/mui-spaces@0.2.0) (2024-06-14)
+
+### Dependency Updates
+
+* `@availity/mock` updated to version `0.1.1`
+* `mui-disclaimer` updated to version `0.1.1`
+* `mui-modal` updated to version `0.1.1`
+* `mui-typography` updated to version `0.1.1`
+* `mui-progress` updated to version `0.1.1`
+
+### Features
+
+* **mui-spaces:** add SpacesAgreement component ([0e4a299](https://github.com/Availity/element/commit/0e4a299ba4ae588bdc44a5035bbb5bcbfd234c7c))
+* **mui-spaces:** add SpacesDisclaimer component ([5c5eeb4](https://github.com/Availity/element/commit/5c5eeb461d8a169c06a233094ae486b8c0075af5))
+* **mui-spaces:** add SpacesGhostText component ([ceac190](https://github.com/Availity/element/commit/ceac190e012dad28bba87736d5dae64a85e6629a))
+* **mui-spaces:** add SpacesImage component - initial commit ([0f0a00b](https://github.com/Availity/element/commit/0f0a00b5e6d5e5e759cf2e83f902454d8dbc19b1))
+
 ## [0.1.1](https://github.com/Availity/element/compare/@availity/mui-spaces@0.1.0...@availity/mui-spaces@0.1.1) (2024-05-17)
 
 

package/dist/index.d.mts

@@ -6,6 +6,13 @@ type NameValuePair = {
     /** The value of the data. */
     value: string;
 };
+type SpacesImages = {
+    billboard?: string;
+    logo?: string;
+    promotional?: string;
+    promotionalHover?: string;
+    tile?: string;
+};
 type Space = {
     /** The name of the content or configuration. */
     name: string;
@@ -18,38 +25,30 @@ type Space = {
     /** A list of payerIds for the configuration or content. */
     payerIDs?: string[];
     /** The images associated with the configuration. */
-    images?: NameValuePair[];
+    images?: SpacesImages;
+    /** Metadata for a configuration */
+    meta?: Record<string, string>;
     /** Key-value data for a configuration. */
-    metadata?: NameValuePair[];
+    metadataPairs?: NameValuePair[];
     /** The feature box colors associated with the Payer Space. */
-    colors?: NameValuePair[];
+    colors?: Record<string, string>;
     /** Contains URL fragments that point to icons. */
-    icons?: NameValuePair[];
+    icons?: Record<string, string>;
     /** The key-value mapping pairs. */
-    mapping?: NameValuePair[];
-};
-type NormalizedPairField = {
-    [key: string]: string;
-};
-interface NormalizedSpace extends Omit<Space, 'images' | 'metadata' | 'colors' | 'icons' | 'mapping'> {
-    /** The images associated with the configuration. */
-    images?: NormalizedPairField;
-    /** The feature box colors associated with the Payer Space. */
-    colors?: NormalizedPairField;
-    /** Contains URL fragments that point to icons. */
-    icons?: NormalizedPairField;
-    /** Key-value data for a configuration. */
-    metadata?: NormalizedPairField;
-    /** The key-value mapping pairs. */
-    mapping?: NormalizedPairField;
-    /** URL metadata for the configuration. */
+    mapping?: Record<string, string>;
+    mappingPairs?: NameValuePair[];
+    /** Whether or not the space is ghosted */
+    isGhost?: boolean;
     link?: {
         /** Contains a URL or URL Fragment that the hyperlink points to. */
         url: string;
         /** Specifies where to open the linked URL. */
         target: string;
     };
-}
+    /** The description of the configuration. */
+    description?: string;
+    url?: string;
+};
 type SpacesContextType = {
     /** Array of spaces to be passed into the Spaces provider. */
     spaces?: Map<string, Space>;
@@ -99,6 +98,6 @@ declare const INITIAL_STATE: {
 declare const SpacesContext: react.Context<SpacesContextType>;
 declare const useSpacesContext: () => SpacesContextType;
 declare const Spaces: ({ query, variables, clientId, children, payerIds, spaceIds, spaces: spacesFromProps, }: SpacesProps) => JSX.Element;
-declare const useSpaces: (...ids: string[]) => NormalizedSpace[] | undefined;
+declare const useSpaces: (...ids: string[]) => Space[] | undefined;
 
 export { INITIAL_STATE, Spaces, SpacesContext, useSpaces, useSpacesContext };

package/dist/index.d.ts

@@ -6,6 +6,13 @@ type NameValuePair = {
     /** The value of the data. */
     value: string;
 };
+type SpacesImages = {
+    billboard?: string;
+    logo?: string;
+    promotional?: string;
+    promotionalHover?: string;
+    tile?: string;
+};
 type Space = {
     /** The name of the content or configuration. */
     name: string;
@@ -18,38 +25,30 @@ type Space = {
     /** A list of payerIds for the configuration or content. */
     payerIDs?: string[];
     /** The images associated with the configuration. */
-    images?: NameValuePair[];
+    images?: SpacesImages;
+    /** Metadata for a configuration */
+    meta?: Record<string, string>;
     /** Key-value data for a configuration. */
-    metadata?: NameValuePair[];
+    metadataPairs?: NameValuePair[];
     /** The feature box colors associated with the Payer Space. */
-    colors?: NameValuePair[];
+    colors?: Record<string, string>;
     /** Contains URL fragments that point to icons. */
-    icons?: NameValuePair[];
+    icons?: Record<string, string>;
     /** The key-value mapping pairs. */
-    mapping?: NameValuePair[];
-};
-type NormalizedPairField = {
-    [key: string]: string;
-};
-interface NormalizedSpace extends Omit<Space, 'images' | 'metadata' | 'colors' | 'icons' | 'mapping'> {
-    /** The images associated with the configuration. */
-    images?: NormalizedPairField;
-    /** The feature box colors associated with the Payer Space. */
-    colors?: NormalizedPairField;
-    /** Contains URL fragments that point to icons. */
-    icons?: NormalizedPairField;
-    /** Key-value data for a configuration. */
-    metadata?: NormalizedPairField;
-    /** The key-value mapping pairs. */
-    mapping?: NormalizedPairField;
-    /** URL metadata for the configuration. */
+    mapping?: Record<string, string>;
+    mappingPairs?: NameValuePair[];
+    /** Whether or not the space is ghosted */
+    isGhost?: boolean;
     link?: {
         /** Contains a URL or URL Fragment that the hyperlink points to. */
         url: string;
         /** Specifies where to open the linked URL. */
         target: string;
     };
-}
+    /** The description of the configuration. */
+    description?: string;
+    url?: string;
+};
 type SpacesContextType = {
     /** Array of spaces to be passed into the Spaces provider. */
     spaces?: Map<string, Space>;
@@ -99,6 +98,6 @@ declare const INITIAL_STATE: {
 declare const SpacesContext: react.Context<SpacesContextType>;
 declare const useSpacesContext: () => SpacesContextType;
 declare const Spaces: ({ query, variables, clientId, children, payerIds, spaceIds, spaces: spacesFromProps, }: SpacesProps) => JSX.Element;
-declare const useSpaces: (...ids: string[]) => NormalizedSpace[] | undefined;
+declare const useSpaces: (...ids: string[]) => Space[] | undefined;
 
 export { INITIAL_STATE, Spaces, SpacesContext, useSpaces, useSpacesContext };

package/dist/index.js

@@ -20,18 +20,6 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -103,30 +91,6 @@ var spacesReducer = (state, action) => {
   const { type } = action;
   return actions[type](state, action);
 };
-var normalizeSpaces = (spaces) => {
-  let spacesToReduce = spaces;
-  if (Array.isArray(spaces[0])) {
-    spacesToReduce = spaces[0];
-  }
-  const pairFields = ["images", "metadata", "colors", "icons", "mapping"];
-  return spacesToReduce.reduce((accum, spc) => {
-    var _b;
-    if (!spc)
-      return accum;
-    const _a = spc, { images, metadata, colors, icons, mapping } = _a, rest = __objRest(_a, ["images", "metadata", "colors", "icons", "mapping"]);
-    const normalizedSpace = __spreadValues({}, rest);
-    for (const field of pairFields) {
-      if (spc[field] && Array.isArray(spc[field])) {
-        normalizedSpace[field] = (_b = spc[field]) == null ? void 0 : _b.reduce((_accum, { name, value }) => {
-          _accum[name] = value;
-          return _accum;
-        }, {});
-      }
-    }
-    accum.push(normalizedSpace);
-    return accum;
-  }, []);
-};
 var fetchSpaces = (_0) => __async(void 0, [_0], function* ({ query, clientId, variables }) {
   const {
     data: {
@@ -184,6 +148,7 @@ var configurationFindMany_default = `query configurationFindMany($ids: [String!]
         description
         payerIDs
         parentIDs
+        meta
         metadataPairs {
           name
           value
@@ -440,11 +405,20 @@ var useSpaces = (...ids) => {
   const shouldReturnAllSpaces = idsIsEmpty || callerIsExpectingFirstSpace;
   if (shouldReturnAllSpaces) {
     console.warn(`You did not pass in an ID to find a space, returning all spaces.`);
-    return spaces && normalizeSpaces([...spaces.values()]);
+    return spaces && [...spaces.values()];
   }
-  const matchedSpaces = ids.map((id) => (spaces == null ? void 0 : spaces.get(id)) || (spacesByConfig == null ? void 0 : spacesByConfig.get(id)) || (spacesByPayer == null ? void 0 : spacesByPayer.get(id)));
-  const normalized = normalizeSpaces(matchedSpaces);
-  return normalized;
+  return ids.reduce((acc, id) => {
+    const matchedSpace = (spaces == null ? void 0 : spaces.get(id)) || (spacesByConfig == null ? void 0 : spacesByConfig.get(id));
+    if (matchedSpace) {
+      acc.push(matchedSpace);
+      return acc;
+    }
+    const matchedSpacesByPayer = spacesByPayer == null ? void 0 : spacesByPayer.get(id);
+    if (matchedSpacesByPayer) {
+      acc.push(...matchedSpacesByPayer);
+      return acc;
+    }
+  }, []);
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -17,18 +17,6 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -76,30 +64,6 @@ var spacesReducer = (state, action) => {
   const { type } = action;
   return actions[type](state, action);
 };
-var normalizeSpaces = (spaces) => {
-  let spacesToReduce = spaces;
-  if (Array.isArray(spaces[0])) {
-    spacesToReduce = spaces[0];
-  }
-  const pairFields = ["images", "metadata", "colors", "icons", "mapping"];
-  return spacesToReduce.reduce((accum, spc) => {
-    var _b;
-    if (!spc)
-      return accum;
-    const _a = spc, { images, metadata, colors, icons, mapping } = _a, rest = __objRest(_a, ["images", "metadata", "colors", "icons", "mapping"]);
-    const normalizedSpace = __spreadValues({}, rest);
-    for (const field of pairFields) {
-      if (spc[field] && Array.isArray(spc[field])) {
-        normalizedSpace[field] = (_b = spc[field]) == null ? void 0 : _b.reduce((_accum, { name, value }) => {
-          _accum[name] = value;
-          return _accum;
-        }, {});
-      }
-    }
-    accum.push(normalizedSpace);
-    return accum;
-  }, []);
-};
 var fetchSpaces = (_0) => __async(void 0, [_0], function* ({ query, clientId, variables }) {
   const {
     data: {
@@ -157,6 +121,7 @@ var configurationFindMany_default = `query configurationFindMany($ids: [String!]
         description
         payerIDs
         parentIDs
+        meta
         metadataPairs {
           name
           value
@@ -413,11 +378,20 @@ var useSpaces = (...ids) => {
   const shouldReturnAllSpaces = idsIsEmpty || callerIsExpectingFirstSpace;
   if (shouldReturnAllSpaces) {
     console.warn(`You did not pass in an ID to find a space, returning all spaces.`);
-    return spaces && normalizeSpaces([...spaces.values()]);
+    return spaces && [...spaces.values()];
   }
-  const matchedSpaces = ids.map((id) => (spaces == null ? void 0 : spaces.get(id)) || (spacesByConfig == null ? void 0 : spacesByConfig.get(id)) || (spacesByPayer == null ? void 0 : spacesByPayer.get(id)));
-  const normalized = normalizeSpaces(matchedSpaces);
-  return normalized;
+  return ids.reduce((acc, id) => {
+    const matchedSpace = (spaces == null ? void 0 : spaces.get(id)) || (spacesByConfig == null ? void 0 : spacesByConfig.get(id));
+    if (matchedSpace) {
+      acc.push(matchedSpace);
+      return acc;
+    }
+    const matchedSpacesByPayer = spacesByPayer == null ? void 0 : spacesByPayer.get(id);
+    if (matchedSpacesByPayer) {
+      acc.push(...matchedSpacesByPayer);
+      return acc;
+    }
+  }, []);
 };
 export {
   INITIAL_STATE,

package/jest.config.js

@@ -1,7 +1,41 @@
 const global = require('../../jest.config.global');
 
+const esModules = [
+  'bail',
+  'character-entities',
+  'comma-separated-tokens',
+  'decode-named-character-reference',
+  'devlop',
+  'estree-util-is-identifier-name',
+  'hast-util-to-jsx-runtime',
+  'hast-util-whitespace',
+  'html-url-attributes',
+  'is-plain-obj',
+  'mdast-util-from-markdown',
+  'mdast-util-to-hast',
+  'mdast-util-to-string',
+  'micromark',
+  'property-information',
+  'react-markdown',
+  'remark-parse',
+  'remark-rehype',
+  'space-separated-tokens',
+  'trim-lines',
+  'trough',
+  'unified',
+  'unist-util-is',
+  'unist-util-position',
+  'unist-util-stringify-position',
+  'unist-util-visit',
+  'vfile',
+  'vfile-message',
+].join('|');
+
 module.exports = {
   ...global,
   displayName: 'spaces',
   coverageDirectory: '../../coverage/spaces',
+  transformIgnorePatterns: [
+    `/node_modules/(?!${esModules})`
+  ]
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-spaces",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "Availity MUI Spaces Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -32,15 +32,28 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "devDependencies": {
+    "@availity/mock": "^0.0.0",
+    "@availity/mui-button": "^0.6.7",
+    "@availity/mui-disclaimer": "^0.1.1",
+    "@availity/mui-modal": "^0.1.4",
+    "@availity/mui-typography": "^0.2.0",
     "@mui/material": "^5.15.15",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-image": "^4.1.0",
+    "react-markdown": "^9.0.1",
     "tsup": "^8.0.2",
     "typescript": "^5.4.5"
   },
   "peerDependencies": {
+    "@availity/mui-button": "^0.6.7",
+    "@availity/mui-disclaimer": "^0.1.1",
+    "@availity/mui-modal": "^0.1.4",
+    "@availity/mui-typography": "^0.2.0",
     "@mui/material": "^5.11.9",
-    "react": ">=16.3.0"
+    "react": ">=16.3.0",
+    "react-image": "^4.1.0",
+    "react-markdown": "^9.0.1"
   },
   "publishConfig": {
     "access": "public"
@@ -48,12 +61,8 @@
   "dependencies": {
     "@availity/api-axios": "^8.0.7",
     "@availity/message-core": "^6.1.2",
-    "@availity/mui-button": "^0.6.7",
-    "@availity/mui-modal": "^0.1.3",
-    "@availity/mui-typography": "^0.1.8",
     "@tanstack/react-query": "^4.36.1",
     "dayjs": "^1.11.10",
-    "qs": "^6.12.1",
-    "react-markdown": "^9.0.1"
+    "qs": "^6.12.1"
   }
 }

package/src/lib/Spaces.stories.tsx

@@ -3,7 +3,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Paper } from '@availity/mui-paper';
 import { Typography } from '@availity/mui-typography';
-import { Divider } from '@availity/mui-divider';
 import { Stack } from '@availity/mui-layout';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Spaces, useSpaces, useSpacesContext } from './Spaces';

package/src/lib/Spaces.test.tsx

@@ -6,7 +6,6 @@ import { Spaces, useSpaces, useSpacesContext } from '..';
 
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { server } from '../../../mock/src/lib/server';
-import { NormalizedSpace } from './spaces-types';
 
 beforeAll(() => {
   // Start the interception.

package/src/lib/Spaces.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext, useReducer, useEffect } from 'react';
 import { useQueries } from '@tanstack/react-query';
-import { normalizeSpaces, spacesReducer, fetchAllSpaces } from './spaces-data';
+import { spacesReducer, fetchAllSpaces } from './spaces-data';
 import { Space, SpacesProps, SpacesContextType } from './spaces-types';
 import configurationFindMany from './configurationFindMany';
 
@@ -192,11 +192,22 @@ export const useSpaces = (...ids: string[]) => {
 
   if (shouldReturnAllSpaces) {
     console.warn(`You did not pass in an ID to find a space, returning all spaces.`);
-    return spaces && normalizeSpaces([...spaces.values()]);
+    return spaces && [...spaces.values()];
   }
 
-  const matchedSpaces = ids.map((id) => spaces?.get(id) || spacesByConfig?.get(id) || spacesByPayer?.get(id));
-  const normalized = normalizeSpaces(matchedSpaces);
+  return ids.reduce((acc: Space[], id) => {
+    const matchedSpace = spaces?.get(id) || spacesByConfig?.get(id);
 
-  return normalized;
+    if (matchedSpace) {
+      acc.push(matchedSpace);
+      return acc;
+    }
+
+    const matchedSpacesByPayer = spacesByPayer?.get(id);
+
+    if (matchedSpacesByPayer) {
+      acc.push(...matchedSpacesByPayer);
+      return acc;
+    }
+  }, []);
 };

package/src/lib/SpacesAgreement.stories.tsx

@@ -0,0 +1,49 @@
+// Each exported component in the package should have its own stories file
+import type { Meta, StoryObj } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Spaces } from './Spaces';
+import { SpacesAgreement, SpacesAgreementProps } from './SpacesAgreement';
+
+const meta: Meta<typeof SpacesAgreement> = {
+  title: 'Components/Spaces/SpacesAgreement',
+  component: SpacesAgreement,
+  tags: ['autodocs'],
+  argTypes: {
+    spaceId: {
+      table: {
+        readonly: true,
+      },
+    },
+  },
+};
+
+export default meta;
+
+const queryClient = new QueryClient();
+
+export const _SpacesAgreement: StoryObj<typeof SpacesAgreement> = {
+  render: (args: SpacesAgreementProps) => (
+    <QueryClientProvider client={queryClient}>
+      <Spaces clientId="clientId" spaceIds={['agreement']}>
+        <SpacesAgreement {...args} />
+      </Spaces>
+    </QueryClientProvider>
+  ),
+  args: {
+    spaceId: 'agreement',
+  },
+};
+
+export const _SpacesAgreementMarkdown: StoryObj<typeof SpacesAgreement> = {
+  render: (args: SpacesAgreementProps) => (
+    <QueryClientProvider client={queryClient}>
+      <Spaces clientId="clientId" spaceIds={['agreementMarkdown']}>
+        <SpacesAgreement {...args} />
+      </Spaces>
+    </QueryClientProvider>
+  ),
+  args: {
+    markdown: true,
+    spaceId: 'agreementMarkdown',
+  },
+};

package/src/lib/SpacesAgreement.test.tsx

@@ -0,0 +1,53 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, waitFor } from '@testing-library/react';
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { server } from '../../../mock/src/lib/server';
+import { SpacesAgreement } from './SpacesAgreement';
+import { Spaces } from './Spaces';
+
+beforeAll(() => {
+  // Start the interception.
+  server.listen();
+});
+
+afterEach(() => {
+  // Remove any handlers you may have added
+  // in individual tests (runtime handlers).
+  server.resetHandlers();
+});
+
+describe('SpacesAgreement', () => {
+  it('should render regular text successfully', async () => {
+    const queryClient = new QueryClient();
+
+    const { getByText } = render(
+      <QueryClientProvider client={queryClient}>
+        <Spaces spaceIds={['agreement']} clientId="clientId">
+          <SpacesAgreement spaceId="agreement" />
+        </Spaces>
+      </QueryClientProvider>
+    );
+
+    const agreementText = await waitFor(() => getByText('This is an agreement.'));
+
+    expect(agreementText.tagName).toBe('SPAN');
+    expect(agreementText.innerHTML).toBe('This is an agreement.');
+  });
+
+  it('should render markdown successfully', async () => {
+    const queryClient = new QueryClient();
+
+    const { getByText } = render(
+      <QueryClientProvider client={queryClient}>
+        <Spaces spaceIds={['agreementMarkdown']} clientId="clientId">
+          <SpacesAgreement spaceId="agreementMarkdown" markdown />
+        </Spaces>
+      </QueryClientProvider>
+    );
+
+    const agreementText = await waitFor(() => getByText('This is an agreement.'));
+
+    expect(agreementText.tagName).toBe('H1');
+    expect(agreementText.innerHTML).toBe('This is an agreement.');
+  });
+});

package/src/lib/SpacesAgreement.tsx

@@ -0,0 +1,29 @@
+import { Typography } from '@availity/mui-typography';
+import ReactMarkdown from 'react-markdown';
+
+import { useSpaces } from './Spaces';
+
+export type SpacesAgreementProps = {
+  spaceId: string;
+  markdown?: boolean;
+  id?: string;
+};
+
+export const SpacesAgreement = ({ spaceId, markdown = false, id: elementId }: SpacesAgreementProps) => {
+  const spaces = useSpaces(spaceId);
+  if (spaces && spaces.length > 0) {
+    const { description: agreement, id } = spaces[0];
+
+    if (agreement) {
+      const children = markdown ? <ReactMarkdown>{agreement}</ReactMarkdown> : agreement;
+
+      return (
+        <Typography variant="agreement" id={elementId || `spaces-agreement-${spaceId || id}`}>
+          {children}
+        </Typography>
+      );
+    }
+  }
+
+  return null;
+};

package/src/lib/SpacesDisclaimer.stories.tsx

@@ -0,0 +1,49 @@
+// Each exported component in the package should have its own stories file
+import type { Meta, StoryObj } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Spaces } from './Spaces';
+import { SpacesDisclaimer, SpacesDisclaimerProps } from './SpacesDisclaimer';
+
+const meta: Meta<typeof SpacesDisclaimer> = {
+  title: 'Components/Spaces/SpacesDisclaimer',
+  component: SpacesDisclaimer,
+  tags: ['autodocs'],
+  argTypes: {
+    spaceId: {
+      table: {
+        readonly: true,
+      },
+    },
+  },
+};
+
+export default meta;
+
+const queryClient = new QueryClient();
+
+export const _SpacesDisclaimer: StoryObj<typeof SpacesDisclaimer> = {
+  render: (args: SpacesDisclaimerProps) => (
+    <QueryClientProvider client={queryClient}>
+      <Spaces clientId="clientId" spaceIds={['disclaimer']}>
+        <SpacesDisclaimer {...args} />
+      </Spaces>
+    </QueryClientProvider>
+  ),
+  args: {
+    spaceId: 'disclaimer',
+  },
+};
+
+export const _SpacesDisclaimerMarkdown: StoryObj<typeof SpacesDisclaimer> = {
+  render: (args: SpacesDisclaimerProps) => (
+    <QueryClientProvider client={queryClient}>
+      <Spaces clientId="clientId" spaceIds={['disclaimerMarkdown']}>
+        <SpacesDisclaimer {...args} />
+      </Spaces>
+    </QueryClientProvider>
+  ),
+  args: {
+    markdown: true,
+    spaceId: 'disclaimerMarkdown',
+  },
+};

package/src/lib/SpacesDisclaimer.test.tsx

@@ -0,0 +1,53 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, waitFor } from '@testing-library/react';
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { server } from '@availity/mock/src/lib/server';
+import { SpacesDisclaimer } from './SpacesDisclaimer';
+import { Spaces } from './Spaces';
+
+beforeAll(() => {
+  // Start the interception.
+  server.listen();
+});
+
+afterEach(() => {
+  // Remove any handlers you may have added
+  // in individual tests (runtime handlers).
+  server.resetHandlers();
+});
+
+describe('SpacesDisclaimer', () => {
+  it('should render regular text successfully', async () => {
+    const queryClient = new QueryClient();
+
+    const { getByText } = render(
+      <QueryClientProvider client={queryClient}>
+        <Spaces spaceIds={['disclaimer']} clientId="clientId">
+          <SpacesDisclaimer spaceId="disclaimer" />
+        </Spaces>
+      </QueryClientProvider>
+    );
+
+    const disclaimerText = await waitFor(() => getByText('This is a disclaimer.'));
+
+    expect(disclaimerText.tagName).toBe('P');
+    expect(disclaimerText.innerHTML).toBe('This is a disclaimer.');
+  });
+
+  it('should render markdown successfully', async () => {
+    const queryClient = new QueryClient();
+
+    const { getByText } = render(
+      <QueryClientProvider client={queryClient}>
+        <Spaces spaceIds={['disclaimerMarkdown']} clientId="clientId">
+          <SpacesDisclaimer spaceId="disclaimerMarkdown" markdown />
+        </Spaces>
+      </QueryClientProvider>
+    );
+
+    const disclaimerText = await waitFor(() => getByText('This is a disclaimer.'));
+
+    expect(disclaimerText.tagName).toBe('H1');
+    expect(disclaimerText.innerHTML).toBe('This is a disclaimer.');
+  });
+});

package/src/lib/SpacesDisclaimer.tsx

@@ -0,0 +1,39 @@
+import { Disclaimer } from '@availity/mui-disclaimer';
+import ReactMarkdown from 'react-markdown';
+
+import { useSpaces } from './Spaces';
+
+export type SpacesDisclaimerProps = {
+  accent?: boolean;
+  spaceId: string;
+  markdown?: boolean;
+  id?: string;
+};
+
+export const SpacesDisclaimer = ({
+  accent = true,
+  spaceId,
+  markdown = false,
+  id: elementId,
+  ...props
+}: SpacesDisclaimerProps) => {
+  const spaces = useSpaces(spaceId);
+  if (spaces && spaces.length > 0) {
+    const { description: disclaimer, id } = spaces[0];
+
+    if (disclaimer) {
+      const children = markdown ? <ReactMarkdown>{disclaimer}</ReactMarkdown> : disclaimer;
+
+      return (
+        <Disclaimer
+          accent={accent}
+          id={elementId || `spaces-disclaimer-${spaceId || id}`}
+          description={children}
+          {...props}
+        />
+      );
+    }
+  }
+
+  return null;
+};

package/src/lib/SpacesGhostText.stories.tsx

@@ -0,0 +1,35 @@
+// Each exported component in the package should have its own stories file
+import type { Meta, StoryObj } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Spaces } from './Spaces';
+import { SpacesGhostText, SpacesGhostTextProps } from './SpacesGhostText';
+
+const meta: Meta<typeof SpacesGhostText> = {
+  title: 'Components/Spaces/SpacesGhostText',
+  component: SpacesGhostText,
+  tags: ['autodocs'],
+  argTypes: {
+    spaceId: {
+      table: {
+        readonly: true,
+      },
+    },
+  },
+};
+
+export default meta;
+
+const queryClient = new QueryClient();
+
+export const _SpacesGhostText: StoryObj<typeof SpacesGhostText> = {
+  render: (args: SpacesGhostTextProps) => (
+    <QueryClientProvider client={queryClient}>
+      <Spaces clientId="clientId" spaceIds={['ghosted']}>
+        <SpacesGhostText {...args} />
+      </Spaces>
+    </QueryClientProvider>
+  ),
+  args: {
+    spaceId: 'ghosted',
+  },
+};

package/src/lib/SpacesGhostText.test.tsx

@@ -0,0 +1,33 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, waitFor } from '@testing-library/react';
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { server } from '@availity/mock/src/lib/server';
+import { SpacesGhostText } from './SpacesGhostText';
+import { Spaces } from './Spaces';
+
+beforeAll(() => {
+  // Start the interception.
+  server.listen();
+});
+
+afterEach(() => {
+  // Remove any handlers you may have added
+  // in individual tests (runtime handlers).
+  server.resetHandlers();
+});
+
+describe('SpacesGhostText', () => {
+  it('should render successfully', async () => {
+    const queryClient = new QueryClient();
+
+    const { getByText } = render(
+      <QueryClientProvider client={queryClient}>
+        <Spaces spaceIds={['ghosted']} clientId="clientId">
+          <SpacesGhostText spaceId="ghosted" />
+        </Spaces>
+      </QueryClientProvider>
+    );
+
+    await waitFor(() => getByText('This is some ghost text'));
+  });
+});

package/src/lib/SpacesGhostText.tsx

@@ -0,0 +1,22 @@
+import { useSpaces } from './Spaces';
+
+export type SpacesGhostTextProps = {
+  spaceId: string;
+  id?: string;
+} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+
+export const SpacesGhostText = ({ spaceId, id, ...props }: SpacesGhostTextProps) => {
+  const spaces = useSpaces(spaceId);
+
+  const space = spaces?.[0];
+
+  if (space?.isGhost) {
+    return (
+      <small id={id || `app-ghost-text-${spaceId}`} {...props}>
+        <em>{space?.meta?.ghostText}</em>
+      </small>
+    );
+  }
+
+  return null;
+};

package/src/lib/SpacesImage.stories.tsx

@@ -0,0 +1,77 @@
+// Each exported component in the package should have its own stories file
+import type { Meta, StoryObj } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Spaces } from './Spaces';
+import { SpacesImage, SpacesImageProps } from './SpacesImage';
+
+const meta: Meta<typeof SpacesImage> = {
+  title: 'Components/Spaces/SpacesImage',
+  component: SpacesImage,
+  tags: ['autodocs'],
+  argTypes: {
+    spaceId: {
+      table: {
+        readonly: true,
+      },
+    },
+  },
+};
+
+export default meta;
+
+const queryClient = new QueryClient();
+
+export const _SpacesImage: StoryObj<typeof SpacesImage> = {
+  render: (args: SpacesImageProps) => (
+    <QueryClientProvider client={queryClient}>
+      <Spaces clientId="clientId" spaceIds={['11', '22', '33']}>
+        <SpacesImage {...args} />
+      </Spaces>
+    </QueryClientProvider>
+  ),
+  args: {
+    spaceId: '33',
+  },
+};
+
+export const _SpacesLogo: StoryObj<typeof SpacesImage> = {
+  render: (args: SpacesImageProps) => (
+    <QueryClientProvider client={queryClient}>
+      <Spaces clientId="clientId" spaceIds={['11', '22', '33']}>
+        <SpacesImage {...args} />
+      </Spaces>
+    </QueryClientProvider>
+  ),
+  args: {
+    spaceId: '11',
+    imageType: 'images.logo',
+  },
+};
+
+export const _SpacesTile: StoryObj<typeof SpacesImage> = {
+  render: (args: SpacesImageProps) => (
+    <QueryClientProvider client={queryClient}>
+      <Spaces clientId="clientId" spaceIds={['11', '22', '33']}>
+        <SpacesImage {...args} />
+      </Spaces>
+    </QueryClientProvider>
+  ),
+  args: {
+    spaceId: '22',
+    imageType: 'images.tile',
+  },
+};
+
+export const _SpacesBillboard: StoryObj<typeof SpacesImage> = {
+  render: (args: SpacesImageProps) => (
+    <QueryClientProvider client={queryClient}>
+      <Spaces clientId="clientId" spaceIds={['11', '22', '33']}>
+        <SpacesImage {...args} />
+      </Spaces>
+    </QueryClientProvider>
+  ),
+  args: {
+    spaceId: '22',
+    imageType: 'images.billboard',
+  },
+};

package/src/lib/SpacesImage.test.tsx

@@ -0,0 +1,45 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, waitForElementToBeRemoved } from '@testing-library/react';
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { server } from '@availity/mock/src/lib/server';
+import { SpacesImage } from './SpacesImage';
+import { Spaces } from './Spaces';
+
+const mockImage = jest.fn();
+
+jest.mock('react-image', () => ({
+  ...(jest.requireActual('react-image') as any),
+  Img: (props: any) => mockImage(props),
+}));
+
+beforeAll(() => {
+  // Start the interception.
+  server.listen();
+});
+
+afterEach(() => {
+  // Remove any handlers you may have added
+  // in individual tests (runtime handlers).
+  server.resetHandlers();
+  jest.restoreAllMocks();
+});
+
+describe('SpacesImage', () => {
+  it('should render successfully', async () => {
+    const queryClient = new QueryClient();
+
+    const { getByRole } = render(
+      <QueryClientProvider client={queryClient}>
+        <Spaces spaceIds={['11', '22', '33']} clientId="clientId">
+          <SpacesImage spaceId="33" />
+        </Spaces>
+      </QueryClientProvider>
+    );
+
+    // Expect loader to display
+    await waitForElementToBeRemoved(getByRole('progressbar'));
+
+    // Ensure the correct src was selected.
+    expect(mockImage.mock.calls[0][0].src).toEqual('/element/spaces/tile.jpg');
+  });
+});

package/src/lib/SpacesImage.tsx

@@ -0,0 +1,72 @@
+import { CircularProgress } from '@availity/mui-progress';
+import { Img } from 'react-image';
+import { useSpaces, useSpacesContext } from './Spaces';
+
+type BaseSpacesImageProps = {
+  imageType?:
+    | 'url'
+    | 'images.logo'
+    | 'images.tile'
+    | 'images.billboard'
+    | 'images.promotional'
+    | 'images.promotionalHover';
+  fallback?: string;
+  id?: string;
+};
+
+type SpacesImageSpaceId = {
+  spaceId: string;
+  payerId?: string;
+} & BaseSpacesImageProps;
+
+type SpacesImagePayerId = {
+  spaceId?: string;
+  payerId: string;
+} & BaseSpacesImageProps;
+
+export type SpacesImageProps = SpacesImageSpaceId | SpacesImagePayerId;
+
+export const SpacesImage = ({ spaceId, payerId, imageType = 'url', fallback, ...props }: SpacesImageProps) => {
+  let spaces;
+
+  if (spaceId) {
+    spaces = useSpaces(spaceId);
+  } else if (payerId) {
+    spaces = useSpaces(payerId);
+  }
+
+  const { loading } = useSpacesContext();
+
+  const id = spaceId || payerId || spaces?.[0].id || spaces?.[0].configurationId;
+
+  const imageMap = {
+    'images.logo': spaces?.[0]?.images?.logo,
+    'images.tile': spaces?.[0]?.images?.tile,
+    'images.billboard': spaces?.[0]?.images?.billboard,
+    'images.promotional': spaces?.[0]?.images?.promotional,
+    'images.promotionalHover': spaces?.[0]?.images?.promotionalHover,
+    url: spaces?.[0]?.url,
+  };
+
+  let url = imageMap[imageType];
+
+  if (!url && loading) {
+    return <CircularProgress id={`app-${id}-loading`} />;
+  }
+
+  if (!url && !loading && fallback) {
+    url = fallback;
+  }
+
+  if (!url || !id) return null;
+
+  return (
+    <Img
+      id={props.id || `app-img-${id}`}
+      src={url}
+      alt={`Space ${imageType}`}
+      loader={<CircularProgress id={`app-img-${id}-loading`} />}
+      {...props}
+    />
+  );
+};

package/src/lib/configurationFindMany.tsx

@@ -15,6 +15,7 @@ export default `query configurationFindMany($ids: [String!], $payerIDs: [ID!], $
         description
         payerIDs
         parentIDs
+        meta
         metadataPairs {
           name
           value

package/src/lib/spaces-data.test.tsx

@@ -1,4 +1,4 @@
-import { normalizeSpaces, fetchAllSpaces } from './spaces-data';
+import { fetchAllSpaces } from './spaces-data';
 import configurationFindMany from './configurationFindMany';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { server } from '../../../mock/src/lib/server';
@@ -34,24 +34,3 @@ describe('getAllSpaces', () => {
     expect(spaces[spaces.length - 1].id).toBe('10');
   });
 });
-
-describe('normalizeSpaces', () => {
-  it('normalizes space pairs', async () => {
-    const spaces = [
-      {
-        id: '1',
-        configurationId: '1',
-        type: 'space',
-        name: 'Space 1',
-        metadata: [
-          { name: 'a', value: '1' },
-          { name: 'b', value: '2' },
-        ],
-      },
-    ];
-
-    const sanitized = normalizeSpaces(spaces);
-
-    expect(sanitized[0].metadata).toEqual({ a: '1', b: '2' });
-  });
-});

package/src/lib/spaces-data.tsx

@@ -1,15 +1,5 @@
 import { avWebQLApi } from '@availity/api-axios';
-import {
-  Space,
-  NameValuePair,
-  NormalizedSpace,
-  NormalizedPairField,
-  PairFields,
-  FetchSpacesProps,
-  FetchAllSpacesProps,
-  SpacesContextType,
-  SpacesReducerAction,
-} from './spaces-types';
+import { Space, FetchSpacesProps, FetchAllSpacesProps, SpacesContextType, SpacesReducerAction } from './spaces-types';
 
 export const actions = {
   SPACES: (
@@ -38,36 +28,6 @@ export const spacesReducer = (state: SpacesContextType, action: SpacesReducerAct
   return actions[type](state, action);
 };
 
-export const normalizeSpaces = (spaces: (Space | Space[] | undefined)[]): NormalizedSpace[] => {
-  // if spaces coming in is array of an array of spaces objects,
-  // then we matched by payerId and should unravel that first level of array
-  let spacesToReduce = spaces;
-  if (Array.isArray(spaces[0])) {
-    spacesToReduce = spaces[0];
-  }
-  // Normalize space pairs ( [{ name: 'foo'', value: 'bar' }] => { foo: 'bar' } )
-  const pairFields: PairFields = ['images', 'metadata', 'colors', 'icons', 'mapping'];
-  return spacesToReduce.reduce((accum: NormalizedSpace[], spc: Space): NormalizedSpace[] => {
-    if (!spc) return accum;
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { images, metadata, colors, icons, mapping, ...rest } = spc;
-    const normalizedSpace: NormalizedSpace = { ...rest };
-
-    for (const field of pairFields) {
-      if (spc[field] && Array.isArray(spc[field])) {
-        normalizedSpace[field] = spc[field]?.reduce((_accum: NormalizedPairField, { name, value }: NameValuePair) => {
-          _accum[name] = value;
-          return _accum;
-        }, {});
-      }
-    }
-
-    accum.push(normalizedSpace);
-    return accum;
-  }, []);
-};
-
 export const fetchSpaces = async ({ query, clientId, variables }: FetchSpacesProps) => {
   // eslint-disable-next-line no-useless-catch
   const {

package/src/lib/spaces-types.tsx

@@ -12,7 +12,13 @@ export type NameValuePair = {
   value: string;
 };
 
-export type PairFields = ('images' | 'metadata' | 'colors' | 'icons' | 'mapping')[];
+export type SpacesImages = {
+  billboard?: string;
+  logo?: string;
+  promotional?: string;
+  promotionalHover?: string;
+  tile?: string;
+};
 
 export type Space = {
   /** The name of the content or configuration. */
@@ -26,38 +32,30 @@ export type Space = {
   /** A list of payerIds for the configuration or content. */
   payerIDs?: string[];
   /** The images associated with the configuration. */
-  images?: NameValuePair[];
+  images?: SpacesImages;
+  /** Metadata for a configuration */
+  meta?: Record<string, string>;
   /** Key-value data for a configuration. */
-  metadata?: NameValuePair[];
+  metadataPairs?: NameValuePair[];
   /** The feature box colors associated with the Payer Space. */
-  colors?: NameValuePair[];
+  colors?: Record<string, string>;
   /** Contains URL fragments that point to icons. */
-  icons?: NameValuePair[];
+  icons?: Record<string, string>;
   /** The key-value mapping pairs. */
-  mapping?: NameValuePair[];
-};
-
-export type NormalizedPairField = { [key: string]: string };
-
-export interface NormalizedSpace extends Omit<Space, 'images' | 'metadata' | 'colors' | 'icons' | 'mapping'> {
-  /** The images associated with the configuration. */
-  images?: NormalizedPairField;
-  /** The feature box colors associated with the Payer Space. */
-  colors?: NormalizedPairField;
-  /** Contains URL fragments that point to icons. */
-  icons?: NormalizedPairField;
-  /** Key-value data for a configuration. */
-  metadata?: NormalizedPairField;
-  /** The key-value mapping pairs. */
-  mapping?: NormalizedPairField;
-  /** URL metadata for the configuration. */
+  mapping?: Record<string, string>;
+  mappingPairs?: NameValuePair[];
+  /** Whether or not the space is ghosted */
+  isGhost?: boolean;
   link?: {
     /** Contains a URL or URL Fragment that the hyperlink points to. */
     url: string;
     /** Specifies where to open the linked URL. */
     target: string;
   };
-}
+  /** The description of the configuration. */
+  description?: string;
+  url?: string;
+};
 
 export type FetchSpacesProps = {
   /** The query sent to the avWebQL endpoint. */
@@ -109,7 +107,7 @@ export interface SpacesReducerAction extends SpacesContextType {
 
 export type ChildrenProps = {
   /** Array of spaces to be passed into the Spaces provider. */
-  spaces: NormalizedSpace[];
+  spaces: Space[];
 };
 
 export type SpacesProps = {