@pushwoosh/dumb-components 1.1.40 → 1.1.42

package/AccessForbidden/AccessForbidden.d.ts

@@ -0,0 +1,2 @@
+import { type ReactElement } from 'react';
+export declare function AccessForbidden(): ReactElement;

package/AccessForbidden/AccessForbidden.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import accessForbiddenImage from './assets/AccessForbidden.svg?url';
+import { RootBox, ImageBox, TitleBox, DescriptionBox } from './styles';
+export function AccessForbidden() {
+  return React.createElement(RootBox, null, React.createElement(ImageBox, {
+    alt: "Access forbidden",
+    src: accessForbiddenImage
+  }), React.createElement(TitleBox, null, "Access forbidden"), React.createElement(DescriptionBox, null, "You do not have permission to access this page. Please contact your administrator for assistance."));
+}

package/AccessForbidden/assets/AccessForbidden.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" fill="none" viewBox="0 0 120 120"><path fill="#969CA3" fill-rule="evenodd" d="M113.248 57.805c.312 6.296.624 12.591 1.055 18.88.022.326-.482.322-.507 0a503.856 503.856 0 0 1-.53-7.67c-.253-4.14-.471-8.282-.688-12.425-.403-7.672-.806-15.345-1.437-23.002-.211-2.553-1.081-4.882-2.923-6.716-1.767-1.762-4.061-2.696-6.524-2.911a546.7 546.7 0 0 0-9.237-.714 665.636 665.636 0 0 0-23.877-1.222c-8.606-.286-17.224-.413-25.833-.208-7.198.171-14.471.48-21.58 1.69-2.431.415-4.888.926-7.188 1.833-1.337.527-2.947 1.272-3.662 2.6a2.53 2.53 0 0 0-.254.756c-.226 1.22-.348 2.475-.47 3.72-.04.419-.08.837-.125 1.252a201.62 201.62 0 0 0-.865 10.74 197.784 197.784 0 0 0 .843 31.702l.028.264c.301 2.82.608 5.694 1.589 8.372.98 2.675 2.763 4.872 5.312 6.18 2.429 1.247 5.211 1.664 7.907 1.823 2.363.14 4.738.104 7.108.068.703-.01 1.407-.021 2.109-.027l8.174-.07v.754l-8.44.072c-.68.005-1.36.015-2.042.026-2.473.037-4.951.075-7.415-.105-2.635-.191-5.316-.648-7.695-1.85a11.465 11.465 0 0 1-5.317-5.631c-1.151-2.582-1.555-5.409-1.877-8.194a197.73 197.73 0 0 1-1.306-21.61c-.038-7.256.319-14.51 1.07-21.727.186-1.796.395-3.589.628-5.378a4.41 4.41 0 0 1 .293-1.271 4.287 4.287 0 0 1 1.262-1.56c1.523-1.232 3.498-1.886 5.36-2.404 2.797-.78 5.684-1.23 8.561-1.587 7.765-.965 15.626-1.185 23.443-1.244 8.882-.066 17.768.166 26.641.556 7.628.324 15.246.789 22.854 1.395l.614.048c1.244.099 2.489.197 3.731.318a10.88 10.88 0 0 1 6.517 2.957 10.553 10.553 0 0 1 3.128 6.164c.277 2.06.395 4.159.511 6.245.04.71.08 1.42.126 2.126.367 5.658.647 11.322.928 16.985ZM55 93.36l.206-.002 44.079-.378h.07c2.963-.025 5.949-.051 8.662-1.392.403-.199.05-.8-.352-.602-2.569 1.27-5.565 1.262-8.41 1.255-.438 0-.873-.002-1.302.002l-10.653.09-21.574.184-10.726.09v.753Z" clip-rule="evenodd"/><path fill="#fff" d="M10.427 36.48c33.12-.323 66.238-.02 99.353.909l-99.353-.908Z"/><path fill="#969CA3" d="M10.427 36.736c12.93.024 25.86-.112 38.79-.048a2628.4 2628.4 0 0 1 60.563 1.001c.385.01.385-.587 0-.598a2623.045 2623.045 0 0 0-77.567-1.03c-7.262.014-14.526.012-21.786.166-.327.007-.329.509 0 .51Z"/><path fill="#fff" d="M15.164 29.052v-.212a.798.798 0 0 0-.11-.444.86.86 0 0 0-.264-.37.974.974 0 0 0-.411-.24 1.048 1.048 0 0 0-.492-.099 1.365 1.365 0 0 0-.904.338 1.14 1.14 0 0 0-.374.815v.212a.8.8 0 0 0 .11.444.86.86 0 0 0 .264.37.976.976 0 0 0 .412.24c.153.072.322.106.492.098.332.002.653-.119.903-.337a1.141 1.141 0 0 0 .374-.816Z"/><path fill="#969CA3" d="M15.49 29.051c0-.897-.566-1.648-1.517-1.686-.874-.035-1.648.582-1.69 1.475-.095 2.056 3.05 2.256 3.207.211.033-.418-.62-.416-.651 0-.093 1.207-2 1.005-1.904-.211a.919.919 0 0 1 .952-.827c.628-.003.952.463.952 1.038 0 .42.651.42.651 0Z"/><path fill="#fff" d="M19.735 30.204c1.645 0 1.647-2.306 0-2.306-1.644 0-1.646 2.306 0 2.306Z"/><path fill="#969CA3" d="M19.736 30.53c.857-.026 1.577-.615 1.56-1.516-.018-.852-.736-1.442-1.56-1.442-.829 0-1.537.59-1.56 1.442-.024.901.706 1.49 1.56 1.516.42.012.419-.64 0-.652-1.17-.035-1.177-1.654 0-1.654s1.169 1.619 0 1.654c-.419.013-.42.664 0 .652Z"/><path fill="#fff" d="M24.882 30.204c1.645 0 1.647-2.306 0-2.306-1.644 0-1.647 2.306 0 2.306Z"/><path fill="#969CA3" d="M24.882 30.53c.857-.026 1.578-.615 1.56-1.516-.018-.852-.735-1.442-1.56-1.442-.828 0-1.537.59-1.56 1.442-.023.901.707 1.49 1.56 1.516.42.012.42-.64 0-.652-1.17-.035-1.177-1.654 0-1.654 1.178 0 1.17 1.619 0 1.654-.418.013-.42.664 0 .652Zm69.241.532c.479.128 1.004.076 1.497.077.556.001 1.111.002 1.667-.004.414-.004.415-.64 0-.644-.555-.006-1.111-.005-1.667-.004-.496.002-1.016-.051-1.497.077a.26.26 0 0 0-.133.404.26.26 0 0 0 .133.094Z"/><path fill="#EBF0F5" d="M38.935 57.428a2.754 2.754 0 0 1 3.29-2.086l12.724 2.851a2.755 2.755 0 0 1-1.205 5.377l-12.723-2.852a2.755 2.755 0 0 1-2.086-3.29Z"/><path fill="#969CA3" fill-rule="evenodd" d="M42.225 55.342a2.755 2.755 0 1 0-1.204 5.376l12.723 2.851a2.754 2.754 0 0 0 1.205-5.376l-12.724-2.85Zm12.601 3.393-12.722-2.851a2.2 2.2 0 0 0-2.627 1.665m15.35 1.186a2.2 2.2 0 0 1-.963 4.292l-12.722-2.85a2.2 2.2 0 0 1-1.665-2.628" clip-rule="evenodd"/><path fill="#EBF0F5" d="M24.159 51.478a8.365 8.365 0 0 1 10.65-5.12l5.979 2.097a8.356 8.356 0 0 1-5.53 15.77l-5.98-2.097a8.365 8.365 0 0 1-5.12-10.65Zm16.55 5.804a2.85 2.85 0 0 0-1.744-3.628l-5.979-2.097a2.847 2.847 0 0 0-1.884 5.372l5.979 2.097a2.85 2.85 0 0 0 3.628-1.744Z"/><path fill="#969CA3" fill-rule="evenodd" d="M41.233 57.465v.001a3.405 3.405 0 0 1-4.335 2.084l-5.98-2.097a3.404 3.404 0 0 1-2.08-4.334 3.402 3.402 0 0 1 4.33-2.087l5.98 2.098a3.406 3.406 0 0 1 2.085 4.335ZM28.666 47.216a7.81 7.81 0 0 0-3.983 4.445 7.81 7.81 0 0 0 4.78 9.943l5.978 2.097a7.8 7.8 0 1 0 5.163-14.722l-5.978-2.097a7.81 7.81 0 0 0-5.96.334Zm6.143-.858a8.365 8.365 0 0 0-10.65 5.12 8.365 8.365 0 0 0 5.12 10.65l5.979 2.097a8.357 8.357 0 0 0 10.296-11.506 8.356 8.356 0 0 0-4.766-4.264l-5.979-2.097Zm4.156 7.296a2.85 2.85 0 0 1 1.744 3.628 2.85 2.85 0 0 1-3.628 1.744l-5.979-2.097a2.846 2.846 0 0 1 1.884-5.372l5.979 2.096Z" clip-rule="evenodd"/><path fill="#EBF0F5" d="M.009 50.523a8.366 8.366 0 0 1 8.734-7.959l6.33.294a8.356 8.356 0 1 1-.776 16.694l-6.33-.294A8.366 8.366 0 0 1 .01 50.523Zm17.519.814a2.85 2.85 0 0 0-2.711-2.975l-6.33-.294a2.849 2.849 0 0 0-2.975 2.711 2.847 2.847 0 0 0 2.711 2.975l6.33.295a2.85 2.85 0 0 0 2.975-2.712Z"/><path fill="#969CA3" fill-rule="evenodd" d="m15.072 42.858-6.329-.294a8.365 8.365 0 0 0-8.734 7.96 8.366 8.366 0 0 0 7.959 8.734l6.329.294a8.355 8.355 0 1 0 .775-16.694ZM7.994 58.703l6.328.294a7.804 7.804 0 0 0 7.428-4.474 7.8 7.8 0 0 0-6.703-11.11l-6.329-.294a7.81 7.81 0 0 0-8.155 7.43 7.81 7.81 0 0 0 7.431 8.154Zm10.089-7.34a3.405 3.405 0 0 1-3.556 3.24l-6.33-.294a3.4 3.4 0 0 1-2.92-4.844 3.401 3.401 0 0 1 3.236-1.952l6.33.294a3.407 3.407 0 0 1 3.24 3.555Zm-3.266-3.001a2.85 2.85 0 0 1 2.71 2.975 2.85 2.85 0 0 1-2.975 2.712l-6.329-.294a2.844 2.844 0 0 1-2.711-2.976 2.846 2.846 0 0 1 2.976-2.711l6.329.294Z" clip-rule="evenodd"/><path fill="#969CA3" d="m63.25 76.662-5.467-.69c.2-1.58.496-3.259.809-5.037.55-3.12 1.118-6.348 1.178-9.17.058-2.695-.372-4.583-1.278-5.61-1.274-1.444-3.77-1.322-4.59-1.282-2.188.107-3.95 1.03-5.388 2.82-1.296 1.614-2.316 3.9-3.031 6.796-1.299 5.26-1.086 10.598-1.084 10.65l-5.504.246c-.011-.246-.253-6.087 1.212-12.104.901-3.704 2.272-6.728 4.072-8.989 2.453-3.079 5.633-4.735 9.454-4.922 3.957-.194 6.982.863 8.99 3.14 4.008 4.545 2.62 12.427 1.395 19.381-.301 1.71-.586 3.325-.768 4.771Z"/><path fill="#969CA3" fill-rule="evenodd" d="M31.706 106.329c1.64 3.717 29.242 6.329 31.176 2.676 1.935-3.652 5.352-27.725 2.723-31.709-2.63-3.983-28.887-6.54-31.177-2.676-2.29 3.864-4.362 27.992-2.722 31.709Zm19.499-15.566a33.83 33.83 0 0 0 .016 2.07c.091 1.393.19 2.785.29 4.177.012.165.033.345.055.534.09.767.196 1.679-.234 2.279-.44.611-1.299.526-2.012.455-.14-.013-.273-.027-.397-.034a68.964 68.964 0 0 1-3.55-.304l-.115-.013c-.58-.062-1.053-.112-1.204-.771-.11-.482-.03-1.01.041-1.49l.002-.015c.183-1.23.53-2.433.873-3.627l.078-.268c.307-1.07.499-2.164.69-3.259.088-.498.176-.997.274-1.493a4.577 4.577 0 0 1-1.483-4.76c.866-2.988 4.575-4.23 7.063-2.36 2.572 1.933 2.266 5.832-.383 7.496.007.46.001.922-.004 1.383Z" clip-rule="evenodd"/><path fill="#EBF0F5" d="M73.83 63.871a8.366 8.366 0 0 1 5.416-10.503l6.035-1.928a8.356 8.356 0 0 1 5.086 15.92l-6.035 1.928A8.365 8.365 0 0 1 73.83 63.87Zm16.706-5.337a2.85 2.85 0 0 0-3.578-1.846l-6.035 1.928a2.847 2.847 0 1 0 1.732 5.424l6.035-1.929a2.85 2.85 0 0 0 1.846-3.577Z"/><path fill="#969CA3" fill-rule="evenodd" d="M91.065 58.364v.001a3.405 3.405 0 0 1-2.205 4.275l-6.035 1.928a3.403 3.403 0 1 1-2.07-6.48l6.034-1.929a3.407 3.407 0 0 1 4.276 2.205Zm-8.41 5.676 6.035-1.929a2.85 2.85 0 0 0 1.846-3.577 2.85 2.85 0 0 0-3.578-1.846l-6.035 1.928a2.847 2.847 0 1 0 1.732 5.424Zm-7.795-6.286a7.81 7.81 0 0 0-.502 5.948 7.81 7.81 0 0 0 9.805 5.057l6.035-1.928a7.8 7.8 0 0 0-4.748-14.862l-6.034 1.928a7.81 7.81 0 0 0-4.556 3.857Zm4.386-4.386a8.366 8.366 0 0 0-5.416 10.503 8.365 8.365 0 0 0 10.502 5.417l6.035-1.929a8.356 8.356 0 1 0-5.086-15.919l-6.035 1.928Z" clip-rule="evenodd"/><path fill="#EBF0F5" d="M97.428 56.158a8.365 8.365 0 0 1 5.417-10.503l6.035-1.928a8.353 8.353 0 0 1 10.52 5.411 8.368 8.368 0 0 1-.537 6.381 8.351 8.351 0 0 1-4.897 4.127l-6.035 1.928a8.367 8.367 0 0 1-10.503-5.416Zm16.706-5.338a2.847 2.847 0 0 0-3.577-1.845l-6.036 1.928a2.85 2.85 0 0 0-1.849 3.58 2.844 2.844 0 0 0 2.478 1.97 2.85 2.85 0 0 0 1.104-.127l6.035-1.928a2.85 2.85 0 0 0 1.845-3.578Z"/><path fill="#969CA3" fill-rule="evenodd" d="m108.88 43.727-6.035 1.928a8.364 8.364 0 0 0-5.417 10.503 8.366 8.366 0 0 0 10.503 5.416l6.035-1.928a8.357 8.357 0 1 0-5.086-15.919Zm-1.118 17.318 6.036-1.928a7.793 7.793 0 0 0 4.571-3.853 7.805 7.805 0 0 0 .502-5.957 7.795 7.795 0 0 0-3.863-4.563 7.799 7.799 0 0 0-5.958-.488h-.001l-6.035 1.928a7.811 7.811 0 0 0-5.057 9.805 7.81 7.81 0 0 0 9.805 5.056Zm6.901-10.394.001.001a3.409 3.409 0 0 1-2.205 4.275l-6.035 1.928a3.406 3.406 0 0 1-3.637-1.042 3.396 3.396 0 0 1-.793-2.482 3.398 3.398 0 0 1 1.196-2.315 3.406 3.406 0 0 1 1.163-.642l6.035-1.928a3.407 3.407 0 0 1 4.275 2.205Zm-8.409 5.675 6.035-1.928a2.85 2.85 0 0 0 1.845-3.578 2.847 2.847 0 0 0-3.577-1.845l-6.036 1.928a2.85 2.85 0 0 0-1.849 3.58 2.844 2.844 0 0 0 2.478 1.97 2.85 2.85 0 0 0 1.104-.127Z" clip-rule="evenodd"/><path fill="#EBF0F5" d="M49.05 61.898a8.366 8.366 0 0 1 8.749-7.944l6.328.306a8.356 8.356 0 1 1-.805 16.692l-6.329-.305a8.365 8.365 0 0 1-7.943-8.75Zm17.518.845a2.85 2.85 0 0 0-2.706-2.98l-6.329-.306a2.848 2.848 0 0 0-2.245 4.757 2.847 2.847 0 0 0 1.97.93l6.33.305a2.85 2.85 0 0 0 2.98-2.706Z"/><path fill="#969CA3" fill-rule="evenodd" d="M67.122 62.77a3.405 3.405 0 0 1-3.56 3.234l-6.33-.306a3.4 3.4 0 0 1-2.912-4.85 3.402 3.402 0 0 1 3.24-1.946l6.328.306a3.406 3.406 0 0 1 3.234 3.561Zm-14.967-6.242a7.81 7.81 0 0 0-2.55 5.396 7.81 7.81 0 0 0 7.415 8.168l6.328.305a7.8 7.8 0 0 0 .752-15.583l-6.327-.305a7.81 7.81 0 0 0-5.618 2.019Zm5.644-2.574a8.366 8.366 0 0 0-8.75 7.944 8.366 8.366 0 0 0 7.944 8.748l6.329.306a8.357 8.357 0 0 0 .805-16.692l-6.328-.306Zm6.063 5.809a2.85 2.85 0 0 1 2.706 2.98 2.85 2.85 0 0 1-2.98 2.706l-6.33-.305a2.848 2.848 0 0 1-2.436-4.059 2.847 2.847 0 0 1 2.711-1.628l6.329.306Z" clip-rule="evenodd"/><path fill="#EBF0F5" d="M63.723 62.755a2.755 2.755 0 0 1 2.5-2.987l12.988-1.154a2.755 2.755 0 0 1 .487 5.488L66.71 65.255a2.755 2.755 0 0 1-2.987-2.5Z"/><path fill="#969CA3" fill-rule="evenodd" d="M66.223 59.768a2.754 2.754 0 1 0 .487 5.487l12.988-1.153a2.755 2.755 0 0 0-.487-5.488l-12.988 1.154Zm13.036-.6h-.001L66.272 60.32a2.2 2.2 0 1 0 .39 4.381l.048.553-.049-.553 12.986-1.153a2.2 2.2 0 0 0-.388-4.382Z" clip-rule="evenodd"/><path fill="#EBF0F5" d="M13.908 50.31a2.754 2.754 0 0 1 3.171-2.263l12.86 2.15a2.754 2.754 0 1 1-.908 5.435l-12.86-2.15a2.755 2.755 0 0 1-2.263-3.172Z"/><path fill="#969CA3" fill-rule="evenodd" d="m29.94 50.198-12.86-2.15a2.754 2.754 0 1 0-.91 5.433l12.86 2.15a2.754 2.754 0 1 0 .91-5.433Zm-12.953-1.603a2.2 2.2 0 1 0-.725 4.339l12.863 2.15a2.2 2.2 0 1 0 .725-4.338h-.002l-12.86-2.15Z" clip-rule="evenodd"/><path fill="#EBF0F5" d="M88.697 59.998a2.755 2.755 0 0 1 1.52-3.588l12.086-4.893a2.755 2.755 0 0 1 2.067 5.107l-12.085 4.893a2.755 2.755 0 0 1-3.588-1.52Z"/><path fill="#969CA3" fill-rule="evenodd" d="M90.316 56.321a2.755 2.755 0 1 0 2.102 5.093l12.053-4.974a2.753 2.753 0 0 0 1.485-3.594 2.756 2.756 0 0 0-3.587-1.5l-12.053 4.975Zm12.264-4.46h-.001l-12.051 4.973a2.199 2.199 0 1 0 1.678 4.066l.212.514-.212-.514 12.051-4.973h.001a2.2 2.2 0 0 0-1.678-4.066Z" clip-rule="evenodd"/><path fill="#969CA3" d="M33.668 40.524c6.325.71 12.725.388 19.074.305 6.418-.083 12.837-.142 19.255-.178 3.621-.015 7.243-.024 10.864-.026l-.142-.142c.037.857.074 1.713.104 2.57.006.15.037.336-.048.467-.126.195-.44.196-.649.223-.416.053-.833.102-1.25.154-1.687.21-3.378.386-5.074.527-3.429.289-6.867.426-10.308.453-3.44.027-6.881-.045-10.32-.125-3.441-.08-6.882-.168-10.324-.171-1.736-.002-3.472.019-5.207.072-1.626.05-3.276.147-4.89-.111-.383-.06-.763-.142-1.137-.244l.115.15c-.04-.74-.105-1.48-.138-2.221-.007-.152-.244-.153-.237 0 .033.74.035 1.482.063 2.222a.16.16 0 0 0 .114.15c1.572.458 3.228.463 4.851.42 1.746-.045 3.49-.096 5.238-.104 3.54-.018 7.078.065 10.617.149 3.538.084 7.077.168 10.616.153 3.508-.015 7.014-.143 10.51-.427 1.745-.142 3.486-.321 5.223-.538.415-.051.83-.107 1.243-.166.33-.047.773-.043 1.051-.252.239-.18.24-.46.227-.732-.02-.437-.04-.873-.056-1.31l-.05-1.309a.145.145 0 0 0-.142-.142c-6.42-.02-12.839.02-19.258.08-6.407.062-12.813.198-19.22.281-3.574.047-7.157.032-10.715-.346-.107-.011-.106.156 0 .168Z"/><path fill="#fff" d="M79.513 41.702c-.297-.023-.547.308-.484.6a.649.649 0 0 0 .673.468.627.627 0 0 0 .578-.48c.047-.266-.177-.56-.447-.545-.27.016-.448.396-.262.591"/><path fill="#969CA3" d="M79.513 41.54c-.37-.02-.682.347-.656.705.03.39.387.662.759.688a.795.795 0 0 0 .821-.6c.066-.362-.229-.79-.625-.748-.398.043-.636.559-.356.867a.163.163 0 1 0 .23-.23c-.028-.032.01.025-.009-.012-.003-.006-.02-.046-.007-.01-.005-.014-.013-.073-.011-.036-.001-.011.002-.077-.003-.039a.417.417 0 0 1 .021-.081c-.01.03.016-.028.022-.038.002-.004.03-.04.008-.014a.374.374 0 0 1 .05-.05c-.026.023.007-.005.012-.008l.025-.014c.017-.008.017-.008 0 0a.348.348 0 0 1 .026-.008c.026-.01.009-.003-.001-.002.016-.002.032-.001.048-.002.048-.001-.013-.004.013.001l.04.01c.042.01-.017-.012.021.008l.029.016s.043.031.02.013a.366.366 0 0 1 .132.227c-.005-.03.001.022.001.024l-.001.05c.003-.032-.006.023-.006.024l-.01.034c-.012.046.011-.018-.01.025a.463.463 0 0 1-.136.168c.016-.013-.014.008-.017.01a.692.692 0 0 1-.085.048c-.002.001-.028.012-.01.005a.5.5 0 0 1-.474-.05.424.424 0 0 1-.19-.268.448.448 0 0 1 0-.082c.001-.033-.007.013.003-.021l.013-.048c.002-.005.019-.047.008-.023a.575.575 0 0 1 .049-.086c.026-.039-.018.015.015-.018l.034-.035s.042-.034.017-.016a.424.424 0 0 1 .041-.026c.001 0 .048-.024.019-.011a.329.329 0 0 1 .045-.015c.003-.001.053-.01.02-.006a.404.404 0 0 1 .065 0 .163.163 0 1 0 0-.326Zm11.312-.89a37.884 37.884 0 0 1 4.326-.158c.48.011.964.052 1.444.034.15-.006.202-.253.037-.277a9.845 9.845 0 0 0-1.415-.074c-.493-.004-.985.003-1.478.02-.975.036-1.947.127-2.914.254-.125.017-.13.214 0 .201Zm.862 2.523c.18.07.43.025.62.018.222-.008.443-.019.664-.028.431-.018.862-.037 1.293-.058l1.293-.063c.426-.022.885-.004 1.298-.12.125-.034.144-.25 0-.272-.424-.065-.872 0-1.298.03l-1.326.092c-.431.03-.862.063-1.293.096-.221.017-.443.032-.663.05-.193.016-.436.004-.609.095a.089.089 0 0 0-.02.133.09.09 0 0 0 .041.027Zm.799 3.119c1.036-.065 2.074-.096 3.108-.176.2-.016.204-.329 0-.316-1.037.067-2.072.183-3.108.265-.144.012-.146.236 0 .227ZM12.964 65.366c.14 2.555.318 5.106.602 7.65.283 2.537.64 5.065 1.069 7.584.241 1.418.508 2.832.784 4.243a.222.222 0 0 0 .267.152c1.962-.321 3.924-.64 5.887-.957l2.926-.48c.403-.066.913-.071 1.243-.342.335-.275.391-.787.473-1.184.378-1.843.393-3.735.266-5.605-.13-1.915-.379-3.823-.605-5.728a531.451 531.451 0 0 0-.818-6.56.236.236 0 0 0-.23-.231c-2.776.07-5.551.14-8.326.212-.785.021-1.57.04-2.355.066-.303.01-.305.477 0 .471 2.775-.056 5.55-.145 8.325-.222l2.355-.066-.23-.23c.25 1.911.487 3.824.712 5.74.224 1.883.462 3.769.626 5.659.159 1.824.228 3.678-.03 5.497a14.44 14.44 0 0 1-.253 1.333c-.039.162-.074.362-.206.478-.143.125-.37.139-.547.169l-2.891.48-6.437 1.08.267.153c-.546-2.477-.99-4.977-1.371-7.484a136.903 136.903 0 0 1-.939-7.576 115.687 115.687 0 0 1-.348-4.302c-.008-.138-.224-.14-.216 0Zm58.401-13.11a3.393 3.393 0 0 0 2.138-1.603c.228-.399.453-.934.346-1.4a.842.842 0 0 0-.844-.613 1.157 1.157 0 0 0-1.021.623c-.23.422-.25.93-.184 1.397.063.445.226.922.59 1.21.437.348.998.277 1.482.073a7.464 7.464 0 0 0 1.597-.97 9.58 9.58 0 0 0 1.384-1.292c.14-.16-.046-.451-.24-.313-.607.432-.561 1.392.016 1.832.706.537 1.701.183 2.187-.47.288-.419.456-.91.483-1.417l-.345.143c.872.704 2.011.83 3.095.746 1.297-.102 2.56-.45 3.87-.283.205.026.242-.305.049-.356-1.238-.32-2.499.046-3.735.183-1.01.112-2.164.092-2.993-.576a.205.205 0 0 0-.345.143c-.07.802-.524 1.734-1.445 1.745a.83.83 0 0 1-.821-.507c-.105-.28-.077-.654.184-.84l-.24-.311a9.194 9.194 0 0 1-2.123 1.794c-.388.237-.837.527-1.306.54-.416.012-.697-.265-.844-.633-.238-.597-.334-1.767.404-2.07.26-.107.644-.102.833.135.275.346.012.959-.16 1.302a3.14 3.14 0 0 1-2.052 1.643c-.094.022-.055.167.04.145Zm-1.973 21.789a44.6 44.6 0 0 0 6.382.222c.248-.01.25-.395 0-.386a68.61 68.61 0 0 1-6.382-.052c-.14-.008-.135.202 0 .216Zm34.523-9.963c-1.426.088-2.848.2-4.268.36a96.22 96.22 0 0 0-2.074.256 8.318 8.318 0 0 0-.962.144c-.247.063-.464.217-.494.487a1.55 1.55 0 0 0 .076.515l.135.583.278 1.197a.175.175 0 0 0 .125.125c1.379.263 2.782.364 4.184.304a17.852 17.852 0 0 0 2.073-.219c.495-.08 1.113-.167 1.414-.625a.857.857 0 0 0 .044-.776c-.085-.224-.278-.495-.188-.743.058-.16-.187-.311-.296-.172a.628.628 0 0 0-.094.63c.068.207.217.42.215.644-.003.452-.729.541-1.051.598a18.19 18.19 0 0 1-6.206.014l.126.125c-.157-.634-.314-1.268-.469-1.903-.032-.134-.084-.302.05-.395a.79.79 0 0 1 .323-.096c.312-.05.625-.09.937-.134 1.305-.18 2.613-.322 3.92-.479a82.571 82.571 0 0 1 2.202-.237c.129-.011.132-.211 0-.203Zm-6.545 6.432c.708.07 1.416.139 2.124.206.222.021.222-.327 0-.346-.708-.06-1.416-.116-2.124-.17-.201-.016-.197.29 0 .31Zm-28.47.916c1.851.117 3.705.225 5.56.261a.157.157 0 0 0 .109-.267.158.158 0 0 0-.108-.048c-1.852-.096-3.708-.122-5.562-.137a.095.095 0 0 0 0 .19Zm-41.201-4.37a26.371 26.371 0 0 1 3.087-.49 28.173 28.173 0 0 1 3.098-.106.185.185 0 0 0 0-.369 21.002 21.002 0 0 0-6.243.757.108.108 0 0 0 .058.209Zm.431 2.927a5.125 5.125 0 0 0 1.99.19c.163-.019.168-.275 0-.26a5.901 5.901 0 0 1-1.938-.12.098.098 0 0 0-.11.143.098.098 0 0 0 .058.047Zm.354 4.107 1.473.005a.122.122 0 0 0 .084-.207.122.122 0 0 0-.084-.037l-1.473.005a.118.118 0 0 0-.08.199c.021.022.05.034.08.035Z"/><path fill="#969CA3" d="M14.973 68.497a181.319 181.319 0 0 1 7.525 10.8.499.499 0 0 0 .668.176.494.494 0 0 0 .176-.67 181.443 181.443 0 0 0-7.525-10.8.504.504 0 0 0-.668-.175c-.208.121-.335.457-.176.669Z"/><path fill="#969CA3" d="M17.923 78.724a72.21 72.21 0 0 1 4.36-9.452.489.489 0 1 0-.843-.493 74.498 74.498 0 0 0-4.46 9.684c-.093.248.104.537.341.602a.5.5 0 0 0 .602-.341ZM5.294 50.488c-.328.624-.244 1.351.053 1.97.343.714 1.014 1.173 1.734 1.456.81.318 1.706.404 2.566.482.971.088 1.947.12 2.922.096a22.326 22.326 0 0 0 3.35-.315c.255-.045.142-.417-.105-.383a28.057 28.057 0 0 1-5.519.263 14.067 14.067 0 0 1-2.487-.31c-.718-.176-1.429-.475-1.93-1.036-.524-.587-.826-1.415-.497-2.172.026-.058-.056-.11-.087-.05ZM3.21 55.196c.438.446.928.837 1.46 1.165.144.09.28-.142.133-.229a7.422 7.422 0 0 1-1.427-1.102.117.117 0 0 0-.166.166Zm33.112-5.146a30.618 30.618 0 0 1 3.389 1.98c.144.095.276-.136.135-.232a25.068 25.068 0 0 0-3.422-1.921c-.116-.055-.219.116-.102.173ZM64.98 64.603c1.47.515 3.02.573 4.56.472 1.616-.106 3.226-.325 4.834-.513 1.622-.19 3.25-.357 4.869-.573.68-.091 1.376-.239 1.93-.671A2.48 2.48 0 0 0 79.87 58.9c-.262-.026-.256.377 0 .407 1.126.133 2.002 1.225 1.801 2.355a2.13 2.13 0 0 1-.835 1.37c-.539.375-1.208.479-1.845.556-1.54.186-3.08.362-4.618.543-1.497.175-2.992.385-4.493.527-1.609.153-3.277.188-4.845-.26a.106.106 0 0 0-.126.075.105.105 0 0 0 .07.129Zm25.116-3.765c-.331.688-1.002 1.126-1.723 1.32-.16.043-.134.318.04.297a1.98 1.98 0 0 0 .634-.178 2.509 2.509 0 0 0 1.244-1.357c.046-.111-.143-.19-.195-.082Zm28.089-13.245a7.292 7.292 0 0 1 1.548 4.296 7.022 7.022 0 0 1-1.242 4.126 7.134 7.134 0 0 1-1.703 1.75c-.18.13-.006.433.176.302a7.342 7.342 0 0 0 2.672-3.64 7.192 7.192 0 0 0-1.357-6.928c-.056-.066-.145.028-.094.093Zm-1.832 6.827c.183.47.21.986.074 1.471l.143-.108c-.272-.02-.483-.2-.744-.258a.43.43 0 0 0-.483.205.417.417 0 0 0-.053.179c-.037.33-.175.64-.395.887a2.552 2.552 0 0 1-.88.587c-.381.15-.774.268-1.174.352-.431.107-.858.222-1.29.324l-2.523.599c-.97.23-1.942.455-2.907.703a.112.112 0 0 0-.075.136.113.113 0 0 0 .134.08c1.709-.381 3.407-.812 5.108-1.224.812-.197 1.64-.347 2.443-.58.669-.193 1.324-.516 1.67-1.154a1.56 1.56 0 0 0 .175-.504c.021-.13.007-.318.182-.28.294.063.531.3.851.238a.15.15 0 0 0 .079-.053.151.151 0 0 0 .03-.09 4.122 4.122 0 0 0-.205-1.554c-.037-.1-.196-.057-.16.044Z"/><path fill="#969CA3" d="M118.01 49.986a4.327 4.327 0 0 1-.134 1.9.107.107 0 0 0 .013.08.107.107 0 0 0 .064.049.108.108 0 0 0 .132-.072c.212-.65.256-1.342.129-2.013-.024-.134-.226-.077-.204.056ZM91.2 56.593c.01 0 .02-.004.026-.011a.038.038 0 0 0-.026-.065.038.038 0 0 0 0 .076ZM85.676 87.74a1.908 1.908 0 0 0 1.996-.439c.248-.246-.125-.612-.382-.381a1.489 1.489 0 0 1-1.476.32c-.32-.103-.45.39-.138.5Zm-2.156-9.983c3.658-.05 7.31-.31 10.95-.657 3.623-.344 7.235-.777 10.849-1.196l6.117-.71c.166-.019.168-.282 0-.262l-10.915 1.306c-3.614.427-7.23.85-10.86 1.108-2.044.145-4.091.243-6.14.276a.068.068 0 0 0-.065.067c0 .018.006.035.019.047.012.013.028.02.046.02Zm11.23 3.112c.832.132 1.675.178 2.517.138.17-.008.17-.277 0-.264-.82.065-1.646.04-2.461-.078-.133-.02-.191.183-.057.204ZM84.17 92.93h.433a.15.15 0 1 0 0-.297h-.433a.15.15 0 1 0 0 .298Z"/></svg>

package/AccessForbidden/index.d.ts

@@ -0,0 +1 @@
+export { AccessForbidden } from './AccessForbidden';

package/AccessForbidden/index.js

@@ -0,0 +1 @@
+export { AccessForbidden } from './AccessForbidden';

package/AccessForbidden/styles.d.ts

@@ -0,0 +1,5 @@
+import { H1 } from '@pushwoosh/kit-typography';
+export declare const RootBox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ImageBox: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const TitleBox: import("styled-components").StyledComponent<typeof H1, any, {}, never>;
+export declare const DescriptionBox: import("styled-components").StyledComponent<"div", any, {}, never>;

package/AccessForbidden/styles.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+import { Color, FontWeight } from '@pushwoosh/kit-constants';
+import { H1 } from '@pushwoosh/kit-typography';
+export const RootBox = styled.div.withConfig({
+  displayName: "RootBox",
+  componentId: "sc-vun7qs-0"
+})(["display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:520px;padding:56px 48px;margin:0 auto;"]);
+export const ImageBox = styled.img.withConfig({
+  displayName: "ImageBox",
+  componentId: "sc-vun7qs-1"
+})(["width:240px;margin-bottom:12px;"]);
+export const TitleBox = styled(H1).withConfig({
+  displayName: "TitleBox",
+  componentId: "sc-vun7qs-2"
+})(["color:", ";font-weight:", ";margin-bottom:8px;"], Color.LOCKED, FontWeight.MEDIUM);
+export const DescriptionBox = styled.div.withConfig({
+  displayName: "DescriptionBox",
+  componentId: "sc-vun7qs-3"
+})(["color:", ";text-align:center;"], Color.LOCKED);

package/Alert/ai-documentation.mdx

@@ -0,0 +1,132 @@
+# Alert - AI Documentation
+
+> Auto-generated AI agent documentation for Alert component
+> Part of @pushwoosh/dumb-components library
+
+## Overview
+
+**Component:** Alert
+**Import Path:** `import { Alert } from '@pushwoosh/dumb-components'`
+**Files:** Alert.tsx, types.ts, styles.ts, maps.ts, index.ts
+**Type:** UI Component / Notification Component
+**Description:** Alert component for displaying informational, warning, and error messages with optional collapsible content
+
+## TypeScript Interface
+
+```typescript
+type AlertType = 'info' | 'warning' | 'error';
+
+interface AlertProps {
+  title: ReactNode;
+  type: AlertType;
+  isExpandedDefault?: boolean;
+  readonly children?: ReactNode;
+}
+```
+
+## Import & Usage
+
+**Import:**
+```typescript
+import { Alert } from '@pushwoosh/dumb-components';
+import type { AlertProps } from '@pushwoosh/dumb-components';
+```
+
+**Basic Usage:**
+```tsx
+function App() {
+  return (
+    <Alert 
+      title="Information Alert" 
+      type="info"
+    />
+  );
+}
+```
+
+**Advanced Examples:**
+```tsx
+// Warning alert with collapsible content
+<Alert 
+  title="Warning: Check your settings"
+  type="warning"
+  isExpandedDefault={true}
+>
+  <p>Please review your configuration before proceeding.</p>
+  <ul>
+    <li>Check database connection</li>
+    <li>Verify API endpoints</li>
+  </ul>
+</Alert>
+
+// Error alert
+<Alert 
+  title="Error: Failed to save"
+  type="error"
+>
+  <p>There was an error saving your data. Please try again.</p>
+</Alert>
+
+// Simple info alert without children (non-collapsible)
+<Alert 
+  title="Your changes have been saved successfully"
+  type="info"
+/>
+
+// Dynamic content
+{errors.map(error => (
+  <Alert 
+    key={error.id}
+    title={error.title}
+    type="error"
+    isExpandedDefault={false}
+  >
+    {error.details}
+  </Alert>
+))}
+```
+
+## Props Reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| title | ReactNode | required | The main title/message of the alert |
+| type | 'info' \| 'warning' \| 'error' | required | Alert type that determines styling and icon |
+| isExpandedDefault | boolean | undefined | Whether collapsible content is expanded by default |
+| children | ReactNode | undefined | Optional content that makes the alert collapsible |
+
+## AI Agent Guidelines
+
+### ✅ Recommended Patterns
+- Use `type="info"` for general information and success messages
+- Use `type="warning"` for cautions and non-critical issues
+- Use `type="error"` for errors and critical problems
+- Include `children` only when you need expandable details
+- Set `isExpandedDefault={true}` for important details that should be visible immediately
+- Use meaningful, action-oriented titles
+
+### ❌ Common Mistakes to Avoid
+- Don't use Alert for loading states (use Spinner instead)
+- Don't nest Alerts inside each other
+- Don't use Alert for permanent UI elements (use Banner instead)
+- Avoid very long titles - use children for detailed content
+
+### Integration Tips
+- Works well at the top of forms to show validation errors
+- Can be used in modals for confirmation messages
+- Effective in dashboards for system status updates
+- Combines well with Toast for temporary notifications vs persistent alerts
+- Use multiple alerts in a stack for different message types
+
+## Behavior Notes
+- **Collapsible**: Alert becomes collapsible when `children` prop is provided
+- **Icon Display**: Each alert type has its own icon and color scheme
+- **Click Interaction**: Header is clickable only when content is collapsible
+- **Responsive**: Adapts to container width with proper padding and spacing
+
+## Related Components
+- Toast - for temporary notifications
+- Banner - for persistent promotional messages
+- Modal - for critical alerts requiring user action
+
+---

package/Badge/ai-documentation.mdx

@@ -0,0 +1,155 @@
+# Badge - AI Documentation
+
+> Auto-generated AI agent documentation for Badge component
+> Part of @pushwoosh/dumb-components library
+
+## Overview
+
+**Component:** Badge
+**Import Path:** `import { Badge } from '@pushwoosh/dumb-components'`
+**Files:** Badge.tsx, types.ts, styles.ts, maps.ts, index.ts
+**Type:** UI Component / Status Indicator
+**Description:** Badge component for displaying status, categories, or labels with various color options and saturation levels
+
+## TypeScript Interface
+
+```typescript
+type BadgeColor = 'gray' | 'green' | 'orange' | 'red' | 'purple' | 'sky' | 'locked';
+
+interface BadgeProps extends Omit<JSX.IntrinsicElements['div'], 'ref'> {
+  readonly boxRef?: Ref<HTMLDivElement>;
+  readonly color: BadgeColor;
+  readonly isSaturated?: boolean;
+  readonly children: ReactNode;
+}
+```
+
+## Import & Usage
+
+**Import:**
+```typescript
+import { Badge } from '@pushwoosh/dumb-components';
+import type { BadgeProps, BadgeColor } from '@pushwoosh/dumb-components';
+```
+
+**Basic Usage:**
+```tsx
+function App() {
+  return (
+    <Badge color="green">
+      Active
+    </Badge>
+  );
+}
+```
+
+**Advanced Examples:**
+```tsx
+// Status indicators with semantic colors
+<Badge color="green">Active</Badge>
+<Badge color="red">Inactive</Badge>
+<Badge color="orange">Pending</Badge>
+<Badge color="gray">Draft</Badge>
+
+// Saturated vs normal badges
+<Badge color="purple" isSaturated={true}>
+  Premium
+</Badge>
+<Badge color="purple" isSaturated={false}>
+  Basic
+</Badge>
+
+// With ref for DOM access
+const badgeRef = useRef<HTMLDivElement>(null);
+
+<Badge 
+  color="sky" 
+  boxRef={badgeRef}
+  onClick={() => console.log('Badge clicked')}
+>
+  Clickable
+</Badge>
+
+// In lists and tables
+{users.map(user => (
+  <div key={user.id}>
+    <span>{user.name}</span>
+    <Badge color={getStatusColor(user.status)}>
+      {user.status}
+    </Badge>
+  </div>
+))}
+
+// Dynamic color based on data
+function getStatusBadge(status: string) {
+  const colorMap = {
+    active: 'green',
+    inactive: 'red', 
+    pending: 'orange',
+    locked: 'locked'
+  } as const;
+  
+  return (
+    <Badge color={colorMap[status] || 'gray'}>
+      {status.toUpperCase()}
+    </Badge>
+  );
+}
+```
+
+## Props Reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| color | BadgeColor | required | Badge color theme: 'gray', 'green', 'orange', 'red', 'purple', 'sky', 'locked' |
+| isSaturated | boolean | false | Whether to use saturated/bold version of the color |
+| children | ReactNode | required | Content to display inside the badge |
+| boxRef | Ref<HTMLDivElement> | undefined | Ref to access the badge DOM element |
+| ...rest | HTMLDivElement props | | All standard div props (onClick, className, etc.) |
+
+## Color Guide
+
+| Color | Best Used For | Example Use Cases |
+|-------|---------------|-------------------|
+| green | Success, Active, Positive | "Active", "Published", "Success" |
+| red | Error, Danger, Negative | "Inactive", "Error", "Failed" |
+| orange | Warning, Pending, Caution | "Pending", "Warning", "In Review" |
+| gray | Neutral, Default, Disabled | "Draft", "Disabled", "Unknown" |
+| purple | Premium, Special, Priority | "Premium", "VIP", "Priority" |
+| sky | Info, Neutral Positive | "Info", "New", "Updated" |
+| locked | Restricted, Locked | "Locked", "Private", "Restricted" |
+
+## AI Agent Guidelines
+
+### ✅ Recommended Patterns
+- Use semantic colors that match the meaning (green for success, red for errors)
+- Keep badge text short and concise (1-2 words ideal)
+- Use `isSaturated={true}` for high-importance badges
+- Combine with tooltips for badges that need explanation
+- Use consistent color meanings across your application
+
+### ❌ Common Mistakes to Avoid
+- Don't use badges for long text content (use chips or tags instead)
+- Avoid mixing saturated and non-saturated badges in the same context
+- Don't use too many different colors in one interface
+- Don't use badges for interactive elements without proper accessibility
+
+### Integration Tips
+- Works well in tables for status columns
+- Effective in user lists, dashboards, and card components
+- Can be combined with icons for richer status indicators
+- Good for filtering interfaces when combined with interactive elements
+- Use with consistent spacing in badge groups
+
+## Behavior Notes
+- **Interactive**: Accepts all standard div props including onClick for interactivity
+- **Accessible**: Maintains proper contrast ratios for readability
+- **Flexible**: Can contain any ReactNode content
+- **Responsive**: Adapts to content size while maintaining consistent styling
+
+## Related Components
+- Chip - for removable tags and filters
+- Alert - for larger status messages
+- Tooltip - for additional badge explanations
+
+---

package/Banner/ai-documentation.mdx

@@ -0,0 +1,285 @@
+# Banner - AI Documentation
+
+> Auto-generated AI agent documentation for Banner component
+> Part of @pushwoosh/dumb-components library
+
+## Overview
+
+**Component:** Banner
+**Import Path:** `import { Banner } from '@pushwoosh/dumb-components'`
+**Files:** Banner.tsx, types.ts, styles.ts, maps.ts, colors.ts, index.ts
+**Type:** UI Component / Notification Component
+**Description:** Banner component for displaying prominent notifications with optional actions, loading states, and close functionality
+
+## TypeScript Interface
+
+```typescript
+type BannerType = 'error' | 'warning' | 'info' | 'success';
+
+interface RequiredBannerProps {
+  readonly boxRef?: any;
+  readonly type: BannerType;
+  readonly title: string;
+  readonly view?: 'shape' | 'ghost';
+  readonly icon?: ReactElement;
+  readonly className?: string;
+  readonly isLoading?: boolean;
+  readonly canBeClosed?: boolean;
+  readonly onClose?: () => void;
+  readonly children?: ReactNode;
+}
+
+interface BannerPropsWithButton extends RequiredBannerProps {
+  readonly action?: {
+    readonly onClick: () => void;
+    readonly buttonText: string;
+  };
+}
+```
+
+## Import & Usage
+
+**Import:**
+```typescript
+import { Banner } from '@pushwoosh/dumb-components';
+import type { 
+  BannerType, 
+  RequiredBannerProps, 
+  BannerPropsWithButton 
+} from '@pushwoosh/dumb-components';
+```
+
+**Basic Usage:**
+```tsx
+function App() {
+  return (
+    <Banner 
+      type="info"
+      title="Welcome to the new dashboard!"
+    />
+  );
+}
+```
+
+**Advanced Examples:**
+```tsx
+// Success banner with action
+<Banner 
+  type="success"
+  title="Account verified successfully"
+  action={{
+    buttonText: "Get Started",
+    onClick: () => navigate('/dashboard')
+  }}
+/>
+
+// Error banner with close functionality
+<Banner 
+  type="error"
+  title="Connection failed"
+  canBeClosed
+  onClose={() => console.log('Banner closed')}
+>
+  <p>Unable to connect to server. Please check your internet connection.</p>
+</Banner>
+
+// Warning banner with loading action
+<Banner 
+  type="warning"
+  title="Unsaved changes detected"
+  isLoading={isSaving}
+  action={{
+    buttonText: isSaving ? "Saving..." : "Save Changes",
+    onClick: handleSave
+  }}
+>
+  <p>You have unsaved changes that will be lost if you navigate away.</p>
+</Banner>
+
+// Info banner with custom icon
+<Banner 
+  type="info"
+  title="New features available"
+  icon={<StarIcon />}
+  canBeClosed
+  onClose={() => setShowBanner(false)}
+>
+  <p>Check out our latest updates and improvements.</p>
+</Banner>
+
+// Ghost view banner
+<Banner 
+  type="success"
+  title="Operation completed"
+  view="ghost"
+  action={{
+    buttonText: "View Details",
+    onClick: () => showDetails()
+  }}
+/>
+
+// Conditional banner display
+{showErrorBanner && (
+  <Banner 
+    type="error"
+    title="Validation failed"
+    canBeClosed
+    onClose={() => setShowErrorBanner(false)}
+  >
+    <ul>
+      {errors.map(error => (
+        <li key={error.field}>{error.message}</li>
+      ))}
+    </ul>
+  </Banner>
+)}
+
+// Banner with async action
+<Banner 
+  type="info"
+  title="Update available"
+  isLoading={isUpdating}
+  action={{
+    buttonText: "Update Now",
+    onClick: async () => {
+      setIsUpdating(true);
+      await performUpdate();
+      setIsUpdating(false);
+    }
+  }}
+/>
+```
+
+## Props Reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| type | 'error' \| 'warning' \| 'info' \| 'success' | required | Banner semantic type |
+| title | string | required | Main banner title text |
+| view | 'shape' \| 'ghost' | 'shape' | Visual style variant |
+| children | ReactNode | undefined | Additional content below title |
+| icon | ReactElement | auto by type | Custom icon (defaults based on type) |
+| canBeClosed | boolean | false | Whether banner can be dismissed |
+| isLoading | boolean | false | Whether banner shows loading state |
+| onClose | () => void | undefined | Callback when banner is closed |
+| action | BannerAction | undefined | Action button configuration |
+| className | string | undefined | Additional CSS classes |
+| boxRef | Ref | undefined | Ref to banner element |
+
+### Action Object
+```typescript
+action?: {
+  onClick: () => void;     // Action callback
+  buttonText: string;      // Button label text
+}
+```
+
+## Type Guide
+
+| Type | Usage | Default Icon | Example Use Cases |
+|------|-------|--------------|-------------------|
+| success | Positive feedback, completion | ✓ CheckIcon | "Successfully saved", "Account created" |
+| info | Neutral information | ℹ️ InfoIcon | "New features", "System maintenance" |
+| warning | Cautions, non-critical issues | ⚠️ WarningIcon | "Unsaved changes", "Session expiring" |
+| error | Critical issues, failures | ❌ ErrorIcon | "Network error", "Validation failed" |
+
+## AI Agent Guidelines
+
+### ✅ Recommended Patterns
+- Use semantic types that match the message content
+- Include `canBeClosed` for dismissible notifications
+- Add action buttons for banners that need user response
+- Use `isLoading` when actions trigger async operations
+- Place banners at top of content areas for visibility
+- Include helpful details in children for complex issues
+
+### ❌ Common Mistakes to Avoid
+- Don't stack multiple banners without clear hierarchy
+- Avoid very long titles - use children for details
+- Don't use banners for temporary notifications (use Toast instead)
+- Don't forget to handle loading states for async actions
+- Avoid banners that can't be dismissed for non-critical content
+
+### Integration Tips
+- Position banners prominently at page/section tops
+- Use with form validation to show error summaries
+- Combine with async operations for status feedback
+- Good for onboarding flows and feature announcements
+- Can replace multiple alerts with single comprehensive banner
+
+## Banner vs Other Components
+
+| Component | Usage | Duration | Dismissible |
+|-----------|--------|----------|-------------|
+| Banner | Prominent notifications | Persistent | Optional |
+| Alert | Contextual messages | Persistent | By content |
+| Toast | Temporary feedback | Auto-dismiss | Usually |
+| Modal | Critical interruptions | User action | Required |
+
+## Common Patterns
+
+### Error Handling
+```tsx
+function FormWithBanner() {
+  const [errors, setErrors] = useState([]);
+  
+  return (
+    <>
+      {errors.length > 0 && (
+        <Banner
+          type="error"
+          title={`Found ${errors.length} validation error(s)`}
+          canBeClosed
+          onClose={() => setErrors([])}
+        >
+          <ul>
+            {errors.map(error => (
+              <li key={error.field}>{error.message}</li>
+            ))}
+          </ul>
+        </Banner>
+      )}
+      {/* Form content */}
+    </>
+  );
+}
+```
+
+### Feature Announcements
+```tsx
+<Banner
+  type="info"
+  title="New Dashboard Available!"
+  action={{
+    buttonText: "Try It Now",
+    onClick: () => enableNewDashboard()
+  }}
+  canBeClosed
+  onClose={() => markAnnouncementSeen()}
+>
+  Experience our redesigned interface with improved performance and new features.
+</Banner>
+```
+
+### Save Prompt
+```tsx
+<Banner
+  type="warning"
+  title="You have unsaved changes"
+  isLoading={isSaving}
+  action={{
+    buttonText: isSaving ? "Saving..." : "Save Now",
+    onClick: handleSave
+  }}
+>
+  Your changes will be lost if you navigate away from this page.
+</Banner>
+```
+
+## Related Components
+- Alert - for contextual messages within content
+- Toast - for temporary notifications
+- Modal - for blocking user interactions
+- Button - action buttons used within banners
+
+---