@ory/elements-react 1.2.0-rc.0 → 1.2.0-rc.1

package/dist/theme/default/index.css

@@ -212,9 +212,6 @@
   .ory-elements .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
-  .ory-elements .right-0 {
-    right: calc(var(--spacing) * 0);
-  }
   .ory-elements .z-50 {
     z-index: 50;
   }
@@ -341,12 +338,12 @@
   .ory-elements .min-h-\[72px\] {
     min-height: 72px;
   }
+  .ory-elements .w-\(--breakpoint-sm\) {
+    width: var(--breakpoint-sm);
+  }
   .ory-elements .w-7 {
     width: calc(var(--spacing) * 7);
   }
-  .ory-elements .w-12 {
-    width: calc(var(--spacing) * 12);
-  }
   .ory-elements .w-full {
     width: 100%;
   }
@@ -497,6 +494,14 @@
     border-top-left-radius: var(--radius-cards);
     border-top-right-radius: var(--radius-cards);
   }
+  .ory-elements .rounded-l-forms {
+    border-top-left-radius: var(--radius-forms);
+    border-bottom-left-radius: var(--radius-forms);
+  }
+  .ory-elements .rounded-r-none {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
   .ory-elements .rounded-b-cards {
     border-bottom-right-radius: var(--radius-cards);
     border-bottom-left-radius: var(--radius-cards);
@@ -605,6 +610,9 @@
   .ory-elements .bg-toggle-foreground-default {
     background-color: var(--color-toggle-foreground-default);
   }
+  .ory-elements .bg-transparent {
+    background-color: transparent;
+  }
   .ory-elements .fill-checkbox-foreground-checked {
     fill: var(--color-checkbox-foreground-checked);
   }
@@ -953,6 +961,11 @@
       background-color: var(--color-checkbox-background-checked);
     }
   }
+  .ory-elements .focus-within\:border-input-border-focus {
+    &:focus-within {
+      border-color: var(--color-input-border-focus);
+    }
+  }
   .ory-elements .hover\:border-button-identifier-border-border-hover {
     &:hover {
       @media (hover: hover) {
@@ -1072,9 +1085,13 @@
       }
     }
   }
-  .ory-elements .focus\:border-input-border-focus {
-    &:focus {
-      border-color: var(--color-input-border-focus);
+  .ory-elements .not-focus-within\:hover\:border-input-border-hover {
+    &:not(*:focus-within) {
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-input-border-hover);
+        }
+      }
     }
   }
   .ory-elements .focus\:ring-0 {
@@ -1088,6 +1105,12 @@
         var(--tw-shadow);
     }
   }
+  .ory-elements .focus\:outline-none {
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
   .ory-elements .focus-visible\:border-input-border-focus {
     &:focus-visible {
       border-color: var(--color-input-border-focus);
@@ -1103,6 +1126,12 @@
       }
     }
   }
+  .ory-elements .focus-visible\:outline-none {
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
   .ory-elements .disabled\:cursor-default {
     &:disabled {
       cursor: default;
@@ -1192,6 +1221,21 @@
       color: var(--color-button-secondary-foreground-disabled);
     }
   }
+  .ory-elements .data-\[disabled\=true\]\:border-input-border-disabled {
+    &[data-disabled=true] {
+      border-color: var(--color-input-border-disabled);
+    }
+  }
+  .ory-elements .data-\[disabled\=true\]\:bg-input-background-disabled {
+    &[data-disabled=true] {
+      background-color: var(--color-input-background-disabled);
+    }
+  }
+  .ory-elements .data-\[disabled\=true\]\:text-input-foreground-disabled {
+    &[data-disabled=true] {
+      color: var(--color-input-foreground-disabled);
+    }
+  }
   .ory-elements .data-\[state\=checked\]\:translate-x-3 {
     &[data-state=checked] {
       --tw-translate-x: calc(var(--spacing) * 3);
@@ -1343,6 +1387,11 @@
       padding-left: 7px;
     }
   }
+  .ory-elements .md\:w-\[712px\] {
+    @media (width >= 48rem) {
+      width: 712px;
+    }
+  }
   .ory-elements .md\:max-w-96 {
     @media (width >= 48rem) {
       max-width: calc(var(--spacing) * 96);
@@ -1383,6 +1432,11 @@
       justify-content: space-between;
     }
   }
+  .ory-elements .lg\:w-\[802px\] {
+    @media (width >= 64rem) {
+      width: 802px;
+    }
+  }
   .ory-elements .lg\:max-w-\[802px\] {
     @media (width >= 64rem) {
       max-width: 802px;
@@ -1393,6 +1447,11 @@
       padding-block: calc(var(--spacing) * 4.5);
     }
   }
+  .ory-elements .xl\:w-\[896px\] {
+    @media (width >= 80rem) {
+      width: 896px;
+    }
+  }
   .ory-elements .xl\:max-w-\[896px\] {
     @media (width >= 80rem) {
       max-width: 896px;