@keboola/design 4.2.0 → 4.2.1

package/dist/index.js

@@ -1412,9 +1412,9 @@ var variants = cva(
     "focus-visible:tw-outline",
     "focus-visible:tw-outline-1",
     "focus-visible:-tw-outline-offset-1",
-    "focus-visible:tw-outline-secondary-500",
+    "focus-visible:tw-outline-ring",
     "focus-visible:tw-ring-4",
-    "focus-visible:tw-ring-secondary-200",
+    "focus-visible:tw-ring-ring/30",
     // disabled
     "disabled:tw-opacity-40",
     "disabled:tw-cursor-not-allowed",
@@ -2458,9 +2458,10 @@ var toggleVariants = cva(
     // focus-visible
     "[&:not(:active)]:not-disabled:focus-visible:tw-outline",
     "!tw-outline-offset-0",
-    "[&:not(:active)]:not-disabled:focus-visible:tw-outline-secondary-500",
+    "[&:not(:active)]:not-disabled:focus-visible:tw-outline-ring",
     "[&:not(:active)]:not-disabled:focus-visible:tw-outline-1",
-    "[&:not(:active)]:not-disabled:focus-visible:tw-shadow-[0_0_0_4px_rgba(31,143,255,0.2)]"
+    "[&:not(:active)]:not-disabled:focus-visible:tw-ring-4",
+    "[&:not(:active)]:not-disabled:focus-visible:tw-ring-ring/20"
   ],
   {
     variants: {
@@ -8801,7 +8802,7 @@ var inputGroupVariants = cva(
     variants: {
       focusVariant: {
         default: [],
-        on: ["!tw-border-secondary-500", "!tw-ring-secondary-200", "!tw-ring-4"],
+        on: ["!tw-border-ring", "!tw-ring-ring/30", "!tw-ring-4"],
         off: ["has-[:is(input,textarea):focus]:!tw-ring-0"]
       },
       variant: {
@@ -8841,8 +8842,8 @@ var inputGroupVariants = cva(
       },
       state: {
         default: [
-          "has-[:is(input,textarea):focus]:tw-border-secondary-500",
-          "has-[:is(input,textarea):focus]:tw-ring-secondary-200"
+          "has-[:is(input,textarea):focus]:tw-border-ring",
+          "has-[:is(input,textarea):focus]:tw-ring-ring/30"
         ],
         error: [
           "tw-border-error-500",
@@ -9922,9 +9923,9 @@ var switchVariants = cva(
           "focus-visible:tw-outline-none",
           "before:focus-visible:tw-outline",
           "before:focus-visible:tw-outline-1",
-          "before:focus-visible:tw-outline-secondary-500",
+          "before:focus-visible:tw-outline-ring",
           "before:focus-visible:tw-ring-4",
-          "before:focus-visible:tw-ring-secondary-200"
+          "before:focus-visible:tw-ring-ring/30"
         ],
         argo: [
           "tw-peer",
@@ -10108,7 +10109,7 @@ var radioVariants = cva(
           "data-[state=unchecked]:hover:tw-border-primary",
           "data-[state=unchecked]:disabled:hover:tw-border-neutral-200",
           "focus-visible:tw-ring-2",
-          "focus-visible:tw-ring-secondary-200"
+          "focus-visible:tw-ring-ring/30"
         ],
         argo: [
           "disabled:tw-opacity-50",
@@ -10188,9 +10189,9 @@ var radioItemButtonVariants = cva(
           "data-[state=checked]:tw-text-white",
           "data-[state=checked]:tw-cursor-default",
           "focus-visible:tw-outline",
-          "focus-visible:tw-outline-secondary-500",
+          "focus-visible:tw-outline-ring",
           "focus-visible:tw-ring-4",
-          "focus-visible:tw-ring-secondary-200"
+          "focus-visible:tw-ring-ring/30"
         ],
         argo: [
           "disabled:tw-opacity-50",
@@ -10659,8 +10660,8 @@ var searchWrapperVariants = cva(
           // focus
           "has-[input:focus]:tw-outline-1",
           "has-[input:focus]:tw-ring-4",
-          "has-[input:focus]:tw-outline-secondary-500",
-          "has-[input:focus]:tw-ring-secondary-200"
+          "has-[input:focus]:tw-outline-ring",
+          "has-[input:focus]:tw-ring-ring/30"
         ],
         ai: [
           "tailwindcss-preflight",
@@ -10677,7 +10678,7 @@ var searchWrapperVariants = cva(
           "tw-shadow-[inset_0_100vw_white]",
           // focus
           "has-[input:focus]:tw-ring-4",
-          "has-[input:focus]:tw-ring-secondary-200"
+          "has-[input:focus]:tw-ring-ring/30"
         ]
       }
     }
@@ -11099,10 +11100,10 @@ var variants4 = cva(
       },
       state: {
         default: [
-          "focus:tw-border-secondary-500",
-          "focus:tw-ring-secondary-200",
-          "data-[state=open]:tw-border-secondary-500",
-          "data-[state=open]:tw-ring-secondary-200"
+          "focus:tw-border-ring",
+          "focus:tw-ring-ring/30",
+          "data-[state=open]:tw-border-ring",
+          "data-[state=open]:tw-ring-ring/30"
         ],
         error: [
           "tw-border-error-500",
@@ -11481,7 +11482,7 @@ var badgeRootVariants = cva(
     "focus-visible:tw-outline-none",
     "focus-visible:tw-ring-2",
     "focus-visible:tw-ring-inset",
-    "focus-visible:tw-ring-secondary-500"
+    "focus-visible:tw-ring-ring"
   ],
   {
     defaultVariants: {
@@ -14947,9 +14948,9 @@ FormGroup.NumberInput = FormGroupNumberInput;
 FormGroup.ColorInput = FormGroupColorInput;
 FormGroup.Textarea = FormGroupTextarea;
 var variantClasses = {
-  success: "tw-text-secondary-500 focus-visible:tw-outline-secondary-500 not-disabled:hover:tw-text-secondary-600",
+  success: "tw-text-secondary-500 focus-visible:tw-outline-ring not-disabled:hover:tw-text-secondary-600",
   error: "tw-text-error-500 focus-visible:tw-outline-error-500 not-disabled:hover:tw-text-error-600",
-  processing: "tw-text-secondary-500 focus-visible:tw-outline-secondary-500 not-disabled:hover:tw-text-secondary-600",
+  processing: "tw-text-secondary-500 focus-visible:tw-outline-ring not-disabled:hover:tw-text-secondary-600",
   dismissed: "tw-text-neutral-700 focus-visible:tw-outline-neutral-500 not-disabled:hover:tw-text-neutral-800"
 };
 var renderVariantIcon = (variant) => {
@@ -15082,8 +15083,8 @@ var Avatar = ({
         "tw-border",
         "tw-border-transparent",
         "focus-visible:tw-ring-4",
-        "focus-visible:tw-ring-secondary-200",
-        "focus-visible:tw-border-secondary-500",
+        "focus-visible:tw-ring-ring/30",
+        "focus-visible:tw-border-ring",
         className
       ),
       children: [
@@ -15194,7 +15195,7 @@ var ExpandToggle = ({
     type: "button",
     onClick: onToggle,
     "aria-expanded": isExpanded,
-    className: "tailwindcss-preflight tw-inline-flex tw-cursor-pointer tw-items-center tw-gap-1 tw-bg-transparent tw-p-0 tw-text-sm tw-font-medium tw-text-secondary-500 hover:tw-text-secondary-600 focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-secondary-500",
+    className: "tailwindcss-preflight tw-inline-flex tw-cursor-pointer tw-items-center tw-gap-1 tw-bg-transparent tw-p-0 tw-text-sm tw-font-medium tw-text-secondary-500 hover:tw-text-secondary-600 focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-ring",
     children: [
       /* @__PURE__ */ jsx("span", { children: isExpanded ? showLessLabel : showMoreLabel }),
       /* @__PURE__ */ jsx(
@@ -15554,7 +15555,7 @@ var promptInputVariants = cva(
     "tw-shadow-[inset_0_100vw_white]",
     // focus
     "has-[textarea:focus]:tw-ring-4",
-    "has-[textarea:focus]:tw-ring-secondary-200",
+    "has-[textarea:focus]:tw-ring-ring/30",
     "tw-cursor-text",
     "tw-px-2"
   ],
@@ -16424,7 +16425,7 @@ var Alert = ({
             "tw-rounded-sm",
             "focus-visible:tw-outline",
             "focus-visible:tw-outline-2",
-            "focus-visible:tw-outline-secondary-500"
+            "focus-visible:tw-outline-ring"
           ),
           children: [
             !hideIcon && /* @__PURE__ */ jsx(AlertIcon, { variant, icon }),
@@ -18497,10 +18498,10 @@ var SidebarGroupAction = ({
       "hover:[&_svg]:tw-text-secondary-600",
       "hover:tw-bg-neutral-100",
       "focus-visible:tw-ring-4",
-      "focus-visible:tw-ring-secondary-200",
+      "focus-visible:tw-ring-ring/30",
       "focus-visible:tw-outline",
       "focus-visible:tw-outline-1",
-      "focus-visible:tw-outline-secondary-500",
+      "focus-visible:tw-outline-ring",
       className
     ),
     children
@@ -19777,7 +19778,7 @@ var BreadcrumbEllipsis = ({
       // focus
       "focus-visible:tw-outline-none",
       "focus-visible:tw-ring-2",
-      "focus-visible:tw-ring-secondary-500/50",
+      "focus-visible:tw-ring-ring/50",
       "tw-p-1",
       className
     ),
@@ -19813,7 +19814,7 @@ var BreadcrumbLink = ({
         // focus
         "focus-visible:tw-outline-none",
         "focus-visible:tw-ring-2",
-        "focus-visible:tw-ring-secondary-500/50",
+        "focus-visible:tw-ring-ring/50",
         "focus-visible:tw-rounded-sm",
         // Icon
         '[&_svg:not([class*="tw-size-"])]:tw-size-3.5',