ar-design 0.2.80 → 0.2.82

package/dist/assets/css/components/data-display/chip/chip.css

@@ -6,9 +6,7 @@
   height: 1.75rem;
   padding: 0 0.5rem;
   font-size: 0.75rem;
-  font-weight: 600;
+  font-weight: 400;
   white-space: nowrap;
   user-select: none;
-  /* -webkit-text-stroke: 0.5px var(--white); */
-  letter-spacing: 1px;
 }

package/dist/assets/css/components/form/checkbox/core/border.css

@@ -1,130 +1,162 @@
-/* #region Border Color -> PRIMARY */
-.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.primary::before {
+/* #region Border Color -> BLUE */
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.blue::before {
   border-right-color: var(--white);
   border-bottom-color: var(--white);
 }
-.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.primary::before {
-  border-right-color: var(--primary);
-  border-bottom-color: var(--primary);
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.blue::before {
+  border-right-color: var(--blue);
+  border-bottom-color: var(--blue);
 }
-.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.primary::before {
-  border-right-color: var(--primary);
-  border-bottom-color: var(--primary);
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.blue::before {
+  border-right-color: var(--blue);
+  border-bottom-color: var(--blue);
 }
 /* #endregion */
-/* Border Color -> PRIMARY */
+/* Border Color -> BLUE */
 
-/* #region Border Color -> PRIMARY-LIGHT */
-.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.primary-light::before {
+/* #region Border Color -> PURPLE */
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.purple::before {
   border-right-color: var(--white);
   border-bottom-color: var(--white);
 }
-.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.primary-light::before {
-  border-right-color: var(--primary-light);
-  border-bottom-color: var(--primary-light);
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.purple::before {
+  border-right-color: var(--purple);
+  border-bottom-color: var(--purple);
 }
-.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.primary-light::before {
-  border-right-color: var(--primary-light);
-  border-bottom-color: var(--primary-light);
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.purple::before {
+  border-right-color: var(--purple);
+  border-bottom-color: var(--purple);
 }
 /* #endregion */
-/* Border Color -> PRIMARY-LIGHT */
+/* Border Color -> PURPLE */
 
-/* #region Border Color -> SECONDARY */
-.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.secondary::before {
+/* #region Border Color -> PINK */
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.pink::before {
   border-right-color: var(--white);
   border-bottom-color: var(--white);
 }
-.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.secondary::before {
-  border-right-color: var(--secondary);
-  border-bottom-color: var(--secondary);
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.pink::before {
+  border-right-color: var(--pink);
+  border-bottom-color: var(--pink);
 }
-.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.secondary::before {
-  border-right-color: var(--secondary);
-  border-bottom-color: var(--secondary);
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.pink::before {
+  border-right-color: var(--pink);
+  border-bottom-color: var(--pink);
 }
 /* #endregion */
-/* Border Color -> SECONDARY */
+/* Border Color -> PINK */
 
-/* #region Border Color -> SUCCESS */
-.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.success::before {
+/* #region Border Color -> RED */
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.red::before {
   border-right-color: var(--white);
   border-bottom-color: var(--white);
 }
-.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.success::before {
-  border-right-color: var(--success);
-  border-bottom-color: var(--success);
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.red::before {
+  border-right-color: var(--red);
+  border-bottom-color: var(--red);
 }
-.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.success::before {
-  border-right-color: var(--success);
-  border-bottom-color: var(--success);
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.red::before {
+  border-right-color: var(--red);
+  border-bottom-color: var(--red);
 }
 /* #endregion */
-/* Border Color -> SUCCESS */
+/* Border Color -> RED */
 
-/* #region Border Color -> WARNING */
-.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.warning::before {
-  border-right-color: var(--dark);
-  border-bottom-color: var(--dark);
+/* #region Border Color -> ORANGE */
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.orange::before {
+  border-right-color: var(--white);
+  border-bottom-color: var(--white);
 }
-.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.warning::before {
-  border-right-color: var(--warning);
-  border-bottom-color: var(--warning);
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.orange::before {
+  border-right-color: var(--orange);
+  border-bottom-color: var(--orange);
 }
-.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.warning::before {
-  border-right-color: var(--warning);
-  border-bottom-color: var(--warning);
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.orange::before {
+  border-right-color: var(--orange);
+  border-bottom-color: var(--orange);
 }
 /* #endregion */
-/* Border Color -> WARNING */
+/* Border Color -> ORANGE */
 
-/* #region Border Color -> DANGER */
-.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.danger::before {
+/* #region Border Color -> YELLOW */
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.yellow::before {
   border-right-color: var(--white);
   border-bottom-color: var(--white);
 }
-.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.danger::before {
-  border-right-color: var(--danger);
-  border-bottom-color: var(--danger);
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.yellow::before {
+  border-right-color: var(--yellow);
+  border-bottom-color: var(--yellow);
 }
-.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.danger::before {
-  border-right-color: var(--danger);
-  border-bottom-color: var(--danger);
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.yellow::before {
+  border-right-color: var(--yellow);
+  border-bottom-color: var(--yellow);
 }
 /* #endregion */
-/* Border Color -> DANGER */
+/* Border Color -> YELLOW */
 
-/* #region Border Color -> INFORMATION */
-.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.information::before {
+/* #region Border Color -> GREEN */
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.green::before {
   border-right-color: var(--white);
   border-bottom-color: var(--white);
 }
-.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.information::before {
-  border-right-color: var(--information);
-  border-bottom-color: var(--information);
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.green::before {
+  border-right-color: var(--green);
+  border-bottom-color: var(--green);
 }
-.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.information::before {
-  border-right-color: var(--information);
-  border-bottom-color: var(--information);
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.green::before {
+  border-right-color: var(--green);
+  border-bottom-color: var(--green);
 }
 /* #endregion */
-/* Border Color -> INFORMATION */
+/* Border Color -> GREEN */
 
-/* #region Border Color -> DARK */
-.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.dark::before {
+/* #region Border Color -> TEAL */
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.teal::before {
   border-right-color: var(--white);
   border-bottom-color: var(--white);
 }
-.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.dark::before {
-  border-right-color: var(--dark);
-  border-bottom-color: var(--dark);
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.teal::before {
+  border-right-color: var(--teal);
+  border-bottom-color: var(--teal);
 }
-.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.dark::before {
-  border-right-color: var(--dark);
-  border-bottom-color: var(--dark);
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.teal::before {
+  border-right-color: var(--teal);
+  border-bottom-color: var(--teal);
+}
+/* #endregion */
+/* Border Color -> TEAL */
+
+/* #region Border Color -> CYAN */
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.cyan::before {
+  border-right-color: var(--white);
+  border-bottom-color: var(--white);
+}
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.cyan::before {
+  border-right-color: var(--cyan);
+  border-bottom-color: var(--cyan);
+}
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.cyan::before {
+  border-right-color: var(--cyan);
+  border-bottom-color: var(--cyan);
+}
+/* #endregion */
+/* Border Color -> CYAN */
+
+/* #region Border Color -> GRAY */
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.gray::before {
+  border-right-color: var(--white);
+  border-bottom-color: var(--white);
+}
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.gray::before {
+  border-right-color: var(--gray);
+  border-bottom-color: var(--gray);
+}
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.gray::before {
+  border-right-color: var(--gray);
+  border-bottom-color: var(--gray);
 }
 /* #endregion */
-/* Border Color -> DARK */
+/* Border Color -> GRAY */
 
 /* #region Border Color -> LIGHT */
 .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.light::before {

package/dist/assets/css/components/form/select/styles.css

@@ -87,8 +87,8 @@
 }
 .ar-select-wrapper > .ar-select > .selections > .items > span.placeholder {
   color: var(--dark);
+  font-weight: 400;
   font-family: var(--system);
-  /* -webkit-text-stroke: 0.25px var(--dark); */
 }
 .ar-select-wrapper > .ar-select > .selections > ul {
   display: flex;

package/dist/assets/css/components/form/switch/core/border.css

@@ -1,89 +1,208 @@
-/* #region Border Color -> PRIMARY */
-.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.primary {
-  box-shadow: 0 0 0 2.5px rgba(var(--primary-rgb), .1);
-}
-.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.primary > .handle {
-  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .5);
+/* #region Border Color -> BLUE */
+.ar-switch-wrapper {
+  > label {
+    > input[type="checkbox"] {
+      + span.blue {
+        background-color: var(--blue-500);
+      }
+
+      &.checked {
+        + .span.blue {
+          background-color: var(--blue-500);
+        }
+      }
+    }
+  }
 }
 /* #endregion */
-/* Border Color -> PRIMARY */
+/* Border Color -> BLUE */
 
-/* #region Border Color -> PRIMARY-LIGHT */
-.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.primary-light {
-  box-shadow: 0 0 0 2.5px rgba(var(--primary-light-rgb), .1);
-}
-.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.primary-light > .handle {
-  box-shadow: 0 0 0 2px rgba(var(--primary-light-rgb), .5);
+/* #region Border Color -> PURPLE */
+.ar-switch-wrapper {
+  > label {
+    > input[type="checkbox"] {
+      + span.purple {
+        background-color: var(--purple-500);
+      }
+
+      &.checked {
+        + .span.purple {
+          background-color: var(--purple-500);
+        }
+      }
+    }
+  }
 }
 /* #endregion */
-/* Border Color -> PRIMARY-LIGHT */
+/* Border Color -> PURPLE */
 
-/* #region Border Color -> SECONDARY */
-.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.secondary {
-  box-shadow: 0 0 0 2.5px rgba(var(--secondary-rgb), .1);
-}
-.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.secondary > .handle {
-  box-shadow: 0 0 0 2px rgba(var(--secondary-rgb), .5);
+/* #region Border Color -> PINK */
+.ar-switch-wrapper {
+  > label {
+    > input[type="checkbox"] {
+      + span.pink {
+        background-color: var(--pink-500);
+      }
+
+      &.checked {
+        + .span.pink {
+          background-color: var(--pink-500);
+        }
+      }
+    }
+  }
 }
 /* #endregion */
-/* Border Color -> SECONDARY */
+/* Border Color -> PINK */
 
-/* #region Border Color -> SUCCESS */
-.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.success {
-  box-shadow: 0 0 0 2.5px rgba(var(--success-rgb), .1);
-}
-.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.success > .handle {
-  box-shadow: 0 0 0 2px rgba(var(--success-rgb), .5);
+/* #region Border Color -> RED */
+.ar-switch-wrapper {
+  > label {
+    > input[type="checkbox"] {
+      + span.red {
+        background-color: var(--red-500);
+      }
+
+      &.checked {
+        + .span.red {
+          background-color: var(--red-500);
+        }
+      }
+    }
+  }
 }
 /* #endregion */
-/* Border Color -> SUCCESS */
+/* Border Color -> RED */
 
-/* #region Border Color -> WARNING */
-.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.warning {
-  box-shadow: 0 0 0 2.5px rgba(var(--warning-rgb), .1);
-}
-.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.warning > .handle {
-  box-shadow: 0 0 0 2px rgba(var(--warning-rgb), .5);
+/* #region Border Color -> ORANGE */
+.ar-switch-wrapper {
+  > label {
+    > input[type="checkbox"] {
+      + span.orange {
+        background-color: var(--orange-500);
+      }
+
+      &.checked {
+        + .span.orange {
+          background-color: var(--orange-500);
+        }
+      }
+    }
+  }
 }
 /* #endregion */
-/* Border Color -> WARNING */
+/* Border Color -> ORANGE */
 
-/* #region Border Color -> DANGER */
-.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.danger {
-  box-shadow: 0 0 0 2.5px rgba(var(--danger-rgb), .1);
-}
-.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.danger > .handle {
-  box-shadow: 0 0 0 2px rgba(var(--danger-rgb), .5);
+/* #region Border Color -> YELLOW */
+.ar-switch-wrapper {
+  > label {
+    > input[type="checkbox"] {
+      + span.yellow {
+        background-color: var(--yellow-500);
+      }
+
+      &.checked {
+        + .span.yellow {
+          background-color: var(--yellow-500);
+        }
+      }
+    }
+  }
 }
 /* #endregion */
-/* Border Color -> DANGER */
+/* Border Color -> YELLOW */
+
+/* #region Border Color -> GREEN */
+.ar-switch-wrapper {
+  > label {
+    > input[type="checkbox"] {
+      + span.green {
+        background-color: var(--green-500);
+      }
 
-/* #region Border Color -> INFORMATION */
-.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.information {
-  box-shadow: 0 0 0 2.5px rgba(var(--information-rgb), .1);
+      &.checked {
+        + .span.green {
+          background-color: var(--green-500);
+        }
+      }
+    }
+  }
 }
-.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.information > .handle {
-  box-shadow: 0 0 0 2px rgba(var(--information-rgb), .5);
+/* #endregion */
+/* Border Color -> GREEN */
+
+/* #region Border Color -> TEAL */
+.ar-switch-wrapper {
+  > label {
+    > input[type="checkbox"] {
+      + span.teal {
+        background-color: var(--teal-500);
+      }
+
+      &.checked {
+        + .span.teal {
+          background-color: var(--teal-500);
+        }
+      }
+    }
+  }
 }
 /* #endregion */
-/* Border Color -> INFORMATION */
+/* Border Color -> TEAL */
+
+/* #region Border Color -> CYAN */
+.ar-switch-wrapper {
+  > label {
+    > input[type="checkbox"] {
+      + span.cyan {
+        background-color: var(--cyan-500);
+      }
 
-/* #region Border Color -> DARK */
-.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.dark {
-  box-shadow: 0 0 0 2.5px rgba(var(--dark-rgb), .1);
+      &.checked {
+        + .span.cyan {
+          background-color: var(--cyan-500);
+        }
+      }
+    }
+  }
 }
-.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.dark > .handle {
-  box-shadow: 0 0 0 2px rgba(var(--dark-rgb), .5);
+/* #endregion */
+/* Border Color -> CYAN */
+
+/* #region Border Color -> GRAY */
+.ar-switch-wrapper {
+  > label {
+    > input[type="checkbox"] {
+      + span.gray {
+        background-color: var(--gray-500);
+      }
+
+      &.checked {
+        + .span.gray {
+          background-color: var(--gray-500);
+        }
+      }
+    }
+  }
 }
 /* #endregion */
-/* Border Color -> DARK */
+/* Border Color -> GRAY */
 
 /* #region Border Color -> LIGHT */
-.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.light {
-  box-shadow: 0 0 0 2.5px rgba(var(--light-rgb), .1);
-}
-.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch.light > .handle {
-  box-shadow: 0 0 0 2px rgba(var(--light-rgb), .5);
+.ar-switch-wrapper {
+  > label {
+    > input[type="checkbox"] {
+      + span.light {
+        background-color: var(--light-500);
+      }
+
+      &.checked {
+        + .span.light {
+          background-color: var(--light-500);
+        }
+      }
+    }
+  }
 }
 /* #endregion */
 /* Border Color -> LIGHT */

package/dist/assets/css/components/form/switch/styles.css

@@ -8,10 +8,8 @@
 .ar-switch-wrapper > label {
   display: flex;
   flex-direction: row;
-  /* justify-content: space-between; */
   align-items: center;
   gap: 0 0.5rem;
-  /* width: 100%; */
   user-select: none;
 }
 .ar-switch-wrapper > label > input[type="checkbox"] {
@@ -22,7 +20,7 @@
   position: relative;
   display: inline-block;
   width: 2.25rem;
-  height: 1rem;
+  height: 1.25rem;
   transition: box-shadow 250ms ease-in-out;
 }
 
@@ -34,14 +32,12 @@
   display: inline-block;
   content: "";
   background-color: var(--white);
-  width: 0.75rem;
-  height: 0.75rem;
+  width: 0.85rem;
+  height: 0.85rem;
   transition: left 150ms, width 150ms 150ms, height 150ms 150ms, box-shadow 150ms 150ms ease-in-out;
 }
 .ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch > .handle {
-  left: calc(2.25rem - 0.9rem);
-  width: 1rem;
-  height: 1rem;
+  left: calc(2.25rem - 1rem);
 }
 
 @import url("./core/border.css");

package/dist/assets/css/components/form/upload/preview-selected-files.css

@@ -1,4 +1,5 @@
 .ar-upload-button > .button.multiple > .preview {
+  position: relative;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -26,6 +27,9 @@
 .ar-upload-button > .button.multiple > .items > .item {
   --size: 5rem;
 
+  display: flex;
+  justify-content: center;
+  align-items: center;
   position: relative;
   min-width: var(--size);
   min-height: var(--size);
@@ -95,7 +99,7 @@
   align-items: center;
   gap: 0.5rem;
   position: absolute;
-  inset: auto 7.5rem 0 0;
+  inset: auto 0 0 0;
   background-color: rgba(var(--black-rgb), 0.75);
   padding: 0.5rem;
   transition: visibility 250ms, opacity 250ms ease-in-out;

package/dist/assets/css/core/ar-core.css

@@ -75,6 +75,8 @@
   --dark-rgb: 52, 58, 64;
 }
 /* #endregion */
+
+@import url("./color-palette.css");
 /* Color Palette */
 
 /* #region Fonts */
@@ -133,7 +135,13 @@
   transition: border 250ms, box-shadow 250ms ease-in-out;
 }
 
-@import url("./variants/filled/filled.css");
+@import url("./variants/filled/styles.css");
+
+.surface {
+  transition: border 250ms, box-shadow 250ms ease-in-out;
+}
+
+@import url("./variants/surface/styles.css");
 
 .outlined {
   background-color: transparent;
@@ -143,7 +151,7 @@
   transition: border 250ms, box-shadow 250ms ease-in-out;
 }
 
-@import url("./variants/outlined/outlined.css");
+@import url("./variants/outlined/styles.css");
 
 .dashed {
   background-color: transparent;