From 95502d763a1b0a9e3cba36ff9a22cb92002fd975 Mon Sep 17 00:00:00 2001
From: douara <abderrahmandouara@gmail.com>
Date: Wed, 3 Jul 2024 22:23:57 +0800
Subject: [PATCH 1/5] fix: added missing dependencies to some packages

---
 package-lock.json           | 296 +-----------------------------------
 packages/hooks/package.json |   2 +-
 packages/react/README.md    |   8 +-
 packages/react/package.json |   6 +-
 packages/utils/package.json |   7 +-
 5 files changed, 18 insertions(+), 301 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0438fb835..6ae74ab53 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2942,17 +2942,6 @@
       "version": "0.9.1",
       "license": "MIT"
     },
-    "node_modules/@emotion/is-prop-valid": {
-      "version": "0.7.3",
-      "license": "MIT",
-      "dependencies": {
-        "@emotion/memoize": "0.7.1"
-      }
-    },
-    "node_modules/@emotion/memoize": {
-      "version": "0.7.1",
-      "license": "MIT"
-    },
     "node_modules/@emotion/serialize": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.4.tgz",
@@ -12848,7 +12837,6 @@
     },
     "node_modules/@testing-library/dom": {
       "version": "9.3.4",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
@@ -12866,7 +12854,6 @@
     },
     "node_modules/@testing-library/dom/node_modules/ansi-styles": {
       "version": "4.3.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -12880,7 +12867,6 @@
     },
     "node_modules/@testing-library/dom/node_modules/chalk": {
       "version": "4.1.2",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.1.0",
@@ -12895,7 +12881,6 @@
     },
     "node_modules/@testing-library/dom/node_modules/has-flag": {
       "version": "4.0.0",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -12903,7 +12888,6 @@
     },
     "node_modules/@testing-library/dom/node_modules/pretty-format": {
       "version": "27.5.1",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1",
@@ -12916,7 +12900,6 @@
     },
     "node_modules/@testing-library/dom/node_modules/pretty-format/node_modules/ansi-styles": {
       "version": "5.2.0",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -12927,12 +12910,10 @@
     },
     "node_modules/@testing-library/dom/node_modules/react-is": {
       "version": "17.0.2",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@testing-library/dom/node_modules/supports-color": {
       "version": "7.2.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-flag": "^4.0.0"
@@ -13037,7 +13018,6 @@
     },
     "node_modules/@testing-library/react": {
       "version": "14.2.1",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
@@ -13094,7 +13074,6 @@
     },
     "node_modules/@types/aria-query": {
       "version": "5.0.4",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/babel__core": {
@@ -13472,7 +13451,6 @@
     },
     "node_modules/@types/react-dom": {
       "version": "18.2.19",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/react": "*"
@@ -14958,7 +14936,6 @@
     },
     "node_modules/aria-query": {
       "version": "5.1.3",
-      "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "deep-equal": "^2.0.5"
@@ -15012,7 +14989,6 @@
     },
     "node_modules/array-buffer-byte-length": {
       "version": "1.0.1",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.5",
@@ -18146,15 +18122,6 @@
         "node": ">=12 || >=16"
       }
     },
-    "node_modules/css-jss": {
-      "version": "10.10.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "^10.10.0",
-        "jss-preset-default": "^10.10.0"
-      }
-    },
     "node_modules/css-loader": {
       "version": "6.10.0",
       "dev": true,
@@ -18234,14 +18201,6 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
-    "node_modules/css-vendor": {
-      "version": "2.0.8",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.8.3",
-        "is-in-browser": "^1.0.2"
-      }
-    },
     "node_modules/css-what": {
       "version": "6.1.0",
       "dev": true,
@@ -18504,7 +18463,6 @@
     },
     "node_modules/deep-equal": {
       "version": "2.2.3",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "array-buffer-byte-length": "^1.0.0",
@@ -18627,7 +18585,6 @@
     },
     "node_modules/define-properties": {
       "version": "1.2.1",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "define-data-property": "^1.0.1",
@@ -18865,7 +18822,6 @@
     },
     "node_modules/dom-accessibility-api": {
       "version": "0.5.16",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/dom-converter": {
@@ -19332,7 +19288,6 @@
     },
     "node_modules/es-get-iterator": {
       "version": "1.1.3",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -21729,7 +21684,6 @@
     },
     "node_modules/functions-have-names": {
       "version": "1.2.3",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -23128,7 +23082,6 @@
     },
     "node_modules/has-bigints": {
       "version": "1.0.2",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -23356,17 +23309,6 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
-    "node_modules/hoist-non-react-statics": {
-      "version": "3.3.2",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "react-is": "^16.7.0"
-      }
-    },
-    "node_modules/hoist-non-react-statics/node_modules/react-is": {
-      "version": "16.13.1",
-      "license": "MIT"
-    },
     "node_modules/homedir-polyfill": {
       "version": "1.0.3",
       "dev": true,
@@ -23628,10 +23570,6 @@
         "ms": "^2.0.0"
       }
     },
-    "node_modules/hyphenate-style-name": {
-      "version": "1.0.4",
-      "license": "BSD-3-Clause"
-    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "license": "MIT",
@@ -23960,7 +23898,6 @@
     },
     "node_modules/internal-slot": {
       "version": "1.0.7",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -24072,7 +24009,6 @@
     },
     "node_modules/is-array-buffer": {
       "version": "3.0.4",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -24105,7 +24041,6 @@
     },
     "node_modules/is-bigint": {
       "version": "1.0.4",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-bigints": "^1.0.1"
@@ -24126,7 +24061,6 @@
     },
     "node_modules/is-boolean-object": {
       "version": "1.1.2",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -24210,7 +24144,6 @@
     },
     "node_modules/is-date-object": {
       "version": "1.0.5",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-tostringtag": "^1.0.0"
@@ -24344,10 +24277,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-in-browser": {
-      "version": "1.1.3",
-      "license": "MIT"
-    },
     "node_modules/is-interactive": {
       "version": "1.0.0",
       "license": "MIT",
@@ -24362,7 +24291,6 @@
     },
     "node_modules/is-map": {
       "version": "2.0.2",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -24416,7 +24344,6 @@
     },
     "node_modules/is-number-object": {
       "version": "1.0.7",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-tostringtag": "^1.0.0"
@@ -24475,7 +24402,6 @@
     },
     "node_modules/is-regex": {
       "version": "1.1.4",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -24512,7 +24438,6 @@
     },
     "node_modules/is-set": {
       "version": "2.0.2",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -24520,7 +24445,6 @@
     },
     "node_modules/is-shared-array-buffer": {
       "version": "1.0.2",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2"
@@ -24550,7 +24474,6 @@
     },
     "node_modules/is-string": {
       "version": "1.0.7",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-tostringtag": "^1.0.0"
@@ -24575,7 +24498,6 @@
     },
     "node_modules/is-symbol": {
       "version": "1.0.4",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-symbols": "^1.0.2"
@@ -24652,7 +24574,6 @@
     },
     "node_modules/is-weakmap": {
       "version": "2.0.1",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -24671,7 +24592,6 @@
     },
     "node_modules/is-weakset": {
       "version": "2.0.2",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -24708,7 +24628,6 @@
     },
     "node_modules/isarray": {
       "version": "2.0.5",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/isexe": {
@@ -26932,144 +26851,6 @@
         "node": ">=0.6.0"
       }
     },
-    "node_modules/jss": {
-      "version": "10.10.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "csstype": "^3.0.2",
-        "is-in-browser": "^1.1.3",
-        "tiny-warning": "^1.0.2"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/jss"
-      }
-    },
-    "node_modules/jss-plugin-camel-case": {
-      "version": "10.10.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "hyphenate-style-name": "^1.0.3",
-        "jss": "10.10.0"
-      }
-    },
-    "node_modules/jss-plugin-compose": {
-      "version": "10.10.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "node_modules/jss-plugin-default-unit": {
-      "version": "10.10.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0"
-      }
-    },
-    "node_modules/jss-plugin-expand": {
-      "version": "10.10.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0"
-      }
-    },
-    "node_modules/jss-plugin-extend": {
-      "version": "10.10.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "node_modules/jss-plugin-global": {
-      "version": "10.10.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0"
-      }
-    },
-    "node_modules/jss-plugin-nested": {
-      "version": "10.10.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "node_modules/jss-plugin-props-sort": {
-      "version": "10.10.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0"
-      }
-    },
-    "node_modules/jss-plugin-rule-value-function": {
-      "version": "10.10.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "node_modules/jss-plugin-rule-value-observable": {
-      "version": "10.10.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0",
-        "symbol-observable": "^1.2.0"
-      }
-    },
-    "node_modules/jss-plugin-template": {
-      "version": "10.10.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "node_modules/jss-plugin-vendor-prefixer": {
-      "version": "10.10.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "css-vendor": "^2.0.8",
-        "jss": "10.10.0"
-      }
-    },
-    "node_modules/jss-preset-default": {
-      "version": "10.10.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0",
-        "jss-plugin-camel-case": "10.10.0",
-        "jss-plugin-compose": "10.10.0",
-        "jss-plugin-default-unit": "10.10.0",
-        "jss-plugin-expand": "10.10.0",
-        "jss-plugin-extend": "10.10.0",
-        "jss-plugin-global": "10.10.0",
-        "jss-plugin-nested": "10.10.0",
-        "jss-plugin-props-sort": "10.10.0",
-        "jss-plugin-rule-value-function": "10.10.0",
-        "jss-plugin-rule-value-observable": "10.10.0",
-        "jss-plugin-template": "10.10.0",
-        "jss-plugin-vendor-prefixer": "10.10.0"
-      }
-    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "dev": true,
@@ -27922,7 +27703,6 @@
     },
     "node_modules/lz-string": {
       "version": "1.5.0",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "lz-string": "bin/bin.js"
@@ -31116,7 +30896,6 @@
     },
     "node_modules/object-inspect": {
       "version": "1.13.1",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -31124,7 +30903,6 @@
     },
     "node_modules/object-is": {
       "version": "1.1.5",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -31139,7 +30917,6 @@
     },
     "node_modules/object-keys": {
       "version": "1.1.1",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -31158,7 +30935,6 @@
     },
     "node_modules/object.assign": {
       "version": "4.1.5",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.5",
@@ -33247,10 +33023,6 @@
         "react-dom": ">=16.8.0"
       }
     },
-    "node_modules/react-display-name": {
-      "version": "0.2.5",
-      "license": "MIT"
-    },
     "node_modules/react-docgen": {
       "version": "7.0.3",
       "dev": true,
@@ -33344,26 +33116,6 @@
       "version": "18.2.0",
       "license": "MIT"
     },
-    "node_modules/react-jss": {
-      "version": "10.10.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "@emotion/is-prop-valid": "^0.7.3",
-        "css-jss": "10.10.0",
-        "hoist-non-react-statics": "^3.2.0",
-        "is-in-browser": "^1.1.3",
-        "jss": "10.10.0",
-        "jss-preset-default": "10.10.0",
-        "prop-types": "^15.6.0",
-        "shallow-equal": "^1.2.0",
-        "theming": "^3.3.0",
-        "tiny-warning": "^1.0.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.6"
-      }
-    },
     "node_modules/react-prism-editor": {
       "version": "1.1.2",
       "license": "MIT",
@@ -33987,7 +33739,6 @@
     },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.2",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.6",
@@ -34846,7 +34597,6 @@
     },
     "node_modules/set-function-name": {
       "version": "2.0.1",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "define-data-property": "^1.0.1",
@@ -34942,10 +34692,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/shallow-equal": {
-      "version": "1.2.1",
-      "license": "MIT"
-    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "dev": true,
@@ -34967,7 +34713,6 @@
     },
     "node_modules/side-channel": {
       "version": "1.0.5",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.6",
@@ -35708,7 +35453,6 @@
     },
     "node_modules/stop-iteration-iterator": {
       "version": "1.0.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "internal-slot": "^1.0.4"
@@ -36431,13 +36175,6 @@
         "webpack": ">=2"
       }
     },
-    "node_modules/symbol-observable": {
-      "version": "1.2.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "dev": true,
@@ -36863,22 +36600,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/theming": {
-      "version": "3.3.0",
-      "license": "MIT",
-      "dependencies": {
-        "hoist-non-react-statics": "^3.3.0",
-        "prop-types": "^15.5.8",
-        "react-display-name": "^0.2.4",
-        "tiny-warning": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "peerDependencies": {
-        "react": ">=16.3"
-      }
-    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "dev": true,
@@ -36969,10 +36690,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/tiny-warning": {
-      "version": "1.0.3",
-      "license": "MIT"
-    },
     "node_modules/tinycolor2": {
       "version": "1.6.0",
       "license": "MIT"
@@ -39496,7 +39213,6 @@
     },
     "node_modules/which-boxed-primitive": {
       "version": "1.0.2",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-bigint": "^1.0.1",
@@ -39536,7 +39252,6 @@
     },
     "node_modules/which-collection": {
       "version": "1.0.1",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-map": "^2.0.1",
@@ -40295,8 +40010,8 @@
       "version": "0.0.1",
       "license": "GPL-2.0",
       "dependencies": {
-        "@wpmudev/sui-utils": "^0.0.1",
-        "react-jss": "^10.10.0"
+        "@emotion/css": "^11.11.2",
+        "@wpmudev/sui-utils": "^0.0.1"
       },
       "devDependencies": {
         "@emotion/hash": "^0.9.1"
@@ -40320,6 +40035,7 @@
         "@wpmudev/sui-code-snippet": "^0.0.1",
         "@wpmudev/sui-color-picker": "^0.0.2",
         "@wpmudev/sui-config-table": "^0.0.1",
+        "@wpmudev/sui-css": "^0.0.2",
         "@wpmudev/sui-dashboard-widget": "^0.0.1",
         "@wpmudev/sui-date-picker": "^0.0.1",
         "@wpmudev/sui-dropdown": "^0.0.1",
@@ -40331,6 +40047,7 @@
         "@wpmudev/sui-grid": "^0.0.1",
         "@wpmudev/sui-hooks": "^0.0.1",
         "@wpmudev/sui-icon": "^0.0.1",
+        "@wpmudev/sui-icons": "^0.0.1",
         "@wpmudev/sui-input": "^0.0.1",
         "@wpmudev/sui-integration": "^0.0.1",
         "@wpmudev/sui-link": "^0.0.1",
@@ -41044,10 +40761,9 @@
         "jest-axe": "^8.0.0",
         "react": "^18.2.0"
       },
-      "devDependencies": {
-        "@testing-library/react": "^14.0.0"
-      },
+      "devDependencies": {},
       "peerDependencies": {
+        "@testing-library/react": "^14.0.0",
         "@wpmudev/sui-hooks": "^0.0.1"
       }
     }
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index 51a568226..227de9810 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -37,7 +37,7 @@
   "clean-package": "../../postpack.config.json",
   "dependencies": {
     "@wpmudev/sui-utils": "^0.0.1",
-    "react-jss": "^10.10.0"
+    "@emotion/css": "^11.11.2"
   },
   "devDependencies": {
     "@emotion/hash": "^0.9.1"
diff --git a/packages/react/README.md b/packages/react/README.md
index 4fd74cd97..ff906923d 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -3,11 +3,11 @@
 <div style="text-align: center;">
 <img src="https://img.shields.io/badge/Version-0.0.10-blue.svg" alt="Version"> <img src="https://img.shields.io/badge/License-GPL-orange.svg" alt="License">
 </div>
-<h2> Description </h2> It provides all the ui components for available for sui react
+<h2> Description </h2> It provides all the ui components available in sui react & all the necessary dependencies
+
+
+[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#license)
 
-
-[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#license)
-
 ## ➤ License
 	
 Licensed under [GPL-2.0](https://opensource.org/licenses/GPL-2.0).
diff --git a/packages/react/package.json b/packages/react/package.json
index b8dad09aa..89b32caca 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@wpmudev/sui-react",
   "version": "0.0.10",
-  "description": "It provides all the ui components for available for sui react",
+  "description": "It provides all the ui components available in sui react & all the necessary dependencies",
   "keywords": [],
   "author": "WPMU DEV (https://wpmudev.com)",
   "contributors": [
@@ -99,6 +99,8 @@
     "@wpmudev/sui-upsell-notice": "^0.0.1",
     "@wpmudev/sui-upsell": "^0.0.1",
     "@wpmudev/sui-hooks": "^0.0.1",
-    "@wpmudev/sui-utils": "^0.0.1"
+    "@wpmudev/sui-utils": "^0.0.1",
+    "@wpmudev/sui-css": "^0.0.2",
+    "@wpmudev/sui-icons": "^0.0.1"
   }
 }
diff --git a/packages/utils/package.json b/packages/utils/package.json
index c7e8769e9..d6ae12c58 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -38,11 +38,10 @@
     "jest-axe": "^8.0.0",
     "react": "^18.2.0"
   },
-  "devDependencies": {
-    "@testing-library/react": "^14.0.0"
-  },
+  "devDependencies": {},
   "peerDependencies": {
-    "@wpmudev/sui-hooks": "^0.0.1"
+    "@wpmudev/sui-hooks": "^0.0.1",
+    "@testing-library/react": "^14.0.0"
   },
   "clean-package": "../../postpack.config.json"
 }

From a4119f6ed68cd3667df2446d154fb393d6c31788 Mon Sep 17 00:00:00 2001
From: douara <abderrahmandouara@gmail.com>
Date: Thu, 4 Jul 2024 18:41:54 +0800
Subject: [PATCH 2/5] Install whole sui packages docs

---
 .../docs/src/shared/PackageInstallGuide.tsx   |  7 ++++--
 .../docs/stories/GettingStarted.stories.mdx   | 22 ++++++++++++++++++-
 packages/docs/stories/Home.stories.mdx        |  2 +-
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/packages/docs/src/shared/PackageInstallGuide.tsx b/packages/docs/src/shared/PackageInstallGuide.tsx
index 71c1ebf00..72168a8df 100644
--- a/packages/docs/src/shared/PackageInstallGuide.tsx
+++ b/packages/docs/src/shared/PackageInstallGuide.tsx
@@ -43,8 +43,11 @@ const PackageInstallGuide: React.FunctionComponent<
 		>
 			<p>
 				Install the package <Code small={true}>{packageName}</Code> as an
-				individual component or follow the Overview page instructions to get the
-				complete SUI Components package.
+				individual component or follow the{" "}
+				<a href="/?path=/docs/sui-getting-started--docs" target="_blank">
+					overview page
+				</a>{" "}
+				instructions to get the complete SUI Components package.
 			</p>
 
 			<p>
diff --git a/packages/docs/stories/GettingStarted.stories.mdx b/packages/docs/stories/GettingStarted.stories.mdx
index 38c9f9f09..02a332ca9 100644
--- a/packages/docs/stories/GettingStarted.stories.mdx
+++ b/packages/docs/stories/GettingStarted.stories.mdx
@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/addon-docs';
-import { Page, Section, List } from "@wpmudev/sui-docs";
+import { Page, Section, List, Snippet } from "@wpmudev/sui-docs";
 import { Unstyled } from '@storybook/blocks';
 
 <Meta title="SUI/Getting Started" />
@@ -26,6 +26,26 @@ import { Unstyled } from '@storybook/blocks';
 				You can contact the team by heading to the <a href="https://wpmudev.com/contact/" target="_blank" rel="nofollow">WPMU DEV contact page</a>.
 			</p>
 		</Section>
+		<Section
+			contained={ true }
+			border= { true }
+			title="Installing Shared UI"
+		>
+			<p>
+				To get the complete Shared UI packages, run the following command:
+				```
+					npm install @wpmudev/sui-react
+				```
+				When you install this package, all component packages will be included, making them available in your project. Furthermore, additional packages will also be installed.
+				<List>
+					<span label="@wpmudev/sui-css" />
+					<span label="@wpmudev/sui-hooks" />
+					<span label="@wpmudev/sui-utils" />
+					<span label="@wpmudev/sui-icons" />
+				</List>
+			</p>
+			
+		</Section>
 		<Section title="How we work" contained={ true }>
 			<p>
 				The following set of essential rules allows us to get to the highest level of productivity while benefiting the company and our team members.
diff --git a/packages/docs/stories/Home.stories.mdx b/packages/docs/stories/Home.stories.mdx
index 0e14491e3..d4eee4a2a 100644
--- a/packages/docs/stories/Home.stories.mdx
+++ b/packages/docs/stories/Home.stories.mdx
@@ -71,7 +71,7 @@ export const svgCssFramework = (
 				<Card.Simple
 					title="Components"
 					description="Presentational UI components with encapsulated styles for React framework."
-					action="sui-css-framework-colors"
+					action="sui-components-core-grid--docs"
 					image={{
 						src: cardComponents,
 						src2x: cardComponents2x,

From f33f7a111a8fb47768d32bfb6aa55eff268201f4 Mon Sep 17 00:00:00 2001
From: douara <abderrahmandouara@gmail.com>
Date: Thu, 4 Jul 2024 19:08:16 +0800
Subject: [PATCH 3/5] fix: sui-css package version

---
 packages/react/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/package.json b/packages/react/package.json
index 736d4e84b..f75e50e77 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -100,7 +100,7 @@
     "@wpmudev/sui-upsell": "^0.0.1",
     "@wpmudev/sui-hooks": "^0.0.1",
     "@wpmudev/sui-utils": "^0.0.1",
-    "@wpmudev/sui-css": "^0.0.2",
+    "@wpmudev/sui-css": "^0.0.1",
     "@wpmudev/sui-icons": "^0.0.1"
   }
 }

From 66f7c5eb291ade54774c6365b1312be35dbcf1b4 Mon Sep 17 00:00:00 2001
From: work <abderrahman.douara@incsub.com>
Date: Tue, 9 Jul 2024 16:51:21 +0800
Subject: [PATCH 4/5] remove sui-css & sui-icons from the deps of sui-react

---
 .../assets/css/src/scss/_utils/_tokens.scss   | 51 +++++++------------
 packages/react/package.json                   |  4 +-
 2 files changed, 19 insertions(+), 36 deletions(-)

diff --git a/packages/assets/css/src/scss/_utils/_tokens.scss b/packages/assets/css/src/scss/_utils/_tokens.scss
index eb93dd80a..4bcc5c6d2 100644
--- a/packages/assets/css/src/scss/_utils/_tokens.scss
+++ b/packages/assets/css/src/scss/_utils/_tokens.scss
@@ -1,13 +1,9 @@
+
 // Do not edit directly
-// Generated on Wed, 26 Jun 2024 04:11:56 GMT
+// Generated on Tue, 09 Jul 2024 08:08:37 GMT
 
 $accordion-border-radius-sm: 10px;
-$advanced-banner-background: linear-gradient(
-	90deg,
-	#222 0%,
-	#383323 48.96%,
-	#514524 100%
-);
+$advanced-banner-background: linear-gradient(90deg, #222 0%, #383323 48.96%, #514524 100%);
 $advanced-banner-size-width: 260px;
 $avatar-container-size-sm: 24px;
 $avatar-container-size-md: 32px;
@@ -261,7 +257,7 @@ $color-extended-warning-70: #fff4ce;
 $color-extended-warning-90: #fffbef;
 $color-extended-error-10: #180909;
 $color-extended-error-30: #ab403e;
-$color-extended-error-50: #f45c59;
+$color-extended-error-50: #e52400;
 $color-extended-error-70: #fccecd;
 $color-extended-error-90: #feefee;
 $color-extended-alpha-white-10: rgba(255, 255, 255, 0.1);
@@ -302,10 +298,10 @@ $border-width-md: 2px;
 $border-width-xl: 4px;
 $border-radius-xs: 3px;
 $border-radius-sm: 4px;
-$border-radius-md: 4px * 2;
-$border-radius-lg: 4px * 3;
-$border-radius-xl: 4px * 4;
-$border-radius-2xl: 4px * 5;
+$border-radius-md: 4px*2;
+$border-radius-lg: 4px*3;
+$border-radius-xl: 4px*4;
+$border-radius-2xl: 4px*5;
 $border-radius-default: 6px;
 $font-weight-sm: 400;
 $font-weight-md: 500;
@@ -331,8 +327,7 @@ $font-spacing-md: 0.2px;
 $font-spacing-lg: 0.5px;
 $font-spacing-2xl: 1px;
 $font-spacing-default: 0px;
-$font-family-default: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
-	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+$font-family-default: "Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
 $font-family-code: "Roboto Mono", monospace;
 $dashboard-size-width-lg: 440px;
 $datepicker-font-size: 14px-1px;
@@ -383,7 +378,7 @@ $input-font-height-sm: 16px;
 $input-font-height-md: 24px;
 $input-spacing-padding-vertical-sm: 8px;
 $input-spacing-padding-vertical-md: 8px;
-$input-spacing-padding-horizontal-sm: 4px * 3;
+$input-spacing-padding-horizontal-sm: 4px*3;
 $input-spacing-padding-horizontal-md: 16px;
 $input-spacing-lg: 44px;
 $input-border-width-sm: 1px;
@@ -391,7 +386,7 @@ $input-border-width-md: 2px;
 $input-border-style: solid;
 $input-border-color-default: #aaaaaa;
 $input-border-color-active: #0059ff;
-$input-border-color-error: #f45c59;
+$input-border-color-error: #e52400;
 $input-border-color-disabled: #f2f2f2;
 $input-border-color-readonly: #f8f8f8;
 $input-border-radius: 4px;
@@ -402,9 +397,9 @@ $integration-disabled-opacity: 0.5;
 $layout-content-width: 1600px;
 $layout-spacing-main-sm: -20px;
 $layout-spacing-main-md: -10px;
-$layout-spacing-content-sm: 8px * 2;
-$layout-spacing-content-md: 8px * 3;
-$layout-spacing-content-lg: 8px * 4;
+$layout-spacing-content-sm: 8px*2;
+$layout-spacing-content-md: 8px*3;
+$layout-spacing-content-lg: 8px*4;
 $menu-spacing-horizontal: 24px;
 $modal-spacing-lg: 40px;
 $modal-border-radius: 24px;
@@ -464,7 +459,7 @@ $score-color-black: #1a1a1a;
 $score-color-green: #18bb4b;
 $score-color-grey: #f2f2f2;
 $score-color-yellow: #ffcc20;
-$score-color-red: #f45c59;
+$score-color-red: #e52400;
 $score-color-blue: #0059ff;
 $score-spacing-vertical: 8px;
 $score-size-width: 90px;
@@ -538,7 +533,7 @@ $tabs-navitem-spacing-vertical: 26px;
 $tabs-navitem-spacing-horizontal: 16px;
 $tabs-navitem-gap: 4px;
 $tabs-navitem-border-width: 4px;
-$tabs-panel-spacing: 16px * 2;
+$tabs-panel-spacing: 16px*2;
 $tabs-color-active: #0059ff;
 $tabs-color-hover: #0059ff;
 $tabs-color-focus-border-color: #0059ff;
@@ -550,18 +545,8 @@ $tabs-arrow-size-height: 100%;
 $tabs-arrow-color: #aaaaaa;
 $tabs-arrow-hover-color: #1a1a1a;
 $tabs-arrow-hover-background: #ffffff;
-$tabs-arrow-left-background: linear-gradient(
-	90deg,
-	#fff 0%,
-	#fff 71.63%,
-	rgba(248, 248, 248, 0) 100%
-);
-$tabs-arrow-right-background: linear-gradient(
-	270deg,
-	#fff 0%,
-	#fff 71.63%,
-	rgba(248, 248, 248, 0) 100%
-);
+$tabs-arrow-left-background: linear-gradient(90deg, #FFF 0%, #FFF 71.63%, rgba(248, 248, 248, 0.00) 100%);
+$tabs-arrow-right-background: linear-gradient(270deg, #FFF 0%, #FFF 71.63%, rgba(248, 248, 248, 0.00) 100%);
 $tag-font-size-sm: 10px;
 $tag-font-size-md: 12px;
 $tag-font-spacing-sm: -0.1px;
diff --git a/packages/react/package.json b/packages/react/package.json
index f75e50e77..1d16304bd 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -99,8 +99,6 @@
     "@wpmudev/sui-upsell-notice": "^0.0.1",
     "@wpmudev/sui-upsell": "^0.0.1",
     "@wpmudev/sui-hooks": "^0.0.1",
-    "@wpmudev/sui-utils": "^0.0.1",
-    "@wpmudev/sui-css": "^0.0.1",
-    "@wpmudev/sui-icons": "^0.0.1"
+    "@wpmudev/sui-utils": "^0.0.1"
   }
 }

From 12e23b46546e97a77a61a22eeb6532101f64a4f2 Mon Sep 17 00:00:00 2001
From: work <abderrahman.douara@incsub.com>
Date: Tue, 9 Jul 2024 18:26:07 +0800
Subject: [PATCH 5/5] fix: installing sui-react instructions

---
 .../assets/css/src/scss/_utils/_tokens.scss    |  2 +-
 .../docs/stories/GettingStarted.stories.mdx    | 18 +++++++++++++-----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/assets/css/src/scss/_utils/_tokens.scss b/packages/assets/css/src/scss/_utils/_tokens.scss
index 4bcc5c6d2..2a3c06055 100644
--- a/packages/assets/css/src/scss/_utils/_tokens.scss
+++ b/packages/assets/css/src/scss/_utils/_tokens.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 09 Jul 2024 08:08:37 GMT
+// Generated on Tue, 09 Jul 2024 09:35:25 GMT
 
 $accordion-border-radius-sm: 10px;
 $advanced-banner-background: linear-gradient(90deg, #222 0%, #383323 48.96%, #514524 100%);
diff --git a/packages/docs/stories/GettingStarted.stories.mdx b/packages/docs/stories/GettingStarted.stories.mdx
index 02a332ca9..2015e3488 100644
--- a/packages/docs/stories/GettingStarted.stories.mdx
+++ b/packages/docs/stories/GettingStarted.stories.mdx
@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/addon-docs';
-import { Page, Section, List, Snippet } from "@wpmudev/sui-docs";
+import { Page, Section, List } from "@wpmudev/sui-docs";
 import { Unstyled } from '@storybook/blocks';
 
 <Meta title="SUI/Getting Started" />
@@ -32,17 +32,25 @@ import { Unstyled } from '@storybook/blocks';
 			title="Installing Shared UI"
 		>
 			<p>
-				To get the complete Shared UI packages, run the following command:
+				To get all the components packages, run the following command:
 				```
 					npm install @wpmudev/sui-react
 				```
-				When you install this package, all component packages will be included, making them available in your project. Furthermore, additional packages will also be installed.
+				When you install this package, additional packages will also be installed.
 				<List>
-					<span label="@wpmudev/sui-css" />
 					<span label="@wpmudev/sui-hooks" />
 					<span label="@wpmudev/sui-utils" />
-					<span label="@wpmudev/sui-icons" />
 				</List>
+				
+				You will also need to install `sui-css` and `sui-icons` packages: 
+				```
+                    npm install @wpmudev/sui-css @wpmudev/sui-icons
+				``` 
+
+				Finally, make sure to import the styles in your app, you can add this line to your top-most component in your application: 
+				```
+					import '@wpmudev/sui-css/dist/css/sui-css.min.css'
+				```
 			</p>
 			
 		</Section>