srf-feathers 1.1.4 → 1.1.8

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 (11) hide show
  1. package/README.md +20 -3
  2. package/build/elements/Button/Button.d.ts +1 -1
  3. package/build/elements/Button/Button.types.d.ts +2 -1
  4. package/build/elements/Icon/Icon.d.ts +1 -1
  5. package/build/elements/Tooltip/Tooltip.types.d.ts +1 -1
  6. package/build/index.esm.js +19 -7
  7. package/build/index.esm.js.map +1 -1
  8. package/build/index.js +19 -7
  9. package/build/index.js.map +1 -1
  10. package/package.json +1 -1
  11. package/build/scss/foundation/typography.scss +0 -21
package/README.md CHANGED
@@ -10,7 +10,26 @@ Shared Frontend Components for SRF applications
10
10
  - [Storybook](https://storybook.js.org/) to help you create and show off your components
11
11
  - [Jest](https://jestjs.io/) and [React Testing Library](https://github.com/testing-library/react-testing-library) enabling testing of the components
12
12
 
13
- ## Installation
13
+ ## Usage
14
+
15
+ Run `npm install srf-feathers --save` in your project root.
16
+
17
+ Import and use components in your code:
18
+
19
+ ```js
20
+ import { Button } from "srf-feathers";
21
+
22
+ const MyComponent = () => (
23
+ <div>
24
+ <Button />
25
+ </div>
26
+ );
27
+
28
+ ```
29
+
30
+ ## Development
31
+
32
+ ### Installation
14
33
 
15
34
  * check out srf-feathers `git clone git@github.com:mmz-srf/feathers.git`
16
35
  * enter directory where you installed it, e.g. `cd feathers`
@@ -18,8 +37,6 @@ Shared Frontend Components for SRF applications
18
37
 
19
38
  ℹ️ If you have to update the _secrets_ (e.g. `CHROMATIC_PROJECT_TOKEN` for deployment to chromatic or `NPM_TOKEN` for deploying on NPM), you can change them on https://github.com/mmz-srf/feathers/settings/secrets/actions
20
39
 
21
- ## Development
22
-
23
40
  ### Testing
24
41
 
25
42
  ```
package/build/elements/Button/Button.d.ts CHANGED
@@ -3,7 +3,7 @@ import { ButtonProps } from "./Button.types";
3
3
  import { TooltipProps } from "../Tooltip/Tooltip.types";
4
4
  import "./Button.scss";
5
5
  import "./../Tooltip/Tooltip.scss";
6
- export declare const ButtonModifiers: readonly ["primary", "save", "publish", "retire", "danger", "favorite", "white", "unobtrusive", "fullwidth", "margin_top", "margin_bottom", "left_align", "icon_rotated", "invisible_content", "no_outline", "extra_big", "big", "small", "extra_tiny", "tiny", "hidden", "icon_right", "icon_sticks_to_border", "spread_content", "bold", "selected", "uppercase", "link", "circle"];
6
+ export declare const ButtonModifiers: readonly ["primary", "save", "publish", "retire", "danger", "favorite", "white", "unobtrusive", "fullwidth", "fullheight", "margin_top", "margin_bottom", "left_align", "icon_rotated", "invisible_content", "no_outline", "extra_big", "big", "small", "extra_tiny", "tiny", "hidden", "icon_right", "icon_sticks_to_border", "spread_content", "bold", "selected", "uppercase", "link", "circle"];
7
7
  export declare type ButtonModifiersType = typeof ButtonModifiers[number];
8
8
  declare const Button: React.FC<ButtonProps>;
9
9
  export declare const ButtonTooltip: React.FC<TooltipProps>;
package/build/elements/Button/Button.types.d.ts CHANGED
@@ -1,8 +1,9 @@
1
- import { MouseEventHandler, ReactElement } from "react";
1
+ import { Key, MouseEventHandler, ReactElement } from "react";
2
2
  import { ButtonModifiersType } from "./Button";
3
3
  import { IconProps } from "../Icon/Icon.types";
4
4
  import { TooltipProps } from "../Tooltip/Tooltip.types";
5
5
  export interface ButtonProps {
6
+ key?: Key;
6
7
  modifier?: ButtonModifiersType | Array<ButtonModifiersType>;
7
8
  children?: JSX.Element;
8
9
  text?: string;
package/build/elements/Icon/Icon.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import { IconProps } from "./Icon.types";
3
3
  import "./Icon.scss";
4
- export declare const IconModifiers: readonly ["success", "danger", "retire", "info", "branding", "small", "tiny", "white", "light", "rotatable", "rotated-180"];
4
+ export declare const IconModifiers: readonly ["success", "danger", "retire", "info", "branding", "small", "tiny", "white", "light", "rotatable", "rotated-45", "rotated-180"];
5
5
  export declare type IconModifiersType = typeof IconModifiers[number];
6
6
  declare const Icon: React.FC<IconProps>;
7
7
  export declare const UpdateIcon: React.FC<IconProps>;
package/build/elements/Tooltip/Tooltip.types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import { TooltipDirectionsType, TooltipModifiersType } from "./Tooltip";
3
3
  export interface TooltipProps {
4
- modifier?: TooltipModifiersType | Array<TooltipModifiersType>;
4
+ modifier?: Array<TooltipModifiersType>;
5
5
  text?: string | React.ReactNode;
6
6
  direction?: TooltipDirectionsType;
7
7
  content: string;
package/build/index.esm.js CHANGED
@@ -25,7 +25,17 @@ var __assign = function() {
25
25
  return t;
26
26
  };
27
27
  return __assign.apply(this, arguments);
28
- };
28
+ };
29
+
30
+ function __spreadArray(to, from, pack) {
31
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
32
+ if (ar || !(i in from)) {
33
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
34
+ ar[i] = from[i];
35
+ }
36
+ }
37
+ return to.concat(ar || Array.prototype.slice.call(from));
38
+ }
29
39
 
30
40
  function createCommonjsModule(fn) {
31
41
  var module = { exports: {} };
@@ -4746,7 +4756,7 @@ function styleInject(css, ref) {
4746
4756
  }
4747
4757
  }
4748
4758
 
4749
- var css_248z$2 = "/*! URHEBERRECHTSHINWEIS: Die SRG SSR Schrift und die dazugehoerige Software stehen im vollumfaenglichen Eigentum der SRG. Jede Bearbeitung, Vervielfaeltigung, Verbreitung und/oder oeffentliche Wiedergabe, insbesondere die ungenehmigte Uebernahme der SRG SSR Schrift stellt einen Rechtsverstoss dar, der zum Schadenersatz verpflichtet und auch strafrechtlich verfolgt wird. */@supports (font-variation-settings:normal){@font-face {font-family:\"SRG_SSR_Text_VF\";src:url(\"/src/assets/fonts/variable/SRGSSRTypeVF_Text_W_Wght.woff2\") format(\"woff2-variations\"),url(\"/src/assets/fonts/variable/SRGSSRTypeVF_Text_W_Wght.woff2\") format(\"woff2\");font-weight:300 800;font-display:swap}@font-face {font-family:\"SRG_SSR_Text_FauxItalic_VF\";src:url(\"/src/assets/fonts/variable/SRGSSRTypeVF_Text_W_Wght.woff2\") format(\"woff2-variations\"),url(\"/src/assets/fonts/variable/SRGSSRTypeVF_Text_W_Wght.woff2\") format(\"woff2\");font-display:swap}@font-face {font-family:\"SRG_SSR_Display_VF\";src:url(\"/src/assets/fonts/variable/SRGSSRTypeVF_Display_W_Wght.woff2\") format(\"woff2-variations\"),url(\"/src/assets/fonts/variable/SRGSSRTypeVF_Display_W_Wght.woff2\") format(\"woff2\");font-weight:300 800;font-display:swap}}@font-face {font-family:\"SRG_SSR_Serif_Regular\";src:url(\"/src/assets/fonts/SRGSSRTypeSerifText_W_Rg.woff2\") format(\"woff2\");font-weight:normal;font-style:normal;font-display:swap}*{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}html{overflow-x:hidden}body{margin:0;font-family:\"SRG_SSR_Text_Static\",sans-serif;font-weight:300;font-variation-settings:\"wght\" 300;background-color:var(--t-body-bg)}@supports (font-variation-settings:normal){body{font-family:\"SRG_SSR_Text_VF\",sans-serif}}html,body{line-height:1.5}nav{display:inline}ul,ol{counter-reset:item;list-style-type:none;margin:0;padding:0}h1,h2,h3,h4{font-weight:500;font-variation-settings:\"wght\" 500}a{text-decoration:none;color:#c91024}a:hover{color:#af001d}a:active{color:#8d0614}img{border-style:none;display:block;height:auto;width:100%}iframe{border:0;width:100%}cite{font-style:normal}b,strong{font-weight:500;font-variation-settings:\"wght\" 500}em{font-family:\"SRG_SSR_Text_FauxItalic_VF\",sans-serif;font-style:italic;font-synthesis:style}th{font-weight:400;font-variation-settings:\"wght\" 400}button,input,optgroup,select,textarea{font-family:inherit}:focus{outline:none}.f-icon{display:flex;align-items:center;justify-content:center}.f-icon svg{height:24px;width:24px}.f-icon svg *{stroke:currentColor}.f-icon--small svg{width:16px;height:16px}.f-icon--tiny svg{width:12px;height:12px}.f-icon--rotatable{transition:transform 0.2s ease-in-out}.f-icon--rotated-180{transform:rotate(180deg)}.f-icon--no-stroke svg *{stroke:none}.f-icon--success{color:#1cb373}.f-icon--danger{color:#f1434a}.f-icon--retire{color:#f7a600}.f-icon--info{color:#1a7ac5}.f-icon--white{color:white}.f-icon--light{color:#b9b7ac}.f-icon--branding{color:#e31f2b}";
4759
+ var css_248z$2 = "/*! URHEBERRECHTSHINWEIS: Die SRG SSR Schrift und die dazugehoerige Software stehen im vollumfaenglichen Eigentum der SRG. Jede Bearbeitung, Vervielfaeltigung, Verbreitung und/oder oeffentliche Wiedergabe, insbesondere die ungenehmigte Uebernahme der SRG SSR Schrift stellt einen Rechtsverstoss dar, der zum Schadenersatz verpflichtet und auch strafrechtlich verfolgt wird. */@supports (font-variation-settings:normal){@font-face {font-family:\"SRG_SSR_Text_VF\";src:url(\"/src/assets/fonts/variable/SRGSSRTypeVF_Text_W_Wght.woff2\") format(\"woff2-variations\"),url(\"/src/assets/fonts/variable/SRGSSRTypeVF_Text_W_Wght.woff2\") format(\"woff2\");font-weight:300 800;font-display:swap}@font-face {font-family:\"SRG_SSR_Text_FauxItalic_VF\";src:url(\"/src/assets/fonts/variable/SRGSSRTypeVF_Text_W_Wght.woff2\") format(\"woff2-variations\"),url(\"/src/assets/fonts/variable/SRGSSRTypeVF_Text_W_Wght.woff2\") format(\"woff2\");font-display:swap}@font-face {font-family:\"SRG_SSR_Display_VF\";src:url(\"/src/assets/fonts/variable/SRGSSRTypeVF_Display_W_Wght.woff2\") format(\"woff2-variations\"),url(\"/src/assets/fonts/variable/SRGSSRTypeVF_Display_W_Wght.woff2\") format(\"woff2\");font-weight:300 800;font-display:swap}}@font-face {font-family:\"SRG_SSR_Serif_Regular\";src:url(\"/src/assets/fonts/SRGSSRTypeSerifText_W_Rg.woff2\") format(\"woff2\");font-weight:normal;font-style:normal;font-display:swap}*{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}html{overflow-x:hidden}body{margin:0;font-family:\"SRG_SSR_Text_Static\",sans-serif;font-weight:300;font-variation-settings:\"wght\" 300;background-color:var(--t-body-bg)}@supports (font-variation-settings:normal){body{font-family:\"SRG_SSR_Text_VF\",sans-serif}}html,body{line-height:1.5}nav{display:inline}ul,ol{counter-reset:item;list-style-type:none;margin:0;padding:0}h1,h2,h3,h4{font-weight:500;font-variation-settings:\"wght\" 500}a{text-decoration:none;color:#c91024}a:hover{color:#af001d}a:active{color:#8d0614}img{border-style:none;display:block;height:auto;width:100%}iframe{border:0;width:100%}cite{font-style:normal}b,strong{font-weight:500;font-variation-settings:\"wght\" 500}em{font-family:\"SRG_SSR_Text_FauxItalic_VF\",sans-serif;font-style:italic;font-synthesis:style}th{font-weight:400;font-variation-settings:\"wght\" 400}button,input,optgroup,select,textarea{font-family:inherit}:focus{outline:none}.f-icon{display:flex;align-items:center;justify-content:center}.f-icon svg{height:24px;width:24px}.f-icon svg *{stroke:currentColor}.f-icon--small svg{width:16px;height:16px}.f-icon--tiny svg{width:12px;height:12px}.f-icon--rotatable{transition:transform 0.2s ease-in-out}.f-icon--rotated-45{transform:rotate(45deg)}.f-icon--rotated-180{transform:rotate(180deg)}.f-icon--no-stroke svg *{stroke:none}.f-icon--success{color:#1cb373}.f-icon--danger{color:#f1434a}.f-icon--retire{color:#f7a600}.f-icon--info{color:#1a7ac5}.f-icon--white{color:white}.f-icon--light{color:#b9b7ac}.f-icon--branding{color:#e31f2b}";
4750
4760
  styleInject(css_248z$2);
4751
4761
 
4752
4762
  var Icon = function (_a) {
@@ -4762,6 +4772,7 @@ var Icon = function (_a) {
4762
4772
  "f-icon--small": modifier === null || modifier === void 0 ? void 0 : modifier.includes("small"),
4763
4773
  "f-icon--tiny": modifier === null || modifier === void 0 ? void 0 : modifier.includes("tiny"),
4764
4774
  "f-icon--rotatable": modifier === null || modifier === void 0 ? void 0 : modifier.includes("rotatable"),
4775
+ "f-icon--rotatable f-icon--rotated-45": modifier === null || modifier === void 0 ? void 0 : modifier.includes("rotated-45"),
4765
4776
  "f-icon--rotatable f-icon--rotated-180": modifier === null || modifier === void 0 ? void 0 : modifier.includes("rotated-180"),
4766
4777
  "f-icon--no-stroke": noStroke,
4767
4778
  }) }, children));
@@ -5378,12 +5389,12 @@ var Tooltip = function (_a) {
5378
5389
  React__default.createElement("div", { dangerouslySetInnerHTML: { __html: content } }))));
5379
5390
  };
5380
5391
 
5381
- var css_248z = "/*! URHEBERRECHTSHINWEIS: Die SRG SSR Schrift und die dazugehoerige Software stehen im vollumfaenglichen Eigentum der SRG. Jede Bearbeitung, Vervielfaeltigung, Verbreitung und/oder oeffentliche Wiedergabe, insbesondere die ungenehmigte Uebernahme der SRG SSR Schrift stellt einen Rechtsverstoss dar, der zum Schadenersatz verpflichtet und auch strafrechtlich verfolgt wird. */@supports (font-variation-settings:normal){@font-face {font-family:\"SRG_SSR_Text_VF\";src:url(\"/src/assets/fonts/variable/SRGSSRTypeVF_Text_W_Wght.woff2\") format(\"woff2-variations\"),url(\"/src/assets/fonts/variable/SRGSSRTypeVF_Text_W_Wght.woff2\") format(\"woff2\");font-weight:300 800;font-display:swap}@font-face {font-family:\"SRG_SSR_Text_FauxItalic_VF\";src:url(\"/src/assets/fonts/variable/SRGSSRTypeVF_Text_W_Wght.woff2\") format(\"woff2-variations\"),url(\"/src/assets/fonts/variable/SRGSSRTypeVF_Text_W_Wght.woff2\") format(\"woff2\");font-display:swap}@font-face {font-family:\"SRG_SSR_Display_VF\";src:url(\"/src/assets/fonts/variable/SRGSSRTypeVF_Display_W_Wght.woff2\") format(\"woff2-variations\"),url(\"/src/assets/fonts/variable/SRGSSRTypeVF_Display_W_Wght.woff2\") format(\"woff2\");font-weight:300 800;font-display:swap}}@font-face {font-family:\"SRG_SSR_Serif_Regular\";src:url(\"/src/assets/fonts/SRGSSRTypeSerifText_W_Rg.woff2\") format(\"woff2\");font-weight:normal;font-style:normal;font-display:swap}*{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}html{overflow-x:hidden}body{margin:0;font-family:\"SRG_SSR_Text_Static\",sans-serif;font-weight:300;font-variation-settings:\"wght\" 300;background-color:var(--t-body-bg)}@supports (font-variation-settings:normal){body{font-family:\"SRG_SSR_Text_VF\",sans-serif}}html,body{line-height:1.5}nav{display:inline}ul,ol{counter-reset:item;list-style-type:none;margin:0;padding:0}h1,h2,h3,h4{font-weight:500;font-variation-settings:\"wght\" 500}a{text-decoration:none;color:#c91024}a:hover{color:#af001d}a:active{color:#8d0614}img{border-style:none;display:block;height:auto;width:100%}iframe{border:0;width:100%}cite{font-style:normal}b,strong{font-weight:500;font-variation-settings:\"wght\" 500}em{font-family:\"SRG_SSR_Text_FauxItalic_VF\",sans-serif;font-style:italic;font-synthesis:style}th{font-weight:400;font-variation-settings:\"wght\" 400}button,input,optgroup,select,textarea{font-family:inherit}:focus{outline:none}:root{--f-button-default-background:#ebebe5;--f-button-default-color:#4e4d47;--f-button-hover-background:#dadad2;--f-button-focus-background:#cac8bf;--f-button-primary-default-background:#4e4d47;--f-button-primary-default-color:white;--f-button-primary-hover-background:#6b6960;--f-button-primary-focus-background:#888579;--f-button-danger-default-background:#f1434a;--f-button-danger-default-color:white;--f-button-danger-hover-background:#e31f2b;--f-button-danger-focus-background:#c91024;--f-button-favorite-default-color:white;--f-button-favorite-default-background:#ad3492;--f-button-favorite-hover-background:#932c7b;--f-button-favorite-focus-background:#792465;--f-button-save-default-background:#1cb373;--f-button-save-default-color:white;--f-button-retire-default-background:#f28b02;--f-button-retire-default-color:white;--f-button-retire-hover-background:#ed7004;--f-button-retire-focus-background:#cd570c;--f-button-save-hover-background:#19a067;--f-button-save-focus-background:#168c5a;--f-button-publish-default-background:#1a7ac5;--f-button-publish-default-color:white;--f-button-publish-hover-background:#1667a7;--f-button-publish-focus-background:#105082;--f-button-white-default-background:#fafaf8;--f-button-white-default-color:#4e4d47;--f-button-white-hover-background:#dadad2;--f-button-white-focus-background:#cac8bf;--f-button-link-default-color:#f1434a;--f-button-link-hover-color:#c91024}.f-button{--f-button-height:40px;--f-button-gutter:16px;--f-button-icon-size:24px;--f-button-icon-text-gap:8px;--f-button-text-color:var(--f-button-default-color);position:relative;display:flex;align-items:center;justify-content:center;min-width:calc(var(--f-button-gutter) + var(--f-button-icon-size) + var(--f-button-gutter));height:var(--f-button-height);max-width:100%;padding:0 var(--f-button-gutter);letter-spacing:0.4px;background:var(--f-button-default-background);box-shadow:0 1px 2px 0 rgba(0,0,0,0.16),0 0 2px 0 rgba(0,0,0,0.08);border:none;border-radius:2px;transition:background-color 0.3s ease-in-out,width 0.3s ease,box-shadow 0.3s ease-in-out,filter 0.3s ease-in-out;-webkit-appearance:none}.f-button svg{transition:transform 0.3s ease}.f-button svg *{stroke:currentColor}.f-button,.f-button:hover,.f-button:active,.f-button:focus-visible{color:var(--f-button-text-color)}.f-button:not(:disabled):hover{cursor:pointer;background:var(--f-button-hover-background)}.f-button:not(:disabled):focus-visible{background:var(--f-button-focus-background);outline:none}.f-button:disabled{cursor:not-allowed;opacity:0.66}.f-button__icon-wrapper{display:flex;padding:0 var(--f-button-icon-text-gap) 0 0}.f-button__text{font-weight:400;font-variation-settings:\"wght\" 400;--f-button-text-font-size:16px;font-size:var(--f-button-text-font-size);line-height:20px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.f-button--circle{border-radius:50%}.f-button--link{--f-button-text-color:var(--f-button-link-default-color);box-shadow:none;background:transparent}.f-button--link:hover,.f-button--link:focus-visible,.f-button--link:active{background-color:transparent;color:var(--f-button-link-hover-color)}.f-button--primary{--f-button-text-color:var(--f-button-primary-default-color);--f-button-default-background:var(--f-button-primary-default-background);--f-button-hover-background:var(--f-button-primary-hover-background);--f-button-focus-background:var(--f-button-primary-focus-background)}.f-button--danger{--f-button-text-color:var(--f-button-danger-default-color);--f-button-default-background:var(--f-button-danger-default-background);--f-button-hover-background:var(--f-button-danger-hover-background);--f-button-focus-background:var(--f-button-danger-focus-background)}.f-button--favorite{--f-button-text-color:var(--f-button-favorite-default-color);--f-button-default-background:var(--f-button-favorite-default-background);--f-button-hover-background:var(--f-button-favorite-hover-background);--f-button-focus-background:var(--f-button-favorite-focus-background)}.f-button--save{--f-button-text-color:var(--f-button-save-default-color);--f-button-default-background:var(--f-button-save-default-background);--f-button-hover-background:var(--f-button-save-hover-background);--f-button-focus-background:var(--f-button-save-focus-background)}.f-button--publish{--f-button-text-color:var(--f-button-publish-default-color);--f-button-default-background:var(--f-button-publish-default-background);--f-button-hover-background:var(--f-button-publish-hover-background);--f-button-focus-background:var(--f-button-publish-focus-background)}.f-button--retire{--f-button-text-color:var(--f-button-retire-default-color);--f-button-default-background:var(--f-button-retire-default-background);--f-button-hover-background:var(--f-button-retire-hover-background);--f-button-focus-background:var(--f-button-retire-focus-background)}.f-button--white{--f-button-text-color:var(--f-button-white-default-color);--f-button-default-background:var(--f-button-white-default-background);--f-button-hover-background:var(--f-button-white-hover-background);--f-button-focus-background:var(--f-button-white-focus-background)}.f-button--unobtrusive.f-button--unobtrusive{--f-button-text-color:var(--icon-button-changing-icon-color);box-shadow:none}.f-button--unobtrusive.f-button--unobtrusive,.f-button--unobtrusive.f-button--unobtrusive:hover,.f-button--unobtrusive.f-button--unobtrusive:focus-visible,.f-button--unobtrusive.f-button--unobtrusive:active{background:transparent}.f-button--icon-only{--f-button-gutter:8px}.f-button--icon-only .f-button__icon-wrapper{padding:0}.f-button--extra-big{--f-button-height:56px;--f-button-gutter:14px;--f-button-icon-size:28px}.f-button--extra-big .f-button__text{--f-button-text-font-size:18px}.f-button--big{--f-button-height:48px;--f-button-gutter:12px;--f-button-icon-size:24px}.f-button--big .f-button__text{--f-button-text-font-size:16px}.f-button--small{--f-button-height:32px;--f-button-gutter:12px;--f-button-icon-size:16px}.f-button--small.f-button--icon-only{--f-button-gutter:8px}.f-button--small .f-button__text{font-weight:400;font-variation-settings:\"wght\" 400;--f-button-text-font-size:14px;line-height:16px}.f-button--tiny{--f-button-height:24px;--f-button-gutter:4px;--f-button-icon-size:16px;--f-button-icon-text-gap:4px}.f-button--tiny .f-button__text{font-weight:400;font-variation-settings:\"wght\" 400;--f-button-text-font-size:12px;line-height:16px}.f-button--extra-tiny{--f-button-height:18px;--f-button-gutter:4px;--f-button-icon-size:10px}.f-button--extra-tiny .f-button__text{--f-button-text-font-size:12px}.f-button--no-outline{box-shadow:none;border-radius:0}.f-button--icon-rotated svg{transform:rotate(180deg)}.f-button--fullwidth{width:100%}.f-button--margin-top{margin-top:24px}.f-button--margin-bottom{margin-bottom:24px}.f-button--left-align{justify-content:left}.f-button--invisible-content .f-button__text,.f-button--invisible-content .f-button__icon-wrapper,.f-button--invisible-content::before{visibility:hidden;opacity:0}.f-button--hidden{display:none}.f-button--icon-on-the-right{flex-direction:row-reverse}.f-button--icon-on-the-right .f-button__icon-wrapper{padding:0 0 0 var(--f-button-icon-text-gap)}.f-button--icon-sticks-to-border{padding:0 calc(var(--f-button-gutter) + var(--f-button-icon-size) + var(--f-button-icon-text-gap))}.f-button--icon-sticks-to-border .f-button__text{flex-grow:1;text-align:center}.f-button--icon-sticks-to-border .f-button__icon-wrapper{position:absolute;left:0;padding:0 var(--f-button-gutter)}.f-button--icon-sticks-to-border.f-button--icon-on-the-right .f-button__icon-wrapper{left:initial;right:0}.f-button--spread-content{justify-content:space-between}.f-button--bold .f-button__text{font-weight:700;font-variation-settings:\"wght\" 700}.f-button--selected{background:var(--f-button-focus-background)}.f-button--selected .f-button__text{font-weight:700;font-variation-settings:\"wght\" 700}.f-button--uppercase{text-transform:uppercase}";
5392
+ var css_248z = "/*! URHEBERRECHTSHINWEIS: Die SRG SSR Schrift und die dazugehoerige Software stehen im vollumfaenglichen Eigentum der SRG. Jede Bearbeitung, Vervielfaeltigung, Verbreitung und/oder oeffentliche Wiedergabe, insbesondere die ungenehmigte Uebernahme der SRG SSR Schrift stellt einen Rechtsverstoss dar, der zum Schadenersatz verpflichtet und auch strafrechtlich verfolgt wird. */@supports (font-variation-settings:normal){@font-face {font-family:\"SRG_SSR_Text_VF\";src:url(\"/src/assets/fonts/variable/SRGSSRTypeVF_Text_W_Wght.woff2\") format(\"woff2-variations\"),url(\"/src/assets/fonts/variable/SRGSSRTypeVF_Text_W_Wght.woff2\") format(\"woff2\");font-weight:300 800;font-display:swap}@font-face {font-family:\"SRG_SSR_Text_FauxItalic_VF\";src:url(\"/src/assets/fonts/variable/SRGSSRTypeVF_Text_W_Wght.woff2\") format(\"woff2-variations\"),url(\"/src/assets/fonts/variable/SRGSSRTypeVF_Text_W_Wght.woff2\") format(\"woff2\");font-display:swap}@font-face {font-family:\"SRG_SSR_Display_VF\";src:url(\"/src/assets/fonts/variable/SRGSSRTypeVF_Display_W_Wght.woff2\") format(\"woff2-variations\"),url(\"/src/assets/fonts/variable/SRGSSRTypeVF_Display_W_Wght.woff2\") format(\"woff2\");font-weight:300 800;font-display:swap}}@font-face {font-family:\"SRG_SSR_Serif_Regular\";src:url(\"/src/assets/fonts/SRGSSRTypeSerifText_W_Rg.woff2\") format(\"woff2\");font-weight:normal;font-style:normal;font-display:swap}*{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}html{overflow-x:hidden}body{margin:0;font-family:\"SRG_SSR_Text_Static\",sans-serif;font-weight:300;font-variation-settings:\"wght\" 300;background-color:var(--t-body-bg)}@supports (font-variation-settings:normal){body{font-family:\"SRG_SSR_Text_VF\",sans-serif}}html,body{line-height:1.5}nav{display:inline}ul,ol{counter-reset:item;list-style-type:none;margin:0;padding:0}h1,h2,h3,h4{font-weight:500;font-variation-settings:\"wght\" 500}a{text-decoration:none;color:#c91024}a:hover{color:#af001d}a:active{color:#8d0614}img{border-style:none;display:block;height:auto;width:100%}iframe{border:0;width:100%}cite{font-style:normal}b,strong{font-weight:500;font-variation-settings:\"wght\" 500}em{font-family:\"SRG_SSR_Text_FauxItalic_VF\",sans-serif;font-style:italic;font-synthesis:style}th{font-weight:400;font-variation-settings:\"wght\" 400}button,input,optgroup,select,textarea{font-family:inherit}:focus{outline:none}:root{--f-button-default-background:#ebebe5;--f-button-default-color:#4e4d47;--f-button-hover-background:#dadad2;--f-button-focus-background:#cac8bf;--f-button-primary-default-background:#4e4d47;--f-button-primary-default-color:white;--f-button-primary-hover-background:#6b6960;--f-button-primary-focus-background:#888579;--f-button-danger-default-background:#f1434a;--f-button-danger-default-color:white;--f-button-danger-hover-background:#e31f2b;--f-button-danger-focus-background:#c91024;--f-button-favorite-default-color:white;--f-button-favorite-default-background:#ad3492;--f-button-favorite-hover-background:#932c7b;--f-button-favorite-focus-background:#792465;--f-button-save-default-background:#1cb373;--f-button-save-default-color:white;--f-button-retire-default-background:#f28b02;--f-button-retire-default-color:white;--f-button-retire-hover-background:#ed7004;--f-button-retire-focus-background:#cd570c;--f-button-save-hover-background:#19a067;--f-button-save-focus-background:#168c5a;--f-button-publish-default-background:#1a7ac5;--f-button-publish-default-color:white;--f-button-publish-hover-background:#1667a7;--f-button-publish-focus-background:#105082;--f-button-white-default-background:#fafaf8;--f-button-white-default-color:#4e4d47;--f-button-white-hover-background:#dadad2;--f-button-white-focus-background:#cac8bf;--f-button-link-default-color:#f1434a;--f-button-link-default-background:transparent;--f-button-link-hover-color:#c91024;--f-button-link-hover-background:transparent;--f-button-link-focus-background:transparent}.f-button{--f-button-height:40px;--f-button-gutter:16px;--f-button-icon-size:24px;--f-button-icon-text-gap:8px;--f-button-text-color:var(--f-button-default-color);position:relative;display:flex;align-items:center;justify-content:center;min-width:calc(var(--f-button-gutter) + var(--f-button-icon-size) + var(--f-button-gutter));height:var(--f-button-height);max-width:100%;padding:0 var(--f-button-gutter);margin:0;letter-spacing:0.4px;background:var(--f-button-default-background);box-shadow:0 1px 2px 0 rgba(0,0,0,0.16),0 0 2px 0 rgba(0,0,0,0.08);border:none;border-radius:2px;transition:background-color 0.3s ease-in-out,width 0.3s ease,box-shadow 0.3s ease-in-out,filter 0.3s ease-in-out;-webkit-appearance:none}.f-button svg{transition:transform 0.3s ease}.f-button svg *{stroke:currentColor}.f-button,.f-button:hover,.f-button:active{color:var(--f-button-text-color)}.f-button:focus-visible{color:var(--f-button-text-color)}.f-button:not(:disabled):hover{cursor:pointer;background:var(--f-button-hover-background);color:var(--f-button-hover-text-color,var(--f-button-text-color))}.f-button:not(:disabled):focus-visible{background:var(--f-button-focus-background);outline:none}.f-button:disabled{cursor:not-allowed;opacity:0.66}.f-button__icon-wrapper{display:flex;padding:0 var(--f-button-icon-text-gap) 0 0}.f-button__text{font-weight:400;font-variation-settings:\"wght\" 400;--f-button-text-font-size:16px;font-size:var(--f-button-text-font-size);line-height:20px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.f-button--circle{border-radius:50%}.f-button--link{--f-button-text-color:var(--f-button-link-default-color);--f-button-hover-text-color:var(--f-button-link-hover-color);--f-button-default-background:var(--f-button-link-default-background);--f-button-hover-background:var(--f-button-link-hover-background);--f-button-focus-background:var(--f-button-link-focus-background);box-shadow:none}.f-button--primary{--f-button-text-color:var(--f-button-primary-default-color);--f-button-default-background:var(--f-button-primary-default-background);--f-button-hover-background:var(--f-button-primary-hover-background);--f-button-focus-background:var(--f-button-primary-focus-background)}.f-button--danger{--f-button-text-color:var(--f-button-danger-default-color);--f-button-default-background:var(--f-button-danger-default-background);--f-button-hover-background:var(--f-button-danger-hover-background);--f-button-focus-background:var(--f-button-danger-focus-background)}.f-button--favorite{--f-button-text-color:var(--f-button-favorite-default-color);--f-button-default-background:var(--f-button-favorite-default-background);--f-button-hover-background:var(--f-button-favorite-hover-background);--f-button-focus-background:var(--f-button-favorite-focus-background)}.f-button--save{--f-button-text-color:var(--f-button-save-default-color);--f-button-default-background:var(--f-button-save-default-background);--f-button-hover-background:var(--f-button-save-hover-background);--f-button-focus-background:var(--f-button-save-focus-background)}.f-button--publish{--f-button-text-color:var(--f-button-publish-default-color);--f-button-default-background:var(--f-button-publish-default-background);--f-button-hover-background:var(--f-button-publish-hover-background);--f-button-focus-background:var(--f-button-publish-focus-background)}.f-button--retire{--f-button-text-color:var(--f-button-retire-default-color);--f-button-default-background:var(--f-button-retire-default-background);--f-button-hover-background:var(--f-button-retire-hover-background);--f-button-focus-background:var(--f-button-retire-focus-background)}.f-button--white{--f-button-text-color:var(--f-button-white-default-color);--f-button-default-background:var(--f-button-white-default-background);--f-button-hover-background:var(--f-button-white-hover-background);--f-button-focus-background:var(--f-button-white-focus-background)}.f-button--unobtrusive.f-button--unobtrusive{--f-button-text-color:var(--icon-button-changing-icon-color);box-shadow:none}.f-button--unobtrusive.f-button--unobtrusive,.f-button--unobtrusive.f-button--unobtrusive:hover,.f-button--unobtrusive.f-button--unobtrusive:active{background:transparent}.f-button--unobtrusive.f-button--unobtrusive:focus-visible{background:transparent}.f-button--icon-only{--f-button-gutter:8px}.f-button--icon-only .f-button__icon-wrapper{padding:0}.f-button--extra-big{--f-button-height:56px;--f-button-gutter:14px;--f-button-icon-size:28px}.f-button--extra-big .f-button__text{--f-button-text-font-size:18px}.f-button--big{--f-button-height:48px;--f-button-gutter:12px;--f-button-icon-size:24px}.f-button--big .f-button__text{--f-button-text-font-size:16px}.f-button--small{--f-button-height:32px;--f-button-gutter:12px;--f-button-icon-size:16px}.f-button--small.f-button--icon-only{--f-button-gutter:8px}.f-button--small .f-button__text{font-weight:400;font-variation-settings:\"wght\" 400;--f-button-text-font-size:14px;line-height:16px}.f-button--tiny{--f-button-height:24px;--f-button-gutter:4px;--f-button-icon-size:16px;--f-button-icon-text-gap:4px}.f-button--tiny .f-button__text{font-weight:400;font-variation-settings:\"wght\" 400;--f-button-text-font-size:12px;line-height:16px}.f-button--extra-tiny{--f-button-height:18px;--f-button-gutter:4px;--f-button-icon-size:10px}.f-button--extra-tiny .f-button__text{--f-button-text-font-size:12px}.f-button--no-outline{box-shadow:none;border-radius:0}.f-button--icon-rotated svg{transform:rotate(180deg)}.f-button--margin-top{margin-top:24px}.f-button--margin-bottom{margin-bottom:24px}.f-button--left-align{justify-content:left}.f-button--invisible-content .f-button__text,.f-button--invisible-content .f-button__icon-wrapper,.f-button--invisible-content::before{visibility:hidden;opacity:0}.f-button--hidden{display:none}.f-button--icon-on-the-right{flex-direction:row-reverse}.f-button--icon-on-the-right .f-button__icon-wrapper{padding:0 0 0 var(--f-button-icon-text-gap)}.f-button--icon-sticks-to-border{padding:0 calc(var(--f-button-gutter) + var(--f-button-icon-size) + var(--f-button-icon-text-gap))}.f-button--icon-sticks-to-border .f-button__text{flex-grow:1;text-align:center}.f-button--icon-sticks-to-border .f-button__icon-wrapper{position:absolute;left:0;padding:0 var(--f-button-gutter)}.f-button--icon-sticks-to-border.f-button--icon-on-the-right .f-button__icon-wrapper{left:initial;right:0}.f-button--spread-content{justify-content:space-between}.f-button--bold .f-button__text{font-weight:700;font-variation-settings:\"wght\" 700}.f-button--selected{background:var(--f-button-focus-background)}.f-button--selected .f-button__text{font-weight:700;font-variation-settings:\"wght\" 700}.f-button--uppercase{text-transform:uppercase}.f-button--fullwidth{width:100%}.f-button--fullheight{--f-button-height:100%}";
5382
5393
  styleInject(css_248z);
5383
5394
 
5384
5395
  var Button = function (_a) {
5385
- var modifier = _a.modifier, children = _a.children, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b, icon = _a.icon, _c = _a.text, text = _c === void 0 ? "" : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.tabIndex, tabIndex = _e === void 0 ? 0 : _e, title = _a.title, tooltip = _a.tooltip, dataId = _a.dataId, dataCy = _a.dataCy;
5386
- return (React__default.createElement("button", { type: "button", className: classnames("f-button", {
5396
+ var key = _a.key, modifier = _a.modifier, children = _a.children, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b, icon = _a.icon, _c = _a.text, text = _c === void 0 ? "" : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.tabIndex, tabIndex = _e === void 0 ? 0 : _e, title = _a.title, tooltip = _a.tooltip, dataId = _a.dataId, dataCy = _a.dataCy;
5397
+ return (React__default.createElement("button", { key: key, type: "button", className: classnames("f-button", {
5387
5398
  "f-button--primary": modifier === null || modifier === void 0 ? void 0 : modifier.includes("primary"),
5388
5399
  "f-button--save": modifier === null || modifier === void 0 ? void 0 : modifier.includes("save"),
5389
5400
  "f-button--publish": modifier === null || modifier === void 0 ? void 0 : modifier.includes("publish"),
@@ -5393,6 +5404,7 @@ var Button = function (_a) {
5393
5404
  "f-button--white": modifier === null || modifier === void 0 ? void 0 : modifier.includes("white"),
5394
5405
  "f-button--unobtrusive": modifier === null || modifier === void 0 ? void 0 : modifier.includes("unobtrusive"),
5395
5406
  "f-button--fullwidth": modifier === null || modifier === void 0 ? void 0 : modifier.includes("fullwidth"),
5407
+ "f-button--fullheight": modifier === null || modifier === void 0 ? void 0 : modifier.includes("fullheight"),
5396
5408
  "f-button--margin-top": modifier === null || modifier === void 0 ? void 0 : modifier.includes("margin_top"),
5397
5409
  "f-button--margin-bottom": modifier === null || modifier === void 0 ? void 0 : modifier.includes("margin_bottom"),
5398
5410
  "f-button--left-align": modifier === null || modifier === void 0 ? void 0 : modifier.includes("left_align"),
@@ -5426,8 +5438,8 @@ var Button = function (_a) {
5426
5438
  };
5427
5439
  // Shorthand component because buttons' tooltips should always be space filling & show up delayed
5428
5440
  var ButtonTooltip = function (_a) {
5429
- var direction = _a.direction, content = _a.content;
5430
- return (React__default.createElement(Tooltip, { content: content, modifier: ["space_filling", "show_delayed"], direction: direction }));
5441
+ var direction = _a.direction, content = _a.content, _b = _a.modifier, modifier = _b === void 0 ? [] : _b;
5442
+ return (React__default.createElement(Tooltip, { content: content, modifier: __spreadArray(["space_filling", "show_delayed"], modifier, true), direction: direction }));
5431
5443
  };
5432
5444
 
5433
5445
  export { AddColumnIcon, AddRowIcon, ArrowDownIcon, ArrowUpIcon, ArticleIcon, AudioFeedIcon, AudioGalleryIcon, AudioIcon, AudioeditorIcon, BoldIcon, Button, ButtonTooltip, CHMapIcon, CaretIcon, ChatIcon, CheckIcon, ChecklistFailedIcon, ChecklistPassedIcon, CheckmarkIcon, CloseIcon, CommentIcon, CopyIcon, CropIcon, DangerIcon, DatawrapperIcon, DeleteColumnIcon, DeleteRowIcon, DropAddIcon, DropDeleteIcon, DropDownIcon, DropUpIcon, EditArticleIcon, EditTickerItemIcon, EdithIcon, EmptyIcon, ErrorIcon, ExclamationMarkIcon, ExternalLinkIcon, FacebookIcon, FavoriteIcon, FavoriteRemovedIcon, FederalVotesIcon, FeedIcon, FocusIcon, ForbiddenIcon, FormIcon, GlobiLogoIcon, HeadingIcon, HtmlEmbedIcon, ImageGalleryIcon, ImageIcon, ImportImageIcon, InstagramIcon, InvisibleIcon, ItalicIcon, LinkIcon, LinkboxIcon, LiveIcon, LivetickerIcon, LockIcon, LongformIcon, MaterialBoxIcon, MegaphonIcon, MeteoMapIcon, ModerateIcon, NewsGraphicIcon, OpinionIcon, OrderedListIcon, PeopleIcon, PlusCircleIcon, PlusIcon, PodcastIcon, PolisMapIcon, PollIcon, PreviewIcon, PublishAndLeaveIcon, PublishIcon, PushIcon, QuestionMarkIcon, QuoteIcon, RawHTMLIcon, RemoveIcon, ReplyIcon, RespondIcon, RetireIcon, RevertIcon, ReviewIcon, ReviewRemovedIcon, RotateBackIcon, RotateForwardIcon, SaveAndLeaveIcon, SaveIcon, SchorschLogoIcon, SearchIcon, SettingsIcon, SortArrowsIcon, SpinnerIcon, SuccessIcon, TVIcon, TableHeadIcon, TableIcon, TableWidthIcon, TeaserIcon, TextboxIcon, ThreadIcon, TimeIcon, Tooltip, TrashcanIcon, TwitterIcon, UnlinkIcon, UnorderedListIcon, UpdateIcon, VideoFeedIcon, VideoGalleryIcon, VideoIcon, VideoeditorIcon, WarningIcon, ZoomInIcon, ZoomOutIcon };