@tedi-design-system/react 14.0.0-rc.1

package/src/community/components/tag/tag.d.ts

@@ -0,0 +1,69 @@
+import React from 'react';
+export type TagColor = 'default' | 'primary' | 'accent' | 'positive' | 'warning' | 'important';
+export type TagType = 'default' | 'secondary' | 'ghost' | 'invisible' | 'borderless';
+export type TagSize = 'default' | 'large';
+export type TagStatus = 'error' | 'success' | 'inactive';
+export interface TagProps {
+    /**
+     * Content of Tag.
+     */
+    children: React.ReactNode;
+    /**
+     * Additional classes.
+     */
+    className?: string;
+    /**
+     * Color of Tag.
+     * @default default
+     */
+    color?: TagColor;
+    /**
+     * Type of Tag.
+     * @default default
+     */
+    type?: TagType;
+    /**
+     * Status of Tag.
+     */
+    status?: TagStatus;
+    /**
+     * Size of Tag.
+     * @default default
+     */
+    size?: TagSize;
+    /**
+     * Title if Tag is Abbreviation.
+     */
+    title?: string;
+    /**
+     * If tag is rounded
+     * @default false
+     */
+    rounded?: boolean;
+    /**
+     * If tag has icon only
+     * @default false
+     */
+    iconOnly?: boolean;
+    /**
+     * If Tag has arrow on top-right corner
+     * @default false
+     */
+    hasArrow?: boolean;
+    /**
+     * If Tag should be skeleton
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * If tag is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * ID attribute
+     */
+    id?: string;
+}
+export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLDivElement>>;
+export default Tag;

package/src/community/components/tag/tag.es.js

@@ -0,0 +1,39 @@
+import { jsx as w } from "react/jsx-runtime";
+import N from "../../../../external/classnames/index.es.js";
+import { forwardRef as T } from "react";
+import a from "./tag.module.scss.es.js";
+import { SkeletonBlock as $ } from "../../../tedi/components/loaders/skeleton/skeleton-block/skeleton-block.es.js";
+const h = T((i, d) => {
+  const {
+    children: m,
+    size: t,
+    className: n,
+    title: s,
+    color: e = "default",
+    status: o,
+    type: r = "default",
+    rounded: l = !1,
+    hasArrow: f = !1,
+    isLoading: g = !1,
+    isDisabled: c = !1,
+    iconOnly: p = !1,
+    id: u
+  } = i, y = g ? $ : s ? "abbr" : "div", b = N(
+    a.tag,
+    n,
+    { [a[`tag--${t}`]]: t },
+    { [a[`tag--type-${r}`]]: r },
+    { [a[`tag--color-${e}`]]: e },
+    { [a[`tag--status-${o}`]]: o },
+    { [a["tag--rounded"]]: l },
+    { [a["tag--icon-only"]]: p },
+    { [a["tag--disabled"]]: c },
+    { [a["tag--with-arrow"]]: f && !l }
+  );
+  return /* @__PURE__ */ w(y, { id: u, "data-name": "tag", className: b, title: s, ref: d, children: m });
+});
+h.displayName = "Tag";
+export {
+  h as Tag,
+  h as default
+};

package/src/community/components/tag/tag.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="tag-de7cd582",a={tag:t,"tag--default":"tag--default-77443d27","tag--type-ghost":"tag--type-ghost-80dfabdb","tag--large":"tag--large-81928b3e","tag--color-default":"tag--color-default-9aabde81","tag--type-default":"tag--type-default-328f991f","tag--type-secondary":"tag--type-secondary-495a8ed8","tag--color-accent":"tag--color-accent-798040f8","tag--type-borderless":"tag--type-borderless-1c5fcca7","tag--type-invisible":"tag--type-invisible-c8d11eb5","tag--icon-only":"tag--icon-only-1f412944","tag--disabled":"tag--disabled-06b14065","tag--with-arrow":"tag--with-arrow-a7d0d694","tag--color-primary":"tag--color-primary-d4a64cd4","tag--color-positive":"tag--color-positive-f823c0df","tag--color-warning":"tag--color-warning-3efdfe52","tag--color-important":"tag--color-important-81499159","tag--status-error":"tag--status-error-30c88b17","tag--status-success":"tag--status-success-e31be3e2","tag--status-inactive":"tag--status-inactive-09947563","tag--rounded":"tag--rounded-e9419f54"};exports.default=a;exports.tag=t;

package/src/community/components/tag/tag.module.scss.es.js

@@ -0,0 +1,27 @@
+const t = "tag-de7cd582", a = {
+  tag: t,
+  "tag--default": "tag--default-77443d27",
+  "tag--type-ghost": "tag--type-ghost-80dfabdb",
+  "tag--large": "tag--large-81928b3e",
+  "tag--color-default": "tag--color-default-9aabde81",
+  "tag--type-default": "tag--type-default-328f991f",
+  "tag--type-secondary": "tag--type-secondary-495a8ed8",
+  "tag--color-accent": "tag--color-accent-798040f8",
+  "tag--type-borderless": "tag--type-borderless-1c5fcca7",
+  "tag--type-invisible": "tag--type-invisible-c8d11eb5",
+  "tag--icon-only": "tag--icon-only-1f412944",
+  "tag--disabled": "tag--disabled-06b14065",
+  "tag--with-arrow": "tag--with-arrow-a7d0d694",
+  "tag--color-primary": "tag--color-primary-d4a64cd4",
+  "tag--color-positive": "tag--color-positive-f823c0df",
+  "tag--color-warning": "tag--color-warning-3efdfe52",
+  "tag--color-important": "tag--color-important-81499159",
+  "tag--status-error": "tag--status-error-30c88b17",
+  "tag--status-success": "tag--status-success-e31be3e2",
+  "tag--status-inactive": "tag--status-inactive-09947563",
+  "tag--rounded": "tag--rounded-e9419f54"
+};
+export {
+  a as default,
+  t as tag
+};

package/src/community/components/toggle-open/toggle-open.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),d=require("../../../../external/classnames/index.cjs.js"),g=require("../button/button.cjs.js"),l=require("./toggle-open.module.scss.cjs.js"),o=({openText:u,closeText:n,isOpen:t,iconRight:e,...r})=>{const a=d.default({[l.default["toggle--open"]]:t},{[l.default["toggle--close"]]:!t},e==null?void 0:e.className);return s.jsx(g.Button,{"data-name":"button",iconRight:{...e,className:a,name:"expand_more"},...r,children:t?n:u})};exports.ToggleOpen=o;exports.default=o;

package/src/community/components/toggle-open/toggle-open.d.ts

@@ -0,0 +1,23 @@
+import { ButtonProps } from '../button/button';
+import { IconProps } from '../icon/icon';
+export interface ToggleOpenProps extends Omit<ButtonProps, 'children' | 'iconRight'> {
+    /**
+     * Name on the button to open the item
+     */
+    openText: string;
+    /**
+     * Name on the button to close the item
+     */
+    closeText: string;
+    /**
+     * If the element currently open
+     */
+    isOpen: boolean;
+    /**
+     * Name of the icon we want to show on the right.
+     * Overidden from ButtonProps, because we dont support string as icon name here
+     */
+    iconRight?: Partial<IconProps>;
+}
+export declare const ToggleOpen: ({ openText, closeText, isOpen, iconRight, ...rest }: ToggleOpenProps) => JSX.Element;
+export default ToggleOpen;

package/src/community/components/toggle-open/toggle-open.es.js

@@ -0,0 +1,16 @@
+import { jsx as l } from "react/jsx-runtime";
+import p from "../../../../external/classnames/index.es.js";
+import { Button as n } from "../button/button.es.js";
+import m from "./toggle-open.module.scss.es.js";
+const c = ({ openText: a, closeText: r, isOpen: o, iconRight: e, ...t }) => {
+  const s = p(
+    { [m["toggle--open"]]: o },
+    { [m["toggle--close"]]: !o },
+    e == null ? void 0 : e.className
+  );
+  return /* @__PURE__ */ l(n, { "data-name": "button", iconRight: { ...e, className: s, name: "expand_more" }, ...t, children: o ? r : a });
+};
+export {
+  c as ToggleOpen,
+  c as default
+};

package/src/community/components/toggle-open/toggle-open.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"toggle--open":"toggle--open-31d6b84d","toggle--close":"toggle--close-8f1101e9"};exports.default=e;

package/src/community/components/toggle-open/toggle-open.module.scss.es.js

@@ -0,0 +1,7 @@
+const e = {
+  "toggle--open": "toggle--open-31d6b84d",
+  "toggle--close": "toggle--close-8f1101e9"
+};
+export {
+  e as default
+};

package/src/community/components/tooltip/index.d.ts

@@ -0,0 +1,3 @@
+export * from './tooltip';
+export * from './tooltip-provider';
+export * from './tooltip-trigger';

package/src/community/components/tooltip/tooltip-provider.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const G=require("react/jsx-runtime"),e=require("../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),l=require("react"),j=require("../../../tedi/helpers/hooks/use-is-touch-device.cjs.js"),k=require("../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),s=require("../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),z=require("../../../tedi/providers/label-provider/use-labels.cjs.js"),B=require("../../../tedi/helpers/hooks/use-is-mounted.cjs.js"),g=7,J=14,T=3,m=T+g,O=l.createContext({open:!1,isMounted:!1,openWith:"hover",reference:()=>null,floating:()=>null,focusManager:{},arrowRef:{current:null},x:null,y:null,strategy:"absolute",getReferenceProps:()=>({}),getFloatingProps:()=>({}),arrow:{x:0,y:0,centerOffset:0},placement:"top",context:{}}),R=i=>{const{getLabel:v}=z.useLabels(),h=j.useIsTouchDevice(),{children:P,placement:F="bottom",openWith:o=h?"click":"hover",defaultOpen:_=!1,open:r,onToggle:n,role:D="tooltip",offset:w=m}=i,{order:I=["reference","content"],modal:a=!1,initialFocus:M=-1,...c}=i.focusManager??{},{visuallyHiddenDismiss:x=a?v("close"):!1}=c??{},[y,b]=l.useState(_),u=l.useRef(null),f=n&&typeof r<"u"?r:y,q=p=>{typeof r>"u"&&b(p),n==null||n(p)},A=B.useIsMounted(),{x:E,y:H,refs:d,strategy:W,context:t,middlewareData:L,placement:C}=e.useFloating({placement:F,open:f,onOpenChange:q,middleware:[s.offset(w),s.flip(),s.shift({padding:8}),s.arrow({element:u,padding:4})],whileElementsMounted:k.autoUpdate}),{getReferenceProps:U,getFloatingProps:S}=e.useInteractions([e.useHover(t,{handleClose:e.safePolygon(),enabled:o==="hover"}),e.useClick(t),e.useFocus(t,{enabled:o==="hover"}),e.useRole(t,{role:D}),e.useDismiss(t,{outsidePressEvent:o==="click"?"mousedown":"pointerdown"})]);return G.jsx(O.Provider,{value:{open:f,isMounted:A,openWith:o,reference:d.setReference,floating:d.setFloating,arrowRef:u,focusManager:{order:I,initialFocus:M,modal:a,visuallyHiddenDismiss:x,...c},x:E,y:H,strategy:W,getReferenceProps:U,getFloatingProps:S,arrow:{...L.arrow},context:t,placement:C},children:P})};exports.ARROW_HEIGHT=g;exports.ARROW_WIDTH=J;exports.DEFAULT_TOOLTIP_OFFSET=m;exports.GAP=T;exports.TooltipContext=O;exports.TooltipProvider=R;exports.default=R;

package/src/community/components/tooltip/tooltip-provider.d.ts

@@ -0,0 +1,77 @@
+import { FloatingContext, FloatingFocusManager, OffsetOptions, Placement, ReferenceType, Strategy, UseRoleProps } from '@floating-ui/react';
+import React from 'react';
+export type TooltipOpenWith = 'click' | 'hover';
+export declare const ARROW_HEIGHT = 7;
+export declare const ARROW_WIDTH = 14;
+export declare const GAP = 3;
+export declare const DEFAULT_TOOLTIP_OFFSET: number;
+export interface TooltipProviderProps {
+    /**
+     * TooltipTrigger and Tooltip components
+     */
+    children: React.ReactNode | React.ReactNode[];
+    /**
+     * Placement of tooltip
+     * @default bottom
+     */
+    placement?: Placement;
+    /**
+     * Adds correct event listeners that change the open state
+     * @default hover
+     */
+    openWith?: TooltipOpenWith;
+    /**
+     * Props passed to FloatingFocusManager
+     */
+    focusManager?: Omit<React.ComponentProps<typeof FloatingFocusManager>, 'context' | 'children'>;
+    /**
+     * Should Tooltip be initially shown. Won't work with open and onToggle.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Should the Tooltip be open or closed.
+     * Use to handle state outside of component, should use with onToggle prop.
+     */
+    open?: boolean;
+    /**
+     * Callback when Tooltip is toggled.
+     * Use to handle state outside of component, should use with open prop.
+     */
+    onToggle?: (open: boolean) => void;
+    /**
+     * Changes aria attributes on trigger and tooltip based on the components role
+     * @default tooltip
+     */
+    role?: UseRoleProps['role'];
+    /**
+     * Allows to overwrite offSet options.
+     * Used to align HeaderDropdown with bottom of the Header.
+     * @default GAP + ARROW_HEIGHT (3px + 7px)
+     */
+    offset?: OffsetOptions;
+}
+export interface ITooltipContext {
+    open: boolean;
+    isMounted: boolean;
+    openWith: TooltipOpenWith;
+    focusManager?: TooltipProviderProps['focusManager'];
+    reference: (node: ReferenceType | null) => void;
+    floating: (node: HTMLElement | null) => void;
+    arrowRef: React.MutableRefObject<SVGSVGElement | null>;
+    x: number | null;
+    y: number | null;
+    strategy: Strategy;
+    getReferenceProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    arrow?: {
+        x?: number | undefined;
+        y?: number | undefined;
+        centerOffset?: number | undefined;
+    };
+    placement: Placement;
+    context: FloatingContext<ReferenceType>;
+}
+export declare const TooltipContext: React.Context<ITooltipContext>;
+export declare const TooltipProvider: (props: TooltipProviderProps) => JSX.Element;
+export default TooltipProvider;

package/src/community/components/tooltip/tooltip-provider.es.js

@@ -0,0 +1,115 @@
+import { jsx as H } from "react/jsx-runtime";
+import { useFloating as W, useInteractions as A, useHover as L, useClick as k, useFocus as G, useRole as S, useDismiss as U, safePolygon as j } from "../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import s from "react";
+import { useIsTouchDevice as q } from "../../../tedi/helpers/hooks/use-is-touch-device.es.js";
+import { autoUpdate as z } from "../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
+import { offset as B, flip as J, shift as K, arrow as N } from "../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
+import { useLabels as Q } from "../../../tedi/providers/label-provider/use-labels.es.js";
+import { useIsMounted as V } from "../../../tedi/helpers/hooks/use-is-mounted.es.js";
+const X = 7, ce = 14, Y = 3, Z = Y + X, $ = s.createContext({
+  open: !1,
+  isMounted: !1,
+  openWith: "hover",
+  reference: () => null,
+  floating: () => null,
+  focusManager: {},
+  arrowRef: { current: null },
+  x: null,
+  y: null,
+  strategy: "absolute",
+  getReferenceProps: () => ({}),
+  getFloatingProps: () => ({}),
+  arrow: {
+    x: 0,
+    y: 0,
+    centerOffset: 0
+  },
+  placement: "top",
+  context: {}
+}), ie = (r) => {
+  const { getLabel: p } = Q(), d = q(), {
+    children: m,
+    placement: g = "bottom",
+    openWith: o = d ? "click" : "hover",
+    defaultOpen: h = !1,
+    open: n,
+    onToggle: t,
+    role: v = "tooltip",
+    offset: O = Z
+  } = r, {
+    order: R = ["reference", "content"],
+    modal: a = !1,
+    initialFocus: w = -1,
+    ...l
+  } = r.focusManager ?? {}, { visuallyHiddenDismiss: F = a ? p("close") : !1 } = l ?? {}, [P, x] = s.useState(h), c = s.useRef(null), i = t && typeof n < "u" ? n : P, y = (u) => {
+    typeof n > "u" && x(u), t == null || t(u);
+  }, T = V(), { x: D, y: M, refs: f, strategy: b, context: e, middlewareData: I, placement: _ } = W({
+    placement: g,
+    open: i,
+    onOpenChange: y,
+    middleware: [
+      B(O),
+      J(),
+      K({ padding: 8 }),
+      N({
+        element: c,
+        padding: 4
+      })
+    ],
+    whileElementsMounted: z
+  }), { getReferenceProps: C, getFloatingProps: E } = A([
+    L(e, {
+      handleClose: j(),
+      enabled: o === "hover"
+    }),
+    k(e),
+    G(e, {
+      enabled: o === "hover"
+    }),
+    S(e, { role: v }),
+    U(e, {
+      outsidePressEvent: o === "click" ? "mousedown" : "pointerdown"
+      // https://floating-ui.com/docs/dialog#interaction-hooks
+    })
+  ]);
+  return /* @__PURE__ */ H(
+    $.Provider,
+    {
+      value: {
+        open: i,
+        isMounted: T,
+        openWith: o,
+        reference: f.setReference,
+        floating: f.setFloating,
+        arrowRef: c,
+        focusManager: {
+          order: R,
+          initialFocus: w,
+          modal: a,
+          visuallyHiddenDismiss: F,
+          ...l
+        },
+        x: D,
+        y: M,
+        strategy: b,
+        getReferenceProps: C,
+        getFloatingProps: E,
+        arrow: {
+          ...I.arrow
+        },
+        context: e,
+        placement: _
+      },
+      children: m
+    }
+  );
+};
+export {
+  X as ARROW_HEIGHT,
+  ce as ARROW_WIDTH,
+  Z as DEFAULT_TOOLTIP_OFFSET,
+  Y as GAP,
+  $ as TooltipContext,
+  ie as TooltipProvider,
+  ie as default
+};

package/src/community/components/tooltip/tooltip-trigger.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),g=require("../../../../external/classnames/index.cjs.js"),t=require("react"),p=require("../icon/icon.cjs.js"),o=require("./tooltip.module.scss.cjs.js"),d=require("./tooltip-provider.cjs.js"),f=require("../../../tedi/providers/label-provider/use-labels.cjs.js"),r=i=>{const{children:e}=i,{getLabel:l}=f.useLabels(),{getReferenceProps:s,reference:c,openWith:n}=t.useContext(d.TooltipContext),u=a.useMergeRefs([c,e.ref]);return t.cloneElement(e,s({ref:u,tabIndex:0,label:e.type===p.Icon?l("tooltip.icon-trigger"):void 0,...e.props,className:g.default(o.default.tooltip__trigger,{[o.default["tooltip__trigger--click"]]:n==="click"},e.props.className)}))};exports.TooltipTrigger=r;exports.default=r;

package/src/community/components/tooltip/tooltip-trigger.d.ts

@@ -0,0 +1,8 @@
+export interface TooltipTriggerProps {
+    /**
+     * The element that opens tooltip.
+     */
+    children: JSX.Element;
+}
+export declare const TooltipTrigger: (props: TooltipTriggerProps) => JSX.Element;
+export default TooltipTrigger;

package/src/community/components/tooltip/tooltip-trigger.es.js

@@ -0,0 +1,28 @@
+import { useMergeRefs as m } from "../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import n from "../../../../external/classnames/index.es.js";
+import o from "react";
+import { Icon as f } from "../icon/icon.es.js";
+import t from "./tooltip.module.scss.es.js";
+import { TooltipContext as a } from "./tooltip-provider.es.js";
+import { useLabels as g } from "../../../tedi/providers/label-provider/use-labels.es.js";
+const T = (r) => {
+  const { children: e } = r, { getLabel: s } = g(), { getReferenceProps: i, reference: l, openWith: p } = o.useContext(a), c = m([l, e.ref]);
+  return o.cloneElement(
+    e,
+    i({
+      ref: c,
+      tabIndex: 0,
+      label: e.type === f ? s("tooltip.icon-trigger") : void 0,
+      ...e.props,
+      className: n(
+        t.tooltip__trigger,
+        { [t["tooltip__trigger--click"]]: p === "click" },
+        e.props.className
+      )
+    })
+  );
+};
+export {
+  T as TooltipTrigger,
+  T as default
+};

package/src/community/components/tooltip/tooltip.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),r=require("../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),u=require("../../../../external/classnames/index.cjs.js"),F=require("react"),y=require("../card/utility.cjs.js"),o=require("./tooltip.module.scss.cjs.js"),n=require("./tooltip-provider.cjs.js"),W=require("../card/card.cjs.js"),M=require("../card/card-content/card-content.cjs.js"),d=g=>{const{children:f,maxWidth:l="medium",cardProps:t,className:m}=g,{open:p,x,y:h,strategy:C,focusManager:_,floating:q,arrowRef:j,getFloatingProps:w,placement:b,context:i}=F.useContext(n.TooltipContext),[k,a]=y.getCardBorderPlacementColor(t==null?void 0:t.border),s=()=>k&&a?`var(--color-${a})`:"none",c=s()!=="none",v=()=>t!=null&&t.background?`var(--color-${t==null?void 0:t.background})`:"var(--color-bg-default)",R=()=>{const T=e.jsx(r.FloatingFocusManager,{..._,context:i,children:e.jsxs("div",{...w({ref:q,style:{position:C,left:x??0,top:h??0},className:u.default(o.default.tooltip,m,{[o.default[`tooltip--${l}`]]:l})}),"data-placement":b,children:[e.jsx(r.FloatingArrow,{ref:A=>j.current=A,context:i,fill:v(),stroke:s(),strokeWidth:c?4:0,className:u.default(o.default.tooltip__arrow,{[o.default["tooltip__arrow--stroke"]]:c}),height:n.ARROW_HEIGHT,width:n.ARROW_WIDTH}),e.jsx(W.Card,{padding:.5,borderless:!0,...t,children:e.jsx(M.CardContent,{children:f})})]})});return p?T:null};return e.jsx(r.FloatingPortal,{"data-name":"tooltip",children:R()})};exports.Tooltip=d;exports.default=d;

package/src/community/components/tooltip/tooltip.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { CardProps } from '../card';
+export interface TooltipProps {
+    /**
+     * Content.
+     */
+    children: React.ReactNode;
+    /**
+     * Additional class name.
+     */
+    className?: string;
+    /**
+     * card props to pass down to card component.
+     * By default padding=0.5 & borderless=true.
+     * Its highly recommended to use same cardProps all over the application.
+     */
+    cardProps?: CardProps;
+    /**
+     * Tooltips max width
+     * @default medium
+     */
+    maxWidth?: 'none' | 'small' | 'medium' | 'large';
+}
+export declare const Tooltip: (props: TooltipProps) => JSX.Element | null;
+export default Tooltip;

package/src/community/components/tooltip/tooltip.es.js

@@ -0,0 +1,50 @@
+import { jsx as t, jsxs as T } from "react/jsx-runtime";
+import { FloatingPortal as b, FloatingFocusManager as W, FloatingArrow as v } from "../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import s from "../../../../external/classnames/index.es.js";
+import y from "react";
+import { getCardBorderPlacementColor as N } from "../card/utility.es.js";
+import r from "./tooltip.module.scss.es.js";
+import { TooltipContext as B, ARROW_WIDTH as H, ARROW_HEIGHT as $ } from "./tooltip-provider.es.js";
+import { Card as j } from "../card/card.es.js";
+import { CardContent as I } from "../card/card-content/card-content.es.js";
+const L = (c) => {
+  const { children: m, maxWidth: e = "medium", cardProps: o, className: d } = c, { open: f, x: p, y: u, strategy: g, focusManager: h, floating: C, arrowRef: w, getFloatingProps: x, placement: _, context: n } = y.useContext(B), [k, l] = N(o == null ? void 0 : o.border), a = () => k && l ? `var(--color-${l})` : "none", i = a() !== "none", A = () => o != null && o.background ? `var(--color-${o == null ? void 0 : o.background})` : "var(--color-bg-default)";
+  return /* @__PURE__ */ t(b, { "data-name": "tooltip", children: (() => {
+    const F = /* @__PURE__ */ t(W, { ...h, context: n, children: /* @__PURE__ */ T(
+      "div",
+      {
+        ...x({
+          ref: C,
+          style: {
+            position: g,
+            left: p ?? 0,
+            top: u ?? 0
+          },
+          className: s(r.tooltip, d, { [r[`tooltip--${e}`]]: e })
+        }),
+        "data-placement": _,
+        children: [
+          /* @__PURE__ */ t(
+            v,
+            {
+              ref: (R) => w.current = R,
+              context: n,
+              fill: A(),
+              stroke: a(),
+              strokeWidth: i ? 4 : 0,
+              className: s(r.tooltip__arrow, { [r["tooltip__arrow--stroke"]]: i }),
+              height: $,
+              width: H
+            }
+          ),
+          /* @__PURE__ */ t(j, { padding: 0.5, borderless: !0, ...o, children: /* @__PURE__ */ t(I, { children: m }) })
+        ]
+      }
+    ) });
+    return f ? F : null;
+  })() });
+};
+export {
+  L as Tooltip,
+  L as default
+};

package/src/community/components/tooltip/tooltip.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="tooltip-413196ab",o="tooltip__arrow-7d8214bc",l="tooltip__trigger-f6422045",i={tooltip:t,"tooltip--none":"tooltip--none-01bd521a","tooltip--small":"tooltip--small-f23b2c64","tooltip--medium":"tooltip--medium-33ed6e9a","tooltip--large":"tooltip--large-84d7b683",tooltip__arrow:o,"tooltip__arrow--stroke":"tooltip__arrow--stroke-092e3c3e",tooltip__trigger:l,"tooltip__trigger--click":"tooltip__trigger--click-bb6703b1"};exports.default=i;exports.tooltip=t;exports.tooltip__arrow=o;exports.tooltip__trigger=l;

package/src/community/components/tooltip/tooltip.module.scss.es.js

@@ -0,0 +1,17 @@
+const o = "tooltip-413196ab", t = "tooltip__arrow-7d8214bc", l = "tooltip__trigger-f6422045", i = {
+  tooltip: o,
+  "tooltip--none": "tooltip--none-01bd521a",
+  "tooltip--small": "tooltip--small-f23b2c64",
+  "tooltip--medium": "tooltip--medium-33ed6e9a",
+  "tooltip--large": "tooltip--large-84d7b683",
+  tooltip__arrow: t,
+  "tooltip__arrow--stroke": "tooltip__arrow--stroke-092e3c3e",
+  tooltip__trigger: l,
+  "tooltip__trigger--click": "tooltip__trigger--click-bb6703b1"
+};
+export {
+  i as default,
+  o as tooltip,
+  t as tooltip__arrow,
+  l as tooltip__trigger
+};

package/src/community/components/typography/heading/heading.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),i=require("../text/text.cjs.js"),e=t=>{const{children:r,element:n="h1",...s}=t;return u.jsx(i.Text,{element:n,...s,children:r})};exports.Heading=e;exports.default=e;

package/src/community/components/typography/heading/heading.d.ts

@@ -0,0 +1,11 @@
+import { HeadingModifiers, TextProps } from '../text/text';
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type HeadingProps = Omit<TextProps, 'element'> & {
+    /**
+     * Semantic heading tag. h1-h6 are allowed values.
+     * @default h1
+     */
+    element?: Extract<TextProps['element'], HeadingModifiers>;
+};
+export declare const Heading: (props: HeadingProps) => import("react/jsx-runtime").JSX.Element;
+export default Heading;

package/src/community/components/typography/heading/heading.es.js

@@ -0,0 +1,10 @@
+import { jsx as n } from "react/jsx-runtime";
+import { Text as m } from "../text/text.es.js";
+const a = (e) => {
+  const { children: t, element: r = "h1", ...o } = e;
+  return /* @__PURE__ */ n(m, { element: r, ...o, children: t });
+};
+export {
+  a as Heading,
+  a as default
+};

package/src/community/components/typography/text/text.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react/jsx-runtime"),p=require("../../../../../external/classnames/index.cjs.js"),f=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),s=e=>{const{getCurrentBreakpointProps:o}=f.useBreakpointProps(e.defaultServerBreakpoint),{children:i,className:u,tabIndex:a,element:c="p",modifiers:t,color:r,...l}=o(e,{tabIndex:e.id?-1:void 0}),n=typeof t=="string"?[t]:t,d=p.default(u,n==null?void 0:n.map(x=>`text-${x}`),{[`text-${r}`]:r});return m.jsx(c,{className:d,...l,tabIndex:a,children:i})};exports.Text=s;exports.default=s;

package/src/community/components/typography/text/text.d.ts

@@ -0,0 +1,43 @@
+import { BreakpointSupport } from '../../../helpers';
+import type { HeadingLevel } from '../heading/heading';
+export type HeadingModifiers = `h${HeadingLevel}`;
+export type TextModifiers = HeadingModifiers | 'normal' | 'small' | 'bold' | 'thin' | 'italic' | 'center' | 'left' | 'right' | 'nowrap' | 'break-all' | 'break-word' | 'break-spaces' | 'uppercase' | 'lowercase' | 'capitalize' | 'capitalize-first' | 'inline-block' | 'inline' | 'line-normal' | 'line-condensed';
+export type TextColor = 'default' | 'primary' | 'muted' | 'subtle' | 'disabled' | 'inverted' | 'positive' | 'important' | 'warning';
+export type TextElement = 'div' | 'p' | 'span' | 'li' | HeadingModifiers;
+type TextBreakpointProps = {
+    /**
+     * Additional class.
+     */
+    className?: string;
+    /**
+     * Base element.
+     * @default p
+     */
+    element?: TextElement;
+    /**
+     * Single or multiple modifiers to change the text behavior.
+     */
+    modifiers?: TextModifiers[] | TextModifiers;
+    /**
+     * Which color text should be.
+     * Use 'positive', 'important' or 'warning' with caution, usually they should not be in application UI.
+     * @default default
+     */
+    color?: TextColor;
+};
+export interface TextProps extends BreakpointSupport<TextBreakpointProps> {
+    /**
+     * Children of the text.
+     */
+    children: React.ReactNode;
+    /**
+     * ID attribute.
+     */
+    id?: string;
+    /**
+     * Allows to focus the element
+     */
+    tabIndex?: number;
+}
+export declare const Text: (props: TextProps) => JSX.Element;
+export default Text;

package/src/community/components/typography/text/text.es.js

@@ -0,0 +1,26 @@
+import { jsx as d } from "react/jsx-runtime";
+import x from "../../../../../external/classnames/index.es.js";
+import { useBreakpointProps as f } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const N = (t) => {
+  const { getCurrentBreakpointProps: s } = f(t.defaultServerBreakpoint), {
+    children: n,
+    className: a,
+    tabIndex: m,
+    element: c = "p",
+    modifiers: e,
+    color: r,
+    ...i
+  } = s(t, {
+    tabIndex: t.id ? -1 : void 0
+    // when id is set on a text element we most likely want to jump to it with a reference link
+  }), o = typeof e == "string" ? [e] : e, l = x(
+    a,
+    o == null ? void 0 : o.map((p) => `text-${p}`),
+    { [`text-${r}`]: r }
+  );
+  return /* @__PURE__ */ d(c, { className: l, ...i, tabIndex: m, children: n });
+};
+export {
+  N as Text,
+  N as default
+};