@crystallize/design-system 1.16.5 → 1.17.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @crystallize/design-system
 
+## 1.17.0
+
+### Minor Changes
+
+- 1d91b61: Add several new icons to the design system. Icons like - check, clock, download, wand and few more.
+
+## 1.16.6
+
+### Patch Changes
+
+- 37b8e62: Add z-index 100 to tooltip so it can be shown in modals also make the tooltip side prop optional with default value ot top.
+
 ## 1.16.5
 
 ### Patch Changes

package/dist/index.css

@@ -463,6 +463,8 @@ button {
     "Noto Color Emoji";
   color: rgb(var(--c-color-gray));
 }
+.-translate-y-1\/3,
+.translate-x-1\/3,
 .transform,
 .active\:scale-95 {
   --tw-translate-x: 0;
@@ -538,9 +540,15 @@ button {
 .left-2 {
   left: 0.5rem;
 }
+.right-0 {
+  right: 0px;
+}
 .right-2 {
   right: 0.5rem;
 }
+.top-0 {
+  top: 0px;
+}
 .top-2 {
   top: 0.5rem;
 }
@@ -567,6 +575,9 @@ button {
 .block {
   display: block;
 }
+.inline-block {
+  display: inline-block;
+}
 .inline {
   display: inline;
 }
@@ -639,6 +650,14 @@ button {
 .flex-1 {
   flex: 1 1 0%;
 }
+.-translate-y-1\/3 {
+  --tw-translate-y: -33.333333%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.translate-x-1\/3 {
+  --tw-translate-x: 33.333333%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -736,6 +755,13 @@ button {
 .border {
   border-width: 1px;
 }
+.border-solid {
+  border-style: solid;
+}
+.border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
 .bg-elevate {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
@@ -822,6 +848,9 @@ button {
 .leading-6 {
   line-height: 1.5rem;
 }
+.leading-\[0\] {
+  line-height: 0;
+}
 .text-gray {
   color: rgb(var(--c-color-gray));
 }
@@ -1759,6 +1788,49 @@ button {
   color: rgb(var(--c-color-gray-500-400) / var(--tw-text-opacity));
 }
 
+/* src/tooltip/tooltip.css */
+.c-tooltip-content {
+  z-index: 100;
+  user-select: none;
+  border-radius: 0.375rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 500;
+  font-style: italic;
+  line-height: 1;
+  --tw-text-opacity: 1;
+  color: rgb(var(--c-color-gray-500-400) / var(--tw-text-opacity));
+  --tw-shadow: hsl(206 22% 7%/15%) 0px 10px 18px -10px, hsl(206 22% 7%/10%) 0px 2px 20px -15px;
+  --tw-shadow-colored: 0px 10px 18px -10px var(--tw-shadow-color), 0px 2px 20px -15px var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+  transition-property:
+    color,
+    background-color,
+    border-color,
+    text-decoration-color,
+    fill,
+    stroke,
+    opacity,
+    box-shadow,
+    transform,
+    filter,
+    backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.c-tooltip-arrow {
+  fill: #fff;
+}
+
 /* src/progress/progress.css */
 .c-progress-root {
   position: relative;
@@ -3576,48 +3648,6 @@ button {
   outline: 2px solid rgb(60, 132, 244);
 }
 
-/* src/tooltip/tooltip.css */
-.c-tooltip-content {
-  user-select: none;
-  border-radius: 0.375rem;
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-weight: 500;
-  font-style: italic;
-  line-height: 1;
-  --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-500-400) / var(--tw-text-opacity));
-  --tw-shadow: hsl(206 22% 7%/15%) 0px 10px 18px -10px, hsl(206 22% 7%/10%) 0px 2px 20px -15px;
-  --tw-shadow-colored: 0px 10px 18px -10px var(--tw-shadow-color), 0px 2px 20px -15px var(--tw-shadow-color);
-  box-shadow:
-    var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000),
-    var(--tw-shadow);
-  transition-property:
-    color,
-    background-color,
-    border-color,
-    text-decoration-color,
-    fill,
-    stroke,
-    opacity,
-    box-shadow,
-    transform,
-    filter,
-    backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-.c-tooltip-arrow {
-  fill: #fff;
-}
-
 /* src/switch/switch.css */
 .c-switch-root {
   position: relative;