@crystallize/design-system 1.16.5 → 1.16.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @crystallize/design-system
 
+## 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

@@ -1759,6 +1759,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 +3619,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;

package/dist/index.d.ts

@@ -425,7 +425,7 @@ declare function RichTextEditor({ initialData, language, labelTranslations, ...r
     initialData?: CrystallizeRichText;
 }): JSX.Element;
 
-type TooltipProps = Pick<RadixTooltip.TooltipContentProps, 'side'> & {
+type TooltipProps = Partial<Pick<RadixTooltip.TooltipContentProps, 'side'>> & {
     children: ReactNode;
     content: ReactNode;
     delayDuration?: number;