@privyid/persona 0.14.0 → 0.16.0

package/dist/components/nav/NavItem.vue.d.ts

@@ -16,6 +16,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<string | undefined>;
         default: string;
     };
+    linkClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
 }, {
     classNames: import("vue-demi").ComputedRef<string[]>;
     navItemClass: import("vue-demi").ComputedRef<string[]>;
@@ -37,10 +41,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<string | undefined>;
         default: string;
     };
+    linkClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
 }>>, {
     href: string;
     active: boolean;
     disabled: boolean;
     target: string | undefined;
+    linkClass: string | Record<string, any> | unknown[];
 }, {}>;
 export default _default;

package/dist/components/nav/NavItemDropdown.vue

@@ -10,7 +10,8 @@
       :size="size"
       :placement="placement"
       :no-caret="noCaret"
-      :menu-class="menuClass">
+      :menu-class="menuClass"
+      :menu-size="menuSize">
       <template #button-content>
         <slot name="button-content">
           {{ text }}
@@ -63,6 +64,10 @@ export default defineComponent({
         Object
       ],
       default: void 0
+    },
+    menuSize: {
+      type: String,
+      default: "sm"
     }
   },
   models: {

package/dist/components/nav/NavItemDropdown.vue.d.ts

@@ -1,6 +1,7 @@
 import { PropType } from 'vue-demi';
 import { Placement } from '@floating-ui/core';
 import type { SizeVariant, StyleVariant } from '../button';
+import { MenuSizeVariant } from '../dropdown';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: BooleanConstructor;
@@ -31,9 +32,13 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     menuClass: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
         default: undefined;
     };
+    menuSize: {
+        type: PropType<MenuSizeVariant>;
+        default: string;
+    };
 }, {
     model: import("vue-demi").Ref<boolean>;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
@@ -66,19 +71,24 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     menuClass: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
         default: undefined;
     };
+    menuSize: {
+        type: PropType<MenuSizeVariant>;
+        default: string;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     variant: StyleVariant;
-    size: SizeVariant;
-    text: string;
     icon: boolean;
+    text: string;
+    size: SizeVariant;
     modelValue: boolean;
     placement: Placement;
     noCaret: boolean;
     menuClass: string | Record<string, any> | unknown[];
+    menuSize: MenuSizeVariant;
 }, {}>;
 export default _default;

package/dist/components/nav/NavSubItem.vue

@@ -30,7 +30,7 @@ import {
   inject
 } from "vue-demi";
 import { SIDEBAR_SETTINGS } from "../sidebar";
-import IconArrow from "@carbon/icons-vue/lib/chevron--down/16";
+import IconArrow from "@privyid/persona-icon/vue/chevron-down/16.vue";
 export default defineComponent({
   components: { IconArrow },
   props: {

package/dist/components/navbar/Navbar.vue

@@ -38,6 +38,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    sticky: {
+      type: Boolean,
+      default: false
+    },
     condensed: {
       type: Boolean,
       default: false
@@ -56,6 +60,8 @@ export default defineComponent({
       const result = [""];
       if (props.fixed)
         result.push("navbar--fixed");
+      if (props.sticky)
+        result.push("navbar--sticky");
       if (props.variant)
         result.push(`navbar--${props.variant}`);
       if (props.toggleable)
@@ -82,15 +88,24 @@ export default defineComponent({
 <style lang="postcss">
 .navbar {
   --p-navbar-z-index: theme(zIndex.fixed);
+  --p-navbar-sticky-top: theme(spacing.0);
   --p-navbar-collapse-max-height: 20rem; /** 320px */
+  --p-navbar-padding-x: theme(spacing.3);
+  --p-navbar-padding-y: theme(spacing.3);
+  --p-navbar-bg: theme(backgroundColor.default.DEFAULT);
+  --p-navbar-bg-dark: theme(backgroundColor.dark.default.DEFAULT);
 
-  @apply bg-default relative p-3 flex items-center flex-wrap transition-shadow duration-150 ease-in-out;
-  @apply dark:bg-dark-default;
+  @apply bg-[color:var(--p-navbar-bg)] relative px-[var(--p-navbar-padding-x)] py-[var(--p-navbar-padding-y)] flex items-center flex-wrap transition-shadow duration-150 ease-in-out;
+  @apply dark:bg-[color:var(--p-navbar-bg-dark)];
 
   &&--fixed {
     @apply fixed left-0 top-0 w-full z-[var(--p-navbar-z-index)];
   }
 
+  &&--sticky {
+    @apply sticky top-[var(--p-navbar-sticky-top)] z-sticky;
+  }
+
   &&--shadow {
     @apply shadow-lg transition-shadow duration-150 ease-in-out;
   }
@@ -174,6 +189,10 @@ export default defineComponent({
             @apply static shadow-none border-0 bg-base rounded-t-none;
             @apply dark:bg-dark-base;
 
+            &:where(.dropdown__menu--sm, .dropdown__menu--md, .dropdown__menu--lg) {
+              @apply w-full;
+            }
+
             &__container {
               .dropdown__item {
                 @apply first:rounded-t-none;
@@ -206,9 +225,7 @@ export default defineComponent({
         }
       }
 
-      .nav__item,
-      .nav__text,
-      .nav__form {
+      :where(.nav__item, .nav__text, .nav__form) {
         @apply w-full;
       }
     }

package/dist/components/navbar/Navbar.vue.d.ts

@@ -14,6 +14,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     condensed: {
         type: BooleanConstructor;
         default: boolean;
@@ -35,6 +39,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     condensed: {
         type: BooleanConstructor;
         default: boolean;
@@ -44,5 +52,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     variant: StyleVariant;
     toggleable: ToggleableVariant | undefined;
     condensed: boolean;
+    sticky: boolean;
 }, {}>;
 export default _default;

package/dist/components/pdf-object/PdfObject.vue

@@ -9,10 +9,10 @@
     :data-page="page"
     :data-width="width"
     :data-height="height"
-    @keydown.up.stop.prevent="move(0, -1)"
-    @keydown.down.stop.prevent="move(0, 1)"
-    @keydown.left.stop.prevent="move(-1, 0)"
-    @keydown.right.stop.prevent="move(1, 0)">
+    @keydown.up.stop.prevent="move($event, 0, -1)"
+    @keydown.down.stop.prevent="move($event, 0, 1)"
+    @keydown.left.stop.prevent="move($event, -1, 0)"
+    @keydown.right.stop.prevent="move($event, 1, 0)">
     <div class="pdf-object__container">
       <slot />
       <PdfObjectDebugger v-if="debug" />
@@ -52,6 +52,7 @@ import {
 import { computePosition, getPosition } from "./utils/position";
 import { getEmptyPosition } from "./utils/overlap";
 import PdfObjectDebugger from "./PdfObjectDebugger.vue";
+import { clamp } from "lodash-es";
 export default defineComponent({
   components: { PdfObjectDebugger },
   props: {
@@ -156,7 +157,8 @@ export default defineComponent({
         y.value = top;
       },
       onmove(event) {
-        move(event.dx, event.dy);
+        x.value += event.dx;
+        y.value += event.dy;
       },
       onend(event) {
         if (event.relatedTarget) {
@@ -221,10 +223,18 @@ export default defineComponent({
           object.value.style.display = "none";
       }
     });
-    function move(dx, dy) {
+    function move(event, dx, dy) {
       if (props.moveable) {
-        x.value += dx;
-        y.value += dy;
+        const pageWidth = pageEl.value.clientWidth;
+        const pageHeight = pageEl.value.clientHeight;
+        const maxX = Math.floor(pageWidth / scale.value - width.value);
+        const maxY = Math.floor(pageHeight / scale.value - height.value);
+        const ax = event.metaKey || event.ctrlKey ? maxX : event.shiftKey ? 10 : 1;
+        const ay = event.metaKey || event.ctrlKey ? maxY : event.shiftKey ? 10 : 1;
+        const x1 = x.value + dx * ax;
+        const y1 = y.value + dy * ay;
+        x.value = clamp(x1, 0, maxX);
+        y.value = clamp(y1, 0, maxY);
       }
     }
     function autoPosition() {

package/dist/components/pdf-object/PdfObject.vue.d.ts

@@ -53,9 +53,9 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }, {
-    move: (dx: number, dy: number) => void;
+    move: (event: KeyboardEvent, dx: number, dy: number) => void;
     focus: import("lodash").DebouncedFunc<typeof import("../tour/utils/focus").focus>;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:x" | "update:y" | "update:page" | "update:width" | "update:height")[], "update:x" | "update:y" | "update:page" | "update:width" | "update:height", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:page" | "update:x" | "update:y" | "update:width" | "update:height")[], "update:page" | "update:x" | "update:y" | "update:width" | "update:height", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     x: {
         type: NumberConstructor;
         default: undefined;
@@ -109,15 +109,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>> & {
+    "onUpdate:page"?: ((...args: any[]) => any) | undefined;
     "onUpdate:x"?: ((...args: any[]) => any) | undefined;
     "onUpdate:y"?: ((...args: any[]) => any) | undefined;
-    "onUpdate:page"?: ((...args: any[]) => any) | undefined;
     "onUpdate:width"?: ((...args: any[]) => any) | undefined;
     "onUpdate:height"?: ((...args: any[]) => any) | undefined;
 }, {
+    y: number;
     x: number;
     width: number;
-    y: number;
     height: number;
     autofocus: boolean;
     maxHeight: number;

package/dist/components/pdf-object/utils/position.mjs

@@ -1,3 +1,4 @@
+import { clamp } from "lodash-es";
 export function findRelativeParent(element, container = document.body) {
   let parent = element.parentElement;
   do {
@@ -34,9 +35,14 @@ export function getPosition(context) {
   } = context;
   const objectBounding = object.getBoundingClientRect();
   const refBounding = reference.getBoundingClientRect();
+  const maxX = Math.floor((refBounding.width - objectBounding.width) / scale);
+  const maxY = Math.floor((refBounding.height - objectBounding.height) / scale);
+  const x = (objectBounding.left - refBounding.left) / scale;
+  const y = (objectBounding.top - refBounding.top) / scale;
+  const page = Number.parseInt(reference.dataset.pageNumber);
   return {
-    x: (objectBounding.left - refBounding.left) / scale,
-    y: (objectBounding.top - refBounding.top) / scale,
-    page: Number.parseInt(reference.dataset.pageNumber)
+    x: clamp(x, 1, maxX - 1),
+    y: clamp(y, 1, maxY - 1),
+    page
   };
 }

package/dist/components/pdf-text/PdfText.vue.d.ts

@@ -147,9 +147,9 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: number;
     };
 }>>, {
-    size: number;
     color: string;
     text: string;
+    size: number;
     modelValue: string | File;
     label: string;
     modelModifiers: ModelModifier;

package/dist/components/pdf-viewer/PdfViewer.vue

@@ -49,7 +49,7 @@
 
       <transition name="slide-up">
         <PdfNavigation
-          v-show="!idle && !loading" />
+          v-show="!idle && !loading && !error" />
       </transition>
 
       <slot

package/dist/components/pdf-viewer/PdfViewer.vue.d.ts

@@ -41,7 +41,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     idle: import("vue-demi").Ref<boolean>;
     loading: import("vue-demi").WritableComputedRef<boolean>;
     error: import("vue-demi").ShallowRef<Error | undefined>;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("error" | "update:page" | "ready" | "loaded" | "error-password" | "update:scale")[], "error" | "update:page" | "ready" | "loaded" | "error-password" | "update:scale", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("error" | "ready" | "loaded" | "error-password" | "update:page" | "update:scale")[], "error" | "ready" | "loaded" | "error-password" | "update:page" | "update:scale", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     src: {
         type: StringConstructor;
         default: string;
@@ -72,10 +72,10 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }>> & {
     onError?: ((...args: any[]) => any) | undefined;
-    "onUpdate:page"?: ((...args: any[]) => any) | undefined;
     onReady?: ((...args: any[]) => any) | undefined;
     onLoaded?: ((...args: any[]) => any) | undefined;
     "onError-password"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:page"?: ((...args: any[]) => any) | undefined;
     "onUpdate:scale"?: ((...args: any[]) => any) | undefined;
 }, {
     src: string;

package/dist/components/radio/Radio.vue.d.ts

@@ -10,11 +10,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     modelValue: {
-        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
+        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
         default: boolean;
     };
     value: {
-        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
+        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
         default: boolean;
     };
     checked: {
@@ -43,11 +43,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     modelValue: {
-        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
+        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
         default: boolean;
     };
     value: {
-        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
+        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
         default: boolean;
     };
     checked: {

package/dist/components/select/Select.vue.d.ts

@@ -4,7 +4,7 @@ import { Adapter } from './adapter/adapter';
 import { SizeVariant } from '../button';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
-        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
+        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
         default: string;
     };
     selected: {
@@ -62,7 +62,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     isSelected: (item: SelectItem) => boolean;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("change" | "update:modelValue" | "update:selected" | "userInput")[], "change" | "update:modelValue" | "update:selected" | "userInput", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
-        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
+        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
         default: string;
     };
     selected: {
@@ -114,8 +114,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:selected"?: ((...args: any[]) => any) | undefined;
     onUserInput?: ((...args: any[]) => any) | undefined;
 }, {
-    error: boolean;
     size: SizeVariant;
+    error: boolean;
     modelValue: string | number | boolean | Record<string, any> | unknown[] | Date;
     disabled: boolean;
     readonly: boolean;

package/dist/components/sidebar/Sidebar.vue

@@ -11,6 +11,7 @@
       ref="sidebarMenus"
       data-testid="sidebar-menus"
       :data-sidebar-menu="brandHeight"
+      :data-bottom-menu="isBottomMenu"
       class="sidebar__menus"
       :style="{ 'padding-bottom': bottomHeight }">
       <slot />
@@ -30,7 +31,9 @@ import { templateRef, useElementSize } from "@vueuse/core";
 import {
   defineComponent,
   computed,
-  provide
+  ref,
+  provide,
+  onMounted
 } from "vue-demi";
 import { SIDEBAR_SETTINGS } from ".";
 import { useSelector } from "../pdf-object/utils/use-selector";
@@ -53,6 +56,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    sticky: {
+      type: Boolean,
+      default: false
+    },
     toggleable: {
       type: String,
       default: void 0
@@ -75,15 +82,15 @@ export default defineComponent({
     });
     const sidebar = templateRef("sidebar");
     const sidebarBrand = useSelector(".sidebar__brand", sidebar);
+    const brand = useElementSize(sidebarBrand);
     const sidebarMenus = templateRef("sidebarMenus");
     const sidebarBottom = useSelector(".sidebar__bottom", sidebarMenus);
     const { height } = useElementSize(sidebarBottom);
-    const brand = useElementSize(sidebarBrand);
     const brandHeight = computed(() => {
-      return slots.brand ? `${brand.height.value + 16}px` : 0;
+      return slots.brand ? `${brand.height.value + titleHeight.value + 16}px` : 0;
     });
     const bottomHeight = computed(() => {
-      return slots.bottom && !slots.default ? 0 : `${height.value + 24}px`;
+      return isBottomMenu.value && !isDefault.value || !isBottomMenu.value && isDefault.value ? 0 : `${height.value + 16}px`;
     });
     const model = useVModel(props);
     const classNames = computed(() => {
@@ -96,16 +103,28 @@ export default defineComponent({
         result.push(`sidebar--${props.variant}`);
       if (props.fixed)
         result.push("sidebar--fixed");
+      if (props.sticky)
+        result.push("sidebar--sticky");
       if (props.toggleable)
         result.push(`sidebar--toggleable sidebar--toggleable-${props.toggleable}`);
       if (props.toggleable && props.fixed && model.value)
         result.push("sidebar--show");
       return result;
     });
+    const titleHeight = ref(0);
+    const isBottomMenu = ref(false);
+    const isDefault = ref(false);
+    onMounted(() => {
+      titleHeight.value = document.querySelectorAll(".sidebar .nav--has-title").length * 0.25 * 20;
+      isBottomMenu.value = document.querySelectorAll(".sidebar .sidebar__nav--bottom").length > 0;
+      isDefault.value = document.querySelectorAll(".sidebar .sidebar__nav:not(.sidebar__nav--bottom)").length > 0;
+    });
     return {
       classNames,
       bottomHeight,
-      brandHeight
+      brandHeight,
+      isBottomMenu,
+      isDefault
     };
   }
 });
@@ -118,8 +137,11 @@ export default defineComponent({
   --p-sidebar-bg: theme(backgroundColor.DEFAULT);
   --p-sidebar-bg-dark: theme(backgroundColor.dark.DEFAULT);
   --p-sidebar-z-index: theme(zIndex.fixed);
+  --p-sidebar-sticky-top: theme(spacing.0);
+  --p-sidebar-padding-x: theme(spacing.2);
+  --p-sidebar-padding-y: theme(spacing.4);
 
-  @apply bg-[color:var(--p-sidebar-bg)] px-2 py-4;
+  @apply bg-[color:var(--p-sidebar-bg)] px-[var(--p-sidebar-padding-x)] py-[var(--p-sidebar-padding-y)];
   @apply dark:bg-[color:var(--p-sidebar-bg-dark)];
 
   /**
@@ -154,8 +176,12 @@ export default defineComponent({
     }
 
     .sidebar__bottom {
-      @apply absolute -bottom-4 w-[calc(100%+1rem)] -left-2 bg-[color:var(--p-sidebar-bg)];
+      @apply absolute -bottom-2 w-[calc(100%+1rem)] -left-2 bg-[color:var(--p-sidebar-bg)];
       @apply dark:bg-[color:var(--p-sidebar-bg-dark)];
+
+      .sidebar__nav {
+        @apply px-2;
+      }
     }
 
     /**
@@ -193,6 +219,13 @@ export default defineComponent({
     }
   }
 
+  /**
+  * Sticky sidebar
+  */
+  &&--sticky {
+    @apply sticky top-[var(--p-sidebar-sticky-top)] z-sticky;
+  }
+
   /**
   * Narrow sidebar
   * is 60px width

package/dist/components/sidebar/Sidebar.vue.d.ts

@@ -19,6 +19,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     toggleable: {
         type: PropType<ToggleableVariant>;
         default: undefined;
@@ -31,6 +35,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     classNames: import("vue-demi").ComputedRef<string[]>;
     bottomHeight: import("vue-demi").ComputedRef<string | 0>;
     brandHeight: import("vue-demi").ComputedRef<string | 0>;
+    isBottomMenu: import("vue-demi").Ref<boolean>;
+    isDefault: import("vue-demi").Ref<boolean>;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     variant: {
         type: PropType<StyleVariant>;
@@ -48,6 +54,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     toggleable: {
         type: PropType<ToggleableVariant>;
         default: undefined;
@@ -65,5 +75,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     modelValue: boolean;
     align: AlignVariant;
     toggleable: ToggleableVariant;
+    sticky: boolean;
 }, {}>;
 export default _default;

package/dist/components/sidebar/SidebarBrand.vue

@@ -57,9 +57,19 @@ export default defineComponent({
 
     a {
       @apply no-underline;
+
+      & > img {
+        @apply max-w-full h-auto;
+      }
+
+      .sidebar--wide & {
+        & > img {
+          @apply h-7 w-auto;
+        }
+      }
     }
 
-    img {
+    & > img {
       @apply max-w-full h-auto;
     }
 
@@ -78,7 +88,7 @@ export default defineComponent({
     .sidebar--wide & {
       @apply px-3;
 
-      img {
+      & > img {
         @apply h-7 w-auto;
       }
     }