@cube-dev/ui-kit 0.48.1 → 0.49.1

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @cube-dev/ui-kit
 
+## 0.49.1
+
+### Patch Changes
+
+- [#562](https://github.com/cube-js/cube-ui-kit/pull/562) [`381c3bd`](https://github.com/cube-js/cube-ui-kit/commit/381c3bdf5498b681a78728cca49457dd55153293) Thanks [@tenphi](https://github.com/tenphi)! - Change PrismCode default font and add selection styles.
+
+- [#562](https://github.com/cube-js/cube-ui-kit/pull/562) [`381c3bd`](https://github.com/cube-js/cube-ui-kit/commit/381c3bdf5498b681a78728cca49457dd55153293) Thanks [@tenphi](https://github.com/tenphi)! - Improve CopySnippet formatting to clear CR symbols and remove spaces at the end of each line.
+
+## 0.49.0
+
+### Minor Changes
+
+- [#560](https://github.com/cube-js/cube-ui-kit/pull/560) [`268867e`](https://github.com/cube-js/cube-ui-kit/commit/268867efd99c14161732b0bbb42b88951ac06bf7) Thanks [@tenphi](https://github.com/tenphi)! - Rename Submit to SubmitButton.
+
+- [#560](https://github.com/cube-js/cube-ui-kit/pull/560) [`268867e`](https://github.com/cube-js/cube-ui-kit/commit/268867efd99c14161732b0bbb42b88951ac06bf7) Thanks [@tenphi](https://github.com/tenphi)! - Form's resetFields() method now resets errors and touched status as well.
+
+- [#560](https://github.com/cube-js/cube-ui-kit/pull/560) [`268867e`](https://github.com/cube-js/cube-ui-kit/commit/268867efd99c14161732b0bbb42b88951ac06bf7) Thanks [@tenphi](https://github.com/tenphi)! - Add `resetFieldsValidation()` and `setFieldError()` methods to form to replace deprecated `setFields()`.
+
+- [#560](https://github.com/cube-js/cube-ui-kit/pull/560) [`268867e`](https://github.com/cube-js/cube-ui-kit/commit/268867efd99c14161732b0bbb42b88951ac06bf7) Thanks [@tenphi](https://github.com/tenphi)! - Add ResetButton component.
+
+- [#560](https://github.com/cube-js/cube-ui-kit/pull/560) [`268867e`](https://github.com/cube-js/cube-ui-kit/commit/268867efd99c14161732b0bbb42b88951ac06bf7) Thanks [@tenphi](https://github.com/tenphi)! - Simplify API of CopySnippet and improve its design.
+
+- [#560](https://github.com/cube-js/cube-ui-kit/pull/560) [`268867e`](https://github.com/cube-js/cube-ui-kit/commit/268867efd99c14161732b0bbb42b88951ac06bf7) Thanks [@tenphi](https://github.com/tenphi)! - Allow to pass base styles to Alert as props.
+
+- [#560](https://github.com/cube-js/cube-ui-kit/pull/560) [`268867e`](https://github.com/cube-js/cube-ui-kit/commit/268867efd99c14161732b0bbb42b88951ac06bf7) Thanks [@tenphi](https://github.com/tenphi)! - Add `isInvalid` and `isValid` props to form instance. First one checks if the form has at least one field that is verified and invalid. The second one checks if ALL fields are verified and valid. Be careful: `isValid` and `!isInvalid` are not the same.
+
+- [#560](https://github.com/cube-js/cube-ui-kit/pull/560) [`268867e`](https://github.com/cube-js/cube-ui-kit/commit/268867efd99c14161732b0bbb42b88951ac06bf7) Thanks [@tenphi](https://github.com/tenphi)! - More flexible and easier control over disable state of Reset and Submit buttons.
+
+### Patch Changes
+
+- [#560](https://github.com/cube-js/cube-ui-kit/pull/560) [`268867e`](https://github.com/cube-js/cube-ui-kit/commit/268867efd99c14161732b0bbb42b88951ac06bf7) Thanks [@tenphi](https://github.com/tenphi)! - Recalculate the sidebar position on container resize.
+
+- [#560](https://github.com/cube-js/cube-ui-kit/pull/560) [`268867e`](https://github.com/cube-js/cube-ui-kit/commit/268867efd99c14161732b0bbb42b88951ac06bf7) Thanks [@tenphi](https://github.com/tenphi)! - Fix pressed state in primary type Button.
+
+- [#560](https://github.com/cube-js/cube-ui-kit/pull/560) [`268867e`](https://github.com/cube-js/cube-ui-kit/commit/268867efd99c14161732b0bbb42b88951ac06bf7) Thanks [@tenphi](https://github.com/tenphi)! - Fix bug that prevents `onSizeChange()` callback from being fired when ResizablePanel resized beyond its constraints.
+
+- [#560](https://github.com/cube-js/cube-ui-kit/pull/560) [`268867e`](https://github.com/cube-js/cube-ui-kit/commit/268867efd99c14161732b0bbb42b88951ac06bf7) Thanks [@tenphi](https://github.com/tenphi)! - Fix Radio.Button styles.
+
 ## 0.48.1
 
 ### Patch Changes

package/cjs/_internal/hooks/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.48.1
+ * @cube-dev/ui-kit v0.49.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.48.1
+ * @cube-dev/ui-kit v0.49.1
  * Released under the MIT license.
  */
 

package/cjs/_internal/hooks/use-debounced-value.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.48.1
+ * @cube-dev/ui-kit v0.49.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.48.1
+ * @cube-dev/ui-kit v0.49.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.48.1
+ * @cube-dev/ui-kit v0.49.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.48.1
+ * @cube-dev/ui-kit v0.49.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.48.1
+ * @cube-dev/ui-kit v0.49.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.48.1
+ * @cube-dev/ui-kit v0.49.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.48.1
+ * @cube-dev/ui-kit v0.49.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.48.1
+ * @cube-dev/ui-kit v0.49.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.48.1
+ * @cube-dev/ui-kit v0.49.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.48.1
+ * @cube-dev/ui-kit v0.49.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.48.1
+ * @cube-dev/ui-kit v0.49.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.48.1
+ * @cube-dev/ui-kit v0.49.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.48.1
+ * @cube-dev/ui-kit v0.49.1
  * Released under the MIT license.
  */
 

package/cjs/components/GlobalStyles.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.48.1
+ * @cube-dev/ui-kit v0.49.1
  * Released under the MIT license.
  */
 
@@ -224,7 +224,7 @@ const GlobalStylesElement = (0, styled_components_1.createGlobalStyle) `
   pre[class*="language-"] {
     color: var(--dark-color);
     background: none;
-    font-family: "Source Code Pro", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    font-family: var(--monospace-font);
     text-align: left;
     font-weight: normal;
     font-size: 14px;
@@ -249,13 +249,13 @@ const GlobalStylesElement = (0, styled_components_1.createGlobalStyle) `
   pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
   code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
     text-shadow: none;
-    /*background: #b3d4fc;*/
+    background: rgba(var(--purple-color-rgb), .2);
   }
 
   pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
   code[class*="language-"]::selection, code[class*="language-"] ::selection {
     text-shadow: none;
-    /*background: #b3d4fc;*/
+    background: rgba(var(--purple-color-rgb), .2);
   }
 
   @media print {

package/cjs/components/GridProvider.js

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

package/cjs/components/HiddenInput.js

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

package/cjs/components/OpenTrasition.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.48.1
+ * @cube-dev/ui-kit v0.49.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.48.1
+ * @cube-dev/ui-kit v0.49.1
  * Released under the MIT license.
  */
 

package/cjs/components/actions/Action/Action.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.48.1
+ * @cube-dev/ui-kit v0.49.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.48.1
+ * @cube-dev/ui-kit v0.49.1
  * Released under the MIT license.
  */
 
@@ -94,8 +94,8 @@ const ButtonElement = (0, tasty_1.tasty)({
             fill: {
                 '': '#clear',
                 '[data-type="primary"]': '#purple',
-                '[data-type="primary"] & pressed': '#purple',
                 '[data-type="primary"] & hovered': '#purple-text',
+                '[data-type="primary"] & pressed': '#purple',
                 '[data-type="secondary"]': '#purple.10',
                 '[data-type="secondary"] & hovered': '#purple.16',
                 '[data-type="secondary"] & pressed': '#purple-text.10',

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.48.1
+ * @cube-dev/ui-kit v0.49.1
  * Released under the MIT license.
  */
 
@@ -22,6 +22,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Button"), exports);
-__exportStar(require("./Submit"), exports);
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.48.1
+ * @cube-dev/ui-kit v0.49.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.48.1
+ * @cube-dev/ui-kit v0.49.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.48.1
+ * @cube-dev/ui-kit v0.49.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.48.1
+ * @cube-dev/ui-kit v0.49.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.48.1
+ * @cube-dev/ui-kit v0.49.1
  * Released under the MIT license.
  */
 
@@ -23,7 +23,7 @@ const AlertElement = (0, tasty_1.tasty)({
     styles: {
         display: 'block',
         flow: 'column',
-        radius: '1r',
+        radius: '@large-radius',
         padding: '1.5x',
         preset: 't3',
         color: {

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.48.1
+ * @cube-dev/ui-kit v0.49.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.48.1
+ * @cube-dev/ui-kit v0.49.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.48.1
+ * @cube-dev/ui-kit v0.49.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.48.1
+ * @cube-dev/ui-kit v0.49.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.48.1
+ * @cube-dev/ui-kit v0.49.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.48.1
+ * @cube-dev/ui-kit v0.49.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.48.1
+ * @cube-dev/ui-kit v0.49.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.48.1
+ * @cube-dev/ui-kit v0.49.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.48.1
+ * @cube-dev/ui-kit v0.49.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.48.1
+ * @cube-dev/ui-kit v0.49.1
  * Released under the MIT license.
  */
 
@@ -33,15 +33,25 @@ const StyledBlock = (0, tasty_1.tasty)({
     styles: {
         position: 'relative',
         overflow: {
-            '': 'hidden',
-            scroll: 'auto hidden',
+            '': 'auto clip',
+            multiline: 'auto',
         },
-        maxWidth: '100%',
+        width: 'initial auto 100%',
+        height: {
+            '': 'max 5x',
+            multiline: 'auto',
+        },
+        boxSizing: 'border-box',
         whiteSpace: {
             '': 'initial',
             nowrap: 'nowrap',
         },
         styledScrollbar: true,
+        padding: '1.125x 1.5x',
+        fade: {
+            '': 'right 2x',
+            multiline: false,
+        },
         '& code': {
             font: {
                 '': 'monospace',
@@ -53,74 +63,71 @@ const StyledBlock = (0, tasty_1.tasty)({
 const ButtonContainer = (0, tasty_1.tasty)({
     styles: {
         position: 'relative',
-        display: 'grid',
-        gridAutoFlow: 'column',
-        margin: '(-1x - 1bw) -1.5x (-1x - 1bw) -1x',
-        '&::after': {
-            display: {
-                '': 'none',
-                overlay: 'block',
-            },
-            content: '""',
-            width: '2x',
-            position: 'absolute',
-            left: '-1x',
-            top: 0,
-            bottom: 0,
-            backgroundImage: 'linear-gradient(to right,rgba(var(--context-fill-color-rgb),0),rgba(var(--context-fill-color-rgb),1))',
+        display: 'flex',
+        flow: {
+            '': 'row-reverse',
+            multiline: 'column',
+        },
+        placeContent: 'start',
+        '@button-size': {
+            '': '5x',
+            multiline: '4x',
         },
+        '@button-radius': {
+            '': '0',
+            multiline: '1r',
+        },
+        // Make sure there's a small gap between buttons and the content
+        border: 'left #clear',
     },
 });
 const CopySnippetElement = (0, tasty_1.tasty)(Card_1.Card, {
     qa: 'CopySnippet',
     styles: {
-        display: 'block',
+        display: 'grid',
+        gridRows: 'minmax(0, 1fr)',
         fill: '#grey-light',
-        radius: '@large-radius',
         border: 0,
         padding: 0,
+        preset: 'default',
+        radius: '1r',
+        overflow: 'hidden',
         Grid: {
             display: 'grid',
             flow: 'row',
             gridColumns: 'minmax(0, 1fr) auto',
+            gridRows: 'minmax(0, 1fr)',
             width: 'min 20x',
-            radius: '@large-radius',
             position: 'relative',
-            overflow: 'hidden',
         },
     },
 });
 const ActionButton = (0, tasty_1.tasty)(actions_1.Button, {
     type: 'clear',
     styles: {
-        padding: '1x 1.5x',
-        radius: 0,
-        placeSelf: {
-            '': 'none',
-            '!multiline & !with-scroll': 'stretch',
-        },
+        width: '4x',
+        padding: 0,
+        placeSelf: 'stretch',
         border: '#clear',
         outline: {
             '': '#purple-03.0',
             'focused & focus-visible': '#purple-03 inset',
         },
+        height: '@button-size',
+        radius: {
+            '': '0',
+            ':last-child': '0 0 0 @button-radius',
+            ':first-child': '0 @button-radius 0 0',
+            ':last-child & :first-child': '0 @button-radius 0 @button-radius',
+        },
     },
 });
 const CopyButton = (0, tasty_1.tasty)(ActionButton, {
     icon: (0, jsx_runtime_1.jsx)(icons_1.CopyIcon, {}),
     'aria-label': 'Copy to clipboard',
-    styles: {
-        radius: {
-            '': '0 1r 1r 0',
-            'multiline | with-scroll': '0 1r 0 0',
-        },
-    },
 });
 const ShowButton = (0, tasty_1.tasty)(ActionButton, {
     'aria-label': 'Show hidden parts',
-    styles: {
-        radius: 0,
-    },
 });
 // const HIDDEN_SYMBOL = '●';
 const HIDDEN_SYMBOL = '•';
@@ -128,7 +135,7 @@ function replaceSymbolsToHidden(str) {
     return HIDDEN_SYMBOL.repeat(str.length);
 }
 function CopySnippet(allProps) {
-    const { code = '', title = 'Code example', nowrap, prefix = '', language, showScroll = true, serif, actions, padding = '1.125x 1.5x', showOverlay = true, showTooltip = false, styles, hideText, ...props } = allProps;
+    const { code = '', title = 'Code example', nowrap, prefix = '', language, serif, actions, showTooltip = false, hideText, ...props } = allProps;
     const { toast } = (0, Toasts_1.useToastsApi)();
     const [showHidden, setShowHidden] = (0, react_1.useState)(false);
     async function onCopy() {
@@ -138,8 +145,9 @@ function CopySnippet(allProps) {
     const pristineCode = code.replace(/\n$/, '');
     const multiline = pristineCode.includes('\n') && !nowrap;
     let formattedCode = pristineCode
+        .replace(/\r/g, '')
         .split(/\n/g)
-        .map((line) => `${prefix}${line} `)
+        .map((line) => `${prefix}${line}`)
         .join('\n')
         .trim();
     if (!showHidden) {
@@ -155,7 +163,15 @@ function CopySnippet(allProps) {
             });
         }
     }
-    const Snippet = ((0, jsx_runtime_1.jsx)(CopySnippetElement, { styles: { preset: 'default', ...styles }, ...props, children: (0, jsx_runtime_1.jsxs)("div", { "data-element": "Grid", children: [(0, jsx_runtime_1.jsx)(StyledBlock, { mods: { nowrap, multiline, scroll: showScroll, serif }, styles: { padding }, children: (0, jsx_runtime_1.jsx)(PrismCode_1.PrismCode, { style: { margin: 0, overflow: 'visible' }, code: formattedCode, language: language || 'javascript' }) }), (0, jsx_runtime_1.jsxs)(ButtonContainer, { styles: { padding }, mods: { overlay: showOverlay }, children: [actions, hideText && ((0, jsx_runtime_1.jsx)(ShowButton, { icon: showHidden ? (0, jsx_runtime_1.jsx)(icons_1.EyeInvisibleIcon, {}) : (0, jsx_runtime_1.jsx)(icons_1.EyeIcon, {}), mods: { multiline, withScroll: showScroll }, onPress: () => setShowHidden(!showHidden) })), (0, jsx_runtime_1.jsx)(CopyButton, { "aria-label": `Copy ${title}`, mods: { multiline, withScroll: showScroll, hidden: !!hideText }, onPress: onCopy })] })] }) }));
+    const mods = (0, react_1.useMemo)(() => {
+        return {
+            nowrap,
+            multiline,
+            serif,
+            hidden: !!hideText,
+        };
+    }, [nowrap, multiline, hideText, serif]);
+    const Snippet = ((0, jsx_runtime_1.jsx)(CopySnippetElement, { mods: mods, ...props, children: (0, jsx_runtime_1.jsxs)("div", { "data-element": "Grid", children: [(0, jsx_runtime_1.jsx)(StyledBlock, { mods: mods, children: (0, jsx_runtime_1.jsx)(PrismCode_1.PrismCode, { style: { margin: 0, overflow: 'visible' }, code: formattedCode, language: language || 'javascript' }) }), (0, jsx_runtime_1.jsxs)(ButtonContainer, { mods: mods, children: [(0, jsx_runtime_1.jsx)(CopyButton, { "aria-label": `Copy ${title}`, onPress: onCopy }), hideText && ((0, jsx_runtime_1.jsx)(ShowButton, { icon: showHidden ? (0, jsx_runtime_1.jsx)(icons_1.EyeInvisibleIcon, {}) : (0, jsx_runtime_1.jsx)(icons_1.EyeIcon, {}), onPress: () => setShowHidden(!showHidden) })), actions] })] }) }));
     if (showTooltip) {
         return ((0, jsx_runtime_1.jsxs)(TooltipTrigger_1.TooltipTrigger, { children: [(0, jsx_runtime_1.jsx)(ActionElement, { children: Snippet }), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { children: formattedCode })] }));
     }