@arolariu/components/dist/components/ui/toast_module.css.map

🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

{"version":3,"sources":["webpack://./src/components/ui/toast.module.css"],"names":[],"mappings":"AAAA;EACE,sBAAsB;EACtB,0BAA0B;EAC1B,oBAAoB;EACpB,aAAa;EACb,sBAAsB;EACtB,+BAA+B;EAC/B,aAAa;EACb,eAAe;AACjB;;AAEA;EACE,uBAAuB;EACvB,MAAM;EACN,OAAO;AACT;;AAEA;EACE,qBAAqB;EACrB,MAAM;EACN,QAAQ;AACV;;AAEA;EACE,uBAAuB;EACvB,SAAS;EACT,OAAO;AACT;;AAEA;EACE,qBAAqB;EACrB,SAAS;EACT,QAAQ;AACV;;AAEA;EACE,MAAM;AACR;;AAKA;EAFE,mBAAmB;EACnB,SAAS;EACT,2BAA2B;AAC7B;;AADA;EAIE,SAAS;AACX;;AAEA;EACE,2BAA2B;EAC3B,6FAA6F;EAC7F,kCAAkC;EAClC,kCAAkC;EAClC,2BAA2B;EAC3B,oBAAoB;EACpB,WAAW;EACX,wCAAwC;EACxC,gBAAgB;EAChB,oEAAoE;;EAMpE;IAHE,UAAU;IACV,qCAAqC;EACvC;;EAMA;IAHE,UAAU;IACV,qCAAqC;EACvC;AACF;;AAMA;EAHE,uBAAuB;EACvB,sBAAsB;EACtB,0BAA0B;EAC1B,+CAA+C;EAC/C,aAAa;AACf;;AAMA;EAHE,cAAc;EACd,uBAAuB;EACvB,mBAAmB;EACnB,aAAa;EACb,cAAc;EACd,mBAAmB;EACnB,aAAa;AACf;;AAMA;EAHE,sBAAsB;EACtB,sBAAsB;EACtB,YAAY;EACZ,aAAa;AACf;;AAMA;EAHE,cAAc;EACd,gBAAgB;EAChB,gBAAgB;AAClB;;AAQA;EALE,4BAA4B;EAC5B,SAAS;AACX;;AAGA;EAAE,iCAAiC;EACjC,gBAAgB;AAClB;;AAKA;EAFE,8CAA8C;EAC9C,iCAAiC;EACjC,eAAe;EACf,gBAAgB;EAChB,SAAS;EACT,uBAAuB;EACvB,mBAAmB;EACnB,WAAW;EACX,YAAY;EACZ,6CAA6C;EAC7C,oBAAoB;;EAOpB;IAJE,+DAA+D;IAC/D,2BAA2B;IAC3B,aAAa;EACf;AACF;;AAQA;EALE,cAAc;EACd,WAAW;EACX,YAAY;AACd;;AASA;EANE,gDAAyC;AAC3C;;AASA;EANE,sBAAsB;EACtB,6BAA6B;EAC7B,eAAe;EACf,aAAa;AACf;;AASA;EANE,kCAAkC;EAClC,eAAe;EACf,4BAA4B;EAC5B,gBAAgB;EAChB,4BAA4B;EAC5B,uBAAuB;EACvB,uBAAuB;EACvB,mBAAmB;EACnB,gBAAgB;EAChB,gEAAgE;EAChE,oBAAoB;AACtB;;AAaA;EAVE,gCAAgC;EAChC,2BAA2B;;EAa3B;IAVE,6DAA6D;IAC7D,aAAa;EACf;AACF;;AAcA;EAXE,kEAAkE;EAClE,2BAA2B;EAC3B,gBAAgB;;EAchB;IAXE,+DAA+D;IAC/D,aAAa;EACf;AACF;;AAeA;EAZE,kEAAkE;AACpE;;AAeA;EAZE,mFAAmF;EACnF,iFAAiF;EACjF,8EAA8E;AAChF;;AAeA;EAZE,8EAA8E;EAC9E,4EAA4E;EAC5E,yEAAyE;AAC3E;;AAeA;EAZE,mFAAmF;EACnF,iFAAiF;EACjF,8EAA8E;AAChF;;AAeA;EAZE,gEAAgE;EAChE,8DAA8D;EAC9D,2DAA2D;AAC7D;;AAeA;EAZE,iFAAiF;AACnF;;AAeA;EAZE,sEAAsE;AACxE;;AAkBA;EAfE;IACE,oBAAoB;EACtB;;EAEA;IACE,wBAAwB;EAC1B;AACF","sourcesContent":[".viewport {\r\n  position: fixed;\r\n  z-index: 9999;\r\n  display: flex;\r\n  width: min(calc(100vw - 2rem), 24rem);\r\n  flex-direction: column;\r\n  gap: var(--ac-space-3);\r\n  padding: var(--ac-space-4);\r\n  pointer-events: none;\r\n}\r\n\r\n.viewportTopLeft {\r\n  top: 0;\r\n  left: 0;\r\n  align-items: flex-start;\r\n}\r\n\r\n.viewportTopRight {\r\n  top: 0;\r\n  right: 0;\r\n  align-items: flex-end;\r\n}\r\n\r\n.viewportBottomLeft {\r\n  bottom: 0;\r\n  left: 0;\r\n  align-items: flex-start;\r\n}\r\n\r\n.viewportBottomRight {\r\n  right: 0;\r\n  bottom: 0;\r\n  align-items: flex-end;\r\n}\r\n\r\n.viewportTopCenter {\r\n  top: 0;\r\n  left: 50%;\r\n  align-items: center;\r\n  transform: translateX(-50%);\r\n}\r\n\r\n.viewportBottomCenter {\r\n  bottom: 0;\r\n  left: 50%;\r\n  align-items: center;\r\n  transform: translateX(-50%);\r\n}\r\n\r\n.root {\r\n  pointer-events: auto;\r\n  width: 100%;\r\n  border: 1px solid var(--ac-border);\r\n  border-radius: var(--ac-radius-xl);\r\n  background: color-mix(in oklab, var(--ac-background), var(--ac-card, var(--ac-background)) 25%);\r\n  color: var(--ac-foreground);\r\n  box-shadow:\r\n    0 18px 40px -24px rgb(15 23 42 / 0.45),\r\n    0 10px 18px -12px rgb(15 23 42 / 0.28);\r\n  overflow: hidden;\r\n  backdrop-filter: blur(16px);\r\n  transition:\r\n    opacity 160ms ease,\r\n    transform 160ms ease;\r\n\r\n  &[data-starting] {\r\n    opacity: 0;\r\n    transform: translateY(8px) scale(0.98);\r\n  }\r\n\r\n  &[data-ending] {\r\n    opacity: 0;\r\n    transform: translateY(4px) scale(0.98);\r\n  }\r\n}\r\n\r\n.content {\r\n  display: grid;\r\n  grid-template-columns: auto minmax(0, 1fr) auto;\r\n  gap: var(--ac-space-3);\r\n  align-items: flex-start;\r\n  padding: var(--ac-space-4);\r\n}\r\n\r\n.leading {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 1.5rem;\r\n  height: 1.5rem;\r\n  margin-top: 0.125rem;\r\n  color: inherit;\r\n}\r\n\r\n.body {\r\n  display: flex;\r\n  min-width: 0;\r\n  flex-direction: column;\r\n  gap: var(--ac-space-1);\r\n}\r\n\r\n.title {\r\n  margin: 0;\r\n  font-size: var(--ac-text-sm);\r\n  font-weight: 600;\r\n  line-height: 1.4;\r\n  color: inherit;\r\n}\r\n\r\n.description {\r\n  margin: 0;\r\n  font-size: var(--ac-text-sm);\r\n  line-height: 1.5;\r\n  color: var(--ac-muted-foreground);\r\n}\r\n\r\n.close {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 2rem;\r\n  height: 2rem;\r\n  border: 0;\r\n  border-radius: calc(var(--ac-radius-md) - 2px);\r\n  background: transparent;\r\n  color: var(--ac-muted-foreground);\r\n  cursor: pointer;\r\n  transition:\r\n    background-color 140ms ease,\r\n    color 140ms ease;\r\n\r\n  &:hover,\r\n  &:focus-visible {\r\n    background: color-mix(in oklab, var(--ac-muted) 84%, transparent);\r\n    color: var(--ac-foreground);\r\n    outline: none;\r\n  }\r\n}\r\n\r\n.closeIcon,\r\n.icon {\r\n  width: 1rem;\r\n  height: 1rem;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.iconSpin {\r\n  animation: toast-spin 900ms linear infinite;\r\n}\r\n\r\n.actions {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: var(--ac-space-2);\r\n  margin-top: var(--ac-space-2);\r\n}\r\n\r\n.primaryAction,\r\n.secondaryAction {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-height: 2rem;\r\n  padding: 0 var(--ac-space-3);\r\n  border-radius: var(--ac-radius-md);\r\n  border: 1px solid transparent;\r\n  font-size: var(--ac-text-xs);\r\n  font-weight: 600;\r\n  cursor: pointer;\r\n  transition:\r\n    background-color 140ms ease,\r\n    border-color 140ms ease,\r\n    color 140ms ease;\r\n}\r\n\r\n.primaryAction {\r\n  background: var(--ac-foreground);\r\n  color: var(--ac-background);\r\n\r\n  &:hover,\r\n  &:focus-visible {\r\n    background: color-mix(in oklab, var(--ac-foreground) 88%, white);\r\n    outline: none;\r\n  }\r\n}\r\n\r\n.secondaryAction {\r\n  background: transparent;\r\n  border-color: color-mix(in oklab, var(--ac-border) 75%, transparent);\r\n  color: var(--ac-foreground);\r\n\r\n  &:hover,\r\n  &:focus-visible {\r\n    background: color-mix(in oklab, var(--ac-muted) 72%, transparent);\r\n    outline: none;\r\n  }\r\n}\r\n\r\n.default {\r\n  border-color: color-mix(in oklab, var(--ac-border) 88%, transparent);\r\n}\r\n\r\n.success {\r\n  border-color: color-mix(in oklab, var(--ac-success, #16a34a) 45%, var(--ac-border));\r\n  background: color-mix(in oklab, var(--ac-success, #16a34a) 10%, var(--ac-background));\r\n  color: color-mix(in oklab, var(--ac-success, #16a34a) 78%, var(--ac-foreground));\r\n}\r\n\r\n.error {\r\n  border-color: color-mix(in oklab, var(--ac-destructive) 48%, var(--ac-border));\r\n  background: color-mix(in oklab, var(--ac-destructive) 10%, var(--ac-background));\r\n  color: color-mix(in oklab, var(--ac-destructive) 82%, var(--ac-foreground));\r\n}\r\n\r\n.info {\r\n  border-color: color-mix(in oklab, var(--ac-primary, #2563eb) 42%, var(--ac-border));\r\n  background: color-mix(in oklab, var(--ac-primary, #2563eb) 10%, var(--ac-background));\r\n  color: color-mix(in oklab, var(--ac-primary, #2563eb) 78%, var(--ac-foreground));\r\n}\r\n\r\n.warning {\r\n  border-color: color-mix(in oklab, #f59e0b 45%, var(--ac-border));\r\n  background: color-mix(in oklab, #f59e0b 12%, var(--ac-background));\r\n  color: color-mix(in oklab, #f59e0b 80%, var(--ac-foreground));\r\n}\r\n\r\n.loading {\r\n  border-color: color-mix(in oklab, var(--ac-muted-foreground) 34%, var(--ac-border));\r\n}\r\n\r\n.success .description,\r\n.error .description,\r\n.info .description,\r\n.warning .description {\r\n  color: color-mix(in oklab, currentcolor 68%, var(--ac-muted-foreground));\r\n}\r\n\r\n@keyframes toast-spin {\r\n  from {\r\n    transform: rotate(0deg);\r\n  }\r\n\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n"],"sourceRoot":""}