@cube-dev/ui-kit 0.12.1 → 0.12.4

package/es/components/Root.js

@@ -1,19 +1,19 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { GlobalStyles } from './GlobalStyles';
-import { PortalProvider } from './portal';
-import { BASE_STYLES, BLOCK_STYLES, extractStyles, filterBaseProps, tasty, } from '../tasty';
-import { Provider } from '../provider';
 import { ModalProvider } from '@react-aria/overlays';
 import { StyleSheetManager } from 'styled-components';
+import { BASE_STYLES, BLOCK_STYLES, extractStyles, filterBaseProps, tasty, } from '../tasty';
+import { Provider } from '../provider';
 import { TOKENS } from '../tokens';
+import { PortalProvider } from './portal';
+import { GlobalStyles } from './GlobalStyles';
 import { AlertDialogApiProvider } from './overlays/AlertDialog';
 import { NotificationsProvider } from './overlays/NewNotifications';
 const RootElement = tasty({
@@ -29,7 +29,7 @@ const DEFAULT_STYLES = {
     }, {}),
 };
 const STYLES = [...BASE_STYLES, ...BLOCK_STYLES];
-export const Root = (allProps) => {
+export function Root(allProps) {
     let { children, 
     /** Raw css styles for body element */
     bodyStyles, fonts, publicUrl, router, font, monospaceFont, applyLegacyTokens, ...props } = allProps;
@@ -43,6 +43,6 @@ export const Root = (allProps) => {
     }, []);
     const styles = extractStyles(props, STYLES, DEFAULT_STYLES);
     return (_jsx(Provider, { router: router, root: rootRef, children: _jsx(StyleSheetManager, { disableVendorPrefixes: true, children: _jsxs(RootElement, { ref: ref, ...filterBaseProps(props, { eventProps: true }), styles: styles, children: [_jsx(GlobalStyles, { bodyStyles: bodyStyles, applyLegacyTokens: applyLegacyTokens, publicUrl: publicUrl, fonts: fonts, font: font, monospaceFont: monospaceFont }, void 0), _jsx(ModalProvider, { children: _jsx(PortalProvider, { value: ref, children: _jsx(NotificationsProvider, { rootRef: ref, children: _jsx(AlertDialogApiProvider, { children: children }, void 0) }, void 0) }, void 0) }, void 0)] }, void 0) }, void 0) }, void 0));
-};
+}
 
         

package/es/components/actions/Action.js

@@ -1,19 +1,19 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback, useContext } from 'react';
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, TEXT_STYLES, Element, } from '../../tasty';
 import { useHover } from '@react-aria/interactions';
-import { useFocus } from '../../utils/react/interactions';
 import { useButton } from '@react-aria/button';
-import { mergeProps } from '../../utils/react';
-import { UIKitContext } from '../../provider';
 import { useFocusableRef } from '@react-spectrum/utils';
+import { UIKitContext } from '../../provider';
+import { mergeProps } from '../../utils/react';
+import { useFocus } from '../../utils/react/interactions';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, TEXT_STYLES, Element, } from '../../tasty';
 const FILTER_OPTIONS = { propNames: new Set(['onMouseEnter', 'onMouseLeave']) };
 /**
  * Helper to open link.
@@ -91,7 +91,7 @@ const DEFAULT_STYLES = {
     cursor: 'pointer',
 };
 const STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];
-export const Action = forwardRef(({ to, as, htmlType, label, theme, mods, onPress, ...props }, ref) => {
+export const Action = forwardRef(function Action({ to, as, htmlType, label, theme, mods, onPress, ...props }, ref) {
     as = to ? 'a' : as || 'button';
     const router = useContext(UIKitContext).router;
     const isDisabled = props.isDisabled;
@@ -121,7 +121,7 @@ export const Action = forwardRef(({ to, as, htmlType, label, theme, mods, onPres
             focused: isFocused && !isDisabled,
             disabled: isDisabled,
             ...mods,
-        }, "aria-label": label, "data-theme": theme, ...mergeProps(buttonProps, hoverProps, focusProps, customProps, filterBaseProps(props, FILTER_OPTIONS)), type: htmlType || 'button', rel: as === 'a' && newTab ? 'rel="noopener noreferrer"' : undefined, ref: domRef, as: as, isDisabled: isDisabled, styles: styles, target: target, href: href }, void 0));
+        }, "aria-label": label, "data-theme": theme, ...mergeProps(buttonProps, hoverProps, focusProps, customProps, filterBaseProps(props, FILTER_OPTIONS)), ref: domRef, type: htmlType || 'button', rel: as === 'a' && newTab ? 'rel="noopener noreferrer"' : undefined, as: as, isDisabled: isDisabled, styles: styles, target: target, href: href }, void 0));
 });
 
         

package/es/components/actions/Button/Button.js

@@ -1,18 +1,17 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, forwardRef, useMemo } from 'react';
-import { Action } from '../Action';
 import { LoadingOutlined } from '@ant-design/icons';
+import { Action } from '../Action';
 import { accessibilityWarning } from '../../../utils/warnings';
-export function provideStyles({ type, theme }) {
+export function provideButtonStyles({ type, theme }) {
     return {
-        ...DEFAULT_STYLES,
         ...(theme === 'danger' ? DANGER_STYLES_BY_TYPE : DEFAULT_STYLES_BY_TYPE)[type !== null && type !== void 0 ? type : 'secondary'],
     };
 }
@@ -210,7 +209,7 @@ const DANGER_STYLES_BY_TYPE = {
         },
     },
 };
-const DEFAULT_STYLES = {
+export const DEFAULT_BUTTON_STYLES = {
     display: 'inline-grid',
     placeItems: 'center stretch',
     placeContent: 'center',
@@ -225,10 +224,10 @@ const DEFAULT_STYLES = {
     textDecoration: 'none',
     transition: 'theme',
     padding: {
-        '': '(1.25x - 1px) (2x - 1px)',
-        '[data-size="small"]': '(.75x - 1px) (1.5x - 1px)',
-        '[data-size="medium"]': '(1.25x - 1px) (2x - 1px)',
-        '[data-size="large"]': '(1.5x - 1px) (2.5x - 1px)',
+        '': '(1.25x - 1bw) (2x - 1bw)',
+        '[data-size="small"]': '(.75x - 1bw) (1.5x - 1bw)',
+        '[data-size="medium"]': '(1.25x - 1bw) (2x - 1bw)',
+        '[data-size="large"]': '(1.5x - 1bw) (2.5x - 1bw)',
         'single-icon-only': 0,
     },
     width: {
@@ -247,7 +246,7 @@ const DEFAULT_STYLES = {
     '& .anticon': {
         transition: 'display .2s steps(1, start), margin .2s linear, opacity .2s linear',
     },
-    Icon: {
+    ButtonIcon: {
         fontSize: {
             '': 'initial',
             '[data-size="small"]': '14px',
@@ -256,7 +255,7 @@ const DEFAULT_STYLES = {
         },
     },
 };
-export const Button = forwardRef((allProps, ref) => {
+export const Button = forwardRef(function Button(allProps, ref) {
     let { type, size, label, styles, children, theme, icon, rightIcon, mods, ...props } = allProps;
     const isDisabled = props.isDisabled;
     const isLoading = props.isLoading;
@@ -275,17 +274,18 @@ export const Button = forwardRef((allProps, ref) => {
     }
     children = children || icon || rightIcon ? children : label;
     styles = useMemo(() => ({
-        ...provideStyles({ type, theme }),
+        ...DEFAULT_BUTTON_STYLES,
+        ...provideButtonStyles({ type, theme }),
         ...styles,
     }), [type, theme, styles]);
     if (icon) {
         icon = cloneElement(icon, {
-            'data-element': 'Icon',
+            'data-element': 'ButtonIcon',
         });
     }
     if (rightIcon) {
         rightIcon = cloneElement(rightIcon, {
-            'data-element': 'Icon',
+            'data-element': 'ButtonIcon',
         });
     }
     const singleIcon = !!(((icon && !rightIcon) || (rightIcon && !icon)) &&

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

@@ -1,15 +1,15 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { Button } from './Button';
 import { useProviderProps } from '../../../provider';
 import { useFormProps } from '../../forms/Form/Form';
+import { Button } from './Button';
 function Submit(props, ref) {
     props = useProviderProps(props);
     props = useFormProps(props);

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

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

package/es/components/actions/ButtonGroup/ButtonGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -16,7 +16,7 @@ const ButtonGroupElement = tasty(Space, {
         gridArea: 'buttonGroup',
     },
 });
-export const ButtonGroup = forwardRef((props, ref) => {
+export const ButtonGroup = forwardRef(function ButtonGroup(props, ref) {
     return (_jsx(ButtonGroupElement, { ref: ref, ...useSlotProps(props, 'buttonGroup') }, void 0));
 });
 

package/es/components/actions/index.js

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

package/es/components/content/ActiveZone/ActiveZone.js

@@ -1,17 +1,17 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useHover } from '@react-aria/interactions';
-import { mergeProps } from '../../../utils/react';
-import { CONTAINER_STYLES, Element, extractStyles, filterBaseProps, TEXT_STYLES, } from '../../../tasty';
 import { useFocusableRef } from '@react-spectrum/utils';
 import { useFocusable } from '@react-aria/focus';
+import { mergeProps } from '../../../utils/react';
+import { CONTAINER_STYLES, Element, extractStyles, filterBaseProps, TEXT_STYLES, } from '../../../tasty';
 import { useFocus } from '../../../utils/react/interactions';
 const DEFAULT_STYLES = {
     display: 'inline-block',
@@ -23,15 +23,15 @@ const DEFAULT_STYLES = {
     transition: 'theme',
 };
 const STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];
-const ActiveZone = ({ as, label, onClick, ...props }, ref) => {
+function ActiveZone({ as, label, onClick, ...props }, ref) {
     const isDisabled = props.isDisabled;
     const styles = extractStyles(props, STYLE_PROPS, DEFAULT_STYLES);
     const domRef = useFocusableRef(ref);
     let { hoverProps, isHovered } = useHover({ isDisabled });
     let { focusProps, isFocused } = useFocus({ isDisabled });
     let { focusableProps } = useFocusable(props, domRef);
-    return (_jsx(Element, { "data-is-hovered": isHovered && !isDisabled ? '' : null, "data-is-focused": isFocused && !isDisabled ? '' : null, "data-is-disabled": isDisabled || null, "aria-label": label, ...mergeProps(hoverProps, focusProps, focusableProps, { onClick }, filterBaseProps(props, { eventProps: true })), tabIndex: props.excludeFromTabOrder || isDisabled ? -1 : 0, as: as, styles: styles, ref: domRef }, void 0));
-};
+    return (_jsx(Element, { "data-is-hovered": isHovered && !isDisabled ? '' : null, "data-is-focused": isFocused && !isDisabled ? '' : null, "data-is-disabled": isDisabled || null, "aria-label": label, ...mergeProps(hoverProps, focusProps, focusableProps, { onClick }, filterBaseProps(props, { eventProps: true })), ref: domRef, tabIndex: props.excludeFromTabOrder || isDisabled ? -1 : 0, as: as, styles: styles }, void 0));
+}
 const _ActiveZone = forwardRef(ActiveZone);
 export { _ActiveZone as ActiveZone };
 

package/es/components/content/Alert/Alert.js

@@ -1,15 +1,15 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import THEMES from '../../../data/themes';
-import { useAlert } from './use-alert';
 import { tasty } from '../../../tasty';
+import { useAlert } from './use-alert';
 const AlertElement = tasty({
     name: 'Alert',
     role: 'alert',
@@ -42,7 +42,7 @@ const AlertElement = tasty({
 });
 export const Alert = forwardRef(function Alert(props, ref) {
     const { styles, theme, filteredProps } = useAlert(props);
-    return (_jsx(AlertElement, { ...filteredProps, "data-type": theme, styles: styles, ref: ref }, void 0));
+    return (_jsx(AlertElement, { ...filteredProps, ref: ref, "data-type": theme, styles: styles }, void 0));
 });
 
         

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

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

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

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

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

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

package/es/components/content/Avatar/Avatar.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -22,12 +22,12 @@ const DEFAULT_STYLES = {
     lineHeight: 'calc(@avatar-size / 2)',
     fontWeight: 500,
 };
-export const Avatar = forwardRef(({ size = '4x', icon, children, ...props }, ref) => {
+export const Avatar = forwardRef(function Avatar({ size = '4x', icon, children, ...props }, ref) {
     const styles = extractStyles(props, CONTAINER_STYLES, {
         ...DEFAULT_STYLES,
         '--avatar-size': size,
     });
-    return (_jsxs(Element, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref, "data-theme": "special", children: [icon, children] }, void 0));
+    return (_jsxs(Element, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles, "data-theme": "special", children: [icon, children] }, void 0));
 });
 
         

package/es/components/content/Badge/Badge.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -37,13 +37,13 @@ const BadgeElement = tasty({
         },
     },
 });
-export const Badge = forwardRef((allProps, ref) => {
+export const Badge = forwardRef(function Badge(allProps, ref) {
     let { type, children, ...props } = allProps;
     const styles = extractStyles(props, CONTAINER_STYLES);
-    return (_jsx(BadgeElement, { ...filterBaseProps(props, { eventProps: true }), "data-type": type, mods: {
+    return (_jsx(BadgeElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, "data-type": type, mods: {
             single: typeof children === 'string' && children.length === 1,
             multiple: typeof children === 'string' && children.length === 2,
-        }, styles: styles, ref: ref, children: children }, void 0));
+        }, styles: styles, children: children }, void 0));
 });
 
         

package/es/components/content/Card/Card.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -21,9 +21,9 @@ const CardElement = tasty({
     },
     styleProps: CONTAINER_STYLES,
 });
-export const Card = forwardRef((props, ref) => {
+export const Card = forwardRef(function Card(props, ref) {
     const styles = extractStyles(props, CONTAINER_STYLES);
-    return (_jsx(CardElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    return (_jsx(CardElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles }, void 0));
 });
 
         

package/es/components/content/Content.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -24,10 +24,10 @@ const ContentElement = tasty({
         styledScrollbar: true,
     },
 });
-export const Content = forwardRef((props, ref) => {
+export const Content = forwardRef(function Content(props, ref) {
     props = useSlotProps(props, 'content');
     const styles = extractStyles(props, STYLE_LIST);
-    return (_jsx(ContentElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    return (_jsx(ContentElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles }, void 0));
 });
 
         

package/es/components/content/CopySnippet/CopySnippet.js

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

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

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

package/es/components/content/Divider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -37,12 +37,12 @@ const DividerElement = tasty({
     },
     styleProps: [...OUTER_STYLES, ...BASE_STYLES, ...COLOR_STYLES],
 });
-export const Divider = forwardRef((props, ref) => {
+export const Divider = forwardRef(function Divider(props, ref) {
     const { mods, children, styles, ...otherProps } = useSlotProps(props, 'divider');
     return (_jsx(DividerElement, { as: children ? 'div' : 'hr', role: children ? 'separator' : undefined, mods: {
             text: !!children,
             ...mods,
-        }, ...filterBaseProps(otherProps, { eventProps: true }), styles: styles, ref: ref, children: children && (_jsxs(_Fragment, { children: [_jsx("div", { "data-element": "Line" }, void 0), _jsx("div", { children: children }, void 0), _jsx("div", { "data-element": "Line" }, void 0)] }, void 0)) }, void 0));
+        }, ...filterBaseProps(otherProps, { eventProps: true }), ref: ref, styles: styles, children: children && (_jsxs(_Fragment, { children: [_jsx("div", { "data-element": "Line" }, void 0), _jsx("div", { children: children }, void 0), _jsx("div", { "data-element": "Line" }, void 0)] }, void 0)) }, void 0));
 });
 
         

package/es/components/content/Footer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -19,10 +19,10 @@ const FooterElement = tasty({
         flow: 'column',
     },
 });
-export const Footer = forwardRef((props, ref) => {
+export const Footer = forwardRef(function Footer(props, ref) {
     props = useSlotProps(props, 'footer');
     const styles = extractStyles(props, STYLE_LIST);
-    return (_jsx(FooterElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    return (_jsx(FooterElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles }, void 0));
 });
 
         

package/es/components/content/Header.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -19,10 +19,10 @@ const HeaderElement = tasty({
         flow: 'column',
     },
 });
-export const Header = forwardRef((props, ref) => {
+export const Header = forwardRef(function Header(props, ref) {
     props = useSlotProps(props, 'header');
     const styles = extractStyles(props, STYLE_LIST);
-    return (_jsx(HeaderElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    return (_jsx(HeaderElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles }, void 0));
 });
 
         

package/es/components/content/Paragraph.js

@@ -1,23 +1,23 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { Text } from './Text';
 import { CONTAINER_STYLES, extractStyles, TEXT_STYLES, } from '../../tasty';
+import { Text } from './Text';
 const DEFAULT_STYLES = {
     preset: 'p3',
     color: '#dark.75',
     display: 'block',
 };
 const STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];
-export const Paragraph = forwardRef((props, ref) => {
+export const Paragraph = forwardRef(function Paragraph(props, ref) {
     const styles = extractStyles(props, STYLE_PROPS, DEFAULT_STYLES);
-    return _jsx(Text, { as: "p", qa: "Paragraph", ...props, styles: styles, ref: ref }, void 0);
+    return _jsx(Text, { as: "p", qa: "Paragraph", ...props, ref: ref, styles: styles }, void 0);
 });
 
         

package/es/components/content/Placeholder/Placeholder.js

@@ -1,14 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../../tasty';
 import styled from 'styled-components';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../../tasty';
 const PlaceholderElement = tasty({
     role: 'alert',
     'aria-live': 'polite',
@@ -47,15 +47,15 @@ const StyledPlaceholder = styled(PlaceholderElement) `
     }
   }
 `;
-export const Placeholder = forwardRef((allProps, ref) => {
+export const Placeholder = forwardRef(function Placeholder(allProps, ref) {
     let { size = '2x', circle, ...props } = allProps;
     let styles = extractStyles(props, CONTAINER_STYLES);
-    return (_jsx(StyledPlaceholder, { role: "region", ...filterBaseProps(props, { eventProps: true }), styles: {
+    return (_jsx(StyledPlaceholder, { role: "region", ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: {
             height: size,
             width: circle ? size : false,
             radius: circle ? '9999rem' : '1r',
             ...styles,
-        }, ref: ref }, void 0));
+        } }, void 0));
 });
 
         

package/es/components/content/PrismCode/PrismCode.js

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

package/es/components/content/Result/Result.js

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

package/es/components/content/Skeleton/Skeleton.js

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

package/es/components/content/Tag/Tag.js

@@ -1,17 +1,17 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
+import { CloseOutlined } from '@ant-design/icons';
 import THEMES from '../../../data/themes';
 import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../../tasty';
 import { Action } from '../../actions/Action';
 import { Suffix } from '../../layout/Suffix';
-import { CloseOutlined } from '@ant-design/icons';
 const TagElement = tasty({
     qa: 'Tag',
     role: 'status',
@@ -75,13 +75,13 @@ const CloseAction = tasty(Action, {
         padding: '0 .5x',
     },
 });
-const Tag = (allProps, ref) => {
+function Tag(allProps, ref) {
     let { type, isClosable, onClose, closeButtonStyles, children, ...props } = allProps;
     const styles = extractStyles(props, CONTAINER_STYLES);
-    return (_jsxs(TagElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, "data-type": type, mods: { closable: isClosable }, ref: ref, children: [_jsx("div", { "data-element": "Content", children: children }, void 0), isClosable ? (_jsx(Suffix, { outerGap: "0", children: _jsx(CloseAction, { styles: closeButtonStyles, onPress: onClose, children: _jsx(CloseOutlined, { style: {
+    return (_jsxs(TagElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles, "data-type": type, mods: { closable: isClosable }, children: [_jsx("div", { "data-element": "Content", children: children }, void 0), isClosable ? (_jsx(Suffix, { outerGap: "0", children: _jsx(CloseAction, { styles: closeButtonStyles, onPress: onClose, children: _jsx(CloseOutlined, { style: {
                             fontSize: 'calc(var(--font-size) - (var(--border-width) * 2))',
                         } }, void 0) }, void 0) }, void 0)) : undefined] }, void 0));
-};
+}
 const _Tag = forwardRef(Tag);
 export { _Tag as Tag };