@eclass/ui-kit 1.4.0 → 1.4.1

package/dist/eclass-ui-kit.es.js

@@ -7566,6 +7566,9 @@ var baseStyleContainer$1 = (props) => {
     orientation
   } = props;
   return _extends$e({
+    display: "inline-block",
+    position: "relative",
+    cursor: "pointer",
     _disabled: {
       opacity: 0.6,
       cursor: "default",
@@ -7583,6 +7586,7 @@ var baseStyleContainer$1 = (props) => {
 };
 var baseStyleTrack$1 = (props) => {
   return {
+    overflow: "hidden",
     borderRadius: "sm",
     bg: mode("gray.200", "whiteAlpha.200")(props),
     _disabled: {
@@ -7592,6 +7596,11 @@ var baseStyleTrack$1 = (props) => {
 };
 var baseStyleThumb$1 = (props) => {
   return _extends$e({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "absolute",
+    outline: 0,
     zIndex: 1,
     borderRadius: "full",
     bg: "white",
@@ -7613,6 +7622,8 @@ var baseStyleFilledTrack = (props) => {
     colorScheme: c2
   } = props;
   return {
+    width: "inherit",
+    height: "inherit",
     bg: mode(c2 + ".500", c2 + ".200")(props)
   };
 };
@@ -9889,10 +9900,46 @@ chakra("div", {
     transform: "translate(-50%, -50%)"
   }
 });
+const main = {
+  blueGrey: "#60798E",
+  deepSkyBlue: "#0189FF",
+  ziggurat: "#B0CFE0",
+  veryLightBlue: "#E0EEFA"
+};
+const colors = {
+  main,
+  alert: {
+    deepSkyBlue: main.deepSkyBlue,
+    veryLightBlue: main.veryLightBlue,
+    jadeGreen: "#28A745",
+    ice: "#E9F6EC",
+    red: "#CC0000",
+    veryLightPinkThree: "#F9DFDF",
+    orangeyYelow: "#F5A623",
+    pale: "#FDEED6"
+  },
+  icon: {
+    cetaceanBlue: "#08044F",
+    deepSkyBlue: main.deepSkyBlue,
+    lightSeaGreen: "#1EBDAF",
+    orangeRed: "#FF554D",
+    ripeMango: "#FFBC27"
+  },
+  neutral: {
+    darkCharcoal: "#2F2F2F",
+    davysGrey: "#5C5C5C",
+    gray: "#808080",
+    spanishGrey: "#999999",
+    silverSand: "#C6C6C6",
+    platinum: "#E8E8E8",
+    cultured: "#F4F4F4",
+    cultured2: "#F8F8F8"
+  }
+};
 function Label({
   children,
-  bg = "icon.ripeMango",
-  color: color2 = "neutral.darkCharcoal",
+  bg = "var(--chakra-colors-icon-ripeMango)",
+  color: color2 = colors.icon.lightSeaGreen,
   size: size2 = "md",
   m: m2 = "0"
 }) {
@@ -10498,42 +10545,6 @@ var _500 = "";
 var _400$1 = "";
 var _300 = "";
 var _400 = "";
-const main = {
-  blueGrey: "#60798E",
-  deepSkyBlue: "#0189FF",
-  ziggurat: "#B0CFE0",
-  veryLightBlue: "#E0EEFA"
-};
-const colors = {
-  main,
-  alert: {
-    deepSkyBlue: main.deepSkyBlue,
-    veryLightBlue: main.veryLightBlue,
-    jadeGreen: "#28A745",
-    ice: "#E9F6EC",
-    red: "#CC0000",
-    veryLightPinkThree: "#F9DFDF",
-    orangeyYelow: "#F5A623",
-    pale: "#FDEED6"
-  },
-  icon: {
-    cetaceanBlue: "#08044F",
-    deepSkyBlue: main.deepSkyBlue,
-    lightSeaGreen: "#1EBDAF",
-    orangeRed: "#FF554D",
-    ripeMango: "#FFBC27"
-  },
-  neutral: {
-    darkCharcoal: "#2F2F2F",
-    davysGrey: "#5C5C5C",
-    gray: "#808080",
-    spanishGrey: "#999999",
-    silverSand: "#C6C6C6",
-    platinum: "#E8E8E8",
-    cultured: "#F4F4F4",
-    cultured2: "#F8F8F8"
-  }
-};
 const styles = {
   global: (props) => ({
     ".react-ripples": {