@cube-dev/ui-kit 0.0.0-canary-35f1f8f → 0.0.0-canary-fd2e2f2

package/dist/components/content/Layout/LayoutHeader.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 import { useAutoTooltip } from "../use-auto-tooltip.js";
 import { SlashIcon } from "../../../icons/SlashIcon.js";
 import { Button } from "../../actions/Button/Button.js";
@@ -61,7 +61,7 @@ const HeaderElement = tasty(_LayoutContent, {
 				"level=5": "h5",
 				"level=6": "h6"
 			},
-			lineHeight: "1em",
+			lineHeight: { hasBreadcrumbs: "1em" },
 			color: "#dark",
 			margin: 0,
 			overflow: "hidden",
@@ -126,7 +126,8 @@ function LayoutHeader(props, ref) {
 		ref,
 		mods: {
 			...mods,
-			level
+			level,
+			hasBreadcrumbs
 		},
 		scrollbar,
 		children: [

package/dist/components/content/Layout/LayoutHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutHeader.js","names":["LayoutContent"],"sources":["../../../../src/components/content/Layout/LayoutHeader.tsx"],"sourcesContent":["import { IconArrowLeft } from '@tabler/icons-react';\nimport { tasty } from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  Fragment,\n  HTMLAttributes,\n  ReactNode,\n  Ref,\n  RefCallback,\n} from 'react';\n\nimport { SlashIcon } from '../../../icons/SlashIcon';\nimport { Button } from '../../actions/Button/Button';\nimport { Link } from '../../actions/Link/Link';\nimport { useAutoTooltip } from '../use-auto-tooltip';\n\nimport { CubeLayoutContentProps, LayoutContent } from './LayoutContent';\n\nconst HeaderElement = tasty(LayoutContent, {\n  as: 'header',\n  qa: 'LayoutHeader',\n  styles: {\n    container: 'none',\n    // Header always has bottom border (inherent style)\n    border: 'bottom',\n    flexShrink: 0,\n    flexGrow: 0,\n\n    Inner: {\n      $: '>',\n      display: 'grid',\n      gridTemplate: `\n        \"breadcrumbs breadcrumbs breadcrumbs breadcrumbs\" auto\n        \"back title suffix extra\" 1fr\n        \".. subtitle subtitle extra\" auto\n        / auto max-content 1fr minmax(0, auto)\n      `,\n      gap: 0,\n      placeContent: 'stretch',\n      placeItems: 'center stretch',\n    },\n\n    Back: {\n      $: '> Inner >',\n      gridArea: 'back',\n      display: 'flex',\n      placeItems: 'center',\n      margin: '.5x right',\n    },\n\n    Breadcrumbs: {\n      $: '> Inner >',\n      gridArea: 'breadcrumbs',\n      display: 'flex',\n      flow: 'row nowrap',\n      placeItems: 'center start',\n      gap: '1bw',\n      preset: 't3 / strong',\n      lineHeight: '1em',\n      color: '#dark-02',\n    },\n\n    Title: {\n      $: '> Inner >',\n      gridArea: 'title',\n      preset: {\n        '': 'h3',\n        'level=1': 'h1',\n        'level=2': 'h2',\n        'level=3': 'h3',\n        'level=4': 'h4',\n        'level=5': 'h5',\n        'level=6': 'h6',\n      },\n      lineHeight: '1em',\n      color: '#dark',\n      margin: 0,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n    },\n\n    Suffix: {\n      $: '> Inner >',\n      gridArea: 'suffix',\n      display: 'flex',\n      placeItems: 'center',\n    },\n\n    Extra: {\n      $: '> Inner >',\n      gridArea: 'extra',\n      display: 'flex',\n      placeItems: 'center',\n      placeSelf: 'end',\n      gap: '1x',\n      width: 'max 100%',\n    },\n\n    Subtitle: {\n      $: '> Inner >',\n      gridArea: 'subtitle',\n      preset: 't3',\n      color: '#dark-02',\n    },\n  },\n});\n\nexport interface CubeLayoutHeaderProps extends CubeLayoutContentProps {\n  /** Page/section title */\n  title?: ReactNode;\n  /** Title heading level (1-6) */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n  /** Content next to the title */\n  suffix?: ReactNode;\n  /** Content on the right side */\n  extra?: ReactNode;\n  /** Text below the title */\n  subtitle?: ReactNode;\n  /**\n   * Navigation breadcrumbs (max 3 items recommended).\n   * Uses Link component which integrates with the navigation provider.\n   */\n  breadcrumbs?: Array<[label: string, href: string]>;\n  /** Callback for the back button. When provided, a back arrow button is rendered to the left of the title. */\n  onBack?: () => void;\n}\n\nfunction LayoutHeader(\n  props: CubeLayoutHeaderProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    title,\n    level = 3,\n    suffix,\n    extra,\n    subtitle,\n    breadcrumbs,\n    onBack,\n    scrollbar = 'tiny',\n    children,\n    mods,\n    ...otherProps\n  } = props;\n\n  // Use auto tooltip for title overflow detection\n  const { labelRef, renderWithTooltip } = useAutoTooltip({\n    tooltip: true,\n    children: typeof title === 'string' ? title : undefined,\n  });\n\n  const hasBreadcrumbs = breadcrumbs && breadcrumbs.length > 0;\n\n  const renderBreadcrumbs = () => {\n    if (!hasBreadcrumbs) return null;\n\n    return (\n      <div data-element=\"Breadcrumbs\">\n        {breadcrumbs.map(([label, href], index) => (\n          <Fragment key={href}>\n            <Link to={href}>{label}</Link>\n            <SlashIcon />\n          </Fragment>\n        ))}\n      </div>\n    );\n  };\n\n  const renderTitle = (\n    tooltipProps?: HTMLAttributes<HTMLElement>,\n    tooltipRef?: Ref<HTMLElement>,\n  ) => {\n    if (!title) return null;\n\n    const TitleTag = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n    return (\n      <TitleTag\n        ref={tooltipRef as Ref<HTMLHeadingElement>}\n        data-element=\"Title\"\n        data-level={level}\n        {...tooltipProps}\n      >\n        <span ref={labelRef as RefCallback<HTMLSpanElement>}>{title}</span>\n      </TitleTag>\n    );\n  };\n\n  return (\n    <HeaderElement\n      {...otherProps}\n      ref={ref}\n      mods={{ ...mods, level }}\n      scrollbar={scrollbar}\n    >\n      {renderBreadcrumbs()}\n      {onBack && (\n        <div data-element=\"Back\">\n          <Button\n            type=\"neutral\"\n            icon={<IconArrowLeft />}\n            aria-label=\"Go back\"\n            onPress={onBack}\n          />\n        </div>\n      )}\n      {renderWithTooltip(renderTitle, 'bottom')}\n      {suffix && <div data-element=\"Suffix\">{suffix}</div>}\n      {extra && <div data-element=\"Extra\">{extra}</div>}\n      {subtitle && <div data-element=\"Subtitle\">{subtitle}</div>}\n      {children}\n    </HeaderElement>\n  );\n}\n\nconst _LayoutHeader = forwardRef(LayoutHeader);\n\n_LayoutHeader.displayName = 'Layout.Header';\n\nexport { _LayoutHeader as LayoutHeader };\n"],"mappings":";;;;;;;;;;;;AAmBA,MAAM,gBAAgB,MAAMA,gBAAe;CACzC,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,WAAW;EAEX,QAAQ;EACR,YAAY;EACZ,UAAU;EAEV,OAAO;GACL,GAAG;GACH,SAAS;GACT,cAAc;;;;;;GAMd,KAAK;GACL,cAAc;GACd,YAAY;GACb;EAED,MAAM;GACJ,GAAG;GACH,UAAU;GACV,SAAS;GACT,YAAY;GACZ,QAAQ;GACT;EAED,aAAa;GACX,GAAG;GACH,UAAU;GACV,SAAS;GACT,MAAM;GACN,YAAY;GACZ,KAAK;GACL,QAAQ;GACR,YAAY;GACZ,OAAO;GACR;EAED,OAAO;GACL,GAAG;GACH,UAAU;GACV,QAAQ;IACN,IAAI;IACJ,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACZ;GACD,YAAY;GACZ,OAAO;GACP,QAAQ;GACR,UAAU;GACV,cAAc;GACd,YAAY;GACb;EAED,QAAQ;GACN,GAAG;GACH,UAAU;GACV,SAAS;GACT,YAAY;GACb;EAED,OAAO;GACL,GAAG;GACH,UAAU;GACV,SAAS;GACT,YAAY;GACZ,WAAW;GACX,KAAK;GACL,OAAO;GACR;EAED,UAAU;GACR,GAAG;GACH,UAAU;GACV,QAAQ;GACR,OAAO;GACR;EACF;CACF,CAAC;AAsBF,SAAS,aACP,OACA,KACA;CACA,MAAM,EACJ,OACA,QAAQ,GACR,QACA,OACA,UACA,aACA,QACA,YAAY,QACZ,UACA,MACA,GAAG,eACD;CAGJ,MAAM,EAAE,UAAU,sBAAsB,eAAe;EACrD,SAAS;EACT,UAAU,OAAO,UAAU,WAAW,QAAQ;EAC/C,CAAC;CAEF,MAAM,iBAAiB,eAAe,YAAY,SAAS;CAE3D,MAAM,0BAA0B;AAC9B,MAAI,CAAC,eAAgB,QAAO;AAE5B,SACE,oBAAC;GAAI,gBAAa;aACf,YAAY,KAAK,CAAC,OAAO,OAAO,UAC/B,qBAAC,uBACC,oBAAC;IAAK,IAAI;cAAO;KAAa,EAC9B,oBAAC,cAAY,KAFA,KAGJ,CACX;IACE;;CAIV,MAAM,eACJ,cACA,eACG;AACH,MAAI,CAAC,MAAO,QAAO;AAInB,SACE,oBAHe,IAAI;GAIjB,KAAK;GACL,gBAAa;GACb,cAAY;GACZ,GAAI;aAEJ,oBAAC;IAAK,KAAK;cAA2C;KAAa;IAC1D;;AAIf,QACE,qBAAC;EACC,GAAI;EACC;EACL,MAAM;GAAE,GAAG;GAAM;GAAO;EACb;;GAEV,mBAAmB;GACnB,UACC,oBAAC;IAAI,gBAAa;cAChB,oBAAC;KACC,MAAK;KACL,MAAM,oBAAC,kBAAgB;KACvB,cAAW;KACX,SAAS;MACT;KACE;GAEP,kBAAkB,aAAa,SAAS;GACxC,UAAU,oBAAC;IAAI,gBAAa;cAAU;KAAa;GACnD,SAAS,oBAAC;IAAI,gBAAa;cAAS;KAAY;GAChD,YAAY,oBAAC;IAAI,gBAAa;cAAY;KAAe;GACzD;;GACa;;AAIpB,MAAM,gBAAgB,WAAW,aAAa;AAE9C,cAAc,cAAc"}
+{"version":3,"file":"LayoutHeader.js","names":["LayoutContent"],"sources":["../../../../src/components/content/Layout/LayoutHeader.tsx"],"sourcesContent":["import { IconArrowLeft } from '@tabler/icons-react';\nimport { tasty } from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  Fragment,\n  HTMLAttributes,\n  ReactNode,\n  Ref,\n  RefCallback,\n} from 'react';\n\nimport { SlashIcon } from '../../../icons/SlashIcon';\nimport { Button } from '../../actions/Button/Button';\nimport { Link } from '../../actions/Link/Link';\nimport { useAutoTooltip } from '../use-auto-tooltip';\n\nimport { CubeLayoutContentProps, LayoutContent } from './LayoutContent';\n\nconst HeaderElement = tasty(LayoutContent, {\n  as: 'header',\n  qa: 'LayoutHeader',\n  styles: {\n    container: 'none',\n    // Header always has bottom border (inherent style)\n    border: 'bottom',\n    flexShrink: 0,\n    flexGrow: 0,\n\n    Inner: {\n      $: '>',\n      display: 'grid',\n      gridTemplate: `\n        \"breadcrumbs breadcrumbs breadcrumbs breadcrumbs\" auto\n        \"back title suffix extra\" 1fr\n        \".. subtitle subtitle extra\" auto\n        / auto max-content 1fr minmax(0, auto)\n      `,\n      gap: 0,\n      placeContent: 'stretch',\n      placeItems: 'center stretch',\n    },\n\n    Back: {\n      $: '> Inner >',\n      gridArea: 'back',\n      display: 'flex',\n      placeItems: 'center',\n      margin: '.5x right',\n    },\n\n    Breadcrumbs: {\n      $: '> Inner >',\n      gridArea: 'breadcrumbs',\n      display: 'flex',\n      flow: 'row nowrap',\n      placeItems: 'center start',\n      gap: '1bw',\n      preset: 't3 / strong',\n      lineHeight: '1em',\n      color: '#dark-02',\n    },\n\n    Title: {\n      $: '> Inner >',\n      gridArea: 'title',\n      preset: {\n        '': 'h3',\n        'level=1': 'h1',\n        'level=2': 'h2',\n        'level=3': 'h3',\n        'level=4': 'h4',\n        'level=5': 'h5',\n        'level=6': 'h6',\n      },\n      lineHeight: {\n        hasBreadcrumbs: '1em',\n      },\n      color: '#dark',\n      margin: 0,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n    },\n\n    Suffix: {\n      $: '> Inner >',\n      gridArea: 'suffix',\n      display: 'flex',\n      placeItems: 'center',\n    },\n\n    Extra: {\n      $: '> Inner >',\n      gridArea: 'extra',\n      display: 'flex',\n      placeItems: 'center',\n      placeSelf: 'end',\n      gap: '1x',\n      width: 'max 100%',\n    },\n\n    Subtitle: {\n      $: '> Inner >',\n      gridArea: 'subtitle',\n      preset: 't3',\n      color: '#dark-02',\n    },\n  },\n});\n\nexport interface CubeLayoutHeaderProps extends CubeLayoutContentProps {\n  /** Page/section title */\n  title?: ReactNode;\n  /** Title heading level (1-6) */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n  /** Content next to the title */\n  suffix?: ReactNode;\n  /** Content on the right side */\n  extra?: ReactNode;\n  /** Text below the title */\n  subtitle?: ReactNode;\n  /**\n   * Navigation breadcrumbs (max 3 items recommended).\n   * Uses Link component which integrates with the navigation provider.\n   */\n  breadcrumbs?: Array<[label: string, href: string]>;\n  /** Callback for the back button. When provided, a back arrow button is rendered to the left of the title. */\n  onBack?: () => void;\n}\n\nfunction LayoutHeader(\n  props: CubeLayoutHeaderProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    title,\n    level = 3,\n    suffix,\n    extra,\n    subtitle,\n    breadcrumbs,\n    onBack,\n    scrollbar = 'tiny',\n    children,\n    mods,\n    ...otherProps\n  } = props;\n\n  // Use auto tooltip for title overflow detection\n  const { labelRef, renderWithTooltip } = useAutoTooltip({\n    tooltip: true,\n    children: typeof title === 'string' ? title : undefined,\n  });\n\n  const hasBreadcrumbs = breadcrumbs && breadcrumbs.length > 0;\n\n  const renderBreadcrumbs = () => {\n    if (!hasBreadcrumbs) return null;\n\n    return (\n      <div data-element=\"Breadcrumbs\">\n        {breadcrumbs.map(([label, href], index) => (\n          <Fragment key={href}>\n            <Link to={href}>{label}</Link>\n            <SlashIcon />\n          </Fragment>\n        ))}\n      </div>\n    );\n  };\n\n  const renderTitle = (\n    tooltipProps?: HTMLAttributes<HTMLElement>,\n    tooltipRef?: Ref<HTMLElement>,\n  ) => {\n    if (!title) return null;\n\n    const TitleTag = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n    return (\n      <TitleTag\n        ref={tooltipRef as Ref<HTMLHeadingElement>}\n        data-element=\"Title\"\n        data-level={level}\n        {...tooltipProps}\n      >\n        <span ref={labelRef as RefCallback<HTMLSpanElement>}>{title}</span>\n      </TitleTag>\n    );\n  };\n\n  return (\n    <HeaderElement\n      {...otherProps}\n      ref={ref}\n      mods={{ ...mods, level, hasBreadcrumbs }}\n      scrollbar={scrollbar}\n    >\n      {renderBreadcrumbs()}\n      {onBack && (\n        <div data-element=\"Back\">\n          <Button\n            type=\"neutral\"\n            icon={<IconArrowLeft />}\n            aria-label=\"Go back\"\n            onPress={onBack}\n          />\n        </div>\n      )}\n      {renderWithTooltip(renderTitle, 'bottom')}\n      {suffix && <div data-element=\"Suffix\">{suffix}</div>}\n      {extra && <div data-element=\"Extra\">{extra}</div>}\n      {subtitle && <div data-element=\"Subtitle\">{subtitle}</div>}\n      {children}\n    </HeaderElement>\n  );\n}\n\nconst _LayoutHeader = forwardRef(LayoutHeader);\n\n_LayoutHeader.displayName = 'Layout.Header';\n\nexport { _LayoutHeader as LayoutHeader };\n"],"mappings":";;;;;;;;;;;;AAmBA,MAAM,gBAAgB,MAAMA,gBAAe;CACzC,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,WAAW;EAEX,QAAQ;EACR,YAAY;EACZ,UAAU;EAEV,OAAO;GACL,GAAG;GACH,SAAS;GACT,cAAc;;;;;;GAMd,KAAK;GACL,cAAc;GACd,YAAY;GACb;EAED,MAAM;GACJ,GAAG;GACH,UAAU;GACV,SAAS;GACT,YAAY;GACZ,QAAQ;GACT;EAED,aAAa;GACX,GAAG;GACH,UAAU;GACV,SAAS;GACT,MAAM;GACN,YAAY;GACZ,KAAK;GACL,QAAQ;GACR,YAAY;GACZ,OAAO;GACR;EAED,OAAO;GACL,GAAG;GACH,UAAU;GACV,QAAQ;IACN,IAAI;IACJ,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACZ;GACD,YAAY,EACV,gBAAgB,OACjB;GACD,OAAO;GACP,QAAQ;GACR,UAAU;GACV,cAAc;GACd,YAAY;GACb;EAED,QAAQ;GACN,GAAG;GACH,UAAU;GACV,SAAS;GACT,YAAY;GACb;EAED,OAAO;GACL,GAAG;GACH,UAAU;GACV,SAAS;GACT,YAAY;GACZ,WAAW;GACX,KAAK;GACL,OAAO;GACR;EAED,UAAU;GACR,GAAG;GACH,UAAU;GACV,QAAQ;GACR,OAAO;GACR;EACF;CACF,CAAC;AAsBF,SAAS,aACP,OACA,KACA;CACA,MAAM,EACJ,OACA,QAAQ,GACR,QACA,OACA,UACA,aACA,QACA,YAAY,QACZ,UACA,MACA,GAAG,eACD;CAGJ,MAAM,EAAE,UAAU,sBAAsB,eAAe;EACrD,SAAS;EACT,UAAU,OAAO,UAAU,WAAW,QAAQ;EAC/C,CAAC;CAEF,MAAM,iBAAiB,eAAe,YAAY,SAAS;CAE3D,MAAM,0BAA0B;AAC9B,MAAI,CAAC,eAAgB,QAAO;AAE5B,SACE,oBAAC;GAAI,gBAAa;aACf,YAAY,KAAK,CAAC,OAAO,OAAO,UAC/B,qBAAC,uBACC,oBAAC;IAAK,IAAI;cAAO;KAAa,EAC9B,oBAAC,cAAY,KAFA,KAGJ,CACX;IACE;;CAIV,MAAM,eACJ,cACA,eACG;AACH,MAAI,CAAC,MAAO,QAAO;AAInB,SACE,oBAHe,IAAI;GAIjB,KAAK;GACL,gBAAa;GACb,cAAY;GACZ,GAAI;aAEJ,oBAAC;IAAK,KAAK;cAA2C;KAAa;IAC1D;;AAIf,QACE,qBAAC;EACC,GAAI;EACC;EACL,MAAM;GAAE,GAAG;GAAM;GAAO;GAAgB;EAC7B;;GAEV,mBAAmB;GACnB,UACC,oBAAC;IAAI,gBAAa;cAChB,oBAAC;KACC,MAAK;KACL,MAAM,oBAAC,kBAAgB;KACvB,cAAW;KACX,SAAS;MACT;KACE;GAEP,kBAAkB,aAAa,SAAS;GACxC,UAAU,oBAAC;IAAI,gBAAa;cAAU;KAAa;GACnD,SAAS,oBAAC;IAAI,gBAAa;cAAS;KAAY;GAChD,YAAY,oBAAC;IAAI,gBAAa;cAAY;KAAe;GACzD;;GACa;;AAIpB,MAAM,gBAAgB,WAAW,aAAa;AAE9C,cAAc,cAAc"}

package/dist/components/content/Layout/LayoutPane.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/content/Layout/LayoutPanel.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/content/Layout/LayoutPanelHeader.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { _Item } from "../Item/Item.js";

package/dist/components/content/Layout/LayoutToolbar.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 import { _LayoutContent } from "./LayoutContent.js";
 import { tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/content/Layout/hooks/useTinyScrollbar.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 import { useCallback, useEffect, useRef, useState } from "react";
 
 //#region src/components/content/Layout/hooks/useTinyScrollbar.ts

package/dist/components/content/Layout/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 import { LayoutActionsContext, LayoutContextReset, LayoutPanelContext, LayoutRefsContext, LayoutStateContext, useLayoutActionsContext, useLayoutPanelContext, useLayoutRefsContext, useLayoutStateContext } from "./LayoutContext.js";
 import { _Layout } from "./Layout.js";
 import { _LayoutContent } from "./LayoutContent.js";

package/dist/components/content/Layout/utils.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 //#region src/components/content/Layout/utils.ts
 /**
 * Clamps a size value within min/max constraints.

package/dist/components/content/Paragraph.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { _Text } from "./Text.js";
 import { CONTAINER_STYLES, TEXT_STYLES } from "@tenphi/tasty";

package/dist/components/content/Placeholder/Placeholder.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { CONTAINER_STYLES, filterBaseProps, keyframes, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/content/PrismCode/PrismCode.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 import { RendererPrism, ensureYamlSqlExtensions } from "./prismSetup.js";
 import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/content/PrismCode/prismSetup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 import { Prism as RendererPrism } from "prism-react-renderer";
 
 //#region src/components/content/PrismCode/prismSetup.tsx

package/dist/components/content/PrismDiffCode/PrismDiffCode.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 import { _PrismCode } from "../PrismCode/PrismCode.js";
 import { jsx } from "react/jsx-runtime";
 import { diffLines } from "diff";

package/dist/components/content/Result/Result.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";

package/dist/components/content/Skeleton/Skeleton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 import { Space } from "../../layout/Space.js";
 import { Grid } from "../../layout/Grid.js";
 import { Flow } from "../../layout/Flow.js";

package/dist/components/content/Tag/Tag.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 import { _Item } from "../Item/Item.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Text.d.ts

@@ -141,7 +141,7 @@ declare const MinorText: react.ComponentType<{
   accessKey?: string | undefined;
   autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
   autoFocus?: boolean | undefined;
-  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
   contextMenu?: string | undefined;
   dir?: string | undefined;
   draggable?: (boolean | "true" | "false") | undefined;
@@ -174,7 +174,7 @@ declare const MinorText: react.ComponentType<{
   popoverTargetAction?: "hide" | "toggle" | "show" | undefined;
   popoverTarget?: string | undefined;
   inert?: boolean | undefined;
-  inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+  inputMode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
   is?: string | undefined;
   exportparts?: string | undefined;
   part?: string | undefined;
@@ -190,7 +190,7 @@ declare const MinorText: react.ComponentType<{
   "aria-colindextext"?: string | undefined;
   "aria-colspan"?: number | undefined;
   "aria-controls"?: string | undefined;
-  "aria-current"?: boolean | "time" | "step" | "page" | "true" | "false" | "location" | "date" | undefined;
+  "aria-current"?: boolean | "time" | "step" | "page" | "date" | "true" | "false" | "location" | undefined;
   "aria-describedby"?: string | undefined;
   "aria-description"?: string | undefined;
   "aria-details"?: string | undefined;
@@ -421,7 +421,7 @@ declare const MinorText: react.ComponentType<{
   nowrap?: boolean | undefined;
   ellipsis?: boolean | undefined;
   qaVal?: string | number | undefined;
-  element?: `A${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `I${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
+  element?: `A${string}` | `I${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
   styles?: _tenphi_tasty0.Styles | undefined;
   breakpoints?: number[] | undefined;
   block?: boolean | undefined;
@@ -550,7 +550,7 @@ declare const DangerText: react.ComponentType<{
   accessKey?: string | undefined;
   autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
   autoFocus?: boolean | undefined;
-  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
   contextMenu?: string | undefined;
   dir?: string | undefined;
   draggable?: (boolean | "true" | "false") | undefined;
@@ -583,7 +583,7 @@ declare const DangerText: react.ComponentType<{
   popoverTargetAction?: "hide" | "toggle" | "show" | undefined;
   popoverTarget?: string | undefined;
   inert?: boolean | undefined;
-  inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+  inputMode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
   is?: string | undefined;
   exportparts?: string | undefined;
   part?: string | undefined;
@@ -599,7 +599,7 @@ declare const DangerText: react.ComponentType<{
   "aria-colindextext"?: string | undefined;
   "aria-colspan"?: number | undefined;
   "aria-controls"?: string | undefined;
-  "aria-current"?: boolean | "time" | "step" | "page" | "true" | "false" | "location" | "date" | undefined;
+  "aria-current"?: boolean | "time" | "step" | "page" | "date" | "true" | "false" | "location" | undefined;
   "aria-describedby"?: string | undefined;
   "aria-description"?: string | undefined;
   "aria-details"?: string | undefined;
@@ -830,7 +830,7 @@ declare const DangerText: react.ComponentType<{
   nowrap?: boolean | undefined;
   ellipsis?: boolean | undefined;
   qaVal?: string | number | undefined;
-  element?: `A${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `I${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
+  element?: `A${string}` | `I${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
   styles?: _tenphi_tasty0.Styles | undefined;
   breakpoints?: number[] | undefined;
   block?: boolean | undefined;
@@ -959,7 +959,7 @@ declare const SuccessText: react.ComponentType<{
   accessKey?: string | undefined;
   autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
   autoFocus?: boolean | undefined;
-  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
   contextMenu?: string | undefined;
   dir?: string | undefined;
   draggable?: (boolean | "true" | "false") | undefined;
@@ -992,7 +992,7 @@ declare const SuccessText: react.ComponentType<{
   popoverTargetAction?: "hide" | "toggle" | "show" | undefined;
   popoverTarget?: string | undefined;
   inert?: boolean | undefined;
-  inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+  inputMode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
   is?: string | undefined;
   exportparts?: string | undefined;
   part?: string | undefined;
@@ -1008,7 +1008,7 @@ declare const SuccessText: react.ComponentType<{
   "aria-colindextext"?: string | undefined;
   "aria-colspan"?: number | undefined;
   "aria-controls"?: string | undefined;
-  "aria-current"?: boolean | "time" | "step" | "page" | "true" | "false" | "location" | "date" | undefined;
+  "aria-current"?: boolean | "time" | "step" | "page" | "date" | "true" | "false" | "location" | undefined;
   "aria-describedby"?: string | undefined;
   "aria-description"?: string | undefined;
   "aria-details"?: string | undefined;
@@ -1239,7 +1239,7 @@ declare const SuccessText: react.ComponentType<{
   nowrap?: boolean | undefined;
   ellipsis?: boolean | undefined;
   qaVal?: string | number | undefined;
-  element?: `A${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `I${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
+  element?: `A${string}` | `I${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
   styles?: _tenphi_tasty0.Styles | undefined;
   breakpoints?: number[] | undefined;
   block?: boolean | undefined;
@@ -1368,7 +1368,7 @@ declare const StrongText: react.ComponentType<{
   accessKey?: string | undefined;
   autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
   autoFocus?: boolean | undefined;
-  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
   contextMenu?: string | undefined;
   dir?: string | undefined;
   draggable?: (boolean | "true" | "false") | undefined;
@@ -1401,7 +1401,7 @@ declare const StrongText: react.ComponentType<{
   popoverTargetAction?: "hide" | "toggle" | "show" | undefined;
   popoverTarget?: string | undefined;
   inert?: boolean | undefined;
-  inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+  inputMode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
   is?: string | undefined;
   exportparts?: string | undefined;
   part?: string | undefined;
@@ -1417,7 +1417,7 @@ declare const StrongText: react.ComponentType<{
   "aria-colindextext"?: string | undefined;
   "aria-colspan"?: number | undefined;
   "aria-controls"?: string | undefined;
-  "aria-current"?: boolean | "time" | "step" | "page" | "true" | "false" | "location" | "date" | undefined;
+  "aria-current"?: boolean | "time" | "step" | "page" | "date" | "true" | "false" | "location" | undefined;
   "aria-describedby"?: string | undefined;
   "aria-description"?: string | undefined;
   "aria-details"?: string | undefined;
@@ -1648,7 +1648,7 @@ declare const StrongText: react.ComponentType<{
   nowrap?: boolean | undefined;
   ellipsis?: boolean | undefined;
   qaVal?: string | number | undefined;
-  element?: `A${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `I${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
+  element?: `A${string}` | `I${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
   styles?: _tenphi_tasty0.Styles | undefined;
   breakpoints?: number[] | undefined;
   block?: boolean | undefined;
@@ -1777,7 +1777,7 @@ declare const EmphasisText: react.ComponentType<{
   accessKey?: string | undefined;
   autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
   autoFocus?: boolean | undefined;
-  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
   contextMenu?: string | undefined;
   dir?: string | undefined;
   draggable?: (boolean | "true" | "false") | undefined;
@@ -1810,7 +1810,7 @@ declare const EmphasisText: react.ComponentType<{
   popoverTargetAction?: "hide" | "toggle" | "show" | undefined;
   popoverTarget?: string | undefined;
   inert?: boolean | undefined;
-  inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+  inputMode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
   is?: string | undefined;
   exportparts?: string | undefined;
   part?: string | undefined;
@@ -1826,7 +1826,7 @@ declare const EmphasisText: react.ComponentType<{
   "aria-colindextext"?: string | undefined;
   "aria-colspan"?: number | undefined;
   "aria-controls"?: string | undefined;
-  "aria-current"?: boolean | "time" | "step" | "page" | "true" | "false" | "location" | "date" | undefined;
+  "aria-current"?: boolean | "time" | "step" | "page" | "date" | "true" | "false" | "location" | undefined;
   "aria-describedby"?: string | undefined;
   "aria-description"?: string | undefined;
   "aria-details"?: string | undefined;
@@ -2057,7 +2057,7 @@ declare const EmphasisText: react.ComponentType<{
   nowrap?: boolean | undefined;
   ellipsis?: boolean | undefined;
   qaVal?: string | number | undefined;
-  element?: `A${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `I${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
+  element?: `A${string}` | `I${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
   styles?: _tenphi_tasty0.Styles | undefined;
   breakpoints?: number[] | undefined;
   block?: boolean | undefined;
@@ -2186,7 +2186,7 @@ declare const PlaceholderText: react.ComponentType<{
   accessKey?: string | undefined;
   autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
   autoFocus?: boolean | undefined;
-  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
   contextMenu?: string | undefined;
   dir?: string | undefined;
   draggable?: (boolean | "true" | "false") | undefined;
@@ -2219,7 +2219,7 @@ declare const PlaceholderText: react.ComponentType<{
   popoverTargetAction?: "hide" | "toggle" | "show" | undefined;
   popoverTarget?: string | undefined;
   inert?: boolean | undefined;
-  inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+  inputMode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
   is?: string | undefined;
   exportparts?: string | undefined;
   part?: string | undefined;
@@ -2235,7 +2235,7 @@ declare const PlaceholderText: react.ComponentType<{
   "aria-colindextext"?: string | undefined;
   "aria-colspan"?: number | undefined;
   "aria-controls"?: string | undefined;
-  "aria-current"?: boolean | "time" | "step" | "page" | "true" | "false" | "location" | "date" | undefined;
+  "aria-current"?: boolean | "time" | "step" | "page" | "date" | "true" | "false" | "location" | undefined;
   "aria-describedby"?: string | undefined;
   "aria-description"?: string | undefined;
   "aria-details"?: string | undefined;
@@ -2466,7 +2466,7 @@ declare const PlaceholderText: react.ComponentType<{
   nowrap?: boolean | undefined;
   ellipsis?: boolean | undefined;
   qaVal?: string | number | undefined;
-  element?: `A${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `I${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
+  element?: `A${string}` | `I${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
   styles?: _tenphi_tasty0.Styles | undefined;
   breakpoints?: number[] | undefined;
   block?: boolean | undefined;
@@ -2595,7 +2595,7 @@ declare const HighlightText: react.ComponentType<{
   accessKey?: string | undefined;
   autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
   autoFocus?: boolean | undefined;
-  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
   contextMenu?: string | undefined;
   dir?: string | undefined;
   draggable?: (boolean | "true" | "false") | undefined;
@@ -2628,7 +2628,7 @@ declare const HighlightText: react.ComponentType<{
   popoverTargetAction?: "hide" | "toggle" | "show" | undefined;
   popoverTarget?: string | undefined;
   inert?: boolean | undefined;
-  inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+  inputMode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
   is?: string | undefined;
   exportparts?: string | undefined;
   part?: string | undefined;
@@ -2644,7 +2644,7 @@ declare const HighlightText: react.ComponentType<{
   "aria-colindextext"?: string | undefined;
   "aria-colspan"?: number | undefined;
   "aria-controls"?: string | undefined;
-  "aria-current"?: boolean | "time" | "step" | "page" | "true" | "false" | "location" | "date" | undefined;
+  "aria-current"?: boolean | "time" | "step" | "page" | "date" | "true" | "false" | "location" | undefined;
   "aria-describedby"?: string | undefined;
   "aria-description"?: string | undefined;
   "aria-details"?: string | undefined;
@@ -2875,7 +2875,7 @@ declare const HighlightText: react.ComponentType<{
   nowrap?: boolean | undefined;
   ellipsis?: boolean | undefined;
   qaVal?: string | number | undefined;
-  element?: `A${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `I${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
+  element?: `A${string}` | `I${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
   styles?: _tenphi_tasty0.Styles | undefined;
   breakpoints?: number[] | undefined;
   block?: boolean | undefined;

package/dist/components/content/Text.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useSlotProps } from "../../utils/react/Slots.js";
 import { BASE_STYLES, COLOR_STYLES, TEXT_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/content/TextItem/TextItem.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { TEXT_PROP_MAP, _Text } from "../Text.js";
 import { highlightText } from "../highlightText.js";

package/dist/components/content/Title.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useSlotProps } from "../../utils/react/Slots.js";
 import { TEXT_PROP_MAP } from "./Text.js";

package/dist/components/content/Tree/Tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

package/dist/components/content/Tree/TreeNode.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

package/dist/components/content/Tree/styled.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 import { _Item } from "../Item/Item.js";
 import { Action } from "../../actions/Action/Action.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Tree/tree-index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 //#region src/components/content/Tree/tree-index.ts
 function buildTreeIndex(treeData) {
 	const byKey = /* @__PURE__ */ new Map();

package/dist/components/content/Tree/use-checkbox-tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useMemo, useState } from "react";
 

package/dist/components/content/Tree/use-load-data.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useRef, useState } from "react";
 

package/dist/components/content/highlightText.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 import { _Text } from "./Text.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/content/use-auto-tooltip.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 import { TooltipProvider } from "../overlays/Tooltip/TooltipProvider.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/Checkbox/Checkbox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { _Text } from "../../content/Text.js";

package/dist/components/fields/Checkbox/CheckboxGroup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";

package/dist/components/fields/Checkbox/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 import { createContext } from "react";
 
 //#region src/components/fields/Checkbox/context.ts

package/dist/components/fields/ComboBox/ComboBox.js

@@ -1,9 +1,8 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-35f1f8f | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-fd2e2f2 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
-import { useEventBus } from "../../../utils/react/useEventBus.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
 import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";
@@ -14,6 +13,7 @@ import { _CollectionItem } from "../../CollectionItem.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";
 import { DirectionIcon } from "../../../icons/DirectionIcon.js";
 import { generateRandomId } from "../../../utils/random.js";
+import { usePopoverSync } from "../../../utils/react/usePopoverSync.js";
 import { useFormProps } from "../../form/Form/Form.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
@@ -91,7 +91,6 @@ const PROP_STYLES = [
 	...COLOR_STYLES
 ];
 function useComboBoxState({ selectedKey, defaultSelectedKey, inputValue, defaultInputValue, comboBoxId }) {
-	const { emit, on } = useEventBus();
 	const [internalSelectedKey, setInternalSelectedKey] = useState(defaultSelectedKey ?? null);
 	const [internalInputValue, setInternalInputValue] = useState(defaultInputValue ?? "");
 	const isControlledKey = selectedKey !== void 0;
@@ -99,22 +98,11 @@ function useComboBoxState({ selectedKey, defaultSelectedKey, inputValue, default
 	const effectiveSelectedKey = isControlledKey ? selectedKey : internalSelectedKey;
 	const effectiveInputValue = isControlledInput ? inputValue : internalInputValue;
 	const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-	useEffect(() => {
-		return on("popover:open", (data) => {
-			if (data.menuId !== comboBoxId && isPopoverOpen) setIsPopoverOpen(false);
-		});
-	}, [
-		on,
-		comboBoxId,
-		isPopoverOpen
-	]);
-	useEffect(() => {
-		if (isPopoverOpen) emit("popover:open", { menuId: comboBoxId });
-	}, [
-		isPopoverOpen,
-		emit,
-		comboBoxId
-	]);
+	usePopoverSync({
+		menuId: comboBoxId,
+		isOpen: isPopoverOpen,
+		onClose: () => setIsPopoverOpen(false)
+	});
 	return {
 		effectiveSelectedKey,
 		effectiveInputValue,
@@ -333,7 +321,13 @@ function ComboBoxOverlay({ isOpen, triggerRef, popoverRef, listBoxRef, direction
 		isDismissable: true,
 		shouldCloseOnInteractOutside: (el) => {
 			const menuTriggerEl = el.closest("[data-popover-trigger]");
-			if (!menuTriggerEl) return true;
+			if (!menuTriggerEl) {
+				if (el.closest("[data-popover-dismiss]")) {
+					setTimeout(onClose, 0);
+					return false;
+				}
+				return true;
+			}
 			if (menuTriggerEl === triggerRef?.current) return true;
 			return false;
 		}