@orderly.network/ui 2.10.1-alpha.0 → 2.10.2-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/index.css +214 -242
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.d.mts +249 -54
  4. package/dist/index.d.ts +249 -54
  5. package/dist/index.js +1004 -616
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +1002 -617
  8. package/dist/index.mjs.map +1 -1
  9. package/dist/styles.css +1 -1
  10. package/package.json +3 -3
  11. package/src/tailwind/index.ts +1 -1
  12. package/src/tailwind/theme/darkTheme.ts +109 -0
  13. package/src/tailwind/theme/index.ts +2 -0
  14. package/src/tailwind/theme/lightTheme.ts +108 -0
  15. package/tailwind.config.js +31 -11
  16. package/src/tailwind/theme.ts +0 -102
package/dist/index.js CHANGED
@@ -69,11 +69,100 @@ var useEmblaCarousel__default = /*#__PURE__*/_interopDefault(useEmblaCarousel);
69
69
  var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
70
70
  var emblaCarouselAutoplay__default = /*#__PURE__*/_interopDefault(emblaCarouselAutoplay);
71
71
 
72
+ var __create = Object.create;
72
73
  var __defProp = Object.defineProperty;
74
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
75
+ var __getOwnPropNames = Object.getOwnPropertyNames;
76
+ var __getProtoOf = Object.getPrototypeOf;
77
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
78
+ var __commonJS = (cb, mod) => function __require() {
79
+ return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
80
+ };
73
81
  var __export = (target, all) => {
74
82
  for (var name in all)
75
83
  __defProp(target, name, { get: all[name], enumerable: true });
76
84
  };
85
+ var __copyProps = (to, from, except, desc) => {
86
+ if (from && typeof from === "object" || typeof from === "function") {
87
+ for (let key of __getOwnPropNames(from))
88
+ if (!__hasOwnProp.call(to, key) && key !== except)
89
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
90
+ }
91
+ return to;
92
+ };
93
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
94
+ // If the importer is in node compatibility mode or this is not an ESM
95
+ // file that has been converted to a CommonJS file using a Babel-
96
+ // compatible transform (i.e. "__esModule" has not been set), then set
97
+ // "default" to the CommonJS "module.exports" for node compatibility.
98
+ !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
99
+ mod
100
+ ));
101
+
102
+ // ../../node_modules/.pnpm/tailwindcss@3.4.17_ts-node@10.9.2_@swc+core@1.13.2_@swc+helpers@0.5.17__@types+node@22.16.5_typescript@5.8.3_/node_modules/tailwindcss/lib/util/createPlugin.js
103
+ var require_createPlugin = __commonJS({
104
+ "../../node_modules/.pnpm/tailwindcss@3.4.17_ts-node@10.9.2_@swc+core@1.13.2_@swc+helpers@0.5.17__@types+node@22.16.5_typescript@5.8.3_/node_modules/tailwindcss/lib/util/createPlugin.js"(exports) {
105
+ Object.defineProperty(exports, "__esModule", {
106
+ value: true
107
+ });
108
+ Object.defineProperty(exports, "default", {
109
+ enumerable: true,
110
+ get: function() {
111
+ return _default;
112
+ }
113
+ });
114
+ function createPlugin(plugin3, config) {
115
+ return {
116
+ handler: plugin3,
117
+ config
118
+ };
119
+ }
120
+ createPlugin.withOptions = function(pluginFunction, configFunction = () => ({})) {
121
+ const optionsFunction = function(options) {
122
+ return {
123
+ __options: options,
124
+ handler: pluginFunction(options),
125
+ config: configFunction(options)
126
+ };
127
+ };
128
+ optionsFunction.__isOptionsFunction = true;
129
+ optionsFunction.__pluginFunction = pluginFunction;
130
+ optionsFunction.__configFunction = configFunction;
131
+ return optionsFunction;
132
+ };
133
+ var _default = createPlugin;
134
+ }
135
+ });
136
+
137
+ // ../../node_modules/.pnpm/tailwindcss@3.4.17_ts-node@10.9.2_@swc+core@1.13.2_@swc+helpers@0.5.17__@types+node@22.16.5_typescript@5.8.3_/node_modules/tailwindcss/lib/public/create-plugin.js
138
+ var require_create_plugin = __commonJS({
139
+ "../../node_modules/.pnpm/tailwindcss@3.4.17_ts-node@10.9.2_@swc+core@1.13.2_@swc+helpers@0.5.17__@types+node@22.16.5_typescript@5.8.3_/node_modules/tailwindcss/lib/public/create-plugin.js"(exports) {
140
+ Object.defineProperty(exports, "__esModule", {
141
+ value: true
142
+ });
143
+ Object.defineProperty(exports, "default", {
144
+ enumerable: true,
145
+ get: function() {
146
+ return _default;
147
+ }
148
+ });
149
+ var _createPlugin = /* @__PURE__ */ _interop_require_default(require_createPlugin());
150
+ function _interop_require_default(obj) {
151
+ return obj && obj.__esModule ? obj : {
152
+ default: obj
153
+ };
154
+ }
155
+ var _default = _createPlugin.default;
156
+ }
157
+ });
158
+
159
+ // ../../node_modules/.pnpm/tailwindcss@3.4.17_ts-node@10.9.2_@swc+core@1.13.2_@swc+helpers@0.5.17__@types+node@22.16.5_typescript@5.8.3_/node_modules/tailwindcss/plugin.js
160
+ var require_plugin = __commonJS({
161
+ "../../node_modules/.pnpm/tailwindcss@3.4.17_ts-node@10.9.2_@swc+core@1.13.2_@swc+helpers@0.5.17__@types+node@22.16.5_typescript@5.8.3_/node_modules/tailwindcss/plugin.js"(exports, module) {
162
+ var createPlugin = require_create_plugin();
163
+ module.exports = (createPlugin.__esModule ? createPlugin : { default: createPlugin }).default;
164
+ }
165
+ });
77
166
 
78
167
  // src/helpers/parse-props.ts
79
168
  var parseSizeProps = (props) => {
@@ -654,7 +743,7 @@ var spinnerVariants = tailwindVariants.tv({
654
743
  warning: "oui-fill-warning-darken",
655
744
  gray: "oui-fill-gray",
656
745
  darkGray: "oui-fill-darkGray",
657
- white: "oui-fill-white"
746
+ white: "oui-fill-base-contrast"
658
747
  }
659
748
  // background: {
660
749
  // default: "oui-text-base-contrast/40",
@@ -685,7 +774,7 @@ var Spinner = (props) => {
685
774
  "path",
686
775
  {
687
776
  d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z",
688
- fill: "currentColor",
777
+ fill: "currentFill",
689
778
  fillOpacity: 0.2
690
779
  }
691
780
  ),
@@ -783,8 +872,8 @@ var buttonVariants = tailwindVariants.tv(
783
872
  variant: {
784
873
  text: "oui-bg-transparent",
785
874
  outlined: "oui-border",
786
- contained: "oui-text-white",
787
- gradient: "oui-gradient-brand oui-text-[rgba(0,0,0,0.88)]"
875
+ contained: "oui-text-base-contrast",
876
+ gradient: "oui-gradient-brand oui-text-base-10"
788
877
  },
789
878
  size: {
790
879
  xs: ["oui-px-2", "oui-rounded", "oui-h-6", "oui-text-2xs"],
@@ -809,7 +898,7 @@ var buttonVariants = tailwindVariants.tv(
809
898
  sell: "hover:oui-bg-danger/80 active:oui-bg-danger/70",
810
899
  warning: "hover:oui-bg-warning-darken/80 active:oui-bg-warning-darken/70",
811
900
  gray: "hover:oui-bg-base-2/80 active:oui-bg-base-2/70",
812
- light: "hover:oui-bg-white/80 active:oui-bg-white/50 disable:oui-bg-white/20"
901
+ light: "hover:oui-bg-base-static-80 active:oui-bg-base-static-54 disable:oui-bg-base-static-20"
813
902
  },
814
903
  fullWidth: {
815
904
  true: "oui-w-full"
@@ -864,9 +953,9 @@ var buttonVariants = tailwindVariants.tv(
864
953
  variant: "contained",
865
954
  color: "light",
866
955
  className: [
867
- "oui-bg-white",
868
- "oui-text-black/[.88]",
869
- "disabled:oui-bg-white/30 hover:disabled:oui-bg-white/30 disabled:oui-text-black/[.36]"
956
+ "oui-bg-base-static",
957
+ "oui-text-base-static-contrast-80 disabled:oui-text-base-static-contrast-36",
958
+ "disabled:oui-bg-base-static-36 hover:disabled:oui-bg-base-static-36"
870
959
  ]
871
960
  },
872
961
  {
@@ -1171,7 +1260,7 @@ var iconVariants = tailwindVariants.tv({
1171
1260
  warning: "oui-text-warning-darken",
1172
1261
  // secondary: "oui-text-secondary",
1173
1262
  // tertiary: "oui-text-tertiary",
1174
- white: "oui-text-white",
1263
+ white: "oui-text-base-contrast",
1175
1264
  black: "oui-text-black",
1176
1265
  inherit: "oui-text-inherit"
1177
1266
  // gray: "oui-text-gray",
@@ -1779,8 +1868,7 @@ var AssetIcon = () => {
1779
1868
  "path",
1780
1869
  {
1781
1870
  d: "M10.9004 5H12.9004V6.59961L13.5 6.90039C13.8 7.10039 14.1008 7.29961 14.3008 7.59961C14.5008 7.89961 14.7008 8.19961 14.8008 8.59961C14.9008 8.99961 15 9.40039 15 9.90039H13.0996C13.0996 9.30039 13.0008 8.89961 12.8008 8.59961C12.6008 8.29961 12.4 8.19922 12 8.19922C11.8 8.19922 11.6 8.20078 11.5 8.30078L11.1992 8.59961C11.0992 8.69961 11.1 8.9 11 9C10.9 9.1 10.9004 9.3 10.9004 9.5C10.9004 9.7 11 9.8 11 10C11 10.2 11.0992 10.3004 11.1992 10.4004C11.2992 10.6004 11.3996 10.7008 11.5996 10.8008C11.6996 10.9008 11.8992 10.9996 12.1992 11.0996C12.5992 11.2996 13.0008 11.4992 13.3008 11.6992C13.7008 11.8992 13.9992 12.1004 14.1992 12.4004C14.4992 12.7004 14.7008 13.0008 14.8008 13.3008C14.9008 13.6008 15 14 15 14.5C15 15 14.9008 15.3992 14.8008 15.6992C14.7008 16.0992 14.5008 16.2996 14.3008 16.5996C14.1008 16.7996 13.8 16.9992 13.5 17.1992C13.3 17.2992 13.2 17.4004 13 17.4004V19H11V17.3008C10.8 17.2008 10.6004 17.1996 10.4004 17.0996C10.0004 16.9996 9.8 16.8 9.5 16.5C9.3 16.3 9.10039 15.9 8.90039 15.5C8.80039 15 8.69922 14.5004 8.69922 13.9004H10.6992C10.6992 14.2004 10.7008 14.5008 10.8008 14.8008C10.9008 15.1008 10.9996 15.3004 11.0996 15.4004C11.1996 15.5004 11.3 15.5992 11.5 15.6992C11.7 15.7992 11.8 15.8008 12 15.8008C12.2 15.8008 12.3 15.7992 12.5 15.6992C12.7 15.5992 12.8004 15.5004 12.9004 15.4004C13.0004 15.3004 12.9996 15.2 13.0996 15C13.1996 14.9 13.1992 14.7 13.1992 14.5C13.1992 14.3 13.0996 14.1 13.0996 14C13.0996 13.9 13.0004 13.6996 12.9004 13.5996C12.8004 13.3996 12.7 13.2992 12.5 13.1992L11.9004 12.9004C11.5004 12.7004 11.1008 12.5008 10.8008 12.3008C10.4008 12.1008 10.1004 11.8996 9.90039 11.5996C9.60039 11.3996 9.40078 11.0992 9.30078 10.6992C9.20078 10.3992 9.09961 10 9.09961 9.5C9.09961 9.1 9.09922 8.70039 9.19922 8.40039C9.39922 8.10039 9.50078 7.8 9.80078 7.5C10.0008 7.2 10.2004 7.00039 10.4004 6.90039C10.6004 6.80039 10.7004 6.69922 10.9004 6.69922V5Z",
1782
- fill: "white",
1783
- fillOpacity: 0.8
1871
+ className: "oui-fill-base-contrast-80"
1784
1872
  }
1785
1873
  ),
1786
1874
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -1789,7 +1877,7 @@ var AssetIcon = () => {
1789
1877
  cx: "12",
1790
1878
  cy: "12",
1791
1879
  r: "9",
1792
- stroke: "white",
1880
+ stroke: "rgb(var(--oui-color-base-foreground))",
1793
1881
  strokeOpacity: 0.8,
1794
1882
  strokeWidth: "2"
1795
1883
  }
@@ -1811,8 +1899,7 @@ var BarChartIcon = () => {
1811
1899
  "path",
1812
1900
  {
1813
1901
  d: "M18.0142 3.9978C16.9092 3.9978 16.0142 4.8928 16.0142 5.9978V17.9978C16.0142 19.1028 16.9092 19.9978 18.0142 19.9978H20.0142C21.1192 19.9978 22.0142 19.1028 22.0142 17.9978V5.9978C22.0142 4.8928 21.1192 3.9978 20.0142 3.9978H18.0142ZM18.0142 5.9978H20.0142V17.9978H18.0142V5.9978ZM11.0142 7.9978C9.90917 7.9978 9.01416 8.8928 9.01416 9.9978V17.9978C9.01416 19.1028 9.90917 19.9978 11.0142 19.9978H13.0142C14.1192 19.9978 15.0142 19.1028 15.0142 17.9978V9.9978C15.0142 8.8928 14.1192 7.9978 13.0142 7.9978H11.0142ZM11.0142 9.9978H13.0142V17.9978H11.0142V9.9978ZM4.01416 11.9978C2.90916 11.9978 2.01416 12.8928 2.01416 13.9978V17.9978C2.01416 19.1028 2.90916 19.9978 4.01416 19.9978H6.01416C7.11916 19.9978 8.01416 19.1028 8.01416 17.9978V13.9978C8.01416 12.8928 7.11916 11.9978 6.01416 11.9978H4.01416ZM4.01416 13.9978H6.01416V17.9978H4.01416V13.9978Z",
1814
- fill: "white",
1815
- fillOpacity: 0.8
1902
+ className: "oui-fill-base-contrast-80"
1816
1903
  }
1817
1904
  )
1818
1905
  }
@@ -1831,8 +1918,7 @@ var BattleIcon = () => {
1831
1918
  "path",
1832
1919
  {
1833
1920
  d: "M3.59485 3L4.43619 6.47708L9.86872 11.7606L7.84097 13.9847L7.13438 13.2513L5.94468 14.4805L6.69071 15.2513L4.58079 17.5637L4.1897 17.163L3 18.3922L5.52401 21L6.71371 19.7708L6.32262 19.3667L8.56399 17.1902L9.31002 17.9576L10.4997 16.7284L9.79314 15.9983L12.0082 13.8387L14.2167 15.9881L13.5003 16.7284L14.69 17.9576L15.4426 17.18L17.684 19.3565L17.283 19.7708L18.476 21L21 18.3922L19.8103 17.163L19.4291 17.5569L17.3192 15.2411L18.0553 14.4805L16.8656 13.2513L16.1656 13.9745L14.1477 11.7606L14.151 11.7572L12.0082 9.41087L6.9602 3.86927L3.59485 3ZM20.4216 3L17.0562 3.86927L12.9777 8.34465L15.2454 10.691L19.5802 6.47708L20.4216 3Z",
1834
- fill: "white",
1835
- fillOpacity: 0.8
1921
+ className: "oui-fill-base-contrast-80"
1836
1922
  }
1837
1923
  )
1838
1924
  }
@@ -1852,8 +1938,7 @@ var BattleActiveIcon = (props) => {
1852
1938
  "path",
1853
1939
  {
1854
1940
  d: "M21.3574 2.5L17.6181 3.41756L13.0864 8.14158L15.6061 10.6183L20.4226 6.17025L21.3574 2.5Z",
1855
- fill: "white",
1856
- fillOpacity: "0.36"
1941
+ className: "oui-fill-base-contrast-36"
1857
1942
  }
1858
1943
  )
1859
1944
  ] }),
@@ -1880,16 +1965,14 @@ var BattleInactiveIcon = (props) => {
1880
1965
  "path",
1881
1966
  {
1882
1967
  d: "M2.66095 2.5L3.59576 6.17025L9.63192 11.7473L7.37886 14.095L6.59375 13.3208L5.27186 14.6183L6.10079 15.4319L3.75644 17.8728L3.32189 17.4498L2 18.7473L4.80446 21.5L6.12635 20.2025L5.6918 19.776L8.18222 17.4785L9.01114 18.2885L10.333 16.991L9.54793 16.2204L12.0091 13.9409L14.463 16.2097L13.667 16.991L14.9889 18.2885L15.8251 17.4677L18.3155 19.7652L17.87 20.2025L19.1955 21.5L22 18.7473L20.6781 17.4498L20.2545 17.8656L17.9102 15.4211L18.7281 14.6183L17.4062 13.3208L16.6284 14.0842L14.3863 11.7473L14.39 11.7437L12.0091 9.26702L6.40022 3.41756L2.66095 2.5Z",
1883
- fill: "white",
1884
- fillOpacity: "0.36"
1968
+ className: "oui-fill-base-contrast-36"
1885
1969
  }
1886
1970
  ),
1887
1971
  /* @__PURE__ */ jsxRuntime.jsx(
1888
1972
  "path",
1889
1973
  {
1890
1974
  d: "M21.3574 2.5L17.6181 3.41756L13.0864 8.14158L15.6061 10.6183L20.4226 6.17025L21.3574 2.5Z",
1891
- fill: "white",
1892
- fillOpacity: "0.12"
1975
+ className: "oui-fill-base-contrast-12"
1893
1976
  }
1894
1977
  )
1895
1978
  ] }) });
@@ -1913,8 +1996,8 @@ var BattleSolidActiveIcon = (props) => {
1913
1996
  y2: "12",
1914
1997
  gradientUnits: "userSpaceOnUse",
1915
1998
  children: [
1916
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#59B0FE" }),
1917
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#26FEFE" })
1999
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-gradient-brand-end))" }),
2000
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-gradient-brand-start))" })
1918
2001
  ]
1919
2002
  }
1920
2003
  ) })
@@ -1925,8 +2008,7 @@ var BattleSolidInactiveIcon = (props) => {
1925
2008
  "path",
1926
2009
  {
1927
2010
  d: "M2.66095 2.5L3.59576 6.17025L9.63192 11.7473L7.37886 14.095L6.59375 13.3208L5.27186 14.6183L6.10079 15.4319L3.75644 17.8728L3.32189 17.4498L2 18.7473L4.80446 21.5L6.12635 20.2025L5.6918 19.776L8.18222 17.4785L9.01114 18.2885L10.333 16.991L9.54793 16.2204L12.0091 13.9409L14.463 16.2097L13.667 16.991L14.9889 18.2885L15.8251 17.4677L18.3155 19.7652L17.87 20.2025L19.1955 21.5L22 18.7473L20.6781 17.4498L20.2545 17.8656L17.9102 15.4211L18.7281 14.6183L17.4062 13.3208L16.6284 14.0842L14.3863 11.7473L14.39 11.7437L12.0091 9.26702L6.40022 3.41756L2.66095 2.5ZM21.3573 2.5L17.618 3.41756L13.0864 8.14158L15.606 10.6183L20.4225 6.17025L21.3573 2.5Z",
1928
- fill: "white",
1929
- fillOpacity: "0.8"
2011
+ className: "oui-fill-base-contrast-80"
1930
2012
  }
1931
2013
  ) });
1932
2014
  };
@@ -1957,8 +2039,7 @@ var EarnActiveIcon = (props) => {
1957
2039
  "path",
1958
2040
  {
1959
2041
  d: "M19.6034 8.1276C19.5434 7.84577 19.8603 7.62722 20.0756 7.81876C21.7466 9.3053 22.8005 11.4702 22.8005 13.8826C22.8002 18.3657 19.1655 22.0005 14.6824 22.0007C12.27 22.0007 10.1051 20.9467 8.61857 19.2758C8.42703 19.0605 8.64561 18.7434 8.92748 18.8033C9.53166 18.9317 10.1582 18.9998 10.8005 18.9998C10.9368 18.9997 11.0722 18.9957 11.207 18.9893C11.2715 18.9862 11.3354 19.0036 11.3898 19.0385C12.3404 19.6468 13.4701 20.0007 14.6824 20.0007C17.9555 20.0005 20.6288 17.4294 20.7927 14.197L20.8005 13.8826C20.8005 12.6708 20.4471 11.5414 19.8392 10.591C19.8044 10.5365 19.787 10.4727 19.79 10.4082C19.7965 10.2728 19.8005 10.1365 19.8005 9.99976C19.8005 9.35761 19.7321 8.73148 19.6034 8.1276Z",
1960
- fill: "white",
1961
- fillOpacity: "0.36"
2042
+ className: "oui-fill-base-contrast-54"
1962
2043
  }
1963
2044
  )
1964
2045
  ] }),
@@ -1985,16 +2066,14 @@ var EarnInactiveIcon = (props) => {
1985
2066
  "path",
1986
2067
  {
1987
2068
  d: "M10.7999 2C15.2182 2 18.7999 5.58172 18.7999 10C18.7999 14.4183 15.2182 18 10.7999 18C6.38165 18 2.79993 14.4183 2.79993 10C2.79993 5.58172 6.38165 2 10.7999 2ZM9.79993 7C8.69536 7 7.79993 7.89543 7.79993 9V11C7.79993 12.1046 8.69536 13 9.79993 13H11.7999C12.9045 13 13.7999 12.1046 13.7999 11V9C13.7999 7.89543 12.9045 7 11.7999 7H9.79993Z",
1988
- fill: "white",
1989
- fillOpacity: "0.36"
2069
+ className: "oui-fill-base-contrast-36"
1990
2070
  }
1991
2071
  ),
1992
2072
  /* @__PURE__ */ jsxRuntime.jsx(
1993
2073
  "path",
1994
2074
  {
1995
2075
  d: "M19.6034 8.12792C19.5435 7.84606 19.8606 7.62751 20.0758 7.81905C21.7464 9.30546 22.7998 11.4698 22.7998 13.8818C22.7998 18.3653 19.1651 22 14.6816 22C12.2696 21.9999 10.1053 20.9466 8.61887 19.276C8.42732 19.0607 8.64587 18.7437 8.92773 18.8036C9.53159 18.9319 10.1577 19 10.7998 19C10.9363 19 11.0722 18.9959 11.2072 18.9895C11.2718 18.9864 11.3356 19.0039 11.3901 19.0387C12.3405 19.6468 13.4696 20 14.6816 20C17.955 20 20.6283 17.429 20.792 14.1963L20.7998 13.8818C20.7998 12.6698 20.4466 11.5407 19.8385 10.5903C19.8037 10.5358 19.7862 10.472 19.7893 10.4074C19.7957 10.2724 19.7998 10.1366 19.7998 10C19.7998 9.3579 19.7318 8.73178 19.6034 8.12792Z",
1996
- fill: "white",
1997
- fillOpacity: "0.12"
2076
+ className: "oui-fill-base-contrast-12"
1998
2077
  }
1999
2078
  )
2000
2079
  ] }) });
@@ -2094,7 +2173,7 @@ var OrderlyIcon = (props) => {
2094
2173
  fillRule: "evenodd",
2095
2174
  clipRule: "evenodd",
2096
2175
  d: "M14.1556 4.8931C14.2202 4.94547 14.1824 5.04764 14.0992 5.04764H5.95063C5.86743 5.04764 5.82963 4.94547 5.89428 4.8931C7.02258 3.97918 8.4598 3.4317 10.0249 3.4317C11.59 3.4317 13.0272 3.97918 14.1556 4.8931Z",
2097
- fill: "white"
2176
+ fill: "rgb(var(--oui-color-base-foreground))"
2098
2177
  }
2099
2178
  ),
2100
2179
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -2103,7 +2182,7 @@ var OrderlyIcon = (props) => {
2103
2182
  fillRule: "evenodd",
2104
2183
  clipRule: "evenodd",
2105
2184
  d: "M7.47028 11.7869C7.4233 11.7199 7.34764 11.6777 7.26581 11.6777H3.83C3.75128 11.6777 3.69391 11.7525 3.71579 11.8281C4.50796 14.565 7.03275 16.566 10.0249 16.566C13.0171 16.566 15.5419 14.565 16.334 11.8281C16.3559 11.7525 16.2985 11.6777 16.2198 11.6777H12.7841C12.7022 11.6777 12.6266 11.7199 12.5796 11.7869C12.0156 12.5911 11.0817 13.1167 10.025 13.1167C8.96818 13.1167 8.03421 12.5911 7.47028 11.7869Z",
2106
- fill: "white"
2185
+ fill: "rgb(var(--oui-color-base-foreground))"
2107
2186
  }
2108
2187
  ),
2109
2188
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -2112,7 +2191,7 @@ var OrderlyIcon = (props) => {
2112
2191
  fillRule: "evenodd",
2113
2192
  clipRule: "evenodd",
2114
2193
  d: "M12.335 7.90476C12.3825 7.95713 12.4493 7.98867 12.5199 7.98867H16.114C16.1955 7.98867 16.2533 7.9094 16.2264 7.83259C15.9727 7.10647 15.5951 6.43851 15.119 5.85405C15.0743 5.79918 15.007 5.76813 14.9361 5.76813H5.11354C5.04278 5.76813 4.97543 5.79918 4.93074 5.85405C4.45459 6.43851 4.07701 7.10647 3.82337 7.83259C3.79652 7.9094 3.85428 7.98867 3.93567 7.98867H7.52982C7.60052 7.98867 7.66725 7.95713 7.71475 7.90476C8.28522 7.27587 9.10892 6.88093 10.0249 6.88093C10.9408 6.88093 11.7646 7.27587 12.335 7.90476Z",
2115
- fill: "white"
2194
+ fill: "rgb(var(--oui-color-base-foreground))"
2116
2195
  }
2117
2196
  ),
2118
2197
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -2121,7 +2200,7 @@ var OrderlyIcon = (props) => {
2121
2200
  fillRule: "evenodd",
2122
2201
  clipRule: "evenodd",
2123
2202
  d: "M13.116 10.9587C13.0549 10.9587 13.0114 10.8991 13.028 10.8402C13.1029 10.5723 13.1429 10.29 13.1429 9.99822C13.1429 9.5877 13.0636 9.19568 12.9195 8.83669C12.895 8.77593 12.9388 8.70813 13.0042 8.70813H16.3916C16.4345 8.70813 16.4716 8.73843 16.4795 8.78064C16.5534 9.17523 16.5921 9.58228 16.5921 9.99832C16.5921 10.2979 16.572 10.5927 16.5333 10.8816C16.5273 10.9259 16.4894 10.9587 16.4447 10.9587H13.116ZM7.02183 10.8402C7.03829 10.8991 6.99492 10.9587 6.93381 10.9587H3.60511C3.56045 10.9587 3.52246 10.9259 3.51651 10.8816C3.47767 10.5927 3.45761 10.2979 3.45761 9.99832C3.45761 9.58228 3.49631 9.17523 3.5703 8.78064C3.5782 8.73843 3.61523 8.70813 3.65817 8.70813H7.04553C7.11101 8.70813 7.15477 8.77593 7.13037 8.83669C6.98617 9.19568 6.90682 9.5877 6.90682 9.99822C6.90682 10.29 6.94688 10.5723 7.02183 10.8402Z",
2124
- fill: "white"
2203
+ fill: "rgb(var(--oui-color-base-foreground))"
2125
2204
  }
2126
2205
  )
2127
2206
  ] }),
@@ -2136,12 +2215,19 @@ var OrderlyIcon = (props) => {
2136
2215
  y2: "19.9491",
2137
2216
  gradientUnits: "userSpaceOnUse",
2138
2217
  children: [
2139
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#C750FF" }),
2140
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#5800E8" })
2218
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-gradient-secondary-start))" }),
2219
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-gradient-secondary-end))" })
2141
2220
  ]
2142
2221
  }
2143
2222
  ),
2144
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_862_2443", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white" }) })
2223
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_862_2443", children: /* @__PURE__ */ jsxRuntime.jsx(
2224
+ "rect",
2225
+ {
2226
+ width: "20",
2227
+ height: "20",
2228
+ fill: "rgb(var(--oui-color-base-foreground))"
2229
+ }
2230
+ ) })
2145
2231
  ] })
2146
2232
  ]
2147
2233
  }
@@ -2187,8 +2273,8 @@ var EsOrderlyIcon = (props) => {
2187
2273
  y2: "21.2774",
2188
2274
  gradientUnits: "userSpaceOnUse",
2189
2275
  children: [
2190
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "white" }),
2191
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#EDE9F4" })
2276
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-color-base-foreground))" }),
2277
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-color-quaternary))" })
2192
2278
  ]
2193
2279
  }
2194
2280
  ),
@@ -2202,12 +2288,19 @@ var EsOrderlyIcon = (props) => {
2202
2288
  y2: "16.5531",
2203
2289
  gradientUnits: "userSpaceOnUse",
2204
2290
  children: [
2205
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#C750FF" }),
2206
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#5800E8" })
2291
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-gradient-secondary-start))" }),
2292
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-gradient-secondary-end))" })
2207
2293
  ]
2208
2294
  }
2209
2295
  ),
2210
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_862_2449", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white" }) })
2296
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_862_2449", children: /* @__PURE__ */ jsxRuntime.jsx(
2297
+ "rect",
2298
+ {
2299
+ width: "20",
2300
+ height: "20",
2301
+ fill: "rgb(var(--oui-color-base-foreground))"
2302
+ }
2303
+ ) })
2211
2304
  ] })
2212
2305
  ]
2213
2306
  }
@@ -2494,8 +2587,8 @@ var TraderMobileIcon = () => {
2494
2587
  y2: "23.3335",
2495
2588
  gradientUnits: "userSpaceOnUse",
2496
2589
  children: [
2497
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#181C23" }),
2498
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#333948" })
2590
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-color-base-8))" }),
2591
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-color-base-4))" })
2499
2592
  ]
2500
2593
  }
2501
2594
  ),
@@ -2509,8 +2602,8 @@ var TraderMobileIcon = () => {
2509
2602
  y2: "29.3335",
2510
2603
  gradientUnits: "userSpaceOnUse",
2511
2604
  children: [
2512
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#4A5369" }),
2513
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#1B2028" })
2605
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-color-base-2))" }),
2606
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-color-base-7))" })
2514
2607
  ]
2515
2608
  }
2516
2609
  ),
@@ -2524,8 +2617,8 @@ var TraderMobileIcon = () => {
2524
2617
  y2: "19.3783",
2525
2618
  gradientUnits: "userSpaceOnUse",
2526
2619
  children: [
2527
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#015B50" }),
2528
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#01B49E" })
2620
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-color-success-darken))" }),
2621
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-color-success))" })
2529
2622
  ]
2530
2623
  }
2531
2624
  ),
@@ -2539,8 +2632,8 @@ var TraderMobileIcon = () => {
2539
2632
  y2: "29.3334",
2540
2633
  gradientUnits: "userSpaceOnUse",
2541
2634
  children: [
2542
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#01B49E" }),
2543
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#01B49E" })
2635
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-color-success))" }),
2636
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-color-success))" })
2544
2637
  ]
2545
2638
  }
2546
2639
  ),
@@ -2554,8 +2647,8 @@ var TraderMobileIcon = () => {
2554
2647
  y2: "22.0001",
2555
2648
  gradientUnits: "userSpaceOnUse",
2556
2649
  children: [
2557
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#181C23" }),
2558
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#333948" })
2650
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-color-base-8))" }),
2651
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-color-base-4))" })
2559
2652
  ]
2560
2653
  }
2561
2654
  ),
@@ -2569,8 +2662,8 @@ var TraderMobileIcon = () => {
2569
2662
  y2: "29.3334",
2570
2663
  gradientUnits: "userSpaceOnUse",
2571
2664
  children: [
2572
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#4A5369" }),
2573
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#1B2028" })
2665
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-color-base-2))" }),
2666
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-color-base-7))" })
2574
2667
  ]
2575
2668
  }
2576
2669
  ),
@@ -2584,8 +2677,8 @@ var TraderMobileIcon = () => {
2584
2677
  y2: "25.3335",
2585
2678
  gradientUnits: "userSpaceOnUse",
2586
2679
  children: [
2587
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#181C23" }),
2588
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#333948" })
2680
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-color-base-8))" }),
2681
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-color-base-4))" })
2589
2682
  ]
2590
2683
  }
2591
2684
  ),
@@ -2599,8 +2692,8 @@ var TraderMobileIcon = () => {
2599
2692
  y2: "29.3335",
2600
2693
  gradientUnits: "userSpaceOnUse",
2601
2694
  children: [
2602
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#4A5369" }),
2603
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#1B2028" })
2695
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-color-base-2))" }),
2696
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-color-base-7))" })
2604
2697
  ]
2605
2698
  }
2606
2699
  ),
@@ -2614,8 +2707,8 @@ var TraderMobileIcon = () => {
2614
2707
  y2: "-4.99792",
2615
2708
  gradientUnits: "userSpaceOnUse",
2616
2709
  children: [
2617
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#01B49E", stopOpacity: "0.36" }),
2618
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#01B49E" })
2710
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-color-success))", stopOpacity: "0.36" }),
2711
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-color-success))" })
2619
2712
  ]
2620
2713
  }
2621
2714
  )
@@ -2687,21 +2780,21 @@ var AffiliateIcon = () => {
2687
2780
  "path",
2688
2781
  {
2689
2782
  d: "M16.2198 10.2711L15.999 10.4993L15.7783 10.2701C14.9185 9.38023 13.5199 9.37627 12.6562 10.2622L12.6485 10.2701C11.7838 11.164 11.7838 12.6095 12.6485 13.5044L15.6424 16.6463C15.8361 16.8487 16.1523 16.8517 16.3499 16.6532L16.3566 16.6463L19.3515 13.5044C20.2162 12.6105 20.2162 11.165 19.3515 10.2701C18.4917 9.38023 17.0931 9.37627 16.2294 10.2612L16.2198 10.2711Z",
2690
- fill: "#B9D1FF"
2783
+ fill: "rgb(var(--oui-color-primary-light))"
2691
2784
  }
2692
2785
  ),
2693
2786
  /* @__PURE__ */ jsxRuntime.jsx(
2694
2787
  "path",
2695
2788
  {
2696
2789
  d: "M15.9992 9.92654C17.0243 8.93604 18.641 8.95922 19.6391 9.99217L19.7312 10.0922C20.6519 11.146 20.6216 12.7633 19.6406 13.7797L19.6414 13.7804L16.6461 16.9219L16.6437 16.925L16.6336 16.9351C16.2776 17.2926 15.7023 17.2874 15.3531 16.9226V16.9219L12.3586 13.7804V13.7797C11.3466 12.7297 11.3471 11.0404 12.3609 9.99217L12.3695 9.98357V9.98279L12.4672 9.88748C13.4713 8.95732 15.0109 8.97251 15.9992 9.92654ZM19.0641 10.5476C18.3608 9.81979 17.2216 9.81726 16.5156 10.5406L16.507 10.55L16.5062 10.5492L16.2867 10.7773L15.9984 11.075L15.7109 10.7765L15.4898 10.5476V10.5469C14.7865 9.81999 13.6486 9.81767 12.943 10.5414L12.9422 10.5406L12.9351 10.5476L12.9359 10.5484C12.2663 11.2409 12.2241 12.3379 12.8101 13.082L12.9359 13.2265L12.9383 13.2281L15.9312 16.3695L15.9633 16.3922C15.9974 16.4073 16.0371 16.4004 16.0664 16.3711L16.0695 16.3672L19.0617 13.2281L19.0641 13.2258L19.1898 13.0828C19.7369 12.3893 19.7369 11.3867 19.1898 10.6922L19.0641 10.5476Z",
2697
- fill: "#B9D1FF"
2790
+ fill: "rgb(var(--oui-color-primary-light))"
2698
2791
  }
2699
2792
  ),
2700
2793
  /* @__PURE__ */ jsxRuntime.jsx(
2701
2794
  "path",
2702
2795
  {
2703
2796
  d: "M20 7.19997V3.53134C20 2.81862 20.8617 2.46168 21.3657 2.96565L25.8343 7.43428C26.3383 7.93826 25.9814 8.79997 25.2686 8.79997H21.6C20.7163 8.79997 20 8.08363 20 7.19997Z",
2704
- fill: "#1F2D94"
2797
+ fill: "rgb(var(--oui-color-primary-darken))"
2705
2798
  }
2706
2799
  ),
2707
2800
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -2722,8 +2815,8 @@ var AffiliateIcon = () => {
2722
2815
  y2: "15.5451",
2723
2816
  gradientUnits: "userSpaceOnUse",
2724
2817
  children: [
2725
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#333948" }),
2726
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#181C23" })
2818
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-color-base-4))" }),
2819
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-color-base-8))" })
2727
2820
  ]
2728
2821
  }
2729
2822
  ),
@@ -2737,8 +2830,8 @@ var AffiliateIcon = () => {
2737
2830
  y2: "29.6",
2738
2831
  gradientUnits: "userSpaceOnUse",
2739
2832
  children: [
2740
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#4A5369" }),
2741
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#222832" })
2833
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-color-base-2))" }),
2834
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-color-base-7))" })
2742
2835
  ]
2743
2836
  }
2744
2837
  ),
@@ -2752,8 +2845,8 @@ var AffiliateIcon = () => {
2752
2845
  y2: "7.84048",
2753
2846
  gradientUnits: "userSpaceOnUse",
2754
2847
  children: [
2755
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#1828C3" }),
2756
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#608CFF" })
2848
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-gradient-primary-end))" }),
2849
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-gradient-primary-start))" })
2757
2850
  ]
2758
2851
  }
2759
2852
  ),
@@ -2767,8 +2860,8 @@ var AffiliateIcon = () => {
2767
2860
  y2: "5.74778",
2768
2861
  gradientUnits: "userSpaceOnUse",
2769
2862
  children: [
2770
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#1828C3" }),
2771
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#608CFF" })
2863
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-gradient-primary-end))" }),
2864
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-gradient-primary-start))" })
2772
2865
  ]
2773
2866
  }
2774
2867
  ),
@@ -2782,9 +2875,9 @@ var AffiliateIcon = () => {
2782
2875
  y2: "14.3999",
2783
2876
  gradientUnits: "userSpaceOnUse",
2784
2877
  children: [
2785
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#3B4355" }),
2786
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0.483985", stopColor: "#6A7387" }),
2787
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#3B4355" })
2878
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-color-base-3))" }),
2879
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0.483985", stopColor: "rgb(var(--oui-color-base-1))" }),
2880
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-color-base-3))" })
2788
2881
  ]
2789
2882
  }
2790
2883
  ),
@@ -2798,8 +2891,8 @@ var AffiliateIcon = () => {
2798
2891
  y2: "24.4001",
2799
2892
  gradientUnits: "userSpaceOnUse",
2800
2893
  children: [
2801
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#333948" }),
2802
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#181C23" })
2894
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-color-base-4))" }),
2895
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-color-base-8))" })
2803
2896
  ]
2804
2897
  }
2805
2898
  ),
@@ -2813,8 +2906,8 @@ var AffiliateIcon = () => {
2813
2906
  y2: "29.6",
2814
2907
  gradientUnits: "userSpaceOnUse",
2815
2908
  children: [
2816
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#656D83" }),
2817
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#222832" })
2909
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-color-base-1))" }),
2910
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-color-base-7))" })
2818
2911
  ]
2819
2912
  }
2820
2913
  ),
@@ -2828,8 +2921,8 @@ var AffiliateIcon = () => {
2828
2921
  y2: "8.79997",
2829
2922
  gradientUnits: "userSpaceOnUse",
2830
2923
  children: [
2831
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#5D86FC" }),
2832
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#4667E8" })
2924
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-color-primary))" }),
2925
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-color-primary-darken))" })
2833
2926
  ]
2834
2927
  }
2835
2928
  )
@@ -2861,7 +2954,7 @@ var TradingRewardsIcon = () => {
2861
2954
  fillRule: "evenodd",
2862
2955
  clipRule: "evenodd",
2863
2956
  d: "M19.3296 5.18278C19.3806 5.22417 19.3507 5.30493 19.285 5.30493H12.8438C12.778 5.30493 12.7482 5.22417 12.7993 5.18278C13.6911 4.46035 14.8272 4.02759 16.0643 4.02759C17.3016 4.02759 18.4376 4.46035 19.3296 5.18278Z",
2864
- fill: "white"
2957
+ fill: "rgb(var(--oui-color-base-foreground))"
2865
2958
  }
2866
2959
  ),
2867
2960
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -2870,7 +2963,7 @@ var TradingRewardsIcon = () => {
2870
2963
  fillRule: "evenodd",
2871
2964
  clipRule: "evenodd",
2872
2965
  d: "M14.0452 10.6322C14.0081 10.5792 13.9483 10.5459 13.8836 10.5459H11.1677C11.1055 10.5459 11.0601 10.605 11.0774 10.6647C11.7036 12.8282 13.6994 14.4099 16.0646 14.4099C18.4298 14.4099 20.4256 12.8282 21.0517 10.6647C21.069 10.605 21.0236 10.5459 20.9614 10.5459H18.2456C18.1809 10.5459 18.1211 10.5792 18.084 10.6322C17.6382 11.2679 16.8999 11.6834 16.0646 11.6834C15.2293 11.6834 14.491 11.2679 14.0452 10.6322Z",
2873
- fill: "white"
2966
+ fill: "rgb(var(--oui-color-base-foreground))"
2874
2967
  }
2875
2968
  ),
2876
2969
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -2879,7 +2972,7 @@ var TradingRewardsIcon = () => {
2879
2972
  fillRule: "evenodd",
2880
2973
  clipRule: "evenodd",
2881
2974
  d: "M17.8902 7.56345C17.9277 7.60484 17.9805 7.62978 18.0363 7.62978H20.8773C20.9418 7.62978 20.9874 7.56711 20.9661 7.50639C20.7656 6.93242 20.4672 6.40442 20.0908 5.94243C20.0555 5.89906 20.0022 5.87451 19.9462 5.87451H12.1818C12.1259 5.87451 12.0727 5.89906 12.0373 5.94243C11.661 6.40442 11.3625 6.93242 11.162 7.50639C11.1408 7.56711 11.1864 7.62978 11.2508 7.62978H14.0918C14.1477 7.62978 14.2005 7.60484 14.238 7.56345C14.6889 7.06633 15.34 6.75415 16.0641 6.75415C16.7881 6.75415 17.4392 7.06633 17.8902 7.56345Z",
2882
- fill: "white"
2975
+ fill: "rgb(var(--oui-color-base-foreground))"
2883
2976
  }
2884
2977
  ),
2885
2978
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -2888,7 +2981,7 @@ var TradingRewardsIcon = () => {
2888
2981
  fillRule: "evenodd",
2889
2982
  clipRule: "evenodd",
2890
2983
  d: "M18.5077 9.9775C18.4594 9.9775 18.425 9.93038 18.4381 9.88382C18.4973 9.67209 18.5289 9.44887 18.5289 9.21826C18.5289 8.89376 18.4662 8.58388 18.3523 8.30011C18.333 8.25208 18.3676 8.19849 18.4193 8.19849H21.0969C21.1308 8.19849 21.1602 8.22244 21.1664 8.2558C21.2248 8.56772 21.2554 8.88947 21.2554 9.21834C21.2554 9.45516 21.2395 9.68821 21.2089 9.91654C21.2041 9.95154 21.1742 9.9775 21.1389 9.9775H18.5077ZM13.6904 9.88382C13.7034 9.93038 13.6692 9.9775 13.6209 9.9775H10.9896C10.9543 9.9775 10.9243 9.95154 10.9196 9.91654C10.8889 9.68821 10.873 9.45516 10.873 9.21834C10.873 8.88947 10.9036 8.56772 10.9621 8.2558C10.9684 8.22244 10.9976 8.19849 11.0316 8.19849H13.7092C13.7609 8.19849 13.7955 8.25208 13.7762 8.30011C13.6622 8.58388 13.5995 8.89376 13.5995 9.21826C13.5995 9.44887 13.6312 9.67209 13.6904 9.88382Z",
2891
- fill: "white"
2984
+ fill: "rgb(var(--oui-color-base-foreground))"
2892
2985
  }
2893
2986
  ),
2894
2987
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -2965,8 +3058,8 @@ var TradingRewardsIcon = () => {
2965
3058
  y2: "9.12524",
2966
3059
  gradientUnits: "userSpaceOnUse",
2967
3060
  children: [
2968
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#5806D4" }),
2969
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#BB6CED" })
3061
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-gradient-secondary-start))" }),
3062
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-gradient-secondary-end))" })
2970
3063
  ]
2971
3064
  }
2972
3065
  ),
@@ -2980,8 +3073,8 @@ var TradingRewardsIcon = () => {
2980
3073
  y2: "17.8625",
2981
3074
  gradientUnits: "userSpaceOnUse",
2982
3075
  children: [
2983
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#BD6CED" }),
2984
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#5A08DD" })
3076
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-gradient-secondary-start))" }),
3077
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-gradient-secondary-end))" })
2985
3078
  ]
2986
3079
  }
2987
3080
  ),
@@ -2995,8 +3088,8 @@ var TradingRewardsIcon = () => {
2995
3088
  y2: "20.7365",
2996
3089
  gradientUnits: "userSpaceOnUse",
2997
3090
  children: [
2998
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#28303B" }),
2999
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#333948" })
3091
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-color-base-5))" }),
3092
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-color-base-4))" })
3000
3093
  ]
3001
3094
  }
3002
3095
  ),
@@ -3010,8 +3103,8 @@ var TradingRewardsIcon = () => {
3010
3103
  y2: "30.9792",
3011
3104
  gradientUnits: "userSpaceOnUse",
3012
3105
  children: [
3013
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#636D85" }),
3014
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#1B2028" })
3106
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-color-base-1))" }),
3107
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-color-base-7))" })
3015
3108
  ]
3016
3109
  }
3017
3110
  ),
@@ -3025,8 +3118,8 @@ var TradingRewardsIcon = () => {
3025
3118
  y2: "14.5052",
3026
3119
  gradientUnits: "userSpaceOnUse",
3027
3120
  children: [
3028
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#181C23" }),
3029
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#333948" })
3121
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-color-base-8))" }),
3122
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-color-base-4))" })
3030
3123
  ]
3031
3124
  }
3032
3125
  ),
@@ -3040,8 +3133,8 @@ var TradingRewardsIcon = () => {
3040
3133
  y2: "22.8511",
3041
3134
  gradientUnits: "userSpaceOnUse",
3042
3135
  children: [
3043
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#636D85" }),
3044
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#1B2028" })
3136
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-color-base-1))" }),
3137
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-color-base-7))" })
3045
3138
  ]
3046
3139
  }
3047
3140
  ),
@@ -3055,8 +3148,8 @@ var TradingRewardsIcon = () => {
3055
3148
  y2: "14.5052",
3056
3149
  gradientUnits: "userSpaceOnUse",
3057
3150
  children: [
3058
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#181C23" }),
3059
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#333948" })
3151
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-color-base-8))" }),
3152
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-color-base-4))" })
3060
3153
  ]
3061
3154
  }
3062
3155
  ),
@@ -3070,8 +3163,14 @@ var TradingRewardsIcon = () => {
3070
3163
  y2: "22.8511",
3071
3164
  gradientUnits: "userSpaceOnUse",
3072
3165
  children: [
3073
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#636D85", stopOpacity: "0.411765" }),
3074
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#1B2028" })
3166
+ /* @__PURE__ */ jsxRuntime.jsx(
3167
+ "stop",
3168
+ {
3169
+ stopColor: "rgb(var(--oui-color-base-1))",
3170
+ stopOpacity: "0.411765"
3171
+ }
3172
+ ),
3173
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-color-base-7))" })
3075
3174
  ]
3076
3175
  }
3077
3176
  )
@@ -3088,8 +3187,7 @@ var PortfolioActiveIcon = (props) => {
3088
3187
  {
3089
3188
  id: "Vector",
3090
3189
  d: "M8.9688 13.3124C6.3545 14.0269 4.5 16.3001 4.5 18.9999V20.9999C4.5 21.5522 4.9477 21.9999 5.5 21.9999H19.5C20.0523 21.9999 20.5 21.5522 20.5 20.9999V18.9999C20.5 16.3001 18.6455 14.0269 16.0312 13.3124C15.8071 13.2511 15.5869 13.2794 15.375 13.3749C14.4595 13.7875 13.4849 13.9999 12.5 13.9999C11.5151 13.9999 10.5405 13.7875 9.625 13.3749C9.4131 13.2794 9.1929 13.2511 8.9688 13.3124Z",
3091
- fill: "white",
3092
- fillOpacity: "0.36"
3190
+ className: "oui-fill-base-contrast-36"
3093
3191
  }
3094
3192
  ),
3095
3193
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -3125,8 +3223,7 @@ var PortfolioInactiveIcon = (props) => {
3125
3223
  {
3126
3224
  id: "Vector",
3127
3225
  d: "M8.9688 13.3124C6.3545 14.0269 4.5 16.3001 4.5 18.9999V20.9999C4.5 21.5522 4.9477 21.9999 5.5 21.9999H19.5C20.0523 21.9999 20.5 21.5522 20.5 20.9999V18.9999C20.5 16.3001 18.6455 14.0269 16.0312 13.3124C15.8071 13.2511 15.5869 13.2794 15.375 13.3749C14.4595 13.7875 13.4849 13.9999 12.5 13.9999C11.5151 13.9999 10.5405 13.7875 9.625 13.3749C9.4131 13.2794 9.1929 13.2511 8.9688 13.3124Z",
3128
- fill: "white",
3129
- fillOpacity: "0.12"
3226
+ className: "oui-fill-base-contrast-12"
3130
3227
  }
3131
3228
  ),
3132
3229
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -3134,8 +3231,7 @@ var PortfolioInactiveIcon = (props) => {
3134
3231
  {
3135
3232
  id: "Vector_2",
3136
3233
  d: "M12.5 2C9.7386 2 7.5 4.2386 7.5 7C7.5 9.7614 9.7386 12 12.5 12C15.2614 12 17.5 9.7614 17.5 7C17.5 4.2386 15.2614 2 12.5 2Z",
3137
- fill: "white",
3138
- fillOpacity: "0.36"
3234
+ className: "oui-fill-base-contrast-36"
3139
3235
  }
3140
3236
  )
3141
3237
  ] }) });
@@ -3160,8 +3256,7 @@ var TradingActiveIcon = (props) => {
3160
3256
  fillRule: "evenodd",
3161
3257
  clipRule: "evenodd",
3162
3258
  d: "M3.5 18C2.94772 18 2.5 17.5523 2.5 17C2.5 16.4477 2.94772 16 3.5 16H5.66905C7.0741 16 8.37613 15.2628 9.09902 14.058L10.3338 12L11.5 13.9436L10.814 15.087C9.72966 16.8942 7.77663 18 5.66905 18H3.5ZM12.6662 12L13.901 9.94202C14.6239 8.7372 15.9259 8 17.3309 8H19.5V10L22.5 7L19.5 4V6H17.3309C15.2234 6 13.2703 7.10579 12.186 8.91303L11.5 10.0563L12.6662 12Z",
3163
- fill: "white",
3164
- fillOpacity: "0.36"
3259
+ className: "oui-fill-base-contrast-36"
3165
3260
  }
3166
3261
  )
3167
3262
  ] }),
@@ -3198,8 +3293,7 @@ var TradingIcon = () => {
3198
3293
  fillRule: "evenodd",
3199
3294
  clipRule: "evenodd",
3200
3295
  d: "M2 7C2 6.44772 2.44772 6 3 6H5.16905C7.27663 6 9.22967 7.10579 10.314 8.91303L13.401 14.058C14.1239 15.2628 15.4259 16 16.831 16H19V14L22 17L19 20V18H16.831C14.7234 18 12.7703 16.8942 11.686 15.087L8.59902 9.94202C7.87613 8.7372 6.5741 8 5.16905 8H3C2.44772 8 2 7.55228 2 7Z",
3201
- fill: "white",
3202
- fillOpacity: 0.8
3296
+ className: "oui-fill-base-contrast-80"
3203
3297
  }
3204
3298
  ),
3205
3299
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -3208,8 +3302,7 @@ var TradingIcon = () => {
3208
3302
  fillRule: "evenodd",
3209
3303
  clipRule: "evenodd",
3210
3304
  d: "M3 18C2.44772 18 2 17.5523 2 17C2 16.4477 2.44772 16 3 16H5.16905C6.5741 16 7.87613 15.2628 8.59902 14.058L9.83381 12L11 13.9437L10.314 15.087C9.22967 16.8942 7.27663 18 5.16905 18H3ZM12.1662 12L13.401 9.94202C14.1239 8.7372 15.4259 8 16.831 8H19V10L22 7L19 4V6H16.831C14.7234 6 12.7703 7.10579 11.686 8.91303L11 10.0563L12.1662 12Z",
3211
- fill: "white",
3212
- fillOpacity: 0.8
3305
+ className: "oui-fill-base-contrast-80"
3213
3306
  }
3214
3307
  )
3215
3308
  ]
@@ -3225,8 +3318,7 @@ var TradingInactiveIcon = (props) => {
3225
3318
  fillRule: "evenodd",
3226
3319
  clipRule: "evenodd",
3227
3320
  d: "M2.5 7C2.5 6.44772 2.94772 6 3.5 6H5.66905C7.77663 6 9.72967 7.10579 10.814 8.91303L13.901 14.058C14.6239 15.2628 15.9259 16 17.331 16H19.5V14L22.5 17L19.5 20V18H17.331C15.2234 18 13.2703 16.8942 12.186 15.087L9.09902 9.94202C8.37613 8.7372 7.0741 8 5.66905 8H3.5C2.94772 8 2.5 7.55228 2.5 7Z",
3228
- fill: "white",
3229
- fillOpacity: "0.12"
3321
+ className: "oui-fill-base-contrast-12"
3230
3322
  }
3231
3323
  ),
3232
3324
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -3236,8 +3328,7 @@ var TradingInactiveIcon = (props) => {
3236
3328
  fillRule: "evenodd",
3237
3329
  clipRule: "evenodd",
3238
3330
  d: "M3.5 18C2.94772 18 2.5 17.5523 2.5 17C2.5 16.4477 2.94772 16 3.5 16H5.66905C7.0741 16 8.37613 15.2628 9.09902 14.058L10.3338 12L11.5 13.9437L10.814 15.087C9.72967 16.8942 7.77663 18 5.66905 18H3.5ZM12.6662 12L13.901 9.94202C14.6239 8.7372 15.9259 8 17.331 8H19.5V10L22.5 7L19.5 4V6H17.331C15.2234 6 13.2703 7.10579 12.186 8.91303L11.5 10.0563L12.6662 12Z",
3239
- fill: "white",
3240
- fillOpacity: "0.36"
3331
+ className: "oui-fill-base-contrast-36"
3241
3332
  }
3242
3333
  )
3243
3334
  ] }) });
@@ -3248,16 +3339,14 @@ var LeaderboardActiveIcon = (props) => {
3248
3339
  "path",
3249
3340
  {
3250
3341
  d: "M18 11H21C22.103 11 23 11.897 23 13V17C23 18.103 22.103 19 21 19H18V17V11Z",
3251
- fill: "white",
3252
- fillOpacity: "0.36"
3342
+ className: "oui-fill-base-contrast-36"
3253
3343
  }
3254
3344
  ),
3255
3345
  /* @__PURE__ */ jsxRuntime.jsx(
3256
3346
  "path",
3257
3347
  {
3258
3348
  d: "M6 9V17V19H3C1.897 19 1 18.103 1 17V11C1 9.897 1.897 9 3 9H6Z",
3259
- fill: "white",
3260
- fillOpacity: "0.36"
3349
+ className: "oui-fill-base-contrast-36"
3261
3350
  }
3262
3351
  ),
3263
3352
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -3290,24 +3379,21 @@ var LeaderboardInactiveIcon = (props) => {
3290
3379
  "path",
3291
3380
  {
3292
3381
  d: "M18 11H21C22.103 11 23 11.897 23 13V17C23 18.103 22.103 19 21 19H18V17V11Z",
3293
- fill: "white",
3294
- fillOpacity: "0.12"
3382
+ className: "oui-fill-base-contrast-12"
3295
3383
  }
3296
3384
  ),
3297
3385
  /* @__PURE__ */ jsxRuntime.jsx(
3298
3386
  "path",
3299
3387
  {
3300
3388
  d: "M6 9V17V19H3C1.897 19 1 18.103 1 17V11C1 9.897 1.897 9 3 9H6Z",
3301
- fill: "white",
3302
- fillOpacity: "0.12"
3389
+ className: "oui-fill-base-contrast-12"
3303
3390
  }
3304
3391
  ),
3305
3392
  /* @__PURE__ */ jsxRuntime.jsx(
3306
3393
  "path",
3307
3394
  {
3308
3395
  d: "M16 7V17V19H8V17V7C8 5.897 8.897 5 10 5H14C15.103 5 16 5.897 16 7Z",
3309
- fill: "white",
3310
- fillOpacity: "0.36"
3396
+ className: "oui-fill-base-contrast-36"
3311
3397
  }
3312
3398
  )
3313
3399
  ] });
@@ -3320,8 +3406,7 @@ var MarketsActiveIcon = (props) => {
3320
3406
  fillRule: "evenodd",
3321
3407
  clipRule: "evenodd",
3322
3408
  d: "M11.75 8C10.6454 8 9.75 8.89543 9.75 10V18C9.75 19.1046 10.6454 20 11.75 20H13.75C14.8546 20 15.75 19.1046 15.75 18V10C15.75 8.89543 14.8546 8 13.75 8H11.75ZM4.75 12C3.64543 12 2.75 12.8954 2.75 14V18C2.75 19.1046 3.64543 20 4.75 20H6.75C7.85457 20 8.75 19.1046 8.75 18V14C8.75 12.8954 7.85457 12 6.75 12H4.75Z",
3323
- fill: "white",
3324
- fillOpacity: "0.16"
3409
+ className: "oui-fill-base-contrast-16"
3325
3410
  }
3326
3411
  ),
3327
3412
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -3353,19 +3438,17 @@ var MarketsInactiveIcon = (props) => {
3353
3438
  /* @__PURE__ */ jsxRuntime.jsx(
3354
3439
  "path",
3355
3440
  {
3441
+ className: "oui-fill-base-contrast-12",
3356
3442
  fillRule: "evenodd",
3357
3443
  clipRule: "evenodd",
3358
- d: "M11.5 8a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2zm-7 4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2z",
3359
- fill: "#fff",
3360
- fillOpacity: ".12"
3444
+ d: "M11.5 8a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2zm-7 4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2z"
3361
3445
  }
3362
3446
  ),
3363
3447
  /* @__PURE__ */ jsxRuntime.jsx(
3364
3448
  "path",
3365
3449
  {
3366
- d: "M16.5 6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2z",
3367
- fill: "#fff",
3368
- fillOpacity: ".36"
3450
+ className: "oui-fill-base-contrast-36",
3451
+ d: "M16.5 6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2z"
3369
3452
  }
3370
3453
  )
3371
3454
  ] });
@@ -3378,16 +3461,14 @@ var StarChildChatActiveIcon = (props) => {
3378
3461
  fillRule: "evenodd",
3379
3462
  clipRule: "evenodd",
3380
3463
  d: "M17.8889 6.03755C17.4388 6.00078 16.8565 6 15.9999 6H14.7999V4H16.0412C16.8462 3.99999 17.5106 3.99998 18.0518 4.04419C18.6139 4.09012 19.1306 4.18868 19.6159 4.43597C20.3685 4.81947 20.9805 5.43139 21.364 6.18404C21.6112 6.66937 21.7098 7.18608 21.7557 7.74817C21.7999 8.28936 21.7999 8.95372 21.7999 9.75868V13.2408C21.7999 14.0457 21.7999 14.7101 21.7557 15.2513C21.7098 15.8134 21.6112 16.3301 21.364 16.8154C20.9805 17.568 20.3685 18.18 19.6159 18.5635C19.1306 18.8108 18.6139 18.9093 18.0518 18.9552C17.5106 18.9995 16.8462 18.9995 16.0413 18.9994H15.8314L13.5592 21.6507L12.0406 21.6507L9.76852 18.9994H9.5586C8.75364 18.9995 8.08929 18.9995 7.5481 18.9552C6.986 18.9093 6.4693 18.8108 5.98397 18.5635C5.23132 18.18 4.61939 17.568 4.2359 16.8154C3.98861 16.3301 3.89005 15.8134 3.84412 15.2513C3.7999 14.7101 3.79991 14.0457 3.79993 13.2407L3.79993 12.4997H5.79993V13.1994C5.79993 14.056 5.80071 14.6383 5.83748 15.0884C5.8733 15.5268 5.93823 15.751 6.01791 15.9074C6.20966 16.2837 6.51562 16.5897 6.89195 16.7815C7.04835 16.8611 7.27255 16.9261 7.71097 16.9619C8.16106 16.9987 8.74335 16.9994 9.59993 16.9994H10.6885L12.7999 19.4632L14.9114 16.9994H15.9999C16.8565 16.9994 17.4388 16.9987 17.8889 16.9619C18.3273 16.9261 18.5515 16.8611 18.7079 16.7815C19.0842 16.5897 19.3902 16.2837 19.5819 15.9074C19.6616 15.751 19.7266 15.5268 19.7624 15.0884C19.7991 14.6383 19.7999 14.056 19.7999 13.1994V9.8C19.7999 8.94342 19.7991 8.36113 19.7624 7.91104C19.7266 7.47262 19.6616 7.24842 19.5819 7.09202C19.3902 6.71569 19.0842 6.40973 18.7079 6.21799C18.5515 6.1383 18.3273 6.07337 17.8889 6.03755Z",
3381
- fill: "white",
3382
- fillOpacity: "0.36"
3464
+ className: "oui-fill-base-contrast-36"
3383
3465
  }
3384
3466
  ),
3385
3467
  /* @__PURE__ */ jsxRuntime.jsx(
3386
3468
  "path",
3387
3469
  {
3388
3470
  d: "M8.83997 3.27539L12.1163 4.36719V6.26465L8.83997 7.35645L7.74817 10.6328H5.85071L4.75891 7.35645L1.48352 6.26465V4.36719L4.75891 3.27539L5.85071 0H7.74817L8.83997 3.27539ZM6.49817 4.38281L5.86633 5.01465L4.96204 5.31641L5.86633 5.61719L6.49817 6.25L6.79993 7.1543L7.10071 6.25L7.73352 5.61719L8.63782 5.31641L7.73352 5.01465L7.10071 4.38281L6.79993 3.47852L6.49817 4.38281Z",
3389
- fill: "white",
3390
- fillOpacity: "0.36"
3471
+ className: "oui-fill-base-contrast-36"
3391
3472
  }
3392
3473
  ),
3393
3474
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -3396,8 +3477,7 @@ var StarChildChatActiveIcon = (props) => {
3396
3477
  fillRule: "evenodd",
3397
3478
  clipRule: "evenodd",
3398
3479
  d: "M11.5756 10.7757L12.2308 8.8103H13.3692L14.0243 10.7757L15.9897 11.4308V12.5692L14.0243 13.2244L13.3692 15.1898H12.2308L11.5756 13.2244L9.61023 12.5692V11.4308L11.5756 10.7757Z",
3399
- fill: "white",
3400
- fillOpacity: "0.12"
3480
+ className: "oui-fill-base-contrast-12"
3401
3481
  }
3402
3482
  )
3403
3483
  ] });
@@ -3407,27 +3487,24 @@ var StarChildChatInactiveIcon = (props) => {
3407
3487
  /* @__PURE__ */ jsxRuntime.jsx(
3408
3488
  "path",
3409
3489
  {
3410
- d: "M17.8889 6.03755C17.4388 6.00078 16.8565 6 15.9999 6H14.7999V4H16.0412C16.8462 3.99999 17.5106 3.99998 18.0518 4.04419C18.6139 4.09012 19.1306 4.18868 19.6159 4.43597C20.3685 4.81947 20.9805 5.43139 21.364 6.18404C21.6112 6.66937 21.7098 7.18608 21.7557 7.74817C21.7999 8.28936 21.7999 8.95372 21.7999 9.75868V13.2408C21.7999 14.0457 21.7999 14.7101 21.7557 15.2513C21.7098 15.8134 21.6112 16.3301 21.364 16.8154C20.9805 17.568 20.3685 18.18 19.6159 18.5635C19.1306 18.8108 18.6139 18.9093 18.0518 18.9552C17.5106 18.9995 16.8462 18.9995 16.0413 18.9994H15.8314L13.5592 21.6507L12.0406 21.6507L9.76852 18.9994H9.5586C8.75364 18.9995 8.08929 18.9995 7.5481 18.9552C6.986 18.9093 6.4693 18.8108 5.98397 18.5635C5.23132 18.18 4.61939 17.568 4.2359 16.8154C3.98861 16.3301 3.89005 15.8134 3.84412 15.2513C3.7999 14.7101 3.79991 14.0457 3.79993 13.2407L3.79993 12.4997H5.79993V13.1994C5.79993 14.056 5.80071 14.6383 5.83748 15.0884C5.8733 15.5268 5.93823 15.751 6.01791 15.9074C6.20966 16.2837 6.51562 16.5897 6.89195 16.7815C7.04835 16.8611 7.27255 16.9261 7.71097 16.9619C8.16106 16.9987 8.74335 16.9994 9.59993 16.9994H10.6885L12.7999 19.4632L14.9114 16.9994H15.9999C16.8565 16.9994 17.4388 16.9987 17.8889 16.9619C18.3273 16.9261 18.5515 16.8611 18.7079 16.7815C19.0842 16.5897 19.3902 16.2837 19.5819 15.9074C19.6616 15.751 19.7266 15.5268 19.7624 15.0884C19.7991 14.6383 19.7999 14.056 19.7999 13.1994V9.8C19.7999 8.94342 19.7991 8.36113 19.7624 7.91104C19.7266 7.47262 19.6616 7.24842 19.5819 7.09202C19.3902 6.71569 19.0842 6.40973 18.7079 6.21799C18.5515 6.1383 18.3273 6.07337 17.8889 6.03755Z",
3411
- fill: "#fff",
3412
- fillOpacity: "0.36"
3490
+ className: "oui-fill-base-contrast-36",
3491
+ d: "M17.8889 6.03755C17.4388 6.00078 16.8565 6 15.9999 6H14.7999V4H16.0412C16.8462 3.99999 17.5106 3.99998 18.0518 4.04419C18.6139 4.09012 19.1306 4.18868 19.6159 4.43597C20.3685 4.81947 20.9805 5.43139 21.364 6.18404C21.6112 6.66937 21.7098 7.18608 21.7557 7.74817C21.7999 8.28936 21.7999 8.95372 21.7999 9.75868V13.2408C21.7999 14.0457 21.7999 14.7101 21.7557 15.2513C21.7098 15.8134 21.6112 16.3301 21.364 16.8154C20.9805 17.568 20.3685 18.18 19.6159 18.5635C19.1306 18.8108 18.6139 18.9093 18.0518 18.9552C17.5106 18.9995 16.8462 18.9995 16.0413 18.9994H15.8314L13.5592 21.6507L12.0406 21.6507L9.76852 18.9994H9.5586C8.75364 18.9995 8.08929 18.9995 7.5481 18.9552C6.986 18.9093 6.4693 18.8108 5.98397 18.5635C5.23132 18.18 4.61939 17.568 4.2359 16.8154C3.98861 16.3301 3.89005 15.8134 3.84412 15.2513C3.7999 14.7101 3.79991 14.0457 3.79993 13.2407L3.79993 12.4997H5.79993V13.1994C5.79993 14.056 5.80071 14.6383 5.83748 15.0884C5.8733 15.5268 5.93823 15.751 6.01791 15.9074C6.20966 16.2837 6.51562 16.5897 6.89195 16.7815C7.04835 16.8611 7.27255 16.9261 7.71097 16.9619C8.16106 16.9987 8.74335 16.9994 9.59993 16.9994H10.6885L12.7999 19.4632L14.9114 16.9994H15.9999C16.8565 16.9994 17.4388 16.9987 17.8889 16.9619C18.3273 16.9261 18.5515 16.8611 18.7079 16.7815C19.0842 16.5897 19.3902 16.2837 19.5819 15.9074C19.6616 15.751 19.7266 15.5268 19.7624 15.0884C19.7991 14.6383 19.7999 14.056 19.7999 13.1994V9.8C19.7999 8.94342 19.7991 8.36113 19.7624 7.91104C19.7266 7.47262 19.6616 7.24842 19.5819 7.09202C19.3902 6.71569 19.0842 6.40973 18.7079 6.21799C18.5515 6.1383 18.3273 6.07337 17.8889 6.03755Z"
3413
3492
  }
3414
3493
  ),
3415
3494
  /* @__PURE__ */ jsxRuntime.jsx(
3416
3495
  "path",
3417
3496
  {
3418
- d: "M8.83997 3.27539L12.1163 4.36719V6.26465L8.83997 7.35645L7.74817 10.6328H5.85071L4.75891 7.35645L1.48352 6.26465V4.36719L4.75891 3.27539L5.85071 0H7.74817L8.83997 3.27539ZM6.49817 4.38281L5.86633 5.01465L4.96204 5.31641L5.86633 5.61719L6.49817 6.25L6.79993 7.1543L7.10071 6.25L7.73352 5.61719L8.63782 5.31641L7.73352 5.01465L7.10071 4.38281L6.79993 3.47852L6.49817 4.38281Z",
3419
- fill: "#fff",
3420
- fillOpacity: "0.36"
3497
+ className: "oui-fill-base-contrast-36",
3498
+ d: "M8.83997 3.27539L12.1163 4.36719V6.26465L8.83997 7.35645L7.74817 10.6328H5.85071L4.75891 7.35645L1.48352 6.26465V4.36719L4.75891 3.27539L5.85071 0H7.74817L8.83997 3.27539ZM6.49817 4.38281L5.86633 5.01465L4.96204 5.31641L5.86633 5.61719L6.49817 6.25L6.79993 7.1543L7.10071 6.25L7.73352 5.61719L8.63782 5.31641L7.73352 5.01465L7.10071 4.38281L6.79993 3.47852L6.49817 4.38281Z"
3421
3499
  }
3422
3500
  ),
3423
3501
  /* @__PURE__ */ jsxRuntime.jsx(
3424
3502
  "path",
3425
3503
  {
3504
+ className: "oui-fill-base-contrast-12",
3426
3505
  fillRule: "evenodd",
3427
3506
  clipRule: "evenodd",
3428
- d: "M11.5756 10.7757L12.2308 8.8103H13.3692L14.0243 10.7757L15.9897 11.4308V12.5692L14.0243 13.2244L13.3692 15.1898H12.2308L11.5756 13.2244L9.61023 12.5692V11.4308L11.5756 10.7757Z",
3429
- fill: "#fff",
3430
- fillOpacity: "0.12"
3507
+ d: "M11.5756 10.7757L12.2308 8.8103H13.3692L14.0243 10.7757L15.9897 11.4308V12.5692L14.0243 13.2244L13.3692 15.1898H12.2308L11.5756 13.2244L9.61023 12.5692V11.4308L11.5756 10.7757Z"
3431
3508
  }
3432
3509
  )
3433
3510
  ] });
@@ -3449,8 +3526,7 @@ var SelectedChoicesFillIcon = (props) => {
3449
3526
  "path",
3450
3527
  {
3451
3528
  d: "M7.0083 1.16602C10.2299 1.16604 12.8411 3.7775 12.8413 6.99902C12.8413 10.2208 10.23 12.833 7.0083 12.833C3.78667 12.833 1.17529 10.2208 1.17529 6.99902C1.17554 3.77748 3.78682 1.16602 7.0083 1.16602ZM10.396 4.08301C10.222 4.08303 10.0402 4.13922 9.90771 4.26562L5.64111 8.33105L4.09229 6.85449C3.82733 6.6018 3.38148 6.60197 3.11572 6.85449C2.85068 7.10722 2.85068 7.53236 3.11572 7.78516L5.15381 9.72754C5.41881 9.97998 5.86442 9.98002 6.12939 9.72754L10.8843 5.19629C11.1499 4.94355 11.1498 4.51844 10.8843 4.26562C10.7518 4.1392 10.57 4.08301 10.396 4.08301Z",
3452
- fill: "white",
3453
- fillOpacity: "0.8"
3529
+ className: "oui-fill-base-contrast-80"
3454
3530
  }
3455
3531
  ) });
3456
3532
  };
@@ -3469,16 +3545,14 @@ var SpotIcon = (props) => {
3469
3545
  "path",
3470
3546
  {
3471
3547
  d: "M10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM9 7C7.89543 7 7 7.89543 7 9V11C7 12.1046 7.89543 13 9 13H11C12.1046 13 13 12.1046 13 11V9C13 7.89543 12.1046 7 11 7H9Z",
3472
- fill: "white",
3473
- fillOpacity: "0.8"
3548
+ className: "oui-fill-base-contrast-80"
3474
3549
  }
3475
3550
  ),
3476
3551
  /* @__PURE__ */ jsxRuntime.jsx(
3477
3552
  "path",
3478
3553
  {
3479
3554
  d: "M18.8034 8.1276C18.7434 7.84577 19.0603 7.62722 19.2756 7.81876C20.9466 9.3053 22.0006 11.4702 22.0006 13.8826C22.0003 18.3657 18.3655 22.0005 13.8824 22.0007C11.4701 22.0007 9.30514 20.9467 7.81859 19.2758C7.62706 19.0605 7.84563 18.7434 8.1275 18.8033C8.73168 18.9317 9.35821 18.9998 10.0006 18.9998C10.1368 18.9997 10.2723 18.9957 10.407 18.9893C10.4716 18.9862 10.5354 19.0036 10.5898 19.0385C11.5405 19.6468 12.6701 20.0007 13.8824 20.0007C17.1555 20.0005 19.8288 17.4294 19.9927 14.197L20.0006 13.8826C20.0006 12.6708 19.6471 11.5414 19.0392 10.591C19.0044 10.5365 18.987 10.4727 18.9901 10.4082C18.9965 10.2728 19.0006 10.1365 19.0006 9.99976C19.0005 9.35761 18.9321 8.73148 18.8034 8.1276Z",
3480
- fill: "white",
3481
- fillOpacity: "0.8"
3555
+ className: "oui-fill-base-contrast-80"
3482
3556
  }
3483
3557
  )
3484
3558
  ] });
@@ -3502,8 +3576,8 @@ var PerpsIcon = (props) => {
3502
3576
  y2: "9.9414",
3503
3577
  gradientUnits: "userSpaceOnUse",
3504
3578
  children: [
3505
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#59B0FE" }),
3506
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#26FEFE" })
3579
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-gradient-brand-end))" }),
3580
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-gradient-brand-start))" })
3507
3581
  ]
3508
3582
  }
3509
3583
  ) })
@@ -3519,7 +3593,17 @@ function EmptyStateIcon() {
3519
3593
  fill: "none",
3520
3594
  viewBox: "0 0 64 64",
3521
3595
  children: [
3522
- /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "36", height: "48", x: "18", y: "5", fill: "#07080A", rx: "4" }),
3596
+ /* @__PURE__ */ jsxRuntime.jsx(
3597
+ "rect",
3598
+ {
3599
+ width: "36",
3600
+ height: "48",
3601
+ x: "18",
3602
+ y: "5",
3603
+ fill: "rgb(var(--oui-color-base-10))",
3604
+ rx: "4"
3605
+ }
3606
+ ),
3523
3607
  /* @__PURE__ */ jsxRuntime.jsx(
3524
3608
  "rect",
3525
3609
  {
@@ -3545,28 +3629,98 @@ function EmptyStateIcon() {
3545
3629
  /* @__PURE__ */ jsxRuntime.jsx(
3546
3630
  "path",
3547
3631
  {
3548
- fill: "#303237",
3632
+ fill: "rgb(var(--oui-color-base-5))",
3549
3633
  d: "M36.636 53.323V50H6v3.323C6 55.91 7.943 58 10.462 58H41c-2.392 0-4.364-2.168-4.364-4.663"
3550
3634
  }
3551
3635
  ),
3552
- /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "9", height: "2", x: "15", y: "16", fill: "#3F4146", rx: "1" }),
3553
- /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "16", height: "2", x: "15", y: "24", fill: "#3F4146", rx: "1" }),
3554
- /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "12", height: "3", x: "28", y: "29", fill: "#45484E", rx: "1.5" }),
3636
+ /* @__PURE__ */ jsxRuntime.jsx(
3637
+ "rect",
3638
+ {
3639
+ width: "9",
3640
+ height: "2",
3641
+ x: "15",
3642
+ y: "16",
3643
+ fill: "rgb(var(--oui-color-base-4))",
3644
+ rx: "1"
3645
+ }
3646
+ ),
3647
+ /* @__PURE__ */ jsxRuntime.jsx(
3648
+ "rect",
3649
+ {
3650
+ width: "16",
3651
+ height: "2",
3652
+ x: "15",
3653
+ y: "24",
3654
+ fill: "rgb(var(--oui-color-base-4))",
3655
+ rx: "1"
3656
+ }
3657
+ ),
3658
+ /* @__PURE__ */ jsxRuntime.jsx(
3659
+ "rect",
3660
+ {
3661
+ width: "12",
3662
+ height: "3",
3663
+ x: "28",
3664
+ y: "29",
3665
+ fill: "rgb(var(--oui-color-base-3))",
3666
+ rx: "1.5"
3667
+ }
3668
+ ),
3555
3669
  /* @__PURE__ */ jsxRuntime.jsx(
3556
3670
  "path",
3557
3671
  {
3558
- fill: "#45484E",
3672
+ fill: "rgb(var(--oui-color-base-3))",
3559
3673
  d: "M33 23a2 2 0 012-2h1.5a1.5 1.5 0 010 3H34a1 1 0 01-1-1z"
3560
3674
  }
3561
3675
  ),
3562
- /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "9", height: "3", x: "29", y: "37", fill: "#45484E", rx: "1.5" }),
3563
- /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "13", height: "2", x: "15", y: "30", fill: "#3F4146", rx: "1" }),
3564
- /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "15", height: "2", x: "15", y: "36", fill: "#3F4146", rx: "1" }),
3565
- /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "24", height: "2", x: "15", y: "42", fill: "#3F4146", rx: "1" }),
3676
+ /* @__PURE__ */ jsxRuntime.jsx(
3677
+ "rect",
3678
+ {
3679
+ width: "9",
3680
+ height: "3",
3681
+ x: "29",
3682
+ y: "37",
3683
+ fill: "rgb(var(--oui-color-base-3))",
3684
+ rx: "1.5"
3685
+ }
3686
+ ),
3687
+ /* @__PURE__ */ jsxRuntime.jsx(
3688
+ "rect",
3689
+ {
3690
+ width: "13",
3691
+ height: "2",
3692
+ x: "15",
3693
+ y: "30",
3694
+ fill: "rgb(var(--oui-color-base-4))",
3695
+ rx: "1"
3696
+ }
3697
+ ),
3698
+ /* @__PURE__ */ jsxRuntime.jsx(
3699
+ "rect",
3700
+ {
3701
+ width: "15",
3702
+ height: "2",
3703
+ x: "15",
3704
+ y: "36",
3705
+ fill: "rgb(var(--oui-color-base-4))",
3706
+ rx: "1"
3707
+ }
3708
+ ),
3709
+ /* @__PURE__ */ jsxRuntime.jsx(
3710
+ "rect",
3711
+ {
3712
+ width: "24",
3713
+ height: "2",
3714
+ x: "15",
3715
+ y: "42",
3716
+ fill: "rgb(var(--oui-color-base-4))",
3717
+ rx: "1"
3718
+ }
3719
+ ),
3566
3720
  /* @__PURE__ */ jsxRuntime.jsx(
3567
3721
  "path",
3568
3722
  {
3569
- fill: "#181A1D",
3723
+ fill: "rgb(var(--oui-color-base-8))",
3570
3724
  fillRule: "evenodd",
3571
3725
  d: "M27.24 30.022a12.451 12.451 0 1122.195 9.87l5.328 5.328-1.58 1.58-5.241-5.24a12.452 12.452 0 01-20.703-11.537zm14.193 12.39A10.156 10.156 0 1037.47 22.49a10.156 10.156 0 003.963 19.92z",
3572
3726
  clipRule: "evenodd"
@@ -3575,7 +3729,7 @@ function EmptyStateIcon() {
3575
3729
  /* @__PURE__ */ jsxRuntime.jsx(
3576
3730
  "path",
3577
3731
  {
3578
- fill: "#54565B",
3732
+ fill: "rgb(var(--oui-color-base-2))",
3579
3733
  fillRule: "evenodd",
3580
3734
  d: "M27.24 29.022a12.451 12.451 0 1122.195 9.87l5.328 5.328-1.58 1.58-5.241-5.24a12.452 12.452 0 01-20.703-11.537zm14.193 12.39A10.156 10.156 0 1037.47 21.49a10.156 10.156 0 003.963 19.92z",
3581
3735
  clipRule: "evenodd"
@@ -3584,14 +3738,14 @@ function EmptyStateIcon() {
3584
3738
  /* @__PURE__ */ jsxRuntime.jsx(
3585
3739
  "path",
3586
3740
  {
3587
- fill: "#16181B",
3741
+ fill: "rgb(var(--oui-color-base-8))",
3588
3742
  d: "M51.755 43.867c-.99.99-.99 2.596 0 3.586l3.754 3.754a2.536 2.536 0 103.586-3.586l-3.754-3.754a2.536 2.536 0 00-3.586 0z"
3589
3743
  }
3590
3744
  ),
3591
3745
  /* @__PURE__ */ jsxRuntime.jsx(
3592
3746
  "path",
3593
3747
  {
3594
- fill: "#4E525C",
3748
+ fill: "rgb(var(--oui-color-base-2))",
3595
3749
  d: "M51.755 42.867c-.99.99-.99 2.596 0 3.586l3.754 3.754a2.536 2.536 0 103.586-3.586l-3.754-3.754a2.536 2.536 0 00-3.586 0z"
3596
3750
  }
3597
3751
  ),
@@ -3606,8 +3760,8 @@ function EmptyStateIcon() {
3606
3760
  y2: "25.703",
3607
3761
  gradientUnits: "userSpaceOnUse",
3608
3762
  children: [
3609
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#0C0D10" }),
3610
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#121418" })
3763
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-color-base-10))" }),
3764
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-color-base-9))" })
3611
3765
  ]
3612
3766
  }
3613
3767
  ),
@@ -3621,8 +3775,14 @@ function EmptyStateIcon() {
3621
3775
  y2: "23.703",
3622
3776
  gradientUnits: "userSpaceOnUse",
3623
3777
  children: [
3624
- /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#1B1D22" }),
3625
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "#26292E" })
3778
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-gradient-neutral-end))" }),
3779
+ /* @__PURE__ */ jsxRuntime.jsx(
3780
+ "stop",
3781
+ {
3782
+ offset: "1",
3783
+ stopColor: "rgb(var(--oui-gradient-neutral-start))"
3784
+ }
3785
+ )
3626
3786
  ]
3627
3787
  }
3628
3788
  )
@@ -3645,9 +3805,8 @@ var VectorIcon = React70__namespace.default.forwardRef(
3645
3805
  children: /* @__PURE__ */ jsxRuntime.jsx(
3646
3806
  "path",
3647
3807
  {
3648
- fillOpacity: 0.8,
3649
3808
  d: "M0.999023 0.103516C0.447023 0.103516 -0.000976562 0.551516 -0.000976562 1.10352C-0.000976562 1.65552 0.447023 2.10352 0.999023 2.10352H18.999C19.551 2.10352 19.999 1.65552 19.999 1.10352C19.999 0.551516 19.551 0.103516 18.999 0.103516H0.999023ZM0.999023 5.10352C0.447023 5.10352 -0.000976562 5.55152 -0.000976562 6.10352C-0.000976562 6.65552 0.447023 7.10352 0.999023 7.10352H18.999C19.551 7.10352 19.999 6.65552 19.999 6.10352C19.999 5.55152 19.551 5.10352 18.999 5.10352H0.999023ZM0.999023 10.1035C0.447023 10.1035 -0.000976562 10.5515 -0.000976562 11.1035C-0.000976562 11.6555 0.447023 12.1035 0.999023 12.1035H18.999C19.551 12.1035 19.999 11.6555 19.999 11.1035C19.999 10.5515 19.551 10.1035 18.999 10.1035H0.999023Z",
3650
- fill: "white"
3809
+ className: "oui-fill-base-contrast-80"
3651
3810
  }
3652
3811
  )
3653
3812
  }
@@ -3675,15 +3834,14 @@ var SwapHorizIcon = () => {
3675
3834
  y: "0",
3676
3835
  width: "20",
3677
3836
  height: "20",
3678
- children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "#D9D9D9" })
3837
+ children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "rgb(var(--oui-color-tertiary))" })
3679
3838
  }
3680
3839
  ),
3681
3840
  /* @__PURE__ */ jsxRuntime.jsx("g", { mask: "url(#mask0_2321_5422)", children: /* @__PURE__ */ jsxRuntime.jsx(
3682
3841
  "path",
3683
3842
  {
3684
- d: "M6 16.5L2 12.5L6 8.5L7.0625 9.5625L4.875 11.75H11V13.25H4.875L7.0625 15.4375L6 16.5ZM14 11.5L12.9375 10.4375L15.125 8.25H9V6.75H15.125L12.9375 4.5625L14 3.5L18 7.5L14 11.5Z",
3685
- fill: "white",
3686
- fillOpacity: "0.54"
3843
+ className: "oui-fill-base-contrast-54",
3844
+ d: "M6 16.5L2 12.5L6 8.5L7.0625 9.5625L4.875 11.75H11V13.25H4.875L7.0625 15.4375L6 16.5ZM14 11.5L12.9375 10.4375L15.125 8.25H9V6.75H15.125L12.9375 4.5625L14 3.5L18 7.5L14 11.5Z"
3687
3845
  }
3688
3846
  ) })
3689
3847
  ]
@@ -3703,8 +3861,7 @@ var PeopleIcon = () => {
3703
3861
  "path",
3704
3862
  {
3705
3863
  d: "M15.499 2.92969C13.0137 2.92969 10.999 4.94469 10.999 7.42969C10.999 9.91469 13.0137 11.9297 15.499 11.9297C17.9843 11.9297 19.999 9.91469 19.999 7.42969C19.999 4.94469 17.9843 2.92969 15.499 2.92969ZM7.99902 3.92969C5.78992 3.92969 3.99902 5.72069 3.99902 7.92969C3.99902 10.1387 5.78992 11.9297 7.99902 11.9297C8.82842 11.9297 9.61402 11.6767 10.2802 11.2107C10.7329 10.8947 10.8466 10.2577 10.5302 9.80469C10.2138 9.35169 9.60792 9.26969 9.15522 9.58569C8.82232 9.81869 8.41522 9.92969 7.99902 9.92969C6.89442 9.92969 5.99902 9.03469 5.99902 7.92969C5.99902 6.82469 6.89442 5.92969 7.99902 5.92969C8.32522 5.92969 8.62362 6.00168 8.90522 6.14868C9.39522 6.40368 10.0254 6.2317 10.2802 5.7417C10.5351 5.2527 10.3327 4.62168 9.84282 4.36768C9.27772 4.07368 8.64842 3.92969 7.99902 3.92969ZM15.499 4.92969C16.8797 4.92969 17.999 6.04869 17.999 7.42969C17.999 8.81069 16.8797 9.92969 15.499 9.92969C14.1183 9.92969 12.999 8.81069 12.999 7.42969C12.999 6.04869 14.1183 4.92969 15.499 4.92969ZM5.06152 13.2737C3.22742 14.0307 1.99902 15.8857 1.99902 17.9297V19.9297C1.99902 20.4817 2.44672 20.9297 2.99902 20.9297H6.99902C7.55132 20.9297 7.99902 20.4817 7.99902 19.9297C7.99902 19.3777 7.55132 18.9297 6.99902 18.9297H3.99902V17.9297C3.99902 16.8057 4.66572 15.7737 5.43202 15.3197C6.15272 15.6237 6.91512 15.8537 7.59312 15.9107C8.14352 15.9577 8.63982 15.5427 8.68652 14.9917C8.73322 14.4417 8.33552 13.9757 7.78522 13.9287C7.34622 13.8917 6.86642 13.7597 6.31152 13.5237C6.17752 13.4667 6.09972 13.4217 5.84282 13.3047C5.59092 13.1897 5.31732 13.1677 5.06152 13.2737ZM12.0615 13.2737C10.2274 14.0307 8.99902 15.8857 8.99902 17.9297V19.9297C8.99902 20.4817 9.44672 20.9297 9.99902 20.9297H20.999C21.5513 20.9297 21.999 20.4817 21.999 19.9297V17.9297C21.999 15.9337 20.7638 14.1237 18.9365 13.3357C18.6793 13.2247 18.3796 13.2217 18.124 13.3357C17.2392 13.7327 16.3772 13.9297 15.499 13.9297C14.6238 13.9297 13.7588 13.7217 12.8428 13.3047C12.5909 13.1897 12.3173 13.1677 12.0615 13.2737ZM12.446 15.3197C13.3908 15.6777 14.5299 15.9297 15.499 15.9297C16.4605 15.9297 17.5525 15.6947 18.4782 15.3527C19.3808 15.8667 19.999 16.8287 19.999 17.9297V18.9297H10.999V17.9297C10.999 16.7647 11.6549 15.7827 12.446 15.3197Z",
3706
- fill: "white",
3707
- fillOpacity: 0.8
3864
+ className: "oui-fill-base-contrast-80"
3708
3865
  }
3709
3866
  )
3710
3867
  }
@@ -3723,8 +3880,7 @@ var PersonIcon = () => {
3723
3880
  "path",
3724
3881
  {
3725
3882
  d: "M11.998 1.95312C9.23665 1.95312 6.99805 4.19172 6.99805 6.95312C6.99805 9.71452 9.23665 11.9531 11.998 11.9531C14.7594 11.9531 16.998 9.71452 16.998 6.95312C16.998 4.19172 14.7594 1.95312 11.998 1.95312ZM11.998 3.95312C13.6549 3.95312 14.998 5.29622 14.998 6.95312C14.998 8.61002 13.6549 9.95312 11.998 9.95312C10.3411 9.95312 8.99805 8.61002 8.99805 6.95312C8.99805 5.29622 10.3411 3.95312 11.998 3.95312ZM8.46685 13.2656C5.85255 13.9801 3.99805 16.2533 3.99805 18.9531V20.9531C3.99805 21.5054 4.44575 21.9531 4.99805 21.9531H18.998C19.5503 21.9531 19.998 21.5054 19.998 20.9531V18.9531C19.998 16.2533 18.1435 13.9801 15.5292 13.2656C15.3051 13.2043 15.0849 13.2326 14.873 13.3281C13.9575 13.7407 12.9829 13.9531 11.998 13.9531C11.0131 13.9531 10.0385 13.7407 9.12305 13.3281C8.91115 13.2326 8.69095 13.2043 8.46685 13.2656ZM8.87305 15.2656C9.88285 15.6475 10.9177 15.9531 11.998 15.9531C13.0783 15.9531 14.1132 15.6475 15.123 15.2656C16.8264 15.7816 17.998 17.2195 17.998 18.9531V19.9531H5.99805V18.9531C5.99805 17.2195 7.16965 15.7816 8.87305 15.2656Z",
3726
- fill: "white",
3727
- fillOpacity: 0.8
3883
+ className: "oui-fill-base-contrast-80"
3728
3884
  }
3729
3885
  )
3730
3886
  }
@@ -3745,7 +3901,7 @@ var SettingFillIcon = React70__namespace.default.forwardRef(
3745
3901
  );
3746
3902
  SettingFillIcon.displayName = "SettingFillIcon";
3747
3903
  var TradingLeftNavIcon = (props) => {
3748
- const { width = 24, height = 24, opacity = 0.54, ...rest } = props;
3904
+ const { width = 24, height = 24, ...rest } = props;
3749
3905
  return /* @__PURE__ */ jsxRuntime.jsx(
3750
3906
  "svg",
3751
3907
  {
@@ -3753,13 +3909,13 @@ var TradingLeftNavIcon = (props) => {
3753
3909
  height: `${height}px`,
3754
3910
  viewBox: "0 0 20 20",
3755
3911
  xmlns: "http://www.w3.org/2000/svg",
3912
+ className: "oui-text-base-contrast-54",
3756
3913
  ...rest,
3757
3914
  children: /* @__PURE__ */ jsxRuntime.jsx(
3758
3915
  "path",
3759
3916
  {
3760
3917
  d: "M5.426 1.66663C5.24175 1.67715 4.98875 1.75081 4.85308 1.85868C4.80817 1.89464 4.67798 2.0148 4.65323 2.05076L1.02049 7.28121C0.892158 7.44872 0.833496 7.67235 0.833496 7.80916C0.833496 8.18539 1.09108 8.41167 1.09108 8.41167L9.28423 18.0043C9.28973 18.0113 9.58307 18.3393 10.0002 18.3332C10.4172 18.3262 10.7106 18.0113 10.7161 18.0043C10.9718 17.7053 18.9404 8.37835 18.9404 8.37835C18.9404 8.37835 19.1668 8.08015 19.1668 7.80916C19.1668 7.53729 18.9486 7.23472 18.9486 7.23472L15.3571 2.05338C15.3315 2.01742 15.2728 2.0297 15.2426 1.99901C15.2059 1.95691 15.2013 1.89728 15.1564 1.86132C15.0207 1.75345 14.8603 1.74292 14.6981 1.7245C14.6541 1.71836 14.6284 1.67013 14.5835 1.67013H14.4973L5.426 1.66663ZM7.36474 3.42414H12.6356L10.0002 6.43841L7.36474 3.42414ZM5.50299 4.02664L8.05224 6.93216H3.46891L5.50299 4.02664ZM14.4973 4.02664L16.5314 6.93216H11.9481L14.4973 4.02664ZM3.69808 8.68616H9.08349V14.9892L3.69808 8.68616ZM10.9168 8.68616H16.3022C15.0235 10.1806 12.4999 13.1387 10.9168 14.9892V8.68616Z",
3761
- fill: "white",
3762
- fillOpacity: opacity
3918
+ fill: "currentColor"
3763
3919
  }
3764
3920
  )
3765
3921
  }
@@ -3808,24 +3964,21 @@ var LeftNavVaultsIcon = React70.forwardRef(
3808
3964
  "path",
3809
3965
  {
3810
3966
  d: "M20 5C20 4.44772 19.5523 4 19 4H5C4.44772 4 4 4.44772 4 5V14C4 14.5523 4.44772 15 5 15H19C19.5523 15 20 14.5523 20 14V5ZM22 14C22 15.6569 20.6569 17 19 17H5C3.34315 17 2 15.6569 2 14V5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V14Z",
3811
- fill: "white",
3812
- fillOpacity: "0.8"
3967
+ className: "oui-fill-base-contrast-80"
3813
3968
  }
3814
3969
  ),
3815
3970
  /* @__PURE__ */ jsxRuntime.jsx(
3816
3971
  "path",
3817
3972
  {
3818
3973
  d: "M7 20C7 19.4477 7.44772 19 8 19H16C16.5523 19 17 19.4477 17 20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20Z",
3819
- fill: "white",
3820
- fillOpacity: "0.8"
3974
+ className: "oui-fill-base-contrast-80"
3821
3975
  }
3822
3976
  ),
3823
3977
  /* @__PURE__ */ jsxRuntime.jsx(
3824
3978
  "path",
3825
3979
  {
3826
3980
  d: "M15.2783 6.30759C15.6607 5.90925 16.2939 5.89604 16.6924 6.27829C17.0907 6.66069 17.1039 7.29393 16.7217 7.69235L12.7217 11.8593C12.5331 12.0558 12.2723 12.167 12 12.167C11.7277 12.167 11.4669 12.0558 11.2783 11.8593L10.3994 10.9433L8.72165 12.6924C8.33925 13.0907 7.70601 13.1039 7.30759 12.7217C6.90925 12.3392 6.89604 11.706 7.27829 11.3076L9.67868 8.80759L9.7529 8.73825C9.93282 8.5854 10.1621 8.49997 10.4004 8.49997C10.6725 8.50008 10.9326 8.61129 11.1211 8.80759L11.999 9.72263L15.2783 6.30759Z",
3827
- fill: "white",
3828
- fillOpacity: "0.8"
3981
+ className: "oui-fill-base-contrast-80"
3829
3982
  }
3830
3983
  )
3831
3984
  ]
@@ -3833,9 +3986,6 @@ var LeftNavVaultsIcon = React70.forwardRef(
3833
3986
  );
3834
3987
  }
3835
3988
  );
3836
- if (process.env.NODE_ENV !== "production") {
3837
- LeftNavVaultsIcon.displayName = "LeftNavVaultsIcon";
3838
- }
3839
3989
  var NewsFillIcon = React70__namespace.default.forwardRef(
3840
3990
  (props, ref) => {
3841
3991
  const { opacity = 1, ...rest } = props;
@@ -3869,24 +4019,21 @@ var WoofiStakeIcon = (props) => {
3869
4019
  "path",
3870
4020
  {
3871
4021
  d: "M14.4333 15.5449L13.5283 13.3949C13.3283 12.8099 12.8233 12.5149 12.2183 12.5149C11.6133 12.5149 11.1083 12.9049 10.9083 13.3949L9.89825 15.5449L8.38825 10.7549H6.47325L8.69325 17.6949C8.79325 17.9899 8.99325 18.1849 9.29825 18.1849H10.4083C10.7083 18.1849 10.9133 17.9899 11.0133 17.7949L12.1233 15.0599L13.3333 17.7949C13.4333 17.9899 13.6333 18.1849 13.9383 18.1849H14.9483C15.2483 18.1849 15.4532 17.9899 15.5533 17.7949L16.5633 14.4699H14.7483L14.4333 15.5449Z",
3872
- fill: "white",
3873
- fillOpacity: "0.8"
4022
+ className: "oui-fill-base-contrast-80"
3874
4023
  }
3875
4024
  ),
3876
4025
  /* @__PURE__ */ jsxRuntime.jsx(
3877
4026
  "path",
3878
4027
  {
3879
4028
  d: "M15.9433 10.76L15.0333 13.495H16.9483L17.7583 10.76H15.9433Z",
3880
- fill: "white",
3881
- fillOpacity: "0.8"
4029
+ className: "oui-fill-base-contrast-80"
3882
4030
  }
3883
4031
  ),
3884
4032
  /* @__PURE__ */ jsxRuntime.jsx(
3885
4033
  "path",
3886
4034
  {
3887
4035
  d: "M1.83325 15.14C1.20325 12.355 2.59325 10.06 3.48825 8.935C4.96325 7.075 7.07825 5.82 8.75325 5.82C11.3283 5.82 13.2983 8.19 14.1833 9.475H16.1533C15.9683 9.13 14.3183 6.2 11.5783 4.84C12.7233 3.945 13.3283 2.58 13.5033 1.34C13.5533 1.005 13.4533 0.665 13.2283 0.405C12.9983 0.15 12.6733 0 12.3283 0H4.69825C4.32325 0 3.97325 0.18 3.74825 0.475C3.52825 0.775 3.45825 1.16 3.56325 1.52C3.76325 2.19 4.39325 3.865 5.79325 4.915C4.47825 5.565 3.19825 6.6 2.17325 7.895C0.298253 10.26 -0.396748 12.995 0.218252 15.59L0.258252 15.71C1.21825 18.095 4.14825 18.48 5.96325 18.48C6.67325 18.48 7.20825 18.42 7.38825 18.395L6.86825 16.765C5.81325 16.85 2.62325 16.94 1.83325 15.14ZM11.7283 1.67C11.4633 2.63 10.6983 4.145 8.55825 4.145C6.75825 4.145 5.82825 2.71 5.39325 1.67H11.7283Z",
3888
- fill: "white",
3889
- fillOpacity: "0.8"
4036
+ className: "oui-fill-base-contrast-80"
3890
4037
  }
3891
4038
  )
3892
4039
  ] });
@@ -3899,24 +4046,21 @@ var EarnIcon = (props) => {
3899
4046
  fillRule: "evenodd",
3900
4047
  clipRule: "evenodd",
3901
4048
  d: "M10 19C13.866 19 17 15.866 17 12C17 8.13401 13.866 5 10 5C6.13401 5 3 8.13401 3 12C3 15.866 6.13401 19 10 19ZM10 21C14.9706 21 19 16.9706 19 12C19 7.02944 14.9706 3 10 3C5.02944 3 1 7.02944 1 12C1 16.9706 5.02944 21 10 21Z",
3902
- fill: "white",
3903
- fillOpacity: "0.8"
4049
+ className: "oui-fill-base-contrast-80"
3904
4050
  }
3905
4051
  ),
3906
4052
  /* @__PURE__ */ jsxRuntime.jsx(
3907
4053
  "path",
3908
4054
  {
3909
4055
  d: "M10 7C10.5523 7 11 7.44772 11 8H12C12.5523 8 13 8.44772 13 9C13 9.55228 12.5523 10 12 10H9V11H12C12.5523 11 13 11.4477 13 12V15C13 15.5523 12.5523 16 12 16H11C11 16.5523 10.5523 17 10 17C9.44772 17 9 16.5523 9 16H8C7.44772 16 7 15.5523 7 15C7 14.4477 7.44772 14 8 14H11V13H8C7.44772 13 7 12.5523 7 12V9C7 8.44772 7.44772 8 8 8H9C9 7.44772 9.44772 7 10 7Z",
3910
- fill: "white",
3911
- fillOpacity: "0.8"
4056
+ className: "oui-fill-base-contrast-80"
3912
4057
  }
3913
4058
  ),
3914
4059
  /* @__PURE__ */ jsxRuntime.jsx(
3915
4060
  "path",
3916
4061
  {
3917
4062
  d: "M15.6203 3.72962C15.3518 3.54661 15.4854 3.11807 15.8039 3.18284C19.9099 4.01795 22.9999 7.64751 22.9999 12.0002C22.9998 16.3529 19.9099 19.9825 15.8039 20.8176C15.4854 20.8824 15.3518 20.4538 15.6203 20.2708C16.6993 19.5353 17.6263 18.5936 18.3466 17.5031C18.3641 17.4767 18.3855 17.4531 18.4101 17.4331C19.9893 16.1497 20.9998 14.1938 20.9999 12.0002C20.9999 9.80647 19.9896 7.84985 18.4101 6.56641C18.3855 6.54643 18.3641 6.52284 18.3466 6.49641C17.6263 5.40614 16.6993 4.46488 15.6203 3.72962Z",
3918
- fill: "white",
3919
- fillOpacity: "0.8"
4063
+ className: "oui-fill-base-contrast-80"
3920
4064
  }
3921
4065
  )
3922
4066
  ] });
@@ -3926,8 +4070,7 @@ var ReferralSolidIcon = (props) => {
3926
4070
  "path",
3927
4071
  {
3928
4072
  d: "M14.7002 3C16.6882 3.00011 18.2996 4.61163 18.2998 6.59961V7.91797L19.3965 8.64941C20.3979 9.317 20.9998 10.441 21 11.6445V17.4004C20.9998 19.3883 19.3883 20.9998 17.4004 21H6.59961C4.6117 20.9998 3.00021 19.3883 3 17.4004V11.6445C3.00016 10.441 3.60213 9.317 4.60352 8.64941L5.7002 7.91797V6.59961C5.7004 4.61163 7.3118 3.00011 9.2998 3H14.7002ZM13.1055 17.6807C12.4555 18.1862 11.5445 18.1862 10.8945 17.6807L4.7998 12.9395V17.4004C4.80001 18.3942 5.60581 19.2 6.59961 19.2002H17.4004C18.3942 19.2 19.2 18.3942 19.2002 17.4004V12.9395L13.1055 17.6807ZM9.2998 4.7998C8.30591 4.79991 7.50021 5.60574 7.5 6.59961V12.7598L12 16.2598L16.5 12.7598V6.59961C16.4998 5.60574 15.6941 4.79991 14.7002 4.7998H9.2998ZM12.1553 7.9541C12.7383 7.34613 13.6825 7.34927 14.2627 7.96094C14.846 8.57618 14.8462 9.57015 14.2627 10.1846L12.2412 12.3447L12.2363 12.3486C12.1031 12.4849 11.8896 12.4835 11.7588 12.3447L9.7373 10.1846C9.15379 9.56947 9.15402 8.5755 9.7373 7.96094L9.74316 7.95508C10.3262 7.34618 11.2703 7.34919 11.8506 7.96094L11.999 8.11816L12.1484 7.96094L12.1553 7.9541ZM5.60156 10.1475C5.34425 10.319 5.13998 10.5509 5.00195 10.8174L5.7002 11.3594V10.0811L5.60156 10.1475ZM18.2998 11.3594L18.9971 10.8174C18.859 10.551 18.6556 10.3189 18.3984 10.1475L18.2998 10.0811V11.3594Z",
3929
- fill: "white",
3930
- fillOpacity: "0.8"
4073
+ className: "oui-fill-base-contrast-80"
3931
4074
  }
3932
4075
  ) });
3933
4076
  };
@@ -4653,7 +4796,7 @@ var inputVariants = tv(
4653
4796
  "placeholder:oui-text-base-contrast-20",
4654
4797
  "placeholder:oui-text-xs",
4655
4798
  "oui-tabular-nums",
4656
- "oui-text-white",
4799
+ "oui-text-base-contrast",
4657
4800
  "autofill:oui-bg-transparent",
4658
4801
  "oui-input-input",
4659
4802
  "disabled:oui-cursor-not-allowed",
@@ -4723,7 +4866,10 @@ var inputVariants = tv(
4723
4866
  input: ["oui-text-danger"]
4724
4867
  },
4725
4868
  warning: {
4726
- box: ["oui-outline-warning-darken", "focus-within:oui-outline-warning-darken"],
4869
+ box: [
4870
+ "oui-outline-warning-darken",
4871
+ "focus-within:oui-outline-warning-darken"
4872
+ ],
4727
4873
  input: ["oui-text-warning-darken"]
4728
4874
  },
4729
4875
  default: {
@@ -4823,7 +4969,11 @@ var Input = React70__namespace.default.forwardRef((props, ref) => {
4823
4969
  id: id || cid,
4824
4970
  prefix,
4825
4971
  className: additional({
4826
- className: tailwindVariants.cnBase(classNames?.additional, classNames?.prefix)
4972
+ className: tailwindVariants.cnBase(
4973
+ "oui-input-prefix",
4974
+ classNames?.additional,
4975
+ classNames?.prefix
4976
+ )
4827
4977
  })
4828
4978
  }
4829
4979
  ),
@@ -4843,7 +4993,11 @@ var Input = React70__namespace.default.forwardRef((props, ref) => {
4843
4993
  id: id || cid,
4844
4994
  suffix: suffixElement,
4845
4995
  className: additional({
4846
- className: tailwindVariants.cnBase(classNames?.additional, classNames?.suffix)
4996
+ className: tailwindVariants.cnBase(
4997
+ "oui-input-suffix",
4998
+ classNames?.additional,
4999
+ classNames?.suffix
5000
+ )
4847
5001
  })
4848
5002
  }
4849
5003
  )
@@ -4858,23 +5012,17 @@ var ClearButton = React70__namespace.default.forwardRef((props, ref) => {
4858
5012
  props.onClick();
4859
5013
  },
4860
5014
  ref,
4861
- className: props.className,
5015
+ className: tailwindVariants.cnBase("oui-input-clear-btn", props.className),
4862
5016
  children: /* @__PURE__ */ jsxRuntime.jsx(
4863
5017
  "svg",
4864
5018
  {
4865
5019
  width: "16",
4866
5020
  height: "16",
4867
5021
  viewBox: "0 0 16 16",
4868
- fill: "none",
5022
+ fill: "currentColor",
4869
5023
  xmlns: "http://www.w3.org/2000/svg",
4870
- children: /* @__PURE__ */ jsxRuntime.jsx(
4871
- "path",
4872
- {
4873
- d: "M8 1.302a6.667 6.667 0 1 0 0 13.333A6.667 6.667 0 0 0 8 1.302m-2 4c.17 0 .349.057.479.187l1.52 1.521L9.52 5.49a.68.68 0 0 1 .48-.188c.17 0 .348.057.479.187.26.261.26.698 0 .96l-1.52 1.52 1.52 1.52c.26.261.26.698 0 .96a.687.687 0 0 1-.959 0L8 8.926l-1.521 1.521a.686.686 0 0 1-.959 0 .686.686 0 0 1 0-.959l1.521-1.52-1.52-1.52a.686.686 0 0 1 0-.96A.68.68 0 0 1 6 5.302",
4874
- fill: "#fff",
4875
- fillOpacity: ".2"
4876
- }
4877
- )
5024
+ className: "oui-fill-base-contrast-20",
5025
+ children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 1.302a6.667 6.667 0 1 0 0 13.333A6.667 6.667 0 0 0 8 1.302m-2 4c.17 0 .349.057.479.187l1.52 1.521L9.52 5.49a.68.68 0 0 1 .48-.188c.17 0 .348.057.479.187.26.261.26.698 0 .96l-1.52 1.52 1.52 1.52c.26.261.26.698 0 .96a.687.687 0 0 1-.959 0L8 8.926l-1.521 1.521a.686.686 0 0 1-.959 0 .686.686 0 0 1 0-.959l1.521-1.52-1.52-1.52a.686.686 0 0 1 0-.96A.68.68 0 0 1 6 5.302" })
4878
5026
  }
4879
5027
  )
4880
5028
  }
@@ -4884,6 +5032,7 @@ ClearButton.displayName = "ClearButton";
4884
5032
  Input.displayName = "Input";
4885
5033
  var popoverVariants = tv({
4886
5034
  base: [
5035
+ "oui-popover-content",
4887
5036
  "oui-z-50",
4888
5037
  "oui-w-72",
4889
5038
  "oui-rounded-md",
@@ -5983,7 +6132,7 @@ var checkboxVariants = tailwindVariants.tv({
5983
6132
  variants: {
5984
6133
  color: {
5985
6134
  primary: "oui-border-primary data-[state=checked]:oui-text-base-contrast",
5986
- white: "oui-border-base-contrast-54 "
6135
+ white: "oui-border-base-contrast-54"
5987
6136
  // data-[state=checked]:oui-bg-white/80 data-[state=checked]:oui-text-[rgba(0,0,0,0.88)]
5988
6137
  },
5989
6138
  variant: {
@@ -6021,7 +6170,7 @@ var Checkbox = React70__namespace.forwardRef(({ className, color = "white", vari
6021
6170
  CheckboxIcon,
6022
6171
  {
6023
6172
  className: tailwindVariants.cnBase(
6024
- color === "primary" ? "oui-text-primary" : "oui-text-white"
6173
+ color === "primary" ? "oui-text-primary" : "oui-text-base-contrast"
6025
6174
  )
6026
6175
  }
6027
6176
  ) : /* @__PURE__ */ jsxRuntime.jsx(
@@ -6062,6 +6211,7 @@ var CheckboxIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
6062
6211
  var switchVariants = tailwindVariants.tv({
6063
6212
  slots: {
6064
6213
  root: [
6214
+ "oui-switch",
6065
6215
  "peer",
6066
6216
  "oui-inline-flex",
6067
6217
  "oui-h-[16px]",
@@ -6090,8 +6240,9 @@ var switchVariants = tailwindVariants.tv({
6090
6240
  "oui-h-[10px]",
6091
6241
  "oui-w-[10px]",
6092
6242
  "oui-rounded-full",
6093
- // "oui-bg-white/80",
6094
- "oui-bg-primary-contrast",
6243
+ // hardcode white display better than primary-contrast, because primary-contrast is too dark in light mode
6244
+ "oui-bg-white",
6245
+ // "oui-bg-primary-contrast",
6095
6246
  "oui-shadow-lg",
6096
6247
  "oui-ring-0",
6097
6248
  "oui-transition-transform",
@@ -6358,135 +6509,329 @@ function useSort(props) {
6358
6509
  }, [sorting, onSort]);
6359
6510
  return [sorting, setSorting];
6360
6511
  }
6361
- function useWrap(deps) {
6362
- const wrapRef = React70.useRef(null);
6363
- React70.useEffect(() => {
6364
- if (!wrapRef.current) return;
6365
- const bgColor = window.getComputedStyle(wrapRef.current).backgroundColor;
6366
- wrapRef.current.style.setProperty("--oui-table-background-color", bgColor);
6367
- }, deps);
6368
- return wrapRef;
6369
- }
6370
- var alignVariants = tailwindVariants.tv({
6371
- variants: {
6372
- align: {
6373
- left: "oui-text-left",
6374
- center: "oui-text-center",
6375
- right: "oui-text-right"
6512
+ function useMediaQuery(query) {
6513
+ const getMatches = (query2) => {
6514
+ if (typeof window !== "undefined") {
6515
+ return window.matchMedia(query2).matches;
6376
6516
  }
6377
- },
6378
- defaultVariants: {
6379
- align: "left"
6380
- }
6381
- });
6382
- var TableCell = (props) => {
6383
- const { cell } = props;
6384
- const { original: record, index } = cell.row;
6385
- const { formatter, render, rule, textProps, numeralProps } = cell.column.columnDef.meta || {};
6386
- let value = cell.getValue();
6387
- if (typeof formatter === "function") {
6388
- value = formatter(value, record, index);
6389
- }
6390
- if (typeof render === "function") {
6391
- return render(value, record, index, cell);
6517
+ return false;
6518
+ };
6519
+ const [matches, setMatches] = React70.useState(getMatches(query));
6520
+ function handleChange() {
6521
+ setMatches(getMatches(query));
6392
6522
  }
6393
- if (typeof rule !== "undefined") {
6394
- if (isTextRule(rule)) {
6395
- const _textProps = typeof textProps === "function" ? textProps(value, record, index) : textProps;
6396
- return /* @__PURE__ */ jsxRuntime.jsx(FormattedText, { rule, ..._textProps, children: value });
6397
- }
6398
- if (isNumeralRule(rule)) {
6399
- const _numeralProps = typeof numeralProps === "function" ? numeralProps(value, record, index) : numeralProps;
6400
- return /* @__PURE__ */ jsxRuntime.jsx(Numeral, { rule, ..._numeralProps, children: value });
6523
+ React70.useEffect(() => {
6524
+ const matchMedia = window?.matchMedia(query);
6525
+ handleChange();
6526
+ if (matchMedia?.addListener) {
6527
+ matchMedia?.addListener(handleChange);
6528
+ } else {
6529
+ matchMedia?.addEventListener?.("change", handleChange);
6401
6530
  }
6402
- }
6403
- return reactTable.flexRender(cell.column.columnDef.cell, cell.getContext());
6404
- };
6405
- function getColumnPinningProps(column, isHeader) {
6406
- const isPinned = column.getIsPinned();
6407
- const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
6408
- const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
6409
- const style = {
6410
- left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
6411
- right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
6412
- width: column.getSize()
6413
- };
6414
- const contentCls = tailwindVariants.cnBase(
6415
- isPinned ? "oui-sticky" : "oui-relative",
6416
- isPinned ? "oui-z-[1]" : "oui-z-0",
6417
- isPinned && "oui-bg-[var(--oui-table-background-color)]"
6418
- );
6419
- const shadowCls = tailwindVariants.cnBase(
6420
- "before:oui-block before:oui-absolute",
6421
- "before:oui-w-[32px] before:oui-h-full",
6422
- "before:oui-top-0 before:oui-z-[-1]",
6423
- "before:oui-bg-[linear-gradient(90deg,rgba(var(--oui-color-base-10)_/_0.80)_0%,rgba(var(--oui-color-base-10)_/_0.36)_65%,rgba(var(--oui-color-base-10)_/_0.00)_100%)]"
6424
- );
6425
- const leftShadow = isLastLeftPinnedColumn && tailwindVariants.cnBase(shadowCls, "before:oui-right-[-32px]");
6426
- const rightShadow = isFirstRightPinnedColumn && tailwindVariants.cnBase(shadowCls, "before:oui-left-[-32px] before:oui-rotate-180");
6531
+ return () => {
6532
+ if (matchMedia?.removeListener) {
6533
+ matchMedia?.removeListener(handleChange);
6534
+ } else {
6535
+ matchMedia?.removeEventListener?.("change", handleChange);
6536
+ }
6537
+ };
6538
+ }, [query]);
6539
+ return matches;
6540
+ }
6541
+
6542
+ // src/hooks/useScreen.ts
6543
+ function useScreen() {
6544
+ const isMobile = useMediaQuery("(max-width: 768px)");
6427
6545
  return {
6428
- style,
6429
- classNames: {
6430
- content: contentCls,
6431
- leftShadow,
6432
- rightShadow
6433
- }
6546
+ isMobile,
6547
+ isDesktop: !isMobile
6434
6548
  };
6435
6549
  }
6436
- var TableBody = (props) => {
6437
- return /* @__PURE__ */ jsxRuntime.jsx(
6438
- "tbody",
6439
- {
6440
- className: tailwindVariants.cnBase(
6441
- "oui-table-tbody oui-relative",
6442
- "oui-text-base-contrast-80",
6443
- props.className
6444
- ),
6445
- "data-testid": props.testId,
6446
- children: props.rows.map((row) => {
6447
- const { className, onClick, ...rest } = typeof props.onRow === "function" ? props.onRow(row.original, row.index, row) || {} : {};
6448
- const expandView = row.getIsExpanded() && /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "oui-table-expand-tr oui-z-0 [&>td:first-child]:oui-pl-3 [&>td:last-child]:oui-pr-3", children: /* @__PURE__ */ jsxRuntime.jsx(
6449
- "td",
6450
- {
6451
- className: "oui-table-expand-td",
6452
- colSpan: row.getVisibleCells().length,
6453
- children: props.expandRowRender?.(row, row.index)
6454
- }
6455
- ) });
6456
- const rowView = /* @__PURE__ */ jsxRuntime.jsxs(React70.Fragment, { children: [
6457
- /* @__PURE__ */ jsxRuntime.jsx(
6458
- "tr",
6459
- {
6460
- className: tailwindVariants.cnBase(
6461
- "oui-table-tbody-tr oui-group oui-h-10",
6462
- "[&>td:first-child]:oui-pl-3 [&>td:last-child]:oui-pr-3",
6463
- typeof onClick === "function" && "oui-cursor-pointer",
6464
- props.bordered && "oui-border-b oui-border-b-line-4",
6465
- className
6466
- ),
6467
- onClick,
6468
- ...rest,
6469
- children: row.getVisibleCells().map((cell) => {
6470
- const column = cell.column;
6471
- const { style: pinStyle, classNames: pinClassNames } = getColumnPinningProps(column);
6472
- const { align, className: rowClassName } = column.columnDef.meta || {};
6473
- const {
6474
- style: cellStyle,
6475
- className: cellClassName,
6476
- children,
6477
- ...rest2
6478
- } = typeof props.onCell === "function" ? props.onCell(cell.column, row.original, row.index, cell) || {} : {};
6479
- const cellView = children !== void 0 ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
6480
- /* @__PURE__ */ jsxRuntime.jsx(TableCell, { cell }),
6481
- /* @__PURE__ */ jsxRuntime.jsx(
6482
- CellHover,
6483
- {
6484
- selected: row.getIsSelected(),
6485
- isFirst: column.getIsFirstColumn(),
6486
- isLast: column.getIsLastColumn()
6487
- }
6488
- )
6489
- ] });
6550
+ function useObserverElement(element, callback) {
6551
+ React70.useEffect(() => {
6552
+ if (!element) {
6553
+ return;
6554
+ }
6555
+ const resizeObserver = new ResizeObserver((entries) => {
6556
+ for (const entry of entries) {
6557
+ callback(entry);
6558
+ }
6559
+ });
6560
+ resizeObserver.observe(element);
6561
+ return () => {
6562
+ resizeObserver.unobserve(element);
6563
+ };
6564
+ }, [element]);
6565
+ }
6566
+ function useLongPress(callback, longPressTime = 600) {
6567
+ const timeoutRef = React70.useRef(null);
6568
+ const targetRef = React70.useRef(null);
6569
+ const startPositionRef = React70.useRef(null);
6570
+ const isLongPressTriggeredRef = React70.useRef(false);
6571
+ const clearLongPress = React70.useCallback(() => {
6572
+ if (timeoutRef.current) {
6573
+ clearTimeout(timeoutRef.current);
6574
+ timeoutRef.current = null;
6575
+ }
6576
+ targetRef.current = null;
6577
+ startPositionRef.current = null;
6578
+ isLongPressTriggeredRef.current = false;
6579
+ }, []);
6580
+ const startLongPress = React70.useCallback(
6581
+ (e) => {
6582
+ clearLongPress();
6583
+ if ("touches" in e) {
6584
+ e.preventDefault();
6585
+ }
6586
+ targetRef.current = e.currentTarget;
6587
+ const clientX = "touches" in e ? e.touches[0]?.clientX : e.clientX;
6588
+ const clientY = "touches" in e ? e.touches[0]?.clientY : e.clientY;
6589
+ startPositionRef.current = { x: clientX, y: clientY };
6590
+ isLongPressTriggeredRef.current = false;
6591
+ timeoutRef.current = setTimeout(() => {
6592
+ if (targetRef.current && startPositionRef.current) {
6593
+ isLongPressTriggeredRef.current = true;
6594
+ callback();
6595
+ }
6596
+ clearLongPress();
6597
+ }, longPressTime);
6598
+ },
6599
+ [callback, longPressTime, clearLongPress]
6600
+ );
6601
+ const handleMouseDown = React70.useCallback(
6602
+ (e) => {
6603
+ if (e.button !== 0) return;
6604
+ startLongPress(e);
6605
+ },
6606
+ [startLongPress]
6607
+ );
6608
+ const handleMouseUp = React70.useCallback(() => {
6609
+ clearLongPress();
6610
+ }, [clearLongPress]);
6611
+ const handleMouseMove = React70.useCallback(
6612
+ (e) => {
6613
+ if (isLongPressTriggeredRef.current) return;
6614
+ if (startPositionRef.current) {
6615
+ const deltaX = Math.abs(e.clientX - startPositionRef.current.x);
6616
+ const deltaY = Math.abs(e.clientY - startPositionRef.current.y);
6617
+ const threshold = 5;
6618
+ if (deltaX > threshold || deltaY > threshold) {
6619
+ clearLongPress();
6620
+ }
6621
+ }
6622
+ },
6623
+ [clearLongPress]
6624
+ );
6625
+ const handleMouseLeave = React70.useCallback(() => {
6626
+ clearLongPress();
6627
+ }, [clearLongPress]);
6628
+ const handleContextMenu = React70.useCallback((e) => {
6629
+ if (timeoutRef.current || isLongPressTriggeredRef.current) {
6630
+ e.preventDefault();
6631
+ e.stopPropagation();
6632
+ }
6633
+ }, []);
6634
+ const handleTouchStart = React70.useCallback(
6635
+ (e) => {
6636
+ startLongPress(e);
6637
+ },
6638
+ [startLongPress]
6639
+ );
6640
+ const handleTouchEnd = React70.useCallback(() => {
6641
+ clearLongPress();
6642
+ }, [clearLongPress]);
6643
+ const handleTouchMove = React70.useCallback(
6644
+ (e) => {
6645
+ if (timeoutRef.current) {
6646
+ e.preventDefault();
6647
+ }
6648
+ if (isLongPressTriggeredRef.current) return;
6649
+ if (startPositionRef.current && e.touches[0]) {
6650
+ const deltaX = Math.abs(
6651
+ e.touches[0].clientX - startPositionRef.current.x
6652
+ );
6653
+ const deltaY = Math.abs(
6654
+ e.touches[0].clientY - startPositionRef.current.y
6655
+ );
6656
+ const threshold = 5;
6657
+ if (deltaX > threshold || deltaY > threshold) {
6658
+ clearLongPress();
6659
+ }
6660
+ }
6661
+ },
6662
+ [clearLongPress]
6663
+ );
6664
+ const handleTouchCancel = React70.useCallback(() => {
6665
+ clearLongPress();
6666
+ }, [clearLongPress]);
6667
+ return {
6668
+ onMouseDown: handleMouseDown,
6669
+ onMouseUp: handleMouseUp,
6670
+ onMouseMove: handleMouseMove,
6671
+ onMouseLeave: handleMouseLeave,
6672
+ onContextMenu: handleContextMenu,
6673
+ onTouchStart: handleTouchStart,
6674
+ onTouchEnd: handleTouchEnd,
6675
+ onTouchMove: handleTouchMove,
6676
+ onTouchCancel: handleTouchCancel
6677
+ };
6678
+ }
6679
+ var useThemeAttribute = () => {
6680
+ const [themeAttribute, setThemeAttribute] = React70.useState("");
6681
+ React70.useEffect(() => {
6682
+ setThemeAttribute(
6683
+ document.documentElement.getAttribute("data-oui-theme") ?? ""
6684
+ );
6685
+ const observer = new MutationObserver((mutations) => {
6686
+ for (const mutation of mutations) {
6687
+ if (mutation.type === "attributes" && mutation.attributeName === "data-oui-theme") {
6688
+ setThemeAttribute(
6689
+ document.documentElement.getAttribute("data-oui-theme") ?? ""
6690
+ );
6691
+ break;
6692
+ }
6693
+ }
6694
+ });
6695
+ observer.observe(document.documentElement, {
6696
+ attributes: true,
6697
+ attributeFilter: ["data-oui-theme"]
6698
+ });
6699
+ return () => observer?.disconnect();
6700
+ }, []);
6701
+ return themeAttribute;
6702
+ };
6703
+
6704
+ // src/table/hooks/useWrap.ts
6705
+ function useWrap(deps) {
6706
+ const wrapRef = React70.useRef(null);
6707
+ const themeAttribute = useThemeAttribute();
6708
+ React70.useEffect(() => {
6709
+ if (!wrapRef.current) return;
6710
+ const bgColor = window.getComputedStyle(wrapRef.current).backgroundColor;
6711
+ wrapRef.current.style.setProperty("--oui-table-background-color", bgColor);
6712
+ }, [...deps, themeAttribute]);
6713
+ return wrapRef;
6714
+ }
6715
+ var alignVariants = tailwindVariants.tv({
6716
+ variants: {
6717
+ align: {
6718
+ left: "oui-text-left",
6719
+ center: "oui-text-center",
6720
+ right: "oui-text-right"
6721
+ }
6722
+ },
6723
+ defaultVariants: {
6724
+ align: "left"
6725
+ }
6726
+ });
6727
+ var TableCell = (props) => {
6728
+ const { cell } = props;
6729
+ const { original: record, index } = cell.row;
6730
+ const { formatter, render, rule, textProps, numeralProps } = cell.column.columnDef.meta || {};
6731
+ let value = cell.getValue();
6732
+ if (typeof formatter === "function") {
6733
+ value = formatter(value, record, index);
6734
+ }
6735
+ if (typeof render === "function") {
6736
+ return render(value, record, index, cell);
6737
+ }
6738
+ if (typeof rule !== "undefined") {
6739
+ if (isTextRule(rule)) {
6740
+ const _textProps = typeof textProps === "function" ? textProps(value, record, index) : textProps;
6741
+ return /* @__PURE__ */ jsxRuntime.jsx(FormattedText, { rule, ..._textProps, children: value });
6742
+ }
6743
+ if (isNumeralRule(rule)) {
6744
+ const _numeralProps = typeof numeralProps === "function" ? numeralProps(value, record, index) : numeralProps;
6745
+ return /* @__PURE__ */ jsxRuntime.jsx(Numeral, { rule, ..._numeralProps, children: value });
6746
+ }
6747
+ }
6748
+ return reactTable.flexRender(cell.column.columnDef.cell, cell.getContext());
6749
+ };
6750
+ function getColumnPinningProps(column, isHeader) {
6751
+ const isPinned = column.getIsPinned();
6752
+ const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
6753
+ const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
6754
+ const style = {
6755
+ left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
6756
+ right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
6757
+ width: column.getSize()
6758
+ };
6759
+ const contentCls = tailwindVariants.cnBase(
6760
+ isPinned ? "oui-sticky" : "oui-relative",
6761
+ isPinned ? "oui-z-[1]" : "oui-z-0",
6762
+ isPinned && "oui-bg-[var(--oui-table-background-color)]"
6763
+ );
6764
+ const shadowCls = tailwindVariants.cnBase(
6765
+ "before:oui-block before:oui-absolute",
6766
+ "before:oui-w-[32px] before:oui-h-full",
6767
+ "before:oui-top-0 before:oui-z-[-1]",
6768
+ "before:oui-bg-[linear-gradient(90deg,rgba(var(--oui-color-base-10)_/_0.80)_0%,rgba(var(--oui-color-base-10)_/_0.36)_65%,rgba(var(--oui-color-base-10)_/_0.00)_100%)]"
6769
+ );
6770
+ const leftShadow = isLastLeftPinnedColumn && tailwindVariants.cnBase(shadowCls, "before:oui-right-[-32px]");
6771
+ const rightShadow = isFirstRightPinnedColumn && tailwindVariants.cnBase(shadowCls, "before:oui-left-[-32px] before:oui-rotate-180");
6772
+ return {
6773
+ style,
6774
+ classNames: {
6775
+ content: contentCls,
6776
+ leftShadow,
6777
+ rightShadow
6778
+ }
6779
+ };
6780
+ }
6781
+ var TableBody = (props) => {
6782
+ return /* @__PURE__ */ jsxRuntime.jsx(
6783
+ "tbody",
6784
+ {
6785
+ className: tailwindVariants.cnBase(
6786
+ "oui-table-tbody oui-relative",
6787
+ "oui-text-base-contrast-80",
6788
+ props.className
6789
+ ),
6790
+ "data-testid": props.testId,
6791
+ children: props.rows.map((row) => {
6792
+ const { className, onClick, ...rest } = typeof props.onRow === "function" ? props.onRow(row.original, row.index, row) || {} : {};
6793
+ const expandView = row.getIsExpanded() && /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "oui-table-expand-tr oui-z-0 [&>td:first-child]:oui-pl-3 [&>td:last-child]:oui-pr-3", children: /* @__PURE__ */ jsxRuntime.jsx(
6794
+ "td",
6795
+ {
6796
+ className: "oui-table-expand-td",
6797
+ colSpan: row.getVisibleCells().length,
6798
+ children: props.expandRowRender?.(row, row.index)
6799
+ }
6800
+ ) });
6801
+ const rowView = /* @__PURE__ */ jsxRuntime.jsxs(React70.Fragment, { children: [
6802
+ /* @__PURE__ */ jsxRuntime.jsx(
6803
+ "tr",
6804
+ {
6805
+ className: tailwindVariants.cnBase(
6806
+ "oui-table-tbody-tr oui-group oui-h-10",
6807
+ "[&>td:first-child]:oui-pl-3 [&>td:last-child]:oui-pr-3",
6808
+ typeof onClick === "function" && "oui-cursor-pointer",
6809
+ props.bordered && "oui-border-b oui-border-b-line-4",
6810
+ className
6811
+ ),
6812
+ onClick,
6813
+ ...rest,
6814
+ children: row.getVisibleCells().map((cell) => {
6815
+ const column = cell.column;
6816
+ const { style: pinStyle, classNames: pinClassNames } = getColumnPinningProps(column);
6817
+ const { align, className: rowClassName } = column.columnDef.meta || {};
6818
+ const {
6819
+ style: cellStyle,
6820
+ className: cellClassName,
6821
+ children,
6822
+ ...rest2
6823
+ } = typeof props.onCell === "function" ? props.onCell(cell.column, row.original, row.index, cell) || {} : {};
6824
+ const cellView = children !== void 0 ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
6825
+ /* @__PURE__ */ jsxRuntime.jsx(TableCell, { cell }),
6826
+ /* @__PURE__ */ jsxRuntime.jsx(
6827
+ CellHover,
6828
+ {
6829
+ selected: row.getIsSelected(),
6830
+ isFirst: column.getIsFirstColumn(),
6831
+ isLast: column.getIsLastColumn()
6832
+ }
6833
+ )
6834
+ ] });
6490
6835
  return /* @__PURE__ */ jsxRuntime.jsx(
6491
6836
  "td",
6492
6837
  {
@@ -6553,9 +6898,8 @@ var SortingIcon2 = () => {
6553
6898
  return /* @__PURE__ */ jsxRuntime.jsx(BaseSortIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(
6554
6899
  "path",
6555
6900
  {
6556
- d: "M5 1.042a.47.47 0 0 0-.338.135L2.166 3.844c-.206.22-.005.531.338.531h4.992c.342 0 .543-.311.337-.531L5.338 1.177A.47.47 0 0 0 5 1.042m0 7.916a.47.47 0 0 1-.338-.135L2.166 6.156c-.206-.22-.005-.531.338-.531h4.992c.342 0 .543.311.337.531L5.338 8.823A.47.47 0 0 1 5 8.958",
6557
- fill: "#fff",
6558
- fillOpacity: ".2"
6901
+ className: "oui-fill-base-contrast-20",
6902
+ d: "M5 1.042a.47.47 0 0 0-.338.135L2.166 3.844c-.206.22-.005.531.338.531h4.992c.342 0 .543-.311.337-.531L5.338 1.177A.47.47 0 0 0 5 1.042m0 7.916a.47.47 0 0 1-.338-.135L2.166 6.156c-.206-.22-.005-.531.338-.531h4.992c.342 0 .543.311.337.531L5.338 8.823A.47.47 0 0 1 5 8.958"
6559
6903
  }
6560
6904
  ) });
6561
6905
  };
@@ -6564,17 +6908,15 @@ var AscendingIcon = () => {
6564
6908
  /* @__PURE__ */ jsxRuntime.jsx(
6565
6909
  "path",
6566
6910
  {
6567
- d: "M5 1.042a.47.47 0 0 0-.338.135L2.166 3.844c-.206.22-.005.531.338.531h4.992c.342 0 .543-.311.337-.531L5.338 1.177A.47.47 0 0 0 5 1.042",
6568
- fill: "#fff",
6569
- fillOpacity: ".8"
6911
+ className: "oui-fill-base-contrast-80",
6912
+ d: "M5 1.042a.47.47 0 0 0-.338.135L2.166 3.844c-.206.22-.005.531.338.531h4.992c.342 0 .543-.311.337-.531L5.338 1.177A.47.47 0 0 0 5 1.042"
6570
6913
  }
6571
6914
  ),
6572
6915
  /* @__PURE__ */ jsxRuntime.jsx(
6573
6916
  "path",
6574
6917
  {
6575
- d: "M5 8.958a.47.47 0 0 1-.338-.135L2.166 6.156c-.206-.22-.005-.531.338-.531h4.992c.342 0 .543.311.337.531L5.338 8.823A.47.47 0 0 1 5 8.958",
6576
- fill: "#fff",
6577
- fillOpacity: ".2"
6918
+ className: "oui-fill-base-contrast-20",
6919
+ d: "M5 8.958a.47.47 0 0 1-.338-.135L2.166 6.156c-.206-.22-.005-.531.338-.531h4.992c.342 0 .543.311.337.531L5.338 8.823A.47.47 0 0 1 5 8.958"
6578
6920
  }
6579
6921
  )
6580
6922
  ] });
@@ -6584,17 +6926,15 @@ var DescendingIcon = () => {
6584
6926
  /* @__PURE__ */ jsxRuntime.jsx(
6585
6927
  "path",
6586
6928
  {
6587
- d: "M5 1.042a.47.47 0 0 0-.338.135L2.166 3.844c-.206.22-.005.531.338.531h4.992c.342 0 .543-.311.337-.531L5.338 1.177A.47.47 0 0 0 5 1.042",
6588
- fill: "#fff",
6589
- fillOpacity: ".2"
6929
+ className: "oui-fill-base-contrast-20",
6930
+ d: "M5 1.042a.47.47 0 0 0-.338.135L2.166 3.844c-.206.22-.005.531.338.531h4.992c.342 0 .543-.311.337-.531L5.338 1.177A.47.47 0 0 0 5 1.042"
6590
6931
  }
6591
6932
  ),
6592
6933
  /* @__PURE__ */ jsxRuntime.jsx(
6593
6934
  "path",
6594
6935
  {
6595
- d: "M5 8.958a.47.47 0 0 1-.338-.135L2.166 6.156c-.206-.22-.005-.531.338-.531h4.992c.342 0 .543.311.337.531L5.338 8.823A.47.47 0 0 1 5 8.958",
6596
- fill: "#fff",
6597
- fillOpacity: ".8"
6936
+ className: "oui-fill-base-contrast-80",
6937
+ d: "M5 8.958a.47.47 0 0 1-.338-.135L2.166 6.156c-.206-.22-.005-.531.338-.531h4.992c.342 0 .543.311.337.531L5.338 8.823A.47.47 0 0 1 5 8.958"
6598
6938
  }
6599
6939
  )
6600
6940
  ] });
@@ -7049,44 +7389,44 @@ var OrderlyExtensionRegistry = class _OrderlyExtensionRegistry {
7049
7389
  }
7050
7390
  extensionMap = /* @__PURE__ */ new Map();
7051
7391
  // private formatterMap: Map<string, Function> = new Map();
7052
- register(plugin) {
7053
- if (!plugin.builder) ;
7054
- for (let index = 0; index < plugin.positions.length; index++) {
7055
- if (typeof plugin.builder !== "function") {
7056
- const builder = this.extensionMap.get(plugin.positions[index])?.builder;
7057
- plugin.builder = typeof builder === "undefined" ? (
7392
+ register(plugin3) {
7393
+ if (!plugin3.builder) ;
7394
+ for (let index = 0; index < plugin3.positions.length; index++) {
7395
+ if (typeof plugin3.builder !== "function") {
7396
+ const builder = this.extensionMap.get(plugin3.positions[index])?.builder;
7397
+ plugin3.builder = typeof builder === "undefined" ? (
7058
7398
  // ? DEFAULT_BUILDER
7059
7399
  void 0
7060
7400
  ) : builder;
7061
7401
  }
7062
- const pos = plugin.positions[index];
7063
- this.registerToPosition(pos, plugin);
7402
+ const pos = plugin3.positions[index];
7403
+ this.registerToPosition(pos, plugin3);
7064
7404
  }
7065
7405
  }
7066
- registerToPosition(position, plugin) {
7406
+ registerToPosition(position, plugin3) {
7067
7407
  if (this.extensionMap.has(position)) {
7068
7408
  const existingPlugin = this.extensionMap.get(position);
7069
7409
  if (!existingPlugin?.__isInternal) {
7070
- if (!existingPlugin?.builder && plugin.__isInternal) {
7071
- this.setBuilder(position, plugin.builder);
7410
+ if (!existingPlugin?.builder && plugin3.__isInternal) {
7411
+ this.setBuilder(position, plugin3.builder);
7072
7412
  }
7073
7413
  return;
7074
7414
  }
7075
- if (!plugin.builder) {
7076
- plugin.builder = existingPlugin.builder;
7415
+ if (!plugin3.builder) {
7416
+ plugin3.builder = existingPlugin.builder;
7077
7417
  }
7078
7418
  }
7079
- this.extensionMap.set(position, plugin);
7419
+ this.extensionMap.set(position, plugin3);
7080
7420
  }
7081
7421
  setBuilder(position, builder) {
7082
- const plugin = this.extensionMap.get(position);
7083
- if (plugin) {
7084
- plugin.builder = builder;
7422
+ const plugin3 = this.extensionMap.get(position);
7423
+ if (plugin3) {
7424
+ plugin3.builder = builder;
7085
7425
  }
7086
7426
  }
7087
- unregister(plugin) {
7088
- for (let index = 0; index < plugin.positions.length; index++) {
7089
- const pos = plugin.positions[index];
7427
+ unregister(plugin3) {
7428
+ for (let index = 0; index < plugin3.positions.length; index++) {
7429
+ const pos = plugin3.positions[index];
7090
7430
  this.unregisterFromPosition(pos);
7091
7431
  }
7092
7432
  }
@@ -7133,9 +7473,9 @@ var NotFound = (props) => {
7133
7473
  // src/plugin/useBuilder.ts
7134
7474
  var useBuilder = (position, props) => {
7135
7475
  const registry = OrderlyExtensionRegistry.getInstance();
7136
- const plugin = registry.getPluginsByPosition(position);
7476
+ const plugin3 = registry.getPluginsByPosition(position);
7137
7477
  return () => {
7138
- return plugin?.builder?.(props) || props;
7478
+ return plugin3?.builder?.(props) || props;
7139
7479
  };
7140
7480
  };
7141
7481
 
@@ -7149,8 +7489,8 @@ var ExtensionSlot = (props) => {
7149
7489
  const elementProps = useExtensionBuilder(position, rest);
7150
7490
  const Ele = React70.useMemo(() => {
7151
7491
  const registry = OrderlyExtensionRegistry.getInstance();
7152
- const plugin = registry.getPluginsByPosition(position);
7153
- return plugin?.render ?? defaultValue ?? NotFound;
7492
+ const plugin3 = registry.getPluginsByPosition(position);
7493
+ return plugin3?.render ?? defaultValue ?? NotFound;
7154
7494
  }, []);
7155
7495
  return /* @__PURE__ */ jsxRuntime.jsx(
7156
7496
  reactErrorBoundary.ErrorBoundary,
@@ -7860,7 +8200,7 @@ var SheetOverlay = React70__namespace.forwardRef(({ className, ...props }, ref)
7860
8200
  DialogPrimitive__namespace.Overlay,
7861
8201
  {
7862
8202
  className: tailwindVariants.cnBase(
7863
- "oui-fixed oui-inset-0 oui-z-50 oui-bg-black/80 data-[state=open]:oui-animate-in data-[state=closed]:oui-animate-out data-[state=closed]:oui-fade-out-0 data-[state=open]:oui-fade-in-0",
8203
+ "oui-sheet-overlay oui-fixed oui-inset-0 oui-z-50 oui-bg-black/80 data-[state=open]:oui-animate-in data-[state=closed]:oui-animate-out data-[state=closed]:oui-fade-out-0 data-[state=open]:oui-fade-in-0",
7864
8204
  className
7865
8205
  ),
7866
8206
  ...props,
@@ -7869,7 +8209,7 @@ var SheetOverlay = React70__namespace.forwardRef(({ className, ...props }, ref)
7869
8209
  ));
7870
8210
  SheetOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
7871
8211
  var sheetVariants = tailwindVariants.tv({
7872
- base: "oui-fixed oui-z-50 oui-gap-4 oui-bg-base-8 oui-px-4 oui-shadow-lg oui-transition oui-ease-in-out data-[state=closed]:oui-duration-260 data-[state=open]:oui-duration-300 data-[state=open]:oui-animate-in data-[state=closed]:oui-animate-out",
8212
+ base: "oui-sheet-content oui-fixed oui-z-50 oui-gap-4 oui-bg-base-8 oui-px-4 oui-shadow-lg oui-transition oui-ease-in-out data-[state=closed]:oui-duration-260 data-[state=open]:oui-duration-300 data-[state=open]:oui-animate-in data-[state=closed]:oui-animate-out",
7873
8213
  variants: {
7874
8214
  side: {
7875
8215
  top: "oui-inset-x-0 oui-top-0 oui-border-b data-[state=closed]:oui-slide-out-to-top data-[state=open]:oui-slide-in-from-top",
@@ -7907,7 +8247,7 @@ var SheetContent = React70__namespace.forwardRef(
7907
8247
  DialogPrimitive__namespace.Close,
7908
8248
  {
7909
8249
  className: tailwindVariants.cnBase(
7910
- "oui-ring-offset-base-700 focus:oui-ring-ring oui-absolute oui-right-4 oui-top-4 oui-z-10 oui-rounded-sm oui-transition-opacity focus:oui-outline-none focus:oui-ring-2 focus:oui-ring-offset-2 active:oui-outline-none focus:orderly-outline-none disabled:oui-pointer-events-none data-[state=open]:oui-bg-secondary",
8250
+ "oui-sheet-close-btn oui-ring-offset-base-700 focus:oui-ring-ring oui-absolute oui-right-4 oui-top-4 oui-z-10 oui-rounded-sm oui-transition-opacity focus:oui-outline-none focus:oui-ring-2 focus:oui-ring-offset-2 active:oui-outline-none focus:orderly-outline-none disabled:oui-pointer-events-none data-[state=open]:oui-bg-secondary",
7911
8251
  props?.closeClassName
7912
8252
  ),
7913
8253
  children: [
@@ -8801,173 +9141,6 @@ var SimpleDialog = (props) => {
8801
9141
  }
8802
9142
  ) });
8803
9143
  };
8804
- function useMediaQuery(query) {
8805
- const getMatches = (query2) => {
8806
- if (typeof window !== "undefined") {
8807
- return window.matchMedia(query2).matches;
8808
- }
8809
- return false;
8810
- };
8811
- const [matches, setMatches] = React70.useState(getMatches(query));
8812
- function handleChange() {
8813
- setMatches(getMatches(query));
8814
- }
8815
- React70.useEffect(() => {
8816
- const matchMedia = window?.matchMedia(query);
8817
- handleChange();
8818
- if (matchMedia?.addListener) {
8819
- matchMedia?.addListener(handleChange);
8820
- } else {
8821
- matchMedia?.addEventListener?.("change", handleChange);
8822
- }
8823
- return () => {
8824
- if (matchMedia?.removeListener) {
8825
- matchMedia?.removeListener(handleChange);
8826
- } else {
8827
- matchMedia?.removeEventListener?.("change", handleChange);
8828
- }
8829
- };
8830
- }, [query]);
8831
- return matches;
8832
- }
8833
-
8834
- // src/hooks/useScreen.ts
8835
- function useScreen() {
8836
- const isMobile = useMediaQuery("(max-width: 768px)");
8837
- return {
8838
- isMobile,
8839
- isDesktop: !isMobile
8840
- };
8841
- }
8842
- function useObserverElement(element, callback) {
8843
- React70.useEffect(() => {
8844
- if (!element) {
8845
- return;
8846
- }
8847
- const resizeObserver = new ResizeObserver((entries) => {
8848
- for (const entry of entries) {
8849
- callback(entry);
8850
- }
8851
- });
8852
- resizeObserver.observe(element);
8853
- return () => {
8854
- resizeObserver.unobserve(element);
8855
- };
8856
- }, [element]);
8857
- }
8858
- function useLongPress(callback, longPressTime = 600) {
8859
- const timeoutRef = React70.useRef(null);
8860
- const targetRef = React70.useRef(null);
8861
- const startPositionRef = React70.useRef(null);
8862
- const isLongPressTriggeredRef = React70.useRef(false);
8863
- const clearLongPress = React70.useCallback(() => {
8864
- if (timeoutRef.current) {
8865
- clearTimeout(timeoutRef.current);
8866
- timeoutRef.current = null;
8867
- }
8868
- targetRef.current = null;
8869
- startPositionRef.current = null;
8870
- isLongPressTriggeredRef.current = false;
8871
- }, []);
8872
- const startLongPress = React70.useCallback(
8873
- (e) => {
8874
- clearLongPress();
8875
- if ("touches" in e) {
8876
- e.preventDefault();
8877
- }
8878
- targetRef.current = e.currentTarget;
8879
- const clientX = "touches" in e ? e.touches[0]?.clientX : e.clientX;
8880
- const clientY = "touches" in e ? e.touches[0]?.clientY : e.clientY;
8881
- startPositionRef.current = { x: clientX, y: clientY };
8882
- isLongPressTriggeredRef.current = false;
8883
- timeoutRef.current = setTimeout(() => {
8884
- if (targetRef.current && startPositionRef.current) {
8885
- isLongPressTriggeredRef.current = true;
8886
- callback();
8887
- }
8888
- clearLongPress();
8889
- }, longPressTime);
8890
- },
8891
- [callback, longPressTime, clearLongPress]
8892
- );
8893
- const handleMouseDown = React70.useCallback(
8894
- (e) => {
8895
- if (e.button !== 0) return;
8896
- startLongPress(e);
8897
- },
8898
- [startLongPress]
8899
- );
8900
- const handleMouseUp = React70.useCallback(() => {
8901
- clearLongPress();
8902
- }, [clearLongPress]);
8903
- const handleMouseMove = React70.useCallback(
8904
- (e) => {
8905
- if (isLongPressTriggeredRef.current) return;
8906
- if (startPositionRef.current) {
8907
- const deltaX = Math.abs(e.clientX - startPositionRef.current.x);
8908
- const deltaY = Math.abs(e.clientY - startPositionRef.current.y);
8909
- const threshold = 5;
8910
- if (deltaX > threshold || deltaY > threshold) {
8911
- clearLongPress();
8912
- }
8913
- }
8914
- },
8915
- [clearLongPress]
8916
- );
8917
- const handleMouseLeave = React70.useCallback(() => {
8918
- clearLongPress();
8919
- }, [clearLongPress]);
8920
- const handleContextMenu = React70.useCallback((e) => {
8921
- if (timeoutRef.current || isLongPressTriggeredRef.current) {
8922
- e.preventDefault();
8923
- e.stopPropagation();
8924
- }
8925
- }, []);
8926
- const handleTouchStart = React70.useCallback(
8927
- (e) => {
8928
- startLongPress(e);
8929
- },
8930
- [startLongPress]
8931
- );
8932
- const handleTouchEnd = React70.useCallback(() => {
8933
- clearLongPress();
8934
- }, [clearLongPress]);
8935
- const handleTouchMove = React70.useCallback(
8936
- (e) => {
8937
- if (timeoutRef.current) {
8938
- e.preventDefault();
8939
- }
8940
- if (isLongPressTriggeredRef.current) return;
8941
- if (startPositionRef.current && e.touches[0]) {
8942
- const deltaX = Math.abs(
8943
- e.touches[0].clientX - startPositionRef.current.x
8944
- );
8945
- const deltaY = Math.abs(
8946
- e.touches[0].clientY - startPositionRef.current.y
8947
- );
8948
- const threshold = 5;
8949
- if (deltaX > threshold || deltaY > threshold) {
8950
- clearLongPress();
8951
- }
8952
- }
8953
- },
8954
- [clearLongPress]
8955
- );
8956
- const handleTouchCancel = React70.useCallback(() => {
8957
- clearLongPress();
8958
- }, [clearLongPress]);
8959
- return {
8960
- onMouseDown: handleMouseDown,
8961
- onMouseUp: handleMouseUp,
8962
- onMouseMove: handleMouseMove,
8963
- onMouseLeave: handleMouseLeave,
8964
- onContextMenu: handleContextMenu,
8965
- onTouchStart: handleTouchStart,
8966
- onTouchEnd: handleTouchEnd,
8967
- onTouchMove: handleTouchMove,
8968
- onTouchCancel: handleTouchCancel
8969
- };
8970
- }
8971
9144
  var AlertDialog = (props) => {
8972
9145
  const [locale] = useLocale("dialog");
8973
9146
  const {
@@ -9690,12 +9863,14 @@ function downloadCSV(data, filename = `${Date.now()}.csv`) {
9690
9863
  var tabsVariants = tv({
9691
9864
  slots: {
9692
9865
  list: [
9866
+ "oui-tabs-list",
9693
9867
  "oui-header-list",
9694
9868
  "oui-flex",
9695
9869
  "oui-items-center"
9696
9870
  // "oui-px-1",
9697
9871
  ],
9698
9872
  content: [
9873
+ "oui-tabs-content",
9699
9874
  "oui-ring-offset-background",
9700
9875
  "focus-visible:oui-outline-none",
9701
9876
  "focus-visible:oui-ring-2",
@@ -9704,6 +9879,7 @@ var tabsVariants = tv({
9704
9879
  ],
9705
9880
  trigger: [
9706
9881
  "oui-tab-trigger",
9882
+ "oui-tabs-trigger",
9707
9883
  "oui-inline-flex",
9708
9884
  "oui-items-center",
9709
9885
  "oui-justify-center",
@@ -9741,7 +9917,7 @@ var tabsVariants = tv({
9741
9917
  "data-[state=active]:after:oui-content-['']",
9742
9918
  "data-[state=active]:after:oui-block",
9743
9919
  "data-[state=active]:after:oui-h-[3px]",
9744
- "data-[state=active]:after:oui-bg-white",
9920
+ "data-[state=active]:after:oui-bg-base-contrast",
9745
9921
  "data-[state=active]:after:oui-absolute",
9746
9922
  "data-[state=active]:after:oui-rounded-full",
9747
9923
  "data-[state=active]:after:-oui-bottom-0",
@@ -10071,8 +10247,10 @@ var Tabs = (props) => {
10071
10247
  value,
10072
10248
  ...rest
10073
10249
  } = props;
10074
- const tabsOverrides = getComponentTheme("tabs", { variant: "contained" });
10075
- const tabsVariant = variant || tabsOverrides.variant;
10250
+ const tabsOverrides = getComponentTheme("tabs", {
10251
+ variant: variant ?? "contained"
10252
+ });
10253
+ const tabsVariant = tabsOverrides.variant;
10076
10254
  const [tabList, setTabList] = React70.useState({});
10077
10255
  const registerTab = React70.useCallback((config) => {
10078
10256
  setTabList((prev) => {
@@ -10107,7 +10285,7 @@ var Tabs = (props) => {
10107
10285
  variant: tabsVariant,
10108
10286
  size: rest.size,
10109
10287
  "data-testid": tab.testid,
10110
- className: classNames?.trigger,
10288
+ className: tailwindVariants.cnBase(classNames?.trigger, tab.classNames?.trigger),
10111
10289
  children: tab.title
10112
10290
  },
10113
10291
  key
@@ -10158,7 +10336,7 @@ var Tabs = (props) => {
10158
10336
  };
10159
10337
  Tabs.displayName = "Tabs";
10160
10338
  var TabPanel = (props) => {
10161
- const { title, value, icon, className, style, testid, children } = props;
10339
+ const { title, value, icon, style, testid, children, className, classNames } = props;
10162
10340
  const { registerTab, unregisterTab } = React70.useContext(TabsContext);
10163
10341
  React70.useEffect(() => {
10164
10342
  const tabConfig = {
@@ -10167,6 +10345,7 @@ var TabPanel = (props) => {
10167
10345
  icon,
10168
10346
  testid,
10169
10347
  className,
10348
+ classNames,
10170
10349
  style,
10171
10350
  content: children
10172
10351
  };
@@ -10174,7 +10353,7 @@ var TabPanel = (props) => {
10174
10353
  return () => {
10175
10354
  unregisterTab(tabConfig);
10176
10355
  };
10177
- }, [children, className, style, icon, testid, title, value]);
10356
+ }, [children, style, icon, testid, title, value, className, classNames]);
10178
10357
  return null;
10179
10358
  };
10180
10359
  if (process.env.NODE_ENV !== "production") {
@@ -10641,44 +10820,71 @@ var Slider = BaseSlider;
10641
10820
  Slider.single = SingleSlider;
10642
10821
  var ToastErrorIcon = React70__namespace.default.forwardRef(
10643
10822
  (props, ref) => {
10644
- const { opacity = 1, viewBox = "0 0 20 20", ...rest } = props;
10645
- return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, viewBox, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
10646
- "path",
10823
+ const { opacity = 1, viewBox = "0 0 20 20", className, ...rest } = props;
10824
+ return /* @__PURE__ */ jsxRuntime.jsx(
10825
+ BaseIcon,
10647
10826
  {
10648
- d: "M10 1.628a8.333 8.333 0 1 0-.001 16.666 8.333 8.333 0 0 0 0-16.666m-2.5 5c.212 0 .435.071.598.234L10 8.762l1.9-1.9a.85.85 0 0 1 .6-.234c.213 0 .436.071.6.234a.86.86 0 0 1 0 1.198l-1.902 1.901 1.901 1.9a.86.86 0 0 1 0 1.2.86.86 0 0 1-1.198 0L10 11.158 8.097 13.06a.86.86 0 0 1-1.198 0 .857.857 0 0 1 0-1.198L8.8 9.96l-1.9-1.9a.857.857 0 0 1 0-1.2.84.84 0 0 1 .6-.233",
10649
- fill: "#FF447C",
10650
- fillOpacity: opacity
10827
+ ref,
10828
+ viewBox,
10829
+ fill: "currentColor",
10830
+ className: tailwindVariants.cnBase(className, "oui-fill-danger"),
10831
+ ...rest,
10832
+ children: /* @__PURE__ */ jsxRuntime.jsx(
10833
+ "path",
10834
+ {
10835
+ d: "M10 1.628a8.333 8.333 0 1 0-.001 16.666 8.333 8.333 0 0 0 0-16.666m-2.5 5c.212 0 .435.071.598.234L10 8.762l1.9-1.9a.85.85 0 0 1 .6-.234c.213 0 .436.071.6.234a.86.86 0 0 1 0 1.198l-1.902 1.901 1.901 1.9a.86.86 0 0 1 0 1.2.86.86 0 0 1-1.198 0L10 11.158 8.097 13.06a.86.86 0 0 1-1.198 0 .857.857 0 0 1 0-1.198L8.8 9.96l-1.9-1.9a.857.857 0 0 1 0-1.2.84.84 0 0 1 .6-.233",
10836
+ fillOpacity: opacity
10837
+ }
10838
+ )
10651
10839
  }
10652
- ) });
10840
+ );
10653
10841
  }
10654
10842
  );
10655
10843
  var ToastSuccessIcon = React70__namespace.default.forwardRef(
10656
10844
  (props, ref) => {
10657
- const { opacity = 1, viewBox = "0 0 20 20", ...rest } = props;
10658
- return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, viewBox, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
10659
- "path",
10845
+ const { opacity = 1, viewBox = "0 0 20 20", className, ...rest } = props;
10846
+ return /* @__PURE__ */ jsxRuntime.jsx(
10847
+ BaseIcon,
10660
10848
  {
10661
- fillRule: "evenodd",
10662
- clipRule: "evenodd",
10663
- d: "M1.678 10a8.333 8.333 0 1 1 16.667-.001 8.333 8.333 0 0 1-16.667 0m12.477-3.907c.189-.18.448-.26.697-.26s.507.08.697.26c.38.362.38.969 0 1.33l-6.793 6.473a1.033 1.033 0 0 1-1.394 0l-2.911-2.774a.92.92 0 0 1 0-1.33 1.034 1.034 0 0 1 1.395 0l2.213 2.11z",
10664
- fill: "#00B49E"
10849
+ ref,
10850
+ viewBox,
10851
+ fill: "currentColor",
10852
+ className: tailwindVariants.cnBase(className, "oui-fill-success"),
10853
+ ...rest,
10854
+ children: /* @__PURE__ */ jsxRuntime.jsx(
10855
+ "path",
10856
+ {
10857
+ fillRule: "evenodd",
10858
+ clipRule: "evenodd",
10859
+ d: "M1.678 10a8.333 8.333 0 1 1 16.667-.001 8.333 8.333 0 0 1-16.667 0m12.477-3.907c.189-.18.448-.26.697-.26s.507.08.697.26c.38.362.38.969 0 1.33l-6.793 6.473a1.033 1.033 0 0 1-1.394 0l-2.911-2.774a.92.92 0 0 1 0-1.33 1.034 1.034 0 0 1 1.395 0l2.213 2.11z"
10860
+ }
10861
+ )
10665
10862
  }
10666
- ) });
10863
+ );
10667
10864
  }
10668
10865
  );
10669
10866
  var ToastLoadingIcon = React70__namespace.default.forwardRef(
10670
10867
  (props, ref) => {
10671
- const { opacity = 1, viewBox = "0 0 20 20", ...rest } = props;
10672
- return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, viewBox, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
10673
- "path",
10868
+ const { opacity = 1, viewBox = "0 0 20 20", className, ...rest } = props;
10869
+ return /* @__PURE__ */ jsxRuntime.jsx(
10870
+ BaseIcon,
10674
10871
  {
10675
- fillRule: "evenodd",
10676
- clipRule: "evenodd",
10677
- d: "M9.167 3.333c0-.46.373-.833.833-.833A7.5 7.5 0 1 1 2.5 10a.833.833 0 0 1 1.667 0A5.834 5.834 0 1 0 10 4.167a.833.833 0 0 1-.833-.834",
10678
- fill: "#4774F6",
10679
- fillOpacity: opacity
10872
+ ref,
10873
+ viewBox,
10874
+ fill: "currentColor",
10875
+ className: tailwindVariants.cnBase(className, "oui-fill-primary"),
10876
+ ...rest,
10877
+ children: /* @__PURE__ */ jsxRuntime.jsx(
10878
+ "path",
10879
+ {
10880
+ fillRule: "evenodd",
10881
+ clipRule: "evenodd",
10882
+ d: "M9.167 3.333c0-.46.373-.833.833-.833A7.5 7.5 0 1 1 2.5 10a.833.833 0 0 1 1.667 0A5.834 5.834 0 1 0 10 4.167a.833.833 0 0 1-.833-.834",
10883
+ fillOpacity: opacity
10884
+ }
10885
+ )
10680
10886
  }
10681
- ) });
10887
+ );
10682
10888
  }
10683
10889
  );
10684
10890
  ToastErrorIcon.displayName = "ToasterErrorIcon";
@@ -10700,28 +10906,26 @@ var Toaster = (props) => {
10700
10906
  // },
10701
10907
  success: {
10702
10908
  iconTheme: {
10703
- primary: "rgba(123, 220, 138, 1)",
10704
- secondary: "rgba(25, 14, 44, 1)"
10909
+ primary: "rgb(var(--oui-color-success-light))",
10910
+ secondary: "rgb(var(--oui-color-base-10))"
10705
10911
  },
10706
10912
  style: {
10707
- // color: "rgba(123, 220, 138, 1)",
10708
- background: "rgba(40, 46, 58, 1)"
10913
+ background: "rgb(var(--oui-color-base-5))"
10709
10914
  }
10710
10915
  },
10711
10916
  loading: {
10712
10917
  duration: 5e3,
10713
10918
  style: {
10714
- background: "rgba(40, 46, 58, 1)"
10919
+ background: "rgb(var(--oui-color-base-5))"
10715
10920
  }
10716
10921
  },
10717
10922
  error: {
10718
10923
  iconTheme: {
10719
- primary: "rgba(217, 91, 129, 1)",
10720
- secondary: "rgba(25, 14, 44, 1)"
10924
+ primary: "rgb(var(--oui-color-danger))",
10925
+ secondary: "rgb(var(--oui-color-base-10))"
10721
10926
  },
10722
10927
  style: {
10723
- // color: "rgba(217, 91, 129, 1)",
10724
- background: "rgba(40, 46, 58, 1)"
10928
+ background: "rgb(var(--oui-color-base-5))"
10725
10929
  }
10726
10930
  },
10727
10931
  custom: {
@@ -10729,7 +10933,7 @@ var Toaster = (props) => {
10729
10933
  removeDelay: 0,
10730
10934
  position: "top-right",
10731
10935
  style: {
10732
- background: "rgba(40, 46, 58, 1)"
10936
+ background: "rgb(var(--oui-color-base-5))"
10733
10937
  }
10734
10938
  }
10735
10939
  },
@@ -10746,12 +10950,11 @@ var Toaster = (props) => {
10746
10950
  toast: t,
10747
10951
  style: {
10748
10952
  ...t.style,
10749
- color: "rgba(255, 255, 255, 0.8)",
10750
- // background: "rgba(25, 14, 44, 1)",
10953
+ color: "rgb(var(--oui-color-base-foreground) / 0.8)",
10751
10954
  borderRadius: "6px",
10752
10955
  wordBreak: "break-all",
10753
10956
  maxWidth: 800,
10754
- boxShadow: "0px 4px 8px 0px rgba(0, 0, 0, 0.36)"
10957
+ boxShadow: "0px 4px 8px 0px rgb(var(--oui-color-base-10) / 0.36)"
10755
10958
  },
10756
10959
  children: ({ icon, message }) => {
10757
10960
  let customIcon = icon;
@@ -11103,6 +11306,7 @@ var DropdownMenuRadioGroup = DropdownMenuPrimitive__namespace.RadioGroup;
11103
11306
  var dropdownMenuVariants = tailwindVariants.tv({
11104
11307
  slots: {
11105
11308
  content: [
11309
+ "oui-dropdown-menu-content",
11106
11310
  "oui-z-50",
11107
11311
  "oui-min-w-[8rem]",
11108
11312
  "oui-overflow-hidden",
@@ -11125,6 +11329,7 @@ var dropdownMenuVariants = tailwindVariants.tv({
11125
11329
  "data-[side=top]:oui-slide-in-from-bottom-2"
11126
11330
  ],
11127
11331
  item: [
11332
+ "oui-dropdown-menu-item",
11128
11333
  "oui-relative",
11129
11334
  "oui-flex",
11130
11335
  "oui-cursor-default",
@@ -11316,7 +11521,15 @@ var ComponentsProvider = (props) => {
11316
11521
  return props.children;
11317
11522
  };
11318
11523
  var OrderlyThemeProvider = (props) => {
11319
- const { components, overrides, children } = props;
11524
+ const {
11525
+ components,
11526
+ overrides,
11527
+ themes,
11528
+ currentThemeId,
11529
+ currentTheme,
11530
+ setCurrentThemeId,
11531
+ children
11532
+ } = props;
11320
11533
  const resolveComponentTheme = React70.useCallback(
11321
11534
  (component, defaultValue) => {
11322
11535
  return overrides?.[component] || defaultValue;
@@ -11324,8 +11537,20 @@ var OrderlyThemeProvider = (props) => {
11324
11537
  [overrides]
11325
11538
  );
11326
11539
  const memoizedValue = React70.useMemo(() => {
11327
- return { getComponentTheme: resolveComponentTheme };
11328
- }, [resolveComponentTheme]);
11540
+ return {
11541
+ getComponentTheme: resolveComponentTheme,
11542
+ themes: themes ?? [],
11543
+ currentThemeId,
11544
+ currentTheme,
11545
+ setCurrentThemeId
11546
+ };
11547
+ }, [
11548
+ resolveComponentTheme,
11549
+ themes,
11550
+ currentThemeId,
11551
+ currentTheme,
11552
+ setCurrentThemeId
11553
+ ]);
11329
11554
  return /* @__PURE__ */ jsxRuntime.jsx(OrderlyThemeContext.Provider, { value: memoizedValue, children: /* @__PURE__ */ jsxRuntime.jsx(ComponentsProvider, { components, children }) });
11330
11555
  };
11331
11556
  var Either = React70.memo((props) => {
@@ -11354,13 +11579,6 @@ function startViewTransition(callback) {
11354
11579
  callback();
11355
11580
  }
11356
11581
  }
11357
-
11358
- // src/tailwind.css
11359
- var tailwind_exports = {};
11360
- __export(tailwind_exports, {
11361
- default: () => tailwind_default
11362
- });
11363
- var tailwind_default = {};
11364
11582
  var stopPropagation = (event) => {
11365
11583
  event.stopPropagation();
11366
11584
  };
@@ -11488,6 +11706,173 @@ var DotStatus = (props) => {
11488
11706
  };
11489
11707
  DotStatus.displayName = "DotStatus";
11490
11708
 
11709
+ // src/tailwind.css
11710
+ var tailwind_exports = {};
11711
+ __export(tailwind_exports, {
11712
+ default: () => tailwind_default
11713
+ });
11714
+ var tailwind_default = {};
11715
+
11716
+ // src/tailwind/theme/darkTheme.ts
11717
+ __toESM(require_plugin());
11718
+ var DARK_THEME_CSS_VARS = {
11719
+ "--oui-font-family": '"Manrope","PingFang SC", "Noto Sans CJK SC", "Noto Sans", sans-serif',
11720
+ /* colors */
11721
+ "--oui-color-primary": "176 132 233",
11722
+ "--oui-color-primary-light": "213 190 244",
11723
+ "--oui-color-primary-darken": "137 76 209",
11724
+ "--oui-color-primary-contrast": "255 255 255",
11725
+ "--oui-color-link": "189 107 237",
11726
+ "--oui-color-link-light": "217 152 250",
11727
+ "--oui-color-secondary": "255 255 255",
11728
+ "--oui-color-tertiary": "218 218 218",
11729
+ "--oui-color-quaternary": "218 218 218",
11730
+ "--oui-color-danger": "245 97 139",
11731
+ "--oui-color-danger-light": "250 167 188",
11732
+ "--oui-color-danger-darken": "237 72 122",
11733
+ "--oui-color-danger-contrast": "255 255 255",
11734
+ "--oui-color-success": "41 233 169",
11735
+ "--oui-color-success-light": "101 240 194",
11736
+ "--oui-color-success-darken": "0 161 120",
11737
+ "--oui-color-success-contrast": "255 255 255",
11738
+ "--oui-color-warning": "255 209 70",
11739
+ "--oui-color-warning-light": "255 229 133",
11740
+ "--oui-color-warning-darken": "255 152 0",
11741
+ "--oui-color-warning-contrast": "255 255 255",
11742
+ "--oui-color-fill": "36 32 47",
11743
+ "--oui-color-fill-active": "40 46 58",
11744
+ "--oui-color-base-1": "93 83 123",
11745
+ "--oui-color-base-2": "81 72 107",
11746
+ "--oui-color-base-3": "68 61 69",
11747
+ "--oui-color-base-4": "57 52 74",
11748
+ "--oui-color-base-5": "51 46 66",
11749
+ "--oui-color-base-6": "43 38 56",
11750
+ "--oui-color-base-7": "36 32 47",
11751
+ "--oui-color-base-8": "29 26 38",
11752
+ "--oui-color-base-9": "22 20 28",
11753
+ "--oui-color-base-10": "14 13 18",
11754
+ "--oui-color-base-foreground": "255 255 255",
11755
+ "--oui-color-line": "255 255 255",
11756
+ "--oui-color-base-static": "255 255 255",
11757
+ "--oui-color-base-static-contrast": "0 0 0",
11758
+ "--oui-color-trading-loss": "245 97 139",
11759
+ "--oui-color-trading-loss-contrast": "255 255 255",
11760
+ "--oui-color-trading-profit": "41 233 169",
11761
+ "--oui-color-trading-profit-contrast": "255 255 255",
11762
+ /* gradients */
11763
+ "--oui-gradient-primary-start": "40 0 97",
11764
+ "--oui-gradient-primary-end": "189 107 237",
11765
+ "--oui-gradient-secondary-start": "81 42 121",
11766
+ "--oui-gradient-secondary-end": "176 132 233",
11767
+ "--oui-gradient-success-start": "1 83 68",
11768
+ "--oui-gradient-success-end": "41 223 169",
11769
+ "--oui-gradient-danger-start": "153 24 76",
11770
+ "--oui-gradient-danger-end": "245 97 139",
11771
+ "--oui-gradient-brand-start": "231 219 249",
11772
+ "--oui-gradient-brand-end": "159 107 225",
11773
+ "--oui-gradient-brand-stop-start": "6.62%",
11774
+ "--oui-gradient-brand-stop-end": "86.5%",
11775
+ "--oui-gradient-brand-angle": "17.44deg",
11776
+ "--oui-gradient-warning-start": "152 58 8",
11777
+ "--oui-gradient-warning-end": "255 209 70",
11778
+ "--oui-gradient-neutral-start": "27 29 24",
11779
+ "--oui-gradient-neutral-end": "38 41 46",
11780
+ /* rounded */
11781
+ "--oui-rounded-sm": "2px",
11782
+ "--oui-rounded": "4px",
11783
+ "--oui-rounded-md": "6px",
11784
+ "--oui-rounded-lg": "8px",
11785
+ "--oui-rounded-xl": "12px",
11786
+ "--oui-rounded-2xl": "16px",
11787
+ "--oui-rounded-full": "9999px",
11788
+ /* spacing */
11789
+ "--oui-spacing-xs": "20rem",
11790
+ "--oui-spacing-sm": "22.5rem",
11791
+ "--oui-spacing-md": "26.25rem",
11792
+ "--oui-spacing-lg": "30rem",
11793
+ "--oui-spacing-xl": "33.75rem"
11794
+ };
11795
+
11796
+ // src/tailwind/theme/lightTheme.ts
11797
+ __toESM(require_plugin());
11798
+ var LIGHT_THEME_CSS_VARS = {
11799
+ "--oui-font-family": '"Manrope", "PingFang SC", "Noto Sans CJK SC", "Noto Sans", sans-serif',
11800
+ /* colors */
11801
+ "--oui-color-primary": "240 185 11",
11802
+ "--oui-color-primary-light": "240 185 11",
11803
+ "--oui-color-primary-darken": "240 185 11",
11804
+ "--oui-color-primary-contrast": "12 14 18",
11805
+ "--oui-color-link": "230 175 0",
11806
+ "--oui-color-link-light": "252 213 53",
11807
+ "--oui-color-secondary": "255 255 255",
11808
+ "--oui-color-tertiary": "234 236 239",
11809
+ "--oui-color-quaternary": "218 218 218",
11810
+ "--oui-color-danger": "246 70 93",
11811
+ "--oui-color-danger-light": "255 120 140",
11812
+ "--oui-color-danger-darken": "220 50 75",
11813
+ "--oui-color-danger-contrast": "0 0 0",
11814
+ "--oui-color-success": "14 203 129",
11815
+ "--oui-color-success-light": "50 220 160",
11816
+ "--oui-color-success-darken": "46 189 133",
11817
+ "--oui-color-success-contrast": "0 0 0",
11818
+ "--oui-color-warning": "255 182 93",
11819
+ "--oui-color-warning-light": "255 207 139",
11820
+ "--oui-color-warning-darken": "255 125 0",
11821
+ "--oui-color-warning-contrast": "0 0 0",
11822
+ "--oui-color-fill": "245 245 245",
11823
+ "--oui-color-fill-active": "238 238 238",
11824
+ "--oui-color-base-1": "160 160 160",
11825
+ "--oui-color-base-2": "210 210 210",
11826
+ "--oui-color-base-3": "180 180 180",
11827
+ "--oui-color-base-4": "200 202 205",
11828
+ "--oui-color-base-5": "230 230 230",
11829
+ "--oui-color-base-6": "245 245 245",
11830
+ "--oui-color-base-7": "234 236 239",
11831
+ "--oui-color-base-8": "255 255 255",
11832
+ "--oui-color-base-9": "255 255 255",
11833
+ "--oui-color-base-10": "245 245 245",
11834
+ "--oui-color-base-foreground": "0 0 0",
11835
+ "--oui-color-line": "0 0 0",
11836
+ "--oui-color-base-static": "255 255 255",
11837
+ "--oui-color-base-static-contrast": "0 0 0",
11838
+ "--oui-color-trading-loss": "246 70 93",
11839
+ "--oui-color-trading-loss-contrast": "255 255 255",
11840
+ "--oui-color-trading-profit": "14 203 129",
11841
+ "--oui-color-trading-profit-contrast": "255 255 255",
11842
+ /* gradients */
11843
+ "--oui-gradient-primary-start": "240 185 11",
11844
+ "--oui-gradient-primary-end": "240 185 11",
11845
+ "--oui-gradient-secondary-start": "252 213 53",
11846
+ "--oui-gradient-secondary-end": "210 160 0",
11847
+ "--oui-gradient-success-start": "14 203 129",
11848
+ "--oui-gradient-success-end": "14 203 129",
11849
+ "--oui-gradient-danger-start": "2246 70 93",
11850
+ "--oui-gradient-danger-end": "246 70 93",
11851
+ "--oui-gradient-warning-start": "255 182 93",
11852
+ "--oui-gradient-warning-end": "255 182 93",
11853
+ "--oui-gradient-neutral-start": "245 245 245",
11854
+ "--oui-gradient-neutral-end": "245 245 245",
11855
+ "--oui-gradient-brand-stop-start": "6.62%",
11856
+ "--oui-gradient-brand-stop-end": "86.5%",
11857
+ "--oui-gradient-brand-angle": "17.44deg",
11858
+ "--oui-gradient-brand-start": "240 185 11",
11859
+ "--oui-gradient-brand-end": "240 185 11",
11860
+ /* rounded */
11861
+ "--oui-rounded-sm": "2px",
11862
+ "--oui-rounded": "4px",
11863
+ "--oui-rounded-md": "6px",
11864
+ "--oui-rounded-lg": "8px",
11865
+ "--oui-rounded-xl": "12px",
11866
+ "--oui-rounded-2xl": "16px",
11867
+ "--oui-rounded-full": "9999px",
11868
+ /* spacing */
11869
+ "--oui-spacing-xs": "20rem",
11870
+ "--oui-spacing-sm": "22.5rem",
11871
+ "--oui-spacing-md": "26.25rem",
11872
+ "--oui-spacing-lg": "30rem",
11873
+ "--oui-spacing-xl": "33.75rem"
11874
+ };
11875
+
11491
11876
  Object.defineProperty(exports, "cn", {
11492
11877
  enumerable: true,
11493
11878
  get: function () { return tailwindVariants.cnBase; }
@@ -11569,6 +11954,7 @@ exports.CollapsibleContent = CollapsibleContent2;
11569
11954
  exports.CollapsibleTrigger = CollapsibleTrigger2;
11570
11955
  exports.ConfirmDialog = ConfirmDialog;
11571
11956
  exports.CopyIcon = CopyIcon;
11957
+ exports.DARK_THEME_CSS_VARS = DARK_THEME_CSS_VARS;
11572
11958
  exports.DataFilter = DataFilter;
11573
11959
  exports.DataTable = DataTable;
11574
11960
  exports.DatePicker = DatePicker2;
@@ -11622,6 +12008,7 @@ exports.Icon = Icon;
11622
12008
  exports.InfoCircleIcon = InfoCircleIcon;
11623
12009
  exports.Input = Input2;
11624
12010
  exports.InputAdditional = InputAdditional;
12011
+ exports.LIGHT_THEME_CSS_VARS = LIGHT_THEME_CSS_VARS;
11625
12012
  exports.LeaderboardActiveIcon = LeaderboardActiveIcon;
11626
12013
  exports.LeaderboardInactiveIcon = LeaderboardInactiveIcon;
11627
12014
  exports.LeftNavVaultsIcon = LeftNavVaultsIcon;
@@ -11757,6 +12144,7 @@ exports.useObserverElement = useObserverElement;
11757
12144
  exports.useOrderlyTheme = useOrderlyTheme;
11758
12145
  exports.usePagination = usePagination;
11759
12146
  exports.useScreen = useScreen;
12147
+ exports.useThemeAttribute = useThemeAttribute;
11760
12148
  Object.keys(AutoScroll).forEach(function (k) {
11761
12149
  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
11762
12150
  enumerable: true,