@stack-spot/portal-layout 0.0.64 → 1.0.0-dev.1768482785050

package/dist/layout.css

@@ -27,7 +27,7 @@ body {
   display: flex;
   flex-direction: column;
   flex: 1;
-  background: var(--light-400);
+  background: var(--light-300);
   font: var(--font);
   color: var(--light-contrastText);
 }
@@ -98,7 +98,12 @@ body {
   left: calc(var(--menu-sections-width) + var(--menu-content-width));
 }
 
-#layout.no-menu-sections:not(.menu-content-visible) #page {
+#layout.menu-inner-content-visible #page {
+  left: calc(var(--menu-sections-width) + calc(var(--menu-content-width) * 2));
+}
+
+#layout.no-menu-sections:not(.menu-content-visible) #page,
+#layout.no-menu-sections:not(.menu-inner-content-visible) #page {
   border-top-left-radius: 0;
 }
 
@@ -119,16 +124,12 @@ body {
   bottom: 0;
 }
 
-#menu svg {
-  fill: var(--light-contrastText);
-}
-
 #menu .item-row-group svg {
   fill: var(--light-700);
 }
 
-#menu .toggle .expand {
-  fill: var(--primary-500);
+#menu .hidden-scroll-bars {
+  height: 100%;
 }
 
 #menu .toggle .expand,
@@ -155,42 +156,132 @@ body {
   display: none;
 }
 
+#layout.menu-compact .section-badge {
+  display: none;
+}
+
+#layout.menu-compact .section-icon-with-badge {
+  display: block;
+}
+
+#layout.menu-compact .custom-element {
+  display: none;
+}
+
+#layout.menu-compact .custom-element-icon {
+  display: block;
+}
+
+#layout:not(.menu-compact) > .react-tooltip {
+  display: none;
+}
+
 #layout:not(.menu-compact) .section-label {
   display: block;
 }
 
+#layout:not(.menu-compact) .section-badge {
+  display: block;
+}
+
+#layout:not(.menu-compact) .section-icon-with-badge {
+  display: none;
+}
+
+#layout:not(.menu-compact) .custom-element-icon {
+  display: block;
+}
+
+#layout:not(.menu-compact) .custom-element-icon {
+  display: none;
+}
+
+
 #menuSections {
   width: var(--menu-sections-width);
   display: flex;
   flex-direction: column;
-  padding: 0 0 10px;
+  padding: 0;
   justify-content: space-between;
   background-color: var(--light-400);
   position: relative;
   border-right: 1px solid var(--light-300);
   border-top: 1px solid var(--light-300);
+  min-height: 100%;
+  box-sizing: border-box;
 }
 
 #menuSections .sections-footer {
   padding: 16px;
+  padding-left: 8px;
 }
 
 #menuSections .toggle,
 #menuSections > ul li a {
   background: transparent;
   border: none;
-  outline: none;
   width: var(--menu-sections-width);
-  height: var(--menu-item-height);
   display: flex;
   flex-direction: column;
   gap: 10px;
   align-items: flex-start;
   justify-content: center;
-  transition: background-color 0.2s;
   cursor: pointer;
   position: relative;
   z-index: 2;
+  border-right: 1px solid var(--light-300);
+}
+
+#menuSections .toggle.sections-footer {
+  height: auto;
+}
+
+.gradient-svg {
+  width: 100px;
+  height: 100px;
+}
+
+.gradient-svg path {
+  fill: url(#gradient);
+}
+
+#menuSections .toggle .gradient {
+  background: linear-gradient(to right, #FF9900, #FF6633);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.rotate-icon {
+  animation: rotate 2s linear forwards;
+  animation-delay: 2s;
+}
+
+@keyframes growShrink {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.grow-shrink {
+  animation: growShrink 2s ease-in-out forwards;
 }
 
 #menuSections > ul li a:before {
@@ -205,7 +296,6 @@ body {
 
 #menuSections > ul li.active a {
   background-color: var(--light-500);
-  border-right: 1px solid var(--light-300);
 }
 
 #menuSections > ul li.active a:before {
@@ -214,11 +304,9 @@ body {
 }
 
 #menuSections .toggle:hover,
-#menuSections > ul li a:hover,
-#menuSections .toggle:focus,
-#menuSections > ul li a:focus {
+#menuSections > ul li a:hover
+{
   background: var(--light-500);
-  border-right: 1px solid var(--light-300);
 }
 
 #menuSections > ul li:not(.active) a:hover:before {
@@ -230,6 +318,33 @@ body {
   position: relative;
 }
 
+#layout.menu-compact #menuSections {
+  .section-icon {
+    display: flex;
+    justify-content: center;
+    flex: 1;
+  }
+  .section-text {
+    display: none;
+  }
+  .chevron-icon-box {
+    display: none;
+  }
+  .item-row.hidden-when-collapsed {
+    display: none;
+    & + ul {
+      visibility: visible;
+      li a  {
+        height: 56px;
+      }
+    }
+  }
+  .sections-footer {
+    padding: 16px 0;
+    align-items: center;
+  }
+}
+
 #menuContentOverlay {
   width: var(--menu-overlay-width);
   position: fixed;
@@ -245,6 +360,7 @@ body {
   pointer-events: none;
   z-index: 1;
   transition: opacity 0.3s;
+  overflow-y: auto;
 }
 
 #menuContentOverlay.visible {
@@ -252,12 +368,8 @@ body {
   pointer-events: auto;
 }
 
-#menuContentOverlay > div {
-  flex: 1;
-  overflow: auto;
-}
-
-#menuContent {
+#menuContent,
+#menuInnerContent {
   width: var(--menu-content-width);
   transition: left ease-out var(--menu-animation-duration);
   background-color: var(--light-400);
@@ -269,6 +381,21 @@ body {
   border-top: 1px solid var(--light-300);
 }
 
+#menuInnerContent {
+  left: var(--menu-content-width);
+  border-left: 1px solid var(--light-300);
+}
+
+#menuContent .goBackLink,
+#menuInnerContent .goBackLink {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin: 20px;
+  margin-bottom: 16px;
+  gap: 6px;
+}
+
 #layout.menu-content-visible #menuContent {
   left: var(--menu-sections-width);
 }
@@ -297,7 +424,7 @@ body {
   pointer-events: auto;
 }
 
-#modal {
+#modal,  #backdrop .modal-box {
   transform: scale(0);
   display: flex;
   flex-direction: column;
@@ -305,27 +432,32 @@ body {
   width: calc(100% - 60px);
 }
 
-#modal.fit-content {
+#modal.fit-content, #backdrop .modal-box.fit-content {
   width: auto;
 }
 
-#modal.large {
+#modal.full, #backdrop .modal-box.full {
+  width: 100%;
+  height: 100%;
+}
+
+#modal.large, #backdrop .modal-box.large {
   max-width: 1000px;
 }
 
-#modal.medium {
+#modal.medium, #backdrop .modal-box.medium {
   max-width: 800px;
 }
 
-#modal.small {
+#modal.small, #backdrop .modal-box.small {
   max-width: 600px;
 }
 
-#modal.visible {
+#modal.visible, #backdrop.visible .modal-box {
   transform: scale(1);
 }
 
-#rightPanel {
+#rightPanel, #backdrop .right-panel-box {
   position: fixed;
   display: flex;
   flex-direction: column;
@@ -338,25 +470,45 @@ body {
   border-bottom-left-radius: 1rem;
 }
 
-#rightPanel.small {
+#rightPanel.small, #backdrop .right-panel-box.small {
   right: -400px;
   width: 400px;
 }
 
-#rightPanel.medium {
+#rightPanel.medium, #backdrop .right-panel-box.medium {
   right: -600px;
   width: 600px;
 }
 
-#rightPanel.large {
+#rightPanel.large, #backdrop .right-panel-box.large {
   right: -800px;
   width: 800px;
 }
 
-#rightPanel.visible {
+#rightPanel.extra-large, #backdrop .right-panel-box.extra-large {
+  right: -800px;
+  width: 70%;
+}
+
+#rightPanel.visible, #backdrop.visible .right-panel-box {
   right: 0;
 }
 
+#modal .modal-instance,
+#rightPanel .right-panel-instance {
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+  display: none;
+  &.active {
+    display: flex;
+  }
+  &.disabled {
+    pointer-events: none;
+    opacity: 0.7;
+  }
+}
+
 #bottomPanel {
   position: fixed;
   display: flex;
@@ -398,8 +550,11 @@ body {
 }
 
 /* Overlay: toaster */
+.container-toaster {
+  margin-top: var(--header-height);
+}
 
-.main-toaster h1 {
+.main-toaster h2 {
   font-size: 14px;
   font-weight: 500;
   margin: 0 0 8px 0;

package/dist/svg/StarFillWithGradient.d.ts

@@ -0,0 +1,6 @@
+export declare const StarFillWithGradient: ({ className, id, style }: {
+    className?: string;
+    id?: string;
+    style?: React.CSSProperties;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StarFillWithGradient.d.ts.map

package/dist/svg/StarFillWithGradient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StarFillWithGradient.d.ts","sourceRoot":"","sources":["../../src/svg/StarFillWithGradient.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,GAAI,0BAA0B;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAAE,4CAU9H,CAAA"}

package/dist/svg/StarFillWithGradient.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable max-len */
+export const StarFillWithGradient = ({ className, id, style }) => (_jsxs("svg", { viewBox: "0 0 512 512", className: className, id: id, style: style, width: "16", height: "16", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("defs", { children: _jsxs("linearGradient", { id: "gradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [_jsx("stop", { offset: "0%", style: { 'stopColor': '#FF9900', 'stopOpacity': 1 } }), _jsx("stop", { offset: "100%", style: { 'stopColor': '#FF6633', 'stopOpacity': 1 } })] }) }), _jsx("path", { d: "M226.885 21.9523C231.432 9.88404 242.98 1.91992 255.85 1.91992C268.719 1.91992 280.268 9.88408 284.814 21.9523C284.863 22.0812 284.91 22.2105 284.956 22.3403L335.667 165.876L478.048 165.876H478.049C490.986 165.876 502.581 173.922 507.079 186.08C511.579 198.245 508.006 211.912 498.152 220.324C498.075 220.39 497.997 220.456 497.918 220.521L377.676 320.039L428.087 471.216L428.091 471.226C432.349 484.019 427.824 498.078 416.935 505.998C406.055 513.912 391.305 513.892 380.445 505.949L380.435 505.941L255.825 414.67L131.151 505.944L131.075 506C131.045 506.021 131.016 506.042 130.987 506.063C120.124 513.848 105.488 513.783 94.6943 505.902C83.8927 498.015 79.374 484.073 83.5272 471.34C83.5408 471.299 83.5545 471.257 83.5683 471.216L133.979 320.041L13.7166 220.522C13.6378 220.457 13.5595 220.391 13.4817 220.324C3.62771 211.912 0.054518 198.245 4.55486 186.08C9.05287 173.922 20.6475 165.876 33.5842 165.876H33.5857L175.992 165.876L226.745 22.3356C226.791 22.2074 226.837 22.0796 226.885 21.9523Z" })] }));
+//# sourceMappingURL=StarFillWithGradient.js.map

package/dist/svg/StarFillWithGradient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StarFillWithGradient.js","sourceRoot":"","sources":["../../src/svg/StarFillWithGradient.tsx"],"names":[],"mappings":";AAAA,4BAA4B;AAE5B,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,KAAK,EAAoE,EAAE,EAAE,CAAC,CAClI,eAAK,OAAO,EAAC,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAG,KAAK,EAAC,4BAA4B,aACjI,yBACE,0BAAgB,EAAE,EAAC,UAAU,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,MAAM,aAC/D,eAAM,MAAM,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,WAAW,EAAC,SAAS,EAAE,aAAa,EAAE,CAAC,EAAE,GAAG,EACvE,eAAM,MAAM,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,WAAW,EAAC,SAAS,EAAE,aAAa,EAAE,CAAC,EAAE,GAAG,IAC1D,GACZ,EACP,eAAM,CAAC,EAAC,u+BAAu+B,GAAG,IAC9+B,CACP,CAAA"}

package/dist/toaster.d.ts

@@ -1,23 +1,69 @@
-/// <reference types="react" />
 import 'react-toastify/dist/ReactToastify.css';
+import { ToasterAction } from './components/Toaster.js';
 type ToastType = 'error' | 'success' | 'warning' | 'info';
-interface BaseProps {
+interface BaseOptions {
+    /**
+     * An identifier for the toaster, if not provided, `Math.random()` will be used.
+     *
+     * The id can be used to programmatically control the toaster.
+     */
+    id?: number | string;
+    /**
+     * The message to show.
+     * Can be either a string or a React element.
+     */
+    message: React.ReactNode;
+    /**
+     * Level/severity of this message.
+     * @default 'info'
+     */
     type?: ToastType;
     /**
      * Seconds until auto-close or false to not auto-close.
-     * @default 3 for success toast and 10 for the others
+     * @default 3s for success toast and 10s for the others
      */
     autoClose?: number | false;
+    /**
+     * If true, `message` must be a React Element and none of the default toaster UI is rendered (title, icon and close button).
+     * @default false
+     */
+    custom?: boolean;
+    /**
+     * Whether or not to close the toaster when the user clicks it.
+     * @default false
+     */
+    closeOnClick?: boolean;
 }
-interface BasicMessageProps extends BaseProps {
-    message: string;
+export interface DefaultToasterOptions extends BaseOptions {
+    /**
+     * The title of the toaster.
+     */
     title?: string;
+    /**
+     * A function to call when the user clicks the toaster. By default, it closes the toaster.
+     */
     onClick?: () => void;
+    /**
+     * A set of buttons (or links/anchors) to show after the message.
+     */
+    actions?: ToasterAction[];
+    custom?: false;
 }
-interface RichMessageProps extends BaseProps {
-    content: React.ReactElement;
+export interface CustomToasterOptions extends BaseOptions {
+    /**
+     * The whole content to render inside the toaster.
+     */
+    message: React.ReactElement;
+    custom: true;
+    /**
+     * A close button to render on the top right corner of the toaster. If not provided, a close button won't be rendered.
+     */
+    closeButton?: React.ReactElement;
 }
-type Props = BasicMessageProps | RichMessageProps;
-export declare function showToaster({ type, autoClose, ...props }: Props): void;
+export type ToasterOptions = DefaultToasterOptions | CustomToasterOptions | React.ReactNode;
+export declare function showToaster(defaultToasterConfig: DefaultToasterOptions): number | string;
+export declare function showToaster(customToasterConfig: CustomToasterOptions): number | string;
+export declare function showToaster(message: React.ReactNode): number | string;
+export declare function closeReactToaster(id: number | string): void;
 export {};
 //# sourceMappingURL=toaster.d.ts.map

package/dist/toaster.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toaster.d.ts","sourceRoot":"","sources":["../src/toaster.tsx"],"names":[],"mappings":";AAGA,OAAO,uCAAuC,CAAA;AAE9C,KAAK,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAA;AAEzD,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAC5B;AAED,UAAU,iBAAkB,SAAQ,SAAS;IAC3C,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,UAAU,gBAAiB,SAAQ,SAAS;IAC1C,OAAO,EAAE,KAAK,CAAC,YAAY,CAAC;CAC7B;AAED,KAAK,KAAK,GAAG,iBAAiB,GAAG,gBAAgB,CAAA;AAyBjD,wBAAgB,WAAW,CAAC,EAAE,IAAa,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,QAwBxE"}
+{"version":3,"file":"toaster.d.ts","sourceRoot":"","sources":["../src/toaster.tsx"],"names":[],"mappings":"AAIA,OAAO,uCAAuC,CAAA;AAC9C,OAAO,EAAE,aAAa,EAAkB,MAAM,sBAAsB,CAAA;AAEpE,KAAK,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAA;AAEzD,UAAU,WAAW;IACnB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB;AAED,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,YAAY,CAAC;IAC5B,MAAM,EAAE,IAAI,CAAC;IACb;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAClC;AAED,MAAM,MAAM,cAAc,GAAG,qBAAqB,GAAG,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAAA;AAyB3F,wBAAgB,WAAW,CAAC,oBAAoB,EAAE,qBAAqB,GAAG,MAAM,GAAG,MAAM,CAAA;AACzF,wBAAgB,WAAW,CAAC,mBAAmB,EAAE,oBAAoB,GAAG,MAAM,GAAG,MAAM,CAAA;AACvF,wBAAgB,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;AAqCtE,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,QAEpD"}

package/dist/toaster.js

@@ -1,8 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { IconBox } from '@citric/core';
 import { CheckCircleFill, ExclamationCircleFill, ExclamationTriangleFill, InfoCircleFill } from '@citric/icons';
+import { translate } from '@stack-spot/portal-translate';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import { ToasterContent } from './components/Toaster.js';
 const toasterConfig = {
     error: {
         element: _jsx(ExclamationCircleFill, {}),
@@ -25,22 +27,48 @@ const toasterConfig = {
         duration: 10,
     },
 };
-export function showToaster({ type = 'info', autoClose, ...props }) {
+export function showToaster(options) {
+    const isToasterConfig = options && typeof options === 'object' && 'message' in options;
+    const { type = 'info', autoClose, ...opts } = isToasterConfig
+        ? options
+        : { message: options };
     const config = toasterConfig[type];
+    const id = opts.id ?? Math.random();
     const closeTime = autoClose ? autoClose : config.duration;
     const bg = `var(--${config.color}-500)`;
     const bgDark = `var(--${config.color}-600)`;
     const fg = `var(--${config.color}-contrastText)`;
-    toast('message' in props
-        ? _jsxs("div", { onClick: props.onClick, children: [_jsx("h1", { style: { textTransform: 'capitalize' }, children: props.title ?? type }), _jsx("p", { children: props.message })] })
-        : props.content, {
+    toast(opts.custom
+        ? opts.message
+        : _jsx(ToasterContent, { ...opts, id: id, title: opts.title ?? translate(dictionary)[type] }), {
+        toastId: id,
         type,
         autoClose: autoClose === false ? false : closeTime * 1000,
         className: 'main-toaster',
         style: { backgroundColor: bg, color: fg },
         progressStyle: { background: bgDark },
         bodyClassName: 'toast-body',
-        icon: 'message' in props ? () => (_jsx(IconBox, { colorIcon: `${config.color}.contrastText`, size: "xs", children: config.element })) : undefined,
+        icon: opts.custom ? false : () => (_jsx(IconBox, { colorIcon: `${config.color}.contrastText`, size: "xs", children: config.element })),
+        closeOnClick: opts.closeOnClick ?? false,
+        closeButton: opts.custom ? (opts.closeButton ?? false) : undefined,
     });
+    return id;
 }
+export function closeReactToaster(id) {
+    toast.dismiss(id);
+}
+const dictionary = {
+    en: {
+        success: 'Success',
+        error: 'Error',
+        info: 'Info',
+        warning: 'Warning',
+    },
+    pt: {
+        success: 'Sucesso',
+        error: 'Erro',
+        info: 'Info',
+        warning: 'Atenção',
+    },
+};
 //# sourceMappingURL=toaster.js.map

package/dist/toaster.js.map

@@ -1 +1 @@
-{"version":3,"file":"toaster.js","sourceRoot":"","sources":["../src/toaster.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAiC,MAAM,cAAc,CAAA;AACrE,OAAO,EAAE,eAAe,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC/G,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,uCAAuC,CAAA;AAyB9C,MAAM,aAAa,GAAwF;IACzG,KAAK,EAAE;QACL,OAAO,EAAE,KAAC,qBAAqB,KAAG;QAClC,KAAK,EAAE,QAAQ;QACf,QAAQ,EAAE,EAAE;KACb;IACD,OAAO,EAAE;QACP,OAAO,EAAE,KAAC,eAAe,KAAG;QAC5B,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,CAAC;KACZ;IACD,OAAO,EAAE;QACP,OAAO,EAAE,KAAC,uBAAuB,KAAG;QACpC,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,EAAE;KACb;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,KAAC,cAAc,KAAG;QAC3B,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,EAAE;KACb;CACF,CAAA;AAED,MAAM,UAAU,WAAW,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAS;IACvE,MAAM,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC,CAAA;IAClC,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAA;IACzD,MAAM,EAAE,GAAG,SAAS,MAAM,CAAC,KAAK,OAAO,CAAA;IACvC,MAAM,MAAM,GAAG,SAAS,MAAM,CAAC,KAAK,OAAO,CAAA;IAC3C,MAAM,EAAE,GAAG,SAAS,MAAM,CAAC,KAAK,gBAAgB,CAAA;IAChD,KAAK,CACH,SAAS,IAAI,KAAK;QAChB,CAAC,CAAC,eAAK,OAAO,EAAE,KAAK,CAAC,OAAO,aAAE,aAAI,KAAK,EAAE,EAAE,aAAa,EAAE,YAAY,EAAE,YAAG,KAAK,CAAC,KAAK,IAAI,IAAI,GAAM,EAAA,sBAAI,KAAK,CAAC,OAAO,GAAK,IAAM;QACjI,CAAC,CAAC,KAAK,CAAC,OAAO,EACjB;QACE,IAAI;QACJ,SAAS,EAAE,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,GAAG,IAAI;QACzD,SAAS,EAAE,cAAc;QACzB,KAAK,EAAE,EAAE,eAAe,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;QACzC,aAAa,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE;QACrC,aAAa,EAAE,YAAY;QAC3B,IAAI,EAAE,SAAS,IAAI,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAC/B,KAAC,OAAO,IAAC,SAAS,EAAE,GAAG,MAAM,CAAC,KAAK,eAAgD,EAAE,IAAI,EAAC,IAAI,YAC3F,MAAM,CAAC,OAAO,GACP,CACX,CAAC,CAAC,CAAC,SAAS;KACd,CACF,CAAA;AACH,CAAC"}
+{"version":3,"file":"toaster.js","sourceRoot":"","sources":["../src/toaster.tsx"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -0,0 +1,5 @@
+export type PortalAcronym = 'EDP' | 'AI' | 'HUB' | 'CS' | 'ACCOUNT';
+export type RightPanelSize = 'small' | 'medium' | 'large' | 'extra-large';
+export type ModalSize = RightPanelSize | 'fit-content';
+export type CustomModalSize = ModalSize | 'full';
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,IAAI,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAA;AACnE,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,CAAA;AACzE,MAAM,MAAM,SAAS,GAAG,cAAc,GAAG,aAAa,CAAA;AACtD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,MAAM,CAAA"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/dist/utils.d.ts

@@ -1,80 +1,17 @@
-export declare function valueOfLayoutVar(varname: string): string;
-/**
- * Important for accessibility.
- *
- * Makes it so we focus the next focusable element in the DOM hierarchy, disregarding the element passed as parameter and its children.
- *
- * If there's no next focusable element, the first focusable of the page will be focused. If the page doesn't contain any focusable
- * element, nothing happens.
- *
- * @param current the reference element to focus the next. If not provided, will be the currently active element.
- */
-export declare function focusNextIgnoringChildren(current?: HTMLElement | null): void;
-type TagPriority = 'a' | 'button' | 'input' | 'textarea' | 'select' | 'other';
-type TagPriorityElement = TagPriority | TagPriority[];
-interface FocusOptions {
-    /**
-     * Instead of focusing the first element overall, focus the first according to this list of priorities.
-     */
-    priority?: TagPriorityElement[];
-    /**
-     * Ignores any element that matches this query selector.
-     */
-    ignore?: string;
-}
-/**
- * Checks if an element can receive focus.
- *
- * Elements can receive focus only if:
- * - they exist;
- * - they're visible;
- * - they're not disabled;
- * - they are a focusable tag name or have a positive tab index;
- * - they don't have a negative tab index.
- * @param element the element to check.
- * @returns true if the element is focusable, false otherwise.
- */
-export declare function isFocusable(element?: Element | null): boolean;
-/**
- * Focus the element passed as parameter if it can receive focus. Otherwise, decides on another element to focus based on the HTML tree
- * and accessibility attributes.
- *
- * Decision making:
- * - If the element is focusable, focus it.
- * - If the element is not focusable, check if it has an id and if another element controls it (aria-controls).
- * - If the element is controlled by another, try to focus the controller, based in this same algorithm.
- * - Otherwise, try to focus its parent.
- *
- * If no focusable element is found. Nothing happens.
- * @param element the element to focus.
- */
-export declare function focusAccessibleElement(element?: Element | null): void;
 /**
- * Focus the first focusable child of the element provided. If the element has no focusable child, nothing happens.
- *
- * A priority list can be passed in the second parameter, as an option. If it's provided, it will focus the first element according to the
- * list.
+ * Gets the value for a css variable of the layout.
  *
- * An ignore query selector can also be passed in the options parameter. If the first focusable element matches the query selector, the
- * next element is focused instead.
+ * Supposing the actual name of the variable is name-of-variable, the value passed to the first parameter (varname) may be: name-of-variable
+ * or --name-of-variable or var(--name-of-variable). All these formats work.
  *
- * @example
- * Suppose the children of element are: h1, button, p, input, select.
- * 1. We don't pass a priority list. The focused element will be the button.
- * 2. Our priority list is ['button']. The focused element will be the button.
- * 3. Our priority list is ['input', 'button']. The focused element will be the input.
- * 4. Our priority list is ['select', 'input']. The focused element will be the select.
- * 5. Our priority list is [['select', 'input'], 'button']. The focused element will be the input.
- *
- * @param element the element to search a child to focus.
- * @param options optional.
+ * @param varname the name of css variable.
+ * @returns the value of `varname`.
  */
-export declare function focusFirstChild(element: HTMLElement | Document | null | undefined, { priority, ignore }?: FocusOptions): void;
+export declare function valueOfLayoutVar(varname: string): string;
 /**
  * Accessibility: makes the screen reader announce some text out loud.
  *
  * @param text the message for the screen reader to read.
  */
 export declare function announce(text: string): void;
-export {};
 //# sourceMappingURL=utils.d.ts.map