@cube-dev/ui-kit 0.0.0-canary-91f0075 → 0.0.0-canary-0a19c7a

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-91f0075 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0a19c7a | 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-91f0075 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0a19c7a | 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-91f0075 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0a19c7a | Cube Dev Team */
 import { _PrismCode } from "../PrismCode/PrismCode.js";
 import { c } from "react-compiler-runtime";
 import { jsx } from "react/jsx-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-91f0075 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0a19c7a | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";
@@ -15,6 +15,7 @@ const Container = tasty({
 	qa: "ResultContainer",
 	as: "section",
 	styles: {
+		"@in-dialog": "@parent(id=Dialog)",
 		display: {
 			"": "flex",
 			compact: "grid"
@@ -36,7 +37,8 @@ const Container = tasty({
 		padding: {
 			"": "6x 4x",
 			compact: "0",
-			"layout=stacked": "1.5x"
+			"layout=stacked": "1.5x",
+			"layout=stacked & @in-dialog": "0"
 		},
 		textAlign: {
 			"": "center",

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

@@ -1 +1 @@
-{"version":3,"file":"Result.js","names":["FocusableRef","IconAlertTriangleFilled","IconCircleCheckFilled","IconCircleXFilled","IconInfoCircleFilled","BaseProps","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","tasty","ComponentType","createContext","forwardRef","ReactNode","useContext","mergeProps","wrapNodeIfPlain","extractStyles","Button","CubeButtonProps","Title","CubeResultProps","children","icon","status","CubeResultStatus","subTitle","subtitle","title","actions","size","CubeResultSize","layout","CubeResultLayout","isCompact","StatusIconMap","Record","Container","qa","as","styles","display","compact","gridAreas","flow","placeContent","placeItems","gap","padding","textAlign","boxSizing","width","margin","Icon","$","gridArea","color","placeSelf","textWrap","Content","Actions","ResultSizeContext","undefined","CubeResultActionProps","ResultAction","t0","ref","_c","props","resultSize","t1","type","t2","statusIconMap","success","error","info","warning","Result","T0","t3","t4","t5","t6","t7","t8","t9","otherProps","console","warn","isLarge","knownStatus","hasOwnProperty","StatusIcon","t10","iconContent","t11","iconNode","eventProps","mods","_Result","Object","assign","Action","displayName"],"sources":["../../../../src/components/content/Result/Result.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n  IconAlertTriangleFilled,\n  IconCircleCheckFilled,\n  IconCircleXFilled,\n  IconInfoCircleFilled,\n} from '@tabler/icons-react';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  ComponentType,\n  createContext,\n  forwardRef,\n  ReactNode,\n  useContext,\n} from 'react';\n\nimport { mergeProps, wrapNodeIfPlain } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { Button, CubeButtonProps } from '../../actions/Button/Button';\nimport { Title } from '../Title';\n\nexport interface CubeResultProps extends BaseProps, ContainerStyleProps {\n  /** Free content between the text and the actions, e.g. an alert or details */\n  children?: ReactNode;\n  /** Custom icon element */\n  icon?: ReactNode;\n  /**\n   * Result status from ready-made templates\n   * @default 'info'\n   */\n  status?: CubeResultStatus;\n  /**\n   * The subTitle\n   * @deprecated The subTitle prop is deprecated and will be removed in next major release. consider using subtitle instead\n   */\n  subTitle?: ReactNode;\n  /**\n   * Subtitle of the Result component\n   */\n  subtitle?: ReactNode;\n  /** The title */\n  title?: ReactNode;\n  /**\n   * Action buttons, as `Result.Action` elements so they follow the Result's size.\n   * A centered row by default, a full-width column in the `stacked` layout\n   */\n  actions?: ReactNode;\n  /**\n   * Visual scale: the icon size and the title and subtitle presets. Does not change the layout.\n   * Ignored when `isCompact` is set\n   * @default 'medium'\n   */\n  size?: CubeResultSize;\n  /**\n   * Arrangement of the block. `stacked` fills the container and stacks the actions to the full width,\n   * as in a confirmation or result dialog. Combine with `size=\"large\"` for the dialog card.\n   * Ignored when `isCompact` is set\n   * @default 'default'\n   */\n  layout?: CubeResultLayout;\n  /** Whether the result component has a compact presentation. Overrides `size` and `layout` */\n  isCompact?: boolean;\n}\n\nexport type CubeResultSize = 'medium' | 'large';\n\nexport type CubeResultLayout = 'default' | 'stacked';\n\nexport type CubeResultStatus =\n  | 'success'\n  | 'error'\n  | 'info'\n  | 'warning'\n  | 404\n  | 403\n  | 500;\n\n// `null` for a status without an icon, so no empty slot is rendered\ntype StatusIconMap = Record<CubeResultStatus, ComponentType | null>;\n\nconst Container = tasty({\n  qa: 'ResultContainer',\n  as: 'section',\n  styles: {\n    display: {\n      '': 'flex',\n      compact: 'grid',\n    },\n    gridAreas: '\"icon title\" \"content content\" \"actions actions\"',\n    flow: 'column',\n    placeContent: {\n      '': 'center',\n      compact: 'start',\n    },\n    placeItems: {\n      '': 'center',\n      compact: 'start',\n    },\n    // Outside compact the blocks below the title space themselves, so the\n    // icon's own room is the whole distance to the title\n    gap: {\n      '': '0',\n      compact: '2x 1x',\n    },\n    padding: {\n      '': '6x 4x',\n      // The host pads: a dialog `Content` or the page section the card fills\n      compact: '0',\n      // Adds to the host's padding, e.g. a dialog `Content`\n      'layout=stacked': '1.5x',\n    },\n    textAlign: {\n      '': 'center',\n      compact: 'left',\n    },\n    boxSizing: 'border-box',\n    width: {\n      '': 'max 80ch',\n      // Fill the container so stacked actions share one width wherever the card sits\n      'layout=stacked': '0 100% 80ch',\n    },\n    margin: {\n      '': '0 auto',\n      compact: '0',\n    },\n    '--icon-size': {\n      '': '6x',\n      'size=large': '10x',\n    },\n\n    Icon: {\n      $: '>',\n      display: 'grid',\n      gridArea: 'icon',\n      // Room around the icon grows with it, so the large icon is not crowded\n      padding: {\n        '': '($icon-size / 4)',\n        compact: '0',\n      },\n      // A custom icon keeps its own color\n      color: {\n        '': 'inherit',\n        'status=info': '#purple',\n        'status=success': '#success',\n        'status=error': '#danger',\n        'status=warning': '#warning',\n      },\n    },\n\n    Title: {\n      $: '>',\n      gridArea: 'title',\n      display: 'flex',\n      flow: 'column',\n      placeItems: 'inherit',\n      gap: '1x',\n      placeSelf: 'center',\n      textWrap: 'balance',\n    },\n\n    Content: {\n      $: '>',\n      gridArea: 'content',\n      display: 'block',\n      margin: {\n        '': 'top 3x',\n        compact: '0',\n      },\n      placeSelf: {\n        '': 'auto',\n        'layout=stacked': 'stretch',\n      },\n    },\n\n    Actions: {\n      $: '>',\n      gridArea: 'actions',\n      display: 'flex',\n      margin: {\n        '': 'top 3x',\n        compact: '0',\n      },\n      flow: {\n        '': 'row wrap',\n        'layout=stacked': 'column',\n      },\n      gap: '1x',\n      placeContent: {\n        '': 'center',\n        compact: 'start',\n      },\n      placeItems: {\n        '': 'center',\n        'layout=stacked': 'stretch',\n      },\n      placeSelf: {\n        '': 'auto',\n        'layout=stacked': 'stretch',\n      },\n    },\n  },\n});\n\nconst ResultSizeContext = createContext<CubeResultSize | undefined>(undefined);\n\nexport type CubeResultActionProps = CubeButtonProps;\n\n/**\n * A `Button` for the Result `actions` slot. Its size follows the Result's `size` unless set.\n * A link keeps Button's own `inline` size\n */\nconst ResultAction = forwardRef(function ResultAction(\n  { size, ...props }: CubeResultActionProps,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const resultSize = useContext(ResultSizeContext);\n\n  return (\n    <Button\n      ref={ref}\n      {...props}\n      size={size ?? (props.type === 'link' ? undefined : resultSize)}\n    />\n  );\n});\n\nconst statusIconMap: StatusIconMap = {\n  success: () => <IconCircleCheckFilled />,\n  error: () => <IconCircleXFilled />,\n  info: () => <IconInfoCircleFilled />,\n  warning: () => <IconAlertTriangleFilled />,\n  // TODO: Needs to be implemented in the future\n  404: null,\n  403: null,\n  500: null,\n};\n\nfunction Result(props: CubeResultProps, ref) {\n  let {\n    children,\n    isCompact,\n    icon,\n    status,\n    subTitle,\n    subtitle,\n    title,\n    actions,\n    size = 'medium',\n    layout = 'default',\n    ...otherProps\n  } = props;\n\n  subtitle = subtitle ?? subTitle;\n\n  if (icon && status) {\n    console.warn(\n      'Don\\'t use \"icon\" and \"status\" together, it can lead to possible errors.',\n    );\n  }\n\n  // The compact grid has its own scale and arrangement; `size` and `layout`\n  // describe the centered column only, so they are dropped rather than mixed in\n  if (isCompact) {\n    size = 'medium';\n    layout = 'default';\n  }\n\n  const isLarge = size === 'large';\n\n  // An unknown status falls back to `info` for the color too, not only the icon\n  const knownStatus: CubeResultStatus =\n    status && statusIconMap.hasOwnProperty(status) ? status : 'info';\n  const StatusIcon = statusIconMap[knownStatus];\n\n  // A custom icon shares the status icon's wrapper, so it gets the same room\n  const iconContent = icon || (StatusIcon && <StatusIcon />);\n  const iconNode = iconContent && <div data-element=\"Icon\">{iconContent}</div>;\n\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  return (\n    <Container\n      {...mergeProps(filterBaseProps(otherProps, { eventProps: true }), {\n        mods: {\n          compact: isCompact,\n          size,\n          layout,\n          status: icon ? undefined : knownStatus,\n        },\n      })}\n      ref={ref}\n      styles={styles}\n    >\n      {iconNode}\n      {(title || subtitle) && (\n        <div data-element=\"Title\">\n          {wrapNodeIfPlain(title, () => (\n            <Title level={2} preset={isCompact ? 'h5' : isLarge ? 'h2' : 'h4'}>\n              {title}\n            </Title>\n          ))}\n          {wrapNodeIfPlain(subtitle, () => (\n            <Title\n              // A name no provider defines: the dialog `title` slot must reach\n              // the title only, or both headings get the dialog's label id\n              slot=\"subtitle\"\n              level={3}\n              preset={isCompact ? 't3m' : isLarge ? 't2' : 't2m'}\n            >\n              {subtitle}\n            </Title>\n          ))}\n        </div>\n      )}\n      {children && <div data-element=\"Content\">{children}</div>}\n      {actions && (\n        <div data-element=\"Actions\">\n          <ResultSizeContext.Provider value={size}>\n            {actions}\n          </ResultSizeContext.Provider>\n        </div>\n      )}\n    </Container>\n  );\n}\n\nconst _Result = Object.assign(forwardRef(Result), { Action: ResultAction });\n\n_Result.displayName = 'Result';\n\nexport { _Result as Result, ResultAction };\n"],"mappings":"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"}
+{"version":3,"file":"Result.js","names":["FocusableRef","IconAlertTriangleFilled","IconCircleCheckFilled","IconCircleXFilled","IconInfoCircleFilled","BaseProps","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","tasty","ComponentType","createContext","forwardRef","ReactNode","useContext","mergeProps","wrapNodeIfPlain","extractStyles","Button","CubeButtonProps","Title","CubeResultProps","children","icon","status","CubeResultStatus","subTitle","subtitle","title","actions","size","CubeResultSize","layout","CubeResultLayout","isCompact","StatusIconMap","Record","Container","qa","as","styles","display","compact","gridAreas","flow","placeContent","placeItems","gap","padding","textAlign","boxSizing","width","margin","Icon","$","gridArea","color","placeSelf","textWrap","Content","Actions","ResultSizeContext","undefined","CubeResultActionProps","ResultAction","t0","ref","_c","props","resultSize","t1","type","t2","statusIconMap","success","error","info","warning","Result","T0","t3","t4","t5","t6","t7","t8","t9","otherProps","console","warn","isLarge","knownStatus","hasOwnProperty","StatusIcon","t10","iconContent","t11","iconNode","eventProps","mods","_Result","Object","assign","Action","displayName"],"sources":["../../../../src/components/content/Result/Result.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n  IconAlertTriangleFilled,\n  IconCircleCheckFilled,\n  IconCircleXFilled,\n  IconInfoCircleFilled,\n} from '@tabler/icons-react';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  ComponentType,\n  createContext,\n  forwardRef,\n  ReactNode,\n  useContext,\n} from 'react';\n\nimport { mergeProps, wrapNodeIfPlain } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { Button, CubeButtonProps } from '../../actions/Button/Button';\nimport { Title } from '../Title';\n\nexport interface CubeResultProps extends BaseProps, ContainerStyleProps {\n  /** Free content between the text and the actions, e.g. an alert or details */\n  children?: ReactNode;\n  /** Custom icon element */\n  icon?: ReactNode;\n  /**\n   * Result status from ready-made templates\n   * @default 'info'\n   */\n  status?: CubeResultStatus;\n  /**\n   * The subTitle\n   * @deprecated The subTitle prop is deprecated and will be removed in next major release. consider using subtitle instead\n   */\n  subTitle?: ReactNode;\n  /**\n   * Subtitle of the Result component\n   */\n  subtitle?: ReactNode;\n  /** The title */\n  title?: ReactNode;\n  /**\n   * Action buttons, as `Result.Action` elements so they follow the Result's size.\n   * A centered row by default, a full-width column in the `stacked` layout\n   */\n  actions?: ReactNode;\n  /**\n   * Visual scale: the icon size and the title and subtitle presets. Does not change the layout.\n   * Ignored when `isCompact` is set\n   * @default 'medium'\n   */\n  size?: CubeResultSize;\n  /**\n   * Arrangement of the block. `stacked` fills the container and stacks the actions to the full width,\n   * as in a confirmation or result dialog. Combine with `size=\"large\"` for the dialog card.\n   * Ignored when `isCompact` is set\n   * @default 'default'\n   */\n  layout?: CubeResultLayout;\n  /** Whether the result component has a compact presentation. Overrides `size` and `layout` */\n  isCompact?: boolean;\n}\n\nexport type CubeResultSize = 'medium' | 'large';\n\nexport type CubeResultLayout = 'default' | 'stacked';\n\nexport type CubeResultStatus =\n  | 'success'\n  | 'error'\n  | 'info'\n  | 'warning'\n  | 404\n  | 403\n  | 500;\n\n// `null` for a status without an icon, so no empty slot is rendered\ntype StatusIconMap = Record<CubeResultStatus, ComponentType | null>;\n\nconst Container = tasty({\n  qa: 'ResultContainer',\n  as: 'section',\n  styles: {\n    // Any ancestor: the Result sits in the dialog's `Content`, not in `Dialog`\n    '@in-dialog': '@parent(id=Dialog)',\n\n    display: {\n      '': 'flex',\n      compact: 'grid',\n    },\n    gridAreas: '\"icon title\" \"content content\" \"actions actions\"',\n    flow: 'column',\n    placeContent: {\n      '': 'center',\n      compact: 'start',\n    },\n    placeItems: {\n      '': 'center',\n      compact: 'start',\n    },\n    // Outside compact the blocks below the title space themselves, so the\n    // icon's own room is the whole distance to the title\n    gap: {\n      '': '0',\n      compact: '2x 1x',\n    },\n    padding: {\n      '': '6x 4x',\n      // The host pads: a dialog `Content` or the page section the card fills\n      compact: '0',\n      'layout=stacked': '1.5x',\n      // The dialog's `Content` already pads it\n      'layout=stacked & @in-dialog': '0',\n    },\n    textAlign: {\n      '': 'center',\n      compact: 'left',\n    },\n    boxSizing: 'border-box',\n    width: {\n      '': 'max 80ch',\n      // Fill the container so stacked actions share one width wherever the card sits\n      'layout=stacked': '0 100% 80ch',\n    },\n    margin: {\n      '': '0 auto',\n      compact: '0',\n    },\n    '--icon-size': {\n      '': '6x',\n      'size=large': '10x',\n    },\n\n    Icon: {\n      $: '>',\n      display: 'grid',\n      gridArea: 'icon',\n      // Room around the icon grows with it, so the large icon is not crowded\n      padding: {\n        '': '($icon-size / 4)',\n        compact: '0',\n      },\n      // A custom icon keeps its own color\n      color: {\n        '': 'inherit',\n        'status=info': '#purple',\n        'status=success': '#success',\n        'status=error': '#danger',\n        'status=warning': '#warning',\n      },\n    },\n\n    Title: {\n      $: '>',\n      gridArea: 'title',\n      display: 'flex',\n      flow: 'column',\n      placeItems: 'inherit',\n      gap: '1x',\n      placeSelf: 'center',\n      textWrap: 'balance',\n    },\n\n    Content: {\n      $: '>',\n      gridArea: 'content',\n      display: 'block',\n      margin: {\n        '': 'top 3x',\n        compact: '0',\n      },\n      placeSelf: {\n        '': 'auto',\n        'layout=stacked': 'stretch',\n      },\n    },\n\n    Actions: {\n      $: '>',\n      gridArea: 'actions',\n      display: 'flex',\n      margin: {\n        '': 'top 3x',\n        compact: '0',\n      },\n      flow: {\n        '': 'row wrap',\n        'layout=stacked': 'column',\n      },\n      gap: '1x',\n      placeContent: {\n        '': 'center',\n        compact: 'start',\n      },\n      placeItems: {\n        '': 'center',\n        'layout=stacked': 'stretch',\n      },\n      placeSelf: {\n        '': 'auto',\n        'layout=stacked': 'stretch',\n      },\n    },\n  },\n});\n\nconst ResultSizeContext = createContext<CubeResultSize | undefined>(undefined);\n\nexport type CubeResultActionProps = CubeButtonProps;\n\n/**\n * A `Button` for the Result `actions` slot. Its size follows the Result's `size` unless set.\n * A link keeps Button's own `inline` size\n */\nconst ResultAction = forwardRef(function ResultAction(\n  { size, ...props }: CubeResultActionProps,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const resultSize = useContext(ResultSizeContext);\n\n  return (\n    <Button\n      ref={ref}\n      {...props}\n      size={size ?? (props.type === 'link' ? undefined : resultSize)}\n    />\n  );\n});\n\nconst statusIconMap: StatusIconMap = {\n  success: () => <IconCircleCheckFilled />,\n  error: () => <IconCircleXFilled />,\n  info: () => <IconInfoCircleFilled />,\n  warning: () => <IconAlertTriangleFilled />,\n  // TODO: Needs to be implemented in the future\n  404: null,\n  403: null,\n  500: null,\n};\n\nfunction Result(props: CubeResultProps, ref) {\n  let {\n    children,\n    isCompact,\n    icon,\n    status,\n    subTitle,\n    subtitle,\n    title,\n    actions,\n    size = 'medium',\n    layout = 'default',\n    ...otherProps\n  } = props;\n\n  subtitle = subtitle ?? subTitle;\n\n  if (icon && status) {\n    console.warn(\n      'Don\\'t use \"icon\" and \"status\" together, it can lead to possible errors.',\n    );\n  }\n\n  // The compact grid has its own scale and arrangement; `size` and `layout`\n  // describe the centered column only, so they are dropped rather than mixed in\n  if (isCompact) {\n    size = 'medium';\n    layout = 'default';\n  }\n\n  const isLarge = size === 'large';\n\n  // An unknown status falls back to `info` for the color too, not only the icon\n  const knownStatus: CubeResultStatus =\n    status && statusIconMap.hasOwnProperty(status) ? status : 'info';\n  const StatusIcon = statusIconMap[knownStatus];\n\n  // A custom icon shares the status icon's wrapper, so it gets the same room\n  const iconContent = icon || (StatusIcon && <StatusIcon />);\n  const iconNode = iconContent && <div data-element=\"Icon\">{iconContent}</div>;\n\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  return (\n    <Container\n      {...mergeProps(filterBaseProps(otherProps, { eventProps: true }), {\n        mods: {\n          compact: isCompact,\n          size,\n          layout,\n          status: icon ? undefined : knownStatus,\n        },\n      })}\n      ref={ref}\n      styles={styles}\n    >\n      {iconNode}\n      {(title || subtitle) && (\n        <div data-element=\"Title\">\n          {wrapNodeIfPlain(title, () => (\n            <Title level={2} preset={isCompact ? 'h5' : isLarge ? 'h2' : 'h4'}>\n              {title}\n            </Title>\n          ))}\n          {wrapNodeIfPlain(subtitle, () => (\n            <Title\n              // A name no provider defines: the dialog `title` slot must reach\n              // the title only, or both headings get the dialog's label id\n              slot=\"subtitle\"\n              level={3}\n              preset={isCompact ? 't3m' : isLarge ? 't2' : 't2m'}\n            >\n              {subtitle}\n            </Title>\n          ))}\n        </div>\n      )}\n      {children && <div data-element=\"Content\">{children}</div>}\n      {actions && (\n        <div data-element=\"Actions\">\n          <ResultSizeContext.Provider value={size}>\n            {actions}\n          </ResultSizeContext.Provider>\n        </div>\n      )}\n    </Container>\n  );\n}\n\nconst _Result = Object.assign(forwardRef(Result), { Action: ResultAction });\n\n_Result.displayName = 'Result';\n\nexport { _Result as Result, ResultAction };\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-91f0075 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0a19c7a | 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-91f0075 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0a19c7a | Cube Dev Team */
 import { _Item } from "../Item/Item.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";