jourma-react-lib 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),x=require("react");function y({variant:i="filled",intent:e="normal",size:n="large",label:o,htmlType:r="button",className:c,disabled:s,children:l,...a}){const d=["button",`button--${i}`,`button--${e}`,`button--${n}`,c].filter(Boolean).join(" ");return t.jsx("button",{type:r,className:d,disabled:s,...a,children:l??o??"Button"})}function v({variant:i="filled",intent:e="normal",icon:n,htmlType:o="button",className:r,disabled:c,...s}){const l=["icon-button",`icon-button--${i}`,`icon-button--${e}`,r].filter(Boolean).join(" ");return t.jsx("button",{type:o,className:l,disabled:c,...s,children:t.jsx("span",{className:"icon-button__icon",children:n})})}const h=()=>t.jsxs("svg",{viewBox:"0 0 17 17",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-field__error-icon",children:[t.jsx("circle",{cx:"8.5",cy:"8.5",r:"7.5",stroke:"currentColor",strokeWidth:"1.5"}),t.jsx("line",{x1:"8.5",y1:"4.5",x2:"8.5",y2:"9.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),t.jsx("circle",{cx:"8.5",cy:"12",r:"0.75",fill:"currentColor"})]}),b=x.forwardRef(({size:i="large",label:e,errorMessage:n,errorIcon:o,className:r,disabled:c,onFocus:s,onBlur:l,...a},d)=>{const[N,j]=x.useState(!1),m=x.useCallback(f=>{j(!0),s==null||s(f)},[s]),p=x.useCallback(f=>{j(!1),l==null||l(f)},[l]),w=c?"text-field--disabled":N?"text-field--focused":"",_=["text-field",`text-field--${i}`,w,r].filter(Boolean).join(" "),u=!!n;return i==="compact"?t.jsxs("div",{className:_,children:[t.jsxs("div",{className:"text-field__input-wrapper",children:[e&&t.jsx("label",{className:"text-field__label",children:e}),t.jsx("input",{ref:d,className:"text-field__input",disabled:c,onFocus:m,onBlur:p,...a}),u&&(o??t.jsx(h,{}))]}),u&&t.jsx("p",{className:"text-field__error",children:n})]}):t.jsxs("div",{className:_,children:[e&&t.jsx("label",{className:"text-field__label",children:e}),t.jsxs("div",{className:"text-field__input-wrapper",children:[t.jsx("input",{ref:d,className:"text-field__input",disabled:c,onFocus:m,onBlur:p,...a}),u&&(o??t.jsx(h,{}))]}),u&&t.jsx("p",{className:"text-field__error",children:n})]})});b.displayName="TextField";exports.Button=y;exports.IconButton=v;exports.TextField=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("react");function w({variant:l="filled",intent:a="normal",size:o="large",label:c,htmlType:i="button",className:n,disabled:s,children:t,...r}){const d=["button",`button--${l}`,`button--${a}`,`button--${o}`,n].filter(Boolean).join(" ");return e.jsx("button",{type:i,className:d,disabled:s,...r,children:t??c??"Button"})}function g({variant:l="filled",intent:a="normal",icon:o,htmlType:c="button",className:i,disabled:n,...s}){const t=["icon-button",`icon-button--${l}`,`icon-button--${a}`,i].filter(Boolean).join(" ");return e.jsx("button",{type:c,className:t,disabled:n,...s,children:e.jsx("span",{className:"icon-button__icon",children:o})})}const N=()=>e.jsxs("svg",{viewBox:"0 0 17 17",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-field__error-icon",children:[e.jsx("circle",{cx:"8.5",cy:"8.5",r:"7.5",stroke:"currentColor",strokeWidth:"1.5"}),e.jsx("line",{x1:"8.5",y1:"4.5",x2:"8.5",y2:"9.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),e.jsx("circle",{cx:"8.5",cy:"12",r:"0.75",fill:"currentColor"})]}),v=m.forwardRef(({size:l="large",label:a,errorMessage:o,errorIcon:c,className:i,disabled:n,onFocus:s,onBlur:t,...r},d)=>{const[_,x]=m.useState(!1),h=m.useCallback(j=>{x(!0),s==null||s(j)},[s]),p=m.useCallback(j=>{x(!1),t==null||t(j)},[t]),b=n?"text-field--disabled":_?"text-field--focused":"",f=["text-field",`text-field--${l}`,b,i].filter(Boolean).join(" "),u=!!o;return l==="compact"?e.jsxs("div",{className:f,children:[e.jsxs("div",{className:"text-field__input-wrapper",children:[a&&e.jsx("label",{className:"text-field__label",children:a}),e.jsx("input",{ref:d,className:"text-field__input",disabled:n,onFocus:h,onBlur:p,...r}),u&&(c??e.jsx(N,{}))]}),u&&e.jsx("p",{className:"text-field__error",children:o})]}):e.jsxs("div",{className:f,children:[a&&e.jsx("label",{className:"text-field__label",children:a}),e.jsxs("div",{className:"text-field__input-wrapper",children:[e.jsx("input",{ref:d,className:"text-field__input",disabled:n,onFocus:h,onBlur:p,...r}),u&&(c??e.jsx(N,{}))]}),u&&e.jsx("p",{className:"text-field__error",children:o})]})});v.displayName="TextField";function C({imageSrc:l,imageAlt:a="",title:o,badgeCount:c,disabled:i=!1,className:n,...s}){const t=["collection-thumbnail",i?"collection-thumbnail--disabled":"",n].filter(Boolean).join(" ");return e.jsxs("div",{className:t,...s,children:[e.jsx("div",{className:"collection-thumbnail__image",children:e.jsx("img",{src:l,alt:a})}),e.jsx("p",{className:"collection-thumbnail__title",children:o}),c!=null&&e.jsx("div",{className:"collection-thumbnail__badge",children:e.jsx("span",{className:"collection-thumbnail__badge-text",children:c})})]})}function k({imageSrc:l,imageAlt:a="",title:o,price:c,priceTranslation:i,discountLabel:n,appIcon:s,className:t,...r}){const d=["product-teaser",t].filter(Boolean).join(" ");return e.jsxs("div",{className:d,...r,children:[e.jsx("div",{className:"product-teaser__image",children:e.jsx("img",{src:l,alt:a})}),e.jsxs("div",{className:"product-teaser__info",children:[e.jsx("p",{className:"product-teaser__title",children:o}),e.jsxs("div",{className:"product-teaser__price-row",children:[e.jsx("span",{className:"product-teaser__price",children:c}),i&&e.jsx("span",{className:"product-teaser__price-translation",children:i})]})]}),s&&e.jsx("div",{className:"product-teaser__app-icon",children:s}),n&&e.jsx("div",{className:"product-teaser__discount",children:n})]})}const B=({filled:l})=>e.jsx("svg",{viewBox:"0 0 24 21",fill:l?"currentColor":"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M12 19.5C12 19.5 1.5 13.5 1.5 6.75C1.5 3.5 4 1.5 6.75 1.5C9 1.5 11 3 12 4.5C13 3 15 1.5 17.25 1.5C20 1.5 22.5 3.5 22.5 6.75C22.5 13.5 12 19.5 12 19.5Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})});function y({imageSrc:l,imageAlt:a="",title:o,tags:c=[],appIcon:i,showWishlistButton:n=!0,onWishlistClick:s,wishlisted:t=!1,className:r,...d}){const _=["location-teaser",r].filter(Boolean).join(" ");return e.jsxs("div",{className:_,...d,children:[e.jsx("div",{className:"location-teaser__image",children:e.jsx("img",{src:l,alt:a})}),e.jsxs("div",{className:"location-teaser__info",children:[e.jsx("p",{className:"location-teaser__title",children:o}),(c.length>0||i)&&e.jsxs("div",{className:"location-teaser__tags",children:[i&&e.jsx("div",{className:"location-teaser__app-icon-wrapper",children:e.jsx("div",{className:"location-teaser__app-icon",children:i})}),c.map(x=>e.jsx("div",{className:"location-teaser__tag",children:e.jsx("span",{className:"location-teaser__tag-text",children:x})},x))]})]}),n&&e.jsx("button",{className:"location-teaser__wishlist",onClick:s,"aria-label":t?"Remove from wishlist":"Add to wishlist",children:e.jsx(B,{filled:t})})]})}exports.Button=w;exports.CollectionThumbnail=C;exports.IconButton=g;exports.LocationTeaser=y;exports.ProductTeaser=k;exports.TextField=v;

package/dist/index.mjs

@@ -1,61 +1,61 @@
-import { jsx as t, jsxs as a } from "react/jsx-runtime";
-import { forwardRef as y, useState as k, useCallback as N } from "react";
-function C({
-  variant: i = "filled",
-  intent: e = "normal",
-  size: o = "large",
-  label: s,
-  htmlType: r = "button",
-  className: c,
-  disabled: l,
-  children: n,
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { forwardRef as g, useState as C, useCallback as v } from "react";
+function $({
+  variant: a = "filled",
+  intent: i = "normal",
+  size: r = "large",
+  label: c,
+  htmlType: s = "button",
+  className: n,
+  disabled: t,
+  children: l,
   ...d
 }) {
-  const u = [
+  const m = [
     "button",
+    `button--${a}`,
     `button--${i}`,
-    `button--${e}`,
-    `button--${o}`,
-    c
+    `button--${r}`,
+    n
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ e(
     "button",
     {
-      type: r,
-      className: u,
-      disabled: l,
+      type: s,
+      className: m,
+      disabled: t,
       ...d,
-      children: n ?? s ?? "Button"
+      children: l ?? c ?? "Button"
     }
   );
 }
-function g({
-  variant: i = "filled",
-  intent: e = "normal",
-  icon: o,
-  htmlType: s = "button",
-  className: r,
-  disabled: c,
-  ...l
+function T({
+  variant: a = "filled",
+  intent: i = "normal",
+  icon: r,
+  htmlType: c = "button",
+  className: s,
+  disabled: n,
+  ...t
 }) {
-  const n = [
+  const l = [
     "icon-button",
+    `icon-button--${a}`,
     `icon-button--${i}`,
-    `icon-button--${e}`,
-    r
+    s
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ e(
     "button",
     {
-      type: s,
-      className: n,
-      disabled: c,
-      ...l,
-      children: /* @__PURE__ */ t("span", { className: "icon-button__icon", children: o })
+      type: c,
+      className: l,
+      disabled: n,
+      ...t,
+      children: /* @__PURE__ */ e("span", { className: "icon-button__icon", children: r })
     }
   );
 }
-const b = () => /* @__PURE__ */ a(
+const b = () => /* @__PURE__ */ o(
   "svg",
   {
     viewBox: "0 0 17 17",
@@ -63,7 +63,7 @@ const b = () => /* @__PURE__ */ a(
     xmlns: "http://www.w3.org/2000/svg",
     className: "text-field__error-icon",
     children: [
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ e(
         "circle",
         {
           cx: "8.5",
@@ -73,7 +73,7 @@ const b = () => /* @__PURE__ */ a(
           strokeWidth: "1.5"
         }
       ),
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ e(
         "line",
         {
           x1: "8.5",
@@ -85,77 +85,176 @@ const b = () => /* @__PURE__ */ a(
           strokeLinecap: "round"
         }
       ),
-      /* @__PURE__ */ t("circle", { cx: "8.5", cy: "12", r: "0.75", fill: "currentColor" })
+      /* @__PURE__ */ e("circle", { cx: "8.5", cy: "12", r: "0.75", fill: "currentColor" })
     ]
   }
-), $ = y(
+), k = g(
   ({
-    size: i = "large",
-    label: e,
-    errorMessage: o,
-    errorIcon: s,
-    className: r,
-    disabled: c,
-    onFocus: l,
-    onBlur: n,
+    size: a = "large",
+    label: i,
+    errorMessage: r,
+    errorIcon: c,
+    className: s,
+    disabled: n,
+    onFocus: t,
+    onBlur: l,
     ...d
-  }, u) => {
-    const [w, m] = k(!1), p = N(
-      (x) => {
-        m(!0), l == null || l(x);
+  }, m) => {
+    const [h, u] = C(!1), f = v(
+      (p) => {
+        u(!0), t == null || t(p);
       },
-      [l]
-    ), _ = N(
-      (x) => {
-        m(!1), n == null || n(x);
+      [t]
+    ), N = v(
+      (p) => {
+        u(!1), l == null || l(p);
       },
-      [n]
-    ), v = c ? "text-field--disabled" : w ? "text-field--focused" : "", h = [
+      [l]
+    ), w = n ? "text-field--disabled" : h ? "text-field--focused" : "", x = [
       "text-field",
-      `text-field--${i}`,
-      v,
-      r
-    ].filter(Boolean).join(" "), f = !!o;
-    return i === "compact" ? /* @__PURE__ */ a("div", { className: h, children: [
-      /* @__PURE__ */ a("div", { className: "text-field__input-wrapper", children: [
-        e && /* @__PURE__ */ t("label", { className: "text-field__label", children: e }),
-        /* @__PURE__ */ t(
+      `text-field--${a}`,
+      w,
+      s
+    ].filter(Boolean).join(" "), _ = !!r;
+    return a === "compact" ? /* @__PURE__ */ o("div", { className: x, children: [
+      /* @__PURE__ */ o("div", { className: "text-field__input-wrapper", children: [
+        i && /* @__PURE__ */ e("label", { className: "text-field__label", children: i }),
+        /* @__PURE__ */ e(
           "input",
           {
-            ref: u,
+            ref: m,
             className: "text-field__input",
-            disabled: c,
-            onFocus: p,
-            onBlur: _,
+            disabled: n,
+            onFocus: f,
+            onBlur: N,
             ...d
           }
         ),
-        f && (s ?? /* @__PURE__ */ t(b, {}))
+        _ && (c ?? /* @__PURE__ */ e(b, {}))
       ] }),
-      f && /* @__PURE__ */ t("p", { className: "text-field__error", children: o })
-    ] }) : /* @__PURE__ */ a("div", { className: h, children: [
-      e && /* @__PURE__ */ t("label", { className: "text-field__label", children: e }),
-      /* @__PURE__ */ a("div", { className: "text-field__input-wrapper", children: [
-        /* @__PURE__ */ t(
+      _ && /* @__PURE__ */ e("p", { className: "text-field__error", children: r })
+    ] }) : /* @__PURE__ */ o("div", { className: x, children: [
+      i && /* @__PURE__ */ e("label", { className: "text-field__label", children: i }),
+      /* @__PURE__ */ o("div", { className: "text-field__input-wrapper", children: [
+        /* @__PURE__ */ e(
           "input",
           {
-            ref: u,
+            ref: m,
             className: "text-field__input",
-            disabled: c,
-            onFocus: p,
-            onBlur: _,
+            disabled: n,
+            onFocus: f,
+            onBlur: N,
             ...d
           }
         ),
-        f && (s ?? /* @__PURE__ */ t(b, {}))
+        _ && (c ?? /* @__PURE__ */ e(b, {}))
       ] }),
-      f && /* @__PURE__ */ t("p", { className: "text-field__error", children: o })
+      _ && /* @__PURE__ */ e("p", { className: "text-field__error", children: r })
     ] });
   }
 );
-$.displayName = "TextField";
+k.displayName = "TextField";
+function L({
+  imageSrc: a,
+  imageAlt: i = "",
+  title: r,
+  badgeCount: c,
+  disabled: s = !1,
+  className: n,
+  ...t
+}) {
+  const l = [
+    "collection-thumbnail",
+    s ? "collection-thumbnail--disabled" : "",
+    n
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o("div", { className: l, ...t, children: [
+    /* @__PURE__ */ e("div", { className: "collection-thumbnail__image", children: /* @__PURE__ */ e("img", { src: a, alt: i }) }),
+    /* @__PURE__ */ e("p", { className: "collection-thumbnail__title", children: r }),
+    c != null && /* @__PURE__ */ e("div", { className: "collection-thumbnail__badge", children: /* @__PURE__ */ e("span", { className: "collection-thumbnail__badge-text", children: c }) })
+  ] });
+}
+function W({
+  imageSrc: a,
+  imageAlt: i = "",
+  title: r,
+  price: c,
+  priceTranslation: s,
+  discountLabel: n,
+  appIcon: t,
+  className: l,
+  ...d
+}) {
+  const m = ["product-teaser", l].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o("div", { className: m, ...d, children: [
+    /* @__PURE__ */ e("div", { className: "product-teaser__image", children: /* @__PURE__ */ e("img", { src: a, alt: i }) }),
+    /* @__PURE__ */ o("div", { className: "product-teaser__info", children: [
+      /* @__PURE__ */ e("p", { className: "product-teaser__title", children: r }),
+      /* @__PURE__ */ o("div", { className: "product-teaser__price-row", children: [
+        /* @__PURE__ */ e("span", { className: "product-teaser__price", children: c }),
+        s && /* @__PURE__ */ e("span", { className: "product-teaser__price-translation", children: s })
+      ] })
+    ] }),
+    t && /* @__PURE__ */ e("div", { className: "product-teaser__app-icon", children: t }),
+    n && /* @__PURE__ */ e("div", { className: "product-teaser__discount", children: n })
+  ] });
+}
+const j = ({ filled: a }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    viewBox: "0 0 24 21",
+    fill: a ? "currentColor" : "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        d: "M12 19.5C12 19.5 1.5 13.5 1.5 6.75C1.5 3.5 4 1.5 6.75 1.5C9 1.5 11 3 12 4.5C13 3 15 1.5 17.25 1.5C20 1.5 22.5 3.5 22.5 6.75C22.5 13.5 12 19.5 12 19.5Z",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+function E({
+  imageSrc: a,
+  imageAlt: i = "",
+  title: r,
+  tags: c = [],
+  appIcon: s,
+  showWishlistButton: n = !0,
+  onWishlistClick: t,
+  wishlisted: l = !1,
+  className: d,
+  ...m
+}) {
+  const h = ["location-teaser", d].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o("div", { className: h, ...m, children: [
+    /* @__PURE__ */ e("div", { className: "location-teaser__image", children: /* @__PURE__ */ e("img", { src: a, alt: i }) }),
+    /* @__PURE__ */ o("div", { className: "location-teaser__info", children: [
+      /* @__PURE__ */ e("p", { className: "location-teaser__title", children: r }),
+      (c.length > 0 || s) && /* @__PURE__ */ o("div", { className: "location-teaser__tags", children: [
+        s && /* @__PURE__ */ e("div", { className: "location-teaser__app-icon-wrapper", children: /* @__PURE__ */ e("div", { className: "location-teaser__app-icon", children: s }) }),
+        c.map((u) => /* @__PURE__ */ e("div", { className: "location-teaser__tag", children: /* @__PURE__ */ e("span", { className: "location-teaser__tag-text", children: u }) }, u))
+      ] })
+    ] }),
+    n && /* @__PURE__ */ e(
+      "button",
+      {
+        className: "location-teaser__wishlist",
+        onClick: t,
+        "aria-label": l ? "Remove from wishlist" : "Add to wishlist",
+        children: /* @__PURE__ */ e(j, { filled: l })
+      }
+    )
+  ] });
+}
 export {
-  C as Button,
-  g as IconButton,
-  $ as TextField
+  $ as Button,
+  L as CollectionThumbnail,
+  T as IconButton,
+  E as LocationTeaser,
+  W as ProductTeaser,
+  k as TextField
 };

package/dist/src/components/CollectionThumbnail/CollectionThumbnail.d.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes } from 'react';
+
+export interface CollectionThumbnailProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Image source URL */
+    imageSrc: string;
+    /** Image alt text */
+    imageAlt?: string;
+    /** Title text below the image */
+    title: string;
+    /** Badge count (shown in top-right corner) */
+    badgeCount?: number;
+    /** Whether the component is disabled */
+    disabled?: boolean;
+}
+export declare function CollectionThumbnail({ imageSrc, imageAlt, title, badgeCount, disabled, className, ...rest }: CollectionThumbnailProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/CollectionThumbnail/CollectionThumbnail.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CollectionThumbnail } from './CollectionThumbnail';
+
+declare const meta: Meta<typeof CollectionThumbnail>;
+export default meta;
+type Story = StoryObj<typeof CollectionThumbnail>;
+export declare const Playground: Story;
+export declare const WithBadge: Story;
+export declare const NoBadge: Story;
+export declare const Disabled: Story;
+export declare const AllStates: Story;

package/dist/src/components/CollectionThumbnail/index.d.ts

@@ -0,0 +1,2 @@
+export { CollectionThumbnail } from './CollectionThumbnail';
+export type { CollectionThumbnailProps } from './CollectionThumbnail';

package/dist/src/components/LocationTeaser/LocationTeaser.d.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes, ReactNode } from 'react';
+
+export interface LocationTeaserProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Location image source URL */
+    imageSrc: string;
+    /** Image alt text */
+    imageAlt?: string;
+    /** Location title */
+    title: string;
+    /** Tags displayed below the title (e.g. category, distance, open status) */
+    tags?: string[];
+    /** App icon element shown before the tags */
+    appIcon?: ReactNode;
+    /** Whether to show the wishlist/favorite button */
+    showWishlistButton?: boolean;
+    /** Callback when wishlist button is clicked */
+    onWishlistClick?: () => void;
+    /** Whether the item is wishlisted */
+    wishlisted?: boolean;
+}
+export declare function LocationTeaser({ imageSrc, imageAlt, title, tags, appIcon, showWishlistButton, onWishlistClick, wishlisted, className, ...rest }: LocationTeaserProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/LocationTeaser/LocationTeaser.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { LocationTeaser } from './LocationTeaser';
+
+declare const meta: Meta<typeof LocationTeaser>;
+export default meta;
+type Story = StoryObj<typeof LocationTeaser>;
+export declare const Playground: Story;
+export declare const Wishlisted: Story;
+export declare const NoWishlistButton: Story;
+export declare const WithoutTags: Story;
+export declare const LongTitle: Story;

package/dist/src/components/LocationTeaser/index.d.ts

@@ -0,0 +1,2 @@
+export { LocationTeaser } from './LocationTeaser';
+export type { LocationTeaserProps } from './LocationTeaser';

package/dist/src/components/ProductTeaser/ProductTeaser.d.ts

@@ -0,0 +1,19 @@
+import { HTMLAttributes, ReactNode } from 'react';
+
+export interface ProductTeaserProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Product image source URL */
+    imageSrc: string;
+    /** Image alt text */
+    imageAlt?: string;
+    /** Product title */
+    title: string;
+    /** Price in local currency */
+    price: string;
+    /** Price in translated/secondary currency */
+    priceTranslation?: string;
+    /** Discount label text (e.g. "-5%") */
+    discountLabel?: string;
+    /** App icon element shown in top-left corner */
+    appIcon?: ReactNode;
+}
+export declare function ProductTeaser({ imageSrc, imageAlt, title, price, priceTranslation, discountLabel, appIcon, className, ...rest }: ProductTeaserProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/ProductTeaser/ProductTeaser.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ProductTeaser } from './ProductTeaser';
+
+declare const meta: Meta<typeof ProductTeaser>;
+export default meta;
+type Story = StoryObj<typeof ProductTeaser>;
+export declare const Playground: Story;
+export declare const WithDiscount: Story;
+export declare const NoDiscount: Story;
+export declare const AllVariants: Story;

package/dist/src/components/ProductTeaser/index.d.ts

@@ -0,0 +1,2 @@
+export { ProductTeaser } from './ProductTeaser';
+export type { ProductTeaserProps } from './ProductTeaser';

package/dist/src/index.d.ts

@@ -5,3 +5,9 @@ export { IconButton } from './components/IconButton';
 export type { IconButtonProps, IconButtonStyle, IconButtonIntent } from './components/IconButton';
 export { TextField } from './components/TextField';
 export type { TextFieldProps, TextFieldSize } from './components/TextField';
+export { CollectionThumbnail } from './components/CollectionThumbnail';
+export type { CollectionThumbnailProps } from './components/CollectionThumbnail';
+export { ProductTeaser } from './components/ProductTeaser';
+export type { ProductTeaserProps } from './components/ProductTeaser';
+export { LocationTeaser } from './components/LocationTeaser';
+export type { LocationTeaserProps } from './components/LocationTeaser';

package/dist/style.css

@@ -1 +1 @@
-:root{--jourma-color-action: #00ff9f;--jourma-color-action-special: #ff46ff;--jourma-color-action-attention: #ff3d48;--jourma-color-action-pressed: white;--jourma-color-text-on-action: #00322f;--jourma-color-text-on-action-attention: black;--jourma-color-text-on-action-special: black;--jourma-color-text-on-surface-focused: black;--jourma-color-text-on-surface: white;--jourma-color-text-action: #00ff9f;--jourma-color-text-attention: #ff3d48;--jourma-color-text-special: #ff46ff;--jourma-color-text-primary: white;--jourma-color-text-secondary: rgba(255, 255, 255, .8);--jourma-color-text-tertiary: rgba(255, 255, 255, .6);--jourma-color-disabled-surface: rgba(255, 255, 255, .2);--jourma-color-disabled-text: rgba(255, 255, 255, .3);--jourma-color-disabled-text-on-surface: rgba(0, 0, 0, .5);--jourma-color-disabled-stroke: rgba(255, 255, 255, .1);--jourma-color-surface: rgba(255, 255, 255, .07);--jourma-color-surface-pressed: rgba(255, 255, 255, .2);--jourma-color-surface-focused: rgba(255, 255, 255, .8);--jourma-color-placeholder-text: rgba(255, 255, 255, .4);--jourma-color-label-on-surface: rgba(255, 255, 255, .6);--jourma-color-label-on-surface-focused: rgba(0, 0, 0, .6);--jourma-color-disabled-surface-text-on-surface: rgba(0, 0, 0, .5);--jourma-color-white-10: rgba(255, 255, 255, .1);--jourma-color-white-30: rgba(255, 255, 255, .3);--jourma-spacing-xxs: 2px;--jourma-spacing-xs: 4px;--jourma-spacing-m: 16px;--jourma-button-padding-top-large: 13px;--jourma-button-padding-bottom-large: 15px;--jourma-button-padding-round-end-large: 24px;--jourma-button-padding-sharp-end-large: 22px;--jourma-button-padding-top-medium: 10px;--jourma-button-padding-bottom-medium: 12px;--jourma-button-padding-round-end-medium: 18px;--jourma-button-padding-sharp-end-medium: 16px;--jourma-button-padding-top-small: 8px;--jourma-button-padding-bottom-small: 10px;--jourma-button-padding-round-end-small: 15px;--jourma-button-padding-sharp-end-small: 12px;--jourma-field-gap: 8px;--jourma-field-padding-ends: 16px;--jourma-field-padding-top-large: 13px;--jourma-field-padding-bottom-large: 15px;--jourma-field-padding-top-compact: 14px;--jourma-field-padding-bottom-compact: 15px;--jourma-field-radius: 12px;--jourma-field-radius-compact: 8px;--jourma-radius-m: 24px}.button{display:inline-flex;align-items:center;justify-content:center;overflow:clip;border:none;background:none;padding:0;font-family:Bugrino,sans-serif;line-height:1.1;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-feature-settings:"dlig" 1}.button:not(:disabled){cursor:pointer}.button--filled{border-radius:0}.button--filled.button--large{border-bottom-left-radius:25px;border-top-left-radius:25px;padding:var(--jourma-button-padding-top-large) var(--jourma-button-padding-sharp-end-large) var(--jourma-button-padding-bottom-large) var(--jourma-button-padding-round-end-large);font-size:20px;font-weight:700}.button--filled.button--medium{border-bottom-left-radius:22px;border-top-left-radius:22px;padding:var(--jourma-button-padding-top-medium) var(--jourma-button-padding-sharp-end-medium) var(--jourma-button-padding-bottom-medium) var(--jourma-button-padding-round-end-medium);font-size:20px;font-weight:700}.button--filled.button--small{border-bottom-left-radius:22px;border-top-left-radius:22px;padding:var(--jourma-button-padding-top-small) var(--jourma-button-padding-sharp-end-small) var(--jourma-button-padding-bottom-small) var(--jourma-button-padding-round-end-small);font-size:18px;font-weight:700}.button--filled.button--normal{background-color:var(--jourma-color-action);color:var(--jourma-color-text-on-action)}.button--filled.button--attention{background-color:var(--jourma-color-action-attention);color:var(--jourma-color-text-on-action-attention)}.button--filled.button--special{background-color:var(--jourma-color-action-special);color:var(--jourma-color-text-on-action-special)}.button--filled:not(:disabled):active{background-color:var(--jourma-color-action-pressed);color:var(--jourma-color-text-on-surface-focused)}.button--filled:disabled{background-color:var(--jourma-color-disabled-surface);color:var(--jourma-color-disabled-text-on-surface);cursor:default}.button--outlined{background:transparent;border-style:solid;border-width:2px}.button--outlined.button--large{border-bottom-left-radius:25px;border-top-left-radius:25px;padding:var(--jourma-button-padding-top-large) var(--jourma-button-padding-sharp-end-large) var(--jourma-button-padding-bottom-large) var(--jourma-button-padding-round-end-large);font-size:20px;font-weight:500}.button--outlined.button--medium{border-bottom-left-radius:22px;border-top-left-radius:22px;padding:var(--jourma-button-padding-top-medium) var(--jourma-button-padding-sharp-end-medium) var(--jourma-button-padding-bottom-medium) var(--jourma-button-padding-round-end-medium);font-size:20px;font-weight:500}.button--outlined.button--small{border-bottom-left-radius:22px;border-top-left-radius:22px;padding:var(--jourma-button-padding-top-small) var(--jourma-button-padding-sharp-end-small) var(--jourma-button-padding-bottom-small) var(--jourma-button-padding-round-end-small);font-size:18px;font-weight:500}.button--outlined.button--normal{border-color:var(--jourma-color-action);color:var(--jourma-color-text-action)}.button--outlined.button--attention{border-color:var(--jourma-color-action-attention);color:var(--jourma-color-text-attention)}.button--outlined.button--special{border-color:var(--jourma-color-action-special);color:var(--jourma-color-text-special)}.button--outlined:not(:disabled):active{border-color:var(--jourma-color-action-pressed);color:var(--jourma-color-action-pressed)}.button--outlined:disabled{border-color:var(--jourma-color-disabled-stroke);color:var(--jourma-color-disabled-text);cursor:default}.button--text{background:transparent;border:none}.button--text.button--large{padding:var(--jourma-button-padding-top-large) var(--jourma-button-padding-sharp-end-large) var(--jourma-button-padding-bottom-large);font-size:20px;font-weight:500}.button--text.button--medium{padding:var(--jourma-button-padding-top-medium) var(--jourma-button-padding-sharp-end-medium) var(--jourma-button-padding-bottom-medium);font-size:20px;font-weight:500}.button--text.button--small{padding:var(--jourma-button-padding-top-small) var(--jourma-button-padding-sharp-end-small) var(--jourma-button-padding-bottom-small);font-size:18px;font-weight:500}.button--text.button--normal{color:var(--jourma-color-text-action)}.button--text.button--attention{color:var(--jourma-color-text-attention)}.button--text.button--special{color:var(--jourma-color-text-special)}.button--text:not(:disabled):active{color:var(--jourma-color-action-pressed)}.button--text:disabled{color:var(--jourma-color-disabled-text);cursor:default}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--jourma-radius-m);border:none;padding:0;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}.icon-button:not(:disabled){cursor:pointer}.icon-button--filled.icon-button--normal{background-color:var(--jourma-color-action)}.icon-button--filled.icon-button--special{background-color:var(--jourma-color-action-special)}.icon-button--filled.icon-button--attention{background-color:var(--jourma-color-action-attention)}.icon-button--filled.icon-button--neutral{background-color:var(--jourma-color-white-10)}.icon-button--filled.icon-button--pressed{background-color:var(--jourma-color-action-pressed)}.icon-button--filled:disabled{background-color:var(--jourma-color-disabled-surface);cursor:default}.icon-button--outlined{background:transparent;border-style:solid;border-width:2px}.icon-button--outlined.icon-button--normal{border-color:var(--jourma-color-action)}.icon-button--outlined.icon-button--special{border-color:var(--jourma-color-action-special)}.icon-button--outlined.icon-button--attention{border-color:var(--jourma-color-action-attention)}.icon-button--outlined.icon-button--neutral{border-color:var(--jourma-color-white-30)}.icon-button--outlined.icon-button--pressed{border-color:var(--jourma-color-action-pressed)}.icon-button--outlined:disabled{border-color:var(--jourma-color-disabled-stroke);cursor:default}.icon-button__icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center}.icon-button__icon>svg{width:100%;height:100%}.text-field{display:flex;flex-direction:column;align-items:flex-start;width:100%;font-family:Bugrino,sans-serif;font-feature-settings:"dlig" 1}.text-field--large{gap:var(--jourma-spacing-xs)}.text-field__label{font-size:17px;font-weight:500;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.text-field--large .text-field__label{color:var(--jourma-color-text-secondary)}.text-field--large.text-field--disabled .text-field__label{color:var(--jourma-color-disabled-text)}.text-field--compact .text-field__label{color:var(--jourma-color-label-on-surface);width:100px;flex-shrink:0}.text-field--compact.text-field--focused .text-field__label{color:var(--jourma-color-label-on-surface-focused)}.text-field--compact.text-field--disabled .text-field__label{color:var(--jourma-color-disabled-text)}.text-field__input-wrapper{display:flex;align-items:center;gap:var(--jourma-field-gap);width:100%;overflow:clip;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}.text-field--large .text-field__input-wrapper{padding:var(--jourma-field-padding-top-large) var(--jourma-field-padding-ends) var(--jourma-field-padding-bottom-large);border-radius:var(--jourma-field-radius)}.text-field--compact .text-field__input-wrapper{padding:var(--jourma-field-padding-top-compact) var(--jourma-field-padding-ends) var(--jourma-field-padding-bottom-compact);border-radius:var(--jourma-field-radius-compact)}.text-field__input-wrapper{background-color:var(--jourma-color-surface);border:2px solid transparent}.text-field--pressed .text-field__input-wrapper{background-color:var(--jourma-color-surface-pressed)}.text-field--focused .text-field__input-wrapper{background-color:var(--jourma-color-surface-focused)}.text-field--disabled .text-field__input-wrapper{background-color:#00000003;border-color:var(--jourma-color-disabled-stroke)}.text-field__input{flex:1 0 0;min-width:0;background:none;border:none;outline:none;padding:0;font-family:inherit;font-feature-settings:inherit;line-height:1.1}.text-field--large .text-field__input{font-size:20px}.text-field--compact .text-field__input{font-size:17px}.text-field__input{color:var(--jourma-color-text-on-surface)}.text-field__input::placeholder{color:var(--jourma-color-placeholder-text)}.text-field--focused .text-field__input{color:var(--jourma-color-text-on-surface-focused)}.text-field--focused .text-field__input::placeholder{color:var(--jourma-color-disabled-text-on-surface)}.text-field--disabled .text-field__input{color:var(--jourma-color-disabled-text)}.text-field--disabled .text-field__input::placeholder{color:var(--jourma-color-disabled-text);opacity:.5}.text-field__error-icon{flex-shrink:0;width:17px;height:17px;color:var(--jourma-color-text-attention)}.text-field__error{font-family:Open Sans,sans-serif;font-size:12px;font-weight:400;line-height:1.4;letter-spacing:.24px;color:var(--jourma-color-text-attention);width:100%}.text-field--large .text-field__error{padding-right:var(--jourma-spacing-m)}.text-field--compact .text-field__error{padding:var(--jourma-spacing-xxs) var(--jourma-spacing-m) var(--jourma-spacing-xs) var(--jourma-spacing-xs)}
+:root{--jourma-color-action: #00ff9f;--jourma-color-action-special: #ff46ff;--jourma-color-action-attention: #ff3d48;--jourma-color-action-pressed: white;--jourma-color-text-on-action: #00322f;--jourma-color-text-on-action-attention: black;--jourma-color-text-on-action-special: black;--jourma-color-text-on-surface-focused: black;--jourma-color-text-on-surface: white;--jourma-color-text-action: #00ff9f;--jourma-color-text-attention: #ff3d48;--jourma-color-text-special: #ff46ff;--jourma-color-text-primary: white;--jourma-color-text-secondary: rgba(255, 255, 255, .8);--jourma-color-text-tertiary: rgba(255, 255, 255, .6);--jourma-color-disabled-surface: rgba(255, 255, 255, .2);--jourma-color-disabled-text: rgba(255, 255, 255, .3);--jourma-color-disabled-text-on-surface: rgba(0, 0, 0, .5);--jourma-color-disabled-stroke: rgba(255, 255, 255, .1);--jourma-color-surface: rgba(255, 255, 255, .07);--jourma-color-surface-pressed: rgba(255, 255, 255, .2);--jourma-color-surface-focused: rgba(255, 255, 255, .8);--jourma-color-placeholder-text: rgba(255, 255, 255, .4);--jourma-color-label-on-surface: rgba(255, 255, 255, .6);--jourma-color-label-on-surface-focused: rgba(0, 0, 0, .6);--jourma-color-disabled-surface-text-on-surface: rgba(0, 0, 0, .5);--jourma-color-white-10: rgba(255, 255, 255, .1);--jourma-color-white-30: rgba(255, 255, 255, .3);--jourma-spacing-xxs: 2px;--jourma-spacing-xs: 4px;--jourma-spacing-m: 16px;--jourma-button-padding-top-large: 13px;--jourma-button-padding-bottom-large: 15px;--jourma-button-padding-round-end-large: 24px;--jourma-button-padding-sharp-end-large: 22px;--jourma-button-padding-top-medium: 10px;--jourma-button-padding-bottom-medium: 12px;--jourma-button-padding-round-end-medium: 18px;--jourma-button-padding-sharp-end-medium: 16px;--jourma-button-padding-top-small: 8px;--jourma-button-padding-bottom-small: 10px;--jourma-button-padding-round-end-small: 15px;--jourma-button-padding-sharp-end-small: 12px;--jourma-field-gap: 8px;--jourma-field-padding-ends: 16px;--jourma-field-padding-top-large: 13px;--jourma-field-padding-bottom-large: 15px;--jourma-field-padding-top-compact: 14px;--jourma-field-padding-bottom-compact: 15px;--jourma-field-radius: 12px;--jourma-field-radius-compact: 8px;--jourma-radius-m: 24px}.button{display:inline-flex;align-items:center;justify-content:center;overflow:clip;border:none;background:none;padding:0;font-family:Bugrino,sans-serif;line-height:1.1;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-feature-settings:"dlig" 1}.button:not(:disabled){cursor:pointer}.button--filled{border-radius:0}.button--filled.button--large{border-bottom-left-radius:25px;border-top-left-radius:25px;padding:var(--jourma-button-padding-top-large) var(--jourma-button-padding-sharp-end-large) var(--jourma-button-padding-bottom-large) var(--jourma-button-padding-round-end-large);font-size:20px;font-weight:700}.button--filled.button--medium{border-bottom-left-radius:22px;border-top-left-radius:22px;padding:var(--jourma-button-padding-top-medium) var(--jourma-button-padding-sharp-end-medium) var(--jourma-button-padding-bottom-medium) var(--jourma-button-padding-round-end-medium);font-size:20px;font-weight:700}.button--filled.button--small{border-bottom-left-radius:22px;border-top-left-radius:22px;padding:var(--jourma-button-padding-top-small) var(--jourma-button-padding-sharp-end-small) var(--jourma-button-padding-bottom-small) var(--jourma-button-padding-round-end-small);font-size:18px;font-weight:700}.button--filled.button--normal{background-color:var(--jourma-color-action);color:var(--jourma-color-text-on-action)}.button--filled.button--attention{background-color:var(--jourma-color-action-attention);color:var(--jourma-color-text-on-action-attention)}.button--filled.button--special{background-color:var(--jourma-color-action-special);color:var(--jourma-color-text-on-action-special)}.button--filled:not(:disabled):active{background-color:var(--jourma-color-action-pressed);color:var(--jourma-color-text-on-surface-focused)}.button--filled:disabled{background-color:var(--jourma-color-disabled-surface);color:var(--jourma-color-disabled-text-on-surface);cursor:default}.button--outlined{background:transparent;border-style:solid;border-width:2px}.button--outlined.button--large{border-bottom-left-radius:25px;border-top-left-radius:25px;padding:var(--jourma-button-padding-top-large) var(--jourma-button-padding-sharp-end-large) var(--jourma-button-padding-bottom-large) var(--jourma-button-padding-round-end-large);font-size:20px;font-weight:500}.button--outlined.button--medium{border-bottom-left-radius:22px;border-top-left-radius:22px;padding:var(--jourma-button-padding-top-medium) var(--jourma-button-padding-sharp-end-medium) var(--jourma-button-padding-bottom-medium) var(--jourma-button-padding-round-end-medium);font-size:20px;font-weight:500}.button--outlined.button--small{border-bottom-left-radius:22px;border-top-left-radius:22px;padding:var(--jourma-button-padding-top-small) var(--jourma-button-padding-sharp-end-small) var(--jourma-button-padding-bottom-small) var(--jourma-button-padding-round-end-small);font-size:18px;font-weight:500}.button--outlined.button--normal{border-color:var(--jourma-color-action);color:var(--jourma-color-text-action)}.button--outlined.button--attention{border-color:var(--jourma-color-action-attention);color:var(--jourma-color-text-attention)}.button--outlined.button--special{border-color:var(--jourma-color-action-special);color:var(--jourma-color-text-special)}.button--outlined:not(:disabled):active{border-color:var(--jourma-color-action-pressed);color:var(--jourma-color-action-pressed)}.button--outlined:disabled{border-color:var(--jourma-color-disabled-stroke);color:var(--jourma-color-disabled-text);cursor:default}.button--text{background:transparent;border:none}.button--text.button--large{padding:var(--jourma-button-padding-top-large) var(--jourma-button-padding-sharp-end-large) var(--jourma-button-padding-bottom-large);font-size:20px;font-weight:500}.button--text.button--medium{padding:var(--jourma-button-padding-top-medium) var(--jourma-button-padding-sharp-end-medium) var(--jourma-button-padding-bottom-medium);font-size:20px;font-weight:500}.button--text.button--small{padding:var(--jourma-button-padding-top-small) var(--jourma-button-padding-sharp-end-small) var(--jourma-button-padding-bottom-small);font-size:18px;font-weight:500}.button--text.button--normal{color:var(--jourma-color-text-action)}.button--text.button--attention{color:var(--jourma-color-text-attention)}.button--text.button--special{color:var(--jourma-color-text-special)}.button--text:not(:disabled):active{color:var(--jourma-color-action-pressed)}.button--text:disabled{color:var(--jourma-color-disabled-text);cursor:default}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--jourma-radius-m);border:none;padding:0;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}.icon-button:not(:disabled){cursor:pointer}.icon-button--filled.icon-button--normal{background-color:var(--jourma-color-action)}.icon-button--filled.icon-button--special{background-color:var(--jourma-color-action-special)}.icon-button--filled.icon-button--attention{background-color:var(--jourma-color-action-attention)}.icon-button--filled.icon-button--neutral{background-color:var(--jourma-color-white-10)}.icon-button--filled.icon-button--pressed{background-color:var(--jourma-color-action-pressed)}.icon-button--filled:disabled{background-color:var(--jourma-color-disabled-surface);cursor:default}.icon-button--outlined{background:transparent;border-style:solid;border-width:2px}.icon-button--outlined.icon-button--normal{border-color:var(--jourma-color-action)}.icon-button--outlined.icon-button--special{border-color:var(--jourma-color-action-special)}.icon-button--outlined.icon-button--attention{border-color:var(--jourma-color-action-attention)}.icon-button--outlined.icon-button--neutral{border-color:var(--jourma-color-white-30)}.icon-button--outlined.icon-button--pressed{border-color:var(--jourma-color-action-pressed)}.icon-button--outlined:disabled{border-color:var(--jourma-color-disabled-stroke);cursor:default}.icon-button__icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center}.icon-button__icon>svg{width:100%;height:100%}.text-field{display:flex;flex-direction:column;align-items:flex-start;width:100%;font-family:Bugrino,sans-serif;font-feature-settings:"dlig" 1}.text-field--large{gap:var(--jourma-spacing-xs)}.text-field__label{font-size:17px;font-weight:500;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.text-field--large .text-field__label{color:var(--jourma-color-text-secondary)}.text-field--large.text-field--disabled .text-field__label{color:var(--jourma-color-disabled-text)}.text-field--compact .text-field__label{color:var(--jourma-color-label-on-surface);width:100px;flex-shrink:0}.text-field--compact.text-field--focused .text-field__label{color:var(--jourma-color-label-on-surface-focused)}.text-field--compact.text-field--disabled .text-field__label{color:var(--jourma-color-disabled-text)}.text-field__input-wrapper{display:flex;align-items:center;gap:var(--jourma-field-gap);width:100%;overflow:clip;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}.text-field--large .text-field__input-wrapper{padding:var(--jourma-field-padding-top-large) var(--jourma-field-padding-ends) var(--jourma-field-padding-bottom-large);border-radius:var(--jourma-field-radius)}.text-field--compact .text-field__input-wrapper{padding:var(--jourma-field-padding-top-compact) var(--jourma-field-padding-ends) var(--jourma-field-padding-bottom-compact);border-radius:var(--jourma-field-radius-compact)}.text-field__input-wrapper{background-color:var(--jourma-color-surface);border:2px solid transparent}.text-field--pressed .text-field__input-wrapper{background-color:var(--jourma-color-surface-pressed)}.text-field--focused .text-field__input-wrapper{background-color:var(--jourma-color-surface-focused)}.text-field--disabled .text-field__input-wrapper{background-color:#00000003;border-color:var(--jourma-color-disabled-stroke)}.text-field__input{flex:1 0 0;min-width:0;background:none;border:none;outline:none;padding:0;font-family:inherit;font-feature-settings:inherit;line-height:1.1}.text-field--large .text-field__input{font-size:20px}.text-field--compact .text-field__input{font-size:17px}.text-field__input{color:var(--jourma-color-text-on-surface)}.text-field__input::placeholder{color:var(--jourma-color-placeholder-text)}.text-field--focused .text-field__input{color:var(--jourma-color-text-on-surface-focused)}.text-field--focused .text-field__input::placeholder{color:var(--jourma-color-disabled-text-on-surface)}.text-field--disabled .text-field__input{color:var(--jourma-color-disabled-text)}.text-field--disabled .text-field__input::placeholder{color:var(--jourma-color-disabled-text);opacity:.5}.text-field__error-icon{flex-shrink:0;width:17px;height:17px;color:var(--jourma-color-text-attention)}.text-field__error{font-family:Open Sans,sans-serif;font-size:12px;font-weight:400;line-height:1.4;letter-spacing:.24px;color:var(--jourma-color-text-attention);width:100%}.text-field--large .text-field__error{padding-right:var(--jourma-spacing-m)}.text-field--compact .text-field__error{padding:var(--jourma-spacing-xxs) var(--jourma-spacing-m) var(--jourma-spacing-xs) var(--jourma-spacing-xs)}.collection-thumbnail{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:171px;position:relative;cursor:pointer;font-family:Bugrino,sans-serif;font-feature-settings:"dlig" 1}.collection-thumbnail--disabled{cursor:default}.collection-thumbnail__image{position:relative;width:171px;height:171px;border-top-left-radius:16px;border-bottom-left-radius:16px;overflow:hidden;flex-shrink:0}.collection-thumbnail--disabled .collection-thumbnail__image{opacity:.5}.collection-thumbnail__image img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.collection-thumbnail__image-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--jourma-color-surface-pressed)}.collection-thumbnail__title{font-size:17px;font-weight:500;line-height:1.1;color:var(--jourma-color-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;flex-shrink:0}.collection-thumbnail--disabled .collection-thumbnail__title{color:var(--jourma-color-disabled-text)}.collection-thumbnail:active:not(.collection-thumbnail--disabled) .collection-thumbnail__title{color:var(--jourma-color-action-pressed)}.collection-thumbnail__badge{position:absolute;top:4px;right:4px;min-width:24px;display:flex;align-items:center;justify-content:center;padding:4px 8px;border-radius:22px;background-color:#00000080;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);overflow:clip}.collection-thumbnail__badge-text{font-size:13px;font-weight:700;line-height:1.2;letter-spacing:.26px;color:var(--jourma-color-text-primary);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.collection-thumbnail--disabled .collection-thumbnail__badge-text{color:var(--jourma-color-disabled-text)}.product-teaser{display:flex;flex-direction:column;align-items:center;gap:16px;position:relative;cursor:pointer;font-family:Bugrino,sans-serif;font-feature-settings:"dlig" 1}.product-teaser__image{position:relative;width:128px;height:128px;border-top-left-radius:12px;border-bottom-left-radius:12px;overflow:hidden;flex-shrink:0}.product-teaser__image img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.product-teaser:active .product-teaser__image:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--jourma-color-surface-pressed);border-radius:inherit}.product-teaser__info{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;text-align:center;white-space:nowrap}.product-teaser__title{font-size:14px;font-weight:500;line-height:1.1;letter-spacing:.28px;color:var(--jourma-color-text-primary);overflow:hidden;text-overflow:ellipsis}.product-teaser__price-row{display:flex;align-items:baseline;gap:8px}.product-teaser__price{font-size:14px;font-weight:500;line-height:1.1;letter-spacing:.28px;color:var(--jourma-color-text-action)}.product-teaser__price-translation{font-family:Open Sans,sans-serif;font-size:12px;font-weight:400;line-height:1.4;letter-spacing:.24px;color:var(--jourma-color-text-tertiary)}.product-teaser__app-icon{position:absolute;top:4px;left:4px;width:24px;height:24px}.product-teaser__app-icon img{width:100%;height:100%;display:block}.product-teaser__discount{position:absolute;top:109px;right:0;display:flex;align-items:center;justify-content:center;padding:4px 8px;background-color:var(--jourma-color-action-attention);border-top-left-radius:16px;border-bottom-left-radius:16px;font-size:17px;font-weight:500;line-height:1.1;color:#fff;white-space:nowrap}.location-teaser{display:flex;flex-direction:column;align-items:flex-start;position:relative;overflow:clip;border-top-left-radius:24px;border-bottom-left-radius:24px;background-color:var(--jourma-color-action);font-family:Bugrino,sans-serif;font-feature-settings:"dlig" 1}.location-teaser__image{position:relative;width:100%;height:193px;border-bottom-left-radius:24px;overflow:hidden;flex-shrink:0}.location-teaser__image img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.location-teaser__info{display:flex;flex-direction:column;gap:16px;align-items:flex-start;width:100%;padding:8px 16px 16px}.location-teaser__title{font-size:20px;font-weight:500;line-height:1.1;color:var(--jourma-color-text-on-action);padding-right:24px;width:100%}.location-teaser__tags{display:flex;flex-wrap:wrap;gap:2px;align-items:flex-start;width:100%}.location-teaser__tag{display:flex;align-items:center;justify-content:center;padding:4px 8px 4px 9px;background-color:#000;border-top-left-radius:22px;border-bottom-left-radius:22px;overflow:clip;flex-shrink:0}.location-teaser__tag-text{font-size:13px;font-weight:400;line-height:1.2;letter-spacing:.26px;color:var(--jourma-color-text-secondary);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.location-teaser__app-icon-wrapper{flex-shrink:0;padding-right:2px}.location-teaser__app-icon{width:24px;height:24px;border-radius:24px;border:2px solid var(--jourma-color-text-on-action);overflow:clip}.location-teaser__app-icon img{width:100%;height:100%;display:block}.location-teaser__wishlist{position:absolute;top:0;right:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0}.location-teaser__wishlist svg{width:24px;height:21px}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jourma-react-lib",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Jourma UI component library for React",
   "type": "module",
   "main": "./dist/index.cjs",