@cube-dev/ui-kit 0.29.1 → 0.30.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @cube-dev/ui-kit
 
+## 0.30.1
+
+### Patch Changes
+
+- [#428](https://github.com/cube-js/cube-ui-kit/pull/428) [`95c56f7`](https://github.com/cube-js/cube-ui-kit/commit/95c56f7877140eef58014c12d2824d9fa0c69355) Thanks [@tenphi](https://github.com/tenphi)! - Add `isStatic` property to active static mode without animation in Placeholder and Skeleton components.
+
+## 0.30.0
+
+### Minor Changes
+
+- [#426](https://github.com/cube-js/cube-ui-kit/pull/426) [`b20cb7f`](https://github.com/cube-js/cube-ui-kit/commit/b20cb7f91c07a933e524477b274a96ac144985cf) Thanks [@tenphi](https://github.com/tenphi)! - Add support for `styled-components` v6.
+
 ## 0.29.1
 
 ### Patch Changes

package/cjs/_internal/hooks/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/_internal/hooks/use-chained-callback.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/_internal/hooks/use-deprecation-warning.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/_internal/hooks/use-effect-once.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/_internal/hooks/use-event.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/_internal/hooks/use-is-first-render.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/_internal/hooks/use-sync-ref.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/_internal/hooks/use-timer/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/_internal/hooks/use-timer/timer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/_internal/hooks/use-timer/use-timer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/_internal/hooks/use-update-effect.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/_internal/hooks/use-warn.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/_internal/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/components/Block.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 
@@ -12,7 +12,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const tasty_1 = require("../tasty");
 const BlockElement = (0, tasty_1.tasty)({
-    styled: {
+    styles: {
         display: 'block',
     },
 });

package/cjs/components/GlobalStyles.js

@@ -1,13 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GlobalStyles = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = require("styled-components");
 const tokens_1 = require("../tokens");
 const BODY_STYLES = {
@@ -90,10 +91,10 @@ const fontsProvider = ({ publicUrl = '', fontDisplay = 'swap' }) => `
       url(${publicUrl}/fonts/text-security-disc.woff) format('woff');
   }
 `;
-exports.GlobalStyles = (0, styled_components_1.createGlobalStyle) `
+const GlobalStylesElement = (0, styled_components_1.createGlobalStyle) `
   body {
-    ${({ applyLegacyTokens }) => {
-    return applyLegacyTokens
+    ${({ $applyLegacyTokens }) => {
+    return $applyLegacyTokens
         ? Object.entries(tokens_1.TOKENS)
             .map(([key, value]) => {
             // `inherit` value in custom property is reserved for inheritance behavior
@@ -106,8 +107,8 @@ exports.GlobalStyles = (0, styled_components_1.createGlobalStyle) `
             .join('\n    ')
         : '';
 }}
-    ${({ bodyStyles }) => {
-    return Object.entries({ ...BODY_STYLES, ...bodyStyles })
+    ${({ $bodyStyles }) => {
+    return Object.entries({ ...BODY_STYLES, ...$bodyStyles })
         .map(([key, value]) => {
         return `${key}: ${value};`;
     })
@@ -117,9 +118,9 @@ exports.GlobalStyles = (0, styled_components_1.createGlobalStyle) `
 
   html {
     overscroll-behavior-y: none;
-    --font: ${({ font }) => font ||
+    --font: ${({ $font }) => $font ||
     'Inter'}, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-    --monospace-font: ${({ monospaceFont }) => `${monospaceFont ? `${monospaceFont}, ` : ''}Menlo, Monaco, Consolas, 'Courier New', monospace;}`}
+    --monospace-font: ${({ $monospaceFont }) => `${$monospaceFont ? `${$monospaceFont}, ` : ''}Menlo, Monaco, Consolas, 'Courier New', monospace;`}
   }
 
   kbd {
@@ -199,11 +200,13 @@ exports.GlobalStyles = (0, styled_components_1.createGlobalStyle) `
     font-family: var(--monospace-font);
   }
 
-  ${({ fonts, publicUrl, fontDisplay }) => fonts === false
+  ${({ $fonts, $publicUrl, $fontDisplay }) => $fonts === false
     ? ''
-    : fontsProvider({ publicUrl, ...(fontDisplay ? { fontDisplay } : {}) })}
-
-  // Prism Code
+    : fontsProvider({
+        publicUrl: $publicUrl,
+        ...($fontDisplay ? { fontDisplay: $fontDisplay } : {}),
+    })}
+    // Prism Code
   code[class*="language-"],
   pre[class*="language-"] {
     color: var(--dark-color);
@@ -345,5 +348,15 @@ exports.GlobalStyles = (0, styled_components_1.createGlobalStyle) `
     cursor: help;
   }
 `;
+const GlobalStyles = (props) => {
+    const newProps = {};
+    Object.entries(props).forEach(([key, value]) => {
+        if (value !== undefined) {
+            newProps[`$${key}`] = value;
+        }
+    });
+    return (0, jsx_runtime_1.jsx)(GlobalStylesElement, { ...newProps });
+};
+exports.GlobalStyles = GlobalStyles;
 
         

package/cjs/components/GridProvider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 
@@ -37,7 +37,7 @@ const tasty_1 = require("../tasty");
 const react_2 = require("../utils/react");
 const tasty_2 = require("../tasty");
 const GridElement = (0, tasty_2.tasty)({
-    styled: {
+    styles: {
         display: 'contents',
     },
 });

package/cjs/components/HiddenInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 
@@ -29,10 +29,9 @@ exports.HiddenInput = styled_components_1.default.input `
     bottom: 0;
     opacity: 0.0001;
     z-index: 1;
-    cursor: ${({ isButton }) => (isButton ? 'pointer' : 'default')};
     width: 100%;
     height: 100%;
-    cursor: pointer;
+    cursor: ${({ $isButton }) => ($isButton ? 'pointer' : 'default')};
   }
 `;
 

package/cjs/components/OpenTrasition.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/components/Root.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 
@@ -81,7 +81,7 @@ function Root(allProps) {
         }
     }, []);
     const styles = (0, tasty_1.extractStyles)(props, STYLES, DEFAULT_STYLES);
-    return ((0, jsx_runtime_1.jsx)(provider_1.Provider, { router: router, root: rootRef, children: (0, jsx_runtime_1.jsx)(TrackingProvider_1.TrackingProvider, { event: tracking?.event, children: (0, jsx_runtime_1.jsx)(styled_components_1.StyleSheetManager, { disableVendorPrefixes: true, children: (0, jsx_runtime_1.jsxs)(RootElement, { ref: ref, "data-font-display": fontDisplay, ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, style: {
+    return ((0, jsx_runtime_1.jsx)(provider_1.Provider, { router: router, root: rootRef, children: (0, jsx_runtime_1.jsx)(TrackingProvider_1.TrackingProvider, { event: tracking?.event, children: (0, jsx_runtime_1.jsx)(styled_components_1.StyleSheetManager, { children: (0, jsx_runtime_1.jsxs)(RootElement, { ref: ref, "data-font-display": fontDisplay, ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, style: {
                         '--cube-dynamic-viewport-height': height
                             ? height + 'px'
                             : '100dvh',

package/cjs/components/actions/Action.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/components/actions/Button/Button.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 
@@ -252,7 +252,9 @@ exports.Button = (0, react_1.forwardRef)(function Button(allProps, ref) {
     }), [mods, isDisabled, isLoading, isSelected, singleIcon]);
     const { actionProps } = (0, use_action_1.useAction)({ ...allProps, isDisabled, mods: modifiers, ...(label ? { label } : {}) }, ref);
     const styles = (0, tasty_1.extractStyles)(props, STYLE_PROPS);
-    return ((0, jsx_runtime_1.jsxs)(ButtonElement, { ...actionProps, variant: theme, "data-theme": theme, "data-type": type ?? 'secondary', "data-size": size ?? 'medium', styles: styles, children: [icon || isLoading ? (!isLoading ? (icon) : ((0, jsx_runtime_1.jsx)(icons_1.LoadingOutlined, { "data-element": "ButtonIcon" }))) : null, children, rightIcon] }));
+    const isDisabledElement = actionProps.isDisabled;
+    delete actionProps.isDisabled;
+    return ((0, jsx_runtime_1.jsxs)(ButtonElement, { ...actionProps, disabled: isDisabledElement, variant: theme, "data-theme": theme, "data-type": type ?? 'secondary', "data-size": size ?? 'medium', styles: styles, children: [icon || isLoading ? (!isLoading ? (icon) : ((0, jsx_runtime_1.jsx)(icons_1.LoadingOutlined, { "data-element": "ButtonIcon" }))) : null, children, rightIcon] }));
 });
 
         

package/cjs/components/actions/Button/Submit.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/components/actions/Button/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/components/actions/ButtonGroup/ButtonGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/components/actions/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/components/actions/use-action.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/components/content/ActiveZone/ActiveZone.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/components/content/Alert/Alert.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/components/content/Alert/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/components/content/Alert/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/components/content/Alert/use-alert.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/components/content/Avatar/Avatar.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/components/content/Badge/Badge.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/components/content/Card/Card.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/components/content/Content.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/components/content/CopyPasteBlock/CopyPasteBlock.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/components/content/CopyPasteBlock/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/components/content/CopySnippet/CopySnippet.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/components/content/CopySnippet/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/components/content/Divider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/components/content/Footer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/components/content/Header.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/components/content/Paragraph.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 

package/cjs/components/content/Placeholder/Placeholder.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 
@@ -29,20 +29,27 @@ const PlaceholderElement = (0, tasty_1.tasty)({
 const StyledPlaceholder = (0, styled_components_1.default)(PlaceholderElement) `
   --placeholder-animation-time: 1.4s;
   --placeholder-animation-size: calc((180rem + 100vw) / 3);
-  background-image: linear-gradient(
-    135deg,
-    rgba(var(--dark-color-rgb), 0.15) 0%,
-    rgba(var(--dark-color-rgb), 0.15) 5%,
-    rgba(var(--dark-color-rgb), 0) 35%,
-    rgba(var(--dark-03-color-rgb), 0.2) 50%,
-    rgba(var(--dark-03-color-rgb), 0) 65%,
-    rgba(var(--dark-color-rgb), 0.15) 95%,
-    rgba(var(--dark-color-rgb), 0.15) 100%
-  );
   background-repeat: repeat;
   background-size: var(--placeholder-animation-size);
-  animation: placeholder-animation var(--placeholder-animation-time) linear
-    infinite;
+
+  && {
+    background-color: rgba(var(--dark-color-rgb), 0.15);
+  }
+
+  &[data-is-animated] {
+    animation: placeholder-animation var(--placeholder-animation-time) linear
+      infinite;
+    background-image: linear-gradient(
+      135deg,
+      rgba(var(--dark-color-rgb), 0.15) 0%,
+      rgba(var(--dark-color-rgb), 0.15) 5%,
+      rgba(var(--dark-color-rgb), 0) 35%,
+      rgba(var(--dark-03-color-rgb), 0.2) 50%,
+      rgba(var(--dark-03-color-rgb), 0) 65%,
+      rgba(var(--dark-color-rgb), 0.15) 95%,
+      rgba(var(--dark-color-rgb), 0.15) 100%
+    );
+  }
 
   @keyframes placeholder-animation {
     0% {
@@ -54,9 +61,9 @@ const StyledPlaceholder = (0, styled_components_1.default)(PlaceholderElement) `
   }
 `;
 exports.Placeholder = (0, react_1.forwardRef)(function Placeholder(allProps, ref) {
-    let { size = '2x', circle, ...props } = allProps;
+    let { size = '2x', isStatic, circle, ...props } = allProps;
     let styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES);
-    return ((0, jsx_runtime_1.jsx)(StyledPlaceholder, { role: "region", ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), ref: ref, styles: {
+    return ((0, jsx_runtime_1.jsx)(StyledPlaceholder, { role: "region", ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), ref: ref, mods: { animated: !isStatic }, styles: {
             height: size,
             width: circle ? size : false,
             radius: circle ? '9999rem' : '1r',

package/cjs/components/content/PrismCode/PrismCode.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.29.1
+ * @cube-dev/ui-kit v0.30.1
  * Released under the MIT license.
  */
 
@@ -33,7 +33,7 @@ function PrismCode(props, ref) {
     (0, react_1.useEffect)(() => {
         prismjs_1.default.highlightAll();
     });
-    return ((0, jsx_runtime_1.jsx)(PreElement, { ref: ref, className: "cube-prism-code", ...otherProps, children: (0, jsx_runtime_1.jsx)("code", { "data-element": "Code", className: `language-${language}`, children: code }) }));
+    return ((0, jsx_runtime_1.jsx)(PreElement, { ref: ref, ...otherProps, children: (0, jsx_runtime_1.jsx)("code", { "data-element": "Code", className: `language-${language}`, children: code }) }));
 }
 /**
  * Code block with syntax highlighting