@weni/unnnic-system 3.12.6-alpha-teleports.0 → 3.12.7

package/src/components/index.ts

@@ -28,6 +28,7 @@ import checkbox from './Checkbox/Checkbox.vue';
 import checkboxGroup from './CheckboxGroup/CheckboxGroup.vue';
 import collapse from './Collapse/Collapse.vue';
 import radio from './Radio/Radio.vue';
+import radioGroup from './RadioGroup/RadioGroup.vue';
 import languageSelect from './Dropdown/LanguageSelect.vue';
 import modal from './Modal/Modal.vue';
 import modalUpload from './ModalUpload/ModalUpload.vue';
@@ -111,20 +112,6 @@ import {
   SegmentedControlContent,
 } from './ui/segmented-control';
 import PageHeader from './PageHeader/PageHeader.vue';
-import Dialog from './ui/dialog/Dialog.vue';
-import DialogContent from './ui/dialog/DialogContent.vue';
-import DialogFooter from './ui/dialog/DialogFooter.vue';
-import DialogHeader from './ui/dialog/DialogHeader.vue';
-import DialogTitle from './ui/dialog/DialogTitle.vue';
-import DialogTrigger from './ui/dialog/DialogTrigger.vue';
-import DialogClose from './ui/dialog/DialogClose.vue';
-import DrawerNext from './ui/drawer/Drawer.vue';
-import DrawerContent from './ui/drawer/DrawerContent.vue';
-import DrawerHeader from './ui/drawer/DrawerHeader.vue';
-import DrawerFooter from './ui/drawer/DrawerFooter.vue';
-import DrawerClose from './ui/drawer/DrawerClose.vue';
-import DrawerTitle from './ui/drawer/DrawerTitle.vue';
-import DrawerDescription from './ui/drawer/DrawerDescription.vue';
 
 type VueComponent = Component;
 
@@ -162,6 +149,7 @@ export const components: ComponentsMap = {
   unnnicCheckboxGroup: checkboxGroup,
   unnnicCollapse: collapse,
   unnnicRadio: radio,
+  unnnicRadioGroup: radioGroup,
   unnnicLanguageSelect: languageSelect,
   unnnicModal: modal,
   unnnicModalNext: ModalNext,
@@ -244,20 +232,6 @@ export const components: ComponentsMap = {
   unnnicSegmentedControlTrigger: SegmentedControlTrigger,
   unnnicSegmentedControlContent: SegmentedControlContent,
   unnnicPageHeader: PageHeader,
-  unnnicDialog: Dialog,
-  unnnicDialogContent: DialogContent,
-  unnnicDialogFooter: DialogFooter,
-  unnnicDialogHeader: DialogHeader,
-  unnnicDialogTitle: DialogTitle,
-  unnnicDialogTrigger: DialogTrigger,
-  unnnicDialogClose: DialogClose,
-  unnnicDrawerNext: DrawerNext,
-  unnnicDrawerContent: DrawerContent,
-  unnnicDrawerHeader: DrawerHeader,
-  unnnicDrawerFooter: DrawerFooter,
-  unnnicDrawerClose: DrawerClose,
-  unnnicDrawerTitle: DrawerTitle,
-  unnnicDrawerDescription: DrawerDescription,
 };
 
 export const unnnicFontSize = fontSize;
@@ -290,6 +264,7 @@ export const unnnicCheckbox = checkbox;
 export const unnnicCheckboxGroup = checkboxGroup;
 export const unnnicCollapse = collapse;
 export const unnnicRadio = radio;
+export const unnnicRadioGroup = radioGroup;
 export const unnniclanguageSelect = languageSelect as VueComponent;
 export const unnnicModal = modal;
 export const unnnicModalDialog = ModalDialog;
@@ -372,20 +347,6 @@ export const unnnicSegmentedControlList = SegmentedControlList;
 export const unnnicSegmentedControlTrigger = SegmentedControlTrigger;
 export const unnnicSegmentedControlContent = SegmentedControlContent;
 export const unnnicPageHeader = PageHeader;
-export const unnnicDialog = Dialog;
-export const unnnicDialogContent = DialogContent;
-export const unnnicDialogFooter = DialogFooter;
-export const unnnicDialogHeader = DialogHeader;
-export const unnnicDialogTitle = DialogTitle;
-export const unnnicDialogTrigger = DialogTrigger;
-export const unnnicDialogClose = DialogClose;
-export const unnnicDrawerNext = DrawerNext;
-export const unnnicDrawerContent = DrawerContent;
-export const unnnicDrawerHeader = DrawerHeader;
-export const unnnicDrawerFooter = DrawerFooter;
-export const unnnicDrawerClose = DrawerClose;
-export const unnnicDrawerTitle = DrawerTitle;
-export const unnnicDrawerDescription = DrawerDescription;
 
 export const UnnnicFontSize = fontSize;
 export const UnnnicFormElement = formElement;
@@ -417,6 +378,7 @@ export const UnnnicCheckbox = checkbox;
 export const UnnnicCheckboxGroup = checkboxGroup;
 export const UnnnicCollapse = collapse;
 export const UnnnicRadio = radio;
+export const UnnnicRadioGroup = radioGroup;
 export const UnnniclanguageSelect = languageSelect as VueComponent;
 export const UnnnicModal = modal;
 export const UnnnicModalDialog = ModalDialog;
@@ -499,17 +461,3 @@ export const UnnnicSegmentedControlList = SegmentedControlList;
 export const UnnnicSegmentedControlTrigger = SegmentedControlTrigger;
 export const UnnnicSegmentedControlContent = SegmentedControlContent;
 export const UnnnicPageHeader = PageHeader;
-export const UnnnicDialog = Dialog;
-export const UnnnicDialogContent = DialogContent;
-export const UnnnicDialogFooter = DialogFooter;
-export const UnnnicDialogHeader = DialogHeader;
-export const UnnnicDialogTitle = DialogTitle;
-export const UnnnicDialogTrigger = DialogTrigger;
-export const UnnnicDialogClose = DialogClose;
-export const UnnnicDrawerNext = DrawerNext;
-export const UnnnicDrawerContent = DrawerContent;
-export const UnnnicDrawerHeader = DrawerHeader;
-export const UnnnicDrawerFooter = DrawerFooter;
-export const UnnnicDrawerClose = DrawerClose;
-export const UnnnicDrawerTitle = DrawerTitle;
-export const UnnnicDrawerDescription = DrawerDescription;

package/src/components/ui/popover/PopoverContent.vue

@@ -1,5 +1,5 @@
 <template>
-  <PopoverPortal :to="portalTarget">
+  <PopoverPortal>
     <PopoverContent
       v-bind="{ ...forwarded, ...$attrs }"
       :class="
@@ -9,7 +9,6 @@
           'bg-popover text-popover-foreground outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         )
       "
-      :style="{ zIndex: popoverZIndex }"
     >
       <section :class="`unnnic-popover__content ${props.class || ''}`">
         <component
@@ -35,8 +34,6 @@ import { computed, useSlots } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui';
 import { cn } from '@/lib/utils';
-import { useLayerZIndex } from '@/lib/layer-manager';
-import { useTeleportTarget } from '@/lib/teleport-target';
 
 defineOptions({
   inheritAttrs: false,
@@ -64,9 +61,6 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
 const slots = useSlots() as Slots;
 
-const popoverZIndex = useLayerZIndex();
-const portalTarget = useTeleportTarget();
-
 const getComponentName = (vnode: VNode): string | undefined => {
   const componentType = vnode.type as { name?: string; __name?: string };
   return componentType?.name || componentType?.__name;
@@ -93,6 +87,8 @@ const footerChildren = computed(() => {
 $popover-space: $unnnic-space-4;
 
 .unnnic-popover {
+  z-index: 10000;
+
   border-radius: $unnnic-radius-2;
   box-shadow: $unnnic-shadow-1;
 

package/src/components/ui/popover/PopoverTrigger.vue

@@ -14,14 +14,10 @@ const props = defineProps<PopoverTriggerProps>();
   </PopoverTrigger>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .unnnic-popover-trigger {
   border: none;
   background: transparent;
   padding: 0;
-
-  & > * {
-    width: 100%;
-  }
 }
 </style>

package/src/index.ts

@@ -1,21 +1,14 @@
 import type { App } from 'vue';
 import { components } from '@/components';
 import './assets/scss/tailwind.scss';
-import { setTeleportTarget, type TeleportTarget } from '@/lib/teleport-target';
 
 interface UnnnicPlugin {
-  install(app: App, options?: UnnnicPluginOptions): void;
+  install(app: App): void;
   [key: string]: any;
 }
 
-export interface UnnnicPluginOptions {
-  teleportTarget?: TeleportTarget | null;
-}
-
 const Unnnic: UnnnicPlugin = {
-  install(app: App, options?: UnnnicPluginOptions) {
-    setTeleportTarget(options?.teleportTarget ?? null);
-
+  install(app: App) {
     Object.keys(components).forEach((name) => {
       app.component(name, components[name] as any);
     });

package/src/stories/Drawer.stories.js

@@ -14,7 +14,7 @@ const primaryButtonTypeOptions = [
 ];
 
 export default {
-  title: 'Misc/Drawer',
+  title: 'Example/Drawer',
   component: UnnnicDrawer,
   argTypes: {
     title: { control: { type: 'text' } },

package/src/stories/ModalDialog.mdx

@@ -6,9 +6,6 @@ import * as ModalDialogStories from './ModalDialog.stories';
 
 # ModalDialog
 
-> **⚠️ DEPRECATED**: This component has been deprecated in favor of the new `Dialog` component. Please use `UnnnicDialog` 
-instead for new implementations. See the [Dialog documentation](?path=/docs/feedback-dialog--docs) for more information.
-
 The ModalDialog was designed to inform the user about a specific task, request information, or involve other tasks.
 
 <Source

package/src/stories/ModalDialog.stories.js

@@ -7,7 +7,7 @@ import iconsList from '../utils/iconList';
 import colorsList from '../utils/colorsList';
 
 export default {
-  title: 'Feedback/ModalDialog',
+  title: 'Example/ModalDialog',
   component: UnnnicModalDialog,
   argTypes: {
     type: {

package/src/stories/TemplatePreview.stories.js

@@ -1,8 +1,8 @@
-import UnnnicTemplatePreview from "../components/TemplatePreview/TemplatePreview.vue";
+import UnnnicTemplatePreview from '../components/TemplatePreview/TemplatePreview.vue';
 
 export default {
-  title: "example/TemplatePreview",
-  tags: ["autodocs"],
+  title: 'example/TemplatePreview',
+  tags: ['autodocs'],
   component: UnnnicTemplatePreview,
 };
 
@@ -17,28 +17,28 @@ const Template = (args) => ({
 });
 
 const bodyText =
-  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sem orci, ultrices id lectus non, vehicula suscipit libero. Ut vehicula libero a tempus fringilla. Nam tincidunt vestibulum maximus. Morbi vel pretium risus. Curabitur id quam lectus. Quisque dolor elit, auctor a lacus non, rutrum ullamcorper mi. Nulla et turpis sed eros pharetra ullamcorper fermentum ac nisl. Donec lacinia hendrerit tellus, sit amet suscipit velit vestibulum sed. Praesent gravida posuere metus, ut fringilla dolor euismod vel. Aenean vel ipsum magna. Integer metus mi, fermentum ut nulla at, facilisis lobortis metus. Ut vitae tortor posuere, dapibus leo quis, finibus neque.";
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sem orci, ultrices id lectus non, vehicula suscipit libero. Ut vehicula libero a tempus fringilla. Nam tincidunt vestibulum maximus. Morbi vel pretium risus. Curabitur id quam lectus. Quisque dolor elit, auctor a lacus non, rutrum ullamcorper mi. Nulla et turpis sed eros pharetra ullamcorper fermentum ac nisl. Donec lacinia hendrerit tellus, sit amet suscipit velit vestibulum sed. Praesent gravida posuere metus, ut fringilla dolor euismod vel. Aenean vel ipsum magna. Integer metus mi, fermentum ut nulla at, facilisis lobortis metus. Ut vitae tortor posuere, dapibus leo quis, finibus neque.';
 
 export const Default = Template.bind({});
 Default.args = {
   template: {
     header: {
-      type: "TEXT",
-      text: "Hello, world!",
+      type: 'TEXT',
+      text: 'Hello, world!',
     },
-    footer: "Weni by VTEX",
+    footer: 'Weni by VTEX',
     buttons: [
       {
-        text: "Button 1",
-        type: "PHONE_NUMBER",
+        text: 'Button 1',
+        type: 'PHONE_NUMBER',
       },
       {
-        text: "Button 2",
-        type: "URL",
+        text: 'Button 2',
+        type: 'URL',
       },
       {
-        text: "Button 3",
-        type: "QUICK_REPLY",
+        text: 'Button 3',
+        type: 'QUICK_REPLY',
       },
     ],
     body: bodyText,
@@ -49,10 +49,10 @@ export const Image = Template.bind({});
 Image.args = {
   template: {
     header: {
-      type: "MEDIA",
-      mediaType: "IMAGE",
+      type: 'MEDIA',
+      mediaType: 'IMAGE',
     },
-    footer: "Weni by VTEX",
+    footer: 'Weni by VTEX',
     body: bodyText,
   },
 };
@@ -61,21 +61,21 @@ export const Video = Template.bind({});
 Video.args = {
   template: {
     header: {
-      type: "MEDIA",
-      mediaType: "VIDEO",
+      type: 'MEDIA',
+      mediaType: 'VIDEO',
     },
     buttons: [
       {
-        text: "Button 1",
-        type: "PHONE_NUMBER",
+        text: 'Button 1',
+        type: 'PHONE_NUMBER',
       },
       {
-        text: "Button 2",
-        type: "URL",
+        text: 'Button 2',
+        type: 'URL',
       },
       {
-        text: "Button 3",
-        type: "QUICK_REPLY",
+        text: 'Button 3',
+        type: 'QUICK_REPLY',
       },
     ],
   },
@@ -85,10 +85,10 @@ export const Document = Template.bind({});
 Document.args = {
   template: {
     header: {
-      type: "MEDIA",
-      mediaType: "DOCUMENT",
+      type: 'MEDIA',
+      mediaType: 'DOCUMENT',
     },
-    footer: "Weni by VTEX",
+    footer: 'Weni by VTEX',
     body: bodyText,
   },
 };

package/src/stories/TemplatePreviewModal.stories.js

@@ -1,15 +1,15 @@
-import UnnnicTemplatePreviewModal from "../components/TemplatePreview/TemplatePreviewModal.vue";
+import UnnnicTemplatePreviewModal from '../components/TemplatePreview/TemplatePreviewModal.vue';
 
-import { action } from "@storybook/addon-actions";
+import { action } from '@storybook/addon-actions';
 
 export default {
-  title: "example/TemplatePreviewModal",
-  tags: ["autodocs"],
+  title: 'example/TemplatePreviewModal',
+  tags: ['autodocs'],
   component: UnnnicTemplatePreviewModal,
   argTypes: {
     locale: {
-      control: { type: "select" },
-      options: ["pt-br", "en", "es"],
+      control: { type: 'select' },
+      options: ['pt-br', 'en', 'es'],
     },
   },
 };
@@ -18,7 +18,7 @@ const Template = (args) => ({
   components: { UnnnicTemplatePreviewModal },
   setup() {
     const close = () => {
-      action("close")();
+      action('close')();
       args.modelValue = false;
     };
     return { args, close };
@@ -32,29 +32,29 @@ const Template = (args) => ({
 });
 
 const bodyText =
-  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sem orci, ultrices id lectus non, vehicula suscipit libero. Ut vehicula libero a tempus fringilla. Nam tincidunt vestibulum maximus. Morbi vel pretium risus. Curabitur id quam lectus. Quisque dolor elit, auctor a lacus non, rutrum ullamcorper mi. Nulla et turpis sed eros pharetra ullamcorper fermentum ac nisl. Donec lacinia hendrerit tellus, sit amet suscipit velit vestibulum sed. Praesent gravida posuere metus, ut fringilla dolor euismod vel. Aenean vel ipsum magna. Integer metus mi, fermentum ut nulla at, facilisis lobortis metus. Ut vitae tortor posuere, dapibus leo quis, finibus neque.";
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sem orci, ultrices id lectus non, vehicula suscipit libero. Ut vehicula libero a tempus fringilla. Nam tincidunt vestibulum maximus. Morbi vel pretium risus. Curabitur id quam lectus. Quisque dolor elit, auctor a lacus non, rutrum ullamcorper mi. Nulla et turpis sed eros pharetra ullamcorper fermentum ac nisl. Donec lacinia hendrerit tellus, sit amet suscipit velit vestibulum sed. Praesent gravida posuere metus, ut fringilla dolor euismod vel. Aenean vel ipsum magna. Integer metus mi, fermentum ut nulla at, facilisis lobortis metus. Ut vitae tortor posuere, dapibus leo quis, finibus neque.';
 
 export const Default = Template.bind({});
 Default.args = {
   modelValue: false,
   template: {
     header: {
-      type: "TEXT",
-      text: "Hello, world!",
+      type: 'TEXT',
+      text: 'Hello, world!',
     },
-    footer: "Weni by VTEX",
+    footer: 'Weni by VTEX',
     buttons: [
       {
-        text: "Button 1",
-        type: "PHONE_NUMBER",
+        text: 'Button 1',
+        type: 'PHONE_NUMBER',
       },
       {
-        text: "Button 2",
-        type: "URL",
+        text: 'Button 2',
+        type: 'URL',
       },
       {
-        text: "Button 3",
-        type: "QUICK_REPLY",
+        text: 'Button 3',
+        type: 'QUICK_REPLY',
       },
     ],
     body: bodyText,
@@ -65,10 +65,10 @@ export const Image = Template.bind({});
 Image.args = {
   template: {
     header: {
-      type: "MEDIA",
-      mediaType: "IMAGE",
+      type: 'MEDIA',
+      mediaType: 'IMAGE',
     },
-    footer: "Weni by VTEX",
+    footer: 'Weni by VTEX',
     body: bodyText,
   },
 };
@@ -77,21 +77,21 @@ export const Video = Template.bind({});
 Video.args = {
   template: {
     header: {
-      type: "MEDIA",
-      mediaType: "VIDEO",
+      type: 'MEDIA',
+      mediaType: 'VIDEO',
     },
     buttons: [
       {
-        text: "Button 1",
-        type: "PHONE_NUMBER",
+        text: 'Button 1',
+        type: 'PHONE_NUMBER',
       },
       {
-        text: "Button 2",
-        type: "URL",
+        text: 'Button 2',
+        type: 'URL',
       },
       {
-        text: "Button 3",
-        type: "QUICK_REPLY",
+        text: 'Button 3',
+        type: 'QUICK_REPLY',
       },
     ],
   },
@@ -101,10 +101,10 @@ export const Document = Template.bind({});
 Document.args = {
   template: {
     header: {
-      type: "MEDIA",
-      mediaType: "DOCUMENT",
+      type: 'MEDIA',
+      mediaType: 'DOCUMENT',
     },
-    footer: "Weni by VTEX",
+    footer: 'Weni by VTEX',
     body: bodyText,
   },
 };

package/src/components/ui/dialog/Dialog.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from 'reka-ui';
-import { DialogRoot, useForwardPropsEmits } from 'reka-ui';
-
-defineOptions({
-  name: 'UnnnicDialog',
-});
-
-const props = defineProps<DialogRootProps>();
-const emits = defineEmits<DialogRootEmits>();
-
-const forwarded = useForwardPropsEmits(props, emits);
-</script>
-
-<template>
-  <DialogRoot v-bind="forwarded">
-    <slot />
-  </DialogRoot>
-</template>

package/src/components/ui/dialog/DialogClose.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import type { DialogCloseProps } from 'reka-ui';
-import { DialogClose } from 'reka-ui';
-
-defineOptions({
-  name: 'UnnnicDialogClose',
-});
-
-const props = withDefaults(defineProps<DialogCloseProps>(), {
-  asChild: true,
-});
-</script>
-
-<template>
-  <DialogClose
-    class="unnnic-dialog-close"
-    v-bind="props"
-  >
-    <slot />
-  </DialogClose>
-</template>
-
-<style lang="scss" scoped>
-.unnnic-dialog-close {
-  > * {
-    width: 100%;
-  }
-}
-</style>

package/src/components/ui/dialog/DialogContent.vue

@@ -1,140 +0,0 @@
-<script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
-import type { HTMLAttributes, Component } from 'vue';
-import { computed, h } from 'vue';
-import { reactiveOmit } from '@vueuse/core';
-import {
-  DialogContent,
-  DialogOverlay,
-  DialogPortal,
-  useForwardPropsEmits,
-} from 'reka-ui';
-import { cn } from '@/lib/utils';
-import { useLayerZIndex } from '@/lib/layer-manager';
-import { useTeleportTarget } from '@/lib/teleport-target';
-
-defineOptions({
-  name: 'UnnnicDialogContent',
-});
-
-const props = withDefaults(
-  defineProps<
-    DialogContentProps & {
-      parentClass?: HTMLAttributes['class'];
-      class?: HTMLAttributes['class'];
-      size?: 'small' | 'medium' | 'large';
-    }
-  >(),
-  {
-    size: 'medium',
-    parentClass: '', // This class should be temporary, to be discontinued with the ModalDialog component
-    class: '',
-  },
-);
-const emits = defineEmits<DialogContentEmits>();
-
-const delegatedProps = reactiveOmit(props, 'class', 'parentClass');
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
-
-const overlayZIndex = useLayerZIndex({ offset: -2 });
-const modalZIndex = useLayerZIndex();
-const portalTarget = useTeleportTarget();
-
-const contentClasses = computed(() =>
-  cn(
-    'unnnic-dialog-content',
-    `unnnic-dialog-content--size-${props.size}`,
-    'duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
-    props.class,
-  ),
-);
-
-// This component is used to wrap the DialogContent component in a section if the parentClass is provided
-// This is a temporary solution, to be discontinued with the ModalDialog component
-const ConditionalWrapper: Component = (_, { slots }) => {
-  const content = slots.default?.();
-  return props.parentClass
-    ? h('section', { class: props.parentClass }, content)
-    : content;
-};
-</script>
-
-<template>
-  <DialogPortal :to="portalTarget">
-    <DialogOverlay
-      class="unnnic-dialog-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-      :style="{ zIndex: overlayZIndex }"
-    />
-
-    <ConditionalWrapper>
-      <DialogContent
-        v-bind="forwarded"
-        :class="contentClasses"
-        :style="{ zIndex: modalZIndex }"
-      >
-        <slot />
-      </DialogContent>
-    </ConditionalWrapper>
-  </DialogPortal>
-</template>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-dialog-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-
-  width: 100vw;
-  height: 100vh;
-  background: rgba(53, 57, 69, 0.5);
-}
-
-.unnnic-dialog-content {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-
-  transform: translate(-50%, -50%);
-
-  width: 100%;
-  max-height: calc(100% - $unnnic-space-20);
-
-  display: flex;
-  flex-direction: column;
-
-  box-shadow: $unnnic-shadow-2;
-  border-radius: $unnnic-radius-4;
-  background-color: $unnnic-color-bg-base;
-
-  &--size-small {
-    max-width: 360px;
-  }
-
-  &--size-medium {
-    max-width: 560px;
-  }
-
-  &--size-large {
-    max-width: 800px;
-  }
-
-  > * {
-    &::-webkit-scrollbar {
-      width: $unnnic-spacing-inline-nano;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: $unnnic-color-neutral-cleanest;
-      border-radius: $unnnic-border-radius-pill;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: $unnnic-color-neutral-soft;
-      border-radius: $unnnic-border-radius-pill;
-    }
-  }
-}
-</style>