pxd 0.0.25 → 0.0.26

package/dist/components/checkbox/index.vue

@@ -1,9 +1,9 @@
 <script setup>
 import CheckIcon from "@gdsicon/vue/check";
 import MinusIcon from "@gdsicon/vue/minus";
-import { twMerge } from "tailwind-merge";
-import { computed, inject } from "vue";
+import { computed } from "vue";
 import { useModelValue } from "../../composables/useModelValue";
+import { useCheckboxGroupContext } from "../../contexts/checkbox";
 import { getUniqueId } from "../../utils/uid";
 defineOptions({
   name: "PCheckbox",
@@ -23,10 +23,7 @@ const props = defineProps({
 const emits = defineEmits(["update:modelValue"]);
 const uniqueId = getUniqueId();
 const modelValue = useModelValue(props, emits);
-const checkboxGroupProps = inject("pxdCheckboxGroupProps", {
-  disabled: false,
-  required: false
-});
+const checkboxGroupContext = useCheckboxGroupContext();
 const isChecked = computed(() => {
   if (Array.isArray(modelValue.value)) {
     return modelValue.value.includes(props.value);
@@ -36,23 +33,23 @@ const isChecked = computed(() => {
   }
   return modelValue.value === props.value;
 });
-const computedDisabled = computed(() => props.disabled || checkboxGroupProps.disabled);
-const computedRequired = computed(() => props.required || checkboxGroupProps.required);
-const computedInnerClasses = computed(() => {
-  const basic = [
+const computedDisabled = computed(() => props.disabled || checkboxGroupContext?.disabled);
+const computedRequired = computed(() => props.required || checkboxGroupContext?.required);
+const computedClass = computed(() => {
+  const classes = [
     "pxd-checkbox--inner size-4 shrink-0 inline-flex items-center justify-center peer-focus-ring",
     "rounded-sm border overflow-hidden transform-gpu motion-safe:transition-colors"
   ];
   if (isChecked.value) {
-    basic.push(
+    classes.push(
       computedDisabled.value ? "bg-gray-600 border-gray-600" : "bg-primary border-primary"
     );
   } else {
-    basic.push(
+    classes.push(
       computedDisabled.value ? "bg-gray-100 border-gray-500" : "bg-background border-gray-alpha-400 group-hover/checkbox:bg-gray-200"
     );
   }
-  return twMerge(basic);
+  return classes.join(" ");
 });
 function toggleChecked(isChecked2) {
   if (Array.isArray(modelValue.value)) {
@@ -94,7 +91,7 @@ defineExpose({
       @change="onInputChange"
     >
 
-    <span aria-hidden="true" :class="computedInnerClasses">
+    <span aria-hidden="true" :class="computedClass">
       <CheckIcon v-if="isChecked" class="size-3 text-gray-100" />
       <MinusIcon v-else-if="indeterminate" class="size-3" />
       <span v-else class="size-3" />

package/dist/components/checkbox/index.vue.d.ts

@@ -1,26 +1,18 @@
-import type { ComponentLabel, ComponentValue } from '../../types/components';
-interface Props {
-    label?: ComponentLabel;
-    value?: ComponentValue;
-    disabled?: boolean;
-    required?: boolean;
-    modelValue?: ComponentValue | ComponentValue[];
-    indeterminate?: boolean;
-}
+import type { CheckboxProps } from '../../types/components/checkbox';
 declare function getCheckedState(): "indeterminate" | "checked" | "unchecked";
 declare var __VLS_11: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_11) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<Props, {
+declare const __VLS_component: import("vue").DefineComponent<CheckboxProps, {
     getCheckedState: typeof getCheckedState;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (args_0: NonNullable<ComponentValue | ComponentValue[]>) => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    "onUpdate:modelValue"?: (args_0: NonNullable<ComponentValue | ComponentValue[]>) => any;
+    "update:modelValue": (args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[]>) => any;
+}, string, import("vue").PublicProps, Readonly<CheckboxProps> & Readonly<{
+    "onUpdate:modelValue"?: (args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[]>) => any;
 }>, {
-    value: ComponentValue;
-    modelValue: ComponentValue | ComponentValue[];
+    value: import("../../types/shared").ComponentValue;
+    modelValue: import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/components/checkbox-group/index.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { provide } from "vue";
 import { useModelValue } from "../../composables/useModelValue";
+import { provideCheckboxGroupContext } from "../../contexts/checkbox";
 import PCheckbox from "../checkbox/index.vue";
 import PStack from "../stack/index.vue";
 defineOptions({
@@ -20,12 +20,16 @@ const props = defineProps({
 const emits = defineEmits(["change", "update:modelValue"]);
 const modelValue = useModelValue(props, emits);
 function isCheckedAll() {
-  return props.options.every((option) => modelValue.value.includes(option.value));
+  const { options = [] } = props;
+  if (options.length === 0) {
+    return false;
+  }
+  return options.every((option) => modelValue.value.includes(option.value));
 }
 function isCheckedPartial() {
   return modelValue.value.length > 0 && !isCheckedAll();
 }
-provide("pxdCheckboxGroupProps", props);
+provideCheckboxGroupContext(props);
 defineExpose({
   isCheckedAll,
   isCheckedPartial

package/dist/components/checkbox-group/index.vue.d.ts

@@ -1,28 +1,22 @@
-import type { ComponentOption, ComponentValue } from '../../types';
-interface Props {
-    disabled?: boolean;
-    required?: boolean;
-    modelValue?: ComponentValue[];
-    options?: ComponentOption[];
-}
+import type { CheckboxGroupProps } from '../../types/components/checkbox';
 declare function isCheckedAll(): boolean;
 declare function isCheckedPartial(): boolean;
 declare var __VLS_6: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<Props, {
+declare const __VLS_component: import("vue").DefineComponent<CheckboxGroupProps, {
     isCheckedAll: typeof isCheckedAll;
     isCheckedPartial: typeof isCheckedPartial;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (args_0: ComponentValue[]) => any;
-    "update:modelValue": (args_0: ComponentValue[]) => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    onChange?: (args_0: ComponentValue[]) => any;
-    "onUpdate:modelValue"?: (args_0: ComponentValue[]) => any;
+    change: (args_0: import("../../types/shared").ComponentValue[]) => any;
+    "update:modelValue": (args_0: import("../../types/shared").ComponentValue[]) => any;
+}, string, import("vue").PublicProps, Readonly<CheckboxGroupProps> & Readonly<{
+    onChange?: (args_0: import("../../types/shared").ComponentValue[]) => any;
+    "onUpdate:modelValue"?: (args_0: import("../../types/shared").ComponentValue[]) => any;
 }>, {
-    options: ComponentOption[];
-    modelValue: ComponentValue[];
+    options: import("../../types/shared").ComponentOption[];
+    modelValue: import("../../types/shared").ComponentValue[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/components/chip/index.vue

@@ -16,16 +16,16 @@ const variantPresets = {
   secondary: "bg-gray-700 text-background dark:text-gray-1000"
 };
 const computedClass = computed(() => {
-  const basic = ["pxd-chip--label absolute border rounded-full border-background text-xs top-0 right-0 motion-safe:transition-all"];
+  const classes = ["pxd-chip--label absolute border rounded-full border-background text-xs top-0 right-0 motion-safe:transition-all"];
   const { variant, inset, label } = props;
   if (!label) {
-    basic.push("size-(--size)");
+    classes.push("size-(--size)");
   }
   if (!inset) {
-    basic.push("translate-x-1/2 -translate-y-1/3");
+    classes.push("translate-x-1/2 -translate-y-1/3");
   }
-  basic.push(getFallbackValue(variant, variantPresets, "primary"));
-  return basic;
+  classes.push(getFallbackValue(variant, variantPresets, "primary"));
+  return classes.join(" ");
 });
 </script>
 

package/dist/components/chip/index.vue.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentLabel, ComponentVariant } from '../../types/components';
+import type { ComponentLabel, ComponentVariant } from '../../types/shared';
 interface Props {
     size?: number | string;
     inset?: boolean;

package/dist/components/choicebox/index.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { computed, inject, markRaw } from "vue";
+import { computed, markRaw } from "vue";
+import { useChoiceboxGroupContext, useChoiceboxGroupModelValue } from "../../contexts/choicebox";
 import PCheckbox from "../checkbox/index.vue";
 import PRadio from "../radio/index.vue";
 defineOptions({
@@ -12,9 +13,9 @@ const props = defineProps({
   required: { type: Boolean, required: false },
   description: { type: String, required: false }
 });
-const modelValue = inject("pxdChoiceboxGroupModelValue");
-const choiceboxGroupProps = inject("pxdChoiceboxGroupProps", { multiple: false });
-const renderComponent = computed(() => markRaw(choiceboxGroupProps.multiple ? PCheckbox : PRadio));
+const choiceboxModelValue = useChoiceboxGroupModelValue();
+const choiceboxGroupContext = useChoiceboxGroupContext();
+const renderComponent = computed(() => markRaw(choiceboxGroupContext.multiple ? PCheckbox : PRadio));
 const computedAttrs = computed(() => {
   const { disabled, required, value } = props;
   return {
@@ -27,7 +28,7 @@ const computedAttrs = computed(() => {
 </script>
 
 <template>
-  <component :is="renderComponent" v-model="modelValue" v-bind="computedAttrs">
+  <component :is="renderComponent" v-model="choiceboxModelValue" v-bind="computedAttrs">
     <div class="flex flex-col gap-1">
       <span class="pxd-choicebox--label font-medium">
         <slot name="label">

package/dist/components/choicebox/index.vue.d.ts

@@ -1,18 +1,11 @@
-import type { ComponentLabel, ComponentValue } from '../../types/components';
-interface Props {
-    label?: ComponentLabel;
-    value?: ComponentValue;
-    disabled?: boolean;
-    required?: boolean;
-    description?: string;
-}
+import type { ChoiceboxProps } from '../../types/components/choicebox';
 declare var __VLS_7: {}, __VLS_9: {};
 type __VLS_Slots = {} & {
     label?: (props: typeof __VLS_7) => any;
 } & {
     description?: (props: typeof __VLS_9) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<ChoiceboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChoiceboxProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/choicebox-group/index.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { computed, markRaw, provide, useAttrs } from "vue";
+import { computed, markRaw, useAttrs } from "vue";
 import { useModelValue } from "../../composables/useModelValue";
+import { provideChoiceboxGroupContext, provideChoiceboxGroupModelValue } from "../../contexts/choicebox";
 import PCheckboxGroup from "../checkbox-group/index.vue";
 import PRadioGroup from "../radio-group/index.vue";
 defineOptions({
@@ -12,12 +13,12 @@ defineOptions({
   }
 });
 const props = defineProps({
-  modelValue: { type: null, required: false, default: "" },
-  label: { type: String, required: false },
+  label: { type: [String, Number, Array, null], required: false },
   multiple: { type: Boolean, required: false },
   required: { type: Boolean, required: false, default: false },
   disabled: { type: Boolean, required: false, default: false },
-  options: { type: Array, required: false }
+  options: { type: Array, required: false },
+  modelValue: { type: [String, Number, Boolean, Array], required: false, default: "" }
 });
 const emits = defineEmits(["update:modelValue"]);
 const attrs = useAttrs();
@@ -39,8 +40,8 @@ const computedAttrs = computed(() => {
     ...rest
   };
 });
-provide("pxdChoiceboxGroupProps", props);
-provide("pxdChoiceboxGroupModelValue", modelValue);
+provideChoiceboxGroupContext(props);
+provideChoiceboxGroupModelValue(modelValue);
 </script>
 
 <template>

package/dist/components/choicebox-group/index.vue.d.ts

@@ -1,31 +1,18 @@
-import type { ComponentOption, ComponentValue } from '../../types/components';
-interface Option extends ComponentOption {
-    description?: string;
-}
-interface BaseProps {
-    label?: string;
-    multiple?: boolean;
-    required?: boolean;
-    disabled?: boolean;
-    options?: Option[];
-}
-interface Props extends BaseProps {
-    modelValue?: BaseProps['multiple'] extends true ? ComponentValue[] : ComponentValue;
-}
+import type { ChoiceboxGroupProps } from '../../types/components/choicebox';
 declare var __VLS_1: {}, __VLS_8: {};
 type __VLS_Slots = {} & {
     label?: (props: typeof __VLS_1) => any;
 } & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (args_0: NonNullable<ComponentValue>) => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    "onUpdate:modelValue"?: (args_0: NonNullable<ComponentValue>) => any;
+declare const __VLS_component: import("vue").DefineComponent<ChoiceboxGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[]>) => any;
+}, string, import("vue").PublicProps, Readonly<ChoiceboxGroupProps> & Readonly<{
+    "onUpdate:modelValue"?: (args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[]>) => any;
 }>, {
     required: boolean;
     disabled: boolean;
-    modelValue: BaseProps["multiple"] extends true ? ComponentValue[] : ComponentValue;
+    modelValue: import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/components/collapse/index.vue

@@ -1,6 +1,7 @@
 <script setup>
 import ChevronDownIcon from "@gdsicon/vue/chevron-down";
-import { computed, inject, onMounted, ref, watch } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
+import { useCollapseGroupContext } from "../../contexts/collapse";
 import { getUniqueId } from "../../utils/uid";
 defineOptions({
   name: "PCollapse"
@@ -11,7 +12,7 @@ const props = defineProps({
 });
 const uid = getUniqueId();
 const localExpand = ref(props.expand);
-const collapseGroup = inject("pxdCollapseGroup");
+const collapseGroup = useCollapseGroupContext();
 const isExpanded = computed(() => {
   if (collapseGroup) {
     return collapseGroup.isExpanded(uid);

package/dist/components/collapse-group/index.vue

@@ -1,6 +1,8 @@
 <script setup>
-import { computed, provide, ref } from "vue";
-import { useConfigProviderSize } from "../../composables/useConfigProviderContext";
+import { computed, ref } from "vue";
+import { useConfigProvider } from "../../composables/useConfigProviderContext";
+import { provideCollapseGroupContext } from "../../contexts/collapse";
+import { getFallbackValue } from "../../utils/value";
 defineOptions({
   name: "PCollapseGroup"
 });
@@ -25,10 +27,10 @@ const SIZES = {
     fontWeight: "600"
   }
 };
+const config = useConfigProvider();
 const expandedItems = ref([]);
-const computedSize = useConfigProviderSize(props.size, SIZES);
 const computedStyle = computed(() => {
-  const { padding, fontSize, fontWeight } = computedSize.value;
+  const { padding, fontSize, fontWeight } = getFallbackValue(props.size, SIZES, config.size);
   return {
     "--size": padding,
     "--font-size": fontSize,
@@ -47,7 +49,7 @@ function toggleItem(id, expanded) {
   expandedItems.value = expandedItems.value.filter((item) => item !== id);
 }
 const isExpanded = (id) => expandedItems.value.includes(id);
-provide("pxdCollapseGroup", {
+provideCollapseGroupContext({
   multiple: computed(() => props.multiple),
   isExpanded,
   toggleItem

package/dist/components/collapse-group/index.vue.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentSize } from '../../types/components';
+import type { ComponentSize } from '../../types/shared';
 interface Props {
     multiple?: boolean;
     size?: ComponentSize;

package/dist/components/config-provider/index.vue.d.ts

@@ -1,5 +1,5 @@
 import type { ConfigProviderProps } from '../../composables/useConfigProviderContext';
-import type { ComponentAs } from '../../types/components';
+import type { ComponentAs } from '../../types/shared';
 interface Props extends ConfigProviderProps {
     as?: ComponentAs;
 }
@@ -8,7 +8,7 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    size: import("../../types").ComponentSize;
+    size: import("../../types/shared").ComponentSize;
     as: ComponentAs;
     locale: Record<string, any>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/description/index.vue

@@ -13,16 +13,16 @@ defineProps({
 
 <template>
   <dl class="pxd-description">
-    <dt data-pxd-description-title class="flex gap-1 items-center text-sm text-foreground-secondary leading-none mb-2 min-h-3.5 capitalize text-nowrap">
+    <dt class="pxd-description--title flex gap-1 items-center text-sm text-foreground-secondary leading-none mb-2 min-h-3.5 capitalize text-nowrap">
       <slot name="title">
         {{ title }}
       </slot>
 
       <PTooltip v-if="tooltip" :content="tooltip" enterable>
-        <InformationIcon class="text-base" />
+        <InformationIcon class="text-base scale-125" />
       </PTooltip>
     </dt>
-    <dd data-pxd-description-content class="text-sm text-foreground font-medium leading-4">
+    <dd class="pxd-description--content text-sm text-foreground font-medium leading-4">
       <slot name="content">
         {{ content }}
       </slot>

package/dist/components/drawer/index.vue

@@ -1,10 +1,8 @@
 <script setup>
-import CloseIcon from "@gdsicon/vue/cross";
 import { computed, shallowRef, watch } from "vue";
 import { useFocusTrap } from "../../composables/useFocusTrap";
 import { useModelValue } from "../../composables/useModelValue";
 import { getCssUnitValue } from "../../utils/format";
-import PButton from "../button/index.vue";
 import POverlay from "../overlay/index.vue";
 import PScrollable from "../scrollable/index.vue";
 defineOptions({
@@ -23,7 +21,6 @@ const props = defineProps({
   headerStyle: { type: Boolean, required: false, default: false },
   footerStyle: { type: Boolean, required: false, default: true },
   appendToBody: { type: Boolean, required: false, default: true },
-  showCloseButton: { type: Boolean, required: false, default: true },
   closeOnPressEscape: { type: Boolean, required: false, default: true },
   closeOnClickOverlay: { type: Boolean, required: false, default: true },
   position: { type: String, required: false, default: "right" }
@@ -42,25 +39,25 @@ const ensureCorrectPosition = computed(() => {
 const transitionName = computed(() => {
   return `pxd-transition--drawer-slide-${ensureCorrectPosition.value}`;
 });
-const contentClasses = computed(() => {
-  const baseClasses = ["pxd-drawer outline-none translate-z-0 shadow-border-modal fixed bg-background flex flex-col z-10"];
+const computedClass = computed(() => {
+  const classes = ["pxd-drawer outline-none translate-z-0 shadow-border-modal fixed bg-background flex flex-col z-10"];
   switch (ensureCorrectPosition.value) {
     case "top":
-      baseClasses.push("top-0", "left-0", "right-0");
+      classes.push("top-0", "left-0", "right-0");
       break;
     case "right":
-      baseClasses.push("top-0", "right-0", "bottom-0");
+      classes.push("top-0", "right-0", "bottom-0");
       break;
     case "bottom":
-      baseClasses.push("bottom-0", "left-0", "right-0");
+      classes.push("bottom-0", "left-0", "right-0");
       break;
     case "left":
-      baseClasses.push("top-0", "left-0", "bottom-0");
+      classes.push("top-0", "left-0", "bottom-0");
       break;
   }
-  return baseClasses;
+  return classes.join(" ");
 });
-const contentStyle = computed(() => {
+const computedStyle = computed(() => {
   const style = {};
   const sizeField = ["left", "right"].includes(ensureCorrectPosition.value) ? "width" : "height";
   style[sizeField] = getCssUnitValue(props.size);
@@ -100,38 +97,26 @@ watch(() => isVisible.value, (visible) => {
         aria-modal="true"
         role="dialog"
         tabindex="-1"
-        :class="contentClasses"
-        :style="contentStyle"
+        :class="computedClass"
+        :style="computedStyle"
       >
         <header
-          v-if="$slots.title || $slots.subtitle || title || subtitle"
-          class="pxd-drawer--header flex gap-2 items-start justify-between px-6 py-4 sm:py-6"
+          class="pxd-drawer--header relative shrink-0 px-6 py-4 sm:py-6"
           :class="{ 'border-b bg-background-secondary dark:bg-background': headerStyle }"
         >
           <div class="flex-1 shrink-0">
-            <h3 class="text-base sm:text-2xl font-semibold tracking-tight">
+            <h3 v-if="$slots.title || title" class="text-base sm:text-2xl font-semibold tracking-tight">
               <slot name="title">
                 {{ title }}
               </slot>
             </h3>
 
-            <div v-if="subtitle" class="mt-4 text-sm text-muted-foreground">
+            <div v-if="$slots.subtitle || subtitle" class="mt-4 text-sm text-muted-foreground">
               <slot name="subtitle">
                 {{ subtitle }}
               </slot>
             </div>
           </div>
-
-          <PButton
-            v-if="showCloseButton"
-            variant="ghost"
-            size="sm"
-            icon
-            class="shrink-0"
-            @click="closeDrawer"
-          >
-            <CloseIcon class="h-4 w-4" />
-          </PButton>
         </header>
 
         <PScrollable
@@ -144,7 +129,7 @@ watch(() => isVisible.value, (visible) => {
 
         <footer
           v-if="$slots.footer"
-          class="pxd-drawer--footer bg-background flex items-center justify-between border-t min-h-12 gap-2 p-4 shrink-0"
+          class="pxd-drawer--footer relative p-4 shrink-0 flex items-center gap-2 justify-between"
           :class="{ 'border-t bg-background-secondary dark:bg-background': footerStyle }"
         >
           <slot name="footer" />

package/dist/components/drawer/index.vue.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentLabel } from '../../types/components';
+import type { BasePosition, ComponentLabel } from '../../types/shared';
 interface Props {
     size?: number | string;
     title?: ComponentLabel;
@@ -7,20 +7,19 @@ interface Props {
     headerStyle?: boolean;
     footerStyle?: boolean;
     appendToBody?: boolean;
-    showCloseButton?: boolean;
     closeOnPressEscape?: boolean;
     closeOnClickOverlay?: boolean;
-    position?: 'top' | 'right' | 'bottom' | 'left';
+    position?: BasePosition;
 }
-declare var __VLS_14: {}, __VLS_16: {}, __VLS_34: {}, __VLS_36: {};
+declare var __VLS_14: {}, __VLS_16: {}, __VLS_22: {}, __VLS_24: {};
 type __VLS_Slots = {} & {
     title?: (props: typeof __VLS_14) => any;
 } & {
     subtitle?: (props: typeof __VLS_16) => any;
 } & {
-    default?: (props: typeof __VLS_34) => any;
+    default?: (props: typeof __VLS_22) => any;
 } & {
-    footer?: (props: typeof __VLS_36) => any;
+    footer?: (props: typeof __VLS_24) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     open: () => any;
@@ -33,14 +32,13 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {},
     "onUpdate:modelValue"?: (args_0: boolean) => any;
     "onClick-outside"?: (args_0: MouseEvent) => any;
 }>, {
-    position: "top" | "right" | "bottom" | "left";
+    position: BasePosition;
     size: number | string;
     modelValue: boolean;
     closeOnPressEscape: boolean;
     appendToBody: boolean;
     headerStyle: boolean;
     footerStyle: boolean;
-    showCloseButton: boolean;
     closeOnClickOverlay: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/components/error/index.vue

@@ -1,28 +1,34 @@
 <script setup>
 import ExternalIcon from "@gdsicon/vue/external";
 import StopIcon from "@gdsicon/vue/stop";
+import { computed } from "vue";
 import { useConfigProvider } from "../../composables/useConfigProviderContext";
 import { isExternalLink } from "../../utils/format";
+import { getFallbackValue } from "../../utils/value";
 defineOptions({
   name: "PError"
 });
-defineProps({
-  size: { type: String, required: false },
+const props = defineProps({
+  size: { type: String, required: false, default: "md" },
   label: { type: String, required: false },
   error: { type: Object, required: false }
 });
-const config = useConfigProvider();
 const SIZES = {
-  xs: "text-xs",
-  sm: "text-xs",
-  md: "text-sm",
-  lg: "text-base"
+  xs: "text-xs [--mt:2px]",
+  sm: "text-[13px] [--mt:2px]",
+  md: "text-sm [--mt:2px]",
+  lg: "text-base [--mt:4px]"
 };
+const config = useConfigProvider();
+const computedClass = computed(() => {
+  const classes = ["pxd-error flex text-red-900", getFallbackValue(props.size, SIZES, config.size)];
+  return classes.join(" ");
+});
 </script>
 
 <template>
-  <div class="pxd-error flex text-red-900" :class="SIZES[size || config.size]">
-    <StopIcon class="size-4 min-w-4 mr-2 mt-0.5" :class="{ 'mt-1': size === 'lg' || config.size === 'lg' }" />
+  <div :class="computedClass">
+    <StopIcon class="size-4 min-w-4 mr-2 mt-(--mt)" />
 
     <div class="flex-1">
       <b v-if="label || error?.label" class="font-medium whitespace-nowrap">{{ label || error?.label }}:</b>

package/dist/components/error/index.vue.d.ts

@@ -1,4 +1,5 @@
-import type { ComponentSizeWithXs, ErrorType } from '../../types/components';
+import type { ErrorType } from '../../types/components/error';
+import type { ComponentSizeWithXs } from '../../types/shared';
 interface Props {
     size?: ComponentSizeWithXs;
     label?: string;
@@ -8,7 +9,9 @@ declare var __VLS_6: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    size: ComponentSizeWithXs;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {