@mekari/pixel3-styled-system 0.0.1 → 0.0.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @mekari/pixel3-styled-system
 
+## 0.0.3
+
+### Patch Changes
+
+- 7f45d55: Bump version vue & @panda-css/dev
+
+## 0.0.2
+
+### Patch Changes
+
+- Re-release Styled System
+
 ## 0.0.1
 
 ### Patch Changes

package/jsx/aspect-ratio.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
 import type { FunctionalComponent } from 'vue'
 import type { AspectRatioProperties } from '../patterns/aspect-ratio';
-import type { HTMLStyledProps } from '../types/jsx';
+import type { HTMLPixelProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export interface AspectRatioProps extends AspectRatioProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof AspectRatioProperties | 'aspectRatio'> {}
+export interface AspectRatioProps extends AspectRatioProperties, DistributiveOmit<HTMLPixelProps<'div'>, keyof AspectRatioProperties | 'aspectRatio'> {}
 
 
 export declare const AspectRatio: FunctionalComponent<AspectRatioProps>

package/jsx/aspect-ratio.mjs

@@ -1,16 +1,18 @@
 import { defineComponent, h, computed } from 'vue'
-import { styled } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
 import { getAspectRatioStyle } from '../patterns/aspect-ratio.mjs';
+import { Pixel } from './factory.mjs';
 
-export const AspectRatio = defineComponent({
+export const AspectRatio = /* @__PURE__ */ defineComponent({
     name: 'AspectRatio',
     inheritAttrs: false,
     props: ["ratio"],
     setup(props, { attrs, slots }) {
-        const styleProps = computed(() => getAspectRatioStyle(props))
-        return () => {
-            const computedProps = { ...styleProps.value, ...attrs }
-            return h(styled.div, computedProps, slots)
-        }
+      const styleProps = computed(() => getAspectRatioStyle(props))
+
+return () => {
+  const mergedProps = { ...styleProps.value, ...attrs }
+  return h(Pixel.div, mergedProps, slots)
+}
     }
 })

package/jsx/bleed.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
 import type { FunctionalComponent } from 'vue'
 import type { BleedProperties } from '../patterns/bleed';
-import type { HTMLStyledProps } from '../types/jsx';
+import type { HTMLPixelProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export interface BleedProps extends BleedProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof BleedProperties > {}
+export interface BleedProps extends BleedProperties, DistributiveOmit<HTMLPixelProps<'div'>, keyof BleedProperties > {}
 
 
 export declare const Bleed: FunctionalComponent<BleedProps>

package/jsx/bleed.mjs

@@ -1,16 +1,18 @@
 import { defineComponent, h, computed } from 'vue'
-import { styled } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
 import { getBleedStyle } from '../patterns/bleed.mjs';
+import { Pixel } from './factory.mjs';
 
-export const Bleed = defineComponent({
+export const Bleed = /* @__PURE__ */ defineComponent({
     name: 'Bleed',
     inheritAttrs: false,
-    props: ["inline", "block"],
+    props: ["inline","block"],
     setup(props, { attrs, slots }) {
-        const styleProps = computed(() => getBleedStyle(props))
-        return () => {
-            const computedProps = { ...styleProps.value, ...attrs }
-            return h(styled.div, computedProps, slots)
-        }
+      const styleProps = computed(() => getBleedStyle(props))
+
+return () => {
+  const mergedProps = { ...styleProps.value, ...attrs }
+  return h(Pixel.div, mergedProps, slots)
+}
     }
 })

package/jsx/box.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
 import type { FunctionalComponent } from 'vue'
 import type { BoxProperties } from '../patterns/box';
-import type { HTMLStyledProps } from '../types/jsx';
+import type { HTMLPixelProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export interface BoxProps extends BoxProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof BoxProperties > {}
+export interface BoxProps extends BoxProperties, DistributiveOmit<HTMLPixelProps<'div'>, keyof BoxProperties > {}
 
 
 export declare const Box: FunctionalComponent<BoxProps>

package/jsx/box.mjs

@@ -1,16 +1,18 @@
 import { defineComponent, h, computed } from 'vue'
-import { styled } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
 import { getBoxStyle } from '../patterns/box.mjs';
+import { Pixel } from './factory.mjs';
 
-export const Box = defineComponent({
+export const Box = /* @__PURE__ */ defineComponent({
     name: 'Box',
     inheritAttrs: false,
     props: [],
     setup(props, { attrs, slots }) {
-        const styleProps = computed(() => getBoxStyle(props))
-        return () => {
-            const computedProps = { ...styleProps.value, ...attrs }
-            return h(styled.div, computedProps, slots)
-        }
+      const styleProps = computed(() => getBoxStyle(props))
+
+return () => {
+  const mergedProps = { ...styleProps.value, ...attrs }
+  return h(Pixel.div, mergedProps, slots)
+}
     }
 })

package/jsx/center.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
 import type { FunctionalComponent } from 'vue'
 import type { CenterProperties } from '../patterns/center';
-import type { HTMLStyledProps } from '../types/jsx';
+import type { HTMLPixelProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export interface CenterProps extends CenterProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof CenterProperties > {}
+export interface CenterProps extends CenterProperties, DistributiveOmit<HTMLPixelProps<'div'>, keyof CenterProperties > {}
 
 
 export declare const Center: FunctionalComponent<CenterProps>

package/jsx/center.mjs

@@ -1,16 +1,18 @@
 import { defineComponent, h, computed } from 'vue'
-import { styled } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
 import { getCenterStyle } from '../patterns/center.mjs';
+import { Pixel } from './factory.mjs';
 
-export const Center = defineComponent({
+export const Center = /* @__PURE__ */ defineComponent({
     name: 'Center',
     inheritAttrs: false,
     props: ["inline"],
     setup(props, { attrs, slots }) {
-        const styleProps = computed(() => getCenterStyle(props))
-        return () => {
-            const computedProps = { ...styleProps.value, ...attrs }
-            return h(styled.div, computedProps, slots)
-        }
+      const styleProps = computed(() => getCenterStyle(props))
+
+return () => {
+  const mergedProps = { ...styleProps.value, ...attrs }
+  return h(Pixel.div, mergedProps, slots)
+}
     }
 })

package/jsx/circle.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
 import type { FunctionalComponent } from 'vue'
 import type { CircleProperties } from '../patterns/circle';
-import type { HTMLStyledProps } from '../types/jsx';
+import type { HTMLPixelProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export interface CircleProps extends CircleProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof CircleProperties > {}
+export interface CircleProps extends CircleProperties, DistributiveOmit<HTMLPixelProps<'div'>, keyof CircleProperties > {}
 
 
 export declare const Circle: FunctionalComponent<CircleProps>

package/jsx/circle.mjs

@@ -1,16 +1,18 @@
 import { defineComponent, h, computed } from 'vue'
-import { styled } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
 import { getCircleStyle } from '../patterns/circle.mjs';
+import { Pixel } from './factory.mjs';
 
-export const Circle = defineComponent({
+export const Circle = /* @__PURE__ */ defineComponent({
     name: 'Circle',
     inheritAttrs: false,
     props: ["size"],
     setup(props, { attrs, slots }) {
-        const styleProps = computed(() => getCircleStyle(props))
-        return () => {
-            const computedProps = { ...styleProps.value, ...attrs }
-            return h(styled.div, computedProps, slots)
-        }
+      const styleProps = computed(() => getCircleStyle(props))
+
+return () => {
+  const mergedProps = { ...styleProps.value, ...attrs }
+  return h(Pixel.div, mergedProps, slots)
+}
     }
 })

package/jsx/container.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
 import type { FunctionalComponent } from 'vue'
 import type { ContainerProperties } from '../patterns/container';
-import type { HTMLStyledProps } from '../types/jsx';
+import type { HTMLPixelProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export interface ContainerProps extends ContainerProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof ContainerProperties > {}
+export interface ContainerProps extends ContainerProperties, DistributiveOmit<HTMLPixelProps<'div'>, keyof ContainerProperties > {}
 
 
 export declare const Container: FunctionalComponent<ContainerProps>

package/jsx/container.mjs

@@ -1,16 +1,18 @@
 import { defineComponent, h, computed } from 'vue'
-import { styled } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
 import { getContainerStyle } from '../patterns/container.mjs';
+import { Pixel } from './factory.mjs';
 
-export const Container = defineComponent({
+export const Container = /* @__PURE__ */ defineComponent({
     name: 'Container',
     inheritAttrs: false,
     props: [],
     setup(props, { attrs, slots }) {
-        const styleProps = computed(() => getContainerStyle(props))
-        return () => {
-            const computedProps = { ...styleProps.value, ...attrs }
-            return h(styled.div, computedProps, slots)
-        }
+      const styleProps = computed(() => getContainerStyle(props))
+
+return () => {
+  const mergedProps = { ...styleProps.value, ...attrs }
+  return h(Pixel.div, mergedProps, slots)
+}
     }
 })

package/jsx/divider.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
 import type { FunctionalComponent } from 'vue'
 import type { DividerProperties } from '../patterns/divider';
-import type { HTMLStyledProps } from '../types/jsx';
+import type { HTMLPixelProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export interface DividerProps extends DividerProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof DividerProperties > {}
+export interface DividerProps extends DividerProperties, DistributiveOmit<HTMLPixelProps<'div'>, keyof DividerProperties > {}
 
 
 export declare const Divider: FunctionalComponent<DividerProps>

package/jsx/divider.mjs

@@ -1,16 +1,18 @@
 import { defineComponent, h, computed } from 'vue'
-import { styled } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
 import { getDividerStyle } from '../patterns/divider.mjs';
+import { Pixel } from './factory.mjs';
 
-export const Divider = defineComponent({
+export const Divider = /* @__PURE__ */ defineComponent({
     name: 'Divider',
     inheritAttrs: false,
-    props: ["orientation", "thickness", "color"],
+    props: ["orientation","thickness","color"],
     setup(props, { attrs, slots }) {
-        const styleProps = computed(() => getDividerStyle(props))
-        return () => {
-            const computedProps = { ...styleProps.value, ...attrs }
-            return h(styled.div, computedProps, slots)
-        }
+      const styleProps = computed(() => getDividerStyle(props))
+
+return () => {
+  const mergedProps = { ...styleProps.value, ...attrs }
+  return h(Pixel.div, mergedProps, slots)
+}
     }
 })

package/jsx/factory.d.ts

@@ -1,4 +1,4 @@
 /* eslint-disable */
-import type { Styled } from '../types/jsx';
+import type { Pixel } from '../types/jsx';
 
-export declare const styled: Styled
+export declare const Pixel: Pixel

package/jsx/factory.mjs

@@ -17,8 +17,8 @@ function styledFn(Dynamic, configOrCva = {}, options = {}) {
 
   const name = getDisplayName(Dynamic)
 
-  const StyledComponent = defineComponent({
-    name: `styled.${name}`,
+  const PixelComponent = defineComponent({
+    name: `Pixel.${name}`,
     inheritAttrs: false,
     props: { as: { type: [String, Object], default: Dynamic.__base__ || Dynamic } },
     setup(props, { slots, attrs }) {
@@ -28,7 +28,7 @@ function styledFn(Dynamic, configOrCva = {}, options = {}) {
       const combinedProps = computed(() => Object.assign({}, defaultProps, attrs))
 
       const splittedProps = computed(() => {
-        return splitProps(combinedProps.value, normalizeHTMLProps.keys, shouldForwardProp, __cvaFn__.variantKeys, isCssProperty)
+        return splitProps(combinedProps.value, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty)
       })
 
       const recipeClass = computed(() => {
@@ -63,12 +63,12 @@ function styledFn(Dynamic, configOrCva = {}, options = {}) {
     },
   })
 
-  StyledComponent.displayName = `styled.${name}`
-  StyledComponent.__cva__ = cvaFn
-  StyledComponent.__base__ = Dynamic
-  StyledComponent.__shouldForwardProps__ = shouldForwardProp
+  PixelComponent.displayName = `Pixel.${name}`
+  PixelComponent.__cva__ = cvaFn
+  PixelComponent.__base__ = Dynamic
+  PixelComponent.__shouldForwardProps__ = shouldForwardProp
 
-  return StyledComponent
+  return PixelComponent
 }
 
 function createJsxFactory() {
@@ -82,4 +82,4 @@ function createJsxFactory() {
   })
 }
 
-export const styled = /* @__PURE__ */ createJsxFactory()
+export const Pixel = /* @__PURE__ */ createJsxFactory()

package/jsx/flex.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
 import type { FunctionalComponent } from 'vue'
 import type { FlexProperties } from '../patterns/flex';
-import type { HTMLStyledProps } from '../types/jsx';
+import type { HTMLPixelProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export interface FlexProps extends FlexProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof FlexProperties > {}
+export interface FlexProps extends FlexProperties, DistributiveOmit<HTMLPixelProps<'div'>, keyof FlexProperties > {}
 
 
 export declare const Flex: FunctionalComponent<FlexProps>

package/jsx/flex.mjs

@@ -1,16 +1,18 @@
 import { defineComponent, h, computed } from 'vue'
-import { styled } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
 import { getFlexStyle } from '../patterns/flex.mjs';
+import { Pixel } from './factory.mjs';
 
-export const Flex = defineComponent({
+export const Flex = /* @__PURE__ */ defineComponent({
     name: 'Flex',
     inheritAttrs: false,
-    props: ["align", "justify", "direction", "wrap", "basis", "grow", "shrink"],
+    props: ["align","justify","direction","wrap","basis","grow","shrink"],
     setup(props, { attrs, slots }) {
-        const styleProps = computed(() => getFlexStyle(props))
-        return () => {
-            const computedProps = { ...styleProps.value, ...attrs }
-            return h(styled.div, computedProps, slots)
-        }
+      const styleProps = computed(() => getFlexStyle(props))
+
+return () => {
+  const mergedProps = { ...styleProps.value, ...attrs }
+  return h(Pixel.div, mergedProps, slots)
+}
     }
 })

package/jsx/float.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
 import type { FunctionalComponent } from 'vue'
 import type { FloatProperties } from '../patterns/float';
-import type { HTMLStyledProps } from '../types/jsx';
+import type { HTMLPixelProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export interface FloatProps extends FloatProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof FloatProperties > {}
+export interface FloatProps extends FloatProperties, DistributiveOmit<HTMLPixelProps<'div'>, keyof FloatProperties > {}
 
 
 export declare const Float: FunctionalComponent<FloatProps>

package/jsx/float.mjs

@@ -1,16 +1,18 @@
 import { defineComponent, h, computed } from 'vue'
-import { styled } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
 import { getFloatStyle } from '../patterns/float.mjs';
+import { Pixel } from './factory.mjs';
 
-export const Float = defineComponent({
+export const Float = /* @__PURE__ */ defineComponent({
     name: 'Float',
     inheritAttrs: false,
-    props: ["offsetX", "offsetY", "offset", "placement"],
+    props: ["offsetX","offsetY","offset","placement"],
     setup(props, { attrs, slots }) {
-        const styleProps = computed(() => getFloatStyle(props))
-        return () => {
-            const computedProps = { ...styleProps.value, ...attrs }
-            return h(styled.div, computedProps, slots)
-        }
+      const styleProps = computed(() => getFloatStyle(props))
+
+return () => {
+  const mergedProps = { ...styleProps.value, ...attrs }
+  return h(Pixel.div, mergedProps, slots)
+}
     }
 })

package/jsx/grid-item.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
 import type { FunctionalComponent } from 'vue'
 import type { GridItemProperties } from '../patterns/grid-item';
-import type { HTMLStyledProps } from '../types/jsx';
+import type { HTMLPixelProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export interface GridItemProps extends GridItemProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof GridItemProperties > {}
+export interface GridItemProps extends GridItemProperties, DistributiveOmit<HTMLPixelProps<'div'>, keyof GridItemProperties > {}
 
 
 export declare const GridItem: FunctionalComponent<GridItemProps>

package/jsx/grid-item.mjs

@@ -1,16 +1,18 @@
 import { defineComponent, h, computed } from 'vue'
-import { styled } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
 import { getGridItemStyle } from '../patterns/grid-item.mjs';
+import { Pixel } from './factory.mjs';
 
-export const GridItem = defineComponent({
+export const GridItem = /* @__PURE__ */ defineComponent({
     name: 'GridItem',
     inheritAttrs: false,
-    props: ["colSpan", "rowSpan", "colStart", "rowStart", "colEnd", "rowEnd"],
+    props: ["colSpan","rowSpan","colStart","rowStart","colEnd","rowEnd"],
     setup(props, { attrs, slots }) {
-        const styleProps = computed(() => getGridItemStyle(props))
-        return () => {
-            const computedProps = { ...styleProps.value, ...attrs }
-            return h(styled.div, computedProps, slots)
-        }
+      const styleProps = computed(() => getGridItemStyle(props))
+
+return () => {
+  const mergedProps = { ...styleProps.value, ...attrs }
+  return h(Pixel.div, mergedProps, slots)
+}
     }
 })

package/jsx/grid.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
 import type { FunctionalComponent } from 'vue'
 import type { GridProperties } from '../patterns/grid';
-import type { HTMLStyledProps } from '../types/jsx';
+import type { HTMLPixelProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export interface GridProps extends GridProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof GridProperties > {}
+export interface GridProps extends GridProperties, DistributiveOmit<HTMLPixelProps<'div'>, keyof GridProperties > {}
 
 
 export declare const Grid: FunctionalComponent<GridProps>

package/jsx/grid.mjs

@@ -1,16 +1,18 @@
 import { defineComponent, h, computed } from 'vue'
-import { styled } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
 import { getGridStyle } from '../patterns/grid.mjs';
+import { Pixel } from './factory.mjs';
 
-export const Grid = defineComponent({
+export const Grid = /* @__PURE__ */ defineComponent({
     name: 'Grid',
     inheritAttrs: false,
-    props: ["gap", "columnGap", "rowGap", "columns", "minChildWidth"],
+    props: ["gap","columnGap","rowGap","columns","minChildWidth"],
     setup(props, { attrs, slots }) {
-        const styleProps = computed(() => getGridStyle(props))
-        return () => {
-            const computedProps = { ...styleProps.value, ...attrs }
-            return h(styled.div, computedProps, slots)
-        }
+      const styleProps = computed(() => getGridStyle(props))
+
+return () => {
+  const mergedProps = { ...styleProps.value, ...attrs }
+  return h(Pixel.div, mergedProps, slots)
+}
     }
 })

package/jsx/hstack.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
 import type { FunctionalComponent } from 'vue'
 import type { HstackProperties } from '../patterns/hstack';
-import type { HTMLStyledProps } from '../types/jsx';
+import type { HTMLPixelProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export interface HstackProps extends HstackProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof HstackProperties > {}
+export interface HstackProps extends HstackProperties, DistributiveOmit<HTMLPixelProps<'div'>, keyof HstackProperties > {}
 
 
 export declare const HStack: FunctionalComponent<HstackProps>

package/jsx/hstack.mjs

@@ -1,16 +1,18 @@
 import { defineComponent, h, computed } from 'vue'
-import { styled } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
 import { getHstackStyle } from '../patterns/hstack.mjs';
+import { Pixel } from './factory.mjs';
 
-export const HStack = defineComponent({
+export const HStack = /* @__PURE__ */ defineComponent({
     name: 'HStack',
     inheritAttrs: false,
-    props: ["justify", "gap"],
+    props: ["justify","gap"],
     setup(props, { attrs, slots }) {
-        const styleProps = computed(() => getHstackStyle(props))
-        return () => {
-            const computedProps = { ...styleProps.value, ...attrs }
-            return h(styled.div, computedProps, slots)
-        }
+      const styleProps = computed(() => getHstackStyle(props))
+
+return () => {
+  const mergedProps = { ...styleProps.value, ...attrs }
+  return h(Pixel.div, mergedProps, slots)
+}
     }
 })

package/jsx/index.d.ts

@@ -21,4 +21,4 @@ export * from './divider';
 export * from './float';
 export * from './bleed';
 export * from './visually-hidden';
-export type { HTMLStyledProps, StyledComponent } from '../types/jsx';
+export type { HTMLPixelProps, PixelComponent } from '../types/jsx';

package/jsx/link-box.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
 import type { FunctionalComponent } from 'vue'
 import type { LinkBoxProperties } from '../patterns/link-box';
-import type { HTMLStyledProps } from '../types/jsx';
+import type { HTMLPixelProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export interface LinkBoxProps extends LinkBoxProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof LinkBoxProperties > {}
+export interface LinkBoxProps extends LinkBoxProperties, DistributiveOmit<HTMLPixelProps<'div'>, keyof LinkBoxProperties > {}
 
 
 export declare const LinkBox: FunctionalComponent<LinkBoxProps>

package/jsx/link-box.mjs

@@ -1,16 +1,18 @@
 import { defineComponent, h, computed } from 'vue'
-import { styled } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
 import { getLinkBoxStyle } from '../patterns/link-box.mjs';
+import { Pixel } from './factory.mjs';
 
-export const LinkBox = defineComponent({
+export const LinkBox = /* @__PURE__ */ defineComponent({
     name: 'LinkBox',
     inheritAttrs: false,
     props: [],
     setup(props, { attrs, slots }) {
-        const styleProps = computed(() => getLinkBoxStyle(props))
-        return () => {
-            const computedProps = { ...styleProps.value, ...attrs }
-            return h(styled.div, computedProps, slots)
-        }
+      const styleProps = computed(() => getLinkBoxStyle(props))
+
+return () => {
+  const mergedProps = { ...styleProps.value, ...attrs }
+  return h(Pixel.div, mergedProps, slots)
+}
     }
 })

package/jsx/link-overlay.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
 import type { FunctionalComponent } from 'vue'
 import type { LinkOverlayProperties } from '../patterns/link-overlay';
-import type { HTMLStyledProps } from '../types/jsx';
+import type { HTMLPixelProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export interface LinkOverlayProps extends LinkOverlayProperties, DistributiveOmit<HTMLStyledProps<'a'>, keyof LinkOverlayProperties > {}
+export interface LinkOverlayProps extends LinkOverlayProperties, DistributiveOmit<HTMLPixelProps<'a'>, keyof LinkOverlayProperties > {}
 
 
 export declare const LinkOverlay: FunctionalComponent<LinkOverlayProps>