@telia/teddy 0.0.70 → 0.0.72

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/components/card/card-price.cjs +20 -28
  2. package/dist/components/card/card-price.d.ts +4 -1
  3. package/dist/components/card/card-price.js +21 -29
  4. package/dist/components/card/card.cjs +49 -49
  5. package/dist/components/card/card.js +49 -49
  6. package/dist/components/scroll-area/index.d.ts +4 -0
  7. package/dist/components/scroll-area/scroll-area-bar.cjs +44 -25
  8. package/dist/components/scroll-area/scroll-area-bar.js +44 -25
  9. package/dist/components/scroll-area/scroll-area-item.cjs +28 -15
  10. package/dist/components/scroll-area/scroll-area-item.d.ts +6 -0
  11. package/dist/components/scroll-area/scroll-area-item.js +28 -15
  12. package/dist/components/scroll-area/scroll-area-root.d.ts +7 -4
  13. package/dist/components/tabs/index.d.ts +1 -0
  14. package/dist/components/tabs/tabs-scroll.d.ts +1 -0
  15. package/dist/style.css +98 -98
  16. package/package.json +1 -1
package/dist/components/card/card-price.cjs CHANGED
@@ -6,37 +6,29 @@ const clsx = require("clsx");
6
6
  const components_card_card = require("./card.cjs");
7
7
  const components_flex_flex = require("../flex/flex.cjs");
8
8
  const components_text_text = require("../text/text.cjs");
9
+ const tokens_color_variables = require("../../tokens/color/variables.cjs");
9
10
  const Price = React.forwardRef(
10
- ({ className, pricePrefix, priceText }, forwardRef) => {
11
+ ({ className, pricePrefix, priceText, variant = "default", textAbovePrice, textBelowPrice }, forwardRef) => {
11
12
  const rootColorDotsClass = `${components_card_card.rootClassName}__price`;
12
13
  const classes = clsx([components_card_card.styles[rootColorDotsClass]], className);
13
- return /* @__PURE__ */ jsxRuntime.jsx(
14
- components_flex_flex.Flex,
15
- {
16
- flexGrow: "1",
17
- mt: "auto",
18
- mb: "100",
19
- ref: forwardRef,
20
- className: classes,
21
- direction: "row",
22
- align: "baseline",
23
- asChild: true,
24
- children: /* @__PURE__ */ jsxRuntime.jsxs(components_text_text.Text, { variant: "paragraph-100", as: "p", children: [
25
- pricePrefix,
26
- " ",
27
- /* @__PURE__ */ jsxRuntime.jsx(
28
- components_text_text.Text,
29
- {
30
- variant: "paragraph-100-bold",
31
- as: "span",
32
- ml: "100",
33
- className: components_card_card.styles[`${rootColorDotsClass}--big`],
34
- children: priceText
35
- }
36
- )
37
- ] })
38
- }
39
- );
14
+ return /* @__PURE__ */ jsxRuntime.jsxs(components_flex_flex.Flex, { flexGrow: "1", mt: "auto", mb: "100", ref: forwardRef, className: classes, direction: "column", gap: "10", children: [
15
+ textAbovePrice ? /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { variant: "additional-100", as: "p", faded: true, children: textAbovePrice }) : null,
16
+ /* @__PURE__ */ jsxRuntime.jsxs(components_flex_flex.Flex, { direction: "row", align: "baseline", flexGrow: "1", wrap: "nowrap", children: [
17
+ /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { variant: "paragraph-200", as: "p", faded: true, children: pricePrefix ? `${pricePrefix} ` : null }),
18
+ /* @__PURE__ */ jsxRuntime.jsx(
19
+ components_text_text.Text,
20
+ {
21
+ variant: "paragraph-100-bold",
22
+ as: "span",
23
+ ml: "100",
24
+ color: variant === "purple" ? tokens_color_variables.teddyColorBrandCorePurple : void 0,
25
+ className: components_card_card.styles[`${rootColorDotsClass}--big`],
26
+ children: priceText
27
+ }
28
+ )
29
+ ] }),
30
+ textBelowPrice ? /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { variant: "additional-100", as: "p", faded: true, children: textBelowPrice }) : null
31
+ ] });
40
32
  }
41
33
  );
42
34
  Price.displayName = "Price";
package/dist/components/card/card-price.d.ts CHANGED
@@ -1,7 +1,10 @@
1
1
  import { default as React } from 'react';
2
2
 
3
3
  export type PriceProps = {
4
- pricePrefix: string;
4
+ variant?: 'default' | 'purple';
5
+ textAbovePrice?: string;
6
+ textBelowPrice?: string;
7
+ pricePrefix?: string;
5
8
  priceText: string;
6
9
  className?: string;
7
10
  };
package/dist/components/card/card-price.js CHANGED
@@ -1,40 +1,32 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
2
  import React__default from "react";
3
3
  import clsx from "clsx";
4
4
  import { s as styles, rootClassName } from "./card.js";
5
5
  import { Flex } from "../flex/flex.js";
6
6
  import { Text } from "../text/text.js";
7
+ import { teddyColorBrandCorePurple } from "../../tokens/color/variables.js";
7
8
  const Price = React__default.forwardRef(
8
- ({ className, pricePrefix, priceText }, forwardRef) => {
9
+ ({ className, pricePrefix, priceText, variant = "default", textAbovePrice, textBelowPrice }, forwardRef) => {
9
10
  const rootColorDotsClass = `${rootClassName}__price`;
10
11
  const classes = clsx([styles[rootColorDotsClass]], className);
11
- return /* @__PURE__ */ jsx(
12
- Flex,
13
- {
14
- flexGrow: "1",
15
- mt: "auto",
16
- mb: "100",
17
- ref: forwardRef,
18
- className: classes,
19
- direction: "row",
20
- align: "baseline",
21
- asChild: true,
22
- children: /* @__PURE__ */ jsxs(Text, { variant: "paragraph-100", as: "p", children: [
23
- pricePrefix,
24
- " ",
25
- /* @__PURE__ */ jsx(
26
- Text,
27
- {
28
- variant: "paragraph-100-bold",
29
- as: "span",
30
- ml: "100",
31
- className: styles[`${rootColorDotsClass}--big`],
32
- children: priceText
33
- }
34
- )
35
- ] })
36
- }
37
- );
12
+ return /* @__PURE__ */ jsxs(Flex, { flexGrow: "1", mt: "auto", mb: "100", ref: forwardRef, className: classes, direction: "column", gap: "10", children: [
13
+ textAbovePrice ? /* @__PURE__ */ jsx(Text, { variant: "additional-100", as: "p", faded: true, children: textAbovePrice }) : null,
14
+ /* @__PURE__ */ jsxs(Flex, { direction: "row", align: "baseline", flexGrow: "1", wrap: "nowrap", children: [
15
+ /* @__PURE__ */ jsx(Text, { variant: "paragraph-200", as: "p", faded: true, children: pricePrefix ? `${pricePrefix} ` : null }),
16
+ /* @__PURE__ */ jsx(
17
+ Text,
18
+ {
19
+ variant: "paragraph-100-bold",
20
+ as: "span",
21
+ ml: "100",
22
+ color: variant === "purple" ? teddyColorBrandCorePurple : void 0,
23
+ className: styles[`${rootColorDotsClass}--big`],
24
+ children: priceText
25
+ }
26
+ )
27
+ ] }),
28
+ textBelowPrice ? /* @__PURE__ */ jsx(Text, { variant: "additional-100", as: "p", faded: true, children: textBelowPrice }) : null
29
+ ] });
38
30
  }
39
31
  );
40
32
  Price.displayName = "Price";
package/dist/components/card/card.cjs CHANGED
@@ -7,55 +7,55 @@ const utils_composeEventHandlers = require("../../utils/composeEventHandlers.cjs
7
7
  const components_grid_grid = require("../grid/grid.cjs");
8
8
  const tokens_color_variables = require("../../tokens/color/variables.cjs");
9
9
  const styles = {
10
- "teddy-card": "_teddy-card_1vcct_3",
11
- "teddy-card__slot": "_teddy-card__slot_1vcct_13",
12
- "teddy-card__slot--bottom": "_teddy-card__slot--bottom_1vcct_16",
13
- "teddy-card__slot--center": "_teddy-card__slot--center_1vcct_19",
14
- "teddy-card__slot--no-translate": "_teddy-card__slot--no-translate_1vcct_25",
15
- "teddy-card--shadow": "_teddy-card--shadow_1vcct_44",
16
- "teddy-card__action": "_teddy-card__action_1vcct_48",
17
- "teddy-card__action--disabled": "_teddy-card__action--disabled_1vcct_48",
18
- "teddy-card--border": "_teddy-card--border_1vcct_55",
19
- "teddy-card--layout": "_teddy-card--layout_1vcct_58",
20
- "teddy-card__illustration": "_teddy-card__illustration_1vcct_58",
21
- "teddy-card__carousel": "_teddy-card__carousel_1vcct_61",
22
- "teddy-card__content": "_teddy-card__content_1vcct_64",
23
- "teddy-card__heading": "_teddy-card__heading_1vcct_67",
24
- "teddy-card__action-wrapper": "_teddy-card__action-wrapper_1vcct_70",
25
- "teddy-card__footer": "_teddy-card__footer_1vcct_73",
26
- "teddy-card__overline": "_teddy-card__overline_1vcct_76",
27
- "teddy-card__description": "_teddy-card__description_1vcct_79",
28
- "teddy-card__color-dots": "_teddy-card__color-dots_1vcct_82",
29
- "teddy-card__availability": "_teddy-card__availability_1vcct_85",
30
- "teddy-card__price": "_teddy-card__price_1vcct_88",
31
- "teddy-card--default": "_teddy-card--default_1vcct_91",
32
- "teddy-card--navigation-vertical": "_teddy-card--navigation-vertical_1vcct_96",
33
- "teddy-card--navigation-horizontal-small": "_teddy-card--navigation-horizontal-small_1vcct_115",
34
- "teddy-card--navigation-horizontal-large": "_teddy-card--navigation-horizontal-large_1vcct_127",
35
- "teddy-card--rich-card": "_teddy-card--rich-card_1vcct_139",
36
- "teddy-card__line": "_teddy-card__line_1vcct_157",
37
- "teddy-card--purple-light": "_teddy-card--purple-light_1vcct_161",
38
- "teddy-card--purple-dark": "_teddy-card--purple-dark_1vcct_175",
39
- "teddy-card--white": "_teddy-card--white_1vcct_194",
40
- "teddy-card--gray": "_teddy-card--gray_1vcct_208",
41
- "teddy-card--beige": "_teddy-card--beige_1vcct_222",
42
- "teddy-card--product": "_teddy-card--product_1vcct_236",
43
- "teddy-card__price--big": "_teddy-card__price--big_1vcct_296",
44
- "teddy-card__image--as-background": "_teddy-card__image--as-background_1vcct_299",
45
- "teddy-card--background-image": "_teddy-card--background-image_1vcct_305",
46
- "teddy-card__illustration--rounded": "_teddy-card__illustration--rounded_1vcct_310",
47
- "teddy-card__inset": "_teddy-card__inset_1vcct_314",
48
- "teddy-card__inset--top": "_teddy-card__inset--top_1vcct_317",
49
- "teddy-card__inset--left": "_teddy-card__inset--left_1vcct_320",
50
- "teddy-card__inset--right": "_teddy-card__inset--right_1vcct_323",
51
- "teddy-card__inset--bottom": "_teddy-card__inset--bottom_1vcct_326",
52
- "teddy-card__availability--badge": "_teddy-card__availability--badge_1vcct_341",
53
- "teddy-card__availability--success": "_teddy-card__availability--success_1vcct_344",
54
- "teddy-card__availability--warning": "_teddy-card__availability--warning_1vcct_347",
55
- "teddy-card__availability--error": "_teddy-card__availability--error_1vcct_350",
56
- "teddy-card__availability--special": "_teddy-card__availability--special_1vcct_353",
57
- "teddy-card__availability--neutral": "_teddy-card__availability--neutral_1vcct_356",
58
- "teddy-card__availability--information": "_teddy-card__availability--information_1vcct_359"
10
+ "teddy-card": "_teddy-card_1qi3a_3",
11
+ "teddy-card__slot": "_teddy-card__slot_1qi3a_13",
12
+ "teddy-card__slot--bottom": "_teddy-card__slot--bottom_1qi3a_16",
13
+ "teddy-card__slot--center": "_teddy-card__slot--center_1qi3a_19",
14
+ "teddy-card__slot--no-translate": "_teddy-card__slot--no-translate_1qi3a_25",
15
+ "teddy-card--shadow": "_teddy-card--shadow_1qi3a_44",
16
+ "teddy-card__action": "_teddy-card__action_1qi3a_48",
17
+ "teddy-card__action--disabled": "_teddy-card__action--disabled_1qi3a_48",
18
+ "teddy-card--border": "_teddy-card--border_1qi3a_55",
19
+ "teddy-card--layout": "_teddy-card--layout_1qi3a_58",
20
+ "teddy-card__illustration": "_teddy-card__illustration_1qi3a_58",
21
+ "teddy-card__carousel": "_teddy-card__carousel_1qi3a_61",
22
+ "teddy-card__content": "_teddy-card__content_1qi3a_64",
23
+ "teddy-card__heading": "_teddy-card__heading_1qi3a_67",
24
+ "teddy-card__action-wrapper": "_teddy-card__action-wrapper_1qi3a_70",
25
+ "teddy-card__footer": "_teddy-card__footer_1qi3a_73",
26
+ "teddy-card__overline": "_teddy-card__overline_1qi3a_76",
27
+ "teddy-card__description": "_teddy-card__description_1qi3a_79",
28
+ "teddy-card__color-dots": "_teddy-card__color-dots_1qi3a_82",
29
+ "teddy-card__availability": "_teddy-card__availability_1qi3a_85",
30
+ "teddy-card__price": "_teddy-card__price_1qi3a_88",
31
+ "teddy-card--default": "_teddy-card--default_1qi3a_91",
32
+ "teddy-card--navigation-vertical": "_teddy-card--navigation-vertical_1qi3a_96",
33
+ "teddy-card--navigation-horizontal-small": "_teddy-card--navigation-horizontal-small_1qi3a_115",
34
+ "teddy-card--navigation-horizontal-large": "_teddy-card--navigation-horizontal-large_1qi3a_127",
35
+ "teddy-card--rich-card": "_teddy-card--rich-card_1qi3a_139",
36
+ "teddy-card__line": "_teddy-card__line_1qi3a_157",
37
+ "teddy-card--purple-light": "_teddy-card--purple-light_1qi3a_161",
38
+ "teddy-card--purple-dark": "_teddy-card--purple-dark_1qi3a_175",
39
+ "teddy-card--white": "_teddy-card--white_1qi3a_194",
40
+ "teddy-card--gray": "_teddy-card--gray_1qi3a_208",
41
+ "teddy-card--beige": "_teddy-card--beige_1qi3a_222",
42
+ "teddy-card--product": "_teddy-card--product_1qi3a_236",
43
+ "teddy-card__price--big": "_teddy-card__price--big_1qi3a_296",
44
+ "teddy-card__image--as-background": "_teddy-card__image--as-background_1qi3a_299",
45
+ "teddy-card--background-image": "_teddy-card--background-image_1qi3a_305",
46
+ "teddy-card__illustration--rounded": "_teddy-card__illustration--rounded_1qi3a_310",
47
+ "teddy-card__inset": "_teddy-card__inset_1qi3a_314",
48
+ "teddy-card__inset--top": "_teddy-card__inset--top_1qi3a_317",
49
+ "teddy-card__inset--left": "_teddy-card__inset--left_1qi3a_320",
50
+ "teddy-card__inset--right": "_teddy-card__inset--right_1qi3a_323",
51
+ "teddy-card__inset--bottom": "_teddy-card__inset--bottom_1qi3a_326",
52
+ "teddy-card__availability--badge": "_teddy-card__availability--badge_1qi3a_341",
53
+ "teddy-card__availability--success": "_teddy-card__availability--success_1qi3a_344",
54
+ "teddy-card__availability--warning": "_teddy-card__availability--warning_1qi3a_347",
55
+ "teddy-card__availability--error": "_teddy-card__availability--error_1qi3a_350",
56
+ "teddy-card__availability--special": "_teddy-card__availability--special_1qi3a_353",
57
+ "teddy-card__availability--neutral": "_teddy-card__availability--neutral_1qi3a_356",
58
+ "teddy-card__availability--information": "_teddy-card__availability--information_1qi3a_359"
59
59
  };
60
60
  const rootClassName = "teddy-card";
61
61
  const actionElementIdentifier = `${rootClassName}__action`;
package/dist/components/card/card.js CHANGED
@@ -5,55 +5,55 @@ import { composeEventHandlers } from "../../utils/composeEventHandlers.js";
5
5
  import { Grid } from "../grid/grid.js";
6
6
  import { teddyColorTransparentWhite850, teddyColorTransparentWhite800, teddyColorTransparentWhite100, teddyColorTransparentBlack600, teddyColorTransparentBlack200 } from "../../tokens/color/variables.js";
7
7
  const styles = {
8
- "teddy-card": "_teddy-card_1vcct_3",
9
- "teddy-card__slot": "_teddy-card__slot_1vcct_13",
10
- "teddy-card__slot--bottom": "_teddy-card__slot--bottom_1vcct_16",
11
- "teddy-card__slot--center": "_teddy-card__slot--center_1vcct_19",
12
- "teddy-card__slot--no-translate": "_teddy-card__slot--no-translate_1vcct_25",
13
- "teddy-card--shadow": "_teddy-card--shadow_1vcct_44",
14
- "teddy-card__action": "_teddy-card__action_1vcct_48",
15
- "teddy-card__action--disabled": "_teddy-card__action--disabled_1vcct_48",
16
- "teddy-card--border": "_teddy-card--border_1vcct_55",
17
- "teddy-card--layout": "_teddy-card--layout_1vcct_58",
18
- "teddy-card__illustration": "_teddy-card__illustration_1vcct_58",
19
- "teddy-card__carousel": "_teddy-card__carousel_1vcct_61",
20
- "teddy-card__content": "_teddy-card__content_1vcct_64",
21
- "teddy-card__heading": "_teddy-card__heading_1vcct_67",
22
- "teddy-card__action-wrapper": "_teddy-card__action-wrapper_1vcct_70",
23
- "teddy-card__footer": "_teddy-card__footer_1vcct_73",
24
- "teddy-card__overline": "_teddy-card__overline_1vcct_76",
25
- "teddy-card__description": "_teddy-card__description_1vcct_79",
26
- "teddy-card__color-dots": "_teddy-card__color-dots_1vcct_82",
27
- "teddy-card__availability": "_teddy-card__availability_1vcct_85",
28
- "teddy-card__price": "_teddy-card__price_1vcct_88",
29
- "teddy-card--default": "_teddy-card--default_1vcct_91",
30
- "teddy-card--navigation-vertical": "_teddy-card--navigation-vertical_1vcct_96",
31
- "teddy-card--navigation-horizontal-small": "_teddy-card--navigation-horizontal-small_1vcct_115",
32
- "teddy-card--navigation-horizontal-large": "_teddy-card--navigation-horizontal-large_1vcct_127",
33
- "teddy-card--rich-card": "_teddy-card--rich-card_1vcct_139",
34
- "teddy-card__line": "_teddy-card__line_1vcct_157",
35
- "teddy-card--purple-light": "_teddy-card--purple-light_1vcct_161",
36
- "teddy-card--purple-dark": "_teddy-card--purple-dark_1vcct_175",
37
- "teddy-card--white": "_teddy-card--white_1vcct_194",
38
- "teddy-card--gray": "_teddy-card--gray_1vcct_208",
39
- "teddy-card--beige": "_teddy-card--beige_1vcct_222",
40
- "teddy-card--product": "_teddy-card--product_1vcct_236",
41
- "teddy-card__price--big": "_teddy-card__price--big_1vcct_296",
42
- "teddy-card__image--as-background": "_teddy-card__image--as-background_1vcct_299",
43
- "teddy-card--background-image": "_teddy-card--background-image_1vcct_305",
44
- "teddy-card__illustration--rounded": "_teddy-card__illustration--rounded_1vcct_310",
45
- "teddy-card__inset": "_teddy-card__inset_1vcct_314",
46
- "teddy-card__inset--top": "_teddy-card__inset--top_1vcct_317",
47
- "teddy-card__inset--left": "_teddy-card__inset--left_1vcct_320",
48
- "teddy-card__inset--right": "_teddy-card__inset--right_1vcct_323",
49
- "teddy-card__inset--bottom": "_teddy-card__inset--bottom_1vcct_326",
50
- "teddy-card__availability--badge": "_teddy-card__availability--badge_1vcct_341",
51
- "teddy-card__availability--success": "_teddy-card__availability--success_1vcct_344",
52
- "teddy-card__availability--warning": "_teddy-card__availability--warning_1vcct_347",
53
- "teddy-card__availability--error": "_teddy-card__availability--error_1vcct_350",
54
- "teddy-card__availability--special": "_teddy-card__availability--special_1vcct_353",
55
- "teddy-card__availability--neutral": "_teddy-card__availability--neutral_1vcct_356",
56
- "teddy-card__availability--information": "_teddy-card__availability--information_1vcct_359"
8
+ "teddy-card": "_teddy-card_1qi3a_3",
9
+ "teddy-card__slot": "_teddy-card__slot_1qi3a_13",
10
+ "teddy-card__slot--bottom": "_teddy-card__slot--bottom_1qi3a_16",
11
+ "teddy-card__slot--center": "_teddy-card__slot--center_1qi3a_19",
12
+ "teddy-card__slot--no-translate": "_teddy-card__slot--no-translate_1qi3a_25",
13
+ "teddy-card--shadow": "_teddy-card--shadow_1qi3a_44",
14
+ "teddy-card__action": "_teddy-card__action_1qi3a_48",
15
+ "teddy-card__action--disabled": "_teddy-card__action--disabled_1qi3a_48",
16
+ "teddy-card--border": "_teddy-card--border_1qi3a_55",
17
+ "teddy-card--layout": "_teddy-card--layout_1qi3a_58",
18
+ "teddy-card__illustration": "_teddy-card__illustration_1qi3a_58",
19
+ "teddy-card__carousel": "_teddy-card__carousel_1qi3a_61",
20
+ "teddy-card__content": "_teddy-card__content_1qi3a_64",
21
+ "teddy-card__heading": "_teddy-card__heading_1qi3a_67",
22
+ "teddy-card__action-wrapper": "_teddy-card__action-wrapper_1qi3a_70",
23
+ "teddy-card__footer": "_teddy-card__footer_1qi3a_73",
24
+ "teddy-card__overline": "_teddy-card__overline_1qi3a_76",
25
+ "teddy-card__description": "_teddy-card__description_1qi3a_79",
26
+ "teddy-card__color-dots": "_teddy-card__color-dots_1qi3a_82",
27
+ "teddy-card__availability": "_teddy-card__availability_1qi3a_85",
28
+ "teddy-card__price": "_teddy-card__price_1qi3a_88",
29
+ "teddy-card--default": "_teddy-card--default_1qi3a_91",
30
+ "teddy-card--navigation-vertical": "_teddy-card--navigation-vertical_1qi3a_96",
31
+ "teddy-card--navigation-horizontal-small": "_teddy-card--navigation-horizontal-small_1qi3a_115",
32
+ "teddy-card--navigation-horizontal-large": "_teddy-card--navigation-horizontal-large_1qi3a_127",
33
+ "teddy-card--rich-card": "_teddy-card--rich-card_1qi3a_139",
34
+ "teddy-card__line": "_teddy-card__line_1qi3a_157",
35
+ "teddy-card--purple-light": "_teddy-card--purple-light_1qi3a_161",
36
+ "teddy-card--purple-dark": "_teddy-card--purple-dark_1qi3a_175",
37
+ "teddy-card--white": "_teddy-card--white_1qi3a_194",
38
+ "teddy-card--gray": "_teddy-card--gray_1qi3a_208",
39
+ "teddy-card--beige": "_teddy-card--beige_1qi3a_222",
40
+ "teddy-card--product": "_teddy-card--product_1qi3a_236",
41
+ "teddy-card__price--big": "_teddy-card__price--big_1qi3a_296",
42
+ "teddy-card__image--as-background": "_teddy-card__image--as-background_1qi3a_299",
43
+ "teddy-card--background-image": "_teddy-card--background-image_1qi3a_305",
44
+ "teddy-card__illustration--rounded": "_teddy-card__illustration--rounded_1qi3a_310",
45
+ "teddy-card__inset": "_teddy-card__inset_1qi3a_314",
46
+ "teddy-card__inset--top": "_teddy-card__inset--top_1qi3a_317",
47
+ "teddy-card__inset--left": "_teddy-card__inset--left_1qi3a_320",
48
+ "teddy-card__inset--right": "_teddy-card__inset--right_1qi3a_323",
49
+ "teddy-card__inset--bottom": "_teddy-card__inset--bottom_1qi3a_326",
50
+ "teddy-card__availability--badge": "_teddy-card__availability--badge_1qi3a_341",
51
+ "teddy-card__availability--success": "_teddy-card__availability--success_1qi3a_344",
52
+ "teddy-card__availability--warning": "_teddy-card__availability--warning_1qi3a_347",
53
+ "teddy-card__availability--error": "_teddy-card__availability--error_1qi3a_350",
54
+ "teddy-card__availability--special": "_teddy-card__availability--special_1qi3a_353",
55
+ "teddy-card__availability--neutral": "_teddy-card__availability--neutral_1qi3a_356",
56
+ "teddy-card__availability--information": "_teddy-card__availability--information_1qi3a_359"
57
57
  };
58
58
  const rootClassName = "teddy-card";
59
59
  const actionElementIdentifier = `${rootClassName}__action`;
package/dist/components/scroll-area/index.d.ts CHANGED
@@ -4,9 +4,13 @@ import { ButtonProps } from './scroll-area-button';
4
4
 
5
5
  export declare const ScrollArea: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-scroll-area').ScrollAreaProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
6
6
  variant?: ("button" | "scrollbar") | undefined;
7
+ scrollBehavior?: "auto" | "smooth" | undefined;
7
8
  } & import('react').RefAttributes<HTMLDivElement>> & {
8
9
  Item: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
9
10
  asChild?: boolean | undefined;
11
+ isSelected?: boolean | undefined;
12
+ scrollBehavior?: "auto" | "smooth" | undefined;
13
+ scrollBehaviorOnMount?: "auto" | "smooth" | undefined;
10
14
  } & import('react').RefAttributes<HTMLDivElement>>;
11
15
  Button: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
12
16
  display?: import('../../utils/generate-styling').DisplayChildren | undefined;
package/dist/components/scroll-area/scroll-area-bar.cjs CHANGED
@@ -91,10 +91,13 @@ const Button = React.forwardRef(
91
91
  const scroll = (_a = context == null ? void 0 : context.scrollRef) == null ? void 0 : _a.getBoundingClientRect();
92
92
  const scrollDirection = direction === "up" || direction === "left" ? -1 : 1;
93
93
  const scrollAxis = direction === "up" || direction === "down" ? "top" : "left";
94
- const scrollAmount = ((direction === "up" || direction === "down" ? scroll == null ? void 0 : scroll.height : scroll == null ? void 0 : scroll.width) || 0) * 0.7;
94
+ const buttonSize = direction === "up" || direction === "down" ? e.currentTarget.offsetHeight : e.currentTarget.offsetWidth;
95
+ const scrollAmount = ((direction === "up" || direction === "down" ? scroll == null ? void 0 : scroll.height : scroll == null ? void 0 : scroll.width) || 0) - buttonSize * 2;
96
+ const hasReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
97
+ const scrollBehavior = hasReducedMotion ? "auto" : (context == null ? void 0 : context.scrollBehavior) ?? "smooth";
95
98
  (_b = context == null ? void 0 : context.scrollRef) == null ? void 0 : _b.scrollBy({
96
99
  [scrollAxis]: scrollAmount * scrollDirection,
97
- behavior: "smooth"
100
+ behavior: scrollBehavior
98
101
  });
99
102
  }),
100
103
  ref: forwardRef,
@@ -112,40 +115,56 @@ const Button = React.forwardRef(
112
115
  components_button_button.Button.displayName = "Button";
113
116
  const rootClassName = "teddy-scroll-area";
114
117
  const RootContext = React.createContext(void 0);
118
+ function isScrollable(element) {
119
+ if (!element)
120
+ return null;
121
+ const buffer = 1;
122
+ const scrollLeft = element.scrollLeft;
123
+ const scrollWidth = element.scrollWidth;
124
+ const offsetWidth = element.offsetWidth;
125
+ const maxScrollLeft = scrollWidth - offsetWidth;
126
+ const isRtl = getComputedStyle(element).direction === "rtl";
127
+ let left;
128
+ let right;
129
+ if (isRtl) {
130
+ const normalizedScrollLeft = Math.abs(scrollLeft);
131
+ left = normalizedScrollLeft < maxScrollLeft - buffer;
132
+ right = normalizedScrollLeft > buffer;
133
+ } else {
134
+ left = scrollLeft > buffer;
135
+ right = scrollLeft < maxScrollLeft - buffer;
136
+ }
137
+ const scrollTop = element.scrollTop;
138
+ const maxScrollTop = element.scrollHeight - element.offsetHeight;
139
+ const top = scrollTop > buffer;
140
+ const bottom = scrollTop < maxScrollTop - buffer;
141
+ return {
142
+ left,
143
+ right,
144
+ top,
145
+ bottom
146
+ };
147
+ }
115
148
  const Root = React.forwardRef(
116
- ({ className, variant, children, ...props }, forwardRef) => {
149
+ ({ className, variant, scrollBehavior = "smooth", children, ...props }, forwardRef) => {
117
150
  const [scrollRef, setScrollRef] = React.useState(null);
118
151
  const [hasScroll, setHasScroll] = React.useState(null);
119
- const initialHasScrollLeft = scrollRef ? scrollRef.scrollLeft > 0 : null;
120
- const initialHasScrollRight = scrollRef ? scrollRef.scrollLeft < scrollRef.scrollWidth - scrollRef.clientWidth : null;
121
- const initialHasScrollTop = scrollRef ? scrollRef.scrollTop > 0 : null;
122
- const initialHasScrollBottom = scrollRef ? scrollRef.scrollTop < scrollRef.scrollHeight - scrollRef.clientHeight : null;
123
- const hasScrollLeft = hasScroll ? hasScroll.left : initialHasScrollLeft;
124
- const hasScrollRight = hasScroll ? hasScroll.right : initialHasScrollRight;
125
- const hasScrollTop = hasScroll ? hasScroll.top : initialHasScrollTop;
126
- const hasScrollBottom = hasScroll ? hasScroll.bottom : initialHasScrollBottom;
152
+ const initialScrollable = isScrollable(scrollRef);
153
+ const hasScrollLeft = hasScroll ? hasScroll.left : initialScrollable == null ? void 0 : initialScrollable.left;
154
+ const hasScrollRight = hasScroll ? hasScroll.right : initialScrollable == null ? void 0 : initialScrollable.right;
155
+ const hasScrollTop = hasScroll ? hasScroll.top : initialScrollable == null ? void 0 : initialScrollable.top;
156
+ const hasScrollBottom = hasScroll ? hasScroll.bottom : initialScrollable == null ? void 0 : initialScrollable.bottom;
127
157
  const hasScrollHorizontal = hasScrollLeft || hasScrollRight;
128
158
  const hasScrollVertical = hasScrollTop || hasScrollBottom;
129
- const classes = clsx([styles[`${rootClassName}`]], className);
130
159
  function handleScroll(e) {
131
160
  const target = e.currentTarget;
132
- const { scrollLeft, scrollWidth, clientWidth, scrollTop, scrollHeight, clientHeight } = target;
133
- const buffer = 1;
134
- const hasScrollLeft2 = scrollLeft > 0;
135
- const hasScrollRight2 = scrollLeft < scrollWidth - clientWidth - buffer;
136
- const hasScrollTop2 = scrollTop > 0;
137
- const hasScrollBottom2 = scrollTop < scrollHeight - clientHeight - buffer;
138
- setHasScroll({
139
- left: hasScrollLeft2,
140
- right: hasScrollRight2,
141
- top: hasScrollTop2,
142
- bottom: hasScrollBottom2
143
- });
161
+ setHasScroll(isScrollable(target));
144
162
  }
163
+ const classes = clsx([styles[`${rootClassName}`]], className);
145
164
  return /* @__PURE__ */ jsxRuntime.jsx(
146
165
  RootContext.Provider,
147
166
  {
148
- value: { scrollRef, variant, hasScrollTop, hasScrollBottom, hasScrollLeft, hasScrollRight },
167
+ value: { scrollRef, variant, hasScrollTop, hasScrollBottom, hasScrollLeft, hasScrollRight, scrollBehavior },
149
168
  children: /* @__PURE__ */ jsxRuntime.jsxs(ScrollAreaPrimitive__namespace.Root, { ...props, ref: forwardRef, className: classes, children: [
150
169
  /* @__PURE__ */ jsxRuntime.jsx(
151
170
  ScrollAreaPrimitive__namespace.Viewport,
package/dist/components/scroll-area/scroll-area-bar.js CHANGED
@@ -72,10 +72,13 @@ const Button = React__default.forwardRef(
72
72
  const scroll = (_a = context == null ? void 0 : context.scrollRef) == null ? void 0 : _a.getBoundingClientRect();
73
73
  const scrollDirection = direction === "up" || direction === "left" ? -1 : 1;
74
74
  const scrollAxis = direction === "up" || direction === "down" ? "top" : "left";
75
- const scrollAmount = ((direction === "up" || direction === "down" ? scroll == null ? void 0 : scroll.height : scroll == null ? void 0 : scroll.width) || 0) * 0.7;
75
+ const buttonSize = direction === "up" || direction === "down" ? e.currentTarget.offsetHeight : e.currentTarget.offsetWidth;
76
+ const scrollAmount = ((direction === "up" || direction === "down" ? scroll == null ? void 0 : scroll.height : scroll == null ? void 0 : scroll.width) || 0) - buttonSize * 2;
77
+ const hasReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
78
+ const scrollBehavior = hasReducedMotion ? "auto" : (context == null ? void 0 : context.scrollBehavior) ?? "smooth";
76
79
  (_b = context == null ? void 0 : context.scrollRef) == null ? void 0 : _b.scrollBy({
77
80
  [scrollAxis]: scrollAmount * scrollDirection,
78
- behavior: "smooth"
81
+ behavior: scrollBehavior
79
82
  });
80
83
  }),
81
84
  ref: forwardRef,
@@ -93,40 +96,56 @@ const Button = React__default.forwardRef(
93
96
  Button$1.displayName = "Button";
94
97
  const rootClassName = "teddy-scroll-area";
95
98
  const RootContext = React__default.createContext(void 0);
99
+ function isScrollable(element) {
100
+ if (!element)
101
+ return null;
102
+ const buffer = 1;
103
+ const scrollLeft = element.scrollLeft;
104
+ const scrollWidth = element.scrollWidth;
105
+ const offsetWidth = element.offsetWidth;
106
+ const maxScrollLeft = scrollWidth - offsetWidth;
107
+ const isRtl = getComputedStyle(element).direction === "rtl";
108
+ let left;
109
+ let right;
110
+ if (isRtl) {
111
+ const normalizedScrollLeft = Math.abs(scrollLeft);
112
+ left = normalizedScrollLeft < maxScrollLeft - buffer;
113
+ right = normalizedScrollLeft > buffer;
114
+ } else {
115
+ left = scrollLeft > buffer;
116
+ right = scrollLeft < maxScrollLeft - buffer;
117
+ }
118
+ const scrollTop = element.scrollTop;
119
+ const maxScrollTop = element.scrollHeight - element.offsetHeight;
120
+ const top = scrollTop > buffer;
121
+ const bottom = scrollTop < maxScrollTop - buffer;
122
+ return {
123
+ left,
124
+ right,
125
+ top,
126
+ bottom
127
+ };
128
+ }
96
129
  const Root = React__default.forwardRef(
97
- ({ className, variant, children, ...props }, forwardRef) => {
130
+ ({ className, variant, scrollBehavior = "smooth", children, ...props }, forwardRef) => {
98
131
  const [scrollRef, setScrollRef] = React__default.useState(null);
99
132
  const [hasScroll, setHasScroll] = React__default.useState(null);
100
- const initialHasScrollLeft = scrollRef ? scrollRef.scrollLeft > 0 : null;
101
- const initialHasScrollRight = scrollRef ? scrollRef.scrollLeft < scrollRef.scrollWidth - scrollRef.clientWidth : null;
102
- const initialHasScrollTop = scrollRef ? scrollRef.scrollTop > 0 : null;
103
- const initialHasScrollBottom = scrollRef ? scrollRef.scrollTop < scrollRef.scrollHeight - scrollRef.clientHeight : null;
104
- const hasScrollLeft = hasScroll ? hasScroll.left : initialHasScrollLeft;
105
- const hasScrollRight = hasScroll ? hasScroll.right : initialHasScrollRight;
106
- const hasScrollTop = hasScroll ? hasScroll.top : initialHasScrollTop;
107
- const hasScrollBottom = hasScroll ? hasScroll.bottom : initialHasScrollBottom;
133
+ const initialScrollable = isScrollable(scrollRef);
134
+ const hasScrollLeft = hasScroll ? hasScroll.left : initialScrollable == null ? void 0 : initialScrollable.left;
135
+ const hasScrollRight = hasScroll ? hasScroll.right : initialScrollable == null ? void 0 : initialScrollable.right;
136
+ const hasScrollTop = hasScroll ? hasScroll.top : initialScrollable == null ? void 0 : initialScrollable.top;
137
+ const hasScrollBottom = hasScroll ? hasScroll.bottom : initialScrollable == null ? void 0 : initialScrollable.bottom;
108
138
  const hasScrollHorizontal = hasScrollLeft || hasScrollRight;
109
139
  const hasScrollVertical = hasScrollTop || hasScrollBottom;
110
- const classes = clsx([styles[`${rootClassName}`]], className);
111
140
  function handleScroll(e) {
112
141
  const target = e.currentTarget;
113
- const { scrollLeft, scrollWidth, clientWidth, scrollTop, scrollHeight, clientHeight } = target;
114
- const buffer = 1;
115
- const hasScrollLeft2 = scrollLeft > 0;
116
- const hasScrollRight2 = scrollLeft < scrollWidth - clientWidth - buffer;
117
- const hasScrollTop2 = scrollTop > 0;
118
- const hasScrollBottom2 = scrollTop < scrollHeight - clientHeight - buffer;
119
- setHasScroll({
120
- left: hasScrollLeft2,
121
- right: hasScrollRight2,
122
- top: hasScrollTop2,
123
- bottom: hasScrollBottom2
124
- });
142
+ setHasScroll(isScrollable(target));
125
143
  }
144
+ const classes = clsx([styles[`${rootClassName}`]], className);
126
145
  return /* @__PURE__ */ jsx(
127
146
  RootContext.Provider,
128
147
  {
129
- value: { scrollRef, variant, hasScrollTop, hasScrollBottom, hasScrollLeft, hasScrollRight },
148
+ value: { scrollRef, variant, hasScrollTop, hasScrollBottom, hasScrollLeft, hasScrollRight, scrollBehavior },
130
149
  children: /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, { ...props, ref: forwardRef, className: classes, children: [
131
150
  /* @__PURE__ */ jsx(
132
151
  ScrollAreaPrimitive.Viewport,
package/dist/components/scroll-area/scroll-area-item.cjs CHANGED
@@ -6,33 +6,46 @@ const clsx = require("clsx");
6
6
  const components_scrollArea_scrollAreaBar = require("./scroll-area-bar.cjs");
7
7
  const reactSlot = require("@radix-ui/react-slot");
8
8
  const utils_composeEventHandlers = require("../../utils/composeEventHandlers.cjs");
9
+ const utils_composeRefs = require("../../utils/composeRefs.cjs");
10
+ function scrollItemToCenter(item, scrollArea, scrollBehavior) {
11
+ const itemRect = item.getBoundingClientRect();
12
+ const scrollAreaRect = scrollArea.getBoundingClientRect();
13
+ const scrollViewVerticalCenter = (scrollAreaRect.top || 0) + (scrollAreaRect.height || 0) / 2;
14
+ const itemVerticalCenter = (itemRect.top || 0) + (itemRect.height || 0) / 2;
15
+ const scrollViewHorizontalCenter = (scrollAreaRect.left || 0) + (scrollAreaRect.width || 0) / 2;
16
+ const itemHorizontalCenter = (itemRect.left || 0) + (itemRect.width || 0) / 2;
17
+ const hasReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
18
+ scrollArea.scrollBy({
19
+ top: itemVerticalCenter - scrollViewVerticalCenter,
20
+ left: itemHorizontalCenter - scrollViewHorizontalCenter,
21
+ behavior: hasReducedMotion ? "auto" : scrollBehavior
22
+ });
23
+ }
9
24
  const Item = React.forwardRef(
10
- ({ className, asChild, ...props }, forwardRef) => {
25
+ ({ className, asChild, isSelected, scrollBehavior, scrollBehaviorOnMount, ...props }, forwardRef) => {
11
26
  const classes = clsx([components_scrollArea_scrollAreaBar.styles[`${components_scrollArea_scrollAreaBar.rootClassName}__item`]], className);
12
27
  const Comp = asChild ? reactSlot.Slot : "div";
28
+ const ref = React.useRef(null);
29
+ const composedRef = utils_composeRefs.useComposedRefs(ref, forwardRef);
13
30
  const context = React.useContext(components_scrollArea_scrollAreaBar.RootContext);
31
+ const internalScrollBehavior = scrollBehavior ?? (context == null ? void 0 : context.scrollBehavior) ?? "smooth";
32
+ React.useEffect(() => {
33
+ if (isSelected && ref.current && (context == null ? void 0 : context.scrollRef)) {
34
+ scrollItemToCenter(ref.current, context == null ? void 0 : context.scrollRef, scrollBehaviorOnMount ?? "smooth");
35
+ }
36
+ }, [isSelected, ref, context == null ? void 0 : context.scrollRef, scrollBehaviorOnMount]);
14
37
  return /* @__PURE__ */ jsxRuntime.jsx(
15
38
  Comp,
16
39
  {
17
40
  ...props,
18
41
  onClick: utils_composeEventHandlers.composeEventHandlers(props.onClick, (e) => {
19
- var _a, _b;
20
42
  if (e.defaultPrevented)
21
43
  return;
22
- const scroll = (_a = context == null ? void 0 : context.scrollRef) == null ? void 0 : _a.getBoundingClientRect();
23
- const item = e.currentTarget.getBoundingClientRect();
24
- const scrollViewVerticalCenter = ((scroll == null ? void 0 : scroll.top) || 0) + ((scroll == null ? void 0 : scroll.height) || 0) / 2;
25
- const itemVerticalCenter = ((item == null ? void 0 : item.top) || 0) + ((item == null ? void 0 : item.height) || 0) / 2;
26
- const scrollViewHorizontalCenter = ((scroll == null ? void 0 : scroll.left) || 0) + ((scroll == null ? void 0 : scroll.width) || 0) / 2;
27
- const itemHorizontalCenter = ((item == null ? void 0 : item.left) || 0) + ((item == null ? void 0 : item.width) || 0) / 2;
28
- const hasReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
29
- (_b = context == null ? void 0 : context.scrollRef) == null ? void 0 : _b.scrollBy({
30
- top: itemVerticalCenter - scrollViewVerticalCenter,
31
- left: itemHorizontalCenter - scrollViewHorizontalCenter,
32
- behavior: hasReducedMotion ? "auto" : "smooth"
33
- });
44
+ if (!ref.current || !(context == null ? void 0 : context.scrollRef))
45
+ return;
46
+ scrollItemToCenter(ref.current, context == null ? void 0 : context.scrollRef, internalScrollBehavior);
34
47
  }),
35
- ref: forwardRef,
48
+ ref: composedRef,
36
49
  className: classes
37
50
  }
38
51
  );
package/dist/components/scroll-area/scroll-area-item.d.ts CHANGED
@@ -2,7 +2,13 @@ import { default as React } from 'react';
2
2
 
3
3
  export type ItemProps = React.ComponentPropsWithoutRef<'div'> & {
4
4
  asChild?: boolean;
5
+ isSelected?: boolean;
6
+ scrollBehavior?: 'smooth' | 'auto';
7
+ scrollBehaviorOnMount?: 'smooth' | 'auto';
5
8
  };
6
9
  export declare const Item: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
7
10
  asChild?: boolean | undefined;
11
+ isSelected?: boolean | undefined;
12
+ scrollBehavior?: "auto" | "smooth" | undefined;
13
+ scrollBehaviorOnMount?: "auto" | "smooth" | undefined;
8
14
  } & React.RefAttributes<HTMLDivElement>>;
package/dist/components/scroll-area/scroll-area-item.js CHANGED
@@ -4,33 +4,46 @@ import clsx from "clsx";
4
4
  import { s as styles, r as rootClassName, a as RootContext } from "./scroll-area-bar.js";
5
5
  import { Slot } from "@radix-ui/react-slot";
6
6
  import { composeEventHandlers } from "../../utils/composeEventHandlers.js";
7
+ import { useComposedRefs } from "../../utils/composeRefs.js";
8
+ function scrollItemToCenter(item, scrollArea, scrollBehavior) {
9
+ const itemRect = item.getBoundingClientRect();
10
+ const scrollAreaRect = scrollArea.getBoundingClientRect();
11
+ const scrollViewVerticalCenter = (scrollAreaRect.top || 0) + (scrollAreaRect.height || 0) / 2;
12
+ const itemVerticalCenter = (itemRect.top || 0) + (itemRect.height || 0) / 2;
13
+ const scrollViewHorizontalCenter = (scrollAreaRect.left || 0) + (scrollAreaRect.width || 0) / 2;
14
+ const itemHorizontalCenter = (itemRect.left || 0) + (itemRect.width || 0) / 2;
15
+ const hasReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
16
+ scrollArea.scrollBy({
17
+ top: itemVerticalCenter - scrollViewVerticalCenter,
18
+ left: itemHorizontalCenter - scrollViewHorizontalCenter,
19
+ behavior: hasReducedMotion ? "auto" : scrollBehavior
20
+ });
21
+ }
7
22
  const Item = React__default.forwardRef(
8
- ({ className, asChild, ...props }, forwardRef) => {
23
+ ({ className, asChild, isSelected, scrollBehavior, scrollBehaviorOnMount, ...props }, forwardRef) => {
9
24
  const classes = clsx([styles[`${rootClassName}__item`]], className);
10
25
  const Comp = asChild ? Slot : "div";
26
+ const ref = React__default.useRef(null);
27
+ const composedRef = useComposedRefs(ref, forwardRef);
11
28
  const context = React__default.useContext(RootContext);
29
+ const internalScrollBehavior = scrollBehavior ?? (context == null ? void 0 : context.scrollBehavior) ?? "smooth";
30
+ React__default.useEffect(() => {
31
+ if (isSelected && ref.current && (context == null ? void 0 : context.scrollRef)) {
32
+ scrollItemToCenter(ref.current, context == null ? void 0 : context.scrollRef, scrollBehaviorOnMount ?? "smooth");
33
+ }
34
+ }, [isSelected, ref, context == null ? void 0 : context.scrollRef, scrollBehaviorOnMount]);
12
35
  return /* @__PURE__ */ jsx(
13
36
  Comp,
14
37
  {
15
38
  ...props,
16
39
  onClick: composeEventHandlers(props.onClick, (e) => {
17
- var _a, _b;
18
40
  if (e.defaultPrevented)
19
41
  return;
20
- const scroll = (_a = context == null ? void 0 : context.scrollRef) == null ? void 0 : _a.getBoundingClientRect();
21
- const item = e.currentTarget.getBoundingClientRect();
22
- const scrollViewVerticalCenter = ((scroll == null ? void 0 : scroll.top) || 0) + ((scroll == null ? void 0 : scroll.height) || 0) / 2;
23
- const itemVerticalCenter = ((item == null ? void 0 : item.top) || 0) + ((item == null ? void 0 : item.height) || 0) / 2;
24
- const scrollViewHorizontalCenter = ((scroll == null ? void 0 : scroll.left) || 0) + ((scroll == null ? void 0 : scroll.width) || 0) / 2;
25
- const itemHorizontalCenter = ((item == null ? void 0 : item.left) || 0) + ((item == null ? void 0 : item.width) || 0) / 2;
26
- const hasReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
27
- (_b = context == null ? void 0 : context.scrollRef) == null ? void 0 : _b.scrollBy({
28
- top: itemVerticalCenter - scrollViewVerticalCenter,
29
- left: itemHorizontalCenter - scrollViewHorizontalCenter,
30
- behavior: hasReducedMotion ? "auto" : "smooth"
31
- });
42
+ if (!ref.current || !(context == null ? void 0 : context.scrollRef))
43
+ return;
44
+ scrollItemToCenter(ref.current, context == null ? void 0 : context.scrollRef, internalScrollBehavior);
32
45
  }),
33
- ref: forwardRef,
46
+ ref: composedRef,
34
47
  className: classes
35
48
  }
36
49
  );
package/dist/components/scroll-area/scroll-area-root.d.ts CHANGED
@@ -10,14 +10,16 @@ export type RootProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitiv
10
10
  * - `undefined`: The scrollbar will not be visible
11
11
  */
12
12
  variant?: Variant | undefined;
13
+ scrollBehavior?: 'smooth' | 'auto';
13
14
  };
14
15
  type RootContextType = {
15
16
  scrollRef: HTMLDivElement | null;
16
17
  variant?: Variant;
17
- hasScrollTop: boolean | null;
18
- hasScrollBottom: boolean | null;
19
- hasScrollLeft: boolean | null;
20
- hasScrollRight: boolean | null;
18
+ hasScrollTop: boolean | undefined;
19
+ hasScrollBottom: boolean | undefined;
20
+ hasScrollLeft: boolean | undefined;
21
+ hasScrollRight: boolean | undefined;
22
+ scrollBehavior: 'smooth' | 'auto';
21
23
  };
22
24
  export declare const RootContext: React.Context<RootContextType | undefined>;
23
25
  export declare const Root: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
@@ -27,5 +29,6 @@ export declare const Root: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimit
27
29
  * - `undefined`: The scrollbar will not be visible
28
30
  */
29
31
  variant?: Variant | undefined;
32
+ scrollBehavior?: "auto" | "smooth" | undefined;
30
33
  } & React.RefAttributes<HTMLDivElement>>;
31
34
  export {};
package/dist/components/tabs/index.d.ts CHANGED
@@ -25,6 +25,7 @@ export declare const Tabs: import('react').ForwardRefExoticComponent<Omit<Omit<i
25
25
  } & import('react').RefAttributes<HTMLDivElement>>;
26
26
  Scroll: import('react').ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-scroll-area').ScrollAreaProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
27
27
  variant?: ("button" | "scrollbar") | undefined;
28
+ scrollBehavior?: "auto" | "smooth" | undefined;
28
29
  } & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
29
30
  ScrollButton: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
30
31
  display?: import('../../utils/generate-styling').DisplayChildren | undefined;
package/dist/components/tabs/tabs-scroll.d.ts CHANGED
@@ -6,4 +6,5 @@ export declare const ScrollContext: React.Context<boolean>;
6
6
  /** */
7
7
  export declare const Scroll: React.ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-scroll-area').ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
8
8
  variant?: ("button" | "scrollbar") | undefined;
9
+ scrollBehavior?: "auto" | "smooth" | undefined;
9
10
  } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
package/dist/style.css CHANGED
@@ -2477,32 +2477,32 @@
2477
2477
  }
2478
2478
  }@layer heading, flex, grid, button, card;
2479
2479
  @layer card {
2480
- ._teddy-card_1vcct_3 {
2480
+ ._teddy-card_1qi3a_3 {
2481
2481
  border-radius: var(--teddy-border-radius-md);
2482
2482
  padding: var(--teddy-spacing-250);
2483
2483
  position: relative;
2484
2484
  }
2485
2485
  @media (prefers-reduced-motion: no-preference) {
2486
- ._teddy-card_1vcct_3 {
2486
+ ._teddy-card_1qi3a_3 {
2487
2487
  transition: background-color var(--teddy-motion-duration-300) ease;
2488
2488
  }
2489
2489
  }
2490
- ._teddy-card__slot_1vcct_13 {
2490
+ ._teddy-card__slot_1qi3a_13 {
2491
2491
  transform: translateY(-50%);
2492
2492
  }
2493
- ._teddy-card__slot--bottom_1vcct_16 {
2493
+ ._teddy-card__slot--bottom_1qi3a_16 {
2494
2494
  transform: translateY(50%);
2495
2495
  }
2496
- ._teddy-card__slot--center_1vcct_19 {
2496
+ ._teddy-card__slot--center_1qi3a_19 {
2497
2497
  transform: translate(-50%, -50%);
2498
2498
  }
2499
- ._teddy-card__slot--bottom_1vcct_16._teddy-card__slot--center_1vcct_19 {
2499
+ ._teddy-card__slot--bottom_1qi3a_16._teddy-card__slot--center_1qi3a_19 {
2500
2500
  transform: translate(-50%, 50%);
2501
2501
  }
2502
- ._teddy-card__slot--no-translate_1vcct_25 {
2502
+ ._teddy-card__slot--no-translate_1qi3a_25 {
2503
2503
  transform: initial;
2504
2504
  }
2505
- ._teddy-card_1vcct_3::before {
2505
+ ._teddy-card_1qi3a_3::before {
2506
2506
  content: "";
2507
2507
  display: block;
2508
2508
  position: absolute;
@@ -2513,204 +2513,204 @@
2513
2513
  box-shadow: var(--teddy-shadow-md);
2514
2514
  }
2515
2515
  @media (prefers-reduced-motion: no-preference) {
2516
- ._teddy-card_1vcct_3::before {
2516
+ ._teddy-card_1qi3a_3::before {
2517
2517
  transition: var(--teddy-motion-duration-300) ease;
2518
2518
  transition-property: opacity, box-shadow;
2519
2519
  }
2520
2520
  }
2521
- ._teddy-card--shadow_1vcct_44::before {
2521
+ ._teddy-card--shadow_1qi3a_44::before {
2522
2522
  opacity: 1;
2523
2523
  box-shadow: var(--teddy-shadow-sm-2);
2524
2524
  }
2525
- ._teddy-card_1vcct_3:has(._teddy-card__action_1vcct_48:not(._teddy-card__action--disabled_1vcct_48)) {
2525
+ ._teddy-card_1qi3a_3:has(._teddy-card__action_1qi3a_48:not(._teddy-card__action--disabled_1qi3a_48)) {
2526
2526
  cursor: pointer;
2527
2527
  }
2528
- ._teddy-card_1vcct_3:has(._teddy-card__action_1vcct_48:not(._teddy-card__action--disabled_1vcct_48)):hover:not(:has(button:hover), :has(a:hover)):has(._teddy-card__action_1vcct_48:not(._teddy-card__action--disabled_1vcct_48))::before {
2528
+ ._teddy-card_1qi3a_3:has(._teddy-card__action_1qi3a_48:not(._teddy-card__action--disabled_1qi3a_48)):hover:not(:has(button:hover), :has(a:hover)):has(._teddy-card__action_1qi3a_48:not(._teddy-card__action--disabled_1qi3a_48))::before {
2529
2529
  opacity: 1;
2530
2530
  box-shadow: var(--teddy-shadow-md);
2531
2531
  }
2532
- ._teddy-card--border_1vcct_55 {
2532
+ ._teddy-card--border_1qi3a_55 {
2533
2533
  border: var(--teddy-border-width-xs) solid transparent;
2534
2534
  }
2535
- ._teddy-card--layout_1vcct_58 ._teddy-card__illustration_1vcct_58 {
2535
+ ._teddy-card--layout_1qi3a_58 ._teddy-card__illustration_1qi3a_58 {
2536
2536
  grid-area: illustration;
2537
2537
  }
2538
- ._teddy-card--layout_1vcct_58 ._teddy-card__carousel_1vcct_61 {
2538
+ ._teddy-card--layout_1qi3a_58 ._teddy-card__carousel_1qi3a_61 {
2539
2539
  grid-area: carousel;
2540
2540
  }
2541
- ._teddy-card--layout_1vcct_58 ._teddy-card__content_1vcct_64 {
2541
+ ._teddy-card--layout_1qi3a_58 ._teddy-card__content_1qi3a_64 {
2542
2542
  grid-area: content;
2543
2543
  }
2544
- ._teddy-card--layout_1vcct_58 ._teddy-card__heading_1vcct_67 {
2544
+ ._teddy-card--layout_1qi3a_58 ._teddy-card__heading_1qi3a_67 {
2545
2545
  grid-area: heading;
2546
2546
  }
2547
- ._teddy-card--layout_1vcct_58 ._teddy-card__action-wrapper_1vcct_70 {
2547
+ ._teddy-card--layout_1qi3a_58 ._teddy-card__action-wrapper_1qi3a_70 {
2548
2548
  grid-area: action;
2549
2549
  }
2550
- ._teddy-card--layout_1vcct_58 ._teddy-card__footer_1vcct_73 {
2550
+ ._teddy-card--layout_1qi3a_58 ._teddy-card__footer_1qi3a_73 {
2551
2551
  grid-area: footer;
2552
2552
  }
2553
- ._teddy-card--layout_1vcct_58 ._teddy-card__overline_1vcct_76 {
2553
+ ._teddy-card--layout_1qi3a_58 ._teddy-card__overline_1qi3a_76 {
2554
2554
  grid-area: overline;
2555
2555
  }
2556
- ._teddy-card--layout_1vcct_58 ._teddy-card__description_1vcct_79 {
2556
+ ._teddy-card--layout_1qi3a_58 ._teddy-card__description_1qi3a_79 {
2557
2557
  grid-area: description;
2558
2558
  }
2559
- ._teddy-card--layout_1vcct_58 ._teddy-card__color-dots_1vcct_82 {
2559
+ ._teddy-card--layout_1qi3a_58 ._teddy-card__color-dots_1qi3a_82 {
2560
2560
  grid-area: colors;
2561
2561
  }
2562
- ._teddy-card--layout_1vcct_58 ._teddy-card__availability_1vcct_85 {
2562
+ ._teddy-card--layout_1qi3a_58 ._teddy-card__availability_1qi3a_85 {
2563
2563
  grid-area: availability;
2564
2564
  }
2565
- ._teddy-card--layout_1vcct_58 ._teddy-card__price_1vcct_88 {
2565
+ ._teddy-card--layout_1qi3a_58 ._teddy-card__price_1qi3a_88 {
2566
2566
  grid-area: price;
2567
2567
  }
2568
- ._teddy-card--default_1vcct_91 {
2568
+ ._teddy-card--default_1qi3a_91 {
2569
2569
  display: flex;
2570
2570
  flex-direction: column;
2571
2571
  gap: var(--teddy-spacing-200);
2572
2572
  }
2573
- ._teddy-card--navigation-vertical_1vcct_96 {
2573
+ ._teddy-card--navigation-vertical_1qi3a_96 {
2574
2574
  grid-template-rows: auto auto 1fr auto;
2575
2575
  justify-items: start;
2576
2576
  align-items: baseline;
2577
2577
  grid-template-areas: "illustration" "heading" "content" "action";
2578
2578
  }
2579
- ._teddy-card--navigation-vertical_1vcct_96 ._teddy-card__illustration_1vcct_58 {
2579
+ ._teddy-card--navigation-vertical_1qi3a_96 ._teddy-card__illustration_1qi3a_58 {
2580
2580
  margin-bottom: var(--teddy-spacing-200);
2581
2581
  }
2582
- ._teddy-card--navigation-vertical_1vcct_96 ._teddy-card__content_1vcct_64 {
2582
+ ._teddy-card--navigation-vertical_1qi3a_96 ._teddy-card__content_1qi3a_64 {
2583
2583
  margin-bottom: var(--teddy-spacing-200);
2584
2584
  }
2585
- ._teddy-card--navigation-vertical_1vcct_96 ._teddy-card__heading_1vcct_67 {
2585
+ ._teddy-card--navigation-vertical_1qi3a_96 ._teddy-card__heading_1qi3a_67 {
2586
2586
  margin-bottom: var(--teddy-spacing-100);
2587
2587
  }
2588
- ._teddy-card--navigation-vertical_1vcct_96 ._teddy-card__action_1vcct_48 {
2588
+ ._teddy-card--navigation-vertical_1qi3a_96 ._teddy-card__action_1qi3a_48 {
2589
2589
  margin-top: auto;
2590
2590
  justify-self: end;
2591
2591
  }
2592
- ._teddy-card--navigation-horizontal-small_1vcct_115 {
2592
+ ._teddy-card--navigation-horizontal-small_1qi3a_115 {
2593
2593
  grid-template-columns: auto 1fr auto;
2594
2594
  grid-template-rows: auto 1fr;
2595
2595
  grid-template-areas: "illustration heading action" "illustration content action";
2596
2596
  column-gap: var(--teddy-spacing-200);
2597
2597
  }
2598
- ._teddy-card--navigation-horizontal-small_1vcct_115 ._teddy-card__heading_1vcct_67 {
2598
+ ._teddy-card--navigation-horizontal-small_1qi3a_115 ._teddy-card__heading_1qi3a_67 {
2599
2599
  margin-bottom: var(--teddy-spacing-100);
2600
2600
  }
2601
- ._teddy-card--navigation-horizontal-small_1vcct_115 ._teddy-card__action_1vcct_48 {
2601
+ ._teddy-card--navigation-horizontal-small_1qi3a_115 ._teddy-card__action_1qi3a_48 {
2602
2602
  margin-top: auto;
2603
2603
  }
2604
- ._teddy-card--navigation-horizontal-large_1vcct_127 {
2604
+ ._teddy-card--navigation-horizontal-large_1qi3a_127 {
2605
2605
  grid-template-columns: 1fr auto;
2606
2606
  grid-template-rows: auto auto 1fr;
2607
2607
  grid-template-areas: "illustration action" "heading action" "content action";
2608
2608
  column-gap: var(--teddy-spacing-200);
2609
2609
  }
2610
- ._teddy-card--navigation-horizontal-large_1vcct_127 ._teddy-card__heading_1vcct_67 {
2610
+ ._teddy-card--navigation-horizontal-large_1qi3a_127 ._teddy-card__heading_1qi3a_67 {
2611
2611
  margin-bottom: var(--teddy-spacing-100);
2612
2612
  }
2613
- ._teddy-card--navigation-horizontal-large_1vcct_127 ._teddy-card__action_1vcct_48 {
2613
+ ._teddy-card--navigation-horizontal-large_1qi3a_127 ._teddy-card__action_1qi3a_48 {
2614
2614
  margin-top: auto;
2615
2615
  }
2616
- ._teddy-card--rich-card_1vcct_139 {
2616
+ ._teddy-card--rich-card_1qi3a_139 {
2617
2617
  justify-items: start;
2618
2618
  align-items: baseline;
2619
2619
  grid-template-rows: auto auto 1fr auto;
2620
2620
  grid-template-areas: "illustration" "heading" "content" "action";
2621
2621
  }
2622
- ._teddy-card--rich-card_1vcct_139 ._teddy-card__illustration_1vcct_58 {
2622
+ ._teddy-card--rich-card_1qi3a_139 ._teddy-card__illustration_1qi3a_58 {
2623
2623
  margin-bottom: var(--teddy-spacing-200);
2624
2624
  }
2625
- ._teddy-card--rich-card_1vcct_139 ._teddy-card__content_1vcct_64 {
2625
+ ._teddy-card--rich-card_1qi3a_139 ._teddy-card__content_1qi3a_64 {
2626
2626
  margin-bottom: var(--teddy-spacing-200);
2627
2627
  }
2628
- ._teddy-card--rich-card_1vcct_139 ._teddy-card__heading_1vcct_67 {
2628
+ ._teddy-card--rich-card_1qi3a_139 ._teddy-card__heading_1qi3a_67 {
2629
2629
  margin-bottom: var(--teddy-spacing-100);
2630
2630
  }
2631
- ._teddy-card--rich-card_1vcct_139 ._teddy-card__action_1vcct_48 {
2631
+ ._teddy-card--rich-card_1qi3a_139 ._teddy-card__action_1qi3a_48 {
2632
2632
  margin-top: auto;
2633
2633
  }
2634
- ._teddy-card__line_1vcct_157 {
2634
+ ._teddy-card__line_1qi3a_157 {
2635
2635
  border: 0;
2636
2636
  border-top: var(--teddy-border-width-xs) solid var(--teddy-color-border-weak);
2637
2637
  }
2638
- ._teddy-card--purple-light_1vcct_161 {
2638
+ ._teddy-card--purple-light_1qi3a_161 {
2639
2639
  background-color: var(--teddy-color-background-interactive-primary-negative);
2640
2640
  color: var(--teddy-color-text-default);
2641
2641
  border-color: var(--teddy-color-background-interactive-primary-negative);
2642
2642
  }
2643
- ._teddy-card--purple-light_1vcct_161:hover:has(._teddy-card__action_1vcct_48:not(._teddy-card__action--disabled_1vcct_48)) {
2643
+ ._teddy-card--purple-light_1qi3a_161:hover:has(._teddy-card__action_1qi3a_48:not(._teddy-card__action--disabled_1qi3a_48)) {
2644
2644
  background-color: var(--teddy-color-background-interactive-primary-negative-hover);
2645
2645
  }
2646
- ._teddy-card--purple-light_1vcct_161:active:has(._teddy-card__action_1vcct_48:not(._teddy-card__action--disabled_1vcct_48)) {
2646
+ ._teddy-card--purple-light_1qi3a_161:active:has(._teddy-card__action_1qi3a_48:not(._teddy-card__action--disabled_1qi3a_48)) {
2647
2647
  background-color: var(--teddy-color-background-interactive-primary-negative-active);
2648
2648
  }
2649
- ._teddy-card--purple-light_1vcct_161:has(._teddy-card__action--disabled_1vcct_48) {
2649
+ ._teddy-card--purple-light_1qi3a_161:has(._teddy-card__action--disabled_1qi3a_48) {
2650
2650
  background-color: var(--teddy-color-background-interactive-disabled);
2651
2651
  }
2652
- ._teddy-card--purple-dark_1vcct_175 {
2652
+ ._teddy-card--purple-dark_1qi3a_175 {
2653
2653
  background-color: var(--teddy-color-brand-deep-purple);
2654
2654
  color: var(--teddy-color-text-default-negative);
2655
2655
  border-color: var(--teddy-color-brand-deep-purple);
2656
2656
  }
2657
- ._teddy-card--purple-dark_1vcct_175:hover:has(._teddy-card__action_1vcct_48:not(._teddy-card__action--disabled_1vcct_48)) {
2657
+ ._teddy-card--purple-dark_1qi3a_175:hover:has(._teddy-card__action_1qi3a_48:not(._teddy-card__action--disabled_1qi3a_48)) {
2658
2658
  background-color: var(--teddy-color-background-interactive-transparent-negative-hover);
2659
2659
  }
2660
- ._teddy-card--purple-dark_1vcct_175:active:has(._teddy-card__action_1vcct_48:not(._teddy-card__action--disabled_1vcct_48)) {
2660
+ ._teddy-card--purple-dark_1qi3a_175:active:has(._teddy-card__action_1qi3a_48:not(._teddy-card__action--disabled_1qi3a_48)) {
2661
2661
  background-color: var(--teddy-color-background-interactive-transparent-negative-active);
2662
2662
  }
2663
- ._teddy-card--purple-dark_1vcct_175:has(._teddy-card__action--disabled_1vcct_48) {
2663
+ ._teddy-card--purple-dark_1qi3a_175:has(._teddy-card__action--disabled_1qi3a_48) {
2664
2664
  color: var(--teddy-color-text-default);
2665
2665
  background-color: var(--teddy-color-background-interactive-disabled);
2666
2666
  }
2667
- ._teddy-card--purple-dark_1vcct_175:has(._teddy-card__action--disabled_1vcct_48) ._teddy-card__action_1vcct_48 {
2667
+ ._teddy-card--purple-dark_1qi3a_175:has(._teddy-card__action--disabled_1qi3a_48) ._teddy-card__action_1qi3a_48 {
2668
2668
  color: var(--teddy-color-text-weak);
2669
2669
  background-color: var(--teddy-color-background-interactive-disabled);
2670
2670
  }
2671
- ._teddy-card--white_1vcct_194 {
2671
+ ._teddy-card--white_1qi3a_194 {
2672
2672
  background-color: var(--teddy-color-brand-white);
2673
2673
  color: var(--teddy-color-text-default);
2674
2674
  border-color: var(--teddy-color-border-interactive-subtle);
2675
2675
  }
2676
- ._teddy-card--white_1vcct_194:hover:has(._teddy-card__action_1vcct_48:not(._teddy-card__action--disabled_1vcct_48)) {
2676
+ ._teddy-card--white_1qi3a_194:hover:has(._teddy-card__action_1qi3a_48:not(._teddy-card__action--disabled_1qi3a_48)) {
2677
2677
  background-color: var(--teddy-color-background-interactive-transparent-hover);
2678
2678
  }
2679
- ._teddy-card--white_1vcct_194:active:has(._teddy-card__action_1vcct_48:not(._teddy-card__action--disabled_1vcct_48)) {
2679
+ ._teddy-card--white_1qi3a_194:active:has(._teddy-card__action_1qi3a_48:not(._teddy-card__action--disabled_1qi3a_48)) {
2680
2680
  background-color: var(--teddy-color-background-interactive-transparent-active);
2681
2681
  }
2682
- ._teddy-card--white_1vcct_194:has(._teddy-card__action--disabled_1vcct_48) {
2682
+ ._teddy-card--white_1qi3a_194:has(._teddy-card__action--disabled_1qi3a_48) {
2683
2683
  background-color: var(--teddy-color-background-interactive-disabled);
2684
2684
  }
2685
- ._teddy-card--gray_1vcct_208 {
2685
+ ._teddy-card--gray_1qi3a_208 {
2686
2686
  background-color: var(--teddy-color-background-secondary);
2687
2687
  color: var(--teddy-color-text-default);
2688
2688
  border-color: var(--teddy-color-border-interactive-subtle);
2689
2689
  }
2690
- ._teddy-card--gray_1vcct_208:hover:has(._teddy-card__action_1vcct_48:not(._teddy-card__action--disabled_1vcct_48)) {
2690
+ ._teddy-card--gray_1qi3a_208:hover:has(._teddy-card__action_1qi3a_48:not(._teddy-card__action--disabled_1qi3a_48)) {
2691
2691
  background-color: var(--teddy-color-gray-100);
2692
2692
  }
2693
- ._teddy-card--gray_1vcct_208:active:has(._teddy-card__action_1vcct_48:not(._teddy-card__action--disabled_1vcct_48)) {
2693
+ ._teddy-card--gray_1qi3a_208:active:has(._teddy-card__action_1qi3a_48:not(._teddy-card__action--disabled_1qi3a_48)) {
2694
2694
  background-color: var(--teddy-color-gray-200);
2695
2695
  }
2696
- ._teddy-card--gray_1vcct_208:has(._teddy-card__action--disabled_1vcct_48) {
2696
+ ._teddy-card--gray_1qi3a_208:has(._teddy-card__action--disabled_1qi3a_48) {
2697
2697
  background-color: var(--teddy-color-background-interactive-disabled);
2698
2698
  }
2699
- ._teddy-card--beige_1vcct_222 {
2699
+ ._teddy-card--beige_1qi3a_222 {
2700
2700
  background-color: var(--teddy-color-beige-100);
2701
2701
  color: var(--teddy-color-text-default);
2702
2702
  border-color: var(--teddy-color-beige-300);
2703
2703
  }
2704
- ._teddy-card--beige_1vcct_222:hover:has(._teddy-card__action_1vcct_48:not(._teddy-card__action--disabled_1vcct_48)) {
2704
+ ._teddy-card--beige_1qi3a_222:hover:has(._teddy-card__action_1qi3a_48:not(._teddy-card__action--disabled_1qi3a_48)) {
2705
2705
  background-color: var(--teddy-color-beige-200);
2706
2706
  }
2707
- ._teddy-card--beige_1vcct_222:active:has(._teddy-card__action_1vcct_48:not(._teddy-card__action--disabled_1vcct_48)) {
2707
+ ._teddy-card--beige_1qi3a_222:active:has(._teddy-card__action_1qi3a_48:not(._teddy-card__action--disabled_1qi3a_48)) {
2708
2708
  background-color: var(--teddy-color-beige-300);
2709
2709
  }
2710
- ._teddy-card--beige_1vcct_222:has(._teddy-card__action--disabled_1vcct_48) {
2710
+ ._teddy-card--beige_1qi3a_222:has(._teddy-card__action--disabled_1qi3a_48) {
2711
2711
  background-color: var(--teddy-color-background-interactive-disabled);
2712
2712
  }
2713
- ._teddy-card--product_1vcct_236 {
2713
+ ._teddy-card--product_1qi3a_236 {
2714
2714
  grid-template-columns: minmax(0, 100%);
2715
2715
  grid-template-rows: auto auto auto auto auto auto auto 1fr auto auto;
2716
2716
  grid-template-areas: "illustration" "carousel" "overline" "heading" "colors" "description" "content" "price" "action" "availability";
@@ -2721,119 +2721,119 @@
2721
2721
  padding-bottom: var(--teddy-spacing-100);
2722
2722
  width: 100%;
2723
2723
  }
2724
- ._teddy-card--product_1vcct_236:hover:has(._teddy-card__action_1vcct_48:not(._teddy-card__action--disabled_1vcct_48)) {
2724
+ ._teddy-card--product_1qi3a_236:hover:has(._teddy-card__action_1qi3a_48:not(._teddy-card__action--disabled_1qi3a_48)) {
2725
2725
  background-color: var(--teddy-color-brand-white);
2726
2726
  outline: var(--teddy-border-width-sm) solid var(--teddy-color-border-interactive-primary);
2727
2727
  outline-offset: calc(var(--teddy-border-width-sm) * -1);
2728
2728
  }
2729
- ._teddy-card--product_1vcct_236:active:has(._teddy-card__action_1vcct_48:not(._teddy-card__action--disabled_1vcct_48)) {
2729
+ ._teddy-card--product_1qi3a_236:active:has(._teddy-card__action_1qi3a_48:not(._teddy-card__action--disabled_1qi3a_48)) {
2730
2730
  background-color: var(--teddy-color-background-interactive-transparent-active);
2731
2731
  }
2732
- ._teddy-card--product_1vcct_236:has(._teddy-card__action--disabled_1vcct_48) {
2732
+ ._teddy-card--product_1qi3a_236:has(._teddy-card__action--disabled_1qi3a_48) {
2733
2733
  background-color: var(--teddy-color-background-interactive-disabled);
2734
2734
  }
2735
- ._teddy-card--product_1vcct_236 ._teddy-card__illustration_1vcct_58 {
2735
+ ._teddy-card--product_1qi3a_236 ._teddy-card__illustration_1qi3a_58 {
2736
2736
  height: 180px;
2737
2737
  display: grid;
2738
2738
  place-items: center;
2739
2739
  place-self: center;
2740
2740
  margin-bottom: var(--teddy-spacing-400);
2741
2741
  }
2742
- ._teddy-card--product_1vcct_236 ._teddy-card__illustration_1vcct_58 img {
2742
+ ._teddy-card--product_1qi3a_236 ._teddy-card__illustration_1qi3a_58 img {
2743
2743
  max-width: 200px;
2744
2744
  max-height: 180px;
2745
2745
  object-fit: contain;
2746
2746
  }
2747
- ._teddy-card--product_1vcct_236 ._teddy-card__carousel_1vcct_61 .slick-dots li {
2747
+ ._teddy-card--product_1qi3a_236 ._teddy-card__carousel_1qi3a_61 .slick-dots li {
2748
2748
  min-width: 12px;
2749
2749
  width: initial !important;
2750
2750
  margin: 0 0.25rem !important;
2751
2751
  }
2752
- ._teddy-card--product_1vcct_236 ._teddy-card__carousel_1vcct_61 .slick-dots .slick-active {
2752
+ ._teddy-card--product_1qi3a_236 ._teddy-card__carousel_1qi3a_61 .slick-dots .slick-active {
2753
2753
  min-width: 24px;
2754
2754
  width: initial !important;
2755
2755
  }
2756
- ._teddy-card--product_1vcct_236 ._teddy-card__overline_1vcct_76 {
2756
+ ._teddy-card--product_1qi3a_236 ._teddy-card__overline_1qi3a_76 {
2757
2757
  margin-bottom: var(--teddy-spacing-50);
2758
2758
  }
2759
- ._teddy-card--product_1vcct_236 ._teddy-card__heading_1vcct_67 {
2759
+ ._teddy-card--product_1qi3a_236 ._teddy-card__heading_1qi3a_67 {
2760
2760
  margin-bottom: var(--teddy-spacing-200);
2761
2761
  }
2762
- ._teddy-card--product_1vcct_236 ._teddy-card__description_1vcct_79 {
2762
+ ._teddy-card--product_1qi3a_236 ._teddy-card__description_1qi3a_79 {
2763
2763
  margin-bottom: var(--teddy-spacing-200);
2764
2764
  }
2765
- ._teddy-card--product_1vcct_236 ._teddy-card__action_1vcct_48 {
2765
+ ._teddy-card--product_1qi3a_236 ._teddy-card__action_1qi3a_48 {
2766
2766
  margin-top: auto;
2767
2767
  margin-left: auto;
2768
2768
  justify-self: end;
2769
2769
  }
2770
- ._teddy-card--product_1vcct_236 ._teddy-card__price_1vcct_88 {
2770
+ ._teddy-card--product_1qi3a_236 ._teddy-card__price_1qi3a_88 {
2771
2771
  display: flex;
2772
2772
  }
2773
- ._teddy-card--product_1vcct_236 ._teddy-card__price--big_1vcct_296 {
2774
- font-size: var(--teddy-typography-scale-400);
2773
+ ._teddy-card--product_1qi3a_236 ._teddy-card__price--big_1qi3a_296 {
2774
+ font-size: var(--teddy-typography-scale-200);
2775
2775
  }
2776
- ._teddy-card_1vcct_3:has(._teddy-card__image--as-background_1vcct_299) {
2776
+ ._teddy-card_1qi3a_3:has(._teddy-card__image--as-background_1qi3a_299) {
2777
2777
  background-color: transparent;
2778
2778
  }
2779
- ._teddy-card__heading_1vcct_67 {
2779
+ ._teddy-card__heading_1qi3a_67 {
2780
2780
  color: inherit;
2781
2781
  }
2782
- ._teddy-card--background-image_1vcct_305 {
2782
+ ._teddy-card--background-image_1qi3a_305 {
2783
2783
  background-repeat: no-repeat;
2784
2784
  background-size: cover;
2785
2785
  background-position: center;
2786
2786
  }
2787
- ._teddy-card__illustration--rounded_1vcct_310 {
2787
+ ._teddy-card__illustration--rounded_1qi3a_310 {
2788
2788
  border-radius: inherit;
2789
2789
  overflow: hidden;
2790
2790
  }
2791
- ._teddy-card__inset_1vcct_314 {
2791
+ ._teddy-card__inset_1qi3a_314 {
2792
2792
  overflow: hidden;
2793
2793
  }
2794
- ._teddy-card__inset--top_1vcct_317 {
2794
+ ._teddy-card__inset--top_1qi3a_317 {
2795
2795
  margin-top: calc(var(--teddy-spacing-250) * -1);
2796
2796
  }
2797
- ._teddy-card__inset--top_1vcct_317._teddy-card__inset--left_1vcct_320 {
2797
+ ._teddy-card__inset--top_1qi3a_317._teddy-card__inset--left_1qi3a_320 {
2798
2798
  border-top-left-radius: inherit;
2799
2799
  }
2800
- ._teddy-card__inset--top_1vcct_317._teddy-card__inset--right_1vcct_323 {
2800
+ ._teddy-card__inset--top_1qi3a_317._teddy-card__inset--right_1qi3a_323 {
2801
2801
  border-top-right-radius: inherit;
2802
2802
  }
2803
- ._teddy-card__inset--bottom_1vcct_326 {
2803
+ ._teddy-card__inset--bottom_1qi3a_326 {
2804
2804
  margin-bottom: calc(var(--teddy-spacing-250) * -1);
2805
2805
  }
2806
- ._teddy-card__inset--bottom_1vcct_326._teddy-card__inset--left_1vcct_320 {
2806
+ ._teddy-card__inset--bottom_1qi3a_326._teddy-card__inset--left_1qi3a_320 {
2807
2807
  border-bottom-left-radius: inherit;
2808
2808
  }
2809
- ._teddy-card__inset--bottom_1vcct_326._teddy-card__inset--right_1vcct_323 {
2809
+ ._teddy-card__inset--bottom_1qi3a_326._teddy-card__inset--right_1qi3a_323 {
2810
2810
  border-bottom-right-radius: inherit;
2811
2811
  }
2812
- ._teddy-card__inset--left_1vcct_320 {
2812
+ ._teddy-card__inset--left_1qi3a_320 {
2813
2813
  margin-left: calc(var(--teddy-spacing-250) * -1);
2814
2814
  }
2815
- ._teddy-card__inset--right_1vcct_323 {
2815
+ ._teddy-card__inset--right_1qi3a_323 {
2816
2816
  margin-right: calc(var(--teddy-spacing-250) * -1);
2817
2817
  }
2818
- ._teddy-card__availability--badge_1vcct_341 {
2818
+ ._teddy-card__availability--badge_1qi3a_341 {
2819
2819
  margin-right: var(--teddy-spacing-150);
2820
2820
  }
2821
- ._teddy-card__availability--success_1vcct_344 {
2821
+ ._teddy-card__availability--success_1qi3a_344 {
2822
2822
  color: var(--teddy-color-text-status-success-strong);
2823
2823
  }
2824
- ._teddy-card__availability--warning_1vcct_347 {
2824
+ ._teddy-card__availability--warning_1qi3a_347 {
2825
2825
  color: var(--teddy-color-text-status-warning-strong);
2826
2826
  }
2827
- ._teddy-card__availability--error_1vcct_350 {
2827
+ ._teddy-card__availability--error_1qi3a_350 {
2828
2828
  color: var(--teddy-color-text-status-error-strong);
2829
2829
  }
2830
- ._teddy-card__availability--special_1vcct_353 {
2830
+ ._teddy-card__availability--special_1qi3a_353 {
2831
2831
  color: var(--teddy-color-text-status-special);
2832
2832
  }
2833
- ._teddy-card__availability--neutral_1vcct_356 {
2833
+ ._teddy-card__availability--neutral_1qi3a_356 {
2834
2834
  color: var(--teddy-color-text-status-neutral);
2835
2835
  }
2836
- ._teddy-card__availability--information_1vcct_359 {
2836
+ ._teddy-card__availability--information_1qi3a_359 {
2837
2837
  color: var(--teddy-color-text-status-info-strong);
2838
2838
  }
2839
2839
  }._teddy-badge_wlyo5_1 {
package/package.json CHANGED
@@ -20,7 +20,7 @@
20
20
  "pnpm": ">=8"
21
21
  },
22
22
  "private": false,
23
- "version": "0.0.70",
23
+ "version": "0.0.72",
24
24
  "sideEffects": [
25
25
  "**/*.css"
26
26
  ],