@crystallize/design-system 1.16.5 → 1.16.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.16.5",
+  "version": "1.16.6",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/input-with-label/input-with-label.tsx

@@ -4,6 +4,7 @@ import { cva, cx, VariantProps } from 'class-variance-authority';
 import { Triangle } from '../iconography/triangle';
 import { Input } from '../input';
 import { Label } from '../label';
+import { Tooltip } from '../tooltip';
 
 const inputWithLabelStyles = cva(['c-input-with-label'], {
   variants: {
@@ -45,9 +46,9 @@ export const InputWithLabel = forwardRef<InputWithLabelRef, InputWithLabelProps>
           <span className="c-input-with-label-input-wrap">
             <Input className={cx('c-input-with-label-input', className)} ref={ref} id={id} {...delegated} />
             {!append && !errorMessage ? null : (
-              <div className="c-input-with-label-append" title={errorMessage}>
-                {errorMessage ? <Triangle /> : append}
-              </div>
+              <Tooltip content={errorMessage}>
+                <div className="c-input-with-label-append">{errorMessage ? <Triangle /> : append}</div>
+              </Tooltip>
             )}
           </span>
         </Label>

package/src/tooltip/tooltip.css

@@ -1,5 +1,5 @@
 .c-tooltip-content {
-  @apply select-none rounded-md bg-white px-4 py-2 text-xs font-medium italic leading-none text-gray-500-400 shadow-tooltip transition;
+  @apply z-[100] select-none rounded-md bg-white px-4 py-2 text-xs font-medium italic leading-none text-gray-500-400 shadow-tooltip transition;
 }
 
 .c-tooltip-arrow {

package/src/tooltip/tooltip.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
 
-type TooltipProps = Pick<RadixTooltip.TooltipContentProps, 'side'> & {
+type TooltipProps = Partial<Pick<RadixTooltip.TooltipContentProps, 'side'>> & {
   children: ReactNode;
   content: ReactNode;
   delayDuration?: number;
@@ -12,7 +12,7 @@ type TooltipProps = Pick<RadixTooltip.TooltipContentProps, 'side'> & {
 export function Tooltip({
   children,
   content,
-  side,
+  side = 'top',
   align = 'center',
   defaultOpen = false,
   delayDuration = 800,