@sonic-equipment/ui 0.0.11 → 0.0.13

package/README.md

@@ -26,32 +26,23 @@ npm install @sonic-equipment/ui
 #### Import styles
 
 ```css
-@import "@sonic-equipment/ui/reset.css";
-@import "@sonic-equipment/ui/fonts.css";
-@import "@sonic-equipment/ui/styles.css";
+@import '@sonic-equipment/ui/fonts.css';
+@import '@sonic-equipment/ui/styles.css';
 ```
 
 Or within your App.tsx
 
 ```tsx
-import "@sonic-equipment/ui/reset.css";
-import "@sonic-equipment/ui/fonts.css";
-import "@sonic-equipment/ui/styles.css";
+import '@sonic-equipment/ui/fonts.css'
+import '@sonic-equipment/ui/styles.css'
 ```
 
 #### Apply base styles
 
+Use the following import to apply the base styles to your project or copy the content of `base.css` into your project's global styles:
+
 ```css
-html {
-  font-family: var(--font-family-sonic);
-  font-size: var(--font-size-base);
-  text-size-adjust: none;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+import '@sonic-equipment/ui/base.css'
 ```
 
 ### Usage
@@ -59,13 +50,13 @@ html {
 Import and use a component from the library like so:
 
 ```jsx
-import { Button } from "@sonic-equipment/ui";
+import { Button } from '@sonic-equipment/ui'
 
 const App = () => (
   <Button variant="solid" color="primary">
     Click Me
   </Button>
-);
+)
 ```
 
 ## Styling
@@ -189,3 +180,40 @@ Publishing is handled via a private npm registry. Ensure you have the necessary
 ```bash
 pnpm publish
 ```
+
+## Best practices
+
+### TypeScript - Types vs Interfaces
+
+When defining types for prefer interfaces to describe data types / object structures and use types for union types, tuples, and other types.
+
+Examples for interfaces:
+
+```ts
+interface ButtonProps {
+  variant: 'solid' | 'outline' | 'ghost'
+  color: 'primary' | 'secondary' | 'tertiary'
+}
+
+interface CheckboxProps extends ExternalLibraryCheckboxProps {
+  checked: boolean
+  onChange: (checked: boolean) => void
+}
+
+interface Product {
+  id: string
+  name: string
+  price: number
+}
+```
+
+Examples for types:
+
+```ts
+type ButtonVariant = 'solid' | 'outline' | 'ghost'
+type ButtonColor = 'primary' | 'secondary' | 'tertiary'
+
+type OnClickHandler = (event: MouseEvent) => void
+
+type Key = string | number
+```

package/dist/badges/tag/tag.d.ts

@@ -0,0 +1,5 @@
+interface TagProps {
+    children: string;
+}
+export declare function Tag({ children }: TagProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/badges/tag/tag.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react';
+import { Tag } from './tag';
+declare const meta: {
+    args: {
+        children: string;
+    };
+    component: typeof Tag;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const LongText: Story;
+export declare const NoText: Story;

package/dist/base.css

@@ -0,0 +1,18 @@
+/*********************************************************
+  *
+  *  Base styling for the entire application
+  *
+  *********************************************************/
+
+html {
+  font-family: var(--font-family-sonic);
+  font-size: var(--font-size-base);
+  -webkit-text-size-adjust: none;
+     -moz-text-size-adjust: none;
+          text-size-adjust: none;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/dist/buttons/button/button.d.ts

@@ -1,9 +1,14 @@
-import { Button as AriaButton } from "react-aria-components";
-import { ComponentPropsWithoutRef } from "react";
-export type ButtonProps = ComponentPropsWithoutRef<typeof AriaButton> & {
-    variant?: "solid" | "outline" | "ghost";
-    size?: "md" | "lg";
-    color?: "primary" | "secondary" | "tertiary" | "quaternary";
+/// <reference types="react" />
+export interface ButtonProps {
+    _pseudo?: 'none' | 'focus' | 'hover' | 'active';
+    children: string;
+    className?: string;
+    color?: 'primary' | 'secondary';
+    icon?: React.ReactNode;
+    isDisabled?: boolean;
+    onPress?: VoidFunction;
+    size?: 'md' | 'lg';
+    variant?: 'solid' | 'outline' | 'ghost';
     withArrow?: boolean;
-};
-export declare function Button({ children, variant, size, color, className, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+}
+export declare function Button({ _pseudo, children, className, color, icon, isDisabled, onPress, size, variant, withArrow, }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/buttons/button/button.stories.d.ts

@@ -1,18 +1,23 @@
-import type { StoryObj } from "@storybook/react";
-import { Button } from "./button";
+import type { StoryObj } from '@storybook/react';
+import { Button } from './button';
 declare const meta: {
-    title: string;
+    args: {
+        onPress: import("@vitest/spy").Mock<[], void>;
+    };
     component: typeof Button;
     parameters: {
         layout: string;
     };
     tags: string[];
-    args: {
-        onPress: import("@storybook/test").Mock<[e: import("react-aria-components").PressEvent], void>;
-    };
+    title: string;
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Solid: Story;
+export declare const PrimaryActive: Story;
+export declare const PrimaryDisabled: Story;
+export declare const IconOnly: Story;
+export declare const WithArrow: Story;
 export declare const Outlined: Story;
+export declare const SecondaryActive: Story;
 export declare const Ghost: Story;

package/dist/buttons/favorite/favorite-button.d.ts

@@ -1,5 +1,5 @@
-export type FavoriteButtonProps = {
+export interface FavoriteButtonProps {
     isFavorite: boolean;
     onPress: () => void;
-};
+}
 export declare function FavoriteButton({ isFavorite, onPress }: FavoriteButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/buttons/favorite/favorite-button.stories.d.ts

@@ -1,15 +1,15 @@
-import { StoryObj } from "@storybook/react";
-import { FavoriteButton } from "./favorite-button";
+import { StoryObj } from '@storybook/react';
+import { FavoriteButton } from './favorite-button';
 declare const meta: {
-    title: string;
+    args: {
+        onPress: import("@vitest/spy").Mock<[], void>;
+    };
     component: typeof FavoriteButton;
     parameters: {
         layout: string;
     };
     tags: string[];
-    args: {
-        onPress: import("@storybook/test").Mock<[], void>;
-    };
+    title: string;
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/buttons/icon-button/icon-button.d.ts

@@ -1,7 +1,9 @@
-import { ComponentPropsWithoutRef } from "react";
-import { Button as AriaButton } from "react-aria-components";
-export type IconButtonProps = ComponentPropsWithoutRef<typeof AriaButton> & {
-    size?: "md" | "lg";
-    color?: "primary" | "secondary";
-};
-export declare function IconButton({ size, color, className, ...props }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
+/// <reference types="react" />
+export interface IconButtonProps {
+    children: React.ReactNode;
+    className?: string;
+    color?: 'primary' | 'secondary';
+    onPress?: VoidFunction;
+    size?: 'md' | 'lg';
+}
+export declare function IconButton({ children, className, color, onPress, size, }: IconButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/buttons/icon-button/icon-button.stories.d.ts

@@ -1,15 +1,15 @@
-import type { StoryObj } from "@storybook/react";
-import { IconButton } from "./icon-button";
+import type { StoryObj } from '@storybook/react';
+import { IconButton } from './icon-button';
 declare const meta: {
-    title: string;
+    args: {
+        onPress: import("@vitest/spy").Mock<[], void>;
+    };
     component: typeof IconButton;
     parameters: {
         layout: string;
     };
     tags: string[];
-    args: {
-        onPress: import("@storybook/test").Mock<[e: import("react-aria-components").PressEvent], void>;
-    };
+    title: string;
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/cards/product-card/product-card.d.ts

@@ -1,9 +1,9 @@
-import { ComponentType } from "react";
-export type ProductCardProps = {
-    product: {
-        id: string;
-        title: string;
-    };
-    favoriteButton: ComponentType<any>;
-};
-export declare function ProductCard({ product, favoriteButton: FavoriteButton, }: ProductCardProps): import("react/jsx-runtime").JSX.Element;
+import { ComponentType } from 'react';
+import type { Product } from 'shared/types/product';
+export interface ProductCardProps {
+    favoriteButton: ComponentType<{
+        productId: string;
+    }>;
+    product: Product;
+}
+export declare function ProductCard({ favoriteButton: FavoriteButton, product, }: ProductCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/cards/product-card/product-card.stories.d.ts

@@ -1,12 +1,12 @@
-import { StoryObj } from "@storybook/react";
-import { ProductCard } from "./product-card";
+import { StoryObj } from '@storybook/react';
+import { ProductCard } from './product-card';
 declare const meta: {
-    title: string;
     component: typeof ProductCard;
     parameters: {
         layout: string;
     };
     tags: string[];
+    title: string;
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/display/product-price/product-price.d.ts

@@ -0,0 +1,11 @@
+interface Price {
+    exclVat: number;
+    inclVat: number;
+}
+export interface ProductPriceProps {
+    current: Price;
+    includeVat?: boolean;
+    original?: Price;
+}
+export declare function ProductPrice({ current, includeVat, original, }: ProductPriceProps): import("react/jsx-runtime").JSX.Element | undefined;
+export {};

package/dist/display/product-price/product-price.stories.d.ts

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react';
+import { ProductPrice } from './product-price';
+declare const meta: {
+    component: typeof ProductPrice;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const InclVat: Story;
+export declare const ExclVat: Story;
+export declare const WithoutOriginalPrice: Story;

package/dist/display/product-sku/product-sku.d.ts

@@ -0,0 +1,4 @@
+export interface ProductSkuProps {
+    sku: string;
+}
+export declare function ProductSku({ sku }: ProductSkuProps): import("react/jsx-runtime").JSX.Element;

package/dist/display/product-sku/product-sku.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import { ProductSku } from './product-sku';
+declare const meta: {
+    component: typeof ProductSku;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/fonts.css

@@ -6,145 +6,192 @@
 
 @font-face {
   font-display: swap;
-  font-family: "Pancetta";
-  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100022/fonts/pancetta/pancettapro-thin-webfont.woff2") format("woff2"),
-      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100018/fonts/pancetta/pancettapro-thin-webfont.woff") format("woff");
+  font-family: 'Pancetta';
+  src:
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100022/fonts/pancetta/pancettapro-thin-webfont.woff2')
+      format('woff2'),
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100018/fonts/pancetta/pancettapro-thin-webfont.woff')
+      format('woff');
   font-weight: 100;
   font-style: normal;
 }
 
 @font-face {
   font-display: swap;
-  font-family: "Pancetta";
-  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100030/fonts/pancetta/pancettapro-thinitalic-webfont.woff2") format("woff2"),
-      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100042/fonts/pancetta/pancettapro-thinitalic-webfont.woff") format("woff");
+  font-family: 'Pancetta';
+  src:
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100030/fonts/pancetta/pancettapro-thinitalic-webfont.woff2')
+      format('woff2'),
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100042/fonts/pancetta/pancettapro-thinitalic-webfont.woff')
+      format('woff');
   font-weight: 100;
   font-style: italic;
 }
 
 @font-face {
   font-display: swap;
-  font-family: "Pancetta";
-  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099957/fonts/pancetta/pancettapro-extralight-webfont.woff2") format("woff2"),
-      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099944/fonts/pancetta/pancettapro-extralight-webfont.woff") format("woff");
+  font-family: 'Pancetta';
+  src:
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099957/fonts/pancetta/pancettapro-extralight-webfont.woff2')
+      format('woff2'),
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099944/fonts/pancetta/pancettapro-extralight-webfont.woff')
+      format('woff');
   font-weight: 200;
   font-style: normal;
 }
 
 @font-face {
   font-display: swap;
-  font-family: "Pancetta";
-  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099964/fonts/pancetta/pancettapro-extralightitalic-webfont.woff2") format("woff2"),
-      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099960/fonts/pancetta/pancettapro-extralightitalic-webfont.woff") format("woff");
+  font-family: 'Pancetta';
+  src:
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099964/fonts/pancetta/pancettapro-extralightitalic-webfont.woff2')
+      format('woff2'),
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099960/fonts/pancetta/pancettapro-extralightitalic-webfont.woff')
+      format('woff');
   font-weight: 200;
   font-style: italic;
 }
 
-
 @font-face {
   font-display: swap;
-  font-family: "Pancetta";
-  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099985/fonts/pancetta/pancettapro-light-webfont.woff2") format("woff2"),
-      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099977/fonts/pancetta/pancettapro-light-webfont.woff") format("woff");
+  font-family: 'Pancetta';
+  src:
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099985/fonts/pancetta/pancettapro-light-webfont.woff2')
+      format('woff2'),
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099977/fonts/pancetta/pancettapro-light-webfont.woff')
+      format('woff');
   font-weight: 300;
   font-style: normal;
 }
 
 @font-face {
   font-display: swap;
-  font-family: "Pancetta";
-  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100009/fonts/pancetta/pancettapro-lightitalic-webfont.woff2") format("woff2"),
-      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099989/fonts/pancetta/pancettapro-lightitalic-webfont.woff") format("woff");
+  font-family: 'Pancetta';
+  src:
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100009/fonts/pancetta/pancettapro-lightitalic-webfont.woff2')
+      format('woff2'),
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099989/fonts/pancetta/pancettapro-lightitalic-webfont.woff')
+      format('woff');
   font-weight: 300;
   font-style: italic;
 }
 
 @font-face {
   font-display: swap;
-  font-family: "Pancetta";
-  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100013/fonts/pancetta/pancettapro-regular-webfont.woff2") format("woff2"),
-      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100005/fonts/pancetta/pancettapro-regular-webfont.woff") format("woff");
+  font-family: 'Pancetta';
+  src:
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100013/fonts/pancetta/pancettapro-regular-webfont.woff2')
+      format('woff2'),
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100005/fonts/pancetta/pancettapro-regular-webfont.woff')
+      format('woff');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-display: swap;
-  font-family: "Pancetta";
-  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099973/fonts/pancetta/pancettapro-italic-webfont.woff2") format("woff2"),
-      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099969/fonts/pancetta/pancettapro-italic-webfont.woff") format("woff");
+  font-family: 'Pancetta';
+  src:
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099973/fonts/pancetta/pancettapro-italic-webfont.woff2')
+      format('woff2'),
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099969/fonts/pancetta/pancettapro-italic-webfont.woff')
+      format('woff');
   font-weight: 400;
   font-style: italic;
 }
 
 @font-face {
   font-display: swap;
-  font-family: "Pancetta";
-  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099997/fonts/pancetta/pancettapro-medium-webfont.woff2") format("woff2"),
-      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099981/fonts/pancetta/pancettapro-medium-webfont.woff") format("woff");
+  font-family: 'Pancetta';
+  src:
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099997/fonts/pancetta/pancettapro-medium-webfont.woff2')
+      format('woff2'),
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099981/fonts/pancetta/pancettapro-medium-webfont.woff')
+      format('woff');
   font-weight: 500;
   font-style: normal;
 }
 
 @font-face {
   font-display: swap;
-  font-family: "Pancetta";
-  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100001/fonts/pancetta/pancettapro-mediumitalic-webfont.woff2") format("woff2"),
-      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099993/fonts/pancetta/pancettapro-mediumitalic-webfont.woff") format("woff");
+  font-family: 'Pancetta';
+  src:
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100001/fonts/pancetta/pancettapro-mediumitalic-webfont.woff2')
+      format('woff2'),
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099993/fonts/pancetta/pancettapro-mediumitalic-webfont.woff')
+      format('woff');
   font-weight: 500;
   font-style: italic;
 }
 
 @font-face {
   font-display: swap;
-  font-family: "Pancetta";
-  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100038/fonts/pancetta/pancettapro-semibold-webfont.woff2") format("woff2"),
-      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100034/fonts/pancetta/pancettapro-semibold-webfont.woff") format("woff");
+  font-family: 'Pancetta';
+  src:
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100038/fonts/pancetta/pancettapro-semibold-webfont.woff2')
+      format('woff2'),
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100034/fonts/pancetta/pancettapro-semibold-webfont.woff')
+      format('woff');
   font-weight: 600;
   font-style: normal;
 }
 
 @font-face {
   font-display: swap;
-  font-family: "Pancetta";
-  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100026/fonts/pancetta/pancettapro-semibolditalic-webfont.woff2") format("woff2"),
-      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100047/fonts/pancetta/pancettapro-semibolditalic-webfont.woff") format("woff");
+  font-family: 'Pancetta';
+  src:
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100026/fonts/pancetta/pancettapro-semibolditalic-webfont.woff2')
+      format('woff2'),
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100047/fonts/pancetta/pancettapro-semibolditalic-webfont.woff')
+      format('woff');
   font-weight: 600;
   font-style: italic;
 }
 
 @font-face {
   font-display: swap;
-  font-family: "Pancetta";
-  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099948/fonts/pancetta/pancettapro-bold-webfont.woff2") format("woff2"),
-      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099932/fonts/pancetta/pancettapro-bold-webfont.woff") format("woff");
+  font-family: 'Pancetta';
+  src:
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099948/fonts/pancetta/pancettapro-bold-webfont.woff2')
+      format('woff2'),
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099932/fonts/pancetta/pancettapro-bold-webfont.woff')
+      format('woff');
   font-weight: 700;
   font-style: normal;
 }
 
 @font-face {
   font-display: swap;
-  font-family: "Pancetta";
-  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099952/fonts/pancetta/pancettapro-bolditalic-webfont.woff2") format("woff2"),
-      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099936/fonts/pancetta/pancettapro-bolditalic-webfont.woff") format("woff");
+  font-family: 'Pancetta';
+  src:
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099952/fonts/pancetta/pancettapro-bolditalic-webfont.woff2')
+      format('woff2'),
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099936/fonts/pancetta/pancettapro-bolditalic-webfont.woff')
+      format('woff');
   font-weight: 700;
   font-style: italic;
 }
 
 @font-face {
   font-display: swap;
-  font-family: "Pancetta";
-  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099929/fonts/pancetta/pancettapro-black-webfont.woff2") format("woff2"),
-      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099921/fonts/pancetta/pancettapro-black-webfont.woff") format("woff");
+  font-family: 'Pancetta';
+  src:
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099929/fonts/pancetta/pancettapro-black-webfont.woff2')
+      format('woff2'),
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099921/fonts/pancetta/pancettapro-black-webfont.woff')
+      format('woff');
   font-weight: 900;
   font-style: normal;
 }
 
 @font-face {
   font-display: swap;
-  font-family: "Pancetta";
-  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099941/fonts/pancetta/pancettapro-blackitalic-webfont.woff2") format("woff2"),
-      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099924/fonts/pancetta/pancettapro-blackitalic-webfont.woff") format("woff");
+  font-family: 'Pancetta';
+  src:
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099941/fonts/pancetta/pancettapro-blackitalic-webfont.woff2')
+      format('woff2'),
+    url('https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099924/fonts/pancetta/pancettapro-blackitalic-webfont.woff')
+      format('woff');
   font-weight: 900;
   font-style: italic;
 }

package/dist/icons/arrows/left-arrow-filled-icon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function LeftArrowFilledIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/arrows/right-arrow-filled-icon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function RightArrowFilledIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/cart/cart-filled-icon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function CartFilledIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/cart/cart-outlined-icon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function CartOutlinedIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;