fis-component 0.0.28 → 0.0.31

package/dist/cjs/types/src/components/IconButton/IconButton.stories.d.ts

@@ -29,6 +29,10 @@ declare const meta: {
             options: (import(".").ButtonVariant | undefined)[];
             description: string;
         };
+        loading: {
+            control: "boolean";
+            description: string;
+        };
     };
 };
 export default meta;

package/dist/cjs/types/src/components/IconButton/index.d.ts

@@ -12,6 +12,10 @@ export interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
     icon?: ReactNode;
     /** whether the button should be active */
     active?: boolean;
+    /**
+     * Defines if the button is currently being requested.
+     */
+    loading?: boolean;
 }
 declare const FISIconButton: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default FISIconButton;

package/dist/cjs/types/src/components/IconButton/styles.d.ts

@@ -3,6 +3,7 @@ interface ButtonProps {
     $variant: ButtonVariant;
     $size: ButtonSize;
     $active: boolean;
+    $loading?: boolean;
 }
 export declare const ButtonStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ButtonProps>> & string;
 export {};

package/dist/esm/index.js

@@ -62213,6 +62213,7 @@ const ButtonStyled = dt.button `
   align-items: center;
   border: none;
   padding: 0;
+  position: relative;
 
   &:hover {
     cursor: pointer;
@@ -62310,6 +62311,11 @@ const ButtonStyled = dt.button `
             background-color: ${getTheme("com/button/disable/background-color")};
             color: ${getTheme("com/button/disable/icon-color")} !important;
           }
+
+          ${props.$loading &&
+                lt `
+            background-color: ${getTheme("com/button/disable/background-color")} !important;
+          `}
         `;
         case "secondary":
             return lt `
@@ -62345,6 +62351,12 @@ const ButtonStyled = dt.button `
             border-color: ${getTheme("com/button/disable/stroke-color")};
             color: ${getTheme("com/button/disable/icon-color")} !important;
           }
+
+          ${props.$loading &&
+                lt `
+            background-color: ${getTheme("com/button/disable/background-color")} !important;
+            border-color: ${getTheme("com/button/disable/stroke-color")} !important;
+          `}
         `;
         case "secondary-invisible":
             return lt `
@@ -62408,6 +62420,12 @@ const ButtonStyled = dt.button `
             border-color: ${getTheme("com/button/disable/stroke-color")};
             color: ${getTheme("com/button/disable/icon-color")} !important;
           }
+
+          ${props.$loading &&
+                lt `
+            background-color: ${getTheme("com/button/disable/background-color")} !important;
+            border-color: ${getTheme("com/button/disable/stroke-color")} !important;
+          `}
         `;
         case "tertiary-invisible":
             return lt `
@@ -62465,6 +62483,11 @@ const ButtonStyled = dt.button `
             background-color: ${getTheme("com/button/disable/background-color")};
             color: ${getTheme("com/button/disable/icon-color")} !important;
           }
+
+          ${props.$loading &&
+                lt `
+            background-color: ${getTheme("com/button/disable/background-color")} !important;
+          `}
         `;
         case "secondary-negative":
             return lt `
@@ -62501,6 +62524,12 @@ const ButtonStyled = dt.button `
             border-color: ${getTheme("com/button/disable/stroke-color")};
             color: ${getTheme("com/button/disable/icon-color")} !important;
           }
+
+          ${props.$loading &&
+                lt `
+            background-color: ${getTheme("com/button/disable/background-color")} !important;
+            border-color: ${getTheme("com/button/disable/stroke-color")} !important;
+          `}
         `;
         case "secondary-invisible-negative":
             return lt `
@@ -62559,6 +62588,11 @@ const ButtonStyled = dt.button `
             background-color: ${getTheme("com/button/disable-invert/solid-background-color")};
             color: ${getTheme("com/button/disable-invert/icon-color")} !important;
           }
+
+          ${props.$loading &&
+                lt `
+            background-color: ${getTheme("com/button/disable-invert/solid-background-color")} !important;
+          `}
         `;
         case "secondary-white":
             return lt `
@@ -62596,6 +62630,12 @@ const ButtonStyled = dt.button `
             border-color: ${getTheme("com/button/disable-invert/stroke-color")};
             color: ${getTheme("com/button/disable-invert/icon-color")} !important;
           }
+
+          ${props.$loading &&
+                lt `
+            background-color: ${getTheme("com/button/disable-invert/background-color-transparent")} !important;
+            border-color: ${getTheme("com/button/disable-invert/stroke-color")} !important;
+          `}
         `;
         case "secondary-invisible-white":
             return lt `
@@ -62637,9 +62677,150 @@ const ButtonStyled = dt.button `
 }}
 `;
 
+const circleKeyframe = mt `
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }`;
+const getSizeProgressCircle = (size) => {
+    switch (size) {
+        case "xs":
+            return lt `
+        width: ${getTheme("com/progress-indicator/circular/size-xs/width")};
+        height: ${getTheme("com/progress-indicator/circular/size-xs/width")};
+      `;
+        case "sm":
+            return lt `
+        width: ${getTheme("com/progress-indicator/circular/size-sm/width")};
+        height: ${getTheme("com/progress-indicator/circular/size-sm/width")};
+      `;
+        case "md":
+            return lt `
+        width: ${getTheme("com/progress-indicator/circular/size-md/width")};
+        height: ${getTheme("com/progress-indicator/circular/size-md/width")};
+      `;
+        default:
+            return lt `
+        width: ${getTheme("com/progress-indicator/circular/size-lg/width")};
+        height: ${getTheme("com/progress-indicator/circular/size-lg/width")};
+      `;
+    }
+};
+const circularIndeterminateLeadColor = (invert) => invert
+    ? getTheme("com/progress-indicator/invert/indicator/lead-color")
+    : getTheme("com/progress-indicator/default/indicator/lead-color");
+const circularIndeterminateTrailColor = (invert) => invert
+    ? getTheme("com/progress-indicator/invert/indicator/trail-color")
+    : getTheme("com/progress-indicator/default/indicator/trail-color");
+const DivIndeterminateWrapperSC = dt.svg `
+  ${({ $size }) => getSizeProgressCircle($size)}
+
+  .indicator {
+    ${({ $invert }) => lt `
+      background: conic-gradient(
+        from 82.72deg at 50% 48.91%,
+        ${circularIndeterminateTrailColor($invert)} -3.6deg,
+        ${circularIndeterminateLeadColor($invert)} 252deg,
+        ${circularIndeterminateTrailColor($invert)} 356.4deg,
+        ${circularIndeterminateLeadColor($invert)} 612deg
+      );
+    `}
+  }
+
+  animation: ${circleKeyframe} 0.5s linear infinite;
+`;
+const SvgDeterminateSC = dt.svg `
+  transform: rotate(-90deg);
+`;
+const SvgDeterminateWrapperSC = dt.div `
+  position: relative;
+  width: ${({ $size }) => $size};
+  height: ${({ $size }) => $size};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const CircleDeterminateSC = dt.circle `
+  fill: none;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 0.35s ease;
+`;
+
+const NUMBER_REGEX = /^\d+/;
+
+const extractNumberFromThemeValue = (value, defaultValue = 0) => {
+    if (typeof value !== "string") {
+        return defaultValue;
+    }
+    const match = value.match(NUMBER_REGEX);
+    const number = Number(match?.[0]);
+    if (isNaN(number)) {
+        return defaultValue;
+    }
+    return number;
+};
+const clamp = (value, min, max) => {
+    return Math.min(Math.max(value, min), max);
+};
+
+const ProgressCircularDeterminate = ({ percent: percentProp = 0, size: sizeProp = "md", invert = false, className, }) => {
+    const theme = nt();
+    const percent = useMemo$1(() => clamp(percentProp, 0, 100), [percentProp]);
+    const { size, strokeWidth, radius, circumference } = useMemo$1(() => {
+        const sizeValue = extractNumberFromThemeValue(theme?.[`com/progress-indicator/circular/size-${sizeProp}/indicator/indicator`], 0);
+        const strokeWidthValue = extractNumberFromThemeValue(theme?.[`com/progress-indicator/circular/size-${sizeProp}/indicator/stroke-width`], 0);
+        const validSize = Math.max(0, sizeValue);
+        const validStrokeWidth = Math.max(0, strokeWidthValue);
+        const calculatedRadius = (validSize - validStrokeWidth) / 2;
+        const calculatedCircumference = 2 * Math.PI * Math.max(0, calculatedRadius);
+        return {
+            size: validSize,
+            strokeWidth: validStrokeWidth,
+            radius: Math.max(0, calculatedRadius),
+            circumference: calculatedCircumference,
+        };
+    }, [sizeProp, theme]);
+    const offset = useMemo$1(() => {
+        if (circumference <= 0)
+            return 0;
+        return circumference - (percent / 100) * circumference;
+    }, [percent, circumference]);
+    const wrapperSize = theme[`com/progress-indicator/circular/size-${sizeProp}/width`];
+    const backgroundColor = invert
+        ? theme["com/progress-indicator/invert/background-color"]
+        : theme["com/progress-indicator/default/background-color"];
+    const leadColor = invert
+        ? theme["com/progress-indicator/invert/indicator/lead-color"]
+        : theme["com/progress-indicator/default/indicator/lead-color"];
+    if (size <= 0 || radius <= 0) {
+        return null;
+    }
+    return (jsx(SvgDeterminateWrapperSC, { "$size": wrapperSize, className: className, children: jsxs(SvgDeterminateSC, { width: size, height: size, viewBox: `0 0 ${size} ${size}`, "aria-valuenow": percent, role: "progressbar", children: [jsx(CircleDeterminateSC, { cx: size / 2, cy: size / 2, r: radius, stroke: backgroundColor, strokeWidth: strokeWidth, fill: "none" }), jsx(CircleDeterminateSC, { cx: size / 2, cy: size / 2, r: radius, stroke: leadColor, strokeWidth: strokeWidth, strokeDasharray: circumference, strokeDashoffset: offset, fill: "none" })] }) }));
+};
+
+function ProgressCircularIndeterminate({ size = "md", invert = false, className, }) {
+    return (jsxs(DivIndeterminateWrapperSC, { viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, "$invert": invert, "$size": size, children: [jsx("g", { clipPath: "url(#paint0_angular_9600_49736_clip_path)", "data-figma-skip-parse": "true", children: jsx("g", { transform: "matrix(0.00190748 0.0149333 -0.0152598 0.00186667 22.3061 22)", children: jsx("foreignObject", { x: -1186.46, y: -1186.46, width: 2372.92, height: 2372.92, children: jsx("div", { className: "indicator", style: {
+                                height: "100%",
+                                width: "100%",
+                                opacity: 1,
+                            } }) }) }) }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M34.7639 19.8789C33.8246 20.1776 32.8157 19.6745 32.5105 18.7553C31.899 16.9137 30.7791 15.2734 29.2744 14.0157C27.7697 12.7581 25.939 11.9322 23.9846 11.6293C22.0302 11.3264 20.0282 11.5582 18.2001 12.2993C16.3719 13.0403 14.7888 14.2617 13.6257 15.8283C12.4626 17.3949 11.7649 19.2457 11.6096 21.1762C11.4544 23.1066 11.8476 25.0415 12.746 26.7669C13.6443 28.4923 15.0127 29.9409 16.6999 30.9527C18.3871 31.9645 20.3273 32.5 22.3061 32.5C23.2937 32.5 24.0944 33.2835 24.0944 34.25C24.0944 35.2165 23.2937 36 22.3061 36C19.6677 36 17.0808 35.286 14.8312 33.937C12.5816 32.5879 10.7571 30.6564 9.55928 28.3559C8.36149 26.0554 7.8371 23.4755 8.04411 20.9016C8.25111 18.3276 9.18144 15.8598 10.7322 13.771C12.283 11.6822 14.3939 10.0537 16.8314 9.06569C19.2689 8.07764 21.9382 7.76847 24.5441 8.17237C27.1499 8.57627 29.5909 9.6775 31.5972 11.3543C33.6034 13.0311 35.0967 15.2182 35.912 17.6738C36.2172 18.593 35.7032 19.5802 34.7639 19.8789Z", "data-figma-gradient-fill": "{\"type\":\"GRADIENT_ANGULAR\",\"stops\":[{\"color\":{\"r\":0.18431372940540314,\"g\":0.23529411852359772,\"b\":0.75686275959014893,\"a\":1.0},\"position\":0.750},{\"color\":{\"r\":1.0,\"g\":1.0,\"b\":1.0,\"a\":0.10999999940395355},\"position\":0.89999997615814209}],\"stopsVar\":[{\"color\":{\"r\":0.18431372940540314,\"g\":0.23529411852359772,\"b\":0.75686275959014893,\"a\":1.0},\"position\":0.750},{\"color\":{\"r\":1.0,\"g\":1.0,\"b\":1.0,\"a\":0.10999999940395355},\"position\":0.89999997615814209}],\"transform\":{\"m00\":3.8149569034576416,\"m01\":-30.519655227661133,\"m02\":35.658443450927734,\"m10\":29.866659164428711,\"m11\":3.7333323955535889,\"m12\":5.2000064849853516},\"opacity\":1.0,\"blendMode\":\"NORMAL\",\"visible\":true}" }), jsx("defs", { children: jsx("clipPath", { id: "paint0_angular_9600_49736_clip_path", children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M34.7639 19.8789C33.8246 20.1776 32.8157 19.6745 32.5105 18.7553C31.899 16.9137 30.7791 15.2734 29.2744 14.0157C27.7697 12.7581 25.939 11.9322 23.9846 11.6293C22.0302 11.3264 20.0282 11.5582 18.2001 12.2993C16.3719 13.0403 14.7888 14.2617 13.6257 15.8283C12.4626 17.3949 11.7649 19.2457 11.6096 21.1762C11.4544 23.1066 11.8476 25.0415 12.746 26.7669C13.6443 28.4923 15.0127 29.9409 16.6999 30.9527C18.3871 31.9645 20.3273 32.5 22.3061 32.5C23.2937 32.5 24.0944 33.2835 24.0944 34.25C24.0944 35.2165 23.2937 36 22.3061 36C19.6677 36 17.0808 35.286 14.8312 33.937C12.5816 32.5879 10.7571 30.6564 9.55928 28.3559C8.36149 26.0554 7.8371 23.4755 8.04411 20.9016C8.25111 18.3276 9.18144 15.8598 10.7322 13.771C12.283 11.6822 14.3939 10.0537 16.8314 9.06569C19.2689 8.07764 21.9382 7.76847 24.5441 8.17237C27.1499 8.57627 29.5909 9.6775 31.5972 11.3543C33.6034 13.0311 35.0967 15.2182 35.912 17.6738C36.2172 18.593 35.7032 19.5802 34.7639 19.8789Z" }) }) })] }));
+}
+
+function FISProgressCircular({ variant, ...rest }) {
+    if (variant === "determinate") {
+        return jsx(ProgressCircularDeterminate, { ...rest });
+    }
+    return jsx(ProgressCircularIndeterminate, { ...rest });
+}
+FISProgressCircular.displayName = "FISProgressCircular";
+
 const FISIconButton = forwardRef((props, ref) => {
-    const { type, children, active = false, size = "md", variant = "primary", icon: iconProp, ...rest } = props;
-    return (jsx(ButtonStyled, { ...rest, ref: ref, "$variant": variant, "$size": size, "$active": active, children: iconProp }));
+    const { type, children, active = false, size = "md", variant = "primary", icon: iconProp, loading = false, disabled = false, ...rest } = props;
+    return (jsx(ButtonStyled, { ...rest, ref: ref, "$variant": variant, "$size": size, "$active": active, "$loading": loading, disabled: disabled || loading, children: loading ? (jsx(FISProgressCircular, { size: size, variant: "indeterminate", invert: variant === "primary-white" ||
+                variant === "secondary-white" ||
+                variant === "secondary-invisible-white" })) : (iconProp) }));
 });
 FISIconButton.displayName = "FISIconButton";
 
@@ -62950,145 +63131,6 @@ const ToastWrapper = dt.div `
   gap: 10px;
 `;
 
-const circleKeyframe = mt `
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }`;
-const getSizeProgressCircle = (size) => {
-    switch (size) {
-        case "xs":
-            return lt `
-        width: ${getTheme("com/progress-indicator/circular/size-xs/width")};
-        height: ${getTheme("com/progress-indicator/circular/size-xs/width")};
-      `;
-        case "sm":
-            return lt `
-        width: ${getTheme("com/progress-indicator/circular/size-sm/width")};
-        height: ${getTheme("com/progress-indicator/circular/size-sm/width")};
-      `;
-        case "md":
-            return lt `
-        width: ${getTheme("com/progress-indicator/circular/size-md/width")};
-        height: ${getTheme("com/progress-indicator/circular/size-md/width")};
-      `;
-        default:
-            return lt `
-        width: ${getTheme("com/progress-indicator/circular/size-lg/width")};
-        height: ${getTheme("com/progress-indicator/circular/size-lg/width")};
-      `;
-    }
-};
-const circularIndeterminateLeadColor = (invert) => invert
-    ? getTheme("com/progress-indicator/invert/indicator/lead-color")
-    : getTheme("com/progress-indicator/default/indicator/lead-color");
-const circularIndeterminateTrailColor = (invert) => invert
-    ? getTheme("com/progress-indicator/invert/indicator/trail-color")
-    : getTheme("com/progress-indicator/default/indicator/trail-color");
-const DivIndeterminateWrapperSC = dt.svg `
-  ${({ $size }) => getSizeProgressCircle($size)}
-
-  .indicator {
-    ${({ $invert }) => lt `
-      background: conic-gradient(
-        from 82.72deg at 50% 48.91%,
-        ${circularIndeterminateTrailColor($invert)} -3.6deg,
-        ${circularIndeterminateLeadColor($invert)} 252deg,
-        ${circularIndeterminateTrailColor($invert)} 356.4deg,
-        ${circularIndeterminateLeadColor($invert)} 612deg
-      );
-    `}
-  }
-
-  animation: ${circleKeyframe} 0.5s linear infinite;
-`;
-const SvgDeterminateSC = dt.svg `
-  transform: rotate(-90deg);
-`;
-const SvgDeterminateWrapperSC = dt.div `
-  position: relative;
-  width: ${({ $size }) => $size};
-  height: ${({ $size }) => $size};
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-const CircleDeterminateSC = dt.circle `
-  fill: none;
-  stroke-linecap: round;
-  transition: stroke-dashoffset 0.35s ease;
-`;
-
-const NUMBER_REGEX = /^\d+/;
-
-const extractNumberFromThemeValue = (value, defaultValue = 0) => {
-    if (typeof value !== "string") {
-        return defaultValue;
-    }
-    const match = value.match(NUMBER_REGEX);
-    const number = Number(match?.[0]);
-    if (isNaN(number)) {
-        return defaultValue;
-    }
-    return number;
-};
-const clamp = (value, min, max) => {
-    return Math.min(Math.max(value, min), max);
-};
-
-const ProgressCircularDeterminate = ({ percent: percentProp = 0, size: sizeProp = "md", invert = false, className, }) => {
-    const theme = nt();
-    const percent = useMemo$1(() => clamp(percentProp, 0, 100), [percentProp]);
-    const { size, strokeWidth, radius, circumference } = useMemo$1(() => {
-        const sizeValue = extractNumberFromThemeValue(theme?.[`com/progress-indicator/circular/size-${sizeProp}/indicator/indicator`], 0);
-        const strokeWidthValue = extractNumberFromThemeValue(theme?.[`com/progress-indicator/circular/size-${sizeProp}/indicator/stroke-width`], 0);
-        const validSize = Math.max(0, sizeValue);
-        const validStrokeWidth = Math.max(0, strokeWidthValue);
-        const calculatedRadius = (validSize - validStrokeWidth) / 2;
-        const calculatedCircumference = 2 * Math.PI * Math.max(0, calculatedRadius);
-        return {
-            size: validSize,
-            strokeWidth: validStrokeWidth,
-            radius: Math.max(0, calculatedRadius),
-            circumference: calculatedCircumference,
-        };
-    }, [sizeProp, theme]);
-    const offset = useMemo$1(() => {
-        if (circumference <= 0)
-            return 0;
-        return circumference - (percent / 100) * circumference;
-    }, [percent, circumference]);
-    const wrapperSize = theme[`com/progress-indicator/circular/size-${sizeProp}/width`];
-    const backgroundColor = invert
-        ? theme["com/progress-indicator/invert/background-color"]
-        : theme["com/progress-indicator/default/background-color"];
-    const leadColor = invert
-        ? theme["com/progress-indicator/invert/indicator/lead-color"]
-        : theme["com/progress-indicator/default/indicator/lead-color"];
-    if (size <= 0 || radius <= 0) {
-        return null;
-    }
-    return (jsx(SvgDeterminateWrapperSC, { "$size": wrapperSize, className: className, children: jsxs(SvgDeterminateSC, { width: size, height: size, viewBox: `0 0 ${size} ${size}`, "aria-valuenow": percent, role: "progressbar", children: [jsx(CircleDeterminateSC, { cx: size / 2, cy: size / 2, r: radius, stroke: backgroundColor, strokeWidth: strokeWidth, fill: "none" }), jsx(CircleDeterminateSC, { cx: size / 2, cy: size / 2, r: radius, stroke: leadColor, strokeWidth: strokeWidth, strokeDasharray: circumference, strokeDashoffset: offset, fill: "none" })] }) }));
-};
-
-function ProgressCircularIndeterminate({ size = "md", invert = false, className, }) {
-    return (jsxs(DivIndeterminateWrapperSC, { viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, "$invert": invert, "$size": size, children: [jsx("g", { clipPath: "url(#paint0_angular_9600_49736_clip_path)", "data-figma-skip-parse": "true", children: jsx("g", { transform: "matrix(0.00190748 0.0149333 -0.0152598 0.00186667 22.3061 22)", children: jsx("foreignObject", { x: -1186.46, y: -1186.46, width: 2372.92, height: 2372.92, children: jsx("div", { className: "indicator", style: {
-                                height: "100%",
-                                width: "100%",
-                                opacity: 1,
-                            } }) }) }) }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M34.7639 19.8789C33.8246 20.1776 32.8157 19.6745 32.5105 18.7553C31.899 16.9137 30.7791 15.2734 29.2744 14.0157C27.7697 12.7581 25.939 11.9322 23.9846 11.6293C22.0302 11.3264 20.0282 11.5582 18.2001 12.2993C16.3719 13.0403 14.7888 14.2617 13.6257 15.8283C12.4626 17.3949 11.7649 19.2457 11.6096 21.1762C11.4544 23.1066 11.8476 25.0415 12.746 26.7669C13.6443 28.4923 15.0127 29.9409 16.6999 30.9527C18.3871 31.9645 20.3273 32.5 22.3061 32.5C23.2937 32.5 24.0944 33.2835 24.0944 34.25C24.0944 35.2165 23.2937 36 22.3061 36C19.6677 36 17.0808 35.286 14.8312 33.937C12.5816 32.5879 10.7571 30.6564 9.55928 28.3559C8.36149 26.0554 7.8371 23.4755 8.04411 20.9016C8.25111 18.3276 9.18144 15.8598 10.7322 13.771C12.283 11.6822 14.3939 10.0537 16.8314 9.06569C19.2689 8.07764 21.9382 7.76847 24.5441 8.17237C27.1499 8.57627 29.5909 9.6775 31.5972 11.3543C33.6034 13.0311 35.0967 15.2182 35.912 17.6738C36.2172 18.593 35.7032 19.5802 34.7639 19.8789Z", "data-figma-gradient-fill": "{\"type\":\"GRADIENT_ANGULAR\",\"stops\":[{\"color\":{\"r\":0.18431372940540314,\"g\":0.23529411852359772,\"b\":0.75686275959014893,\"a\":1.0},\"position\":0.750},{\"color\":{\"r\":1.0,\"g\":1.0,\"b\":1.0,\"a\":0.10999999940395355},\"position\":0.89999997615814209}],\"stopsVar\":[{\"color\":{\"r\":0.18431372940540314,\"g\":0.23529411852359772,\"b\":0.75686275959014893,\"a\":1.0},\"position\":0.750},{\"color\":{\"r\":1.0,\"g\":1.0,\"b\":1.0,\"a\":0.10999999940395355},\"position\":0.89999997615814209}],\"transform\":{\"m00\":3.8149569034576416,\"m01\":-30.519655227661133,\"m02\":35.658443450927734,\"m10\":29.866659164428711,\"m11\":3.7333323955535889,\"m12\":5.2000064849853516},\"opacity\":1.0,\"blendMode\":\"NORMAL\",\"visible\":true}" }), jsx("defs", { children: jsx("clipPath", { id: "paint0_angular_9600_49736_clip_path", children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M34.7639 19.8789C33.8246 20.1776 32.8157 19.6745 32.5105 18.7553C31.899 16.9137 30.7791 15.2734 29.2744 14.0157C27.7697 12.7581 25.939 11.9322 23.9846 11.6293C22.0302 11.3264 20.0282 11.5582 18.2001 12.2993C16.3719 13.0403 14.7888 14.2617 13.6257 15.8283C12.4626 17.3949 11.7649 19.2457 11.6096 21.1762C11.4544 23.1066 11.8476 25.0415 12.746 26.7669C13.6443 28.4923 15.0127 29.9409 16.6999 30.9527C18.3871 31.9645 20.3273 32.5 22.3061 32.5C23.2937 32.5 24.0944 33.2835 24.0944 34.25C24.0944 35.2165 23.2937 36 22.3061 36C19.6677 36 17.0808 35.286 14.8312 33.937C12.5816 32.5879 10.7571 30.6564 9.55928 28.3559C8.36149 26.0554 7.8371 23.4755 8.04411 20.9016C8.25111 18.3276 9.18144 15.8598 10.7322 13.771C12.283 11.6822 14.3939 10.0537 16.8314 9.06569C19.2689 8.07764 21.9382 7.76847 24.5441 8.17237C27.1499 8.57627 29.5909 9.6775 31.5972 11.3543C33.6034 13.0311 35.0967 15.2182 35.912 17.6738C36.2172 18.593 35.7032 19.5802 34.7639 19.8789Z" }) }) })] }));
-}
-
-function FISProgressCircular({ variant, ...rest }) {
-    if (variant === "determinate") {
-        return jsx(ProgressCircularDeterminate, { ...rest });
-    }
-    return jsx(ProgressCircularIndeterminate, { ...rest });
-}
-FISProgressCircular.displayName = "FISProgressCircular";
-
 const getPadding = (size, borderPath) => {
     const paddingValue = getTheme(`com/button/size-${size}/horizontal-padding`);
     const borderValue = getTheme(borderPath);
@@ -63262,7 +63304,7 @@ const ButtonSC = dt.button `
 
           ${props.$loading &&
                 lt `
-            background-color: ${getTheme("com/button/loading/background-color")} !important;
+            background-color: ${getTheme("com/button/disable/background-color")} !important;
           `}
         `;
         case "secondary":
@@ -63322,8 +63364,8 @@ const ButtonSC = dt.button `
 
           ${props.$loading &&
                 lt `
-            background-color: ${getTheme("com/button/loading/background-color")} !important;
-            border-color: ${getTheme("com/button/loading/stroke-color")} !important;
+            background-color: ${getTheme("com/button/disable/background-color")} !important;
+            border-color: ${getTheme("com/button/disable/stroke-color")} !important;
           `}
 
           ${() => ["xs", "sm", "md", "lg"].includes(props.$size)
@@ -63387,8 +63429,8 @@ const ButtonSC = dt.button `
 
           ${props.$loading &&
                 lt `
-            background-color: ${getTheme("com/button/loading/background-color")} !important;
-            border-color: ${getTheme("com/button/loading/stroke-color")} !important;
+            background-color: ${getTheme("com/button/disable/background-color")} !important;
+            border-color: ${getTheme("com/button/disable/stroke-color")} !important;
           `}
 
           ${() => ["xs", "sm", "md", "lg"].includes(props.$size)
@@ -63446,7 +63488,7 @@ const ButtonSC = dt.button `
 
           ${props.$loading &&
                 lt `
-            background-color: ${getTheme("com/button/loading/background-color")} !important;
+            background-color: ${getTheme("com/button/disable/background-color")} !important;
           `}
         `;
         case "secondary-negative":
@@ -63507,8 +63549,8 @@ const ButtonSC = dt.button `
 
           ${props.$loading &&
                 lt `
-            background-color: ${getTheme("com/button/loading/background-color")} !important;
-            border-color: ${getTheme("com/button/loading/stroke-color")};
+            background-color: ${getTheme("com/button/disable/background-color")} !important;
+            border-color: ${getTheme("com/button/disable/stroke-color")};
           `}
 
           ${() => ["xs", "sm", "md", "lg"].includes(props.$size)
@@ -63565,7 +63607,7 @@ const ButtonSC = dt.button `
 
           ${props.$loading &&
                 lt `
-            background-color: ${getTheme("com/button/loading-invert/solid-background-color")} !important;
+            background-color: ${getTheme("com/button/disable-invert/solid-background-color")} !important;
           `}
         `;
         case "secondary-white":