From 33a7dc76e30a34e35814f21b8791a90ff931cac6 Mon Sep 17 00:00:00 2001
From: Kesava Krishnan Madavan <mkesavan13@gmail.com>
Date: Thu, 16 Jan 2025 09:40:29 +0530
Subject: [PATCH 01/15] feat(cc-components): user state sample ui comp

---
 .../contact-center/cc-components/.babelrc.js  |   3 +
 .../contact-center/cc-components/package.json |  71 ++++++++++
 .../components}/user-state/use-state.types.ts |   0
 .../src/components/user-state/user-state.scss |  67 ++++++++++
 .../src/components/user-state/user-state.tsx  |  58 ++++++++
 .../contact-center/cc-components/src/index.ts |   4 +
 .../contact-center/cc-components/src/wc.ts    |   8 ++
 .../cc-components/tsconfig.json               |  11 ++
 .../cc-components/webpack.config.js           |  25 ++++
 .../contact-center/user-state/package.json    |   1 +
 .../user-state/src/user-state/index.tsx       |   5 +-
 .../user-state/user-state.presentational.tsx  | 124 ------------------
 yarn.lock                                     |  37 ++++++
 13 files changed, 287 insertions(+), 127 deletions(-)
 create mode 100644 packages/contact-center/cc-components/.babelrc.js
 create mode 100644 packages/contact-center/cc-components/package.json
 rename packages/contact-center/{user-state/src => cc-components/src/components}/user-state/use-state.types.ts (100%)
 create mode 100644 packages/contact-center/cc-components/src/components/user-state/user-state.scss
 create mode 100644 packages/contact-center/cc-components/src/components/user-state/user-state.tsx
 create mode 100644 packages/contact-center/cc-components/src/index.ts
 create mode 100644 packages/contact-center/cc-components/src/wc.ts
 create mode 100644 packages/contact-center/cc-components/tsconfig.json
 create mode 100644 packages/contact-center/cc-components/webpack.config.js
 delete mode 100644 packages/contact-center/user-state/src/user-state/user-state.presentational.tsx

diff --git a/packages/contact-center/cc-components/.babelrc.js b/packages/contact-center/cc-components/.babelrc.js
new file mode 100644
index 000000000..c78379731
--- /dev/null
+++ b/packages/contact-center/cc-components/.babelrc.js
@@ -0,0 +1,3 @@
+const baseConfig = require('../../../.babelrc');
+
+module.exports = baseConfig;
diff --git a/packages/contact-center/cc-components/package.json b/packages/contact-center/cc-components/package.json
new file mode 100644
index 000000000..378a60def
--- /dev/null
+++ b/packages/contact-center/cc-components/package.json
@@ -0,0 +1,71 @@
+{
+  "name": "@webex/cc-components",
+  "description": "Webex Contact Center Widgets",
+  "version": "1.28.0-ccwidgets.9",
+  "main": "dist/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist/",
+    "package.json"
+  ],
+  "exports": {
+    ".": "./dist/index.js",
+    "./wc": "./dist/wc.js"
+  },
+  "scripts": {
+    "clean": "rm -rf dist && rm -rf node_modules",
+    "clean:dist": "rm -rf dist",
+    "build": "yarn run -T tsc",
+    "build:src": "yarn run clean:dist && webpack",
+    "build:watch": "webpack --watch",
+    "test:unit": "jest"
+  },
+  "dependencies": {
+    "@r2wc/react-to-web-component": "2.0.3",
+    "@webex/cc-store": "workspace:*"
+  },
+  "devDependencies": {
+    "@babel/core": "7.25.2",
+    "@babel/preset-env": "7.25.4",
+    "@babel/preset-react": "7.24.7",
+    "@babel/preset-typescript": "7.25.9",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/jest-dom": "6.6.2",
+    "@testing-library/react": "16.0.1",
+    "@types/jest": "29.5.14",
+    "@types/react-test-renderer": "18",
+    "babel-jest": "29.7.0",
+    "babel-loader": "9.2.1",
+    "crypto-browserify": "^3.12.1",
+    "file-loader": "6.2.0",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "os-browserify": "^0.3.0",
+    "process": "^0.11.10",
+    "querystring-es3": "^0.2.1",
+    "stream-browserify": "^3.0.0",
+    "ts-loader": "9.5.1",
+    "typescript": "5.6.3",
+    "url": "^0.11.4",
+    "util": "^0.12.5",
+    "vm-browserify": "^1.1.2",
+    "webpack": "5.94.0",
+    "webpack-cli": "5.1.4",
+    "webpack-merge": "6.0.1"
+  },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "//": "We can remove this when we have tests",
+    "passWithNoTests": true,
+    "testMatch": [
+      "**/tests/**/*.ts",
+      "**/tests/**/*.tsx"
+    ],
+    "moduleNameMapper": {
+      "^.+\\.(css|less|scss)$": "babel-jest"
+    }
+  },
+  "stableVersion": "1.28.0-ccwidgets.8"
+}
diff --git a/packages/contact-center/user-state/src/user-state/use-state.types.ts b/packages/contact-center/cc-components/src/components/user-state/use-state.types.ts
similarity index 100%
rename from packages/contact-center/user-state/src/user-state/use-state.types.ts
rename to packages/contact-center/cc-components/src/components/user-state/use-state.types.ts
diff --git a/packages/contact-center/cc-components/src/components/user-state/user-state.scss b/packages/contact-center/cc-components/src/components/user-state/user-state.scss
new file mode 100644
index 000000000..4b203ff47
--- /dev/null
+++ b/packages/contact-center/cc-components/src/components/user-state/user-state.scss
@@ -0,0 +1,67 @@
+.box {
+    background-color: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.sectionBox {
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+}
+
+.fieldset {
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: 20px;
+    position: relative;
+}
+
+.legendBox {
+    font-weight: bold;
+    color: #0052bf;
+}
+
+.btn {
+    padding: 10px 20px;
+    background-color: #0052bf;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    margin-right: 8px;
+}
+
+.select {
+    width: 100%;
+    padding: 8px;
+    margin-top: 8px;
+    margin-bottom: 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.input {
+    width: 97%;
+    padding: 8px;
+    margin-top: 8px;
+    margin-bottom: 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.elapsedTime {
+    position: absolute;
+    right: 30px;
+    top: 25px;
+    color: black; /* Replace with dynamic styling as needed */
+}
+
+.elapsedTime-disabled {
+    color: #ccc;
+}
\ No newline at end of file
diff --git a/packages/contact-center/cc-components/src/components/user-state/user-state.tsx b/packages/contact-center/cc-components/src/components/user-state/user-state.tsx
new file mode 100644
index 000000000..1bf779dec
--- /dev/null
+++ b/packages/contact-center/cc-components/src/components/user-state/user-state.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+
+import {IUserState} from './use-state.types';
+
+import './user-state.scss';
+
+const UserStateComponent: React.FunctionComponent<IUserState> = (props) => {
+  const {idleCodes,setAgentStatus,isSettingAgentStatus, errorMessage, elapsedTime, currentState} = props;
+
+  const formatTime = (time: number): string => {
+    const hours = Math.floor(time / 3600);
+    const minutes = Math.floor((time % 3600) / 60);
+    const seconds = time % 60;
+    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+  };
+
+  return (
+    <>
+      <div className='box'>
+        <section className='sectionBox'>
+          <fieldset className='fieldset'>
+            <legend data-testid='user-state-title' className='legendBox'>Agent State</legend>
+            <div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }} />
+            <select
+              id="idleCodes"
+              value={currentState.id}
+              className='select'
+              onChange={
+                (event) => {
+                  const code = idleCodes?.filter(code => code.id === event.target.value)[0];
+                  setAgentStatus(code);
+                }
+              }
+              disabled={isSettingAgentStatus}
+            >
+              {idleCodes?.filter(code => !code.isSystem).map((code) => {
+                return (
+                  <option
+                    key={code.id}
+                    value={code.id}
+                  >
+                      {code.name}
+                  </option>
+                );
+            })}
+            </select>
+            <div className={`elapsedTime ${isSettingAgentStatus ? 'elapsedTime-disabled' : ''}`}>{formatTime(elapsedTime)}</div>
+            {
+              errorMessage && <div style={{color: 'red'}}>{errorMessage}</div>
+            }
+          </fieldset>
+        </section>
+      </div>
+    </>
+  );
+};
+
+export default UserStateComponent;
diff --git a/packages/contact-center/cc-components/src/index.ts b/packages/contact-center/cc-components/src/index.ts
new file mode 100644
index 000000000..2ef38bf36
--- /dev/null
+++ b/packages/contact-center/cc-components/src/index.ts
@@ -0,0 +1,4 @@
+import UserStateComponent from './components/user-state/user-state';
+import {IUserState} from './components/user-state/use-state.types';
+
+export {UserStateComponent, type IUserState};
diff --git a/packages/contact-center/cc-components/src/wc.ts b/packages/contact-center/cc-components/src/wc.ts
new file mode 100644
index 000000000..a1f3e7d89
--- /dev/null
+++ b/packages/contact-center/cc-components/src/wc.ts
@@ -0,0 +1,8 @@
+import r2wc from '@r2wc/react-to-web-component';
+import UserStateComponent from './components/user-state/user-state';
+
+const WebUserState = r2wc(UserStateComponent);
+
+if (!customElements.get('component-cc-user-state')) {
+  customElements.define('component-cc-user-state', WebUserState);
+}
\ No newline at end of file
diff --git a/packages/contact-center/cc-components/tsconfig.json b/packages/contact-center/cc-components/tsconfig.json
new file mode 100644
index 000000000..50b68ce6a
--- /dev/null
+++ b/packages/contact-center/cc-components/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": [
+      "./src"
+  ],
+  "compilerOptions": {
+      "outDir": "./dist",
+      "declaration": true,
+      "declarationDir": "./dist/types"
+  },
+}
\ No newline at end of file
diff --git a/packages/contact-center/cc-components/webpack.config.js b/packages/contact-center/cc-components/webpack.config.js
new file mode 100644
index 000000000..7a809d382
--- /dev/null
+++ b/packages/contact-center/cc-components/webpack.config.js
@@ -0,0 +1,25 @@
+const {merge} = require('webpack-merge');
+const path = require('path');
+
+const baseConfig = require('../../../webpack.config');
+
+module.exports = merge(baseConfig, {
+  entry: {
+    wc: {
+      import: './src/wc.ts',
+    },
+    index: {
+      import: './src/index.ts',
+    },
+  },
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: '[name].js', // Set the output filename to index.js
+    libraryTarget: 'commonjs2',
+  },
+  externals: {
+    react: 'react',
+    'react-dom': 'react-dom',
+    '@webex/cc-store': '@webex/cc-store',
+  }
+});
diff --git a/packages/contact-center/user-state/package.json b/packages/contact-center/user-state/package.json
index 8eb57d539..e07df9862 100644
--- a/packages/contact-center/user-state/package.json
+++ b/packages/contact-center/user-state/package.json
@@ -19,6 +19,7 @@
     "test:unit": "jest"
   },
   "dependencies": {
+    "@webex/cc-components": "workspace:*",
     "@webex/cc-store": "workspace:*",
     "mobx-react-lite": "^4.1.0",
     "typescript": "5.6.3"
diff --git a/packages/contact-center/user-state/src/user-state/index.tsx b/packages/contact-center/user-state/src/user-state/index.tsx
index 0fba12c61..df30969b6 100644
--- a/packages/contact-center/user-state/src/user-state/index.tsx
+++ b/packages/contact-center/user-state/src/user-state/index.tsx
@@ -3,8 +3,7 @@ import store from '@webex/cc-store';
 import {observer} from 'mobx-react-lite';
 
 import {useUserState} from '../helper';
-import UserStatePresentational from './user-state.presentational';
-import {IUserState} from './use-state.types';
+import {UserStateComponent, IUserState} from '@webex/cc-components';
 
 const UserState: React.FunctionComponent = observer(() => {
   const {cc, idleCodes, agentId} = store;
@@ -14,7 +13,7 @@ const UserState: React.FunctionComponent = observer(() => {
     cc
   });
 
-  return <UserStatePresentational {...props} />;
+  return <UserStateComponent {...props}/>;
 });
 
 export {UserState};
diff --git a/packages/contact-center/user-state/src/user-state/user-state.presentational.tsx b/packages/contact-center/user-state/src/user-state/user-state.presentational.tsx
deleted file mode 100644
index c4cb44c39..000000000
--- a/packages/contact-center/user-state/src/user-state/user-state.presentational.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import React, {CSSProperties, useMemo} from 'react';
-
-import {IUserState} from './use-state.types';
-
-const getStyles = (isSettingAgentStatus: boolean): Record<string, CSSProperties> => ({
-  box: {
-    backgroundColor: '#ffffff',
-    borderRadius: '8px',
-    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
-    padding: '20px',
-    maxWidth: '800px',
-    margin: '0 auto'
-  },
-
-  sectionBox: {
-    padding: '10px',
-    border: '1px solid #ddd',
-    borderRadius: '8px'
-  },
-
-  fieldset:  {
-    border: '1px solid #ccc',
-    borderRadius: '5px',
-    padding: '10px',
-    marginBottom: '20px',
-    position: 'relative'
-  } as CSSProperties,
-
-  legendBox: {
-    fontWeight: 'bold',
-    color: '#0052bf'
-  },
-
-  btn: {
-    padding: '10px 20px',
-    backgroundColor: '#0052bf',
-    color: 'white',
-    border: 'none',
-    borderRadius: '4px',
-    cursor: 'pointer',
-    transition: 'background-color 0.3s',
-    marginRight: '8px'
-  },
-
-  select: {
-    width: '100%',
-    padding: '8px',
-    marginTop: '8px',
-    marginBottom: '12px',
-    border: '1px solid #ccc',
-    borderRadius: '4px'
-  },
-
-  input: {
-    width: '97%',
-    padding: '8px',
-    marginTop: '8px',
-    marginBottom: '12px',
-    border: '1px solid #ccc',
-    borderRadius: '4px'
-  },
-
-  elapsedTime: {
-    position: 'absolute',
-    right: '30px',
-    top: '25px',
-    color: isSettingAgentStatus ? 'grey' : 'black'
-  } as CSSProperties
-});
-
-const UserStatePresentational: React.FunctionComponent<IUserState> = (props) => {
-  const {idleCodes,setAgentStatus,isSettingAgentStatus, errorMessage, elapsedTime, currentState} = props;
-
-  const styles = useMemo(() => getStyles(isSettingAgentStatus), [isSettingAgentStatus]);
-
-  const formatTime = (time: number): string => {
-    const hours = Math.floor(time / 3600);
-    const minutes = Math.floor((time % 3600) / 60);
-    const seconds = time % 60;
-    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
-  };
-
-  return (
-    <>
-      <div style={styles.box}>
-        <section style={styles.sectionBox}>
-          <fieldset style={styles.fieldset}>
-            <legend data-testid='user-state-title' style={styles.legendBox}>Agent State</legend>
-            <div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}></div>
-            <select
-              id="idleCodes"
-              value={currentState.id}
-              style={styles.select}
-              onChange={
-                (event) => {
-                  const code = idleCodes?.filter(code => code.id === event.target.value)[0];
-                  setAgentStatus(code);
-                }
-              }
-              disabled={isSettingAgentStatus}
-            >
-              {idleCodes?.filter(code => !code.isSystem).map((code) => {
-                return (
-                  <option
-                    key={code.id}
-                    value={code.id}
-                  >
-                      {code.name}
-                  </option>
-                );
-            })}
-            </select>
-            <div style={styles.elapsedTime}>{formatTime(elapsedTime)}</div>
-            {
-              errorMessage && <div style={{color: 'red'}}>{errorMessage}</div>
-            }
-          </fieldset>
-        </section>
-      </div>
-    </>
-  );
-};
-
-export default UserStatePresentational;
diff --git a/yarn.lock b/yarn.lock
index 35b9bd5af..30125756f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5603,6 +5603,42 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@webex/cc-components@workspace:*, @webex/cc-components@workspace:packages/contact-center/cc-components":
+  version: 0.0.0-use.local
+  resolution: "@webex/cc-components@workspace:packages/contact-center/cc-components"
+  dependencies:
+    "@babel/core": "npm:7.25.2"
+    "@babel/preset-env": "npm:7.25.4"
+    "@babel/preset-react": "npm:7.24.7"
+    "@babel/preset-typescript": "npm:7.25.9"
+    "@r2wc/react-to-web-component": "npm:2.0.3"
+    "@testing-library/dom": "npm:10.4.0"
+    "@testing-library/jest-dom": "npm:6.6.2"
+    "@testing-library/react": "npm:16.0.1"
+    "@types/jest": "npm:29.5.14"
+    "@types/react-test-renderer": "npm:18"
+    "@webex/cc-store": "workspace:*"
+    babel-jest: "npm:29.7.0"
+    babel-loader: "npm:9.2.1"
+    crypto-browserify: "npm:^3.12.1"
+    file-loader: "npm:6.2.0"
+    jest: "npm:29.7.0"
+    jest-environment-jsdom: "npm:29.7.0"
+    os-browserify: "npm:^0.3.0"
+    process: "npm:^0.11.10"
+    querystring-es3: "npm:^0.2.1"
+    stream-browserify: "npm:^3.0.0"
+    ts-loader: "npm:9.5.1"
+    typescript: "npm:5.6.3"
+    url: "npm:^0.11.4"
+    util: "npm:^0.12.5"
+    vm-browserify: "npm:^1.1.2"
+    webpack: "npm:5.94.0"
+    webpack-cli: "npm:5.1.4"
+    webpack-merge: "npm:6.0.1"
+  languageName: unknown
+  linkType: soft
+
 "@webex/cc-station-login@workspace:*, @webex/cc-station-login@workspace:packages/contact-center/station-login":
   version: 0.0.0-use.local
   resolution: "@webex/cc-station-login@workspace:packages/contact-center/station-login"
@@ -5707,6 +5743,7 @@ __metadata:
     "@testing-library/react": "npm:16.0.1"
     "@types/jest": "npm:29.5.14"
     "@types/react-test-renderer": "npm:18"
+    "@webex/cc-components": "workspace:*"
     "@webex/cc-store": "workspace:*"
     babel-jest: "npm:29.7.0"
     babel-loader: "npm:9.2.1"

From 123b4e253769a12e137e39851547ec1d8a4f1937 Mon Sep 17 00:00:00 2001
From: Kesava Krishnan Madavan <mkesavan13@gmail.com>
Date: Thu, 16 Jan 2025 09:44:57 +0530
Subject: [PATCH 02/15] fix(cc-components): move user state comp test

---
 .../tests/components/user-state/user-state.tsx}             | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)
 rename packages/contact-center/{user-state/tests/user-state/user-state.presentational.tsx => cc-components/tests/components/user-state/user-state.tsx} (91%)

diff --git a/packages/contact-center/user-state/tests/user-state/user-state.presentational.tsx b/packages/contact-center/cc-components/tests/components/user-state/user-state.tsx
similarity index 91%
rename from packages/contact-center/user-state/tests/user-state/user-state.presentational.tsx
rename to packages/contact-center/cc-components/tests/components/user-state/user-state.tsx
index c17517aa6..083a7e39d 100644
--- a/packages/contact-center/user-state/tests/user-state/user-state.presentational.tsx
+++ b/packages/contact-center/cc-components/tests/components/user-state/user-state.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import UserStatePresentational from '../../src/user-state/user-state.presentational';
+import UserStatePresentational from '../../../src/components/user-state/user-state';
 
 describe('UserStatePresentational Component', () => {
   const mockSetAgentStatus = jest.fn();
@@ -54,9 +54,9 @@ describe('UserStatePresentational Component', () => {
 
   it('should render elapsed time in correct color based on isSettingAgentStatus', () => {
     const { rerender } = render(<UserStatePresentational {...defaultProps} />);
-    expect(screen.getByText('01:01:01')).toHaveStyle('color: black');
+    expect(screen.getByText('01:01:01')).toHaveClass('elapsedTime');
 
     rerender(<UserStatePresentational {...{ ...defaultProps, isSettingAgentStatus: true }} />);
-    expect(screen.getByText('01:01:01')).toHaveStyle('color: grey');
+    expect(screen.getByText('01:01:01')).toHaveClass('elapsedTime elapsedTime-disabled');
   });
 });

From ddcc9acdf8fcc229a69d6603b088f4566e1da51c Mon Sep 17 00:00:00 2001
From: Kesava Krishnan Madavan <mkesavan13@gmail.com>
Date: Thu, 16 Jan 2025 10:50:38 +0530
Subject: [PATCH 03/15] fix(cc-components): update typo on user-state type

---
 .../cc-components/src/components/user-state/user-state.tsx      | 2 +-
 .../user-state/{use-state.types.ts => user-state.types.ts}      | 0
 packages/contact-center/cc-components/src/index.ts              | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename packages/contact-center/cc-components/src/components/user-state/{use-state.types.ts => user-state.types.ts} (100%)

diff --git a/packages/contact-center/cc-components/src/components/user-state/user-state.tsx b/packages/contact-center/cc-components/src/components/user-state/user-state.tsx
index 1bf779dec..b2d19f39f 100644
--- a/packages/contact-center/cc-components/src/components/user-state/user-state.tsx
+++ b/packages/contact-center/cc-components/src/components/user-state/user-state.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {IUserState} from './use-state.types';
+import {IUserState} from './user-state.types';
 
 import './user-state.scss';
 
diff --git a/packages/contact-center/cc-components/src/components/user-state/use-state.types.ts b/packages/contact-center/cc-components/src/components/user-state/user-state.types.ts
similarity index 100%
rename from packages/contact-center/cc-components/src/components/user-state/use-state.types.ts
rename to packages/contact-center/cc-components/src/components/user-state/user-state.types.ts
diff --git a/packages/contact-center/cc-components/src/index.ts b/packages/contact-center/cc-components/src/index.ts
index 2ef38bf36..13f252c60 100644
--- a/packages/contact-center/cc-components/src/index.ts
+++ b/packages/contact-center/cc-components/src/index.ts
@@ -1,4 +1,4 @@
 import UserStateComponent from './components/user-state/user-state';
-import {IUserState} from './components/user-state/use-state.types';
+import {IUserState} from './components/user-state/user-state.types';
 
 export {UserStateComponent, type IUserState};

From e80ad79fd05a604b34338324bbb2e9a934069c2a Mon Sep 17 00:00:00 2001
From: Kesava Krishnan Madavan <mkesavan13@gmail.com>
Date: Thu, 16 Jan 2025 12:42:49 +0530
Subject: [PATCH 04/15] test: update test configs

---
 packages/contact-center/cc-components/package.json            | 2 --
 packages/contact-center/user-state/tests/user-state/index.tsx | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/contact-center/cc-components/package.json b/packages/contact-center/cc-components/package.json
index 378a60def..90b150463 100644
--- a/packages/contact-center/cc-components/package.json
+++ b/packages/contact-center/cc-components/package.json
@@ -57,8 +57,6 @@
   },
   "jest": {
     "testEnvironment": "jsdom",
-    "//": "We can remove this when we have tests",
-    "passWithNoTests": true,
     "testMatch": [
       "**/tests/**/*.ts",
       "**/tests/**/*.tsx"
diff --git a/packages/contact-center/user-state/tests/user-state/index.tsx b/packages/contact-center/user-state/tests/user-state/index.tsx
index b4c1b81c2..7db35e9a2 100644
--- a/packages/contact-center/user-state/tests/user-state/index.tsx
+++ b/packages/contact-center/user-state/tests/user-state/index.tsx
@@ -27,7 +27,7 @@ describe('UserState Component', () => {
     global.URL.createObjectURL = jest.fn(() => 'blob:http://localhost:3000/12345');
   });
 
-  it('renders UserStatePresentational with correct props', () => {
+  it('renders UserStateComponent with correct props', () => {
     const useUserStateSpy = jest.spyOn(helper, 'useUserState');
     
     render(<UserState/>);

From c9b4b78c02e97a003285b0b3b1feb1284c04ce62 Mon Sep 17 00:00:00 2001
From: Kesava Krishnan Madavan <mkesavan13@gmail.com>
Date: Thu, 16 Jan 2025 17:11:27 +0530
Subject: [PATCH 05/15] feat: add dark theme toggle for user state and sample

---
 docs/react-samples/src/App.tsx                |  14 +-
 .../src/components/user-state/user-state.scss | 204 ++++++++++++------
 .../src/components/user-state/user-state.tsx  |   4 +-
 .../components/user-state/user-state.types.ts |   5 +
 packages/contact-center/store/src/store.ts    |   5 +
 .../contact-center/user-state/src/helper.ts   |   5 +-
 .../user-state/src/user-state/index.tsx       |   5 +-
 7 files changed, 171 insertions(+), 71 deletions(-)

diff --git a/docs/react-samples/src/App.tsx b/docs/react-samples/src/App.tsx
index 750a0df45..7e24a65bf 100644
--- a/docs/react-samples/src/App.tsx
+++ b/docs/react-samples/src/App.tsx
@@ -1,10 +1,11 @@
-import React, {useState} from 'react';
+import React, {useState, useRef} from 'react';
 import {StationLogin, UserState, IncomingTask, TaskList, store} from '@webex/cc-widgets';
 
 function App() {
   const [isSdkReady, setIsSdkReady] = useState(false);
   const [accessToken, setAccessToken] = useState('');
   const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const themeCheckbox = useRef(null);
 
   const webexConfig = {
     fedramp: false,
@@ -48,6 +49,17 @@ function App() {
         value={accessToken}
         onChange={(e) => setAccessToken(e.target.value)}
       />
+      <br />
+      <input
+        type='checkbox'
+        id='theme'
+        name='theme'
+        ref={themeCheckbox}
+        onChange={() => {
+          store.setCurrentTheme(themeCheckbox.current.checked ? 'DARK' : 'LIGHT');
+        }}
+      /> Dark Theme
+      <br />
       <button
         disabled={accessToken.trim() === ''}
         onClick={() => {
diff --git a/packages/contact-center/cc-components/src/components/user-state/user-state.scss b/packages/contact-center/cc-components/src/components/user-state/user-state.scss
index 4b203ff47..0f719e04f 100644
--- a/packages/contact-center/cc-components/src/components/user-state/user-state.scss
+++ b/packages/contact-center/cc-components/src/components/user-state/user-state.scss
@@ -1,67 +1,143 @@
-.box {
-    background-color: #ffffff;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    padding: 20px;
-    max-width: 800px;
-    margin: 0 auto;
+.light-theme {
+    &.box {
+        background-color: #ffffff;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        padding: 20px;
+        max-width: 800px;
+        margin: 0 auto;
+    }
+    
+    .sectionBox {
+        padding: 10px;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+    }
+    
+    .fieldset {
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        padding: 10px;
+        margin-bottom: 20px;
+        position: relative;
+    }
+    
+    .legendBox {
+        font-weight: bold;
+        color: #0052bf;
+    }
+    
+    .btn {
+        padding: 10px 20px;
+        background-color: #0052bf;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: background-color 0.3s;
+        margin-right: 8px;
+    }
+    
+    .select {
+        width: 100%;
+        padding: 8px;
+        margin-top: 8px;
+        margin-bottom: 12px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+    }
+    
+    .input {
+        width: 97%;
+        padding: 8px;
+        margin-top: 8px;
+        margin-bottom: 12px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+    }
+    
+    .elapsedTime {
+        position: absolute;
+        right: 30px;
+        top: 25px;
+        color: black; /* Replace with dynamic styling as needed */
+    }
+    
+    .elapsedTime-disabled {
+        color: #ccc;
+    }
 }
 
-.sectionBox {
-    padding: 10px;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-}
-
-.fieldset {
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    padding: 10px;
-    margin-bottom: 20px;
-    position: relative;
-}
-
-.legendBox {
-    font-weight: bold;
-    color: #0052bf;
-}
-
-.btn {
-    padding: 10px 20px;
-    background-color: #0052bf;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: background-color 0.3s;
-    margin-right: 8px;
-}
-
-.select {
-    width: 100%;
-    padding: 8px;
-    margin-top: 8px;
-    margin-bottom: 12px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-}
-
-.input {
-    width: 97%;
-    padding: 8px;
-    margin-top: 8px;
-    margin-bottom: 12px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-}
-
-.elapsedTime {
-    position: absolute;
-    right: 30px;
-    top: 25px;
-    color: black; /* Replace with dynamic styling as needed */
-}
-
-.elapsedTime-disabled {
-    color: #ccc;
+.dark-theme {
+    &.box {
+        background-color: #1e1e1e; /* Dark background */
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Darker shadow */
+        padding: 20px;
+        max-width: 800px;
+        margin: 0 auto;
+    }
+    
+    .sectionBox {
+        padding: 10px;
+        border: 1px solid #444; /* Darker border */
+        border-radius: 8px;
+    }
+    
+    .fieldset {
+        border: 1px solid #555; /* Darker border */
+        border-radius: 5px;
+        padding: 10px;
+        margin-bottom: 20px;
+        position: relative;
+    }
+    
+    .legendBox {
+        font-weight: bold;
+        color: #79a6d2; /* Lighter blue for dark theme */
+    }
+    
+    .btn {
+        padding: 10px 20px;
+        background-color: #79a6d2; /* Lighter blue */
+        color: #1e1e1e; /* Dark text on light button */
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: background-color 0.3s;
+        margin-right: 8px;
+    }
+    
+    .select {
+        width: 100%;
+        padding: 8px;
+        margin-top: 8px;
+        margin-bottom: 12px;
+        border: 1px solid #555; /* Darker border */
+        border-radius: 4px;
+        background-color: #2a2a2a; /* Dark background */
+        color: #fff; /* Light text */
+    }
+    
+    .input {
+        width: 97%;
+        padding: 8px;
+        margin-top: 8px;
+        margin-bottom: 12px;
+        border: 1px solid #555; /* Darker border */
+        border-radius: 4px;
+        background-color: #2a2a2a; /* Dark background */
+        color: #fff; /* Light text */
+    }
+    
+    .elapsedTime {
+        position: absolute;
+        right: 30px;
+        top: 25px;
+        color: #ddd; /* Light text for visibility */
+    }
+    
+    .elapsedTime-disabled {
+        color: #777; /* Darker gray for disabled state */
+    }
 }
\ No newline at end of file
diff --git a/packages/contact-center/cc-components/src/components/user-state/user-state.tsx b/packages/contact-center/cc-components/src/components/user-state/user-state.tsx
index b2d19f39f..f21d5f807 100644
--- a/packages/contact-center/cc-components/src/components/user-state/user-state.tsx
+++ b/packages/contact-center/cc-components/src/components/user-state/user-state.tsx
@@ -5,7 +5,7 @@ import {IUserState} from './user-state.types';
 import './user-state.scss';
 
 const UserStateComponent: React.FunctionComponent<IUserState> = (props) => {
-  const {idleCodes,setAgentStatus,isSettingAgentStatus, errorMessage, elapsedTime, currentState} = props;
+  const {idleCodes,setAgentStatus,isSettingAgentStatus, errorMessage, elapsedTime, currentState, currentTheme} = props;
 
   const formatTime = (time: number): string => {
     const hours = Math.floor(time / 3600);
@@ -16,7 +16,7 @@ const UserStateComponent: React.FunctionComponent<IUserState> = (props) => {
 
   return (
     <>
-      <div className='box'>
+      <div className={`box ${currentTheme === 'DARK' ? 'dark-theme' : 'light-theme'}`}>
         <section className='sectionBox'>
           <fieldset className='fieldset'>
             <legend data-testid='user-state-title' className='legendBox'>Agent State</legend>
diff --git a/packages/contact-center/cc-components/src/components/user-state/user-state.types.ts b/packages/contact-center/cc-components/src/components/user-state/user-state.types.ts
index 1d9708ae9..dd80dbfb2 100644
--- a/packages/contact-center/cc-components/src/components/user-state/user-state.types.ts
+++ b/packages/contact-center/cc-components/src/components/user-state/user-state.types.ts
@@ -46,4 +46,9 @@ export interface IUserState {
    * @returns void
    */
   setCurrentState: (state: IdleCode) => void;
+
+  /**
+   * The preferred theme
+   */
+  currentTheme?: string;
 }
diff --git a/packages/contact-center/store/src/store.ts b/packages/contact-center/store/src/store.ts
index 8acdf07fb..e6f4a935a 100644
--- a/packages/contact-center/store/src/store.ts
+++ b/packages/contact-center/store/src/store.ts
@@ -20,6 +20,7 @@ class Store implements IStore {
   idleCodes: IdleCode[] = [];
   agentId: string = '';
   selectedLoginOption: string = '';
+  currentTheme: string = 'light';
 
   constructor() {
     makeAutoObservable(this, {cc: observable.ref});
@@ -39,6 +40,10 @@ class Store implements IStore {
     this.selectedLoginOption = option;
   }
 
+  setCurrentTheme(theme: string): void {
+    this.currentTheme = theme;
+  }
+
   registerCC(webex: WithWebex['webex']): Promise<void> {
     this.cc = webex.cc;
     this.logger = this.cc.LoggerProxy;
diff --git a/packages/contact-center/user-state/src/helper.ts b/packages/contact-center/user-state/src/helper.ts
index 4f375d861..ed2f1925b 100644
--- a/packages/contact-center/user-state/src/helper.ts
+++ b/packages/contact-center/user-state/src/helper.ts
@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 // TODO: Export & Import this AGENT_STATE_CHANGE constant from SDK
 import { AGENT_STATE_CHANGE } from './constants';
 
-export const useUserState = ({ idleCodes, agentId, cc }) => {
+export const useUserState = ({ idleCodes, agentId, cc, currentTheme }) => {
   const [isSettingAgentStatus, setIsSettingAgentStatus] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
   const [elapsedTime, setElapsedTime] = useState(0);
@@ -91,6 +91,7 @@ export const useUserState = ({ idleCodes, agentId, cc }) => {
     errorMessage,
     elapsedTime,
     currentState,
-    setCurrentState
+    setCurrentState,
+    currentTheme
   };
 };
\ No newline at end of file
diff --git a/packages/contact-center/user-state/src/user-state/index.tsx b/packages/contact-center/user-state/src/user-state/index.tsx
index df30969b6..b7063e73e 100644
--- a/packages/contact-center/user-state/src/user-state/index.tsx
+++ b/packages/contact-center/user-state/src/user-state/index.tsx
@@ -6,11 +6,12 @@ import {useUserState} from '../helper';
 import {UserStateComponent, IUserState} from '@webex/cc-components';
 
 const UserState: React.FunctionComponent = observer(() => {
-  const {cc, idleCodes, agentId} = store;
+  const {cc, idleCodes, agentId, currentTheme} = store;
   const props: IUserState = useUserState({
     idleCodes,
     agentId,
-    cc
+    cc,
+    currentTheme
   });
 
   return <UserStateComponent {...props}/>;

From d899fc0d47b320cdf513911f6ee33aa98ab333ee Mon Sep 17 00:00:00 2001
From: Kesava Krishnan Madavan <mkesavan13@gmail.com>
Date: Sat, 25 Jan 2025 11:54:57 +0530
Subject: [PATCH 06/15] feat(cc-components): add momentum repo

---
 docs/react-samples/package.json               |   5 +
 docs/react-samples/src/App.tsx                |  10 +-
 docs/web-component-samples/app.js             |   5 +
 docs/web-component-samples/index.html         |  37 +-
 docs/web-component-samples/package.json       |   5 +
 package.json                                  |   3 +-
 .../contact-center/cc-components/package.json |   9 +-
 .../src/components/user-state/user-state.tsx  |   2 +
 .../contact-center/cc-components/src/index.ts |   3 +
 .../cc-components/webpack.config.js           |  50 ++-
 packages/contact-center/store/src/store.ts    |   3 -
 yarn.lock                                     | 382 +++++++++++++++++-
 12 files changed, 479 insertions(+), 35 deletions(-)

diff --git a/docs/react-samples/package.json b/docs/react-samples/package.json
index 32cbc4cfa..1f5342188 100644
--- a/docs/react-samples/package.json
+++ b/docs/react-samples/package.json
@@ -15,6 +15,11 @@
     "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.25.9",
+    "@momentum-ui/core": "19.16.0",
+    "@momentum-ui/icons": "8.28.5",
+    "@momentum-ui/tokens": "1.7.1",
+    "@momentum-ui/utils": "6.2.15",
+    "@momentum-ui/web-components": "^2.16.16",
     "@webex/cc-widgets": "workspace:*",
     "babel-loader": "^9.2.1",
     "file-loader": "^6.2.0",
diff --git a/docs/react-samples/src/App.tsx b/docs/react-samples/src/App.tsx
index 7e24a65bf..f33318b9f 100644
--- a/docs/react-samples/src/App.tsx
+++ b/docs/react-samples/src/App.tsx
@@ -6,6 +6,7 @@ function App() {
   const [accessToken, setAccessToken] = useState('');
   const [isLoggedIn, setIsLoggedIn] = useState(false);
   const themeCheckbox = useRef(null);
+  const currentTheme = store.currentTheme;
 
   const webexConfig = {
     fedramp: false,
@@ -41,7 +42,8 @@ function App() {
   };
 
   return (
-    <>
+    // @ts-ignore
+    <md-theme theme="momentumv2">
       <h1>Contact Center widgets in a react app</h1>
       <input
         type="text"
@@ -82,9 +84,9 @@ function App() {
           )}
         </>
       )}
-    </>
+      {/* @ts-ignore */}
+    </md-theme>
   );
 }
-// @ts-ignore
-window.store = store;
+
 export default App;
diff --git a/docs/web-component-samples/app.js b/docs/web-component-samples/app.js
index dd338033f..74e27c335 100644
--- a/docs/web-component-samples/app.js
+++ b/docs/web-component-samples/app.js
@@ -1,10 +1,15 @@
 const accessTokenElem = document.getElementById('access_token_elem');
+const themeElem = document.getElementById('theme');
 const widgetsContainer = document.getElementById('widgets-container');
 const ccStationLogin = document.getElementById('cc-station-login');
 const ccUserState = document.createElement('widget-cc-user-state');
 const ccIncomingTask = document.createElement('widget-cc-incoming-task');
 const ccTaskList = document.createElement('widget-cc-task-list');
 
+themeElem.addEventListener('change', () => {
+    store.setCurrentTheme(themeElem.checked ? 'DARK' : 'LIGHT');
+});
+
 if (!ccStationLogin && !ccUserState) {
     console.error('Failed to find the required elements');
 }
diff --git a/docs/web-component-samples/index.html b/docs/web-component-samples/index.html
index 137c03ed3..ac021fbf4 100644
--- a/docs/web-component-samples/index.html
+++ b/docs/web-component-samples/index.html
@@ -11,20 +11,29 @@
     </style>
   </head>
   <body>
-    <h1>Contact Center widgets as web-component</h1>
-    <input
-      type="text"
-      placeholder="Enter your access token"
-      id="access_token_elem"
-      onkeyup="switchButtonState()"
-      autocomplete="off"
-      spellcheck="false"
-      autocapitalize="off"
-    />
-    <button onclick="initWidgets()" disabled>Init Widgets</button>
-    <div id="widgets-container">
-      <widget-cc-station-login class="disabled" id="cc-station-login"></widget-cc-station-login>
-    </div>
+    <md-theme theme="momentumv2">
+      <h1>Contact Center widgets as web-component</h1>
+      <input
+        type="text"
+        placeholder="Enter your access token"
+        id="access_token_elem"
+        onkeyup="switchButtonState()"
+        autocomplete="off"
+        spellcheck="false"
+        autocapitalize="off"
+      />
+      <br />
+      <input
+        type='checkbox'
+        id='theme'
+        name='theme'
+      /> Dark Theme
+      <br />
+      <button onclick="initWidgets()" disabled>Init Widgets</button>
+      <div id="widgets-container">
+        <widget-cc-station-login class="disabled" id="cc-station-login"></widget-cc-station-login>
+      </div>
+    </md-theme>
     <script src="dist/bundle.js"></script>
     <script src="app.js"></script>
   </body>
diff --git a/docs/web-component-samples/package.json b/docs/web-component-samples/package.json
index ada1a498b..641fd1cbe 100644
--- a/docs/web-component-samples/package.json
+++ b/docs/web-component-samples/package.json
@@ -3,6 +3,11 @@
   "version": "1.0.0",
   "main": "dist/index.js",
   "dependencies": {
+    "@momentum-ui/core": "19.16.0",
+    "@momentum-ui/icons": "8.28.5",
+    "@momentum-ui/tokens": "1.7.1",
+    "@momentum-ui/utils": "6.2.15",
+    "@momentum-ui/web-components": "^2.16.16",
     "@webex/cc-widgets": "workspace:*",
     "html-webpack-plugin": "^5.6.3",
     "ts-loader": "^9.5.1",
diff --git a/package.json b/package.json
index a78e68e49..b94931403 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^11.0.1",
     "@testing-library/react-hooks": "^8.0.1",
+    "copy-webpack-plugin": "^6.3.1",
     "crypto-browserify": "^3.12.1",
     "css-loader": "^7.1.2",
     "html-webpack-plugin": "^5.6.3",
@@ -42,7 +43,7 @@
     "test:unit": "yarn run test:tooling && yarn run test:cc-widgets",
     "test:tooling": "jest --coverage",
     "test:cc-widgets": "yarn workspaces foreach --all --parallel --exclude webex-widgets --exclude @webex/web-component-samples-app --exclude @webex/react-samples-app run test:unit",
-    "build": "yarn workspaces foreach --all --topological --parallel --exclude webex-widgets  --exclude @webex/web-component-samples-app --exclude @webex/react-samples-app  run build:src",
+    "build": "yarn workspaces foreach --all --topological --parallel --exclude webex-widgets --exclude @webex/web-component-samples-app --exclude @webex/react-samples-app run build:src",
     "samples:build": "yarn workspace @webex/react-samples-app build:src && yarn workspace @webex/web-component-samples-app build:src",
     "samples:serve": "open docs/index.html && yarn workspace @webex/react-samples-app serve",
     "samples:serve-react": "yarn workspace @webex/react-samples-app serve",
diff --git a/packages/contact-center/cc-components/package.json b/packages/contact-center/cc-components/package.json
index 90b150463..00fed399d 100644
--- a/packages/contact-center/cc-components/package.json
+++ b/packages/contact-center/cc-components/package.json
@@ -65,5 +65,12 @@
       "^.+\\.(css|less|scss)$": "babel-jest"
     }
   },
-  "stableVersion": "1.28.0-ccwidgets.8"
+  "stableVersion": "1.28.0-ccwidgets.8",
+  "peerDependencies": {
+    "@momentum-ui/core": ">=19.16.0",
+    "@momentum-ui/icons": ">=8.28.5",
+    "@momentum-ui/tokens": ">=1.7.1",
+    "@momentum-ui/utils": ">=6.2.15",
+    "@momentum-ui/web-components": ">=2.16.16"
+  }
 }
diff --git a/packages/contact-center/cc-components/src/components/user-state/user-state.tsx b/packages/contact-center/cc-components/src/components/user-state/user-state.tsx
index f21d5f807..e058d7a93 100644
--- a/packages/contact-center/cc-components/src/components/user-state/user-state.tsx
+++ b/packages/contact-center/cc-components/src/components/user-state/user-state.tsx
@@ -44,6 +44,8 @@ const UserStateComponent: React.FunctionComponent<IUserState> = (props) => {
                 );
             })}
             </select>
+            {/* @ts-ignore */}
+            <md-button color={`${currentTheme === 'DARK' ? 'white' : 'dark-grey'}`}>Test Button</md-button>
             <div className={`elapsedTime ${isSettingAgentStatus ? 'elapsedTime-disabled' : ''}`}>{formatTime(elapsedTime)}</div>
             {
               errorMessage && <div style={{color: 'red'}}>{errorMessage}</div>
diff --git a/packages/contact-center/cc-components/src/index.ts b/packages/contact-center/cc-components/src/index.ts
index 13f252c60..19446f482 100644
--- a/packages/contact-center/cc-components/src/index.ts
+++ b/packages/contact-center/cc-components/src/index.ts
@@ -1,4 +1,7 @@
 import UserStateComponent from './components/user-state/user-state';
 import {IUserState} from './components/user-state/user-state.types';
+import '@momentum-ui/icons/css/momentum-ui-icons.min.css';
+import '@momentum-ui/core/css/momentum-ui.min.css';
+import '@momentum-ui/web-components';
 
 export {UserStateComponent, type IUserState};
diff --git a/packages/contact-center/cc-components/webpack.config.js b/packages/contact-center/cc-components/webpack.config.js
index 7a809d382..ce9ac6dbf 100644
--- a/packages/contact-center/cc-components/webpack.config.js
+++ b/packages/contact-center/cc-components/webpack.config.js
@@ -1,8 +1,11 @@
-const {merge} = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const path = require('path');
 
 const baseConfig = require('../../../webpack.config');
 
+// Helper function to resolve paths relative to the monorepo root
+const resolveMonorepoRoot = (...segments) => path.resolve(__dirname, '../../../', ...segments);
+
 module.exports = merge(baseConfig, {
   entry: {
     wc: {
@@ -14,12 +17,53 @@ module.exports = merge(baseConfig, {
   },
   output: {
     path: path.resolve(__dirname, 'dist'),
-    filename: '[name].js', // Set the output filename to index.js
+    filename: '[name].js',
     libraryTarget: 'commonjs2',
   },
   externals: {
     react: 'react',
     'react-dom': 'react-dom',
     '@webex/cc-store': '@webex/cc-store',
-  }
+    '@momentum-ui/web-components': '@momentum-ui/web-components',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+        include: [
+          resolveMonorepoRoot('node_modules/@momentum-ui'), // Include specific node module
+          path.resolve(__dirname, 'packages') // Include all CSS from the local package
+        ],
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          "style-loader",  // Injects styles into DOM
+          "css-loader",    // Turns CSS into CommonJS
+          "sass-loader"    // Compiles Sass to CSS
+        ],
+        include: [
+          resolveMonorepoRoot('node_modules/@momentum-ui'), // Include specific node module
+          path.resolve(__dirname, 'packages') // Include all CSS from the local package
+        ],
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/,
+        include: [resolveMonorepoRoot('node_modules/@momentum-ui')],
+        type: 'asset/resource',
+        generator: {
+          filename: 'fonts/[name][ext][query]'
+        }
+      },
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        include: [resolveMonorepoRoot('node_modules/@momentum-ui')],
+        type: 'asset/resource',
+        generator: {
+          filename: 'images/[name][ext][query]'
+        }
+      }
+    ],
+  },
 });
diff --git a/packages/contact-center/store/src/store.ts b/packages/contact-center/store/src/store.ts
index 5d5aadd02..06ce1a76b 100644
--- a/packages/contact-center/store/src/store.ts
+++ b/packages/contact-center/store/src/store.ts
@@ -20,12 +20,9 @@ class Store implements IStore {
   idleCodes: IdleCode[] = [];
   agentId: string = '';
   selectedLoginOption: string = '';
-<<<<<<< HEAD
   currentTheme: string = 'light';
-=======
   isAgentLoggedIn = false;
   deviceType: string = '';
->>>>>>> upstream/ccwidgets
 
   constructor() {
     makeAutoObservable(this, {cc: observable.ref});
diff --git a/yarn.lock b/yarn.lock
index 30125756f..0ca22946e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2215,6 +2215,95 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@interactjs/actions@npm:1.10.3":
+  version: 1.10.3
+  resolution: "@interactjs/actions@npm:1.10.3"
+  dependencies:
+    "@interactjs/interact": "npm:1.10.3"
+  peerDependencies:
+    "@interactjs/core": 1.10.3
+    "@interactjs/utils": 1.10.3
+  dependenciesMeta:
+    "@interactjs/interact":
+      optional: true
+  checksum: 10c0/a143dfa822366cf9de24d20a9440d4079cc6718874460a63f1446e0d522c10746d6a5e585cab33420b9fd043b0334edc91795dd6c2d39126e31a18a3e2e72a46
+  languageName: node
+  linkType: hard
+
+"@interactjs/auto-start@npm:1.10.3":
+  version: 1.10.3
+  resolution: "@interactjs/auto-start@npm:1.10.3"
+  dependencies:
+    "@interactjs/interact": "npm:1.10.3"
+  peerDependencies:
+    "@interactjs/core": 1.10.3
+    "@interactjs/utils": 1.10.3
+  dependenciesMeta:
+    "@interactjs/interact":
+      optional: true
+  checksum: 10c0/aab348ec0aaa0a8080634c7fa3b98283af9bcb27ef418f3094b9cfd0f74c84aeae980f455167f6aba6eafffe15f4f3c3f81a7a8dd85f6cf3f042c40db48bc3b4
+  languageName: node
+  linkType: hard
+
+"@interactjs/core@npm:1.10.3":
+  version: 1.10.3
+  resolution: "@interactjs/core@npm:1.10.3"
+  peerDependencies:
+    "@interactjs/utils": 1.10.3
+  checksum: 10c0/92b9e908de5fc7de0f64e5dc9b63d2a489104e43cc4033b1fc84a98264a00217df306dc1b73d52017bcba2efb1f53cc3c6fa86b984919a08527bc80c34c65c99
+  languageName: node
+  linkType: hard
+
+"@interactjs/interact@npm:1.10.3":
+  version: 1.10.3
+  resolution: "@interactjs/interact@npm:1.10.3"
+  dependencies:
+    "@interactjs/core": "npm:1.10.3"
+    "@interactjs/types": "npm:1.10.3"
+    "@interactjs/utils": "npm:1.10.3"
+  checksum: 10c0/dccdde8f08bac34bde430783849f26f3560a8967bbaa9eaecfba35dd61b014f6c768fe8ecd4c39c51b26d80dd14f573899cf1256bf63c6518a6c059c39e6f885
+  languageName: node
+  linkType: hard
+
+"@interactjs/modifiers@npm:1.10.3":
+  version: 1.10.3
+  resolution: "@interactjs/modifiers@npm:1.10.3"
+  dependencies:
+    "@interactjs/interact": "npm:1.10.3"
+    "@interactjs/snappers": "npm:1.10.3"
+  peerDependencies:
+    "@interactjs/core": 1.10.3
+    "@interactjs/utils": 1.10.3
+  dependenciesMeta:
+    "@interactjs/interact":
+      optional: true
+  checksum: 10c0/8cc96d920e6ede6459261893efe2ea19f0da9759eb45b3dd87752b267da47042ccf1215f6f7dfa5dbeafbce5edd87e7ba13df9d2aa295bf4963b1135280accf7
+  languageName: node
+  linkType: hard
+
+"@interactjs/snappers@npm:1.10.3":
+  version: 1.10.3
+  resolution: "@interactjs/snappers@npm:1.10.3"
+  peerDependencies:
+    "@interactjs/utils": 1.10.3
+  checksum: 10c0/2c0a5f2d0c4996525de67647ec4cec651e1807ff40b24d6766f3546910f7dfaee79144b5621ec42a48fe3a9002a00b39ca82bab2f9e8cb6e7bf75baa3eb376d0
+  languageName: node
+  linkType: hard
+
+"@interactjs/types@npm:1.10.3":
+  version: 1.10.3
+  resolution: "@interactjs/types@npm:1.10.3"
+  checksum: 10c0/f2e6b9a867b433b466b48f99100fb88a9e3d3da82a720875eb549ac80851f724823e382b0c51c96980f10d361de419cc458b9efb283fb1ab246ac972bda96101
+  languageName: node
+  linkType: hard
+
+"@interactjs/utils@npm:1.10.3":
+  version: 1.10.3
+  resolution: "@interactjs/utils@npm:1.10.3"
+  checksum: 10c0/ad4965781b741aa7d212c322bf808128dd2ce57b8328d7ea47e79b2d0b500cdb3850bd1be477bba86881a3cdb7a803d32d14aff04697aa52fa3c54b56818d8d0
+  languageName: node
+  linkType: hard
+
 "@isaacs/cliui@npm:^8.0.2":
   version: 8.0.2
   resolution: "@isaacs/cliui@npm:8.0.2"
@@ -2650,6 +2739,36 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@momentum-design/brand-visuals@npm:0.3.0":
+  version: 0.3.0
+  resolution: "@momentum-design/brand-visuals@npm:0.3.0"
+  checksum: 10c0/5aa50848b419db3ed88a9b01c652ddcfbfc645876136b499a8d0d2b222f35b3e04173725ad11daeb46ca90b953295b2424395738e14876ab9dae8789afc3425c
+  languageName: node
+  linkType: hard
+
+"@momentum-design/icons@npm:0.8.0":
+  version: 0.8.0
+  resolution: "@momentum-design/icons@npm:0.8.0"
+  checksum: 10c0/ab2445eb79b7f9244e592892661fe1cbdc92813a6e85f2ab74fe927c7935316712b1f8f95f4622f5a23f51cc8d269c0697a595faa43595378cba5279bc5c059e
+  languageName: node
+  linkType: hard
+
+"@momentum-design/tokens@npm:0.3.1":
+  version: 0.3.1
+  resolution: "@momentum-design/tokens@npm:0.3.1"
+  checksum: 10c0/90c4d78b54258121a2f74a4fc8091fb308de9322b318770ea0ea58e75c613058c1a342848e1185842673f7369439e6e94798de9de8972eeddae2cb69501640ef
+  languageName: node
+  linkType: hard
+
+"@momentum-ui/core@npm:19.16.0":
+  version: 19.16.0
+  resolution: "@momentum-ui/core@npm:19.16.0"
+  dependencies:
+    "@momentum-ui/icons": "npm:^8.32.0"
+  checksum: 10c0/dae8486d1cc995e51a5b2175efdbb5758fa3cd9e84e68b1023e3dc15824a8d89cd190112047b1deb0d5918b1c3bbf979104af62170285d10c469f67484dc979f
+  languageName: node
+  linkType: hard
+
 "@momentum-ui/core@npm:^19.15.31":
   version: 19.16.1
   resolution: "@momentum-ui/core@npm:19.16.1"
@@ -2659,7 +2778,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@momentum-ui/icons@npm:^8.33.0":
+"@momentum-ui/icons@npm:8.28.5":
+  version: 8.28.5
+  resolution: "@momentum-ui/icons@npm:8.28.5"
+  checksum: 10c0/beb5e8bf97b8b87380f8421215ce30c74d9d312912f5cda7a54b82031a8e433057525daf18935e6731e7e70261b3100eba83a0be266d157911e547eefc03a60d
+  languageName: node
+  linkType: hard
+
+"@momentum-ui/icons@npm:^8.32.0, @momentum-ui/icons@npm:^8.33.0":
   version: 8.33.0
   resolution: "@momentum-ui/icons@npm:8.33.0"
   checksum: 10c0/b29654530e3bc0a9ebf12a03317dac41b84d823272e0f94235697caede12a0ada6118f25b3777ff453127640aa418d1e8439960a3f58399f864f6a1d1f5b634d
@@ -2689,14 +2815,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@momentum-ui/tokens@npm:^1.7.1":
+"@momentum-ui/tokens@npm:1.7.1, @momentum-ui/tokens@npm:^1.7.1":
   version: 1.7.1
   resolution: "@momentum-ui/tokens@npm:1.7.1"
   checksum: 10c0/75ce860638c7d322bb7cf97b350b0e3f7d6f1d377f65a44dab8c537cb7b2e0962342d0a1ec7e29e13fbc3660dc7b995e29faa074203ef7870ced4230ce308b65
   languageName: node
   linkType: hard
 
-"@momentum-ui/utils@npm:^6.2.15":
+"@momentum-ui/utils@npm:6.2.15, @momentum-ui/utils@npm:^6.2.15":
   version: 6.2.15
   resolution: "@momentum-ui/utils@npm:6.2.15"
   dependencies:
@@ -2713,6 +2839,43 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@momentum-ui/web-components@npm:^2.16.16":
+  version: 2.16.16
+  resolution: "@momentum-ui/web-components@npm:2.16.16"
+  dependencies:
+    "@interactjs/actions": "npm:1.10.3"
+    "@interactjs/auto-start": "npm:1.10.3"
+    "@interactjs/core": "npm:1.10.3"
+    "@interactjs/interact": "npm:1.10.3"
+    "@interactjs/modifiers": "npm:1.10.3"
+    "@interactjs/utils": "npm:1.10.3"
+    "@momentum-design/brand-visuals": "npm:0.3.0"
+    "@momentum-design/icons": "npm:0.8.0"
+    "@momentum-design/tokens": "npm:0.3.1"
+    "@popperjs/core": "npm:^2.11.8"
+    country-codes-list: "npm:1.6.8"
+    country-flags-svg: "npm:1.1.4"
+    dompurify: "npm:^3.1.6"
+    highlight.js: "npm:^10.5.0"
+    json: "npm:^11.0.0"
+    libphonenumber-js: "npm:^1.7.57"
+    lit-virtualizer: "npm:0.4.2"
+    luxon: "npm:^1.25.0"
+    mobx: "npm:^5.15.4"
+    nanoid: "npm:^3.1.16"
+    papaparse: "npm:^5.4.1"
+    sortablejs: "npm:^1.15.3"
+  peerDependencies:
+    "@momentum-ui/core": 19.16.0
+    "@momentum-ui/icons": 8.28.5
+    "@momentum-ui/tokens": 1.7.1
+    "@momentum-ui/utils": 6.2.15
+    lit-element: 2.3.1
+    lit-html: ^1.2.1
+  checksum: 10c0/deb10df430383f14834815a9a0a8e4686a4dc269547db6de7f60a26dcca9bbeeb47cae77f5fc8e92c8cc0eefe5ec4c3e38980a74c5fe02c220c3383795b95afa
+  languageName: node
+  linkType: hard
+
 "@mrmlnc/readdir-enhanced@npm:^2.2.1":
   version: 2.2.1
   resolution: "@mrmlnc/readdir-enhanced@npm:2.2.1"
@@ -3559,6 +3722,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@popperjs/core@npm:^2.11.8":
+  version: 2.11.8
+  resolution: "@popperjs/core@npm:2.11.8"
+  checksum: 10c0/4681e682abc006d25eb380d0cf3efc7557043f53b6aea7a5057d0d1e7df849a00e281cd8ea79c902a35a414d7919621fc2ba293ecec05f413598e0b23d5a1e63
+  languageName: node
+  linkType: hard
+
 "@protobufjs/aspromise@npm:^1.1.1, @protobufjs/aspromise@npm:^1.1.2":
   version: 1.1.2
   resolution: "@protobufjs/aspromise@npm:1.1.2"
@@ -5046,6 +5216,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/trusted-types@npm:^2.0.7":
+  version: 2.0.7
+  resolution: "@types/trusted-types@npm:2.0.7"
+  checksum: 10c0/4c4855f10de7c6c135e0d32ce462419d8abbbc33713b31d294596c0cc34ae1fa6112a2f9da729c8f7a20707782b0d69da3b1f8df6645b0366d08825ca1522e0c
+  languageName: node
+  linkType: hard
+
 "@types/ua-parser-js@npm:^0.7.33":
   version: 0.7.39
   resolution: "@types/ua-parser-js@npm:0.7.39"
@@ -5636,6 +5813,12 @@ __metadata:
     webpack: "npm:5.94.0"
     webpack-cli: "npm:5.1.4"
     webpack-merge: "npm:6.0.1"
+  peerDependencies:
+    "@momentum-ui/core": ">=19.16.0"
+    "@momentum-ui/icons": ">=8.28.5"
+    "@momentum-ui/tokens": ">=1.7.1"
+    "@momentum-ui/utils": ">=6.2.15"
+    "@momentum-ui/web-components": ">=2.16.16"
   languageName: unknown
   linkType: soft
 
@@ -7043,6 +7226,11 @@ __metadata:
     "@babel/preset-env": "npm:^7.25.4"
     "@babel/preset-react": "npm:^7.24.7"
     "@babel/preset-typescript": "npm:^7.25.9"
+    "@momentum-ui/core": "npm:19.16.0"
+    "@momentum-ui/icons": "npm:8.28.5"
+    "@momentum-ui/tokens": "npm:1.7.1"
+    "@momentum-ui/utils": "npm:6.2.15"
+    "@momentum-ui/web-components": "npm:^2.16.16"
     "@webex/cc-widgets": "workspace:*"
     babel-loader: "npm:^9.2.1"
     file-loader: "npm:^6.2.0"
@@ -9458,7 +9646,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cacache@npm:^15.2.0":
+"cacache@npm:^15.0.5, cacache@npm:^15.2.0":
   version: 15.3.0
   resolution: "cacache@npm:15.3.0"
   dependencies:
@@ -10684,6 +10872,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"copy-webpack-plugin@npm:^6.3.1":
+  version: 6.4.1
+  resolution: "copy-webpack-plugin@npm:6.4.1"
+  dependencies:
+    cacache: "npm:^15.0.5"
+    fast-glob: "npm:^3.2.4"
+    find-cache-dir: "npm:^3.3.1"
+    glob-parent: "npm:^5.1.1"
+    globby: "npm:^11.0.1"
+    loader-utils: "npm:^2.0.0"
+    normalize-path: "npm:^3.0.0"
+    p-limit: "npm:^3.0.2"
+    schema-utils: "npm:^3.0.0"
+    serialize-javascript: "npm:^5.0.1"
+    webpack-sources: "npm:^1.4.3"
+  peerDependencies:
+    webpack: ^4.37.0 || ^5.0.0
+  checksum: 10c0/f8ef9a775c8d79cb13866f3717ff8f296aab069f6249c2606b402eec52c1b666b6ab8a2bd2d4a05ff60e5d4bf53579aaaedeca35a179c78746fcc519899732a8
+  languageName: node
+  linkType: hard
+
 "core-decorators@npm:^0.20.0":
   version: 0.20.0
   resolution: "core-decorators@npm:0.20.0"
@@ -10779,6 +10988,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"country-codes-list@npm:1.6.8":
+  version: 1.6.8
+  resolution: "country-codes-list@npm:1.6.8"
+  checksum: 10c0/2acbb80b89c1c31fb6e4b179da8323eaf4b3649e3719bd93f79fdf8e2665829185182567b080d20b40fd354eb391e3b1806701d3d1e7264ace11c66cbc16222c
+  languageName: node
+  linkType: hard
+
+"country-flags-svg@npm:1.1.4":
+  version: 1.1.4
+  resolution: "country-flags-svg@npm:1.1.4"
+  checksum: 10c0/4a45700f3407e682e816ee691c60e4b60373ddddcec44f1d84e6aa4685d0d644115b119ba5a5f1e612f935b5a01ad330a3008a9f30e815c86743dc0d7793caee
+  languageName: node
+  linkType: hard
+
 "crc-32@npm:^1.2.0":
   version: 1.2.2
   resolution: "crc-32@npm:1.2.2"
@@ -11889,6 +12112,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dompurify@npm:^3.1.6":
+  version: 3.2.3
+  resolution: "dompurify@npm:3.2.3"
+  dependencies:
+    "@types/trusted-types": "npm:^2.0.7"
+  dependenciesMeta:
+    "@types/trusted-types":
+      optional: true
+  checksum: 10c0/0ce5cb89b76f396d800751bcb48e0d137792891d350ccc049f1bc9a5eca7332cc69030c25007ff4962e0824a5696904d4d74264df9277b5ad955642dfb6f313f
+  languageName: node
+  linkType: hard
+
 "domutils@npm:^2.5.2, domutils@npm:^2.8.0":
   version: 2.8.0
   resolution: "domutils@npm:2.8.0"
@@ -13009,7 +13244,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"event-target-shim@npm:^5.0.0":
+"event-target-shim@npm:^5.0.0, event-target-shim@npm:^5.0.1":
   version: 5.0.1
   resolution: "event-target-shim@npm:5.0.1"
   checksum: 10c0/0255d9f936215fd206156fd4caa9e8d35e62075d720dc7d847e89b417e5e62cf1ce6c9b4e0a1633a9256de0efefaf9f8d26924b1f3c8620cffb9db78e7d3076b
@@ -13441,6 +13676,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-glob@npm:^3.2.4":
+  version: 3.3.3
+  resolution: "fast-glob@npm:3.3.3"
+  dependencies:
+    "@nodelib/fs.stat": "npm:^2.0.2"
+    "@nodelib/fs.walk": "npm:^1.2.3"
+    glob-parent: "npm:^5.1.2"
+    merge2: "npm:^1.3.0"
+    micromatch: "npm:^4.0.8"
+  checksum: 10c0/f6aaa141d0d3384cf73cbcdfc52f475ed293f6d5b65bfc5def368b09163a9f7e5ec2b3014d80f733c405f58e470ee0cc451c2937685045cddcdeaa24199c43fe
+  languageName: node
+  linkType: hard
+
 "fast-glob@npm:^3.2.5, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.2":
   version: 3.3.2
   resolution: "fast-glob@npm:3.3.2"
@@ -14417,7 +14665,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob-parent@npm:^5.0.0, glob-parent@npm:^5.1.2, glob-parent@npm:~5.1.2":
+"glob-parent@npm:^5.0.0, glob-parent@npm:^5.1.1, glob-parent@npm:^5.1.2, glob-parent@npm:~5.1.2":
   version: 5.1.2
   resolution: "glob-parent@npm:5.1.2"
   dependencies:
@@ -14916,7 +15164,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"highlight.js@npm:^10.7.1":
+"highlight.js@npm:^10.5.0, highlight.js@npm:^10.7.1":
   version: 10.7.3
   resolution: "highlight.js@npm:10.7.3"
   checksum: 10c0/073837eaf816922427a9005c56c42ad8786473dc042332dfe7901aa065e92bc3d94ebf704975257526482066abb2c8677cc0326559bb8621e046c21c5991c434
@@ -17550,6 +17798,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"json@npm:^11.0.0":
+  version: 11.0.0
+  resolution: "json@npm:11.0.0"
+  bin:
+    json: lib/json.js
+  checksum: 10c0/330eea4d69902f775b5babd65848383e066765a9d9d9536e80dd369af89bfe3728408f1287c0ba40f5d90ead391542836ed010a8ed0c8169396b4aac3847a5bf
+  languageName: node
+  linkType: hard
+
 "jsonfile@npm:^4.0.0":
   version: 4.0.0
   resolution: "jsonfile@npm:4.0.0"
@@ -17964,6 +18221,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"libphonenumber-js@npm:^1.7.57":
+  version: 1.11.18
+  resolution: "libphonenumber-js@npm:1.11.18"
+  checksum: 10c0/4877d2521426e4094cbf1991fd30778d3856e702acce655a767a1ba261d8e765901dc17944d627a7ee083992ee4c427007bf9d488207432b6b5dee982b849de4
+  languageName: node
+  linkType: hard
+
 "lighthouse-logger@npm:^1.0.0":
   version: 1.4.2
   resolution: "lighthouse-logger@npm:1.4.2"
@@ -17997,6 +18261,35 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lit-element@npm:^2.0.0":
+  version: 2.5.1
+  resolution: "lit-element@npm:2.5.1"
+  dependencies:
+    lit-html: "npm:^1.1.1"
+  checksum: 10c0/fe83a2fe1657950c3b79b9d30363c9aaad2e84ef761c3eaef4720d2059109f8fa2230e8b722f0c48057fa709c0cbc9574ac50a08a2bf888bf6ff8687aef15039
+  languageName: node
+  linkType: hard
+
+"lit-html@npm:^1.0.0, lit-html@npm:^1.1.1":
+  version: 1.4.1
+  resolution: "lit-html@npm:1.4.1"
+  checksum: 10c0/abbb16a56c143db4f113205af6620ece791fce10169a91fd0c9c52d10638ee2096bbe44f11f00c91deec58393f5aff166926961ba3d5ab7a5fb91218f908f98a
+  languageName: node
+  linkType: hard
+
+"lit-virtualizer@npm:0.4.2":
+  version: 0.4.2
+  resolution: "lit-virtualizer@npm:0.4.2"
+  dependencies:
+    event-target-shim: "npm:^5.0.1"
+    lit-element: "npm:^2.0.0"
+    lit-html: "npm:^1.0.0"
+    resize-observer-polyfill: "npm:^1.5.1"
+    tslib: "npm:^1.10.0"
+  checksum: 10c0/59f1e617a5443bd60f70ec30e178a9683a176a827bba8de7b21b2c4a53c36e4f53dfb0cfbd0c9e3eddf16e0bb07c750ede345e325faf50f2489fdcc9e440e1ca
+  languageName: node
+  linkType: hard
+
 "load-json-file@npm:^1.0.0":
   version: 1.1.0
   resolution: "load-json-file@npm:1.1.0"
@@ -18588,6 +18881,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"luxon@npm:^1.25.0":
+  version: 1.28.1
+  resolution: "luxon@npm:1.28.1"
+  checksum: 10c0/5c561ce4364bb2301ca5811c74d11a9e087f82164109c7997dc8f0959e64d51259d8e630914dca2edc6702525ce5ab066a4b85caa19d04be71f10e79ffe2bc84
+  languageName: node
+  linkType: hard
+
 "lz-string@npm:^1.5.0":
   version: 1.5.0
   resolution: "lz-string@npm:1.5.0"
@@ -19037,7 +19337,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"micromatch@npm:^4.0.0, micromatch@npm:^4.0.2, micromatch@npm:^4.0.4, micromatch@npm:^4.0.5":
+"micromatch@npm:^4.0.0, micromatch@npm:^4.0.2, micromatch@npm:^4.0.4, micromatch@npm:^4.0.5, micromatch@npm:^4.0.8":
   version: 4.0.8
   resolution: "micromatch@npm:4.0.8"
   dependencies:
@@ -19505,6 +19805,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mobx@npm:^5.15.4":
+  version: 5.15.7
+  resolution: "mobx@npm:5.15.7"
+  checksum: 10c0/ff493828f21e92470e21e294b8d3e5663d030cde78c10cd99e1d5f9154eeecd1e37b15b3fa377ea44ac3d81009fcaf6d48210a016c268a6cfc52399f4e1fd026
+  languageName: node
+  linkType: hard
+
 "modify-values@npm:^1.0.0":
   version: 1.0.1
   resolution: "modify-values@npm:1.0.1"
@@ -19613,6 +19920,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nanoid@npm:^3.1.16":
+  version: 3.3.8
+  resolution: "nanoid@npm:3.3.8"
+  bin:
+    nanoid: bin/nanoid.cjs
+  checksum: 10c0/4b1bb29f6cfebf3be3bc4ad1f1296fb0a10a3043a79f34fbffe75d1621b4318319211cd420549459018ea3592f0d2f159247a6f874911d6d26eaaadda2478120
+  languageName: node
+  linkType: hard
+
 "nanoid@npm:^3.3.7":
   version: 3.3.7
   resolution: "nanoid@npm:3.3.7"
@@ -21085,6 +21401,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"papaparse@npm:^5.4.1":
+  version: 5.5.1
+  resolution: "papaparse@npm:5.5.1"
+  checksum: 10c0/32f7b39ef175f9adc8dc5fecddc4b2801a82626149c65463d19cbdcb2e53ce3eb74867c59c50d7169b26082059fad46cef9fbd36178cb7c5c6a714d8c577217d
+  languageName: node
+  linkType: hard
+
 "param-case@npm:2.1.x":
   version: 2.1.1
   resolution: "param-case@npm:2.1.1"
@@ -23380,6 +23703,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"resize-observer-polyfill@npm:^1.5.1":
+  version: 1.5.1
+  resolution: "resize-observer-polyfill@npm:1.5.1"
+  checksum: 10c0/5e882475067f0b97dc07e0f37c3e335ac5bc3520d463f777cec7e894bb273eddbfecb857ae668e6fb6881fd6f6bb7148246967172139302da50fa12ea3a15d95
+  languageName: node
+  linkType: hard
+
 "resolve-alpn@npm:^1.0.0":
   version: 1.2.1
   resolution: "resolve-alpn@npm:1.2.1"
@@ -24199,6 +24529,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"serialize-javascript@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "serialize-javascript@npm:5.0.1"
+  dependencies:
+    randombytes: "npm:^2.1.0"
+  checksum: 10c0/646bd92a8298d764d38316f3006bce0b0def6d0e254791396ac34403847654d9346b0b6ed7865efd799d93d4c47d900e08a8fa7a6f7f8d2dbaebab5444c3b431
+  languageName: node
+  linkType: hard
+
 "serialize-javascript@npm:^6.0.1":
   version: 6.0.2
   resolution: "serialize-javascript@npm:6.0.2"
@@ -24645,6 +24984,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sortablejs@npm:^1.15.3":
+  version: 1.15.6
+  resolution: "sortablejs@npm:1.15.6"
+  checksum: 10c0/a75dcf53e5613b4106d46434e40114830f9c6449b3b439bc1925c1fbf0a0c1f044727a8f3d4ae1759fa7beaa33e7eb0c4a413e6aa88d6026577b59f3658ff727
+  languageName: node
+  linkType: hard
+
+"source-list-map@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "source-list-map@npm:2.0.1"
+  checksum: 10c0/2e5e421b185dcd857f46c3c70e2e711a65d717b78c5f795e2e248c9d67757882ea989b80ebc08cf164eeeda5f4be8aa95d3b990225070b2daaaf3257c5958149
+  languageName: node
+  linkType: hard
+
 "source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.2.1":
   version: 1.2.1
   resolution: "source-map-js@npm:1.2.1"
@@ -26013,7 +26366,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^1.8.1, tslib@npm:^1.9.0":
+"tslib@npm:^1.10.0, tslib@npm:^1.8.1, tslib@npm:^1.9.0":
   version: 1.14.1
   resolution: "tslib@npm:1.14.1"
   checksum: 10c0/69ae09c49eea644bc5ebe1bca4fa4cc2c82b7b3e02f43b84bd891504edf66dbc6b2ec0eef31a957042de2269139e4acff911e6d186a258fb14069cd7f6febce2
@@ -27055,6 +27408,7 @@ __metadata:
     "@semantic-release/git": "npm:^10.0.1"
     "@semantic-release/github": "npm:^11.0.1"
     "@testing-library/react-hooks": "npm:^8.0.1"
+    copy-webpack-plugin: "npm:^6.3.1"
     crypto-browserify: "npm:^3.12.1"
     css-loader: "npm:^7.1.2"
     html-webpack-plugin: "npm:^5.6.3"
@@ -27306,6 +27660,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"webpack-sources@npm:^1.4.3":
+  version: 1.4.3
+  resolution: "webpack-sources@npm:1.4.3"
+  dependencies:
+    source-list-map: "npm:^2.0.0"
+    source-map: "npm:~0.6.1"
+  checksum: 10c0/78dafb3e1e297d3f4eb6204311e8c64d28cd028f82887ba33aaf03fffc82482d8e1fdf6de25a60f4dde621d3565f4c3b1bfb350f09add8f4e54e00279ff3db5e
+  languageName: node
+  linkType: hard
+
 "webpack-sources@npm:^3.2.3":
   version: 3.2.3
   resolution: "webpack-sources@npm:3.2.3"

From ecc1a78efcbc35e05c5206ffe3b63382989da139 Mon Sep 17 00:00:00 2001
From: Kesava Krishnan Madavan <mkesavan13@gmail.com>
Date: Sun, 26 Jan 2025 17:55:46 +0530
Subject: [PATCH 07/15] fix(cc-components): add missing webpack config

---
 packages/contact-center/cc-components/webpack.config.js | 5 +++++
 yarn.lock                                               | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/packages/contact-center/cc-components/webpack.config.js b/packages/contact-center/cc-components/webpack.config.js
index ce9ac6dbf..41ccdb5f9 100644
--- a/packages/contact-center/cc-components/webpack.config.js
+++ b/packages/contact-center/cc-components/webpack.config.js
@@ -24,6 +24,11 @@ module.exports = merge(baseConfig, {
     react: 'react',
     'react-dom': 'react-dom',
     '@webex/cc-store': '@webex/cc-store',
+    "@momentum-ui/core": "@momentum-ui/core",
+    "@momentum-ui/icons": "@momentum-ui/icons",
+    "@momentum-ui/tokens": "@momentum-ui/tokens",
+    "@momentum-ui/utils": "@momentum-ui/utils",
+    "@momentum-ui/web-components": "^2.16.16",
     '@momentum-ui/web-components': '@momentum-ui/web-components',
   },
   module: {
diff --git a/yarn.lock b/yarn.lock
index 0ca22946e..24f49cc81 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7589,6 +7589,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@webex/web-component-samples-app@workspace:docs/web-component-samples"
   dependencies:
+    "@momentum-ui/core": "npm:19.16.0"
+    "@momentum-ui/icons": "npm:8.28.5"
+    "@momentum-ui/tokens": "npm:1.7.1"
+    "@momentum-ui/utils": "npm:6.2.15"
+    "@momentum-ui/web-components": "npm:^2.16.16"
     "@webex/cc-widgets": "workspace:*"
     html-webpack-plugin: "npm:^5.6.3"
     ts-loader: "npm:^9.5.1"

From 27e978b5b1268f36b6e5e7f827365c16b10cb512 Mon Sep 17 00:00:00 2001
From: Kesava Krishnan Madavan <mkesavan13@gmail.com>
Date: Sun, 26 Jan 2025 22:05:56 +0530
Subject: [PATCH 08/15] fix(cc-components): adjust webpack config

---
 packages/contact-center/cc-components/webpack.config.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/contact-center/cc-components/webpack.config.js b/packages/contact-center/cc-components/webpack.config.js
index 41ccdb5f9..a5e24e5ab 100644
--- a/packages/contact-center/cc-components/webpack.config.js
+++ b/packages/contact-center/cc-components/webpack.config.js
@@ -24,11 +24,10 @@ module.exports = merge(baseConfig, {
     react: 'react',
     'react-dom': 'react-dom',
     '@webex/cc-store': '@webex/cc-store',
-    "@momentum-ui/core": "@momentum-ui/core",
-    "@momentum-ui/icons": "@momentum-ui/icons",
-    "@momentum-ui/tokens": "@momentum-ui/tokens",
-    "@momentum-ui/utils": "@momentum-ui/utils",
-    "@momentum-ui/web-components": "^2.16.16",
+    '@momentum-ui/core': '@momentum-ui/core',
+    '@momentum-ui/icons': '@momentum-ui/icons',
+    '@momentum-ui/tokens': '@momentum-ui/tokens',
+    '@momentum-ui/utils': '@momentum-ui/utils',
     '@momentum-ui/web-components': '@momentum-ui/web-components',
   },
   module: {

From 4446141c181b3edf33a0802937ae783c67e5c34a Mon Sep 17 00:00:00 2001
From: Kesava Krishnan Madavan <mkesavan13@gmail.com>
Date: Tue, 28 Jan 2025 18:38:44 +0530
Subject: [PATCH 09/15] fix(cc-components): ut failure, remove webpack
 polyfills

---
 packages/contact-center/cc-components/package.json   | 10 +---------
 packages/contact-center/cc-components/src/wc.ts      |  3 +++
 .../contact-center/cc-components/webpack.config.js   | 12 ++++++++++--
 .../user-state/tests/user-state/index.tsx            |  2 ++
 yarn.lock                                            |  8 --------
 5 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/packages/contact-center/cc-components/package.json b/packages/contact-center/cc-components/package.json
index 00fed399d..7dee2ed14 100644
--- a/packages/contact-center/cc-components/package.json
+++ b/packages/contact-center/cc-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@webex/cc-components",
-  "description": "Webex Contact Center Widgets",
+  "description": "Webex Contact Center UI Components Library for your custom contact center solutions",
   "version": "1.28.0-ccwidgets.9",
   "main": "dist/index.js",
   "publishConfig": {
@@ -38,19 +38,11 @@
     "@types/react-test-renderer": "18",
     "babel-jest": "29.7.0",
     "babel-loader": "9.2.1",
-    "crypto-browserify": "^3.12.1",
     "file-loader": "6.2.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "os-browserify": "^0.3.0",
-    "process": "^0.11.10",
-    "querystring-es3": "^0.2.1",
-    "stream-browserify": "^3.0.0",
     "ts-loader": "9.5.1",
     "typescript": "5.6.3",
-    "url": "^0.11.4",
-    "util": "^0.12.5",
-    "vm-browserify": "^1.1.2",
     "webpack": "5.94.0",
     "webpack-cli": "5.1.4",
     "webpack-merge": "6.0.1"
diff --git a/packages/contact-center/cc-components/src/wc.ts b/packages/contact-center/cc-components/src/wc.ts
index a1f3e7d89..68c55f8bc 100644
--- a/packages/contact-center/cc-components/src/wc.ts
+++ b/packages/contact-center/cc-components/src/wc.ts
@@ -1,5 +1,8 @@
 import r2wc from '@r2wc/react-to-web-component';
 import UserStateComponent from './components/user-state/user-state';
+import '@momentum-ui/web-components';
+import '@momentum-ui/icons/css/momentum-ui-icons.min.css';
+import '@momentum-ui/core/css/momentum-ui.min.css';
 
 const WebUserState = r2wc(UserStateComponent);
 
diff --git a/packages/contact-center/cc-components/webpack.config.js b/packages/contact-center/cc-components/webpack.config.js
index a5e24e5ab..bf0be1c57 100644
--- a/packages/contact-center/cc-components/webpack.config.js
+++ b/packages/contact-center/cc-components/webpack.config.js
@@ -1,4 +1,4 @@
-const { merge } = require('webpack-merge');
+const { mergeWithCustomize, customizeObject } = require('webpack-merge');
 const path = require('path');
 
 const baseConfig = require('../../../webpack.config');
@@ -6,7 +6,11 @@ const baseConfig = require('../../../webpack.config');
 // Helper function to resolve paths relative to the monorepo root
 const resolveMonorepoRoot = (...segments) => path.resolve(__dirname, '../../../', ...segments);
 
-module.exports = merge(baseConfig, {
+module.exports = mergeWithCustomize({
+  customizeObject: customizeObject({
+    'resolve.fallback': 'replace' // This will replace the fallback configuration
+  })
+})(baseConfig, {
   entry: {
     wc: {
       import: './src/wc.ts',
@@ -19,6 +23,7 @@ module.exports = merge(baseConfig, {
     path: path.resolve(__dirname, 'dist'),
     filename: '[name].js',
     libraryTarget: 'commonjs2',
+    publicPath: '',
   },
   externals: {
     react: 'react',
@@ -30,6 +35,9 @@ module.exports = merge(baseConfig, {
     '@momentum-ui/utils': '@momentum-ui/utils',
     '@momentum-ui/web-components': '@momentum-ui/web-components',
   },
+  resolve: {
+    fallback: {}
+  },
   module: {
     rules: [
       {
diff --git a/packages/contact-center/user-state/tests/user-state/index.tsx b/packages/contact-center/user-state/tests/user-state/index.tsx
index 7db35e9a2..4302ef50d 100644
--- a/packages/contact-center/user-state/tests/user-state/index.tsx
+++ b/packages/contact-center/user-state/tests/user-state/index.tsx
@@ -14,6 +14,8 @@ jest.mock('@webex/cc-store', () => {return {
   agentId: 'testAgentId'
 }});
 
+jest.mock('@momentum-ui/web-components', () => {});
+
 describe('UserState Component', () => {
   let workerMock;
 
diff --git a/yarn.lock b/yarn.lock
index 24f49cc81..387852e59 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5797,19 +5797,11 @@ __metadata:
     "@webex/cc-store": "workspace:*"
     babel-jest: "npm:29.7.0"
     babel-loader: "npm:9.2.1"
-    crypto-browserify: "npm:^3.12.1"
     file-loader: "npm:6.2.0"
     jest: "npm:29.7.0"
     jest-environment-jsdom: "npm:29.7.0"
-    os-browserify: "npm:^0.3.0"
-    process: "npm:^0.11.10"
-    querystring-es3: "npm:^0.2.1"
-    stream-browserify: "npm:^3.0.0"
     ts-loader: "npm:9.5.1"
     typescript: "npm:5.6.3"
-    url: "npm:^0.11.4"
-    util: "npm:^0.12.5"
-    vm-browserify: "npm:^1.1.2"
     webpack: "npm:5.94.0"
     webpack-cli: "npm:5.1.4"
     webpack-merge: "npm:6.0.1"

From 8a63ae3164f01ff6d71df4ed8c29326e6e0c394a Mon Sep 17 00:00:00 2001
From: Kesava Krishnan Madavan <mkesavan13@gmail.com>
Date: Tue, 28 Jan 2025 19:00:20 +0530
Subject: [PATCH 10/15] chore: debug persistance ci issue

---
 .circleci/config.yml | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index da5dfa68e..fea4c3bb6 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -28,6 +28,11 @@ jobs:
       - run:
           name: Install Dependencies
           command: yarn install
+      - run:
+          name: Debug Paths
+          command: |
+            echo "Directory Structure:"
+            find . -type d
       - save_cache:
           key: dependency-cache-{{ checksum "yarn.lock" }}
           paths:

From 07ba25c5f8c3827c0ad39f79f01d6b139fd2bd2e Mon Sep 17 00:00:00 2001
From: Kesava Krishnan Madavan <mkesavan13@gmail.com>
Date: Tue, 28 Jan 2025 19:26:14 +0530
Subject: [PATCH 11/15] chore(ci): remove debug paths

---
 .circleci/config.yml | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index fea4c3bb6..da5dfa68e 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -28,11 +28,6 @@ jobs:
       - run:
           name: Install Dependencies
           command: yarn install
-      - run:
-          name: Debug Paths
-          command: |
-            echo "Directory Structure:"
-            find . -type d
       - save_cache:
           key: dependency-cache-{{ checksum "yarn.lock" }}
           paths:

From 566b0ef3c2f5edab6c434af674755470373e6d81 Mon Sep 17 00:00:00 2001
From: Kesava Krishnan Madavan <mkesavan13@gmail.com>
Date: Wed, 29 Jan 2025 10:54:04 +0530
Subject: [PATCH 12/15] chore: add docs to ignore list

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 5c87e5300..78fb12616 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,7 @@ pids
 *.pid
 *.seed
 *.out
+docs/
 
 #Logs and others
 *.swp

From baa54bdbe16ebf8d98b2379faea975df90a3af99 Mon Sep 17 00:00:00 2001
From: Kesava Krishnan Madavan <mkesavan13@gmail.com>
Date: Wed, 29 Jan 2025 20:13:29 +0530
Subject: [PATCH 13/15] fix: address review comments

---
 package.json                                  |  1 -
 .../contact-center/cc-components/package.json |  4 +-
 .../components/user-state/user-state.types.ts |  2 +-
 packages/contact-center/store/src/store.ts    |  2 +-
 .../contact-center/user-state/src/helper.ts   |  5 +-
 .../user-state/src/user-state/index.tsx       | 12 ++--
 .../cc/samples-cc-react-app/src/App.tsx       |  7 +-
 yarn.lock                                     | 69 ++-----------------
 8 files changed, 22 insertions(+), 80 deletions(-)

diff --git a/package.json b/package.json
index fcf71cb87..a28d9892a 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,6 @@
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^11.0.1",
     "@testing-library/react-hooks": "^8.0.1",
-    "copy-webpack-plugin": "^6.3.1",
     "crypto-browserify": "^3.12.1",
     "css-loader": "^7.1.2",
     "html-webpack-plugin": "^5.6.3",
diff --git a/packages/contact-center/cc-components/package.json b/packages/contact-center/cc-components/package.json
index 7dee2ed14..855d43b48 100644
--- a/packages/contact-center/cc-components/package.json
+++ b/packages/contact-center/cc-components/package.json
@@ -63,6 +63,8 @@
     "@momentum-ui/icons": ">=8.28.5",
     "@momentum-ui/tokens": ">=1.7.1",
     "@momentum-ui/utils": ">=6.2.15",
-    "@momentum-ui/web-components": ">=2.16.16"
+    "@momentum-ui/web-components": ">=2.16.16",
+    "react": ">=18.3.1",
+    "react-dom": ">=18.3.1"
   }
 }
diff --git a/packages/contact-center/cc-components/src/components/user-state/user-state.types.ts b/packages/contact-center/cc-components/src/components/user-state/user-state.types.ts
index dd80dbfb2..0db5c2026 100644
--- a/packages/contact-center/cc-components/src/components/user-state/user-state.types.ts
+++ b/packages/contact-center/cc-components/src/components/user-state/user-state.types.ts
@@ -50,5 +50,5 @@ export interface IUserState {
   /**
    * The preferred theme
    */
-  currentTheme?: string;
+  currentTheme: string;
 }
diff --git a/packages/contact-center/store/src/store.ts b/packages/contact-center/store/src/store.ts
index 06ce1a76b..c16680221 100644
--- a/packages/contact-center/store/src/store.ts
+++ b/packages/contact-center/store/src/store.ts
@@ -20,7 +20,7 @@ class Store implements IStore {
   idleCodes: IdleCode[] = [];
   agentId: string = '';
   selectedLoginOption: string = '';
-  currentTheme: string = 'light';
+  currentTheme: string = 'LIGHT';
   isAgentLoggedIn = false;
   deviceType: string = '';
 
diff --git a/packages/contact-center/user-state/src/helper.ts b/packages/contact-center/user-state/src/helper.ts
index ed2f1925b..4f375d861 100644
--- a/packages/contact-center/user-state/src/helper.ts
+++ b/packages/contact-center/user-state/src/helper.ts
@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 // TODO: Export & Import this AGENT_STATE_CHANGE constant from SDK
 import { AGENT_STATE_CHANGE } from './constants';
 
-export const useUserState = ({ idleCodes, agentId, cc, currentTheme }) => {
+export const useUserState = ({ idleCodes, agentId, cc }) => {
   const [isSettingAgentStatus, setIsSettingAgentStatus] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
   const [elapsedTime, setElapsedTime] = useState(0);
@@ -91,7 +91,6 @@ export const useUserState = ({ idleCodes, agentId, cc, currentTheme }) => {
     errorMessage,
     elapsedTime,
     currentState,
-    setCurrentState,
-    currentTheme
+    setCurrentState
   };
 };
\ No newline at end of file
diff --git a/packages/contact-center/user-state/src/user-state/index.tsx b/packages/contact-center/user-state/src/user-state/index.tsx
index b7063e73e..25149ba3d 100644
--- a/packages/contact-center/user-state/src/user-state/index.tsx
+++ b/packages/contact-center/user-state/src/user-state/index.tsx
@@ -7,12 +7,14 @@ import {UserStateComponent, IUserState} from '@webex/cc-components';
 
 const UserState: React.FunctionComponent = observer(() => {
   const {cc, idleCodes, agentId, currentTheme} = store;
-  const props: IUserState = useUserState({
-    idleCodes,
-    agentId,
-    cc,
+  const props: IUserState = {
+    ...useUserState({
+      idleCodes,
+      agentId,
+      cc
+    }),
     currentTheme
-  });
+  }
 
   return <UserStateComponent {...props}/>;
 });
diff --git a/widgets-samples/cc/samples-cc-react-app/src/App.tsx b/widgets-samples/cc/samples-cc-react-app/src/App.tsx
index f33318b9f..df953030f 100644
--- a/widgets-samples/cc/samples-cc-react-app/src/App.tsx
+++ b/widgets-samples/cc/samples-cc-react-app/src/App.tsx
@@ -5,8 +5,7 @@ function App() {
   const [isSdkReady, setIsSdkReady] = useState(false);
   const [accessToken, setAccessToken] = useState('');
   const [isLoggedIn, setIsLoggedIn] = useState(false);
-  const themeCheckbox = useRef(null);
-  const currentTheme = store.currentTheme;
+  const themeCheckboxRef = useRef(null);
 
   const webexConfig = {
     fedramp: false,
@@ -56,9 +55,9 @@ function App() {
         type='checkbox'
         id='theme'
         name='theme'
-        ref={themeCheckbox}
+        ref={themeCheckboxRef}
         onChange={() => {
-          store.setCurrentTheme(themeCheckbox.current.checked ? 'DARK' : 'LIGHT');
+          store.setCurrentTheme(themeCheckboxRef.current.checked ? 'DARK' : 'LIGHT');
         }}
       /> Dark Theme
       <br />
diff --git a/yarn.lock b/yarn.lock
index fdda1c3ba..fc315a49f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5825,6 +5825,8 @@ __metadata:
     "@momentum-ui/tokens": ">=1.7.1"
     "@momentum-ui/utils": ">=6.2.15"
     "@momentum-ui/web-components": ">=2.16.16"
+    react: ">=18.3.1"
+    react-dom: ">=18.3.1"
   languageName: unknown
   linkType: soft
 
@@ -10275,7 +10277,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cacache@npm:^15.0.5, cacache@npm:^15.2.0":
+"cacache@npm:^15.2.0":
   version: 15.3.0
   resolution: "cacache@npm:15.3.0"
   dependencies:
@@ -11512,27 +11514,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"copy-webpack-plugin@npm:^6.3.1":
-  version: 6.4.1
-  resolution: "copy-webpack-plugin@npm:6.4.1"
-  dependencies:
-    cacache: "npm:^15.0.5"
-    fast-glob: "npm:^3.2.4"
-    find-cache-dir: "npm:^3.3.1"
-    glob-parent: "npm:^5.1.1"
-    globby: "npm:^11.0.1"
-    loader-utils: "npm:^2.0.0"
-    normalize-path: "npm:^3.0.0"
-    p-limit: "npm:^3.0.2"
-    schema-utils: "npm:^3.0.0"
-    serialize-javascript: "npm:^5.0.1"
-    webpack-sources: "npm:^1.4.3"
-  peerDependencies:
-    webpack: ^4.37.0 || ^5.0.0
-  checksum: 10c0/f8ef9a775c8d79cb13866f3717ff8f296aab069f6249c2606b402eec52c1b666b6ab8a2bd2d4a05ff60e5d4bf53579aaaedeca35a179c78746fcc519899732a8
-  languageName: node
-  linkType: hard
-
 "core-decorators@npm:^0.20.0":
   version: 0.20.0
   resolution: "core-decorators@npm:0.20.0"
@@ -14323,19 +14304,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^3.2.4":
-  version: 3.3.3
-  resolution: "fast-glob@npm:3.3.3"
-  dependencies:
-    "@nodelib/fs.stat": "npm:^2.0.2"
-    "@nodelib/fs.walk": "npm:^1.2.3"
-    glob-parent: "npm:^5.1.2"
-    merge2: "npm:^1.3.0"
-    micromatch: "npm:^4.0.8"
-  checksum: 10c0/f6aaa141d0d3384cf73cbcdfc52f475ed293f6d5b65bfc5def368b09163a9f7e5ec2b3014d80f733c405f58e470ee0cc451c2937685045cddcdeaa24199c43fe
-  languageName: node
-  linkType: hard
-
 "fast-glob@npm:^3.2.5, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.2":
   version: 3.3.2
   resolution: "fast-glob@npm:3.3.2"
@@ -15312,7 +15280,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob-parent@npm:^5.0.0, glob-parent@npm:^5.1.1, glob-parent@npm:^5.1.2, glob-parent@npm:~5.1.2":
+"glob-parent@npm:^5.0.0, glob-parent@npm:^5.1.2, glob-parent@npm:~5.1.2":
   version: 5.1.2
   resolution: "glob-parent@npm:5.1.2"
   dependencies:
@@ -20036,7 +20004,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"micromatch@npm:^4.0.0, micromatch@npm:^4.0.2, micromatch@npm:^4.0.4, micromatch@npm:^4.0.5, micromatch@npm:^4.0.8":
+"micromatch@npm:^4.0.0, micromatch@npm:^4.0.2, micromatch@npm:^4.0.4, micromatch@npm:^4.0.5":
   version: 4.0.8
   resolution: "micromatch@npm:4.0.8"
   dependencies:
@@ -25357,15 +25325,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"serialize-javascript@npm:^5.0.1":
-  version: 5.0.1
-  resolution: "serialize-javascript@npm:5.0.1"
-  dependencies:
-    randombytes: "npm:^2.1.0"
-  checksum: 10c0/646bd92a8298d764d38316f3006bce0b0def6d0e254791396ac34403847654d9346b0b6ed7865efd799d93d4c47d900e08a8fa7a6f7f8d2dbaebab5444c3b431
-  languageName: node
-  linkType: hard
-
 "serialize-javascript@npm:^6.0.1":
   version: 6.0.2
   resolution: "serialize-javascript@npm:6.0.2"
@@ -25819,13 +25778,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-list-map@npm:^2.0.0":
-  version: 2.0.1
-  resolution: "source-list-map@npm:2.0.1"
-  checksum: 10c0/2e5e421b185dcd857f46c3c70e2e711a65d717b78c5f795e2e248c9d67757882ea989b80ebc08cf164eeeda5f4be8aa95d3b990225070b2daaaf3257c5958149
-  languageName: node
-  linkType: hard
-
 "source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.2.1":
   version: 1.2.1
   resolution: "source-map-js@npm:1.2.1"
@@ -28245,7 +28197,6 @@ __metadata:
     "@semantic-release/git": "npm:^10.0.1"
     "@semantic-release/github": "npm:^11.0.1"
     "@testing-library/react-hooks": "npm:^8.0.1"
-    copy-webpack-plugin: "npm:^6.3.1"
     crypto-browserify: "npm:^3.12.1"
     css-loader: "npm:^7.1.2"
     html-webpack-plugin: "npm:^5.6.3"
@@ -28528,16 +28479,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack-sources@npm:^1.4.3":
-  version: 1.4.3
-  resolution: "webpack-sources@npm:1.4.3"
-  dependencies:
-    source-list-map: "npm:^2.0.0"
-    source-map: "npm:~0.6.1"
-  checksum: 10c0/78dafb3e1e297d3f4eb6204311e8c64d28cd028f82887ba33aaf03fffc82482d8e1fdf6de25a60f4dde621d3565f4c3b1bfb350f09add8f4e54e00279ff3db5e
-  languageName: node
-  linkType: hard
-
 "webpack-sources@npm:^3.2.3":
   version: 3.2.3
   resolution: "webpack-sources@npm:3.2.3"

From 824288e9bb22e5b590063a92459c900d53cac22e Mon Sep 17 00:00:00 2001
From: Kesava Krishnan Madavan <mkesavan13@gmail.com>
Date: Fri, 31 Jan 2025 15:32:25 +0530
Subject: [PATCH 14/15] fix: rename folder, formatTime util

---
 .../{user-state => UserState}/user-state.scss |  2 +-
 .../src/components/UserState/user-state.tsx   | 52 ++++++++++++++++
 .../user-state.types.ts                       |  0
 .../src/components/user-state/user-state.tsx  | 60 -------------------
 .../contact-center/cc-components/src/index.ts |  4 +-
 .../contact-center/cc-components/src/utils.ts |  6 ++
 .../contact-center/cc-components/src/wc.ts    |  2 +-
 7 files changed, 62 insertions(+), 64 deletions(-)
 rename packages/contact-center/cc-components/src/components/{user-state => UserState}/user-state.scss (99%)
 create mode 100644 packages/contact-center/cc-components/src/components/UserState/user-state.tsx
 rename packages/contact-center/cc-components/src/components/{user-state => UserState}/user-state.types.ts (100%)
 delete mode 100644 packages/contact-center/cc-components/src/components/user-state/user-state.tsx
 create mode 100644 packages/contact-center/cc-components/src/utils.ts

diff --git a/packages/contact-center/cc-components/src/components/user-state/user-state.scss b/packages/contact-center/cc-components/src/components/UserState/user-state.scss
similarity index 99%
rename from packages/contact-center/cc-components/src/components/user-state/user-state.scss
rename to packages/contact-center/cc-components/src/components/UserState/user-state.scss
index 0f719e04f..a13677e04 100644
--- a/packages/contact-center/cc-components/src/components/user-state/user-state.scss
+++ b/packages/contact-center/cc-components/src/components/UserState/user-state.scss
@@ -140,4 +140,4 @@
     .elapsedTime-disabled {
         color: #777; /* Darker gray for disabled state */
     }
-}
\ No newline at end of file
+}
diff --git a/packages/contact-center/cc-components/src/components/UserState/user-state.tsx b/packages/contact-center/cc-components/src/components/UserState/user-state.tsx
new file mode 100644
index 000000000..867618602
--- /dev/null
+++ b/packages/contact-center/cc-components/src/components/UserState/user-state.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+
+import {IUserState} from './user-state.types';
+import {formatTime} from '../../utils'
+
+import './user-state.scss';
+
+const UserStateComponent: React.FunctionComponent<IUserState> = (props) => {
+  const {idleCodes,setAgentStatus,isSettingAgentStatus, errorMessage, elapsedTime, currentState, currentTheme} = props;
+
+  return (
+    <div className={`box ${currentTheme === 'DARK' ? 'dark-theme' : 'light-theme'}`}>
+      <section className='sectionBox'>
+        <fieldset className='fieldset'>
+          <legend data-testid='user-state-title' className='legendBox'>Agent State</legend>
+          <div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }} />
+          <select
+            id="idleCodes"
+            value={currentState.id}
+            className='select'
+            onChange={
+              (event) => {
+                const code = idleCodes?.filter(code => code.id === event.target.value)[0];
+                setAgentStatus(code);
+              }
+            }
+            disabled={isSettingAgentStatus}
+          >
+            {idleCodes?.filter(code => !code.isSystem).map((code) => {
+              return (
+                <option
+                  key={code.id}
+                  value={code.id}
+                >
+                    {code.name}
+                </option>
+              );
+          })}
+          </select>
+          {/* @ts-ignore */}
+          <md-button color={`${currentTheme === 'DARK' ? 'white' : 'dark-grey'}`}>Test Button</md-button>
+          <div className={`elapsedTime ${isSettingAgentStatus ? 'elapsedTime-disabled' : ''}`}>{formatTime(elapsedTime)}</div>
+          {
+            errorMessage && <div style={{color: 'red'}}>{errorMessage}</div>
+          }
+        </fieldset>
+      </section>
+    </div>
+  );
+};
+
+export default UserStateComponent;
diff --git a/packages/contact-center/cc-components/src/components/user-state/user-state.types.ts b/packages/contact-center/cc-components/src/components/UserState/user-state.types.ts
similarity index 100%
rename from packages/contact-center/cc-components/src/components/user-state/user-state.types.ts
rename to packages/contact-center/cc-components/src/components/UserState/user-state.types.ts
diff --git a/packages/contact-center/cc-components/src/components/user-state/user-state.tsx b/packages/contact-center/cc-components/src/components/user-state/user-state.tsx
deleted file mode 100644
index e058d7a93..000000000
--- a/packages/contact-center/cc-components/src/components/user-state/user-state.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react';
-
-import {IUserState} from './user-state.types';
-
-import './user-state.scss';
-
-const UserStateComponent: React.FunctionComponent<IUserState> = (props) => {
-  const {idleCodes,setAgentStatus,isSettingAgentStatus, errorMessage, elapsedTime, currentState, currentTheme} = props;
-
-  const formatTime = (time: number): string => {
-    const hours = Math.floor(time / 3600);
-    const minutes = Math.floor((time % 3600) / 60);
-    const seconds = time % 60;
-    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
-  };
-
-  return (
-    <>
-      <div className={`box ${currentTheme === 'DARK' ? 'dark-theme' : 'light-theme'}`}>
-        <section className='sectionBox'>
-          <fieldset className='fieldset'>
-            <legend data-testid='user-state-title' className='legendBox'>Agent State</legend>
-            <div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }} />
-            <select
-              id="idleCodes"
-              value={currentState.id}
-              className='select'
-              onChange={
-                (event) => {
-                  const code = idleCodes?.filter(code => code.id === event.target.value)[0];
-                  setAgentStatus(code);
-                }
-              }
-              disabled={isSettingAgentStatus}
-            >
-              {idleCodes?.filter(code => !code.isSystem).map((code) => {
-                return (
-                  <option
-                    key={code.id}
-                    value={code.id}
-                  >
-                      {code.name}
-                  </option>
-                );
-            })}
-            </select>
-            {/* @ts-ignore */}
-            <md-button color={`${currentTheme === 'DARK' ? 'white' : 'dark-grey'}`}>Test Button</md-button>
-            <div className={`elapsedTime ${isSettingAgentStatus ? 'elapsedTime-disabled' : ''}`}>{formatTime(elapsedTime)}</div>
-            {
-              errorMessage && <div style={{color: 'red'}}>{errorMessage}</div>
-            }
-          </fieldset>
-        </section>
-      </div>
-    </>
-  );
-};
-
-export default UserStateComponent;
diff --git a/packages/contact-center/cc-components/src/index.ts b/packages/contact-center/cc-components/src/index.ts
index 19446f482..279e94f7a 100644
--- a/packages/contact-center/cc-components/src/index.ts
+++ b/packages/contact-center/cc-components/src/index.ts
@@ -1,5 +1,5 @@
-import UserStateComponent from './components/user-state/user-state';
-import {IUserState} from './components/user-state/user-state.types';
+import UserStateComponent from './components/UserState/user-state';
+import {IUserState} from './components/UserState/user-state.types';
 import '@momentum-ui/icons/css/momentum-ui-icons.min.css';
 import '@momentum-ui/core/css/momentum-ui.min.css';
 import '@momentum-ui/web-components';
diff --git a/packages/contact-center/cc-components/src/utils.ts b/packages/contact-center/cc-components/src/utils.ts
new file mode 100644
index 000000000..6c70a9209
--- /dev/null
+++ b/packages/contact-center/cc-components/src/utils.ts
@@ -0,0 +1,6 @@
+export const formatTime = (time: number): string => {
+    const hours = Math.floor(time / 3600);
+    const minutes = Math.floor((time % 3600) / 60);
+    const seconds = time % 60;
+    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+};
\ No newline at end of file
diff --git a/packages/contact-center/cc-components/src/wc.ts b/packages/contact-center/cc-components/src/wc.ts
index 68c55f8bc..895a124b5 100644
--- a/packages/contact-center/cc-components/src/wc.ts
+++ b/packages/contact-center/cc-components/src/wc.ts
@@ -1,5 +1,5 @@
 import r2wc from '@r2wc/react-to-web-component';
-import UserStateComponent from './components/user-state/user-state';
+import UserStateComponent from './components/UserState/user-state';
 import '@momentum-ui/web-components';
 import '@momentum-ui/icons/css/momentum-ui-icons.min.css';
 import '@momentum-ui/core/css/momentum-ui.min.css';

From 9b2142dd54f9924bdee2b7f0cfdb0616ef80223c Mon Sep 17 00:00:00 2001
From: Kesava Krishnan Madavan <mkesavan13@gmail.com>
Date: Fri, 31 Jan 2025 16:45:04 +0530
Subject: [PATCH 15/15] fix(cc-components): user state component ut

---
 .../{user-state => UserState}/user-state.tsx  | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)
 rename packages/contact-center/cc-components/tests/components/{user-state => UserState}/user-state.tsx (74%)

diff --git a/packages/contact-center/cc-components/tests/components/user-state/user-state.tsx b/packages/contact-center/cc-components/tests/components/UserState/user-state.tsx
similarity index 74%
rename from packages/contact-center/cc-components/tests/components/user-state/user-state.tsx
rename to packages/contact-center/cc-components/tests/components/UserState/user-state.tsx
index 083a7e39d..8fef0bb4c 100644
--- a/packages/contact-center/cc-components/tests/components/user-state/user-state.tsx
+++ b/packages/contact-center/cc-components/tests/components/UserState/user-state.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import UserStatePresentational from '../../../src/components/user-state/user-state';
+import UserStateComponent from '../../../src/components/UserState/user-state';
 
-describe('UserStatePresentational Component', () => {
+describe('UserStateComponent', () => {
   const mockSetAgentStatus = jest.fn();
   const mockSetCurrentState = jest.fn();
   const defaultProps = {
@@ -17,18 +17,19 @@ describe('UserStatePresentational Component', () => {
     errorMessage: '',
     elapsedTime: 3661, // 1 hour, 1 minute, 1 second
     currentState: { id: '1' },
-    setCurrentState: mockSetCurrentState
+    setCurrentState: mockSetCurrentState,
+    currentTheme: 'LIGHT'
   };
 
   it('should render the component with correct elements', () => {
-    render(<UserStatePresentational {...defaultProps} />);
+    render(<UserStateComponent {...defaultProps} />);
     expect(screen.getByTestId('user-state-title')).toHaveTextContent('Agent State');
     expect(screen.getByRole('combobox')).toBeInTheDocument();
     expect(screen.getByText('01:01:01')).toBeInTheDocument();
   });
 
   it('should render only non-system idle codes in the dropdown', () => {
-    render(<UserStatePresentational {...defaultProps} />);
+    render(<UserStateComponent {...defaultProps} />);
     const options = screen.getAllByRole('option');
     expect(options).toHaveLength(2);
     expect(options[0]).toHaveTextContent('Idle Code 1');
@@ -36,27 +37,27 @@ describe('UserStatePresentational Component', () => {
   });
 
   it('should call setAgentStatus with correct code when an idle code is selected', () => {
-    render(<UserStatePresentational {...defaultProps} />);
+    render(<UserStateComponent {...defaultProps} />);
     fireEvent.change(screen.getByRole('combobox'), { target: { value: '3' } });
     expect(mockSetAgentStatus).toHaveBeenCalledWith({ id: '3', name: 'Idle Code 3', isSystem: false });
   });
 
   it('should display an error message if provided', () => {
-    render(<UserStatePresentational {...defaultProps} errorMessage="Error message" />);
+    render(<UserStateComponent {...defaultProps} errorMessage="Error message" />);
     expect(screen.getByText('Error message')).toBeInTheDocument();
     expect(screen.getByText('Error message')).toHaveStyle('color: red');
   });
 
   it('should disable the select box when isSettingAgentStatus is true', () => {
-    render(<UserStatePresentational {...{ ...defaultProps, isSettingAgentStatus: true }} />);
+    render(<UserStateComponent {...{ ...defaultProps, isSettingAgentStatus: true }} />);
     expect(screen.getByRole('combobox')).toBeDisabled();
   });
 
   it('should render elapsed time in correct color based on isSettingAgentStatus', () => {
-    const { rerender } = render(<UserStatePresentational {...defaultProps} />);
+    const { rerender } = render(<UserStateComponent {...defaultProps} />);
     expect(screen.getByText('01:01:01')).toHaveClass('elapsedTime');
 
-    rerender(<UserStatePresentational {...{ ...defaultProps, isSettingAgentStatus: true }} />);
+    rerender(<UserStateComponent {...{ ...defaultProps, isSettingAgentStatus: true }} />);
     expect(screen.getByText('01:01:01')).toHaveClass('elapsedTime elapsedTime-disabled');
   });
 });