twenty-ui 1.0.0-alpha.2 → 2.41.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twenty-ui",
-  "version": "1.0.0-alpha.2",
+  "version": "2.41.0",
   "description": "Twenty's shared React UI component library.",
   "license": "MIT",
   "repository": {
@@ -29,7 +29,7 @@
     "**/*.scss"
   ],
   "devDependencies": {
-    "@argos-ci/storybook": "~6.0.18",
+    "@argos-ci/storybook": "6.2.3",
     "@fontsource/inter": "^5.2.8",
     "@prettier/sync": "^0.5.2",
     "@size-limit/preset-small-lib": "^12.1.0",
@@ -53,6 +53,7 @@
     "jsdom": "^30.0.1",
     "prettier": "^3.1.1",
     "react": "^19.2.0",
+    "react-docgen-typescript": "^2.2.2",
     "react-dom": "^19.2.0",
     "sass": "^1.83.0",
     "sass-embedded": "^1.83.0",
@@ -69,6 +70,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.8.0",
+    "@base-ui/utils": "0.4.0",
     "@monaco-editor/react": "^4.7.0",
     "@sniptt/guards": "^0.2.0",
     "@tabler/icons-react": "^3.31.0",
@@ -102,61 +104,76 @@
     "./style.css": "./dist/style.css",
     "./theme-light.css": "./dist/theme-light.css",
     "./theme-dark.css": "./dist/theme-dark.css",
-    "./accessibility": {
-      "types": "./dist/accessibility/index.d.ts",
-      "import": "./dist/accessibility.mjs",
-      "require": "./dist/accessibility.cjs"
-    },
     "./assets": {
       "types": "./dist/assets/index.d.ts",
       "import": "./dist/assets.mjs",
       "require": "./dist/assets.cjs"
     },
-    "./data-display": {
-      "types": "./dist/data-display/index.d.ts",
-      "import": "./dist/data-display.mjs",
-      "require": "./dist/data-display.cjs"
-    },
-    "./feedback": {
-      "types": "./dist/feedback/index.d.ts",
-      "import": "./dist/feedback.mjs",
-      "require": "./dist/feedback.cjs"
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components.mjs",
+      "require": "./dist/components.cjs"
     },
     "./icon": {
       "types": "./dist/icon/index.d.ts",
       "import": "./dist/icon.mjs",
       "require": "./dist/icon.cjs"
     },
-    "./input": {
-      "types": "./dist/input/index.d.ts",
-      "import": "./dist/input.mjs",
-      "require": "./dist/input.cjs"
+    "./primitives": {
+      "types": "./dist/primitives/index.d.ts",
+      "import": "./dist/primitives.mjs",
+      "require": "./dist/primitives.cjs"
+    },
+    "./primitives/accessibility": {
+      "types": "./dist/primitives/accessibility/index.d.ts",
+      "import": "./dist/primitives/accessibility.mjs",
+      "require": "./dist/primitives/accessibility.cjs"
+    },
+    "./primitives/data-display": {
+      "types": "./dist/primitives/data-display/index.d.ts",
+      "import": "./dist/primitives/data-display.mjs",
+      "require": "./dist/primitives/data-display.cjs"
+    },
+    "./primitives/feedback": {
+      "types": "./dist/primitives/feedback/index.d.ts",
+      "import": "./dist/primitives/feedback.mjs",
+      "require": "./dist/primitives/feedback.cjs"
     },
-    "./json-visualizer": {
-      "types": "./dist/json-visualizer/index.d.ts",
-      "import": "./dist/json-visualizer.mjs",
-      "require": "./dist/json-visualizer.cjs"
+    "./primitives/input": {
+      "types": "./dist/primitives/input/index.d.ts",
+      "import": "./dist/primitives/input.mjs",
+      "require": "./dist/primitives/input.cjs"
     },
-    "./layout": {
-      "types": "./dist/layout/index.d.ts",
-      "import": "./dist/layout.mjs",
-      "require": "./dist/layout.cjs"
+    "./primitives/json-visualizer": {
+      "types": "./dist/primitives/json-visualizer/index.d.ts",
+      "import": "./dist/primitives/json-visualizer.mjs",
+      "require": "./dist/primitives/json-visualizer.cjs"
     },
-    "./navigation": {
-      "types": "./dist/navigation/index.d.ts",
-      "import": "./dist/navigation.mjs",
-      "require": "./dist/navigation.cjs"
+    "./primitives/layout": {
+      "types": "./dist/primitives/layout/index.d.ts",
+      "import": "./dist/primitives/layout.mjs",
+      "require": "./dist/primitives/layout.cjs"
+    },
+    "./primitives/navigation": {
+      "types": "./dist/primitives/navigation/index.d.ts",
+      "import": "./dist/primitives/navigation.mjs",
+      "require": "./dist/primitives/navigation.cjs"
+    },
+    "./primitives/surfaces": {
+      "types": "./dist/primitives/surfaces/index.d.ts",
+      "import": "./dist/primitives/surfaces.mjs",
+      "require": "./dist/primitives/surfaces.cjs"
+    },
+    "./primitives/typography": {
+      "types": "./dist/primitives/typography/index.d.ts",
+      "import": "./dist/primitives/typography.mjs",
+      "require": "./dist/primitives/typography.cjs"
     },
     "./styles": {
       "types": "./dist/styles/index.d.ts",
       "import": "./dist/styles.mjs",
       "require": "./dist/styles.cjs"
     },
-    "./surfaces": {
-      "types": "./dist/surfaces/index.d.ts",
-      "import": "./dist/surfaces.mjs",
-      "require": "./dist/surfaces.cjs"
-    },
     "./testing": {
       "types": "./dist/testing/index.d.ts",
       "import": "./dist/testing.mjs",
@@ -172,11 +189,6 @@
       "import": "./dist/theme-constants.mjs",
       "require": "./dist/theme-constants.cjs"
     },
-    "./typography": {
-      "types": "./dist/typography/index.d.ts",
-      "import": "./dist/typography.mjs",
-      "require": "./dist/typography.cjs"
-    },
     "./utilities": {
       "types": "./dist/utilities/index.d.ts",
       "import": "./dist/utilities.mjs",
@@ -185,39 +197,48 @@
   },
   "typesVersions": {
     "*": {
-      "accessibility": [
-        "dist/accessibility/index.d.ts"
-      ],
       "assets": [
         "dist/assets/index.d.ts"
       ],
-      "data-display": [
-        "dist/data-display/index.d.ts"
-      ],
-      "feedback": [
-        "dist/feedback/index.d.ts"
+      "components": [
+        "dist/components/index.d.ts"
       ],
       "icon": [
         "dist/icon/index.d.ts"
       ],
-      "input": [
-        "dist/input/index.d.ts"
+      "primitives": [
+        "dist/primitives/index.d.ts"
+      ],
+      "primitives/accessibility": [
+        "dist/primitives/accessibility/index.d.ts"
+      ],
+      "primitives/data-display": [
+        "dist/primitives/data-display/index.d.ts"
+      ],
+      "primitives/feedback": [
+        "dist/primitives/feedback/index.d.ts"
       ],
-      "json-visualizer": [
-        "dist/json-visualizer/index.d.ts"
+      "primitives/input": [
+        "dist/primitives/input/index.d.ts"
       ],
-      "layout": [
-        "dist/layout/index.d.ts"
+      "primitives/json-visualizer": [
+        "dist/primitives/json-visualizer/index.d.ts"
       ],
-      "navigation": [
-        "dist/navigation/index.d.ts"
+      "primitives/layout": [
+        "dist/primitives/layout/index.d.ts"
+      ],
+      "primitives/navigation": [
+        "dist/primitives/navigation/index.d.ts"
+      ],
+      "primitives/surfaces": [
+        "dist/primitives/surfaces/index.d.ts"
+      ],
+      "primitives/typography": [
+        "dist/primitives/typography/index.d.ts"
       ],
       "styles": [
         "dist/styles/index.d.ts"
       ],
-      "surfaces": [
-        "dist/surfaces/index.d.ts"
-      ],
       "testing": [
         "dist/testing/index.d.ts"
       ],
@@ -227,9 +248,6 @@
       "theme-constants": [
         "dist/theme-constants/index.d.ts"
       ],
-      "typography": [
-        "dist/typography/index.d.ts"
-      ],
       "utilities": [
         "dist/utilities/index.d.ts"
       ]

package/dist/HorizontalSeparator-B0KT6025.js

@@ -1,70 +0,0 @@
-import { s as c } from "./theme-constants-Bpkh40Q_.js";
-import { a as v } from "./typography-BdBVEyRT.js";
-import { Fragment as z, jsx as a, jsxs as p } from "react/jsx-runtime";
-import { useState as d } from "react";
-var S = "_area_10ggy_1", h = "_bar_10ggy_10", m = {
-  area: S,
-  bar: h
-}, C = ({ onPointerDown: e, onPointerMove: t, onPointerUp: r, style: s }) => /* @__PURE__ */ a("div", {
-  className: m.area,
-  onPointerDown: e,
-  onPointerMove: t,
-  onPointerUp: r,
-  style: s,
-  children: /* @__PURE__ */ a("div", { className: m.bar })
-}), u = 50, R = 500, Z = ({ initialSize: e, axis: t = "y" }) => {
-  const [r, s] = d(e), [o, n] = d(null);
-  return {
-    size: r,
-    handleResizeStart: (i) => {
-      i.target.setPointerCapture(i.pointerId), n({
-        startPosition: t === "y" ? i.clientY : i.clientX,
-        startSize: r
-      });
-    },
-    handleResizeMove: (i) => {
-      if (!c(o)) return;
-      const _ = (t === "y" ? i.clientY : i.clientX) - o.startPosition;
-      s(Math.min(R, Math.max(u, o.startSize + _)));
-    },
-    handleResizeEnd: () => {
-      n(null);
-    }
-  };
-}, f = "_separator_qi3ml_1", y = "_separatorContainer_qi3ml_17", E = "_line_qi3ml_29", N = "_text_qi3ml_38", l = {
-  separator: f,
-  separatorContainer: y,
-  line: E,
-  text: N
-}, P = ({ visible: e = !0, text: t = "", noMargin: r = !1, color: s }) => {
-  const o = s ? { "--horizontal-separator-color": s } : void 0;
-  return /* @__PURE__ */ a(z, { children: t ? /* @__PURE__ */ p("div", {
-    className: l.separatorContainer,
-    "data-no-margin": r || void 0,
-    style: o,
-    children: [
-      /* @__PURE__ */ a("div", {
-        className: l.line,
-        "data-visible": e || void 0
-      }),
-      /* @__PURE__ */ a(v, { children: /* @__PURE__ */ a("span", {
-        className: l.text,
-        children: t
-      }) }),
-      /* @__PURE__ */ a("div", {
-        className: l.line,
-        "data-visible": e || void 0
-      })
-    ]
-  }) : /* @__PURE__ */ a("div", {
-    className: l.separator,
-    "data-visible": e || void 0,
-    "data-no-margin": r || void 0,
-    style: o
-  }) });
-};
-export {
-  Z as n,
-  C as r,
-  P as t
-};

package/dist/HorizontalSeparator-BxdfXfBV.cjs

@@ -1 +0,0 @@
-const _=require("./theme-constants-27fpVK7_.cjs"),v=require("./typography-PhK1tL-t.cjs");let e=require("react/jsx-runtime"),d=require("react");var m="_area_10ggy_1",z="_bar_10ggy_10",c={area:m,bar:z},S=({onPointerDown:a,onPointerMove:t,onPointerUp:r,style:s})=>(0,e.jsx)("div",{className:c.area,onPointerDown:a,onPointerMove:t,onPointerUp:r,style:s,children:(0,e.jsx)("div",{className:c.bar})}),p=50,h=500,R=({initialSize:a,axis:t="y"})=>{const[r,s]=(0,d.useState)(a),[n,o]=(0,d.useState)(null);return{size:r,handleResizeStart:i=>{i.target.setPointerCapture(i.pointerId),o({startPosition:t==="y"?i.clientY:i.clientX,startSize:r})},handleResizeMove:i=>{if(!_.isDefined(n))return;const u=(t==="y"?i.clientY:i.clientX)-n.startPosition;s(Math.min(h,Math.max(p,n.startSize+u)))},handleResizeEnd:()=>{o(null)}}},j="_separator_qi3ml_1",y="_separatorContainer_qi3ml_17",x="_line_qi3ml_29",b="_text_qi3ml_38",l={separator:j,separatorContainer:y,line:x,text:b},f=({visible:a=!0,text:t="",noMargin:r=!1,color:s})=>{const n=s?{"--horizontal-separator-color":s}:void 0;return(0,e.jsx)(e.Fragment,{children:t?(0,e.jsxs)("div",{className:l.separatorContainer,"data-no-margin":r||void 0,style:n,children:[(0,e.jsx)("div",{className:l.line,"data-visible":a||void 0}),(0,e.jsx)(v.Label,{children:(0,e.jsx)("span",{className:l.text,children:t})}),(0,e.jsx)("div",{className:l.line,"data-visible":a||void 0})]}):(0,e.jsx)("div",{className:l.separator,"data-visible":a||void 0,"data-no-margin":r||void 0,style:n})})};Object.defineProperty(exports,"HorizontalSeparator",{enumerable:!0,get:function(){return f}});Object.defineProperty(exports,"ResizeHandle",{enumerable:!0,get:function(){return S}});Object.defineProperty(exports,"useResizeHandle",{enumerable:!0,get:function(){return R}});

package/dist/accessibility.cjs

@@ -1 +0,0 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./accessibility-Cx4HvKc4.cjs"),i=require("./handleClickableElementKeyDown-CByqtBhO.cjs");exports.VisibilityHidden=e.VisibilityHidden;exports.VisibilityHiddenInput=e.VisibilityHiddenInput;exports.handleClickableElementKeyDown=i.handleClickableElementKeyDown;

package/dist/accessibility.mjs

@@ -1,7 +0,0 @@
-import { n as t, t as e } from "./accessibility-DqRb9dOq.js";
-import { t as l } from "./handleClickableElementKeyDown-C8Uz61XJ.js";
-export {
-  t as VisibilityHidden,
-  e as VisibilityHiddenInput,
-  l as handleClickableElementKeyDown
-};

package/dist/data-display/Avatar/Avatar.d.ts

@@ -1,20 +0,0 @@
-import { AvatarSize } from './types/AvatarSize';
-import { AvatarType } from './types/AvatarType';
-import { IconComponent } from '../../icon/types/IconComponent';
-import { Nullable } from '../../utilities/types/Nullable';
-export type AvatarProps = {
-    avatarUrl?: string | null;
-    className?: string;
-    size?: AvatarSize;
-    placeholder: string | undefined;
-    placeholderColorSeed?: string;
-    Icon?: IconComponent;
-    iconColor?: string;
-    type?: Nullable<AvatarType>;
-    color?: string;
-    backgroundColor?: string;
-    borderColor?: string;
-    pulsing?: boolean;
-    onClick?: () => void;
-};
-export declare const Avatar: ({ avatarUrl, className, size, placeholder, placeholderColorSeed, Icon, iconColor, onClick, type, color, backgroundColor, borderColor, pulsing, }: AvatarProps) => import("react").JSX.Element;

package/dist/data-display/Avatar/internal/AvatarImageLoadErrorEffect.d.ts

@@ -1,5 +0,0 @@
-export type AvatarImageLoadErrorEffectProps = {
-    avatarImageURI: string;
-    onImageLoadError: (erroredImageURI: string) => void;
-};
-export declare const AvatarImageLoadErrorEffect: ({ avatarImageURI, onImageLoadError, }: AvatarImageLoadErrorEffectProps) => import("react").JSX.Element;

package/dist/data-display/Avatar/types/AvatarType.d.ts

@@ -1 +0,0 @@
-export type AvatarType = 'squared' | 'rounded' | 'icon' | 'app';

package/dist/data-display/AvatarOrIcon/AvatarOrIcon.d.ts

@@ -1,15 +0,0 @@
-import { AvatarType } from '../Avatar/types/AvatarType';
-import { IconComponent } from '../../icon/types/IconComponent';
-import { Nullable } from '../../utilities';
-export type AvatarOrIconProps = {
-    placeholder?: string;
-    avatarUrl?: string;
-    avatarType?: Nullable<AvatarType>;
-    Icon?: IconComponent;
-    IconColor?: string;
-    IconBackgroundColor?: string;
-    isIconInverted?: boolean;
-    placeholderColorSeed?: string;
-    onClick?: () => void;
-};
-export declare const AvatarOrIcon: ({ Icon, placeholderColorSeed, avatarType, avatarUrl, placeholder, isIconInverted, IconColor, IconBackgroundColor, onClick, }: AvatarOrIconProps) => import("react").JSX.Element;

package/dist/data-display/Chip/Chip.d.ts

@@ -1,38 +0,0 @@
-import { ReactNode } from 'react';
-import { TooltipPosition } from '../../surfaces/AppTooltip/AppTooltip';
-export declare enum ChipSize {
-    Large = "large",
-    Small = "small"
-}
-export declare enum ChipAccent {
-    TextPrimary = "text-primary",
-    TextSecondary = "text-secondary"
-}
-export declare enum ChipVariant {
-    Highlighted = "highlighted",
-    Regular = "regular",
-    Transparent = "transparent",
-    Rounded = "rounded",
-    Static = "static"
-}
-export type ChipProps = {
-    size?: ChipSize;
-    disabled?: boolean;
-    clickable?: boolean;
-    label: string;
-    tooltipLabel?: string;
-    tooltipPlace?: TooltipPosition;
-    alwaysShowTooltip?: boolean;
-    isLabelHidden?: boolean;
-    isBold?: boolean;
-    maxWidth?: number;
-    variant?: ChipVariant;
-    accent?: ChipAccent;
-    leftComponent?: ReactNode | null;
-    rightComponent?: (() => ReactNode) | ReactNode | null;
-    rightComponentDivider?: boolean;
-    className?: string;
-    forceEmptyText?: boolean;
-    emptyLabel?: string;
-};
-export declare const Chip: ({ size, label, tooltipLabel, tooltipPlace, alwaysShowTooltip, isLabelHidden, isBold, disabled, clickable, variant, leftComponent, rightComponent, rightComponentDivider, accent, className, maxWidth, forceEmptyText, emptyLabel, }: ChipProps) => import("react").JSX.Element;

package/dist/data-display/LinkChip/LinkChip.d.ts

@@ -1,11 +0,0 @@
-import { ChipProps } from '../Chip/Chip';
-import { TriggerEventType } from '../../utilities';
-import { MouseEvent } from 'react';
-export type LinkChipProps = Omit<ChipProps, 'onClick' | 'disabled' | 'clickable'> & {
-    to: string;
-    onClick?: (event: MouseEvent<HTMLElement>) => void;
-    onMouseDown?: (event: MouseEvent<HTMLElement>) => void;
-    triggerEvent?: TriggerEventType;
-    target?: '_blank' | '_self';
-};
-export declare const LinkChip: ({ to, size, label, tooltipLabel, tooltipPlace, alwaysShowTooltip, isLabelHidden, isBold, variant, leftComponent, rightComponent, rightComponentDivider, accent, className, maxWidth, onClick, triggerEvent, target, emptyLabel, }: LinkChipProps) => import("react").JSX.Element;

package/dist/data-display/Status/Status.d.ts

@@ -1,11 +0,0 @@
-import { ThemeColor } from '../../theme';
-type StatusProps = {
-    className?: string;
-    color: ThemeColor;
-    isLoaderVisible?: boolean;
-    text: string;
-    onClick?: () => void;
-    weight?: 'regular' | 'medium';
-};
-export declare const Status: ({ className, color, isLoaderVisible, text, onClick, weight, }: StatusProps) => import("react").JSX.Element;
-export {};

package/dist/data-display/Tag/Tag.d.ts

@@ -1,18 +0,0 @@
-import { IconComponent } from '../../icon/types/IconComponent';
-import { ThemeColor } from '../../theme';
-type TagWeight = 'regular' | 'medium';
-type TagVariant = 'solid' | 'outline' | 'border';
-export type TagColor = ThemeColor | 'transparent';
-type TagProps = {
-    className?: string;
-    color: TagColor;
-    text: string;
-    Icon?: IconComponent;
-    onClick?: () => void;
-    weight?: TagWeight;
-    variant?: TagVariant;
-    preventShrink?: boolean;
-    preventPadding?: boolean;
-};
-export declare const Tag: ({ className, color, text, Icon, onClick, weight, variant, preventShrink, preventPadding, }: TagProps) => import("react").JSX.Element;
-export {};

package/dist/data-display-BuIrNSR6.cjs

@@ -1 +0,0 @@
-const ce=require("./chunk-u_mIcLyS.cjs"),M=require("./handleClickableElementKeyDown-CByqtBhO.cjs"),i=require("./theme-constants-27fpVK7_.cjs"),N=require("./utilities-CXHvN7E8.cjs"),ue=require("./theme-DLgF1kVO.cjs"),A=require("./OverflowingTextWithTooltip-DUtQD8sI.cjs");let r=require("react/jsx-runtime"),v=require("clsx"),O=require("react");O=ce.__toESM(O,1);let k=require("@sniptt/guards"),de=require("react-router-dom"),_e=require("@tabler/icons-react");var me="_animatedPath_wtd8u_1",ve="_draw-checkmark_wtd8u_1",ge={animatedPath:me,drawCheckmark:ve},pe=({isAnimating:e=!1,color:t,duration:a=.5,size:n=28})=>{const o=i.useTheme();return(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 52 52",width:n,height:n,children:(0,r.jsx)("path",{className:e?ge.animatedPath:void 0,fill:"none",stroke:t??o.grayScale.gray1,strokeWidth:4,d:"M14 27l7.8 7.8L38 14",pathLength:"1",strokeDasharray:"1",strokeDashoffset:e?0:1,style:{"--animated-checkmark-duration":`${a}s`}})})},he=({avatarImageURI:e,onImageLoadError:t})=>((0,O.useEffect)(()=>{const a=new Image;return a.onerror=()=>{t(e)},a.src=e,()=>{a.onerror=null,a.src=""}},[e,t]),(0,r.jsx)(r.Fragment,{})),xe="_root_gvbuq_1",fe="_xl_gvbuq_30",be="_lg_gvbuq_36",ke="_md_gvbuq_42",Ce="_sm_gvbuq_48",ye="_xs_gvbuq_54",je="_pulsing_gvbuq_60",Se="_avatarPulsing_gvbuq_1",Te="_image_gvbuq_78",Ne="_placeholderChar_gvbuq_86",D={root:xe,xl:fe,lg:be,md:ke,sm:Ce,xs:ye,pulsing:je,avatarPulsing:Se,image:Te,placeholderChar:Ne},W=({avatarUrl:e,className:t,size:a="md",placeholder:n,placeholderColorSeed:o=n,Icon:s,iconColor:u,onClick:l,type:d="squared",color:c,backgroundColor:f,borderColor:g,pulsing:C=!1})=>{const m=i.useTheme(),[b,p]=(0,O.useState)(null),h=(0,k.isNonEmptyString)(e)?e:null,S=(0,k.isNonEmptyString)(h)&&b===h,y=n?.trim()?.charAt(0),j=!y||y==="",E=y?.toUpperCase()||"-",T=(0,k.isNull)(h)||S,te=j?m.font.color.tertiary:c??N.stringToThemeColorP3String({string:o??"",variant:12,theme:m}),ae=j?m.background.transparent.light:f??N.stringToThemeColorP3String({string:o??"",variant:d==="app"?5:4,theme:m}),ne=d==="app"?g??(j?void 0:N.stringToThemeColorP3String({string:o??"",variant:6,theme:m})):void 0,ie=T,H=T?ne:void 0,oe={"--avatar-color":te,"--avatar-background":s?"inherit":ie?ae:"none",...d==="app"&&H?{"--avatar-border":`1px solid ${H}`}:{}},se=(0,v.clsx)(D.root,D[a],C&&D.pulsing,t),P=i.isDefined(l),le=(0,k.isNonEmptyString)(n)?n:"Avatar";return(0,r.jsxs)("div",{className:se,"data-type":d??void 0,"data-clickable":P||void 0,role:P?"button":void 0,tabIndex:P?0:void 0,"aria-label":P?le:void 0,onClick:l,onKeyDown:P?M.handleClickableElementKeyDown:void 0,style:oe,children:[(0,k.isNonEmptyString)(h)&&(0,r.jsx)(he,{avatarImageURI:h,onImageLoadError:p}),s?(0,r.jsx)(s,{color:u||"currentColor",size:m.icon.size.xl}):T?(0,r.jsx)("span",{className:D.placeholderChar,children:E}):(0,r.jsx)("div",{className:D.image,style:{backgroundImage:`url("${CSS.escape(h)}")`}})]})},Pe={xl:{fontSize:"16px",width:"40px"},lg:{fontSize:"13px",width:"24px"},md:{fontSize:"12px",width:"16px"},sm:{fontSize:"10px",width:"14px"},xs:{fontSize:"8px",width:"12px"}},De="_container_2aram_1",we="_itemContainer_2aram_6",q={container:De,itemContainer:we},Oe=4,Ae=({avatars:e,className:t,maxVisible:a=Oe,overflowAvatar:n,overlap:o="right",overlapOffset:s="3px"})=>{const u=e.slice(0,a);if(!u.length&&!n)return null;const l={"--avatar-group-overlap-offset":s};return(0,r.jsxs)("div",{className:(0,v.clsx)(q.container,t),children:[u.map((d,c)=>(0,r.jsx)("div",{className:q.itemContainer,"data-overlap":o,style:l,children:d},c)),n&&(0,r.jsx)("div",{className:q.itemContainer,"data-overlap":o,style:l,children:n})]})},Ee="_iconWithBackgroundContainer_13kjb_1",qe="_wrapper_13kjb_11",I={iconWithBackgroundContainer:Ee,wrapper:qe},Ie=({Icon:e,placeholderColorSeed:t,avatarType:a,avatarUrl:n,placeholder:o,isIconInverted:s=!1,IconColor:u,IconBackgroundColor:l,onClick:d})=>{const c=i.useTheme();if(!i.isDefined(e))return(0,r.jsx)(W,{avatarUrl:n,placeholderColorSeed:t,placeholder:o,size:"sm",type:a,onClick:d});const f=(0,k.isNonEmptyString)(o)?o:"Avatar",g=s||i.isDefined(l)?(0,r.jsx)("div",{className:I.iconWithBackgroundContainer,style:i.isDefined(l)?{"--avatar-or-icon-background":l}:void 0,children:(0,r.jsx)(e,{color:c.font.color.inverted,size:c.icon.size.sm,stroke:c.icon.stroke.sm,"aria-hidden":!0})}):(0,r.jsx)(e,{size:c.icon.size.sm,stroke:c.icon.stroke.sm,color:u||"currentColor","aria-hidden":!0});return i.isDefined(d)?(0,r.jsx)("div",{className:I.wrapper,"data-clickable":!0,role:"button",tabIndex:0,"aria-label":f,onClick:d,onKeyDown:M.handleClickableElementKeyDown,children:g}):(0,r.jsx)("div",{className:I.wrapper,children:g})},Le="_root_16neu_1",ze={root:Le},Be=({className:e})=>{const t=i.useTheme();return(0,r.jsx)("div",{className:(0,v.clsx)(ze.root,e),children:(0,r.jsx)(_e.IconCheck,{color:t.grayScale.gray1,size:14})})},$e="_chip_rk7a7_1",Me="_sizeLarge_rk7a7_25",Re="_sizeSmall_rk7a7_29",He="_accentTextPrimary_rk7a7_33",Ke="_accentTextSecondary_rk7a7_37",Ve="_disabled_rk7a7_41",Fe="_fontMedium_rk7a7_45",We="_cursorPointer_rk7a7_49",Ue="_cursorNotAllowed_rk7a7_53",Ge="_backgroundHighlighted_rk7a7_57",Je="_backgroundStatic_rk7a7_69",Ye="_interactiveRegular_rk7a7_80",Ze="_hasMaxWidth_rk7a7_88",Xe="_paddingLeftNone_rk7a7_92",Qe="_emptyLabel_rk7a7_96",er="_rightComponentDivider_rk7a7_100",_={chip:$e,sizeLarge:Me,sizeSmall:Re,accentTextPrimary:He,accentTextSecondary:Ke,disabled:Ve,fontMedium:Fe,cursorPointer:We,cursorNotAllowed:Ue,backgroundHighlighted:Ge,backgroundStatic:Je,interactiveRegular:Ye,hasMaxWidth:Ze,paddingLeftNone:Xe,emptyLabel:Qe,rightComponentDivider:er},U=(function(e){return e.Large="large",e.Small="small",e})({}),G=(function(e){return e.TextPrimary="text-primary",e.TextSecondary="text-secondary",e})({}),J=(function(e){return e.Highlighted="highlighted",e.Regular="regular",e.Transparent="transparent",e.Rounded="rounded",e.Static="static",e})({}),rr=(e,t)=>{if(!e)return null;const a=typeof e=="function"?e():e;return t===!0?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("div",{className:_.rightComponentDivider}),a]}):a},Y=({size:e="small",label:t,tooltipLabel:a,tooltipPlace:n,alwaysShowTooltip:o=!1,isLabelHidden:s=!1,isBold:u=!1,disabled:l=!1,clickable:d=!0,variant:c="regular",leftComponent:f=null,rightComponent:g=null,rightComponentDivider:C=!1,accent:m="text-primary",className:b,maxWidth:p,forceEmptyText:h=!1,emptyLabel:S="Untitled"})=>{const y=c==="transparent"?void 0:d?_.cursorPointer:l?_.cursorNotAllowed:void 0,j=c==="highlighted"?_.backgroundHighlighted:c==="static"?_.backgroundStatic:c==="regular"&&!l&&d?_.interactiveRegular:void 0;return(0,r.jsxs)("div",{"data-testid":"chip",className:(0,v.clsx)(_.chip,e==="large"?_.sizeLarge:_.sizeSmall,m==="text-primary"?_.accentTextPrimary:_.accentTextSecondary,l&&_.disabled,(u||m==="text-secondary")&&_.fontMedium,y,j,p?_.hasMaxWidth:void 0,c==="transparent"&&_.paddingLeftNone,b),style:p?{"--chip-max-width":`${p}px`}:void 0,children:[f,!s&&i.isDefined(t)&&(0,k.isNonEmptyString)(t)?(0,r.jsx)(A.OverflowingTextWithTooltip,{size:e,text:t,tooltipContent:a,tooltipPlace:n,alwaysShowTooltip:o}):!h&&!s?(0,r.jsx)("div",{className:_.emptyLabel,children:S}):"",rr(g,C)]})},Z="link-chip-click-outside-id",tr="_root_1wwsw_1",ar="_circle_1wwsw_13",nr="_pipeline_1wwsw_19",L={root:tr,circle:ar,pipeline:nr},ir=(e,t)=>i.isDefined(t)?t:i.themeCssVariables.tag.background[e],or=e=>i.themeCssVariables.tag.text[e],sr=({colorName:e,color:t,variant:a,className:n})=>(0,r.jsx)("div",{className:(0,v.clsx)(L.root,a==="circle"&&L.circle,a==="pipeline"&&L.pipeline,n),style:{"--color-sample-color":ir(e,t),"--color-sample-border-color":or(e)}}),lr="_container_stu26_1",cr="_commandContain_stu26_12",ur="_buttonContainer_stu26_16",dr="_lineStartSpan_stu26_20",_r="_lineSpan_stu26_24",w={container:lr,commandContain:cr,buttonContainer:ur,lineStartSpan:dr,lineSpan:_r},mr=({commands:e,button:t})=>(0,r.jsxs)("div",{className:w.container,children:[(0,r.jsx)("div",{className:w.commandContain,children:(0,r.jsx)(r.Fragment,{children:e.map((a,n)=>(0,r.jsxs)("div",{children:[(0,r.jsx)("span",{className:w.lineStartSpan,children:"> "}),(0,r.jsx)("span",{className:w.lineSpan,children:a})]},n))})}),t&&(0,r.jsx)("div",{className:w.buttonContainer,children:t})]}),vr="_ellipsis_13o5q_1",gr={ellipsis:vr},R=({children:e,maxWidth:t,className:a})=>(0,r.jsx)(A.Text,{truncate:!0,className:(0,v.clsx)(gr.ellipsis,a),style:i.isDefined(t)?{maxWidth:`${t}px`}:void 0,children:e}),pr=({text:e,maxWidth:t})=>(0,r.jsx)(R,{maxWidth:t,children:e}),hr="_linkContainer_4rvdq_1",xr={linkContainer:hr},fr=({to:e,size:t=U.Small,label:a,tooltipLabel:n,tooltipPlace:o,alwaysShowTooltip:s,isLabelHidden:u=!1,isBold:l=!1,variant:d=J.Regular,leftComponent:c=null,rightComponent:f=null,rightComponentDivider:g=!1,accent:C=G.TextPrimary,className:m,maxWidth:b,onClick:p,triggerEvent:h,target:S,emptyLabel:y})=>{const{onClick:j,onMouseDown:E}=N.useMouseDownNavigation({to:e,onClick:p,triggerEvent:h});return(0,r.jsx)("span",{className:xr.linkContainer,children:(0,r.jsx)(de.Link,{to:e,onClick:T=>{T.stopPropagation(),j(T)},onMouseDown:E,"data-click-outside-id":Z,target:S,rel:S==="_blank"?"noopener noreferrer":void 0,children:(0,r.jsx)(Y,{size:t,label:a,tooltipLabel:n,tooltipPlace:o,alwaysShowTooltip:s,isLabelHidden:u,isBold:l,clickable:!0,variant:d,leftComponent:c,rightComponent:f,rightComponentDivider:g,accent:C,className:m,maxWidth:b,emptyLabel:y})})})},br="_notificationCounter_1lalu_1",kr="_primary_1lalu_13",Cr="_secondary_1lalu_18",K={notificationCounter:br,primary:kr,secondary:Cr},yr=({count:e,variant:t="primary",className:a})=>(0,r.jsx)("div",{className:(0,v.clsx)(K.notificationCounter,K[t],a),children:e}),jr=({value:e})=>(0,r.jsx)(R,{children:e}),Sr="_pill_2y5ao_1",Tr={pill:Sr},Nr=({className:e,label:t,Icon:a})=>(0,r.jsxs)("span",{className:(0,v.clsx)(Tr.pill,e),children:[a&&(0,r.jsx)(a,{size:12}),t]}),Pr="_tag_13x93_1",Dr="_interactive_13x93_21",wr="_weightMedium_13x93_28",Or="_variantOutline_13x93_32",Ar="_variantBorder_13x93_36",Er="_preventShrink_13x93_40",qr="_preventPadding_13x93_44",Ir="_content_13x93_48",Lr="_nonShrinkableText_13x93_54",zr="_iconContainer_13x93_59",x={tag:Pr,interactive:Dr,weightMedium:wr,variantOutline:Or,variantBorder:Ar,preventShrink:Er,preventPadding:qr,content:Ir,nonShrinkableText:Lr,iconContainer:zr},X=({className:e,color:t,text:a,Icon:n,onClick:o,weight:s="regular",variant:u="solid",preventShrink:l,preventPadding:d})=>{const c=i.useTheme(),f=t==="transparent"?"transparent":i.themeCssVariables.tag.background[t]??i.themeCssVariables.tag.background.gray,g=t==="transparent"?i.themeCssVariables.font.color.secondary:i.themeCssVariables.tag.text[t]??i.themeCssVariables.font.color.secondary,C=i.isDefined(o),m=(0,r.jsxs)(r.Fragment,{children:[i.isDefined(n)?(0,r.jsx)("div",{className:x.iconContainer,children:(0,r.jsx)(n,{size:c.icon.size.sm,stroke:c.icon.stroke.sm,"aria-hidden":!0})}):(0,r.jsx)(r.Fragment,{}),l?(0,r.jsx)("span",{className:x.nonShrinkableText,children:a}):(0,r.jsx)("span",{className:x.content,children:(0,r.jsx)(A.OverflowingTextWithTooltip,{text:a})})]}),b={"--tag-background":f,"--tag-text":g},p=(0,v.clsx)(x.tag,s==="medium"&&x.weightMedium,u==="outline"&&x.variantOutline,u==="border"&&x.variantBorder,l&&x.preventShrink,d&&x.preventPadding,e);return C?(0,r.jsx)("button",{type:"button",className:(0,v.clsx)(p,x.interactive),onClick:o,style:b,children:m}):(0,r.jsx)("span",{className:p,style:b,children:m})},Br=({color:e,label:t,Icon:a,preventPadding:n})=>(0,r.jsx)(X,{preventShrink:!0,color:e,text:t,Icon:a,preventPadding:n}),$r="_container_1i6sz_1",Mr="_dot_1i6sz_15",Rr="_loaderDot_1i6sz_1",V={container:$r,dot:Mr,loaderDot:Rr},Q=({color:e})=>(0,r.jsx)("div",{className:V.container,style:e?{"--loader-color":i.themeCssVariables.tag.text[e]}:void 0,children:(0,r.jsx)("div",{className:V.dot})}),Hr="_status_1vjxx_1",Kr="_regular_1vjxx_30",Vr="_medium_1vjxx_34",Fr="_content_1vjxx_38",z={status:Hr,regular:Kr,medium:Vr,content:Fr},Wr=({className:e,color:t,isLoaderVisible:a=!1,text:n,onClick:o,weight:s="regular"})=>{const u=N.parseThemeColor(t);return(0,r.jsxs)("h3",{className:(0,v.clsx)(z.status,z[s],e),onClick:o,tabIndex:i.isDefined(o)?0:void 0,onKeyDown:M.handleClickableElementKeyDown,"data-loader-visible":a||void 0,style:{"--status-background":i.themeCssVariables.tag.background[u],"--status-text-color":i.themeCssVariables.tag.text[u]},children:[(0,r.jsx)("span",{className:z.content,children:n}),a?(0,r.jsx)(Q,{color:t}):null]})},Ur="_root_j2xk4_1",Gr={root:Ur},ee=({$backgroundColor:e,$borderColor:t,$dimension:a,className:n,style:o,...s})=>(0,r.jsx)("div",{...s,className:(0,v.clsx)(Gr.root,n),style:{"--tinted-icon-tile-background-color":e,"--tinted-icon-tile-border":t?`1px solid ${t}`:void 0,"--tinted-icon-tile-dimension":a,...o}}),Jr="_container_1xmrr_1",Yr="_fixHeight_1xmrr_7",F={container:Jr,fixHeight:Yr},Zr=({text:e,displayedMaxRows:t})=>{const a=(0,k.isUndefined)(t)||t===1;return(0,r.jsx)("div",{className:(0,v.clsx)(F.container,a&&F.fixHeight),children:(0,r.jsx)(A.OverflowingTextWithTooltip,{text:e,displayedMaxRows:t,isTooltipMultiline:!0})})},B={background:5,border:6,icon:11},$=(e,t)=>{const a=i.themeCssVariables.color,n=i.themeCssVariables.tag.text;return a[`${e}${t}`]??n[e]},re=e=>{const t=N.parseThemeColor(e);return{backgroundColor:$(t,B.background),iconColor:$(t,B.icon),borderColor:$(t,B.border)}},Xr=({Icon:e,color:t=ue.DEFAULT_THEME_COLOR_FALLBACK,size:a,stroke:n})=>{const o=i.useTheme(),s=re(t),u=a??o.icon.size.md,l=n??o.icon.stroke.md,d=i.isDefined(a)?`${a}px`:void 0;return(0,r.jsx)(ee,{$backgroundColor:s.backgroundColor,$borderColor:s.borderColor,$dimension:d,children:(0,r.jsx)(e,{size:u,stroke:l,color:s.iconColor})})};Object.defineProperty(exports,"AVATAR_PROPERTIES_BY_SIZE",{enumerable:!0,get:function(){return Pe}});Object.defineProperty(exports,"AnimatedCheckmark",{enumerable:!0,get:function(){return pe}});Object.defineProperty(exports,"Avatar",{enumerable:!0,get:function(){return W}});Object.defineProperty(exports,"AvatarGroup",{enumerable:!0,get:function(){return Ae}});Object.defineProperty(exports,"AvatarOrIcon",{enumerable:!0,get:function(){return Ie}});Object.defineProperty(exports,"Checkmark",{enumerable:!0,get:function(){return Be}});Object.defineProperty(exports,"Chip",{enumerable:!0,get:function(){return Y}});Object.defineProperty(exports,"ChipAccent",{enumerable:!0,get:function(){return G}});Object.defineProperty(exports,"ChipSize",{enumerable:!0,get:function(){return U}});Object.defineProperty(exports,"ChipVariant",{enumerable:!0,get:function(){return J}});Object.defineProperty(exports,"ColorSample",{enumerable:!0,get:function(){return sr}});Object.defineProperty(exports,"CommandBlock",{enumerable:!0,get:function(){return mr}});Object.defineProperty(exports,"EllipsisDisplay",{enumerable:!0,get:function(){return R}});Object.defineProperty(exports,"JsonDisplay",{enumerable:!0,get:function(){return pr}});Object.defineProperty(exports,"LINK_CHIP_CLICK_OUTSIDE_ID",{enumerable:!0,get:function(){return Z}});Object.defineProperty(exports,"LinkChip",{enumerable:!0,get:function(){return fr}});Object.defineProperty(exports,"Loader",{enumerable:!0,get:function(){return Q}});Object.defineProperty(exports,"NotificationCounter",{enumerable:!0,get:function(){return yr}});Object.defineProperty(exports,"NumberDisplay",{enumerable:!0,get:function(){return jr}});Object.defineProperty(exports,"Pill",{enumerable:!0,get:function(){return Nr}});Object.defineProperty(exports,"SelectDisplay",{enumerable:!0,get:function(){return Br}});Object.defineProperty(exports,"Status",{enumerable:!0,get:function(){return Wr}});Object.defineProperty(exports,"StyledTintedIconTileContainer",{enumerable:!0,get:function(){return ee}});Object.defineProperty(exports,"Tag",{enumerable:!0,get:function(){return X}});Object.defineProperty(exports,"TextDisplay",{enumerable:!0,get:function(){return Zr}});Object.defineProperty(exports,"TintedIconTile",{enumerable:!0,get:function(){return Xr}});Object.defineProperty(exports,"getIconTileColorShades",{enumerable:!0,get:function(){return re}});