@ecohouse/ui 0.1.56 → 0.1.58

package/src/icons/NotificationCancelled/NotificationCancelledIcon.web.tsx

@@ -0,0 +1,21 @@
+import type { IconProps } from "../types";
+
+export function NotificationCancelledIcon({
+  size = 44,
+  color = "#A63E3E",
+  strokeWidth = 2,
+  fillOpacity = 0.08,
+}: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 44 44" fill="none" aria-hidden="true">
+      <rect width="44" height="44" rx="22" fill={color} fillOpacity={fillOpacity} />
+      <path
+        d="M27 17L17 27M17 17L27 27"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/NotificationCancelled/index.ts

@@ -0,0 +1 @@
+export { NotificationCancelledIcon } from "./NotificationCancelledIcon";

package/src/icons/NotificationCheckout/NotificationCheckoutIcon.tsx

@@ -0,0 +1,22 @@
+import Svg, { Path, Rect } from "react-native-svg";
+import type { IconProps } from "../types";
+
+export function NotificationCheckoutIcon({
+  size = 44,
+  color = "#B46436",
+  strokeWidth = 2,
+  fillOpacity = 0.06,
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 44 44" fill="none">
+      <Rect width="44" height="44" rx="22" fill={color} fillOpacity={fillOpacity} />
+      <Path
+        d="M17 17L27 27M20.3333 27H27V20.3333"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/NotificationCheckout/NotificationCheckoutIcon.web.tsx

@@ -0,0 +1,21 @@
+import type { IconProps } from "../types";
+
+export function NotificationCheckoutIcon({
+  size = 44,
+  color = "#B46436",
+  strokeWidth = 2,
+  fillOpacity = 0.06,
+}: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 44 44" fill="none" aria-hidden="true">
+      <rect width="44" height="44" rx="22" fill={color} fillOpacity={fillOpacity} />
+      <path
+        d="M17 17L27 27M20.3333 27H27V20.3333"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/NotificationCheckout/index.ts

@@ -0,0 +1 @@
+export { NotificationCheckoutIcon } from "./NotificationCheckoutIcon";

package/src/icons/NotificationIcons.stories.tsx

@@ -0,0 +1,99 @@
+import type { ReactNode } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { StyleSheet, Text, View } from "react-native";
+import { colors } from "../theme";
+import { NotificationCancelledIcon } from "./NotificationCancelled";
+import { NotificationCheckoutIcon } from "./NotificationCheckout";
+import { NotificationQrCodeIcon } from "./NotificationQrCode";
+import { NotificationSuccessIcon } from "./NotificationSuccess";
+import { NotificationWarningIcon } from "./NotificationWarning";
+
+const meta = {
+  title: "Icons/Notifications",
+  component: NotificationSuccessIcon,
+  args: {
+    size: 44,
+    strokeWidth: 2,
+  },
+  argTypes: {
+    size: { control: { type: "number", min: 24, max: 88, step: 2 } },
+    color: { control: "color" },
+    strokeWidth: { control: { type: "number", min: 1, max: 4, step: 0.5 } },
+    fillOpacity: { control: { type: "number", min: 0, max: 1, step: 0.01 } },
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+} satisfies Meta<typeof NotificationSuccessIcon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Gallery: Story = {
+  render: () => (
+    <View style={styles.gallery}>
+      <IconPreview label="Success">
+        <NotificationSuccessIcon />
+      </IconPreview>
+      <IconPreview label="Cancelled">
+        <NotificationCancelledIcon />
+      </IconPreview>
+      <IconPreview label="Checkout">
+        <NotificationCheckoutIcon />
+      </IconPreview>
+      <IconPreview label="QR code">
+        <NotificationQrCodeIcon />
+      </IconPreview>
+      <IconPreview label="Warning">
+        <NotificationWarningIcon />
+      </IconPreview>
+    </View>
+  ),
+};
+
+export const Success: Story = {};
+
+export const Cancelled: Story = {
+  render: (args) => <NotificationCancelledIcon {...args} />,
+};
+
+export const Checkout: Story = {
+  render: (args) => <NotificationCheckoutIcon {...args} />,
+};
+
+export const QrCode: Story = {
+  name: "QR Code",
+  render: (args) => <NotificationQrCodeIcon {...args} />,
+};
+
+export const Warning: Story = {
+  render: (args) => <NotificationWarningIcon {...args} />,
+};
+
+function IconPreview({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <View style={styles.preview}>
+      {children}
+      <Text style={styles.label}>{label}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  gallery: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 24,
+    padding: 16,
+  },
+  preview: {
+    width: 88,
+    alignItems: "center",
+    gap: 8,
+  },
+  label: {
+    color: colors.white,
+    fontFamily: "Noto Sans Armenian",
+    fontSize: 12,
+  },
+});

package/src/icons/NotificationQrCode/NotificationQrCodeIcon.tsx

@@ -0,0 +1,25 @@
+import Svg, { Path, Rect } from "react-native-svg";
+import type { IconProps } from "../types";
+
+const QR_PATH =
+  "M17.4167 17.4167H17.425M26.5833 17.4167H26.5917M17.4167 26.5833H17.425M22.8333 22.8333H22.8417M26.5833 26.5833H26.5917M26.1667 29.5H29.5V26.1667M23.6667 25.75V29.5M29.5 23.6667H25.75M25 20.3333H28.1667C28.6334 20.3333 28.8667 20.3333 29.045 20.2425C29.2018 20.1626 29.3293 20.0351 29.4092 19.8783C29.5 19.7001 29.5 19.4667 29.5 19V15.8333C29.5 15.3666 29.5 15.1333 29.4092 14.955C29.3293 14.7982 29.2018 14.6707 29.045 14.5908C28.8667 14.5 28.6334 14.5 28.1667 14.5H25C24.5333 14.5 24.2999 14.5 24.1217 14.5908C23.9649 14.6707 23.8374 14.7982 23.7575 14.955C23.6667 15.1333 23.6667 15.3666 23.6667 15.8333V19C23.6667 19.4667 23.6667 19.7001 23.7575 19.8783C23.8374 20.0351 23.9649 20.1626 24.1217 20.2425C24.2999 20.3333 24.5333 20.3333 25 20.3333ZM15.8333 20.3333H19C19.4667 20.3333 19.7001 20.3333 19.8783 20.2425C20.0351 20.1626 20.1626 20.0351 20.2425 19.8783C20.3333 19.7001 20.3333 19.4667 20.3333 19V15.8333C20.3333 15.3666 20.3333 15.1333 20.2425 14.955C20.1626 14.7982 20.0351 14.6707 19.8783 14.5908C19.7001 14.5 19.4667 14.5 19 14.5H15.8333C15.3666 14.5 15.1333 14.5 14.955 14.5908C14.7982 14.6707 14.6707 14.7982 14.5908 14.955C14.5 15.1333 14.5 15.3666 14.5 15.8333V19C14.5 19.4667 14.5 19.7001 14.5908 19.8783C14.6707 20.0351 14.7982 20.1626 14.955 20.2425C15.1333 20.3333 15.3666 20.3333 15.8333 20.3333ZM15.8333 29.5H19C19.4667 29.5 19.7001 29.5 19.8783 29.4092C20.0351 29.3293 20.1626 29.2018 20.2425 29.045C20.3333 28.8667 20.3333 28.6334 20.3333 28.1667V25C20.3333 24.5333 20.3333 24.2999 20.2425 24.1217C20.1626 23.9649 20.0351 23.8374 19.8783 23.7575C19.7001 23.6667 19.4667 23.6667 19 23.6667H15.8333C15.3666 23.6667 15.1333 23.6667 14.955 23.7575C14.7982 23.8374 14.6707 23.9649 14.5908 24.1217C14.5 24.2999 14.5 24.5333 14.5 25V28.1667C14.5 28.6334 14.5 28.8667 14.5908 29.045C14.6707 29.2018 14.7982 29.3293 14.955 29.4092C15.1333 29.5 15.3666 29.5 15.8333 29.5Z";
+
+export function NotificationQrCodeIcon({
+  size = 44,
+  color = "#B46436",
+  strokeWidth = 2,
+  fillOpacity = 0.06,
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 44 44" fill="none">
+      <Rect width="44" height="44" rx="22" fill={color} fillOpacity={fillOpacity} />
+      <Path
+        d={QR_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/NotificationQrCode/NotificationQrCodeIcon.web.tsx

@@ -0,0 +1,24 @@
+import type { IconProps } from "../types";
+
+const QR_PATH =
+  "M17.4167 17.4167H17.425M26.5833 17.4167H26.5917M17.4167 26.5833H17.425M22.8333 22.8333H22.8417M26.5833 26.5833H26.5917M26.1667 29.5H29.5V26.1667M23.6667 25.75V29.5M29.5 23.6667H25.75M25 20.3333H28.1667C28.6334 20.3333 28.8667 20.3333 29.045 20.2425C29.2018 20.1626 29.3293 20.0351 29.4092 19.8783C29.5 19.7001 29.5 19.4667 29.5 19V15.8333C29.5 15.3666 29.5 15.1333 29.4092 14.955C29.3293 14.7982 29.2018 14.6707 29.045 14.5908C28.8667 14.5 28.6334 14.5 28.1667 14.5H25C24.5333 14.5 24.2999 14.5 24.1217 14.5908C23.9649 14.6707 23.8374 14.7982 23.7575 14.955C23.6667 15.1333 23.6667 15.3666 23.6667 15.8333V19C23.6667 19.4667 23.6667 19.7001 23.7575 19.8783C23.8374 20.0351 23.9649 20.1626 24.1217 20.2425C24.2999 20.3333 24.5333 20.3333 25 20.3333ZM15.8333 20.3333H19C19.4667 20.3333 19.7001 20.3333 19.8783 20.2425C20.0351 20.1626 20.1626 20.0351 20.2425 19.8783C20.3333 19.7001 20.3333 19.4667 20.3333 19V15.8333C20.3333 15.3666 20.3333 15.1333 20.2425 14.955C20.1626 14.7982 20.0351 14.6707 19.8783 14.5908C19.7001 14.5 19.4667 14.5 19 14.5H15.8333C15.3666 14.5 15.1333 14.5 14.955 14.5908C14.7982 14.6707 14.6707 14.7982 14.5908 14.955C14.5 15.1333 14.5 15.3666 14.5 15.8333V19C14.5 19.4667 14.5 19.7001 14.5908 19.8783C14.6707 20.0351 14.7982 20.1626 14.955 20.2425C15.1333 20.3333 15.3666 20.3333 15.8333 20.3333ZM15.8333 29.5H19C19.4667 29.5 19.7001 29.5 19.8783 29.4092C20.0351 29.3293 20.1626 29.2018 20.2425 29.045C20.3333 28.8667 20.3333 28.6334 20.3333 28.1667V25C20.3333 24.5333 20.3333 24.2999 20.2425 24.1217C20.1626 23.9649 20.0351 23.8374 19.8783 23.7575C19.7001 23.6667 19.4667 23.6667 19 23.6667H15.8333C15.3666 23.6667 15.1333 23.6667 14.955 23.7575C14.7982 23.8374 14.6707 23.9649 14.5908 24.1217C14.5 24.2999 14.5 24.5333 14.5 25V28.1667C14.5 28.6334 14.5 28.8667 14.5908 29.045C14.6707 29.2018 14.7982 29.3293 14.955 29.4092C15.1333 29.5 15.3666 29.5 15.8333 29.5Z";
+
+export function NotificationQrCodeIcon({
+  size = 44,
+  color = "#B46436",
+  strokeWidth = 2,
+  fillOpacity = 0.06,
+}: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 44 44" fill="none" aria-hidden="true">
+      <rect width="44" height="44" rx="22" fill={color} fillOpacity={fillOpacity} />
+      <path
+        d={QR_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/NotificationQrCode/index.ts

@@ -0,0 +1 @@
+export { NotificationQrCodeIcon } from "./NotificationQrCodeIcon";

package/src/icons/NotificationSuccess/NotificationSuccessIcon.tsx

@@ -0,0 +1,26 @@
+import Svg, { Path } from "react-native-svg";
+import type { IconProps } from "../types";
+
+export function NotificationSuccessIcon({
+  size = 44,
+  color = "#34A853",
+  strokeWidth = 2,
+  fillOpacity = 0.08,
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 44 44" fill="none">
+      <Path
+        d="M0 22C0 9.84974 9.84974 0 22 0C34.1503 0 44 9.84974 44 22C44 34.1503 34.1503 44 22 44C9.84974 44 0 34.1503 0 22Z"
+        fill={color}
+        fillOpacity={fillOpacity}
+      />
+      <Path
+        d="M28.6666 17L19.4999 26.1667L15.3333 22"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/NotificationSuccess/NotificationSuccessIcon.web.tsx

@@ -0,0 +1,25 @@
+import type { IconProps } from "../types";
+
+export function NotificationSuccessIcon({
+  size = 44,
+  color = "#34A853",
+  strokeWidth = 2,
+  fillOpacity = 0.08,
+}: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 44 44" fill="none" aria-hidden="true">
+      <path
+        d="M0 22C0 9.84974 9.84974 0 22 0C34.1503 0 44 9.84974 44 22C44 34.1503 34.1503 44 22 44C9.84974 44 0 34.1503 0 22Z"
+        fill={color}
+        fillOpacity={fillOpacity}
+      />
+      <path
+        d="M28.6666 17L19.4999 26.1667L15.3333 22"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/NotificationSuccess/index.ts

@@ -0,0 +1 @@
+export { NotificationSuccessIcon } from "./NotificationSuccessIcon";

package/src/icons/NotificationWarning/NotificationWarningIcon.tsx

@@ -0,0 +1,22 @@
+import Svg, { Path, Rect } from "react-native-svg";
+import type { IconProps } from "../types";
+
+export function NotificationWarningIcon({
+  size = 44,
+  color = "#A63E3E",
+  strokeWidth = 2,
+  fillOpacity = 0.08,
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 44 44" fill="none">
+      <Rect width="44" height="44" rx="22" fill={color} fillOpacity={fillOpacity} />
+      <Path
+        d="M21.9999 19.5V22.8333M21.9999 26.1667H22.0082M20.846 15.2431L13.9919 27.082C13.6117 27.7386 13.4216 28.0669 13.4497 28.3364C13.4742 28.5715 13.5974 28.785 13.7885 28.924C14.0077 29.0833 14.387 29.0833 15.1458 29.0833H28.8539C29.6127 29.0833 29.9921 29.0833 30.2112 28.924C30.4024 28.785 30.5255 28.5715 30.55 28.3364C30.5781 28.0669 30.388 27.7386 30.0078 27.082L23.1538 15.2431C22.775 14.5888 22.5856 14.2617 22.3385 14.1518C22.1229 14.0559 21.8768 14.0559 21.6613 14.1518C21.4142 14.2617 21.2248 14.5888 20.846 15.2431Z"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/NotificationWarning/NotificationWarningIcon.web.tsx

@@ -0,0 +1,21 @@
+import type { IconProps } from "../types";
+
+export function NotificationWarningIcon({
+  size = 44,
+  color = "#A63E3E",
+  strokeWidth = 2,
+  fillOpacity = 0.08,
+}: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 44 44" fill="none" aria-hidden="true">
+      <rect width="44" height="44" rx="22" fill={color} fillOpacity={fillOpacity} />
+      <path
+        d="M21.9999 19.5V22.8333M21.9999 26.1667H22.0082M20.846 15.2431L13.9919 27.082C13.6117 27.7386 13.4216 28.0669 13.4497 28.3364C13.4742 28.5715 13.5974 28.785 13.7885 28.924C14.0077 29.0833 14.387 29.0833 15.1458 29.0833H28.8539C29.6127 29.0833 29.9921 29.0833 30.2112 28.924C30.4024 28.785 30.5255 28.5715 30.55 28.3364C30.5781 28.0669 30.388 27.7386 30.0078 27.082L23.1538 15.2431C22.775 14.5888 22.5856 14.2617 22.3385 14.1518C22.1229 14.0559 21.8768 14.0559 21.6613 14.1518C21.4142 14.2617 21.2248 14.5888 20.846 15.2431Z"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/NotificationWarning/index.ts

@@ -0,0 +1 @@
+export { NotificationWarningIcon } from "./NotificationWarningIcon";

package/src/icons/index.ts

@@ -27,6 +27,7 @@ export { CheckIcon } from "./Check";
 export { CheckBadgeIcon } from "./CheckBadge";
 export { ChevronDownIcon } from "./ChevronDown";
 export { ChevronLeftIcon } from "./ChevronLeft";
+export { ChevronRightIcon } from "./ChevronRight";
 export { ClockIcon } from "./Clock";
 export { CloseIcon } from "./Close";
 export { CloudUploadIcon } from "./CloudUpload";
@@ -63,6 +64,7 @@ export { CutleryIcon } from "./Cutlery";
 export { DollarIcon } from "./Dollar";
 export { DramIcon } from "./Dram";
 export { DragHandleIcon } from "./DragHandle";
+export { DoubleCheckIcon } from "./DoubleCheck";
 export { HeartIcon } from "./Heart";
 export { HeadsetIcon } from "./Headset";
 export { GlobeIcon } from "./Globe";
@@ -91,6 +93,11 @@ export { MoonStarsIcon } from "./MoonStars";
 export { MoreHorizontalIcon } from "./MoreHorizontal";
 export { NavigateIcon } from "./Navigate";
 export { NoPetsIcon } from "./NoPets";
+export { NotificationCancelledIcon } from "./NotificationCancelled";
+export { NotificationCheckoutIcon } from "./NotificationCheckout";
+export { NotificationQrCodeIcon } from "./NotificationQrCode";
+export { NotificationSuccessIcon } from "./NotificationSuccess";
+export { NotificationWarningIcon } from "./NotificationWarning";
 export { PhoneIcon } from "./Phone";
 export { PlusIcon } from "./Plus";
 export { MinusIcon } from "./Minus";

package/src/icons/registry.ts

@@ -17,6 +17,7 @@ import { CheckIcon } from "./Check";
 import { CheckBadgeIcon } from "./CheckBadge";
 import { ChevronDownIcon } from "./ChevronDown";
 import { ChevronLeftIcon } from "./ChevronLeft";
+import { ChevronRightIcon } from "./ChevronRight";
 import { ClockIcon } from "./Clock";
 import { CloseIcon } from "./Close";
 import { DeactivateIcon } from "./Deactivate";
@@ -52,6 +53,7 @@ import { CutleryIcon } from "./Cutlery";
 import { DollarIcon } from "./Dollar";
 import { DramIcon } from "./Dram";
 import { DragHandleIcon } from "./DragHandle";
+import { DoubleCheckIcon } from "./DoubleCheck";
 import { HeartIcon } from "./Heart";
 import { HeadsetIcon } from "./Headset";
 import { GlobeIcon } from "./Globe";
@@ -79,6 +81,11 @@ import { MoonStarsIcon } from "./MoonStars";
 import { MoreHorizontalIcon } from "./MoreHorizontal";
 import { NavigateIcon } from "./Navigate";
 import { NoPetsIcon } from "./NoPets";
+import { NotificationCancelledIcon } from "./NotificationCancelled";
+import { NotificationCheckoutIcon } from "./NotificationCheckout";
+import { NotificationQrCodeIcon } from "./NotificationQrCode";
+import { NotificationSuccessIcon } from "./NotificationSuccess";
+import { NotificationWarningIcon } from "./NotificationWarning";
 import { PhoneIcon } from "./Phone";
 import { PlusIcon } from "./Plus";
 import { RefreshIcon } from "./Refresh";
@@ -127,6 +134,7 @@ export const icons = {
   checkSuccess: CheckSuccessIcon,
   chevronDown: ChevronDownIcon,
   chevronLeft: ChevronLeftIcon,
+  chevronRight: ChevronRightIcon,
   clock: ClockIcon,
   close: CloseIcon,
   deactivate: DeactivateIcon,
@@ -171,6 +179,11 @@ export const icons = {
   navigate: NavigateIcon,
   noPets: NoPetsIcon,
   noSmoking: NoSmokingIcon,
+  notificationCancelled: NotificationCancelledIcon,
+  notificationCheckout: NotificationCheckoutIcon,
+  notificationQrCode: NotificationQrCodeIcon,
+  notificationSuccess: NotificationSuccessIcon,
+  notificationWarning: NotificationWarningIcon,
   paw: PawIcon,
   phone: PhoneIcon,
   qrCode: QrCodeIcon,
@@ -206,6 +219,7 @@ export const icons = {
   dollar: DollarIcon,
   dram: DramIcon,
   dragHandle: DragHandleIcon,
+  doubleCheck: DoubleCheckIcon,
   externalLink: ExternalLinkIcon,
   eye: EyeIcon,
   image: ImageIcon,
@@ -223,6 +237,7 @@ export const iconGroups = {
     "arrowRight",
     "chevronDown",
     "chevronLeft",
+    "chevronRight",
     "home",
     "listView",
     "locationPin",
@@ -248,6 +263,7 @@ export const iconGroups = {
     "checkSuccess",
     "copy",
     "download",
+    "doubleCheck",
     "dragHandle",
     "search",
     "calendar",
@@ -310,6 +326,13 @@ export const iconGroups = {
     "whatsApp",
   ],
   communication: ["mail", "phone"],
+  notifications: [
+    "notificationSuccess",
+    "notificationCancelled",
+    "notificationCheckout",
+    "notificationQrCode",
+    "notificationWarning",
+  ],
   social: ["apple", "facebook", "googlePlay", "instagram", "linkedin"],
   interface: [
     "areaExpand",

package/src/index.ts

@@ -4,6 +4,7 @@ export {
   AccountHeader,
   Badge,
   StatusBadge,
+  StatusIndicator,
   PaginationDots,
   StepPager,
   InfoTile,
@@ -33,6 +34,12 @@ export {
   ToggleRow,
   RatingInput,
   CommentCard,
+  BookingWarningNotification,
+  CancelledBookingNotification,
+  GuestCheckInNotification,
+  NewBookingNotification,
+  NotificationStatusSkeleton,
+  QrKeyNotification,
   Range,
   RadioButton,
 } from "./components";
@@ -46,6 +53,8 @@ export type {
   BadgeVariant,
   StatusBadgeProps,
   StatusBadgeTone,
+  StatusIndicatorProps,
+  StatusIndicatorStatus,
   PaginationDotsProps,
   StepPagerProps,
   InfoTileProps,
@@ -94,6 +103,7 @@ export type {
   ToggleRowProps,
   RatingInputProps,
   CommentCardProps,
+  NotificationStatusProps,
   RangeProps,
   RangeValue,
   RadioButtonProps,
@@ -148,6 +158,7 @@ export {
   CheckBadgeIcon,
   ChevronDownIcon,
   ChevronLeftIcon,
+  ChevronRightIcon,
   ClockIcon,
   CloseIcon,
   CloudUploadIcon,
@@ -205,6 +216,11 @@ export {
   MoonStarsIcon,
   NavigateIcon,
   NoPetsIcon,
+  NotificationCancelledIcon,
+  NotificationCheckoutIcon,
+  NotificationQrCodeIcon,
+  NotificationSuccessIcon,
+  NotificationWarningIcon,
   PhoneIcon,
   PlusIcon,
   RefreshIcon,
@@ -232,6 +248,7 @@ export {
   WasherIcon,
   CutleryIcon,
   DollarIcon,
+  DoubleCheckIcon,
   DragHandleIcon,
   ExternalLinkIcon,
   EyeIcon,