@telia/teddy 0.7.52 → 0.7.53

package/dist/components/notification/index.d.ts

@@ -99,7 +99,7 @@ declare const Notification: import('react').ForwardRefExoticComponent<Omit<Omit<
     imageGradient?: ("none" | "dark" | "light" | "default") | undefined;
     layout?: import('../card/card').Layout | undefined;
 } & import('react').RefAttributes<HTMLDivElement>, "ref">, "variant" | "layout" | "as"> & {
-    variant?: "error" | "warning" | "beige" | "gray" | "teal" | "information" | "success" | undefined;
+    variant?: "error" | "warning" | "beige" | "gray" | "teal" | "information" | "success" | "light-purple" | undefined;
     type?: "card" | "tile" | undefined;
     open?: boolean | undefined;
     defaultOpen?: boolean | undefined;

package/dist/components/notification/notification-root.cjs

@@ -24,26 +24,32 @@ function _interopNamespaceDefault(e) {
 }
 const CollapsiblePrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(CollapsiblePrimitive);
 const styles = {
-  "teddy-notification": "_teddy-notification_18bjx_3",
-  "teddy-notification--success": "_teddy-notification--success_18bjx_11",
-  "teddy-notification--warning": "_teddy-notification--warning_18bjx_16",
-  "teddy-notification--error": "_teddy-notification--error_18bjx_21",
-  "teddy-notification--information": "_teddy-notification--information_18bjx_26",
-  "teddy-notification--beige": "_teddy-notification--beige_18bjx_31",
-  "teddy-notification--teal": "_teddy-notification--teal_18bjx_36",
-  "teddy-notification--gray": "_teddy-notification--gray_18bjx_41",
-  "teddy-notification--tile": "_teddy-notification--tile_18bjx_46",
-  "teddy-notification__text": "_teddy-notification__text_18bjx_49",
-  "teddy-notification__dismiss": "_teddy-notification__dismiss_18bjx_52",
-  "teddy-notification__heading": "_teddy-notification__heading_18bjx_56",
-  "teddy-notification__footer": "_teddy-notification__footer_18bjx_65",
-  "teddy-notification__icon": "_teddy-notification__icon_18bjx_68"
+  "teddy-notification": "_teddy-notification_yr9vf_3",
+  "teddy-notification--success": "_teddy-notification--success_yr9vf_11",
+  "teddy-notification--warning": "_teddy-notification--warning_yr9vf_16",
+  "teddy-notification--error": "_teddy-notification--error_yr9vf_21",
+  "teddy-notification--information": "_teddy-notification--information_yr9vf_26",
+  "teddy-notification--beige": "_teddy-notification--beige_yr9vf_31",
+  "teddy-notification--teal": "_teddy-notification--teal_yr9vf_36",
+  "teddy-notification--gray": "_teddy-notification--gray_yr9vf_41",
+  "teddy-notification--light-purple": "_teddy-notification--light-purple_yr9vf_46",
+  "teddy-notification--tile": "_teddy-notification--tile_yr9vf_51",
+  "teddy-notification__text": "_teddy-notification__text_yr9vf_54",
+  "teddy-notification__dismiss": "_teddy-notification__dismiss_yr9vf_57",
+  "teddy-notification__heading": "_teddy-notification__heading_yr9vf_61",
+  "teddy-notification__footer": "_teddy-notification__footer_yr9vf_70",
+  "teddy-notification__icon": "_teddy-notification__icon_yr9vf_73"
 };
 const rootClassName = "teddy-notification";
 const NotificationContext = React.createContext(void 0);
 const Root = React.forwardRef(
   ({ className, open: openProp, defaultOpen, onOpenChange, variant, type, ...props }, forwardRef) => {
-    const classes = clsx([styles[`${rootClassName}`]], styles[`${rootClassName}--${variant}`], styles[`${rootClassName}--${type}`], className);
+    const classes = clsx(
+      [styles[`${rootClassName}`]],
+      styles[`${rootClassName}--${variant}`],
+      styles[`${rootClassName}--${type}`],
+      className
+    );
     const [open = true, setOpen] = reactUseControllableState.useControllableState({
       prop: openProp,
       defaultProp: defaultOpen,

package/dist/components/notification/notification-root.d.ts

@@ -7,7 +7,7 @@ export type RootProps = Omit<React.ComponentPropsWithoutRef<typeof Card>, 'varia
      * The variant of the notification.
      *
      */
-    variant?: 'success' | 'error' | 'warning' | 'information' | 'beige' | 'teal' | 'gray';
+    variant?: 'success' | 'error' | 'warning' | 'information' | 'beige' | 'teal' | 'gray' | 'light-purple';
     /**
      * The tyoe of the notification.
      *
@@ -73,7 +73,7 @@ export declare const Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<R
      * The variant of the notification.
      *
      */
-    variant?: "error" | "warning" | "beige" | "gray" | "teal" | "information" | "success" | undefined;
+    variant?: "error" | "warning" | "beige" | "gray" | "teal" | "information" | "success" | "light-purple" | undefined;
     /**
      * The tyoe of the notification.
      *

package/dist/components/notification/notification-root.js

@@ -5,26 +5,32 @@ import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { Card } from "../card/index.js";
 const styles = {
-  "teddy-notification": "_teddy-notification_18bjx_3",
-  "teddy-notification--success": "_teddy-notification--success_18bjx_11",
-  "teddy-notification--warning": "_teddy-notification--warning_18bjx_16",
-  "teddy-notification--error": "_teddy-notification--error_18bjx_21",
-  "teddy-notification--information": "_teddy-notification--information_18bjx_26",
-  "teddy-notification--beige": "_teddy-notification--beige_18bjx_31",
-  "teddy-notification--teal": "_teddy-notification--teal_18bjx_36",
-  "teddy-notification--gray": "_teddy-notification--gray_18bjx_41",
-  "teddy-notification--tile": "_teddy-notification--tile_18bjx_46",
-  "teddy-notification__text": "_teddy-notification__text_18bjx_49",
-  "teddy-notification__dismiss": "_teddy-notification__dismiss_18bjx_52",
-  "teddy-notification__heading": "_teddy-notification__heading_18bjx_56",
-  "teddy-notification__footer": "_teddy-notification__footer_18bjx_65",
-  "teddy-notification__icon": "_teddy-notification__icon_18bjx_68"
+  "teddy-notification": "_teddy-notification_yr9vf_3",
+  "teddy-notification--success": "_teddy-notification--success_yr9vf_11",
+  "teddy-notification--warning": "_teddy-notification--warning_yr9vf_16",
+  "teddy-notification--error": "_teddy-notification--error_yr9vf_21",
+  "teddy-notification--information": "_teddy-notification--information_yr9vf_26",
+  "teddy-notification--beige": "_teddy-notification--beige_yr9vf_31",
+  "teddy-notification--teal": "_teddy-notification--teal_yr9vf_36",
+  "teddy-notification--gray": "_teddy-notification--gray_yr9vf_41",
+  "teddy-notification--light-purple": "_teddy-notification--light-purple_yr9vf_46",
+  "teddy-notification--tile": "_teddy-notification--tile_yr9vf_51",
+  "teddy-notification__text": "_teddy-notification__text_yr9vf_54",
+  "teddy-notification__dismiss": "_teddy-notification__dismiss_yr9vf_57",
+  "teddy-notification__heading": "_teddy-notification__heading_yr9vf_61",
+  "teddy-notification__footer": "_teddy-notification__footer_yr9vf_70",
+  "teddy-notification__icon": "_teddy-notification__icon_yr9vf_73"
 };
 const rootClassName = "teddy-notification";
 const NotificationContext = React__default.createContext(void 0);
 const Root = React__default.forwardRef(
   ({ className, open: openProp, defaultOpen, onOpenChange, variant, type, ...props }, forwardRef) => {
-    const classes = clsx([styles[`${rootClassName}`]], styles[`${rootClassName}--${variant}`], styles[`${rootClassName}--${type}`], className);
+    const classes = clsx(
+      [styles[`${rootClassName}`]],
+      styles[`${rootClassName}--${variant}`],
+      styles[`${rootClassName}--${type}`],
+      className
+    );
     const [open = true, setOpen] = useControllableState({
       prop: openProp,
       defaultProp: defaultOpen,

package/dist/style.css

@@ -6196,7 +6196,7 @@
   }
 }@layer heading, button, card, notification;
 @layer notification {
-  ._teddy-notification_18bjx_3 {
+  ._teddy-notification_yr9vf_3 {
     --status-background: var(--teddy-color-background-status-success);
     --status-color: var(--teddy-color-text-status-success-strong);
     --status-icon-color: var(--teddy-color-text-status-success-strong);
@@ -6204,64 +6204,69 @@
     background-color: var(--status-background);
     gap: var(--teddy-spacing-50);
   }
-  ._teddy-notification--success_18bjx_11 {
+  ._teddy-notification--success_yr9vf_11 {
     --status-background: var(--teddy-color-background-status-success);
     --status-color: var(--teddy-color-text-status-success-strong);
     --status-icon-color: var(--teddy-color-text-status-success-strong);
   }
-  ._teddy-notification--warning_18bjx_16 {
+  ._teddy-notification--warning_yr9vf_16 {
     --status-background: var(--teddy-color-background-status-warning);
     --status-color: var(--teddy-color-text-status-warning-strong);
     --status-icon-color: var(--teddy-color-text-status-warning-strong);
   }
-  ._teddy-notification--error_18bjx_21 {
+  ._teddy-notification--error_yr9vf_21 {
     --status-background: var(--teddy-color-background-status-error);
     --status-color: var(--teddy-color-text-status-error-strong);
     --status-icon-color: var(--teddy-color-text-status-error-strong);
   }
-  ._teddy-notification--information_18bjx_26 {
+  ._teddy-notification--information_yr9vf_26 {
     --status-background: var(--teddy-color-background-status-info);
     --status-color: var(--teddy-color-text-status-info-strong);
     --status-icon-color: var(--teddy-color-text-status-info-strong);
   }
-  ._teddy-notification--beige_18bjx_31 {
+  ._teddy-notification--beige_yr9vf_31 {
     --status-background: var(--teddy-color-beige-50);
     --status-color: var(--teddy-color-beige-700);
     --status-icon-color: var(--teddy-color-beige-700e);
   }
-  ._teddy-notification--teal_18bjx_36 {
+  ._teddy-notification--teal_yr9vf_36 {
     --status-background: var(--teddy-color-teal-50);
     --status-color: var(--teddy-color-teal-700);
     --status-icon-color: var(--teddy-color-teal-700);
   }
-  ._teddy-notification--gray_18bjx_41 {
+  ._teddy-notification--gray_yr9vf_41 {
     --status-background: var(--teddy-color-gray-50);
     --status-color: var(--teddy-color-gray-700);
     --status-icon-color: var(--teddy-color-gray-700);
   }
-  ._teddy-notification--tile_18bjx_46 {
+  ._teddy-notification--light-purple_yr9vf_46 {
+    --status-background: var(--teddy-color-purple-50);
+    --status-color: var(--teddy-color-purple-800);
+    --status-icon-color: var(--teddy-color-purple-800);
+  }
+  ._teddy-notification--tile_yr9vf_51 {
     display: flex !important;
   }
-  ._teddy-notification--tile_18bjx_46 ._teddy-notification__text_18bjx_49 {
+  ._teddy-notification--tile_yr9vf_51 ._teddy-notification__text_yr9vf_54 {
     margin: 0 var(--teddy-spacing-400) 0 var(--teddy-spacing-100) !important;
   }
-  ._teddy-notification__dismiss_18bjx_52 {
+  ._teddy-notification__dismiss_yr9vf_57 {
     position: absolute;
     inset: var(--teddy-spacing-50) var(--teddy-spacing-50) auto auto;
   }
-  ._teddy-notification__heading_18bjx_56 {
+  ._teddy-notification__heading_yr9vf_61 {
     color: var(--status-color);
     display: flex;
     align-items: center;
   }
-  ._teddy-notification__text_18bjx_49 {
+  ._teddy-notification__text_yr9vf_54 {
     color: var(--status-color) !important;
     margin: 0 var(--teddy-spacing-400) 0 calc(var(--teddy-spacing-400) + var(--teddy-spacing-100)) !important;
   }
-  ._teddy-notification__footer_18bjx_65 {
+  ._teddy-notification__footer_yr9vf_70 {
     margin-left: calc(var(--teddy-spacing-400) + var(--teddy-spacing-100));
   }
-  ._teddy-notification__icon_18bjx_68 {
+  ._teddy-notification__icon_yr9vf_73 {
     color: var(--status-icon-color);
     margin-right: var(--teddy-spacing-100);
   }

package/package.json

@@ -20,7 +20,7 @@
     "pnpm": ">=10"
   },
   "private": false,
-  "version": "0.7.52",
+  "version": "0.7.53",
   "sideEffects": [
     "**/*.css",
     "**/*.svg"