@orfium/ictinus 5.41.3 → 5.42.0

package/dist/vanilla-extract/global.css.ts.vanilla.css

@@ -0,0 +1 @@
+@font-face{src:url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2) format("woff2");font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-family:Roboto}@font-face{src:url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2) format("woff2");font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-family:Roboto}@font-face{src:url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2) format("woff2");font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-family:Roboto}@font-face{src:url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2) format("woff2");font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-family:Roboto}@font-face{src:url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2) format("woff2");font-style:normal;font-weight:900;font-stretch:100%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-family:Roboto}@font-face{src:url(https://fonts.gstatic.com/s/robotomono/v30/L0x5DF4xlVMF-BfR8bXMIjhLq3-cXbKD.woff2) format("woff2");font-style:normal;font-weight:300;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-family:Roboto Mono}@font-face{src:url(https://fonts.gstatic.com/s/robotomono/v30/L0x5DF4xlVMF-BfR8bXMIjhLq3-cXbKD.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-family:Roboto Mono}@font-face{src:url(https://fonts.gstatic.com/s/robotomono/v30/L0x5DF4xlVMF-BfR8bXMIjhLq3-cXbKD.woff2) format("woff2");font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-family:Roboto Mono}@font-face{src:url(https://fonts.gstatic.com/s/robotomono/v30/L0x5DF4xlVMF-BfR8bXMIjhLq3-cXbKD.woff2) format("woff2");font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-family:Roboto Mono}@layer ictinus.reset;@layer ictinus.reset{*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-width:thin;scrollbar-color:var(--ictinus-color-palette-primary-muted) transparent;border:0 solid}html,body{background-color:var(--ictinus-color-background-default);color:var(--ictinus-color-text-default-primary);font-family:var(--ictinus-font-sans)}a,area,button,[role=button],input:not([type=range]),label,select,summary,textarea{text-decoration:none}[role=button]{background:none}input,button,select,optgroup,textarea{border:none;line-height:inherit;color:inherit;font-family:inherit;font-size:inherit}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:none}input,textarea{appearance:none;-webkit-appearance:none}ul,ol{list-style:none}button,a{cursor:pointer}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orfium/ictinus",
-  "version": "5.41.3",
+  "version": "5.42.0",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.js",
@@ -118,7 +118,7 @@
     "recharts": "^2.8.0",
     "tslib": "^2.4.1",
     "uuid": "^8.3.2",
-    "@orfium/tokens": "5.1.2"
+    "@orfium/tokens": "5.1.3"
   },
   "overrides": {
     "trim": "^1.0.0",

package/src/components/Link/Link.style.ts

@@ -2,10 +2,10 @@ import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
 import type { Theme } from 'theme';
 
+import { generateStylesFromTokens } from 'components/Typography/utils';
 import type { LinkTokens } from './Link.tokens';
 import { getLinkTokens } from './Link.tokens';
 import type { LinkProps } from './Link.types';
-import { generateStylesFromTokens } from 'components/Typography/utils';
 
 export const linkContainer =
   ({
@@ -62,10 +62,9 @@ export const linkContainer =
 
       opacity: ${isDisabled ? theme.tokens.disabledState.get('default') : 1};
 
-      width: fit-content;
       align-items: center;
       cursor: ${isDisabled ? 'default' : 'pointer'};
-      pointer-events: ${isDisabled ? 'none' : 'default'};
+      pointer-events: ${isDisabled ? 'none' : 'auto'};
 
       ${generateStylesFromTokens(tokens(`${placement}.${size}` as LinkTokens))}
     `;

package/src/components/Link/Link.tsx

@@ -1,11 +1,11 @@
 import useTheme from 'hooks/useTheme';
 import React from 'react';
 
+import Icon from 'components/Icon';
+import { useSlotProps } from '../utils/Slots';
 import { iconSize } from './constants';
 import { linkContainer } from './Link.style';
 import type { LinkProps } from './Link.types';
-import { useSlotProps } from '../utils/Slots';
-import Icon from 'components/Icon';
 
 const Link = React.forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
   props = useSlotProps(props, 'link');
@@ -37,7 +37,7 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
       {...componentProps}
       {...rest}
     >
-      <span>{children}</span>
+      {children}
       {iconName && (
         <Icon
           name={iconName}

package/src/index.ts

@@ -287,3 +287,6 @@ export {
   spacing,
   typography,
 };
+
+export * from './layers';
+export * from './sprinkles';

package/src/sprinkles/properties.css.ts

@@ -1,4 +1,4 @@
-import { vars } from '@orfium/tokens';
+import { breakpoints, vars } from '@orfium/tokens';
 import { defineProperties } from '@vanilla-extract/sprinkles';
 
 import { layers } from '../layers';
@@ -8,12 +8,6 @@ import { layers } from '../layers';
 import '../vanilla-extract/global.css';
 /* DO NOT MOVE THIS LINE */
 
-export const breakpoints = {
-  md: 768 as const,
-  lg: 1024 as const,
-  xl: 1280 as const,
-} as const;
-
 // Flattened colors for sprinkles - autogenerating them here breaks autocomplete
 // Can also supply them flattened from the actual tokens to avoid duplication
 const colors = {
@@ -241,9 +235,9 @@ const typography = {
 
 export const responsiveProps = defineProperties({
   '@layer': layers.utilities,
-  defaultCondition: 'xs',
+  defaultCondition: 'base',
   conditions: {
-    xs: {},
+    base: {},
     md: { '@media': `(min-width: ${breakpoints.md}px)` },
     lg: { '@media': `(min-width: ${breakpoints.lg}px)` },
     xl: { '@media': `(min-width: ${breakpoints.xl}px)` },
@@ -298,6 +292,10 @@ export const responsiveProps = defineProperties({
     paddingLeft: vars.spacing,
     paddingRight: vars.spacing,
     paddingTop: vars.spacing,
+    borderTopWidth: vars['border-width'],
+    borderRightWidth: vars['border-width'],
+    borderBottomWidth: vars['border-width'],
+    borderLeftWidth: vars['border-width'],
   },
   shorthands: {
     maxH: ['maxHeight'],
@@ -319,6 +317,11 @@ export const responsiveProps = defineProperties({
     mr: ['marginRight'],
     mx: ['marginLeft', 'marginRight'],
     my: ['marginTop', 'marginBottom'],
+    border: ['borderBottomWidth', 'borderLeftWidth', 'borderRightWidth', 'borderTopWidth'],
+    borderB: ['borderBottomWidth'],
+    borderL: ['borderLeftWidth'],
+    borderR: ['borderRightWidth'],
+    borderT: ['borderTopWidth'],
   },
 });
 
@@ -327,15 +330,11 @@ export const unresponsiveProps = defineProperties({
   properties: {
     borderColor: borderTokens,
     borderStyle: ['solid', 'dashed'],
-    borderLeftWidth: vars['border-width'],
     borderRadius: vars['border-radius'],
     borderTopLeftRadius: vars['border-radius'],
     borderTopRightRadius: vars['border-radius'],
     borderBottomLeftRadius: vars['border-radius'],
     borderBottomRightRadius: vars['border-radius'],
-    borderRightWidth: vars['border-width'],
-    borderTopWidth: vars['border-width'],
-    borderBottomWidth: vars['border-width'],
     boxShadow: vars['box-shadow'],
     cursor: ['default', 'pointer', 'not-allowed'] as const,
     overflowX: ['auto', 'hidden', 'visible'] as const,
@@ -355,7 +354,7 @@ export const unresponsiveProps = defineProperties({
     textTransform: ['capitalize', 'none', 'uppercase'] as const,
     textDecoration: ['underline'] as const,
     visibility: ['hidden', 'visible'] as const,
-    wordBreak: ['break-word'] as const,
+    wordBreak: ['break-all', 'break-word'] as const,
     wordWrap: ['normal', 'break-word'] as const,
     textAlign: ['end', 'start', 'center', 'justify'] as const,
     transitionProperty: {
@@ -391,11 +390,6 @@ export const unresponsiveProps = defineProperties({
   },
   shorthands: {
     overflow: ['overflowX', 'overflowY'],
-    border: ['borderBottomWidth', 'borderLeftWidth', 'borderRightWidth', 'borderTopWidth'],
-    borderB: ['borderBottomWidth'],
-    borderL: ['borderLeftWidth'],
-    borderR: ['borderRightWidth'],
-    borderT: ['borderTopWidth'],
     shadow: ['boxShadow'],
     rounded: ['borderRadius'],
     roundedT: ['borderTopLeftRadius', 'borderTopRightRadius'],

package/src/vanilla/Tooltip/Tooltip.tsx

@@ -9,7 +9,6 @@ import {
 } from 'react';
 import type { TooltipProps as TooltipPrimitiveProps } from 'react-aria-components';
 import {
-  composeRenderProps,
   Focusable,
   OverlayArrow,
   Tooltip as TooltipPrimitive,
@@ -17,6 +16,8 @@ import {
 } from 'react-aria-components';
 
 import { cn } from '../../utils/cn';
+import { type ExtendProps } from '../../utils/ExtendProps';
+import { Box, extractBoxProps, type BoxProps } from '../Box';
 import * as styles from './Tooltip.css';
 
 const TooltipContext = createContext<{
@@ -68,56 +69,58 @@ const Tooltip = ({
 
 Tooltip.displayName = 'Tooltip';
 
-interface TooltipContentProps
-  extends Omit<TooltipPrimitiveProps, 'children'>,
-    NonNullable<styles.TooltipVariants> {
-  showArrow?: boolean;
-  children?: ReactNode;
-}
+type TooltipContentProps = Omit<TooltipPrimitiveProps, 'children'> &
+  ExtendProps<BoxProps, NonNullable<styles.TooltipVariants>> & {
+    showArrow?: boolean;
+    children?: ReactNode;
+  };
 
 const TooltipContent = ({
   offset = 8,
   inverse = false,
   showArrow = true,
   children,
+  className,
   ...props
 }: TooltipContentProps) => {
+  const { boxProps, restProps } = extractBoxProps(props);
+
   return (
-    <TooltipPrimitive
-      {...props}
-      offset={offset}
-      className={composeRenderProps(props.className, (className) =>
-        cn(styles.tooltip({ inverse }), className)
-      )}
-    >
-      {showArrow && (
-        <OverlayArrow>
-          {inverse ? (
-            <svg width={18} height={8} viewBox="0 0 18 8" className={styles.arrowInverse()}>
-              <path d="M9.00744 6.52304L1.6397 0.000488281L16.3752 0.000489658L9.00744 6.52304Z" />
-              <path
-                d="M9.00337 6.51095L16.3588 0.00158653H18.0034L9.00337 8.00049L0.00337219 0.00158653L1.6397 0.000488281L9.00337 6.51095Z"
-                className={styles.arrowInverseBorder}
-              />
-            </svg>
-          ) : (
-            <svg width={15} height={6} viewBox="0 0 15 6" className={styles.arrow()}>
-              <path d="M7.5 6L0.500001 -1.22392e-06L14.5 0L7.5 6Z" />
-            </svg>
-          )}
-        </OverlayArrow>
-      )}
-      {children}
-    </TooltipPrimitive>
+    <Box asChild className={cn(styles.tooltip({ inverse }), className)} {...boxProps}>
+      <TooltipPrimitive {...restProps} offset={offset}>
+        {showArrow && (
+          <OverlayArrow>
+            {inverse ? (
+              <svg width={18} height={8} viewBox="0 0 18 8" className={styles.arrowInverse()}>
+                <path d="M9.00744 6.52304L1.6397 0.000488281L16.3752 0.000489658L9.00744 6.52304Z" />
+                <path
+                  d="M9.00337 6.51095L16.3588 0.00158653H18.0034L9.00337 8.00049L0.00337219 0.00158653L1.6397 0.000488281L9.00337 6.51095Z"
+                  className={styles.arrowInverseBorder}
+                />
+              </svg>
+            ) : (
+              <svg width={15} height={6} viewBox="0 0 15 6" className={styles.arrow()}>
+                <path d="M7.5 6L0.500001 -1.22392e-06L14.5 0L7.5 6Z" />
+              </svg>
+            )}
+          </OverlayArrow>
+        )}
+        {children}
+      </TooltipPrimitive>
+    </Box>
   );
 };
 
+TooltipContent.displayName = 'TooltipContent';
+
 function TooltipTrigger({ ...props }: ComponentProps<typeof Focusable>) {
   const { triggerRef } = useContext(TooltipContext);
 
   return <Focusable ref={triggerRef} data-slot="tooltip-trigger" {...props} />;
 }
 
+TooltipTrigger.displayName = 'TooltipTrigger';
+
 const hasTruncatedContent = (element: HTMLElement) => {
   let truncated = false;