@cube-dev/ui-kit 0.9.10 → 0.10.1

package/es/components/{organisms → content}/Alert/Alert.js

@@ -1,19 +1,19 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import THEMES from '../../../data/themes';
-import { CONTAINER_STYLES, TEXT_STYLES } from '../../../styles/list';
-import { extractStyles } from '../../../utils/styles';
-import { filterBaseProps } from '../../../utils/filterBaseProps';
-import { styled } from '../../../styled';
-const RawAlert = styled({
+import { useAlert } from './use-alert';
+import { tasty } from '../../../tasty';
+const AlertElement = tasty({
     name: 'Alert',
+    role: 'alert',
+    qa: 'Alert',
     styles: {
         display: 'block',
         flow: 'column',
@@ -39,17 +39,10 @@ const RawAlert = styled({
             }, {}),
         },
     },
-    props: {
-        role: 'alert',
-        qa: 'Alert',
-    },
 });
-const STYLE_LIST = [...CONTAINER_STYLES, ...TEXT_STYLES];
-export const Alert = forwardRef((allProps, ref) => {
-    let { type, label, isDisabled, ...props } = allProps;
-    type = isDisabled ? 'disabled' : type || 'note';
-    const styles = extractStyles(props, STYLE_LIST);
-    return (_jsx(RawAlert, { ...filterBaseProps(props, { eventProps: true }), "data-type": type, styles: styles, ref: ref }, void 0));
+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));
 });
 
         

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

@@ -0,0 +1,10 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.10.1
+ * Released under the MIT license.
+ */
+
+export * from './Alert';
+
+        

package/es/components/{types.js → content/Alert/types.js}

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

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

@@ -0,0 +1,28 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.10.1
+ * Released under the MIT license.
+ */
+
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, TEXT_STYLES, } from '../../../tasty';
+import { useDeprecationWarning } from '../../../_internal';
+const STYLE_LIST = [...CONTAINER_STYLES, ...TEXT_STYLES];
+export function useAlert(props) {
+    var _a;
+    const { type, isDisabled = false, theme } = props;
+    const styles = extractStyles(props, STYLE_LIST);
+    useDeprecationWarning(typeof type === 'undefined', {
+        property: 'type',
+        name: 'Alert',
+        betterAlternative: 'theme',
+    });
+    const _theme = isDisabled ? 'disabled' : (_a = theme !== null && theme !== void 0 ? theme : type) !== null && _a !== void 0 ? _a : 'note';
+    return {
+        styles,
+        theme: _theme,
+        filteredProps: filterBaseProps(props, { eventProps: true }),
+    };
+}
+
+        

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

@@ -1,16 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { Base } from '../../Base';
-import { CONTAINER_STYLES } from '../../../styles/list';
-import { extractStyles } from '../../../utils/styles';
-import { filterBaseProps } from '../../../utils/filterBaseProps';
+import { CONTAINER_STYLES, Element, extractStyles, filterBaseProps, } from '../../../tasty';
 const DEFAULT_STYLES = {
     display: 'grid',
     gap: '1x',
@@ -30,7 +27,7 @@ export const Avatar = forwardRef(({ size = '4x', icon, children, ...props }, ref
         ...DEFAULT_STYLES,
         '--avatar-size': size,
     });
-    return (_jsxs(Base, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref, "data-theme": "special", children: [icon, children] }, void 0));
+    return (_jsxs(Element, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref, "data-theme": "special", children: [icon, children] }, void 0));
 });
 
         

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

@@ -1,20 +1,17 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import THEMES from '../../../data/themes';
-import { CONTAINER_STYLES } from '../../../styles/list';
-import { extractStyles } from '../../../utils/styles';
-import { filterBaseProps } from '../../../utils/filterBaseProps';
-import { styled } from '../../../styled';
-const RawBadge = styled({
-    name: 'Badge',
-    props: { role: 'region' },
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../../tasty';
+const BadgeElement = tasty({
+    qa: 'Badge',
+    role: 'region',
     styles: {
         display: 'inline-flex',
         placeContent: 'center',
@@ -43,7 +40,7 @@ const RawBadge = styled({
 export const Badge = forwardRef((allProps, ref) => {
     let { type, children, ...props } = allProps;
     const styles = extractStyles(props, CONTAINER_STYLES);
-    return (_jsx(RawBadge, { ...filterBaseProps(props, { eventProps: true }), "data-type": type, mods: {
+    return (_jsx(BadgeElement, { ...filterBaseProps(props, { eventProps: true }), "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));

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

@@ -1,28 +1,28 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { Base } from '../../Base';
-import { CONTAINER_STYLES } from '../../../styles/list';
-import { extractStyles } from '../../../utils/styles';
-import { filterBaseProps } from '../../../utils/filterBaseProps';
-const DEFAULT_STYLES = {
-    display: 'block',
-    flow: 'column',
-    radius: '1r',
-    fill: '#white',
-    border: true,
-    padding: '1.5x',
-    preset: 't3',
-};
+import { CONTAINER_STYLES, filterBaseProps, tasty, } from '../../../tasty';
+const CardElement = tasty({
+    role: 'region',
+    styles: {
+        display: 'block',
+        flow: 'column',
+        radius: '1r',
+        fill: '#white',
+        border: true,
+        padding: '1.5x',
+        preset: 't3',
+    },
+    styleProps: CONTAINER_STYLES,
+});
 export const Card = forwardRef((props, ref) => {
-    const styles = extractStyles(props, CONTAINER_STYLES, DEFAULT_STYLES);
-    return (_jsx(Base, { role: "region", ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    return (_jsx(CardElement, { ...filterBaseProps(props, { eventProps: true }), styles: props.styles, ref: ref }, void 0));
 });
 
         

package/es/components/content/Content.js

@@ -1,21 +1,18 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { styled } from '../../styled';
-import { CONTAINER_STYLES, TEXT_STYLES } from '../../styles/list';
-import { extractStyles } from '../../utils/styles';
-import { filterBaseProps } from '../../utils/filterBaseProps';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, TEXT_STYLES, } from '../../tasty';
 import { useSlotProps } from '../../utils/react';
 const STYLE_LIST = [...CONTAINER_STYLES, ...TEXT_STYLES];
-const RawContent = styled({
-    name: 'Content',
-    tag: 'section',
+const ContentElement = tasty({
+    qa: 'Content',
+    as: 'section',
     styles: {
         gridArea: 'content',
         preset: 'p3',
@@ -26,14 +23,11 @@ const RawContent = styled({
         overflow: 'auto',
         styledScrollbar: true,
     },
-    props: {
-        'data-id': 'Content',
-    },
 });
 export const Content = forwardRef((props, ref) => {
     props = useSlotProps(props, 'content');
     const styles = extractStyles(props, STYLE_LIST);
-    return (_jsx(RawContent, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    return (_jsx(ContentElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 
         

package/es/components/{organisms → content}/CopySnippet/CopySnippet.js

@@ -1,29 +1,28 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import copy from 'clipboard-copy';
-import { Button } from '../../actions';
-import { Card } from '../../content/Card/Card';
-import { Grid } from '../../layout/Grid';
-import { styled } from '../../../styled';
+import { Action, Button } from '../../actions';
+import { Card } from '../Card/Card';
+import { tasty } from '../../../tasty';
 import { PrismCode, } from '../../content/PrismCode/PrismCode';
 import { notification } from '../../../services/notification';
 import { CopyOutlined } from '@ant-design/icons';
 import { TooltipTrigger } from '../../overlays/Tooltip/TooltipTrigger';
-import { Action } from '../../actions/Action';
 import { Tooltip } from '../../overlays/Tooltip/Tooltip';
-const POSITION_ACTION = {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-    zIndex: 1,
-};
-const StyledBlock = styled({
+const ActionElement = tasty(Action, {
+    styles: {
+        display: 'block',
+        cursor: 'default',
+        width: '100%',
+    },
+});
+const StyledBlock = tasty({
     styles: {
         position: 'relative',
         overflow: {
@@ -44,7 +43,7 @@ const StyledBlock = styled({
         },
     },
 });
-const ButtonContainer = styled({
+const ButtonContainer = tasty({
     styles: {
         position: 'relative',
         '&::after': {
@@ -62,6 +61,49 @@ const ButtonContainer = styled({
         },
     },
 });
+const CopySnippetElement = tasty(Card, {
+    qa: 'CopySnippet',
+    styles: {
+        fill: '#grey-light',
+        radius: '1r',
+        border: 0,
+        padding: 0,
+        Grid: {
+            display: 'grid',
+            flow: 'row',
+            gridColumns: 'minmax(0, 1fr) 5x',
+            width: 'min 20x',
+            radius: '1r',
+            position: 'relative',
+            overflow: 'hidden',
+        },
+    },
+});
+const CopyButton = tasty(Button, {
+    type: 'clear',
+    icon: _jsx(CopyOutlined, {}, void 0),
+    styles: {
+        padding: '1x 1.5x',
+        fontWeight: 500,
+        radius: {
+            '': '0 1r 1r 0',
+            'multiline | with-scroll': '0 1r',
+        },
+        placeSelf: {
+            '': 'none',
+            '!multiline & !with-scroll': 'stretch',
+        },
+        border: '#clear',
+        outline: {
+            '': '#purple-03.0',
+            'focused & focus-visible': '#purple-03 inset',
+        },
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        zIndex: 1,
+    },
+});
 export function CopySnippet(allProps) {
     let { code, title, nowrap, prefix, language, showScroll = true, serif, children, padding, showOverlay = true, showTooltip = false, styles, ...props } = allProps;
     padding = padding || '1.125x 1.5x';
@@ -80,24 +122,17 @@ export function CopySnippet(allProps) {
         preset: 'default',
         ...styles,
     };
-    const Snippet = (_jsx(Card, { "data-qa": "CopySnippet", fill: "#grey-light", radius: "1r", border: 0, padding: 0, styles: styles, ...props, children: _jsxs(Grid, { columns: "minmax(0, 1fr) 5x", width: "min 20x", radius: "1r", style: { position: 'relative', overflow: 'hidden' }, children: [_jsx(StyledBlock, { mods: {
+    const Snippet = (_jsx(CopySnippetElement, { styles: styles, ...props, children: _jsxs("div", { "data-element": "Grid", children: [_jsx(StyledBlock, { mods: {
                         nowrap,
                         multiline,
                         scroll: showScroll,
                         serif,
-                    }, styles: { padding }, children: _jsx(PrismCode, { style: { margin: 0, overflow: 'visible' }, code: formattedCode, language: language || 'javascript' }, void 0) }, void 0), _jsx(ButtonContainer, { styles: { padding }, mods: { overlay: showOverlay } }, void 0), _jsx(Button, { label: `Copy ${codeTitle}`, type: "clear", styles: {
-                        padding: '1x 1.5x',
-                        fontWeight: 500,
-                        radius: multiline || showScroll ? '0 1r' : '0 1r 1r 0',
-                        placeSelf: !multiline && !showScroll ? 'stretch' : 'none',
-                        border: '#clear',
-                        outline: {
-                            '': '#purple-03.0',
-                            'focused & focus-visible': '#purple-03 inset',
-                        },
-                    }, style: POSITION_ACTION, onPress: onCopy, icon: _jsx(CopyOutlined, {}, void 0) }, void 0)] }, void 0) }, void 0));
+                    }, styles: { padding }, children: _jsx(PrismCode, { style: { margin: 0, overflow: 'visible' }, code: formattedCode, language: language || 'javascript' }, void 0) }, void 0), _jsx(ButtonContainer, { styles: { padding }, mods: { overlay: showOverlay }, children: _jsx(CopyButton, { label: `Copy ${codeTitle}`, mods: {
+                            multiline,
+                            'with-scroll': showScroll,
+                        }, onPress: onCopy }, void 0) }, void 0)] }, void 0) }, void 0));
     if (showTooltip) {
-        return (_jsxs(TooltipTrigger, { children: [_jsx(Action, { styles: { display: 'block', cursor: 'default', width: '100%' }, children: Snippet }, void 0), _jsx(Tooltip, { children: formattedCode }, void 0)] }, void 0));
+        return (_jsxs(TooltipTrigger, { children: [_jsx(ActionElement, { children: Snippet }, void 0), _jsx(Tooltip, { children: formattedCode }, void 0)] }, void 0));
     }
     return Snippet;
 }

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

@@ -0,0 +1,10 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.10.1
+ * Released under the MIT license.
+ */
+
+export * from './CopySnippet';
+
+        

package/es/components/content/Divider.js

@@ -1,50 +1,48 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { Base } from '../Base';
-import { OUTER_STYLES, BASE_STYLES, COLOR_STYLES } from '../../styles/list';
-import { extractStyles } from '../../utils/styles';
-import { filterBaseProps } from '../../utils/filterBaseProps';
+import { BASE_STYLES, COLOR_STYLES, filterBaseProps, OUTER_STYLES, tasty, } from '../../tasty';
 import { useSlotProps } from '../../utils/react';
-const STYLE_LIST = [...OUTER_STYLES, ...BASE_STYLES, ...COLOR_STYLES];
-const DEFAULT_STYLES = {
-    gridArea: 'divider',
-    display: {
-        '': 'block',
-        text: 'grid',
+const DividerElement = tasty({
+    styles: {
+        gridArea: 'divider',
+        display: {
+            '': 'block',
+            text: 'grid',
+        },
+        gridColumns: '1fr auto 1fr',
+        placeItems: 'center stretch',
+        gap: '1x',
+        preset: 'c1',
+        height: {
+            '': '1bw 1bw',
+            text: 'auto',
+        },
+        fill: {
+            '': '#border',
+            text: 'none',
+        },
+        border: '0',
+        margin: '0',
+        Line: {
+            height: '1bw 1bw',
+            fill: '#border',
+        },
     },
-    gridColumns: '1fr auto 1fr',
-    placeItems: 'center stretch',
-    gap: '1x',
-    preset: 'c1',
-    height: {
-        '': '1bw 1bw',
-        text: 'auto',
-    },
-    fill: {
-        '': '#border',
-        text: 'none',
-    },
-    border: '0',
-    margin: '0',
-    Line: {
-        height: '1bw 1bw',
-        fill: '#border',
-    },
-};
+    styleProps: [...OUTER_STYLES, ...BASE_STYLES, ...COLOR_STYLES],
+});
 export const Divider = forwardRef((props, ref) => {
-    const { mods, children, ...otherProps } = useSlotProps(props, 'divider');
-    const styles = extractStyles(otherProps, STYLE_LIST, DEFAULT_STYLES);
-    return (_jsx(Base, { as: children ? 'div' : 'hr', role: children ? 'separator' : undefined, mods: {
+    const { mods, children, styles, ...otherProps } = useSlotProps(props, 'divider');
+    return (_jsx(DividerElement, { as: children ? 'div' : 'hr', role: children ? 'separator' : undefined, mods: {
             text: !!children,
             ...mods,
-        }, "data-id": "Divider", ...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 }), 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));
 });
 
         

package/es/components/content/Footer.js

@@ -1,33 +1,28 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { CONTAINER_STYLES, TEXT_STYLES } from '../../styles/list';
-import { extractStyles } from '../../utils/styles';
-import { filterBaseProps } from '../../utils/filterBaseProps';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, TEXT_STYLES, } from '../../tasty';
 import { useSlotProps } from '../../utils/react';
-import { styled } from '../../styled';
 const STYLE_LIST = [...CONTAINER_STYLES, ...TEXT_STYLES];
-const RawFooter = styled({
-    name: 'Footer',
+const FooterElement = tasty({
+    qa: 'Footer',
+    'data-id': 'Footer',
     styles: {
         gridArea: 'footer',
         display: 'block',
         flow: 'column',
     },
-    props: {
-        'data-id': 'Footer',
-    },
 });
 export const Footer = forwardRef((props, ref) => {
     props = useSlotProps(props, 'footer');
     const styles = extractStyles(props, STYLE_LIST);
-    return (_jsx(RawFooter, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    return (_jsx(FooterElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 
         

package/es/components/content/Header.js

@@ -1,22 +1,18 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { styled } from '../../styled';
-import { CONTAINER_STYLES, TEXT_STYLES } from '../../styles/list';
-import { extractStyles } from '../../utils/styles';
-import { filterBaseProps } from '../../utils/filterBaseProps';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, TEXT_STYLES, } from '../../tasty';
 import { useSlotProps } from '../../utils/react';
 const STYLE_LIST = [...CONTAINER_STYLES, ...TEXT_STYLES];
-const RawHeader = styled({
-    name: 'Header',
-    tag: 'header',
-    props: { 'data-id': 'Header' },
+const HeaderElement = tasty({
+    qa: 'Header',
+    as: 'header',
     styles: {
         display: 'block',
         gridArea: 'header',
@@ -26,7 +22,7 @@ const RawHeader = styled({
 export const Header = forwardRef((props, ref) => {
     props = useSlotProps(props, 'header');
     const styles = extractStyles(props, STYLE_LIST);
-    return (_jsx(RawHeader, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    return (_jsx(HeaderElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 
         

package/es/components/content/Paragraph.js

@@ -1,15 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Text } from './Text';
-import { CONTAINER_STYLES, TEXT_STYLES } from '../../styles/list';
-import { extractStyles } from '../../utils/styles';
+import { CONTAINER_STYLES, extractStyles, TEXT_STYLES, } from '../../tasty';
 const DEFAULT_STYLES = {
     preset: 'p3',
     color: '#dark.75',

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

@@ -1,29 +1,42 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { Base } from '../../Base';
-import { CONTAINER_STYLES } from '../../../styles/list';
-import { extractStyles } from '../../../utils/styles';
-import { filterBaseProps } from '../../../utils/filterBaseProps';
-const DEFAULT_STYLES = {
-    display: 'block',
-    fill: '#dark.10',
-    height: '2x',
-    opacity: '.35',
-};
-const CSS = `
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../../tasty';
+import styled from 'styled-components';
+const PlaceholderElement = tasty({
+    role: 'alert',
+    'aria-live': 'polite',
+    'aria-label': 'Content is loading',
+    styles: {
+        display: 'block',
+        fill: '#dark.10',
+        height: '2x',
+        opacity: '.35',
+    },
+});
+const StyledPlaceholder = styled(PlaceholderElement) `
   --placeholder-animation-time: 1.4s;
   --placeholder-animation-size: calc((180rem + 100vw) / 3);
-  background-image: linear-gradient(135deg, rgba(var(--dark-color-rgb), .15) 0%, rgba(var(--dark-color-rgb), .15) 5%, rgba(var(--dark-color-rgb), 0) 35%, rgba(var(--dark-03-color-rgb), .2) 50%, rgba(var(--dark-03-color-rgb), 0) 65%, rgba(var(--dark-color-rgb), .15) 95%, rgba(var(--dark-color-rgb), .15) 100%);
+  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;
+  animation: placeholder-animation var(--placeholder-animation-time) linear
+    infinite;
 
   @keyframes placeholder-animation {
     0% {
@@ -36,13 +49,13 @@ const CSS = `
 `;
 export const Placeholder = forwardRef((allProps, ref) => {
     let { size = '2x', circle, ...props } = allProps;
-    const styles = extractStyles(props, CONTAINER_STYLES, {
-        ...DEFAULT_STYLES,
-        height: size,
-        width: circle ? size : false,
-        radius: circle ? '9999rem' : '1r',
-    });
-    return (_jsx(Base, { role: "region", css: CSS, ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    let styles = extractStyles(props, CONTAINER_STYLES);
+    return (_jsx(StyledPlaceholder, { role: "region", ...filterBaseProps(props, { eventProps: true }), styles: {
+            height: size,
+            width: circle ? size : false,
+            radius: circle ? '9999rem' : '1r',
+            ...styles,
+        }, ref: ref }, void 0));
 });