@infonomic/uikit 5.27.0 → 5.29.0

package/dist/widgets/datepicker/datepicker.d.ts

@@ -21,6 +21,7 @@ export interface DatePickerProps extends React.InputHTMLAttributes<HTMLInputElem
     inputClassName?: string;
     intent?: Intent;
     containerClassName?: string;
+    contentClassName?: string;
     helpText?: string;
     errorText?: string;
     ariaLabelForSearch?: string;
@@ -33,5 +34,5 @@ export interface DatePickerProps extends React.InputHTMLAttributes<HTMLInputElem
     };
     placeHolderText?: string;
 }
-export declare function DatePicker({ id, name, label, required, initialValue, mode, yearsInFuture, yearsInPast, variant, intent, inputSize, inputClassName, inputWrapperClassName, containerClassName, onClear, onDateChange, validatorFn, helpText, errorText, placeHolderText, ariaLabelForSearch, ariaLabelForClear, ...rest }: DatePickerProps): React.JSX.Element;
+export declare function DatePicker({ id, name, label, required, initialValue, mode, yearsInFuture, yearsInPast, variant, intent, inputSize, inputClassName, inputWrapperClassName, containerClassName, contentClassName, onClear, onDateChange, validatorFn, helpText, errorText, placeHolderText, ariaLabelForSearch, ariaLabelForClear, ...rest }: DatePickerProps): React.JSX.Element;
 //# sourceMappingURL=datepicker.d.ts.map

package/dist/widgets/datepicker/datepicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../../src/widgets/datepicker/datepicker.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAgB9B,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,wCAAwC,CAAA;AAEnF,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAClF,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAC1B,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,IAAI,CAAA;IAChB,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAA;IAC3C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK;QAC7B,KAAK,EAAE,OAAO,CAAA;QACd,KAAK,EAAE,IAAI,CAAA;KACZ,CAAA;IACD,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB;AAED,wBAAgB,UAAU,CAAC,EACzB,EAAE,EACF,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,IAAiB,EACjB,aAAiB,EACjB,WAAgB,EAChB,OAAO,EACP,MAAM,EACN,SAAS,EACT,cAAc,EACd,qBAAqB,EACrB,kBAAkB,EAClB,OAAkB,EAClB,YAAuB,EACvB,WAAW,EACX,QAAQ,EACR,SAAS,EACT,eAAoB,EACpB,kBAA2B,EAC3B,iBAA2B,EAC3B,GAAG,IAAI,EACR,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiPrC"}
+{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../../src/widgets/datepicker/datepicker.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAgB9B,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,wCAAwC,CAAA;AAEnF,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAClF,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAC1B,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,IAAI,CAAA;IAChB,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAA;IAC3C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK;QAC7B,KAAK,EAAE,OAAO,CAAA;QACd,KAAK,EAAE,IAAI,CAAA;KACZ,CAAA;IACD,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB;AAED,wBAAgB,UAAU,CAAC,EACzB,EAAE,EACF,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,IAAiB,EACjB,aAAiB,EACjB,WAAgB,EAChB,OAAO,EACP,MAAM,EACN,SAAS,EACT,cAAc,EACd,qBAAqB,EACrB,kBAAkB,EAClB,gBAAgB,EAChB,OAAmB,EACnB,YAAwB,EACxB,WAAW,EACX,QAAQ,EACR,SAAS,EACT,eAAoB,EACpB,kBAA2B,EAC3B,iBAA2B,EAC3B,GAAG,IAAI,EACR,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiPrC"}

package/dist/widgets/datepicker/datepicker.js

@@ -13,7 +13,7 @@ import { ScrollArea } from "../../components/scroll-area/scroll-area.js";
 import { CalendarIcon } from "../../icons/calendar-icon.js";
 import { CloseIcon } from "../../icons/close-icon.js";
 import datepicker_module from "./datepicker.module.js";
-function DatePicker({ id, name, label, required, initialValue, mode = 'datetime', yearsInFuture = 1, yearsInPast = 10, variant, intent, inputSize, inputClassName, inputWrapperClassName, containerClassName, onClear = ()=>{}, onDateChange = ()=>{}, validatorFn, helpText, errorText, placeHolderText = '', ariaLabelForSearch = 'date', ariaLabelForClear = 'clear', ...rest }) {
+function DatePicker({ id, name, label, required, initialValue, mode = 'datetime', yearsInFuture = 1, yearsInPast = 10, variant, intent, inputSize, inputClassName, inputWrapperClassName, containerClassName, contentClassName, onClear = ()=>{}, onDateChange = ()=>{}, validatorFn, helpText, errorText, placeHolderText = '', ariaLabelForSearch = 'date', ariaLabelForClear = 'clear', ...rest }) {
     const [isOpen, setIsOpen] = useState(false);
     const [time, setTime] = useState('08:00');
     const [date, setDate] = useState(()=>{
@@ -134,7 +134,7 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
                     /*#__PURE__*/ jsx(Popover.Portal, {
                         children: /*#__PURE__*/ jsxs(Popover.Content, {
                             sideOffset: 5,
-                            className: datepicker_module.content,
+                            className: classnames(datepicker_module.content, contentClassName),
                             children: [
                                 /*#__PURE__*/ jsxs("div", {
                                     className: datepicker_module["content-components"],

package/dist/widgets/datepicker/datepicker.module.css

@@ -1,17 +1,23 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
 
 @layer infonomic-components {
-  .container {
+
+  .container,
+  :global(.infonomic-datepicker-container) {
     position: relative;
   }
 
   .input,
-  .input-wrapper {
+  .input-wrapper,
+  :global(.infonomic-datepicker-input),
+  :global(.infonomic-datepicker-input-wrapper) {
     width: 100%;
   }
 
-  .content {
+  .content,
+  :global(.infonomic-datepicker-content) {
     width: 100%;
+    z-index: 50;
     border-radius: 4px;
     padding-top: var(--spacing-16);
     padding-bottom: var(--spacing-8);
@@ -45,20 +51,22 @@
     }
   }
 
-  .dark,
-  [data-theme="dark"] {
+  :global(.dark),
+  :global([data-theme="dark"]) {
     .content {
       background: var(--canvas-800);
     }
   }
 
-  .content-components {
+  .content-components,
+  :global(.infonomic-datepicker-content-components) {
     display: flex;
     width: 100%;
     gap: var(--spacing-8);
   }
 
-  .status-and-actions {
+  .status-and-actions,
+  :global(.infonomic-datepicker-status-and-actions) {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -66,7 +74,8 @@
     width: 100%;
   }
 
-  .content-status {
+  .content-status,
+  :global(.infonomic-datepicker-content-status) {
     display: flex;
     align-items: center;
     padding-left: var(--spacing-16);
@@ -76,7 +85,8 @@
     width: 100%;
   }
 
-  .content-actions {
+  .content-actions,
+  :global(.infonomic-datepicker-content-actions) {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -87,16 +97,19 @@
     width: 100%;
   }
 
-  .content-actions-button {
+  .content-actions-button,
+  :global(.infonomic-datepicker-content-actions-button) {
     /* min-width: 100px; */
     --ring-color: var(--violet-7);
   }
 
-  .arrow {
+  .arrow,
+  :global(.infonomic-datepicker-arrow) {
     fill: var(--gray-50);
   }
 
-  .close {
+  .close,
+  :global(.infonomic-datepicker-close) {
     all: unset;
     font-family: inherit;
     border-radius: 100%;
@@ -119,17 +132,20 @@
     }
   }
 
-  .time-picker-container {
+  .time-picker-container,
+  :global(.infonomic-datepicker-time-picker-container) {
     width: 80px;
     margin: 0.6rem 0.5rem 1rem 0;
   }
 
-  .time-picker-scroll-area {
+  .time-picker-scroll-area,
+  :global(.infonomic-datepicker-time-picker-scroll-area) {
     height: 280px;
     padding-right: var(--spacing-16);
   }
 
-  .time-picker {
+  .time-picker,
+  :global(.infonomic-datepicker-time-picker) {
     display: flex;
     padding-left: var(--spacing-4);
     padding-right: var(--spacing-4);
@@ -137,7 +153,8 @@
     gap: 0.5rem;
   }
 
-  .time-picker-button {
+  .time-picker-button,
+  :global(.infonomic-datepicker-time-picker-button) {
     width: 100%;
   }
 

package/dist/widgets/datepicker/datepicker.module.js

@@ -9,7 +9,6 @@ const datepicker_module = {
     slideLeftAndFade: "slideLeftAndFade-ugM6Hs",
     slideUpAndFade: "slideUpAndFade-bAwQJS",
     slideRightAndFade: "slideRightAndFade-o0jl7q",
-    dark: "dark-A_8H6V",
     "content-components": "content-components-jcG649",
     contentComponents: "content-components-jcG649",
     "status-and-actions": "status-and-actions-Px_b57",

package/dist/widgets/datepicker/datepicker_module.css

@@ -1,15 +1,16 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme;
 
 @layer infonomic-components {
-  .container-u5_VUp {
+  :is(.container-u5_VUp, .infonomic-datepicker-container) {
     position: relative;
   }
 
-  .input-SaODq9, .input-wrapper-qwAckv {
+  :is(.input-SaODq9, .input-wrapper-qwAckv, .infonomic-datepicker-input, .infonomic-datepicker-input-wrapper) {
     width: 100%;
   }
 
-  .content-UK9iLF {
+  :is(.content-UK9iLF, .infonomic-datepicker-content) {
+    z-index: 50;
     width: 100%;
     padding-top: var(--spacing-16);
     padding-bottom: var(--spacing-8);
@@ -24,37 +25,37 @@
     animation-timing-function: cubic-bezier(.16, 1, .3, 1);
   }
 
-  .content-UK9iLF:focus {
+  :is(.content-UK9iLF, .infonomic-datepicker-content):focus {
     box-shadow: var(--shadow-md);
   }
 
-  .content-UK9iLF[data-state="open"][data-side="top"] {
+  :is(.content-UK9iLF, .infonomic-datepicker-content)[data-state="open"][data-side="top"] {
     animation-name: slideDownAndFade-dohHTE;
   }
 
-  .content-UK9iLF[data-state="open"][data-side="right"] {
+  :is(.content-UK9iLF, .infonomic-datepicker-content)[data-state="open"][data-side="right"] {
     animation-name: slideLeftAndFade-ugM6Hs;
   }
 
-  .content-UK9iLF[data-state="open"][data-side="bottom"] {
+  :is(.content-UK9iLF, .infonomic-datepicker-content)[data-state="open"][data-side="bottom"] {
     animation-name: slideUpAndFade-bAwQJS;
   }
 
-  .content-UK9iLF[data-state="open"][data-side="left"] {
+  :is(.content-UK9iLF, .infonomic-datepicker-content)[data-state="open"][data-side="left"] {
     animation-name: slideRightAndFade-o0jl7q;
   }
 
-  :is(.dark-A_8H6V, [data-theme="dark"]) .content-UK9iLF {
+  :is(.dark, [data-theme="dark"]) .content-UK9iLF {
     background: var(--canvas-800);
   }
 
-  .content-components-jcG649 {
+  :is(.content-components-jcG649, .infonomic-datepicker-content-components) {
     gap: var(--spacing-8);
     width: 100%;
     display: flex;
   }
 
-  .status-and-actions-Px_b57 {
+  :is(.status-and-actions-Px_b57, .infonomic-datepicker-status-and-actions) {
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
@@ -62,7 +63,7 @@
     display: flex;
   }
 
-  .content-status-XRGKXg {
+  :is(.content-status-XRGKXg, .infonomic-datepicker-content-status) {
     padding-left: var(--spacing-16);
     padding-right: var(--spacing-8);
     font-size: var(--font-size-sm);
@@ -72,7 +73,7 @@
     display: flex;
   }
 
-  .content-actions-GVU14S {
+  :is(.content-actions-GVU14S, .infonomic-datepicker-content-actions) {
     margin-top: var(--spacing-12);
     padding-left: var(--spacing-16);
     padding-right: var(--spacing-6);
@@ -83,15 +84,15 @@
     display: flex;
   }
 
-  .content-actions-button-YCN1ho {
+  :is(.content-actions-button-YCN1ho, .infonomic-datepicker-content-actions-button) {
     --ring-color: var(--violet-7);
   }
 
-  .arrow-mhGcHb {
+  :is(.arrow-mhGcHb, .infonomic-datepicker-arrow) {
     fill: var(--gray-50);
   }
 
-  .close-bJApom {
+  :is(.close-bJApom, .infonomic-datepicker-close) {
     all: unset;
     width: 25px;
     height: 25px;
@@ -106,25 +107,25 @@
     right: 5px;
   }
 
-  .close-bJApom:hover {
+  :is(.close-bJApom, .infonomic-datepicker-close):hover {
     background-color: var(--primary-400);
   }
 
-  .close-bJApom:focus {
+  :is(.close-bJApom, .infonomic-datepicker-close):focus {
     box-shadow: 0 0 0 2px var(--primary-600);
   }
 
-  .time-picker-container-sVEGKe {
+  :is(.time-picker-container-sVEGKe, .infonomic-datepicker-time-picker-container) {
     width: 80px;
     margin: .6rem .5rem 1rem 0;
   }
 
-  .time-picker-scroll-area-q5TiRD {
+  :is(.time-picker-scroll-area-q5TiRD, .infonomic-datepicker-time-picker-scroll-area) {
     height: 280px;
     padding-right: var(--spacing-16);
   }
 
-  .time-picker-Xhertk {
+  :is(.time-picker-Xhertk, .infonomic-datepicker-time-picker) {
     padding-left: var(--spacing-4);
     padding-right: var(--spacing-4);
     flex-direction: column;
@@ -132,7 +133,7 @@
     display: flex;
   }
 
-  .time-picker-button-WA4IUz {
+  :is(.time-picker-button-WA4IUz, .infonomic-datepicker-time-picker-button) {
     width: 100%;
   }
 

package/dist/widgets/drawer/drawer-container.js

@@ -6,7 +6,7 @@ function DrawerContainer({ ref, children, className, ...rest }) {
     return /*#__PURE__*/ jsx("div", {
         ref: ref,
         role: "dialog",
-        className: classnames(drawer_module["drawer-container"], className),
+        className: classnames('infonomic-drawer-container', drawer_module["drawer-container"], className),
         ...rest,
         children: children
     });

package/dist/widgets/drawer/drawer-content.js

@@ -6,7 +6,7 @@ function DrawerContent({ ref, children, className, ...rest }) {
     return /*#__PURE__*/ jsx("div", {
         ref: ref,
         ...rest,
-        className: classnames(drawer_module["drawer-content"], className),
+        className: classnames('infonomic-drawer-content', drawer_module["drawer-content"], className),
         children: children
     });
 }

package/dist/widgets/drawer/drawer-header.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import drawer_module from "./drawer.module.js";
 const drawer_header_DrawerHeader = function({ ref, children, className, ...rest }) {
-    const classes = classnames(drawer_module["drawer-header"], className);
+    const classes = classnames('infonomic-drawer-header', drawer_module["drawer-header"], className);
     return /*#__PURE__*/ jsx("div", {
         style: {
             overflowWrap: 'anywhere'

package/dist/widgets/drawer/drawer-top-actions.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import drawer_module from "./drawer.module.js";
 const DrawerTopActions = function({ ref, children, className, ...rest }) {
-    const classes = classnames(drawer_module["drawer-top-actions"], className);
+    const classes = classnames('infonomic-drawer-top-actions', drawer_module["drawer-top-actions"], className);
     return /*#__PURE__*/ jsx("div", {
         style: {
             whiteSpace: 'nowrap'

package/dist/widgets/drawer/drawer-wrapper.js

@@ -21,7 +21,7 @@ function DrawerWrapper({ className, children, onEscapeKey, ...rest }) {
     return /*#__PURE__*/ jsx(m.div, {
         ref: focusTrapRef,
         ...rest,
-        className: classnames(drawer_module["drawer-wrapper"], className),
+        className: classnames('infonomic-drawer-wrapper', drawer_module["drawer-wrapper"], className),
         initial: {
             opacity: 0
         },

package/dist/widgets/drawer/drawer.module.css

@@ -1,7 +1,9 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
 
 @layer infonomic-components {
-  .drawer-wrapper {
+
+  .drawer-wrapper,
+  :global(.infonomic-drawer-wrapper) {
     position: fixed;
     display: flex;
     flex-direction: column;
@@ -14,7 +16,8 @@
     opacity: 1;
   }
 
-  .drawer-container {
+  .drawer-container,
+  :global(.infonomic-drawer-container) {
     position: absolute;
     right: 0;
     height: 100%;
@@ -23,50 +26,64 @@
     z-index: inherit;
   }
 
-  .drawer-container[aria-hidden="false"] {
+  .drawer-container[aria-hidden="false"],
+  :global(.infonomic-drawer-container[aria-hidden="false"]) {
     animation: slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
   }
 
   .drawer-depth-0.drawer-medium .drawer-container,
-  .drawer-depth-0.drawer-wide .drawer-container {
+  .drawer-depth-0.drawer-wide .drawer-container,
+  :global(.infonomic-drawer-depth-0.drawer-medium .drawer-container),
+  :global(.infonomic-drawer-depth-0.drawer-wide .drawer-container) {
     width: 90%;
   }
 
   .drawer-depth-1.drawer-medium .drawer-container,
-  .drawer-depth-1.drawer-wide .drawer-container {
+  .drawer-depth-1.drawer-wide .drawer-container,
+  :global(.infonomic-drawer-depth-1.drawer-medium .drawer-container),
+  :global(.infonomic-drawer-depth-1.drawer-wide .drawer-container) {
     width: 88%;
   }
 
   .drawer-depth-2.drawer- .drawer-container,
-  .drawer-depth-2.drawer-wide .drawer-container {
+  .drawer-depth-2.drawer-wide .drawer-container,
+  :global(.infonomic-drawer-depth-2.drawer-medium .drawer-container),
+  :global(.infonomic-drawer-depth-2.drawer-wide .drawer-container) {
     width: 86%;
   }
 
   @media (min-width: 48rem) {
-    .drawer-depth-0.drawer-medium .drawer-container {
+
+    .drawer-depth-0.drawer-medium .drawer-container,
+    :global(.infonomic-drawer-depth-0.drawer-medium .drawer-container) {
       width: 600px;
     }
 
-    .drawer-depth-1.drawer-medium .drawer-container {
+    .drawer-depth-1.drawer-medium .drawer-container,
+    :global(.infonomic-drawer-depth-1.drawer-medium .drawer-container) {
       width: 580px;
     }
 
-    .drawer-depth-2.drawer- .drawer-container {
+    .drawer-depth-2.drawer- .drawer-container,
+    :global(.infonomic-drawer-depth-2.drawer-medium .drawer-container) {
       width: 560px;
     }
   }
 
-  .drawer-narrow .drawer-container {
+  .drawer-narrow .drawer-container,
+  :global(.infonomic-drawer-narrow .infonomic-drawer-container) {
     width: calc(100% - 32px);
     max-width: 400px;
   }
 
-  .drawer-container[aria-hidden="true"] {
+  .drawer-container[aria-hidden="true"],
+  :global(.infonomic-drawer-container[aria-hidden="true"]) {
     transform: translateX(100%);
     opacity: 0;
   }
 
-  .drawer-top-actions {
+  .drawer-top-actions,
+  :global(.infonomic-drawer-top-actions) {
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -77,7 +94,8 @@
     max-width: 100%;
   }
 
-  .drawer-header {
+  .drawer-header,
+  :global(.infonomic-drawer-header) {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -89,11 +107,14 @@
   }
 
   .drawer-header h2,
-  .drawer-header h3 {
+  .drawer-header h3,
+  :global(.infonomic-drawer-header h2),
+  :global(.infonomic-drawer-header h3) {
     margin: 0;
   }
 
-  .drawer-content {
+  .drawer-content,
+  :global(.infonomic-drawer-content) {
     padding: var(--spacing-12);
   }
 
@@ -108,4 +129,4 @@
       opacity: 1;
     }
   }
-}
+}

package/dist/widgets/drawer/drawer_module.css

@@ -1,7 +1,7 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme;
 
 @layer infonomic-components {
-  .drawer-wrapper-q0hBzd {
+  :is(.drawer-wrapper-q0hBzd, .infonomic-drawer-wrapper) {
     z-index: 30;
     opacity: 1;
     flex-direction: column;
@@ -11,7 +11,7 @@
     inset: 0;
   }
 
-  .drawer-container-ssf1qn {
+  :is(.drawer-container-ssf1qn, .infonomic-drawer-container) {
     background-color: var(--surface-panel);
     height: 100%;
     box-shadow: var(--shadow-md);
@@ -24,30 +24,70 @@
     animation: .15s cubic-bezier(.16, 1, .3, 1) slideIn-dDQJvD;
   }
 
+  .infonomic-drawer-container[aria-hidden="false"] {
+    animation: .15s cubic-bezier(.16, 1, .3, 1) slideIn-dDQJvD;
+  }
+
   .drawer-depth-0-VYE9YM.drawer-medium-ZFbdby .drawer-container-ssf1qn, .drawer-depth-0-VYE9YM.drawer-wide-nXbxPs .drawer-container-ssf1qn {
     width: 90%;
   }
 
+  .infonomic-drawer-depth-0.drawer-medium .drawer-container {
+    width: 90%;
+  }
+
+  .infonomic-drawer-depth-0.drawer-wide .drawer-container {
+    width: 90%;
+  }
+
   .drawer-depth-1-2CzoWM.drawer-medium-ZFbdby .drawer-container-ssf1qn, .drawer-depth-1-2CzoWM.drawer-wide-nXbxPs .drawer-container-ssf1qn {
     width: 88%;
   }
 
+  .infonomic-drawer-depth-1.drawer-medium .drawer-container {
+    width: 88%;
+  }
+
+  .infonomic-drawer-depth-1.drawer-wide .drawer-container {
+    width: 88%;
+  }
+
   .drawer-depth-2-eR43PT.drawer--tSM0mV .drawer-container-ssf1qn, .drawer-depth-2-eR43PT.drawer-wide-nXbxPs .drawer-container-ssf1qn {
     width: 86%;
   }
 
+  .infonomic-drawer-depth-2.drawer-medium .drawer-container {
+    width: 86%;
+  }
+
+  .infonomic-drawer-depth-2.drawer-wide .drawer-container {
+    width: 86%;
+  }
+
   @media (min-width: 48rem) {
     .drawer-depth-0-VYE9YM.drawer-medium-ZFbdby .drawer-container-ssf1qn {
       width: 600px;
     }
 
+    .infonomic-drawer-depth-0.drawer-medium .drawer-container {
+      width: 600px;
+    }
+
     .drawer-depth-1-2CzoWM.drawer-medium-ZFbdby .drawer-container-ssf1qn {
       width: 580px;
     }
 
+    .infonomic-drawer-depth-1.drawer-medium .drawer-container {
+      width: 580px;
+    }
+
     .drawer-depth-2-eR43PT.drawer--tSM0mV .drawer-container-ssf1qn {
       width: 560px;
     }
+
+    .infonomic-drawer-depth-2.drawer-medium .drawer-container {
+      width: 560px;
+    }
   }
 
   .drawer-narrow-lsLgHp .drawer-container-ssf1qn {
@@ -55,12 +95,22 @@
     max-width: 400px;
   }
 
+  .infonomic-drawer-narrow .infonomic-drawer-container {
+    width: calc(100% - 32px);
+    max-width: 400px;
+  }
+
   .drawer-container-ssf1qn[aria-hidden="true"] {
     opacity: 0;
     transform: translateX(100%);
   }
 
-  .drawer-top-actions-FiHu4U {
+  .infonomic-drawer-container[aria-hidden="true"] {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+
+  :is(.drawer-top-actions-FiHu4U, .infonomic-drawer-top-actions) {
     padding-top: var(--spacing-12);
     padding-left: var(--spacing-12);
     padding-right: var(--spacing-12);
@@ -71,7 +121,7 @@
     display: flex;
   }
 
-  .drawer-header-BtfxvF {
+  :is(.drawer-header-BtfxvF, .infonomic-drawer-header) {
     justify-content: space-between;
     align-items: center;
     gap: var(--gap-3);
@@ -86,7 +136,15 @@
     margin: 0;
   }
 
-  .drawer-content-QQqzOR {
+  .infonomic-drawer-header h2 {
+    margin: 0;
+  }
+
+  .infonomic-drawer-header h3 {
+    margin: 0;
+  }
+
+  :is(.drawer-content-QQqzOR, .infonomic-drawer-content) {
     padding: var(--spacing-12);
   }
 

package/dist/widgets/modal/modal-actions.js

@@ -6,7 +6,7 @@ const modal_actions_ModalActions = function({ ref, children, className, ...rest
     return /*#__PURE__*/ jsx("div", {
         ref: ref,
         ...rest,
-        className: classnames(modal_module["modal-actions"], className),
+        className: classnames('infonomic-modal-actions', modal_module["modal-actions"], className),
         children: children
     });
 };

package/dist/widgets/modal/modal-container.js

@@ -5,7 +5,7 @@ import modal_module from "./modal.module.js";
 const modal_container_ModalContainer = function({ ref, children, className, ...rest }) {
     return /*#__PURE__*/ jsx("div", {
         ref: ref,
-        className: classnames(modal_module["modal-container"], className),
+        className: classnames('infonomic-modal-container', modal_module["modal-container"], className),
         ...rest,
         children: children
     });

package/dist/widgets/modal/modal-content.js

@@ -6,7 +6,7 @@ const modal_content_ModalContent = function({ ref, children, className, ...rest
     return /*#__PURE__*/ jsx("div", {
         ref: ref,
         ...rest,
-        className: classnames(modal_module["modal-content"], className),
+        className: classnames('infonomic-modal-content', modal_module["modal-content"], className),
         children: children
     });
 };

package/dist/widgets/modal/modal-header.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import modal_module from "./modal.module.js";
 const modal_header_ModalHeader = function({ ref, children, className, ...rest }) {
-    const classes = classnames(modal_module["modal-header"], 'prose', className);
+    const classes = classnames('infonomic-modal-header', modal_module["modal-header"], 'prose', className);
     return /*#__PURE__*/ jsx("div", {
         style: {
             overflowWrap: 'anywhere'