@telia/teddy 0.7.60 → 0.7.62

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.
@@ -6,14 +6,14 @@ const React = require("react");
6
6
  require("../../assets/sprite.44b293a1-teddy.svg");
7
7
  const components_icon_icon = require("../icon/icon.cjs");
8
8
  const styles = {
9
- "teddy-top-row-buttons": "_teddy-top-row-buttons_1ytqf_1",
10
- "teddy-top-row-buttons__track": "_teddy-top-row-buttons__track_1ytqf_4",
11
- "teddy-top-row-buttons__track--centered": "_teddy-top-row-buttons__track--centered_1ytqf_17",
12
- "teddy-top-row-buttons__track--scroll": "_teddy-top-row-buttons__track--scroll_1ytqf_20",
13
- "teddy-top-row-buttons__item": "_teddy-top-row-buttons__item_1ytqf_23",
14
- "teddy-top-row-buttons__button": "_teddy-top-row-buttons__button_1ytqf_27",
15
- "teddy-top-row-buttons__label": "_teddy-top-row-buttons__label_1ytqf_109",
16
- "teddy-top-row-buttons__emoji": "_teddy-top-row-buttons__emoji_1ytqf_112"
9
+ "teddy-top-row-buttons": "_teddy-top-row-buttons_1ogzx_1",
10
+ "teddy-top-row-buttons__track": "_teddy-top-row-buttons__track_1ogzx_4",
11
+ "teddy-top-row-buttons__track--centered": "_teddy-top-row-buttons__track--centered_1ogzx_16",
12
+ "teddy-top-row-buttons__track--scroll": "_teddy-top-row-buttons__track--scroll_1ogzx_19",
13
+ "teddy-top-row-buttons__item": "_teddy-top-row-buttons__item_1ogzx_23",
14
+ "teddy-top-row-buttons__button": "_teddy-top-row-buttons__button_1ogzx_27",
15
+ "teddy-top-row-buttons__label": "_teddy-top-row-buttons__label_1ogzx_109",
16
+ "teddy-top-row-buttons__emoji": "_teddy-top-row-buttons__emoji_1ogzx_112"
17
17
  };
18
18
  const rootClassName = "teddy-top-row-buttons";
19
19
  const Root = React.forwardRef(
@@ -4,14 +4,14 @@ import React__default from "react";
4
4
  import "../../assets/sprite.44b293a1-teddy.svg";
5
5
  import { Icon } from "../icon/icon.js";
6
6
  const styles = {
7
- "teddy-top-row-buttons": "_teddy-top-row-buttons_1ytqf_1",
8
- "teddy-top-row-buttons__track": "_teddy-top-row-buttons__track_1ytqf_4",
9
- "teddy-top-row-buttons__track--centered": "_teddy-top-row-buttons__track--centered_1ytqf_17",
10
- "teddy-top-row-buttons__track--scroll": "_teddy-top-row-buttons__track--scroll_1ytqf_20",
11
- "teddy-top-row-buttons__item": "_teddy-top-row-buttons__item_1ytqf_23",
12
- "teddy-top-row-buttons__button": "_teddy-top-row-buttons__button_1ytqf_27",
13
- "teddy-top-row-buttons__label": "_teddy-top-row-buttons__label_1ytqf_109",
14
- "teddy-top-row-buttons__emoji": "_teddy-top-row-buttons__emoji_1ytqf_112"
7
+ "teddy-top-row-buttons": "_teddy-top-row-buttons_1ogzx_1",
8
+ "teddy-top-row-buttons__track": "_teddy-top-row-buttons__track_1ogzx_4",
9
+ "teddy-top-row-buttons__track--centered": "_teddy-top-row-buttons__track--centered_1ogzx_16",
10
+ "teddy-top-row-buttons__track--scroll": "_teddy-top-row-buttons__track--scroll_1ogzx_19",
11
+ "teddy-top-row-buttons__item": "_teddy-top-row-buttons__item_1ogzx_23",
12
+ "teddy-top-row-buttons__button": "_teddy-top-row-buttons__button_1ogzx_27",
13
+ "teddy-top-row-buttons__label": "_teddy-top-row-buttons__label_1ogzx_109",
14
+ "teddy-top-row-buttons__emoji": "_teddy-top-row-buttons__emoji_1ogzx_112"
15
15
  };
16
16
  const rootClassName = "teddy-top-row-buttons";
17
17
  const Root = React__default.forwardRef(
package/dist/style.css CHANGED
@@ -252,33 +252,33 @@
252
252
  font-family: var(--teddy-typography-family-default);
253
253
  gap: var(--teddy-spacing-100);
254
254
  }
255
- }._teddy-top-row-buttons_1ytqf_1 {
255
+ }._teddy-top-row-buttons_1ogzx_1 {
256
256
  width: 100%;
257
257
  }
258
- ._teddy-top-row-buttons__track_1ytqf_4 {
258
+ ._teddy-top-row-buttons__track_1ogzx_4 {
259
259
  display: flex;
260
260
  gap: var(--teddy-spacing-200);
261
261
  overflow-x: auto;
262
- scroll-snap-type: x mandatory;
263
262
  scroll-behavior: smooth;
264
263
  scrollbar-width: none;
265
264
  padding-bottom: var(--teddy-spacing-50);
266
265
  width: 100%;
267
266
  }
268
- ._teddy-top-row-buttons__track_1ytqf_4::-webkit-scrollbar {
267
+ ._teddy-top-row-buttons__track_1ogzx_4::-webkit-scrollbar {
269
268
  display: none;
270
269
  }
271
- ._teddy-top-row-buttons__track--centered_1ytqf_17 {
270
+ ._teddy-top-row-buttons__track--centered_1ogzx_16 {
272
271
  justify-content: center;
273
272
  }
274
- ._teddy-top-row-buttons__track--scroll_1ytqf_20 {
273
+ ._teddy-top-row-buttons__track--scroll_1ogzx_19 {
275
274
  justify-content: flex-start;
275
+ scroll-snap-type: x mandatory;
276
276
  }
277
- ._teddy-top-row-buttons__item_1ytqf_23 {
277
+ ._teddy-top-row-buttons__item_1ogzx_23 {
278
278
  flex: 0 0 auto;
279
279
  scroll-snap-align: start;
280
280
  }
281
- ._teddy-top-row-buttons__button_1ytqf_27 {
281
+ ._teddy-top-row-buttons__button_1ogzx_27 {
282
282
  display: inline-flex;
283
283
  align-items: center;
284
284
  gap: var(--teddy-spacing-100);
@@ -296,7 +296,7 @@
296
296
  transition-timing-function: var(--teddy-motion-easing-ease-in-out);
297
297
  position: relative;
298
298
  }
299
- ._teddy-top-row-buttons__button_1ytqf_27:focus::before {
299
+ ._teddy-top-row-buttons__button_1ogzx_27:focus::before {
300
300
  border-radius: inherit;
301
301
  box-shadow: 0 0 0 var(--teddy-border-width-sm) var(--teddy-color-border-interactive-focus);
302
302
  content: "";
@@ -305,65 +305,65 @@
305
305
  inset: calc(var(--teddy-spacing-25) * -1);
306
306
  position: absolute;
307
307
  }
308
- ._teddy-top-row-buttons__button_1ytqf_27:focus:not(:focus-visible)::before {
308
+ ._teddy-top-row-buttons__button_1ogzx_27:focus:not(:focus-visible)::before {
309
309
  opacity: 0;
310
310
  }
311
- ._teddy-top-row-buttons__track_1ytqf_4[data-color=beige] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]), ._teddy-top-row-buttons__button_1ytqf_27[data-color=beige] {
311
+ ._teddy-top-row-buttons__track_1ogzx_4[data-color=beige] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]), ._teddy-top-row-buttons__button_1ogzx_27[data-color=beige] {
312
312
  background-color: var(--teddy-color-background-beige);
313
313
  color: var(--teddy-color-text-default);
314
314
  }
315
- ._teddy-top-row-buttons__track_1ytqf_4[data-color=beige] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]):hover, ._teddy-top-row-buttons__button_1ytqf_27[data-color=beige]:hover {
315
+ ._teddy-top-row-buttons__track_1ogzx_4[data-color=beige] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):hover, ._teddy-top-row-buttons__button_1ogzx_27[data-color=beige]:hover {
316
316
  background-color: var(--teddy-color-background-beige-hover);
317
317
  }
318
- ._teddy-top-row-buttons__track_1ytqf_4[data-color=beige] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]):active, ._teddy-top-row-buttons__button_1ytqf_27[data-color=beige]:active {
318
+ ._teddy-top-row-buttons__track_1ogzx_4[data-color=beige] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):active, ._teddy-top-row-buttons__button_1ogzx_27[data-color=beige]:active {
319
319
  background-color: var(--teddy-color-background-beige-active);
320
320
  }
321
- ._teddy-top-row-buttons__track_1ytqf_4[data-color=beige] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]):focus-visible, ._teddy-top-row-buttons__button_1ytqf_27[data-color=beige]:focus-visible {
321
+ ._teddy-top-row-buttons__track_1ogzx_4[data-color=beige] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):focus-visible, ._teddy-top-row-buttons__button_1ogzx_27[data-color=beige]:focus-visible {
322
322
  background-color: var(--teddy-color-background-beige);
323
323
  }
324
- ._teddy-top-row-buttons__track_1ytqf_4[data-color=grey] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]), ._teddy-top-row-buttons__button_1ytqf_27[data-color=grey] {
324
+ ._teddy-top-row-buttons__track_1ogzx_4[data-color=grey] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]), ._teddy-top-row-buttons__button_1ogzx_27[data-color=grey] {
325
325
  background-color: var(--teddy-color-background-secondary);
326
326
  color: var(--teddy-color-text-default);
327
327
  }
328
- ._teddy-top-row-buttons__track_1ytqf_4[data-color=grey] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]):hover, ._teddy-top-row-buttons__button_1ytqf_27[data-color=grey]:hover {
328
+ ._teddy-top-row-buttons__track_1ogzx_4[data-color=grey] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):hover, ._teddy-top-row-buttons__button_1ogzx_27[data-color=grey]:hover {
329
329
  background-color: var(--teddy-color-background-secondary-hover);
330
330
  }
331
- ._teddy-top-row-buttons__track_1ytqf_4[data-color=grey] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]):active, ._teddy-top-row-buttons__button_1ytqf_27[data-color=grey]:active {
331
+ ._teddy-top-row-buttons__track_1ogzx_4[data-color=grey] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):active, ._teddy-top-row-buttons__button_1ogzx_27[data-color=grey]:active {
332
332
  background-color: var(--teddy-color-background-secondary-active);
333
333
  }
334
- ._teddy-top-row-buttons__track_1ytqf_4[data-color=grey] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]):focus-visible, ._teddy-top-row-buttons__button_1ytqf_27[data-color=grey]:focus-visible {
334
+ ._teddy-top-row-buttons__track_1ogzx_4[data-color=grey] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):focus-visible, ._teddy-top-row-buttons__button_1ogzx_27[data-color=grey]:focus-visible {
335
335
  background-color: var(--teddy-color-background-secondary);
336
336
  }
337
- ._teddy-top-row-buttons__track_1ytqf_4[data-color=white] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]), ._teddy-top-row-buttons__button_1ytqf_27[data-color=white] {
337
+ ._teddy-top-row-buttons__track_1ogzx_4[data-color=white] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]), ._teddy-top-row-buttons__button_1ogzx_27[data-color=white] {
338
338
  background-color: var(--teddy-color-brand-white);
339
339
  color: var(--teddy-color-text-default);
340
340
  }
341
- ._teddy-top-row-buttons__track_1ytqf_4[data-color=white] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]):hover, ._teddy-top-row-buttons__button_1ytqf_27[data-color=white]:hover {
341
+ ._teddy-top-row-buttons__track_1ogzx_4[data-color=white] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):hover, ._teddy-top-row-buttons__button_1ogzx_27[data-color=white]:hover {
342
342
  background-color: var(--teddy-color-background-interactive-transparent-hover);
343
343
  }
344
- ._teddy-top-row-buttons__track_1ytqf_4[data-color=white] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]):active, ._teddy-top-row-buttons__button_1ytqf_27[data-color=white]:active {
344
+ ._teddy-top-row-buttons__track_1ogzx_4[data-color=white] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):active, ._teddy-top-row-buttons__button_1ogzx_27[data-color=white]:active {
345
345
  background-color: var(--teddy-color-background-interactive-transparent-active);
346
346
  }
347
- ._teddy-top-row-buttons__track_1ytqf_4[data-color=white] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]):focus-visible, ._teddy-top-row-buttons__button_1ytqf_27[data-color=white]:focus-visible {
347
+ ._teddy-top-row-buttons__track_1ogzx_4[data-color=white] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):focus-visible, ._teddy-top-row-buttons__button_1ogzx_27[data-color=white]:focus-visible {
348
348
  background-color: var(--teddy-color-brand-white);
349
349
  }
350
- ._teddy-top-row-buttons__track_1ytqf_4[data-color=purple] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]), ._teddy-top-row-buttons__button_1ytqf_27[data-color=purple] {
350
+ ._teddy-top-row-buttons__track_1ogzx_4[data-color=purple] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]), ._teddy-top-row-buttons__button_1ogzx_27[data-color=purple] {
351
351
  background-color: var(--teddy-color-background-interactive-primary);
352
352
  color: var(--teddy-color-text-interactive-on-primary);
353
353
  }
354
- ._teddy-top-row-buttons__track_1ytqf_4[data-color=purple] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]):hover, ._teddy-top-row-buttons__button_1ytqf_27[data-color=purple]:hover {
354
+ ._teddy-top-row-buttons__track_1ogzx_4[data-color=purple] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):hover, ._teddy-top-row-buttons__button_1ogzx_27[data-color=purple]:hover {
355
355
  background-color: var(--teddy-color-background-interactive-primary-hover);
356
356
  }
357
- ._teddy-top-row-buttons__track_1ytqf_4[data-color=purple] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]):active, ._teddy-top-row-buttons__button_1ytqf_27[data-color=purple]:active {
357
+ ._teddy-top-row-buttons__track_1ogzx_4[data-color=purple] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):active, ._teddy-top-row-buttons__button_1ogzx_27[data-color=purple]:active {
358
358
  background-color: var(--teddy-color-background-interactive-primary-active);
359
359
  }
360
- ._teddy-top-row-buttons__track_1ytqf_4[data-color=purple] ._teddy-top-row-buttons__button_1ytqf_27:not([data-color]):focus-visible, ._teddy-top-row-buttons__button_1ytqf_27[data-color=purple]:focus-visible {
360
+ ._teddy-top-row-buttons__track_1ogzx_4[data-color=purple] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):focus-visible, ._teddy-top-row-buttons__button_1ogzx_27[data-color=purple]:focus-visible {
361
361
  background-color: var(--teddy-color-background-interactive-primary);
362
362
  }
363
- ._teddy-top-row-buttons__label_1ytqf_109 {
363
+ ._teddy-top-row-buttons__label_1ogzx_109 {
364
364
  white-space: nowrap;
365
365
  }
366
- ._teddy-top-row-buttons__emoji_1ytqf_112 {
366
+ ._teddy-top-row-buttons__emoji_1ogzx_112 {
367
367
  display: inline-flex;
368
368
  align-items: center;
369
369
  justify-content: center;
@@ -3864,6 +3864,8 @@
3864
3864
  --teddy-color-background-interactive-primary-active: var(--teddy-color-purple-600);
3865
3865
  --teddy-color-background-interactive-primary-hover: var(--teddy-color-purple-700);
3866
3866
  --teddy-color-background-interactive-primary: var(--teddy-color-purple-800);
3867
+ --teddy-color-background-secondary-active: var(--teddy-color-gray-200);
3868
+ --teddy-color-background-secondary-hover: var(--teddy-color-gray-100);
3867
3869
  --teddy-color-background-secondary-negative: var(--teddy-color-gray-900);
3868
3870
  --teddy-color-background-secondary: var(--teddy-color-gray-50);
3869
3871
  --teddy-color-background-primary-negative: var(--teddy-color-gray-900);
@@ -8581,6 +8583,8 @@
8581
8583
  --teddy-color-background-interactive-primary-active: var(--teddy-color-purple-600);
8582
8584
  --teddy-color-background-interactive-primary-hover: var(--teddy-color-purple-700);
8583
8585
  --teddy-color-background-interactive-primary: var(--teddy-color-purple-800);
8586
+ --teddy-color-background-secondary-active: var(--teddy-color-gray-200);
8587
+ --teddy-color-background-secondary-hover: var(--teddy-color-gray-100);
8584
8588
  --teddy-color-background-secondary-negative: var(--teddy-color-gray-900);
8585
8589
  --teddy-color-background-secondary: var(--teddy-color-gray-50);
8586
8590
  --teddy-color-background-primary-negative: var(--teddy-color-gray-900);
@@ -177,6 +177,8 @@ const teddyColorBackgroundPrimary = "#ffffff";
177
177
  const teddyColorBackgroundPrimaryNegative = "#1e1e20";
178
178
  const teddyColorBackgroundSecondary = "#f3f3f8";
179
179
  const teddyColorBackgroundSecondaryNegative = "#1e1e20";
180
+ const teddyColorBackgroundSecondaryHover = "#e5e5eb";
181
+ const teddyColorBackgroundSecondaryActive = "#c6c6cd";
180
182
  const teddyColorBackgroundInteractivePrimary = "#4e0174";
181
183
  const teddyColorBackgroundInteractivePrimaryHover = "#6d02a3";
182
184
  const teddyColorBackgroundInteractivePrimaryActive = "#8c07d0";
@@ -385,6 +387,8 @@ const variables = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePro
385
387
  teddyColorBackgroundPrimary,
386
388
  teddyColorBackgroundPrimaryNegative,
387
389
  teddyColorBackgroundSecondary,
390
+ teddyColorBackgroundSecondaryActive,
391
+ teddyColorBackgroundSecondaryHover,
388
392
  teddyColorBackgroundSecondaryNegative,
389
393
  teddyColorBackgroundStatusAttention,
390
394
  teddyColorBackgroundStatusAttentionNegative,
@@ -691,6 +695,8 @@ exports.teddyColorBackgroundLightPurpleNegative = teddyColorBackgroundLightPurpl
691
695
  exports.teddyColorBackgroundPrimary = teddyColorBackgroundPrimary;
692
696
  exports.teddyColorBackgroundPrimaryNegative = teddyColorBackgroundPrimaryNegative;
693
697
  exports.teddyColorBackgroundSecondary = teddyColorBackgroundSecondary;
698
+ exports.teddyColorBackgroundSecondaryActive = teddyColorBackgroundSecondaryActive;
699
+ exports.teddyColorBackgroundSecondaryHover = teddyColorBackgroundSecondaryHover;
694
700
  exports.teddyColorBackgroundSecondaryNegative = teddyColorBackgroundSecondaryNegative;
695
701
  exports.teddyColorBackgroundStatusAttention = teddyColorBackgroundStatusAttention;
696
702
  exports.teddyColorBackgroundStatusAttentionNegative = teddyColorBackgroundStatusAttentionNegative;
@@ -175,6 +175,8 @@ export declare const teddyColorBackgroundPrimary = "#ffffff";
175
175
  export declare const teddyColorBackgroundPrimaryNegative = "#1e1e20";
176
176
  export declare const teddyColorBackgroundSecondary = "#f3f3f8";
177
177
  export declare const teddyColorBackgroundSecondaryNegative = "#1e1e20";
178
+ export declare const teddyColorBackgroundSecondaryHover = "#e5e5eb";
179
+ export declare const teddyColorBackgroundSecondaryActive = "#c6c6cd";
178
180
  export declare const teddyColorBackgroundInteractivePrimary = "#4e0174";
179
181
  export declare const teddyColorBackgroundInteractivePrimaryHover = "#6d02a3";
180
182
  export declare const teddyColorBackgroundInteractivePrimaryActive = "#8c07d0";
@@ -175,6 +175,8 @@ const teddyColorBackgroundPrimary = "#ffffff";
175
175
  const teddyColorBackgroundPrimaryNegative = "#1e1e20";
176
176
  const teddyColorBackgroundSecondary = "#f3f3f8";
177
177
  const teddyColorBackgroundSecondaryNegative = "#1e1e20";
178
+ const teddyColorBackgroundSecondaryHover = "#e5e5eb";
179
+ const teddyColorBackgroundSecondaryActive = "#c6c6cd";
178
180
  const teddyColorBackgroundInteractivePrimary = "#4e0174";
179
181
  const teddyColorBackgroundInteractivePrimaryHover = "#6d02a3";
180
182
  const teddyColorBackgroundInteractivePrimaryActive = "#8c07d0";
@@ -383,6 +385,8 @@ const variables = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePro
383
385
  teddyColorBackgroundPrimary,
384
386
  teddyColorBackgroundPrimaryNegative,
385
387
  teddyColorBackgroundSecondary,
388
+ teddyColorBackgroundSecondaryActive,
389
+ teddyColorBackgroundSecondaryHover,
386
390
  teddyColorBackgroundSecondaryNegative,
387
391
  teddyColorBackgroundStatusAttention,
388
392
  teddyColorBackgroundStatusAttentionNegative,
@@ -690,6 +694,8 @@ export {
690
694
  teddyColorBackgroundPrimary,
691
695
  teddyColorBackgroundPrimaryNegative,
692
696
  teddyColorBackgroundSecondary,
697
+ teddyColorBackgroundSecondaryActive,
698
+ teddyColorBackgroundSecondaryHover,
693
699
  teddyColorBackgroundSecondaryNegative,
694
700
  teddyColorBackgroundStatusAttention,
695
701
  teddyColorBackgroundStatusAttentionNegative,
package/package.json CHANGED
@@ -20,7 +20,7 @@
20
20
  "pnpm": ">=10"
21
21
  },
22
22
  "private": false,
23
- "version": "0.7.60",
23
+ "version": "0.7.62",
24
24
  "sideEffects": [
25
25
  "**/*.css",
26
26
  "**/*.svg"