@simplybusiness/mobius 9.3.4 → 10.1.0

package/src/components/Toast/Toast.css

@@ -1,233 +1,235 @@
-/* Toaster container positioning (keep Sonner's positioning logic) */
-[data-sonner-toaster] {
-  font-family: var(--font-family);
-}
-
-/* Base toast styles */
-.mobius-toast {
-  position: relative;
-  font-family: var(--font-family);
-  font-size: var(--font-size-regular);
-  line-height: var(--line-height-normal);
-  color: var(--color-text);
-  background-color: var(--color-background);
-  border: 2px solid var(--color-border);
-  border-radius: var(--radius-1);
-  box-shadow: var(--shadow-md);
-  padding: var(--size-md);
-  display: flex;
-  align-items: flex-start;
-  gap: var(--size-sm);
-  width: var(--toast-width);
-  max-width: calc(100vw - var(--size-lg) * 2);
-  box-sizing: border-box;
-}
-
-/* Variant styles */
-.mobius-toast.--info {
-  border-color: var(--color-info);
-  background-color: var(--color-info-background);
-}
-
-.mobius-toast.--success {
-  border-color: var(--color-valid);
-  background-color: var(--color-valid-background);
-}
-
-.mobius-toast.--warning {
-  border-color: var(--color-warning);
-  background-color: var(--color-warning-background);
-}
-
-.mobius-toast.--error {
-  border-color: var(--color-error);
-  background-color: var(--color-error-background);
-}
-
-/* Icon */
-.mobius-toast__icon {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  padding-top: 2px;
-}
-
-.mobius-toast__icon .mobius-icon {
-  width: 1.25em;
-  height: 1.25em;
-}
-
-/* Body wrapper for content + actions */
-.mobius-toast__body {
-  display: flex;
-  flex-direction: column;
-  gap: var(--size-sm);
-  flex: 1;
-  min-width: 0;
-  padding-right: var(--size-lg);
-}
-
-/* Content wrapper (title + description) */
-.mobius-toast__content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--size-xxs);
-}
-
-/* Title */
-.mobius-toast__title {
-  font-size: var(--font-size-regular);
-  font-weight: 600;
-  line-height: var(--line-height-normal);
-  color: var(--color-text);
-  margin: 0;
-}
-
-/* Description */
-.mobius-toast__description {
-  font-size: var(--font-size-regular);
-  line-height: var(--line-height-normal);
-  color: var(--color-text);
-  margin: 0;
-}
-
-/* Actions wrapper - separate row for buttons */
-.mobius-toast__actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--size-xs);
-  flex-wrap: wrap;
-}
-
-/* Shared button styles */
-.mobius-toast__action,
-.mobius-toast__cancel {
-  font-family: var(--font-family);
-  font-size: var(--font-size-small);
-  font-weight: 600;
-  padding: var(--size-xs) var(--size-sm);
-  border-radius: var(--radius-1);
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-  flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Action button (primary) */
-.mobius-toast__action {
-  background-color: var(--button-primary-color);
-  color: var(--button-primary-content-color);
-  border: none;
-}
-
-.mobius-toast__action:hover {
-  filter: brightness(0.9);
-}
-
-/* Action button variant colors */
-.mobius-toast.--info .mobius-toast__action {
-  background-color: var(--color-info);
-}
-
-.mobius-toast.--success .mobius-toast__action {
-  background-color: var(--color-valid);
-}
-
-.mobius-toast.--warning .mobius-toast__action {
-  background-color: var(--color-warning);
-}
-
-.mobius-toast.--error .mobius-toast__action {
-  background-color: var(--color-error);
-}
-
-/* Cancel button (secondary) */
-.mobius-toast__cancel {
-  background-color: transparent;
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
-}
-
-.mobius-toast__cancel:hover {
-  background-color: var(--color-background-hover);
-}
-
-/* Cancel button variant border colors */
-.mobius-toast.--info .mobius-toast__cancel {
-  border-color: var(--color-info);
-  color: var(--color-info);
-}
-
-.mobius-toast.--success .mobius-toast__cancel {
-  border-color: var(--color-valid);
-  color: var(--color-valid);
-}
-
-.mobius-toast.--warning .mobius-toast__cancel {
-  border-color: var(--color-warning);
-  color: var(--color-warning);
-}
-
-.mobius-toast.--error .mobius-toast__cancel {
-  border-color: var(--color-error);
-  color: var(--color-error);
-}
-
-/* Close button */
-.mobius-toast__close {
-  position: absolute;
-  top: var(--size-md);
-  right: var(--size-sm);
-  background: transparent;
-  border: none;
-  border-radius: var(--radius-1);
-  cursor: pointer;
-  padding: var(--size-xxs);
-  width: var(--size-md);
-  height: var(--size-md);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-text-muted);
-  transition: color 0.15s ease;
-}
-
-.mobius-toast__close:hover {
-  color: var(--color-text);
-}
-
-/* Close icon */
-.mobius-toast__close-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.mobius-toast__close-icon .mobius-icon {
-  width: 1.25em;
-  height: 1.25em;
-}
-
-/* Close button variant colors */
-.mobius-toast.--info .mobius-toast__close {
-  color: var(--color-info);
-}
-
-.mobius-toast.--success .mobius-toast__close {
-  color: var(--color-valid);
-}
-
-.mobius-toast.--warning .mobius-toast__close {
-  color: var(--color-warning);
-}
-
-.mobius-toast.--error .mobius-toast__close {
-  color: var(--color-error);
-}
-
-/* Close button hover - darken slightly */
-.mobius-toast .mobius-toast__close:hover {
-  filter: brightness(0.8);
+@layer atoms {
+  /* Toaster container positioning (keep Sonner's positioning logic) */
+  [data-sonner-toaster] {
+    font-family: var(--font-family);
+  }
+
+  /* Base toast styles */
+  .mobius-toast {
+    position: relative;
+    font-family: var(--font-family);
+    font-size: var(--font-size-regular);
+    line-height: var(--line-height-normal);
+    color: var(--color-text);
+    background-color: var(--color-background);
+    border: 2px solid var(--color-border);
+    border-radius: var(--radius-1);
+    box-shadow: var(--shadow-md);
+    padding: var(--size-md);
+    display: flex;
+    align-items: flex-start;
+    gap: var(--size-sm);
+    width: var(--toast-width);
+    max-width: calc(100vw - var(--size-lg) * 2);
+    box-sizing: border-box;
+  }
+
+  /* Variant styles */
+  .mobius-toast.--info {
+    border-color: var(--color-info);
+    background-color: var(--color-info-background);
+  }
+
+  .mobius-toast.--success {
+    border-color: var(--color-valid);
+    background-color: var(--color-valid-background);
+  }
+
+  .mobius-toast.--warning {
+    border-color: var(--color-warning);
+    background-color: var(--color-warning-background);
+  }
+
+  .mobius-toast.--error {
+    border-color: var(--color-error);
+    background-color: var(--color-error-background);
+  }
+
+  /* Icon */
+  .mobius-toast__icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    padding-top: 2px;
+  }
+
+  .mobius-toast__icon .mobius-icon {
+    width: 1.25em;
+    height: 1.25em;
+  }
+
+  /* Body wrapper for content + actions */
+  .mobius-toast__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-sm);
+    flex: 1;
+    min-width: 0;
+    padding-right: var(--size-lg);
+  }
+
+  /* Content wrapper (title + description) */
+  .mobius-toast__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-xxs);
+  }
+
+  /* Title */
+  .mobius-toast__title {
+    font-size: var(--font-size-regular);
+    font-weight: 600;
+    line-height: var(--line-height-normal);
+    color: var(--color-text);
+    margin: 0;
+  }
+
+  /* Description */
+  .mobius-toast__description {
+    font-size: var(--font-size-regular);
+    line-height: var(--line-height-normal);
+    color: var(--color-text);
+    margin: 0;
+  }
+
+  /* Actions wrapper - separate row for buttons */
+  .mobius-toast__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--size-xs);
+    flex-wrap: wrap;
+  }
+
+  /* Shared button styles */
+  .mobius-toast__action,
+  .mobius-toast__cancel {
+    font-family: var(--font-family);
+    font-size: var(--font-size-small);
+    font-weight: 600;
+    padding: var(--size-xs) var(--size-sm);
+    border-radius: var(--radius-1);
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Action button (primary) */
+  .mobius-toast__action {
+    background-color: var(--button-primary-color);
+    color: var(--button-primary-content-color);
+    border: none;
+  }
+
+  .mobius-toast__action:hover {
+    filter: brightness(0.9);
+  }
+
+  /* Action button variant colors */
+  .mobius-toast.--info .mobius-toast__action {
+    background-color: var(--color-info);
+  }
+
+  .mobius-toast.--success .mobius-toast__action {
+    background-color: var(--color-valid);
+  }
+
+  .mobius-toast.--warning .mobius-toast__action {
+    background-color: var(--color-warning);
+  }
+
+  .mobius-toast.--error .mobius-toast__action {
+    background-color: var(--color-error);
+  }
+
+  /* Cancel button (secondary) */
+  .mobius-toast__cancel {
+    background-color: transparent;
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+  }
+
+  .mobius-toast__cancel:hover {
+    background-color: var(--color-background-hover);
+  }
+
+  /* Cancel button variant border colors */
+  .mobius-toast.--info .mobius-toast__cancel {
+    border-color: var(--color-info);
+    color: var(--color-info);
+  }
+
+  .mobius-toast.--success .mobius-toast__cancel {
+    border-color: var(--color-valid);
+    color: var(--color-valid);
+  }
+
+  .mobius-toast.--warning .mobius-toast__cancel {
+    border-color: var(--color-warning);
+    color: var(--color-warning);
+  }
+
+  .mobius-toast.--error .mobius-toast__cancel {
+    border-color: var(--color-error);
+    color: var(--color-error);
+  }
+
+  /* Close button */
+  .mobius-toast__close {
+    position: absolute;
+    top: var(--size-md);
+    right: var(--size-sm);
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-1);
+    cursor: pointer;
+    padding: var(--size-xxs);
+    width: var(--size-md);
+    height: var(--size-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-text-muted);
+    transition: color 0.15s ease;
+  }
+
+  .mobius-toast__close:hover {
+    color: var(--color-text);
+  }
+
+  /* Close icon */
+  .mobius-toast__close-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .mobius-toast__close-icon .mobius-icon {
+    width: 1.25em;
+    height: 1.25em;
+  }
+
+  /* Close button variant colors */
+  .mobius-toast.--info .mobius-toast__close {
+    color: var(--color-info);
+  }
+
+  .mobius-toast.--success .mobius-toast__close {
+    color: var(--color-valid);
+  }
+
+  .mobius-toast.--warning .mobius-toast__close {
+    color: var(--color-warning);
+  }
+
+  .mobius-toast.--error .mobius-toast__close {
+    color: var(--color-error);
+  }
+
+  /* Close button hover - darken slightly */
+  .mobius-toast .mobius-toast__close:hover {
+    filter: brightness(0.8);
+  }
 }

package/dist/esm/chunk-HHJ4Y5JQ.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/TextOrHTML/TextOrHTML.tsx"],
-  "sourcesContent": ["import type { RefAttributes } from \"react\";\nimport { useMemo } from \"react\";\nimport type { TextElementType, TextProps } from \"../Text/Text\";\nimport { Text } from \"../Text/Text\";\n\nexport type HTMLElementType = \"span\" | \"div\";\n\nexport interface TextOrHTMLProps\n  extends Omit<TextProps, \"children\">, RefAttributes<TextElementType> {\n  /** HTML string to be rendered with dangerouslySetInnerHTML */\n  text: string;\n  /** Custom class name for the dangerous HTML element */\n  htmlClassName?: string;\n  /** HTML element type for the dangerous HTML element */\n  htmlElementType?: HTMLElementType;\n  /** If true, wraps the dangerous HTML element inside a Text component */\n  textWrapper?: boolean;\n}\n\nconst TextOrHTML = ({\n  ref,\n  text,\n  htmlClassName,\n  htmlElementType = \"span\",\n  textWrapper = false,\n  ...textProps\n}: TextOrHTMLProps) => {\n  const DangerousComponent = htmlElementType;\n\n  // Memoize the dangerouslySetInnerHTML object to prevent unnecessary re-renders\n  // See: https://github.com/facebook/react/issues/31660\n  const dangerousHTML = useMemo(() => ({ __html: text }), [text]);\n\n  const dangerousElement = (\n    <DangerousComponent\n      className={htmlClassName}\n      dangerouslySetInnerHTML={dangerousHTML}\n    />\n  );\n\n  if (textWrapper) {\n    return (\n      <Text ref={ref} {...textProps}>\n        {dangerousElement}\n      </Text>\n    );\n  }\n\n  return dangerousElement;\n};\n\nTextOrHTML.displayName = \"TextOrHTML\";\nexport { TextOrHTML };\n"],
-  "mappings": ";;;;;AACA,SAAS,eAAe;AAiCpB;AAfJ,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,GAAG;AACL,MAAuB;AACrB,QAAM,qBAAqB;AAI3B,QAAM,gBAAgB,QAAQ,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC,IAAI,CAAC;AAE9D,QAAM,mBACJ;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,yBAAyB;AAAA;AAAA,EAC3B;AAGF,MAAI,aAAa;AACf,WACE,oBAAC,QAAK,KAAW,GAAG,WACjB,4BACH;AAAA,EAEJ;AAEA,SAAO;AACT;AAEA,WAAW,cAAc;",
-  "names": []
-}