@hazelcast/ui 2.0.5-canary.0 → 3.0.0-canary.0

package/lib/test-helpers/time.js

@@ -1,2 +1,9 @@
-export const getFixedTimezoneDate = (timestamp, timeZone = 'Europe/Istanbul') => new Date(new Date(timestamp).toLocaleString('en-US', { timeZone, hour12: false }));
-//# sourceMappingURL=time.js.map
+'use strict';
+
+const getFixedTimezoneDate = (timestamp, timeZone = 'Europe/Istanbul') => new Date(new Date(timestamp).toLocaleString('en-US', {
+  timeZone,
+  hour12: false
+}));
+
+exports.getFixedTimezoneDate = getFixedTimezoneDate;
+//# sourceMappingURL=time.js.map

package/lib/test-helpers/time.js.map

@@ -1 +1 @@
-{"version":3,"file":"time.js","sourceRoot":"","sources":["../../src/test-helpers/time.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,SAAiB,EAAE,QAAQ,GAAG,iBAAiB,EAAQ,EAAE,CAC5F,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,CAAA"}
+{"version":3,"file":"time.js","sources":["../../src/test-helpers/time.ts"],"sourcesContent":["export const getFixedTimezoneDate = (timestamp: number, timeZone = 'Europe/Istanbul'): Date =>\n  new Date(new Date(timestamp).toLocaleString('en-US', { timeZone, hour12: false }))\n"],"names":["getFixedTimezoneDate","timestamp","timeZone","Date","toLocaleString","hour12"],"mappings":";;AAAO,MAAMA,oBAAoB,GAAGA,CAACC,SAAiB,EAAEC,QAAQ,GAAG,iBAAiB,KAClF,IAAIC,IAAI,CAAC,IAAIA,IAAI,CAACF,SAAS,CAAC,CAACG,cAAc,CAAC,OAAO,EAAE;EAAEF,QAAQ;AAAEG,EAAAA,MAAM,EAAE;AAAM,CAAC,CAAC;;;;"}

package/lib/test-helpers/utils.js

@@ -1,11 +1,15 @@
-export const jestFnControlledPromise = () => {
-    const res = {};
-    res.fn = jest.fn().mockImplementation(() => {
-        res.promise = new Promise((resolveInternal) => {
-            res.resolve = resolveInternal;
-        });
-        return res.promise;
+'use strict';
+
+const jestFnControlledPromise = () => {
+  const res = {};
+  res.fn = jest.fn().mockImplementation(() => {
+    res.promise = new Promise(resolveInternal => {
+      res.resolve = resolveInternal;
     });
-    return res;
+    return res.promise;
+  });
+  return res;
 };
-//# sourceMappingURL=utils.js.map
+
+exports.jestFnControlledPromise = jestFnControlledPromise;
+//# sourceMappingURL=utils.js.map

package/lib/test-helpers/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/test-helpers/utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,EAAE;IAM1C,MAAM,GAAG,GAAG,EAAS,CAAA;IACrB,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,kBAAkB,CAAC,GAAG,EAAE;QACzC,GAAG,CAAC,OAAO,GAAG,IAAI,OAAO,CAAC,CAAC,eAAe,EAAE,EAAE;YAC5C,GAAG,CAAC,OAAO,GAAG,eAAe,CAAA;QAC/B,CAAC,CAAC,CAAA;QACF,OAAO,GAAG,CAAC,OAAO,CAAA;IACpB,CAAC,CAAC,CAAA;IACF,OAAO,GAAG,CAAA;AACZ,CAAC,CAAA"}
+{"version":3,"file":"utils.js","sources":["../../src/test-helpers/utils.ts"],"sourcesContent":["export const jestFnControlledPromise = () => {\n  type Res = {\n    resolve: (arg?: unknown) => void\n    promise: Promise<unknown>\n    fn: jest.Mock\n  }\n  const res = {} as Res\n  res.fn = jest.fn().mockImplementation(() => {\n    res.promise = new Promise((resolveInternal) => {\n      res.resolve = resolveInternal\n    })\n    return res.promise\n  })\n  return res\n}\n"],"names":["jestFnControlledPromise","res","fn","jest","mockImplementation","promise","Promise","resolveInternal","resolve"],"mappings":";;AAAO,MAAMA,uBAAuB,GAAGA,MAAM;EAM3C,MAAMC,GAAG,GAAG,EAAS;EACrBA,GAAG,CAACC,EAAE,GAAGC,IAAI,CAACD,EAAE,EAAE,CAACE,kBAAkB,CAAC,MAAM;AAC1CH,IAAAA,GAAG,CAACI,OAAO,GAAG,IAAIC,OAAO,CAAEC,eAAe,IAAK;MAC7CN,GAAG,CAACO,OAAO,GAAGD,eAAe;AAC/B,IAAA,CAAC,CAAC;IACF,OAAON,GAAG,CAACI,OAAO;AACpB,EAAA,CAAC,CAAC;AACF,EAAA,OAAOJ,GAAG;AACZ;;;;"}

package/lib/types.js

@@ -1,2 +1,3 @@
-export {};
-//# sourceMappingURL=types.js.map
+'use strict';
+
+//# sourceMappingURL=types.js.map

package/lib/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/lib/utils/formik.js

@@ -1,8 +1,13 @@
-export const getFieldError = (meta) => (meta.touched || meta.initialError === meta.error ? meta.error : undefined);
-export const formikTouchAndUpdate = (setValue, setTouched) => (newValue) => {
-    // TODO: setTouched called after setValue refires validation with an old value. File a bug.
-    // No need to validate at this point as all validators will run because of `setValue`
-    setTouched(true, false);
-    setValue(newValue);
+'use strict';
+
+const getFieldError = meta => meta.touched || meta.initialError === meta.error ? meta.error : undefined;
+const formikTouchAndUpdate = (setValue, setTouched) => newValue => {
+  // TODO: setTouched called after setValue refires validation with an old value. File a bug.
+  // No need to validate at this point as all validators will run because of `setValue`
+  setTouched(true, false);
+  setValue(newValue);
 };
-//# sourceMappingURL=formik.js.map
+
+exports.formikTouchAndUpdate = formikTouchAndUpdate;
+exports.getFieldError = getFieldError;
+//# sourceMappingURL=formik.js.map

package/lib/utils/formik.js.map

@@ -1 +1 @@
-{"version":3,"file":"formik.js","sourceRoot":"","sources":["../../src/utils/formik.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,aAAa,GAAG,CAAI,IAAuB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;AAIxI,MAAM,CAAC,MAAM,oBAAoB,GAC/B,CAAI,QAA4B,EAAE,UAAgE,EAAE,EAAE,CACtG,CAAC,QAAW,EAAE,EAAE;IACd,2FAA2F;IAC3F,qFAAqF;IACrF,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;IACvB,QAAQ,CAAC,QAAQ,CAAC,CAAA;AACpB,CAAC,CAAA"}
+{"version":3,"file":"formik.js","sources":["../../src/utils/formik.ts"],"sourcesContent":[null],"names":["getFieldError","meta","touched","initialError","error","undefined","formikTouchAndUpdate","setValue","setTouched","newValue"],"mappings":";;AAEO,MAAMA,aAAa,GAAOC,IAAuB,IAAMA,IAAI,CAACC,OAAO,IAAID,IAAI,CAACE,YAAY,KAAKF,IAAI,CAACG,KAAK,GAAGH,IAAI,CAACG,KAAK,GAAGC;AAIvH,MAAMC,oBAAoB,GAC/BA,CAAIC,QAA4B,EAAEC,UAAgE,KACjGC,QAAW,IAAI;AACd;AACA;AACAD,EAAAA,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC;EACvBD,QAAQ,CAACE,QAAQ,CAAC;AACpB;;;;;"}

package/lib/utils/keyboard.js

@@ -1,4 +1,9 @@
+'use strict';
+
 // 'Esc' -> IE/Edge specific value
-export const escKeyFilterPredicate = (event) => event.key === 'Escape' || event.key === 'Esc';
-export const keyIsOneOf = (event, ...keys) => keys.includes(event.key);
-//# sourceMappingURL=keyboard.js.map
+const escKeyFilterPredicate = event => event.key === 'Escape' || event.key === 'Esc';
+const keyIsOneOf = (event, ...keys) => keys.includes(event.key);
+
+exports.escKeyFilterPredicate = escKeyFilterPredicate;
+exports.keyIsOneOf = keyIsOneOf;
+//# sourceMappingURL=keyboard.js.map

package/lib/utils/keyboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard.js","sourceRoot":"","sources":["../../src/utils/keyboard.ts"],"names":[],"mappings":"AAEA,kCAAkC;AAClC,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAoB,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,CAAA;AAE5G,MAAM,CAAC,MAAM,UAAU,GAAG,CAAI,KAA4B,EAAE,GAAG,IAAc,EAAW,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA"}
+{"version":3,"file":"keyboard.js","sources":["../../src/utils/keyboard.ts"],"sourcesContent":[null],"names":["escKeyFilterPredicate","event","key","keyIsOneOf","keys","includes"],"mappings":";;AAEA;AACO,MAAMA,qBAAqB,GAAIC,KAAoB,IAAKA,KAAK,CAACC,GAAG,KAAK,QAAQ,IAAID,KAAK,CAACC,GAAG,KAAK;MAE1FC,UAAU,GAAGA,CAAIF,KAA4B,EAAE,GAAGG,IAAc,KAAcA,IAAI,CAACC,QAAQ,CAACJ,KAAK,CAACC,GAAG;;;;;"}

package/lib/utils/portal.js

@@ -1,15 +1,20 @@
-import { canUseDOM } from './ssr';
-export const getPortalContainer = (container, referenceElement) => {
-    if (container === 'body') {
-        // There is no document is SSR environment
-        return canUseDOM ? document.body : null;
-    }
-    if (container === 'referenceElement') {
-        return referenceElement !== null && referenceElement !== void 0 ? referenceElement : null;
-    }
-    if (typeof container === 'string') {
-        return canUseDOM ? document.getElementById(container) : null;
-    }
-    return container;
+'use strict';
+
+var utils_ssr = require('./ssr.js');
+
+const getPortalContainer = (container, referenceElement) => {
+  if (container === 'body') {
+    // There is no document is SSR environment
+    return utils_ssr.canUseDOM ? document.body : null;
+  }
+  if (container === 'referenceElement') {
+    return referenceElement !== null && referenceElement !== void 0 ? referenceElement : null;
+  }
+  if (typeof container === 'string') {
+    return utils_ssr.canUseDOM ? document.getElementById(container) : null;
+  }
+  return container;
 };
-//# sourceMappingURL=portal.js.map
+
+exports.getPortalContainer = getPortalContainer;
+//# sourceMappingURL=portal.js.map

package/lib/utils/portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"portal.js","sourceRoot":"","sources":["../../src/utils/portal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,SAA0B,EAAE,gBAAqC,EAAsB,EAAE;IAC1H,IAAI,SAAS,KAAK,MAAM,EAAE,CAAC;QACzB,0CAA0C;QAC1C,OAAO,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;IACzC,CAAC;IAED,IAAI,SAAS,KAAK,kBAAkB,EAAE,CAAC;QACrC,OAAO,gBAAgB,aAAhB,gBAAgB,cAAhB,gBAAgB,GAAI,IAAI,CAAA;IACjC,CAAC;IAED,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE,CAAC;QAClC,OAAO,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;IAC9D,CAAC;IAED,OAAO,SAAS,CAAA;AAClB,CAAC,CAAA"}
+{"version":3,"file":"portal.js","sources":["../../src/utils/portal.ts"],"sourcesContent":[null],"names":["getPortalContainer","container","referenceElement","canUseDOM","document","body","getElementById"],"mappings":";;;;MAIaA,kBAAkB,GAAGA,CAACC,SAA0B,EAAEC,gBAAqC,KAAwB;EAC1H,IAAID,SAAS,KAAK,MAAM,EAAE;AACxB;AACA,IAAA,OAAOE,mBAAS,GAAGC,QAAQ,CAACC,IAAI,GAAG,IAAI;AACzC,EAAA;EAEA,IAAIJ,SAAS,KAAK,kBAAkB,EAAE;IACpC,OAAOC,gBAAgB,KAAA,IAAA,IAAhBA,gBAAgB,cAAhBA,gBAAgB,GAAI,IAAI;AACjC,EAAA;AAEA,EAAA,IAAI,OAAOD,SAAS,KAAK,QAAQ,EAAE;IACjC,OAAOE,mBAAS,GAAGC,QAAQ,CAACE,cAAc,CAACL,SAAS,CAAC,GAAG,IAAI;AAC9D,EAAA;AAEA,EAAA,OAAOA,SAAS;AAClB;;;;"}

package/lib/utils/ssr.js

@@ -1,3 +1,7 @@
+'use strict';
+
 // https://github.com/JedWatson/exenv/blob/5171d645e2d9592c64fb2d8e0916a372f20848e2/index.js#L11
-export const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
-//# sourceMappingURL=ssr.js.map
+const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+
+exports.canUseDOM = canUseDOM;
+//# sourceMappingURL=ssr.js.map

package/lib/utils/ssr.js.map

@@ -1 +1 @@
-{"version":3,"file":"ssr.js","sourceRoot":"","sources":["../../src/utils/ssr.ts"],"names":[],"mappings":"AAAA,gGAAgG;AAChG,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,CAAC,CAAC,OAAO,MAAM,KAAK,WAAW,IAAI,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAA"}
+{"version":3,"file":"ssr.js","sources":["../../src/utils/ssr.ts"],"sourcesContent":[null],"names":["canUseDOM","window","document","createElement"],"mappings":";;AAAA;MACaA,SAAS,GAAG,CAAC,EAAE,OAAOC,MAAM,KAAK,WAAW,IAAIA,MAAM,CAACC,QAAQ,IAAID,MAAM,CAACC,QAAQ,CAACC,aAAa;;;;"}

package/lib/utils/types.js

@@ -1,2 +1,3 @@
-export {};
-//# sourceMappingURL=types.js.map
+'use strict';
+
+//# sourceMappingURL=types.js.map

package/lib/utils/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/utils/types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hazelcast/ui",
-  "version": "2.0.5-canary.0",
+  "version": "3.0.0-canary.0",
   "description": "Hazelcast design system components and utilities",
   "homepage": "https://github.com/hazelcast/hive#readme",
   "bugs": {
@@ -15,6 +15,7 @@
   "sideEffects": false,
   "main": "lib/index.js",
   "module": "lib/index.js",
+  "types": "lib/index.d.ts",
   "directories": {
     "lib": "lib",
     "test": "__tests__"
@@ -26,7 +27,7 @@
   "scripts": {
     "build-storybook": "storybook build",
     "chromatic": "chromatic --project-token=CHROMATIC_PROJECT_TOKEN",
-    "compile": "shx rm -f *.tsbuildinfo && shx rm -rf lib && shx mkdir lib && shx cp -r src/* lib && shx rm -rf lib/*.{tsx,ts} && shx rm -rf lib/**/*.{tsx,ts} && tsc -p tsconfig.build.json",
+    "compile": "rm -rf lib && rollup -c",
     "generate-screenshots": "npm run build-storybook && loki update --reactUri file:./storybook-static --chromeDockerImage 'yukinying/chrome-headless-browser-stable:110.0.5481.77' --chromeFlags='--headless --disable-gpu --hide-scrollbars --no-sandbox --allow-file-access-from-files'",
     "lint": "npm run lint:ts && npm run lint:css",
     "lint:css": "postcss --config ./.postcss-lint --replace '**/*.{css,scss}'",
@@ -105,6 +106,10 @@
     "@types/use-persisted-state": "^0.3.5",
     "@typescript-eslint/eslint-plugin": "^8.24.0",
     "@typescript-eslint/parser": "^8.24.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-typescript": "^12.1.1",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.2.1",
     "chromatic": "^6.24.1",
@@ -118,6 +123,7 @@
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.1.0",
+    "glob": "^11.0.3",
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
@@ -145,7 +151,9 @@
     "stylelint-prettier": "^5.0.2",
     "stylelint-scss": "^6.7.0",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.24.0"
+    "typescript-eslint": "^8.24.0",
+    "rollup": "^4.28.1",
+    "rollup-plugin-postcss": "^4.0.2"
   },
   "peerDependencies": {
     "@types/lodash": "^4.17.13",

package/lib/components/Alert.module.scss

@@ -1,141 +0,0 @@
-@use '../../styles/constants' as c;
-@use '../../styles/helpers' as h;
-
-// TODO: potential max-height
-.alert {
-  display: inline-flex;
-  padding: c.$grid * 2.5;
-  width: c.$alertWidth;
-  border-left: 5px solid transparent;
-
-  .icon {
-    flex-shrink: 0;
-    margin-right: c.$grid * 2.5;
-  }
-
-  .rightSide {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-
-  .header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    .title {
-      flex: 1 0 auto;
-      margin-right: c.$grid * 8.5;
-
-      @include c.typographyBodyNormal('bold');
-      @include h.overflowEllipsis;
-    }
-  }
-
-  /* Theme - Success */
-  &.success {
-    color: c.$colorText;
-    border-color: c.$colorSuccess;
-    background-color: c.$colorSuccessLight;
-
-    .icon {
-      color: c.$colorText;
-    }
-
-    .actions {
-      .action {
-        color: c.$colorText;
-      }
-    }
-  }
-
-  /* Theme - Info */
-  &.info {
-    color: c.$colorText;
-    border-color: c.$colorInfo;
-    background-color: c.$colorInfoLight;
-
-    .icon {
-      color: c.$colorText;
-    }
-
-    .actions {
-      .action {
-        color: c.$colorText;
-      }
-    }
-  }
-
-  /* Theme - Warning */
-  &.warning {
-    color: c.$colorText;
-    border-color: c.$colorWarning;
-    background-color: c.$colorWarningLight;
-
-    .icon {
-      color: c.$colorText;
-    }
-
-    .actions {
-      .action {
-        color: c.$colorText;
-      }
-    }
-  }
-
-  /* Theme - Critical */
-  &.critical {
-    color: c.$colorText;
-    border-color: c.$colorError;
-    background-color: c.$colorErrorLight;
-
-    .icon {
-      color: c.$colorText;
-    }
-
-    .actions {
-      .action {
-        color: c.$colorText;
-      }
-    }
-  }
-
-  .body {
-    padding-right: c.$grid * 8.5;
-
-    @include c.typographyBodySmall;
-
-    .actions {
-      display: flex;
-      margin: c.$grid * 3 0 c.$grid;
-
-      .action {
-        &:not(:last-child) {
-          margin-right: c.$grid * 6;
-        }
-      }
-
-      .actionButton {
-        height: auto;
-
-        @include c.typographyBodySmall;
-
-        &:hover,
-        &.hover {
-          /* doiuse-disable text-decoration */
-          text-decoration: underline solid;
-        }
-
-        .actionButtonBody {
-          padding: 0;
-        }
-
-        .actionButtonIcon {
-          margin-right: c.$grid * 1.5;
-        }
-      }
-    }
-  }
-}

package/lib/components/AppHeader/AppHeader.module.scss

@@ -1,29 +0,0 @@
-@use '../../../styles/constants' as c;
-
-.root {
-  background: c.$colorBrandSecondary;
-  color: c.$colorNeutralLighter;
-  display: flex;
-  align-items: center;
-  height: 59px;
-  box-sizing: border-box;
-  flex-direction: row;
-  font-size: c.$fontSizeBodySmall;
-  width: 100%;
-  padding: 0 c.$grid * 5;
-  overflow-x: auto;
-  flex-shrink: 0;
-  gap: c.$grid * 7.5;
-}
-
-.name {
-  color: c.$colorBrandPrimary;
-  font-weight: 600;
-}
-
-.aside {
-  display: flex;
-  align-items: center;
-  margin-left: auto;
-  gap: c.$grid * 4;
-}

package/lib/components/AppHeader/AppHeaderLogo/AppHeaderLogo.module.scss

@@ -1,29 +0,0 @@
-@use '../../../../styles/helpers' as h;
-
-.root {
-  flex: 0 0 auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 20px;
-  overflow: hidden;
-
-  .link {
-    width: 100%;
-    height: 100%;
-    max-height: 100%;
-
-    &:focus {
-      outline: none;
-
-      @include h.outlineSimple;
-    }
-
-    img {
-      height: auto;
-      width: auto;
-      max-width: 100%;
-      max-height: 100%;
-    }
-  }
-}

package/lib/components/AppHeader/AppHeaderMenu/AppHeaderMenu.module.scss

@@ -1,20 +0,0 @@
-@use '../../../../styles/constants' as c;
-
-.root {
-  display: flex;
-  align-items: center;
-}
-
-.separator {
-  border-left: 1px solid c.$colorNeutralLight;
-}
-
-.content {
-  padding: c.$grid * 2;
-  color: c.$colorNeutralLighter;
-  background: c.$colorBrandSecondary;
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-  gap: c.$grid * 2;
-}

package/lib/components/AppHeader/EnvironmentBadge/EnvironmentBadge.module.scss

@@ -1,13 +0,0 @@
-@use '../../../../styles/constants' as c;
-
-.root {
-  display: inline-flex;
-  align-items: center;
-  gap: c.$grid * 2;
-  color: #000;
-  background: c.$colorError;
-  border-radius: c.$grid * 3.5;
-  padding: 0 c.$grid * 3;
-  height: c.$grid * 7;
-  text-transform: capitalize;
-}

package/lib/components/AppHeader/SelectCluster/SelectCluster.module.scss

@@ -1,101 +0,0 @@
-@use '../../../../styles/constants' as c;
-@use '../../../../styles/helpers' as h;
-
-$selectContainer: ':global .hz-select-field';
-$selectControl: ':global .hz-select-field__control';
-$selectInputContainer: ':global .hz-select-field__input-container';
-$selectValueContainer: ':global .hz-select-field__value-container';
-$selectTrailingNote: ':global .hz-select-field__trailing-note';
-$selectValue: ':global .hz-select-field__single-value';
-$selectMenuPortal: ':global .hz-select-field__menu-portal';
-$selectMenu: ':global .hz-select-field__menu';
-$selectMenuList: ':global .hz-select-field__menu-list';
-$selectMenuNotice: ':global .hz-select-field__menu-notice';
-$selectOption: ':global .hz-select-field__option';
-$selectGroup: ':global .hz-select-field__group';
-$selectGroupHeading: ':global .hz-select-field__group-heading';
-$selectFieldIndicators: ':global .hz-select-field__indicators';
-
-.select {
-  width: 260px;
-
-  &.disabled {
-    #{$selectControl} {
-      color: c.$colorTextSecondary;
-      background-color: transparent;
-
-      #{$selectValue},
-      #{$selectTrailingNote},
-      #{$selectFieldIndicators} svg {
-        color: c.$colorTextSecondary;
-      }
-    }
-  }
-
-  #{$selectControl} {
-    background: none;
-    border-radius: c.$borderRadius;
-    border: 1px solid c.$colorTextSecondary;
-
-    #{$selectInputContainer},
-    #{$selectValueContainer},
-    #{$selectTrailingNote} {
-      color: c.$colorNeutralLighter;
-    }
-  }
-
-  #{$selectValue} {
-    color: c.$colorNeutralLighter;
-  }
-
-  #{$selectFieldIndicators} {
-    svg {
-      color: c.$colorNeutralLighter;
-    }
-  }
-
-  .selectIconLeftContainer {
-    box-sizing: content-box;
-
-    .selectIconLeft {
-      color: c.$colorSuccess;
-
-      &.disconnected {
-        color: c.$colorError;
-      }
-
-      &.disabled {
-        color: c.$colorTextSecondary;
-      }
-    }
-  }
-}
-
-.menuPortal {
-  #{$selectMenu} {
-    border: none;
-    background: c.$colorBrandSecondary;
-    border-radius: 0 0 c.$borderRadius c.$borderRadius;
-  }
-
-  #{$selectOption} {
-    &:active {
-      background: none;
-    }
-
-    #{$selectValueContainer},
-    #{$selectTrailingNote} {
-      color: c.$colorNeutralLighter;
-    }
-
-    &--is-focused {
-      background: c.$colorBrandAccent;
-      box-shadow: none;
-
-      #{$selectValueContainer},
-      #{$selectTrailingNote} {
-        color: c.$colorBrandText;
-      }
-    }
-  }
-}

package/lib/components/AppSidebar/AppSidebar.module.scss

@@ -1,66 +0,0 @@
-@use '../../../styles/constants' as c;
-
-$width: 264px;
-$collapsedWidth: 74px;
-$offset: c.$grid * 4;
-
-.root {
-  width: $width;
-  height: 100%;
-  flex-shrink: 0;
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  box-sizing: border-box;
-  color: c.$colorNeutralLighter;
-  background: c.$colorBrandSecondary;
-  transition: 200ms width;
-
-  * {
-    box-sizing: border-box;
-  }
-
-  .toggle {
-    color: #1ee6fa;
-    position: absolute;
-    right: -#{c.$grid * 3};
-    top: 0;
-    z-index: c.$zIndex1000;
-    border-radius: 50%;
-    background: #0e3454;
-  }
-
-  .wrapper {
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    overflow-x: hidden;
-  }
-
-  .content {
-    width: 90%;
-    margin: 0 auto;
-    padding: $offset 0;
-  }
-
-  .footer {
-    color: c.$colorNeutralLight;
-    text-align: center;
-    margin-top: auto;
-    word-break: break-all;
-    padding: 0 c.$grid * 4 c.$grid * 2.5;
-    font-size: c.$fontSizeBodySmaller;
-  }
-
-  &.collapsed {
-    width: $collapsedWidth;
-
-    .content {
-      max-width: calc($collapsedWidth - $offset * 1.5);
-    }
-
-    .footer {
-      padding: 0 c.$grid;
-    }
-  }
-}

package/lib/components/AppSidebar/AppSidebarFavoriteButton/AppSidebarFavoriteButton.module.scss

@@ -1,16 +0,0 @@
-@use '../../../../styles/constants' as c;
-
-[class].root {
-  position: absolute;
-  top: 50%;
-  z-index: 1;
-  left: c.$grid * 3;
-  color: c.$colorBrandText;
-  transform: translateY(-50%);
-
-  &.isFilled {
-    svg {
-      fill: c.$colorBrandText;
-    }
-  }
-}