@ctlyst.id/internal-ui 2.1.4 → 2.1.5

package/dist/components/loader/components/loader.d.ts

@@ -4,7 +4,7 @@ export interface LoaderProps {
     variant?: string;
     thickness?: string;
 }
-export interface CustomBadgeProps extends HTMLChakraProps<'span'>, ThemingProps {
+export interface CustomLoaderProps extends HTMLChakraProps<'span'>, ThemingProps {
 }
-declare const Loader: import("@chakra-ui/system/dist/system.types").ComponentWithAs<"div", CustomBadgeProps>;
+declare const Loader: import("@chakra-ui/system/dist/system.types").ComponentWithAs<"div", CustomLoaderProps>;
 export default Loader;

package/dist/internal-ui.cjs.development.js

@@ -4125,6 +4125,7 @@ const Input = /*#__PURE__*/defineMultiStyleConfig$2({
   }
 });
 
+/* eslint-disable prefer-destructuring */
 const rotate = /*#__PURE__*/react$1.keyframes({
   '0%': {
     transform: 'rotate(0deg)'
@@ -4134,10 +4135,23 @@ const rotate = /*#__PURE__*/react$1.keyframes({
   }
 });
 const getLoaderColor = color => {
-  if (color === 'primary') return '--chakra-colors-primary-600';
-  if (color === 'danger') return '--chakra-colors-danger-500';
-  if (color === 'warning') return '--chakra-colors-warning-700';
-  return '--chakra-colors-white-high';
+  const colorValue = color.split('.');
+  let backgroundColor;
+  switch (colorValue.length) {
+    case 1:
+      backgroundColor = colorValue[0];
+      break;
+    case 2:
+      backgroundColor = `var(--chakra-colors-${colorValue[0]}-${colorValue[1]})`;
+      break;
+    default:
+      backgroundColor = 'var(--chakra-colors-white-high)';
+      break;
+  }
+  if (color === 'primary') return 'var(--chakra-colors-primary-600)';
+  if (color === 'danger') return 'var(--chakra-colors-danger-500)';
+  if (color === 'warning') return 'var(--chakra-colors-warning-700)';
+  return backgroundColor;
 };
 const LoaderStyle = /*#__PURE__*/styledSystem.defineStyleConfig({
   baseStyle: props => {
@@ -4148,7 +4162,7 @@ const LoaderStyle = /*#__PURE__*/styledSystem.defineStyleConfig({
       justifyContent: 'center',
       alignItems: 'center',
       animation: `${rotate} 1s linear infinite`,
-      background: `conic-gradient(from 180deg at 50% 50%, var(${colors}) 0deg, rgba(217, 217, 217, 0) 360deg);`,
+      background: `conic-gradient(from 180deg at 50% 50%, ${colors} 0deg, rgba(217, 217, 217, 0) 360deg);`,
       ':before': {
         content: `''`,
         display: 'block',