@bonniernews/dn-design-system-web 0.1.0-alpha.2 → 0.1.0-alpha.4

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 (27) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/components/button/README.md +8 -7
  3. package/components/button/button.njk +1 -1
  4. package/components/button/button.scss +1 -1
  5. package/components/hyperlink/README.md +15 -0
  6. package/components/hyperlink/hyperlink.njk +12 -4
  7. package/components/hyperlink/hyperlink.scss +1 -9
  8. package/components/icon-button/README.md +4 -3
  9. package/components/icon-button/icon-button.scss +1 -1
  10. package/foundations/helpers/typography.scss +43 -0
  11. package/foundations/icons/icon-sprite.svg +1 -1
  12. package/foundations/icons/icon.njk +25 -0
  13. package/foundations/icons/svg/add.svg +8 -0
  14. package/foundations/icons/svg/info-filled.svg +8 -0
  15. package/foundations/icons/svg/menu-filled.svg +8 -0
  16. package/foundations/icons/svg/more_horiz.svg +8 -0
  17. package/foundations/icons/svg/search.svg +8 -0
  18. package/foundations/typography/README.md +27 -0
  19. package/foundations/typography/typography-ui.scss +53 -0
  20. package/foundations/typography/typography.njk +15 -0
  21. package/foundations/variables/typography.scss +7 -0
  22. package/package.json +1 -1
  23. package/components/text/text-sans.njk +0 -25
  24. package/components/text/text-sans.scss +0 -1
  25. package/foundations/fonts.scss +0 -82
  26. package/foundations/helpers/fontFamily.scss +0 -11
  27. package/foundations/typography-sans.scss +0 -43
package/CHANGELOG.md CHANGED
@@ -3,6 +3,25 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [0.1.0-alpha.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.3...@bonniernews/dn-design-system-web@0.1.0-alpha.4) (2022-08-08)
7
+
8
+ **Note:** Version bump only for package @bonniernews/dn-design-system-web
9
+
10
+
11
+
12
+
13
+
14
+ # 0.1.0-alpha.3 (2022-08-04)
15
+
16
+
17
+ ### Features
18
+
19
+ * **core:** add info icon ([#157](https://github.com/BonnierNews/dn-design-system/issues/157)) ([fa62ae1](https://github.com/BonnierNews/dn-design-system/commit/fa62ae15901bfe87d5dfcaa0db0d70e107ccd0ed))
20
+
21
+
22
+
23
+
24
+
6
25
  # 0.1.0-alpha.2 (2022-07-01)
7
26
 
8
27
  **Note:** Version bump only for package @bonniernews/dn-design-system-web
package/components/button/README.md CHANGED
@@ -1,22 +1,23 @@
1
- ### @bonniernews/dn-design-system-web/components/button/README.md
1
+ **@bonniernews/dn-design-system-web/components/button/README.md**
2
2
 
3
3
  ----
4
4
 
5
- #### **Some sample documentation for a component**
5
+ # Button
6
6
 
7
- Here we can document **technical details** and for example list parameters not available in storybook but used in the *real world*.
7
+ Parameters available but not used in storybook:
8
8
 
9
9
  ```javascript
10
- /* Additional available parameters */
11
10
  attributes: {
12
11
  "data-test": "12345"
13
12
  },
14
13
  classNames: "my-special-class",
15
- href: "https://designsystem-latest.dn.se/" // if you add href parameter the button will rendered as an <a>
14
+ href: "https://designsystem-latest.dn.se/"
16
15
  type: "submit"
17
16
  ```
18
17
 
19
- We could also link to places where the component is/will be implemented
18
+ ℹ️ If you add href parameter the button will be rendered as an `<a>`
20
19
 
21
- #### 🧐 See it in the wild:
20
+ ----
21
+
22
+ # 🧐 See it in the wild:
22
23
  - [DN Skola prenumeration](https://prenumerera.dn.se/skolor/)
package/components/button/button.njk CHANGED
@@ -41,6 +41,6 @@
41
41
  {% if params.href %}
42
42
  <a href="{{ params.href | default('#', true) }}" class="{{ classes }}" {{ attributes }}>{{ text }}{{- iconSvg | safe if iconSvg -}}</a>
43
43
  {% else %}
44
- <button type="{{ type | default('button') }}" class="{{ classes }}" {{ "disabled" if isDisabled }} {{ attributes }}>{{ text }}{{- iconSvg | safe if iconSvg -}}</button>
44
+ <button type="{{ params.type | default('button') }}" class="{{ classes }}" {{ "disabled" if isDisabled }} {{ attributes }}>{{ text }}{{- iconSvg | safe if iconSvg -}}</button>
45
45
  {% endif %}
46
46
  {% endmacro %}
package/components/button/button.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @use "../../foundations/helpers/spacing.scss" as *;
2
2
  @use "../../foundations/helpers/variable.scss" as *;
3
- @use "../../foundations/helpers/fontFamily.scss" as *;
3
+ @use "../../foundations/helpers/typography.scss" as *;
4
4
  @use "../../foundations/variables/colorsDnLight" as *;
5
5
 
6
6
  // Temporary variables we maybe should handle in a better way
package/components/hyperlink/README.md ADDED
@@ -0,0 +1,15 @@
1
+ **@bonniernews/dn-design-system-web/components/hyperlink/README.md**
2
+
3
+ ----
4
+
5
+ # Hyperlink
6
+
7
+ Parameters available but not used in storybook:
8
+
9
+ ```javascript
10
+ attributes: {
11
+ "data-test": "12345"
12
+ },
13
+ classNames: "my-special-class",
14
+ href: "https://designsystem-latest.dn.se/"
15
+ ```
package/components/hyperlink/hyperlink.njk CHANGED
@@ -1,8 +1,16 @@
1
1
  {% macro Hyperlink(params) %}
2
- {% set componentClassName = "ds-hyperlink" %}
3
- {% set classNamePrefix = componentClassName + "--" %}
4
2
  {% set variant = [] %}
5
3
 
4
+ {% set attributes %}
5
+ {% for attribute, value in params.attributes %}
6
+ {{attribute}}={{value}}
7
+ {% endfor %}
8
+ {% endset %}
9
+
10
+ {% if params.textComponent %}
11
+ {% set variant = (variant.push('ds-t-' + params.textComponent), variant) %}
12
+ {% endif %}
13
+
6
14
  {% if params.textColor %}
7
15
  {% set variant = (variant.push("ds-color-text-" + params.textColor), variant) %}
8
16
  {% endif %}
@@ -11,7 +19,7 @@
11
19
  {% set variant = (variant.push(params.classNames), variant) %}
12
20
  {% endif%}
13
21
 
14
- {% set classes = componentClassName + " " + variant | join(" ") %}
22
+ {% set classes = variant | join(" ") %}
15
23
 
16
- <a href="{{ params.href | default('#', true) }}" class="{{ classes }}">{{ params.text }}</a>
24
+ <a href="{{ params.href | default('#', true) }}" class="{{ classes }}" {{ attributes }}>{{ params.text }}</a>
17
25
  {% endmacro %}
package/components/hyperlink/hyperlink.scss CHANGED
@@ -1,9 +1 @@
1
- @use "../../foundations/typography-sans.scss" as *;
2
-
3
- .ds-hyperlink {
4
- text-decoration: underline;
5
-
6
- &:hover {
7
- text-decoration: none;
8
- }
9
- }
1
+ @use "../../foundations/typography/typography-ui.scss";
package/components/icon-button/README.md CHANGED
@@ -4,13 +4,14 @@
4
4
 
5
5
  # Icon button
6
6
 
7
- Parameters not available in storybook but used in the *real world*.
7
+ Parameters available but not used in storybook:
8
8
 
9
9
  ```javascript
10
- /* Additional available parameters */
11
10
  attributes: {
12
11
  "data-test": "12345"
13
12
  },
14
13
  classNames: "my-special-class",
15
- href: "https://designsystem-latest.dn.se/" // if you add href parameter the button will rendered as an <a>
14
+ href: "https://designsystem-latest.dn.se/"
16
15
  ```
16
+
17
+ ℹ️ If you add href parameter the button will be rendered as an `<a>`
package/components/icon-button/icon-button.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @use "../../foundations/helpers/spacing.scss" as *;
2
2
  @use "../../foundations/helpers/variable.scss" as *;
3
- @use "../../foundations/helpers/fontFamily.scss" as *;
3
+ @use "../../foundations/helpers/typography.scss" as *;
4
4
  @use "../../foundations/variables/colorsDnLight" as *;
5
5
 
6
6
  // Temporary variables we maybe should handle in a better way
package/foundations/helpers/typography.scss ADDED
@@ -0,0 +1,43 @@
1
+ @use 'sass:meta';
2
+ @use 'sass:map';
3
+ @use '../variables/typography.scss' as *;
4
+
5
+ @mixin ds-font-sans() {
6
+ & {
7
+ font-family: DNSans, Helvetica, Arial, sans-serif;
8
+ }
9
+
10
+ @supports (font-variation-settings: normal) {
11
+ & {
12
+ font-family: DNSansVF, Helvetica, Arial, sans-serif;
13
+ }
14
+ }
15
+ }
16
+
17
+ $typographyKeys: (
18
+ fontFamily: 'font-family',
19
+ fontSize: 'font-size',
20
+ fontWeight: 'font-weight',
21
+ lineHeight: 'line-height',
22
+ letterSpacing: 'letter-spacing',
23
+ textDecorationLine: 'text-decoration-line',
24
+ color: 'color'
25
+ );
26
+
27
+ @mixin ds-typography($component, $property: false) {
28
+ $tmpMap: map-get($typography, $component);
29
+
30
+ @each $key in map-keys($tmpMap) {
31
+ @if $key == 'fontFamily' {
32
+ @if map-get($tmpMap, $key) == 'DN Sans 10' {
33
+ @include ds-font-sans();
34
+ }
35
+ } @else if index(map-keys($typographyKeys), $key) {
36
+ $unit: '';
37
+ @if index((fontSize, lineHeight, letterSpacing), $key) {
38
+ $unit: 'px';
39
+ }
40
+ #{map-get($typographyKeys, $key)}: #{map-get($tmpMap, $key)}#{$unit};
41
+ }
42
+ }
43
+ }
package/foundations/icons/icon-sprite.svg CHANGED
@@ -1,2 +1,2 @@
1
1
  <!-- This is an auto-generated file -->
2
- <svg style="display:block; height:0; width:0; visibility:hidden;"><defs/><symbol id="arrow_back" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="m12 20-8-8 8-8 1.425 1.4-5.6 5.6H20v2H7.825l5.6 5.6L12 20Z" fill="#1C1B1F"/></g></symbol><symbol id="arrow_forward" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="m12 20-1.425-1.4 5.6-5.6H4v-2h12.175l-5.6-5.6L12 4l8 8-8 8Z" fill="#1C1B1F"/></g></symbol><symbol id="check" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="-1" width="25" height="25"><path fill="#D9D9D9" d="M.241-.168h24v24h-24z"/></mask><g mask="url(#a)"><path d="m9.791 17.832-5.7-5.7 1.425-1.425 4.275 4.275 9.175-9.175 1.425 1.425-10.6 10.6Z" fill="#1C1B1F"/></g></symbol><symbol id="delete" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M7 21c-.55 0-1.02-.196-1.412-.587A1.927 1.927 0 0 1 5 19V6H4V4h5V3h6v1h5v2h-1v13c0 .55-.196 1.021-.587 1.413A1.928 1.928 0 0 1 17 21H7ZM17 6H7v13h10V6ZM9 17h2V8H9v9Zm4 0h2V8h-2v9Z" fill="#1C1B1F"/></g></symbol><symbol id="favorite-filled" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="m12 21.35-1.45-1.3c-2.617-2.333-4.696-4.363-6.238-6.088C2.771 12.237 2 10.417 2 8.5c0-1.567.525-2.875 1.575-3.925C4.625 3.525 5.933 3 7.5 3a5.72 5.72 0 0 1 2.5.562c.783.375 1.45.888 2 1.538a5.962 5.962 0 0 1 2-1.538A5.72 5.72 0 0 1 16.5 3c1.567 0 2.875.525 3.925 1.575C21.475 5.625 22 6.933 22 8.5c0 1.917-.77 3.737-2.312 5.462-1.542 1.725-3.621 3.755-6.238 6.088L12 21.35Z" fill="#1C1B1F"/></g></symbol><symbol id="favorite" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="m12 21-1.45-1.3c-2.617-2.333-4.696-4.363-6.238-6.088C2.771 11.887 2 10.067 2 8.15c0-1.567.525-2.875 1.575-3.925C4.625 3.175 5.933 2.65 7.5 2.65c.883 0 1.717.187 2.5.562.783.375 1.45.888 2 1.538a5.962 5.962 0 0 1 2-1.538 5.721 5.721 0 0 1 2.5-.562c1.567 0 2.875.525 3.925 1.575C21.475 5.275 22 6.583 22 8.15c0 1.917-.77 3.737-2.312 5.462-1.542 1.725-3.621 3.755-6.238 6.088L12 21Zm0-2.7c2.383-2.167 4.313-4.033 5.788-5.6C19.263 11.133 20 9.617 20 8.15c0-1-.333-1.833-1-2.5s-1.5-1-2.5-1c-.783 0-1.508.22-2.175.662C13.658 5.754 13.2 6.317 12.95 7h-1.9c-.25-.683-.708-1.246-1.375-1.688A3.862 3.862 0 0 0 7.5 4.65c-1 0-1.833.333-2.5 1s-1 1.5-1 2.5c0 1.467.738 2.983 2.213 4.55 1.475 1.567 3.404 3.433 5.787 5.6Z" fill="#1C1B1F"/></g></symbol><symbol id="headphones-filled" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M9 21H5c-.55 0-1.021-.196-1.413-.587A1.928 1.928 0 0 1 3 19v-7c0-1.25.237-2.421.712-3.513a9.159 9.159 0 0 1 1.926-2.85 9.152 9.152 0 0 1 2.85-1.925A8.709 8.709 0 0 1 12 3c1.25 0 2.421.237 3.513.712a9.168 9.168 0 0 1 2.85 1.925 9.167 9.167 0 0 1 1.925 2.85A8.715 8.715 0 0 1 21 12v7c0 .55-.196 1.021-.587 1.413A1.928 1.928 0 0 1 19 21h-4v-8h4v-1c0-1.95-.68-3.604-2.038-4.963C15.604 5.679 13.95 5 12 5c-1.95 0-3.604.679-4.962 2.037C5.679 8.396 5 10.05 5 12v1h4v8Z" fill="#1C1B1F"/></g></symbol><symbol id="headphones" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M9 21H5c-.55 0-1.021-.196-1.413-.587A1.928 1.928 0 0 1 3 19v-7c0-1.25.237-2.421.712-3.513a9.159 9.159 0 0 1 1.926-2.85 9.152 9.152 0 0 1 2.85-1.925A8.709 8.709 0 0 1 12 3c1.25 0 2.421.237 3.513.712a9.168 9.168 0 0 1 2.85 1.925 9.167 9.167 0 0 1 1.925 2.85A8.715 8.715 0 0 1 21 12v7c0 .55-.196 1.021-.587 1.413A1.928 1.928 0 0 1 19 21h-4v-8h4v-1c0-1.95-.68-3.604-2.038-4.963C15.604 5.679 13.95 5 12 5c-1.95 0-3.604.679-4.962 2.037C5.679 8.396 5 10.05 5 12v1h4v8Zm-2-6H5v4h2v-4Zm10 0v4h2v-4h-2Z" fill="#1C1B1F"/></g></symbol><symbol id="home-filled" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M4 21V9l8-6 8 6v12h-6v-7h-4v7H4Z" fill="#1C1B1F"/></g></symbol><symbol id="home" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M4 21V9l8-6 8 6v12h-6v-7h-4v7H4Zm2-2h2v-7h8v7h2v-9l-6-4.5L6 10v9Z" fill="#1C1B1F"/></g></symbol><symbol id="manage_accounts-filled" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M10 12c-1.1 0-2.042-.392-2.825-1.175C6.392 10.042 6 9.1 6 8s.392-2.042 1.175-2.825C7.958 4.392 8.9 4 10 4s2.042.392 2.825 1.175C13.608 5.958 14 6.9 14 8s-.392 2.042-1.175 2.825C12.042 11.608 11.1 12 10 12Zm-8 8v-2.8c0-.567.142-1.088.425-1.563A2.795 2.795 0 0 1 3.6 14.55c1-.5 2.038-.883 3.113-1.15 1.075-.267 2.17-.4 3.287-.4h.338c.108 0 .212.017.312.05a7.613 7.613 0 0 0-.588 3.563A6.86 6.86 0 0 0 11.25 20H2Zm14 1-.3-1.5c-.2-.083-.388-.17-.563-.262a4.42 4.42 0 0 1-.537-.338l-1.45.45-1-1.7 1.15-1a4.62 4.62 0 0 1-.05-.65c0-.2.017-.417.05-.65l-1.15-1 1-1.7 1.45.45a4.42 4.42 0 0 1 .537-.338c.175-.091.363-.179.563-.262L16 11h2l.3 1.5c.2.083.388.175.563.275.175.1.354.225.537.375l1.45-.5 1 1.75-1.15 1c.033.2.05.408.05.625a3.8 3.8 0 0 1-.05.625l1.15 1-1 1.7-1.45-.45a4.42 4.42 0 0 1-.537.338 7.272 7.272 0 0 1-.563.262L18 21h-2Zm1-3c.55 0 1.021-.196 1.413-.587.391-.392.587-.863.587-1.413s-.196-1.021-.587-1.413A1.928 1.928 0 0 0 17 14c-.55 0-1.02.196-1.412.587A1.927 1.927 0 0 0 15 16c0 .55.196 1.021.588 1.413.391.391.862.587 1.412.587Z" fill="#1C1B1F"/></g></symbol><symbol id="manage_accounts" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M10 12c-1.1 0-2.042-.392-2.825-1.175C6.392 10.042 6 9.1 6 8s.392-2.042 1.175-2.825C7.958 4.392 8.9 4 10 4s2.042.392 2.825 1.175C13.608 5.958 14 6.9 14 8s-.392 2.042-1.175 2.825C12.042 11.608 11.1 12 10 12Zm-8 8v-2.8c0-.55.142-1.067.425-1.55.283-.483.675-.85 1.175-1.1.85-.433 1.808-.8 2.875-1.1C7.542 13.15 8.717 13 10 13h.35c.1 0 .2.017.3.05-.133.3-.246.613-.338.938A7.82 7.82 0 0 0 10.1 15H10c-1.183 0-2.246.15-3.188.45-.941.3-1.712.6-2.312.9a.97.97 0 0 0-.5.85v.8h6.3c.1.35.233.696.4 1.038.167.341.35.662.55.962H2Zm14 1-.3-1.5c-.2-.083-.388-.17-.563-.262a4.42 4.42 0 0 1-.537-.338l-1.45.45-1-1.7 1.15-1a4.62 4.62 0 0 1-.05-.65c0-.2.017-.417.05-.65l-1.15-1 1-1.7 1.45.45a4.42 4.42 0 0 1 .537-.338c.175-.091.363-.179.563-.262L16 11h2l.3 1.5c.2.083.388.175.563.275.175.1.354.225.537.375l1.45-.5 1 1.75-1.15 1c.033.2.05.408.05.625a3.8 3.8 0 0 1-.05.625l1.15 1-1 1.7-1.45-.45a4.42 4.42 0 0 1-.537.338 7.272 7.272 0 0 1-.563.262L18 21h-2Zm1-3c.55 0 1.021-.196 1.413-.587.391-.392.587-.863.587-1.413s-.196-1.021-.587-1.413A1.928 1.928 0 0 0 17 14c-.55 0-1.02.196-1.412.587A1.927 1.927 0 0 0 15 16c0 .55.196 1.021.588 1.413.391.391.862.587 1.412.587Zm-7-8c.55 0 1.021-.196 1.413-.588C11.804 9.021 12 8.55 12 8c0-.55-.196-1.02-.587-1.412A1.927 1.927 0 0 0 10 6c-.55 0-1.02.196-1.412.588A1.923 1.923 0 0 0 8 8c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Z" fill="#1C1B1F"/></g></symbol><symbol id="menu" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M3 18v-2h18v2H3Zm0-5v-2h18v2H3Zm0-5V6h18v2H3Z" fill="#1C1B1F"/></g></symbol><symbol id="notifications" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M4 19v-2h2v-7c0-1.383.417-2.613 1.25-3.688.833-1.075 1.917-1.779 3.25-2.112v-.7c0-.417.146-.77.438-1.062A1.444 1.444 0 0 1 12 2c.417 0 .77.146 1.062.438.292.291.438.645.438 1.062v.7c1.333.333 2.417 1.037 3.25 2.112C17.583 7.387 18 8.617 18 10v7h2v2H4Zm8 3c-.55 0-1.02-.196-1.412-.587A1.927 1.927 0 0 1 10 20h4c0 .55-.196 1.021-.587 1.413A1.928 1.928 0 0 1 12 22Zm-4-5h8v-7c0-1.1-.392-2.042-1.175-2.825C14.042 6.392 13.1 6 12 6s-2.042.392-2.825 1.175C8.392 7.958 8 8.9 8 10v7Z" fill="#1C1B1F"/></g></symbol><symbol id="visibility_off" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="m16.1 13.3-1.45-1.45c.15-.783-.075-1.517-.675-2.2-.6-.683-1.375-.95-2.325-.8L10.2 7.4c.283-.133.57-.233.862-.3.292-.067.605-.1.938-.1 1.25 0 2.313.437 3.188 1.312S16.5 10.25 16.5 11.5c0 .333-.033.646-.1.938a4.25 4.25 0 0 1-.3.862Zm3.2 3.15-1.45-1.4a10.957 10.957 0 0 0 1.688-1.588A8.9 8.9 0 0 0 20.8 11.5c-.833-1.683-2.03-3.021-3.588-4.013C15.654 6.496 13.917 6 12 6c-.483 0-.958.033-1.425.1a9.622 9.622 0 0 0-1.375.3L7.65 4.85a11.106 11.106 0 0 1 2.1-.638A11.608 11.608 0 0 1 12 4c2.517 0 4.758.696 6.725 2.087C20.692 7.479 22.117 9.283 23 11.5a11.714 11.714 0 0 1-1.512 2.738A11.025 11.025 0 0 1 19.3 16.45Zm.5 6.15-4.2-4.15c-.583.183-1.17.321-1.762.413-.592.091-1.205.137-1.838.137-2.517 0-4.758-.696-6.725-2.087C3.308 15.521 1.883 13.717 1 11.5c.35-.883.792-1.704 1.325-2.463A11.522 11.522 0 0 1 4.15 7L1.4 4.2l1.4-1.4 18.4 18.4-1.4 1.4ZM5.55 8.4c-.483.433-.925.908-1.325 1.425A9.016 9.016 0 0 0 3.2 11.5c.833 1.683 2.029 3.02 3.587 4.012C8.346 16.504 10.083 17 12 17c.333 0 .658-.02.975-.062.317-.042.642-.088.975-.138l-.9-.95c-.183.05-.358.087-.525.112A3.497 3.497 0 0 1 12 16c-1.25 0-2.313-.437-3.188-1.312S7.5 12.75 7.5 11.5c0-.183.012-.358.037-.525a4.66 4.66 0 0 1 .113-.525L5.55 8.4Z" fill="#1C1B1F"/></g></symbol><symbol id="visibility" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M12 16c1.25 0 2.313-.437 3.188-1.312S16.5 12.75 16.5 11.5c0-1.25-.437-2.313-1.312-3.188S13.25 7 12 7c-1.25 0-2.313.437-3.188 1.312S7.5 10.25 7.5 11.5c0 1.25.437 2.313 1.312 3.188S10.75 16 12 16Zm0-1.8c-.75 0-1.387-.263-1.912-.788A2.601 2.601 0 0 1 9.3 11.5c0-.75.263-1.388.788-1.913A2.603 2.603 0 0 1 12 8.8c.75 0 1.388.262 1.913.787.525.525.787 1.163.787 1.913s-.262 1.387-.787 1.912A2.605 2.605 0 0 1 12 14.2Zm0 4.8c-2.433 0-4.65-.68-6.65-2.038-2-1.358-3.45-3.179-4.35-5.462.9-2.283 2.35-4.104 4.35-5.463C7.35 4.679 9.567 4 12 4c2.433 0 4.65.679 6.65 2.037 2 1.359 3.45 3.18 4.35 5.463-.9 2.283-2.35 4.104-4.35 5.462C16.65 18.321 14.433 19 12 19Zm0-2a9.545 9.545 0 0 0 5.188-1.488A9.77 9.77 0 0 0 20.8 11.5a9.777 9.777 0 0 0-3.612-4.013A9.55 9.55 0 0 0 12 6a9.55 9.55 0 0 0-5.188 1.487A9.777 9.777 0 0 0 3.2 11.5a9.77 9.77 0 0 0 3.612 4.012A9.545 9.545 0 0 0 12 17Z" fill="#1C1B1F"/></g></symbol></svg>
2
+ <svg style="display:block; height:0; width:0; visibility:hidden;"><defs/><symbol id="add" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="25" height="25"><path fill="#D9D9D9" d="M.098.408h24v24h-24z"/></mask><g mask="url(#a)"><path d="M11.098 19.407v-6h-6v-2h6v-6h2v6h6v2h-6v6h-2Z" fill="#1C1B1F"/></g></symbol><symbol id="arrow_back" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="m12 20-8-8 8-8 1.425 1.4-5.6 5.6H20v2H7.825l5.6 5.6L12 20Z" fill="#1C1B1F"/></g></symbol><symbol id="arrow_forward" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="m12 20-1.425-1.4 5.6-5.6H4v-2h12.175l-5.6-5.6L12 4l8 8-8 8Z" fill="#1C1B1F"/></g></symbol><symbol id="check" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="-1" width="25" height="25"><path fill="#D9D9D9" d="M.241-.168h24v24h-24z"/></mask><g mask="url(#a)"><path d="m9.791 17.832-5.7-5.7 1.425-1.425 4.275 4.275 9.175-9.175 1.425 1.425-10.6 10.6Z" fill="#1C1B1F"/></g></symbol><symbol id="delete" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M7 21c-.55 0-1.02-.196-1.412-.587A1.927 1.927 0 0 1 5 19V6H4V4h5V3h6v1h5v2h-1v13c0 .55-.196 1.021-.587 1.413A1.928 1.928 0 0 1 17 21H7ZM17 6H7v13h10V6ZM9 17h2V8H9v9Zm4 0h2V8h-2v9Z" fill="#1C1B1F"/></g></symbol><symbol id="favorite-filled" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="m12 21.35-1.45-1.3c-2.617-2.333-4.696-4.363-6.238-6.088C2.771 12.237 2 10.417 2 8.5c0-1.567.525-2.875 1.575-3.925C4.625 3.525 5.933 3 7.5 3a5.72 5.72 0 0 1 2.5.562c.783.375 1.45.888 2 1.538a5.962 5.962 0 0 1 2-1.538A5.72 5.72 0 0 1 16.5 3c1.567 0 2.875.525 3.925 1.575C21.475 5.625 22 6.933 22 8.5c0 1.917-.77 3.737-2.312 5.462-1.542 1.725-3.621 3.755-6.238 6.088L12 21.35Z" fill="#1C1B1F"/></g></symbol><symbol id="favorite" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="m12 21-1.45-1.3c-2.617-2.333-4.696-4.363-6.238-6.088C2.771 11.887 2 10.067 2 8.15c0-1.567.525-2.875 1.575-3.925C4.625 3.175 5.933 2.65 7.5 2.65c.883 0 1.717.187 2.5.562.783.375 1.45.888 2 1.538a5.962 5.962 0 0 1 2-1.538 5.721 5.721 0 0 1 2.5-.562c1.567 0 2.875.525 3.925 1.575C21.475 5.275 22 6.583 22 8.15c0 1.917-.77 3.737-2.312 5.462-1.542 1.725-3.621 3.755-6.238 6.088L12 21Zm0-2.7c2.383-2.167 4.313-4.033 5.788-5.6C19.263 11.133 20 9.617 20 8.15c0-1-.333-1.833-1-2.5s-1.5-1-2.5-1c-.783 0-1.508.22-2.175.662C13.658 5.754 13.2 6.317 12.95 7h-1.9c-.25-.683-.708-1.246-1.375-1.688A3.862 3.862 0 0 0 7.5 4.65c-1 0-1.833.333-2.5 1s-1 1.5-1 2.5c0 1.467.738 2.983 2.213 4.55 1.475 1.567 3.404 3.433 5.787 5.6Z" fill="#1C1B1F"/></g></symbol><symbol id="headphones-filled" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M9 21H5c-.55 0-1.021-.196-1.413-.587A1.928 1.928 0 0 1 3 19v-7c0-1.25.237-2.421.712-3.513a9.159 9.159 0 0 1 1.926-2.85 9.152 9.152 0 0 1 2.85-1.925A8.709 8.709 0 0 1 12 3c1.25 0 2.421.237 3.513.712a9.168 9.168 0 0 1 2.85 1.925 9.167 9.167 0 0 1 1.925 2.85A8.715 8.715 0 0 1 21 12v7c0 .55-.196 1.021-.587 1.413A1.928 1.928 0 0 1 19 21h-4v-8h4v-1c0-1.95-.68-3.604-2.038-4.963C15.604 5.679 13.95 5 12 5c-1.95 0-3.604.679-4.962 2.037C5.679 8.396 5 10.05 5 12v1h4v8Z" fill="#1C1B1F"/></g></symbol><symbol id="headphones" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M9 21H5c-.55 0-1.021-.196-1.413-.587A1.928 1.928 0 0 1 3 19v-7c0-1.25.237-2.421.712-3.513a9.159 9.159 0 0 1 1.926-2.85 9.152 9.152 0 0 1 2.85-1.925A8.709 8.709 0 0 1 12 3c1.25 0 2.421.237 3.513.712a9.168 9.168 0 0 1 2.85 1.925 9.167 9.167 0 0 1 1.925 2.85A8.715 8.715 0 0 1 21 12v7c0 .55-.196 1.021-.587 1.413A1.928 1.928 0 0 1 19 21h-4v-8h4v-1c0-1.95-.68-3.604-2.038-4.963C15.604 5.679 13.95 5 12 5c-1.95 0-3.604.679-4.962 2.037C5.679 8.396 5 10.05 5 12v1h4v8Zm-2-6H5v4h2v-4Zm10 0v4h2v-4h-2Z" fill="#1C1B1F"/></g></symbol><symbol id="home-filled" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M4 21V9l8-6 8 6v12h-6v-7h-4v7H4Z" fill="#1C1B1F"/></g></symbol><symbol id="home" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M4 21V9l8-6 8 6v12h-6v-7h-4v7H4Zm2-2h2v-7h8v7h2v-9l-6-4.5L6 10v9Z" fill="#1C1B1F"/></g></symbol><symbol id="info-filled" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="-1" width="24" height="24"><path fill="#D9D9D9" d="M.241-.168h24v24h-24z"/></mask><g mask="url(#a)"><path d="M13 9h-2V7h2v2Zm0 8h-2v-6h2v6ZM12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Z" fill="#1B1C1F"/></g></symbol><symbol id="manage_accounts-filled" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M10 12c-1.1 0-2.042-.392-2.825-1.175C6.392 10.042 6 9.1 6 8s.392-2.042 1.175-2.825C7.958 4.392 8.9 4 10 4s2.042.392 2.825 1.175C13.608 5.958 14 6.9 14 8s-.392 2.042-1.175 2.825C12.042 11.608 11.1 12 10 12Zm-8 8v-2.8c0-.567.142-1.088.425-1.563A2.795 2.795 0 0 1 3.6 14.55c1-.5 2.038-.883 3.113-1.15 1.075-.267 2.17-.4 3.287-.4h.338c.108 0 .212.017.312.05a7.613 7.613 0 0 0-.588 3.563A6.86 6.86 0 0 0 11.25 20H2Zm14 1-.3-1.5c-.2-.083-.388-.17-.563-.262a4.42 4.42 0 0 1-.537-.338l-1.45.45-1-1.7 1.15-1a4.62 4.62 0 0 1-.05-.65c0-.2.017-.417.05-.65l-1.15-1 1-1.7 1.45.45a4.42 4.42 0 0 1 .537-.338c.175-.091.363-.179.563-.262L16 11h2l.3 1.5c.2.083.388.175.563.275.175.1.354.225.537.375l1.45-.5 1 1.75-1.15 1c.033.2.05.408.05.625a3.8 3.8 0 0 1-.05.625l1.15 1-1 1.7-1.45-.45a4.42 4.42 0 0 1-.537.338 7.272 7.272 0 0 1-.563.262L18 21h-2Zm1-3c.55 0 1.021-.196 1.413-.587.391-.392.587-.863.587-1.413s-.196-1.021-.587-1.413A1.928 1.928 0 0 0 17 14c-.55 0-1.02.196-1.412.587A1.927 1.927 0 0 0 15 16c0 .55.196 1.021.588 1.413.391.391.862.587 1.412.587Z" fill="#1C1B1F"/></g></symbol><symbol id="manage_accounts" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M10 12c-1.1 0-2.042-.392-2.825-1.175C6.392 10.042 6 9.1 6 8s.392-2.042 1.175-2.825C7.958 4.392 8.9 4 10 4s2.042.392 2.825 1.175C13.608 5.958 14 6.9 14 8s-.392 2.042-1.175 2.825C12.042 11.608 11.1 12 10 12Zm-8 8v-2.8c0-.55.142-1.067.425-1.55.283-.483.675-.85 1.175-1.1.85-.433 1.808-.8 2.875-1.1C7.542 13.15 8.717 13 10 13h.35c.1 0 .2.017.3.05-.133.3-.246.613-.338.938A7.82 7.82 0 0 0 10.1 15H10c-1.183 0-2.246.15-3.188.45-.941.3-1.712.6-2.312.9a.97.97 0 0 0-.5.85v.8h6.3c.1.35.233.696.4 1.038.167.341.35.662.55.962H2Zm14 1-.3-1.5c-.2-.083-.388-.17-.563-.262a4.42 4.42 0 0 1-.537-.338l-1.45.45-1-1.7 1.15-1a4.62 4.62 0 0 1-.05-.65c0-.2.017-.417.05-.65l-1.15-1 1-1.7 1.45.45a4.42 4.42 0 0 1 .537-.338c.175-.091.363-.179.563-.262L16 11h2l.3 1.5c.2.083.388.175.563.275.175.1.354.225.537.375l1.45-.5 1 1.75-1.15 1c.033.2.05.408.05.625a3.8 3.8 0 0 1-.05.625l1.15 1-1 1.7-1.45-.45a4.42 4.42 0 0 1-.537.338 7.272 7.272 0 0 1-.563.262L18 21h-2Zm1-3c.55 0 1.021-.196 1.413-.587.391-.392.587-.863.587-1.413s-.196-1.021-.587-1.413A1.928 1.928 0 0 0 17 14c-.55 0-1.02.196-1.412.587A1.927 1.927 0 0 0 15 16c0 .55.196 1.021.588 1.413.391.391.862.587 1.412.587Zm-7-8c.55 0 1.021-.196 1.413-.588C11.804 9.021 12 8.55 12 8c0-.55-.196-1.02-.587-1.412A1.927 1.927 0 0 0 10 6c-.55 0-1.02.196-1.412.588A1.923 1.923 0 0 0 8 8c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Z" fill="#1C1B1F"/></g></symbol><symbol id="menu-filled" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M3 18v-2h18v2H3Zm0-5v-2h18v2H3Zm0-5V6h18v2H3Z" fill="#1C1B1F"/></g></symbol><symbol id="menu" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M3 18v-2h18v2H3Zm0-5v-2h18v2H3Zm0-5V6h18v2H3Z" fill="#1C1B1F"/></g></symbol><symbol id="more_horiz" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M6 14c-.55 0-1.02-.196-1.412-.588A1.923 1.923 0 0 1 4 12c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 6 10c.55 0 1.02.196 1.412.587.392.392.588.863.588 1.413s-.196 1.02-.588 1.412A1.923 1.923 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.923 1.923 0 0 1 10 12c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 12 10c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413s-.196 1.02-.587 1.412A1.927 1.927 0 0 1 12 14Zm6 0c-.55 0-1.021-.196-1.413-.588A1.925 1.925 0 0 1 16 12c0-.55.196-1.021.587-1.413A1.928 1.928 0 0 1 18 10c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413s-.196 1.02-.587 1.412A1.927 1.927 0 0 1 18 14Z" fill="#1C1B1F"/></g></symbol><symbol id="notifications" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M4 19v-2h2v-7c0-1.383.417-2.613 1.25-3.688.833-1.075 1.917-1.779 3.25-2.112v-.7c0-.417.146-.77.438-1.062A1.444 1.444 0 0 1 12 2c.417 0 .77.146 1.062.438.292.291.438.645.438 1.062v.7c1.333.333 2.417 1.037 3.25 2.112C17.583 7.387 18 8.617 18 10v7h2v2H4Zm8 3c-.55 0-1.02-.196-1.412-.587A1.927 1.927 0 0 1 10 20h4c0 .55-.196 1.021-.587 1.413A1.928 1.928 0 0 1 12 22Zm-4-5h8v-7c0-1.1-.392-2.042-1.175-2.825C14.042 6.392 13.1 6 12 6s-2.042.392-2.825 1.175C8.392 7.958 8 8.9 8 10v7Z" fill="#1C1B1F"/></g></symbol><symbol id="search" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="m19.6 21-6.3-6.3A6.096 6.096 0 0 1 9.5 16c-1.817 0-3.354-.629-4.612-1.887C3.629 12.854 3 11.317 3 9.5c0-1.817.63-3.354 1.888-4.613C6.146 3.629 7.683 3 9.5 3c1.817 0 3.354.629 4.613 1.887C15.371 6.146 16 7.683 16 9.5a6.096 6.096 0 0 1-1.3 3.8l6.3 6.3-1.4 1.4ZM9.5 14c1.25 0 2.313-.437 3.188-1.312S14 10.75 14 9.5c0-1.25-.437-2.313-1.312-3.188S10.75 5 9.5 5c-1.25 0-2.313.437-3.188 1.312S5 8.25 5 9.5c0 1.25.437 2.313 1.312 3.188S8.25 14 9.5 14Z" fill="#1C1B1F"/></g></symbol><symbol id="visibility_off" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="m16.1 13.3-1.45-1.45c.15-.783-.075-1.517-.675-2.2-.6-.683-1.375-.95-2.325-.8L10.2 7.4c.283-.133.57-.233.862-.3.292-.067.605-.1.938-.1 1.25 0 2.313.437 3.188 1.312S16.5 10.25 16.5 11.5c0 .333-.033.646-.1.938a4.25 4.25 0 0 1-.3.862Zm3.2 3.15-1.45-1.4a10.957 10.957 0 0 0 1.688-1.588A8.9 8.9 0 0 0 20.8 11.5c-.833-1.683-2.03-3.021-3.588-4.013C15.654 6.496 13.917 6 12 6c-.483 0-.958.033-1.425.1a9.622 9.622 0 0 0-1.375.3L7.65 4.85a11.106 11.106 0 0 1 2.1-.638A11.608 11.608 0 0 1 12 4c2.517 0 4.758.696 6.725 2.087C20.692 7.479 22.117 9.283 23 11.5a11.714 11.714 0 0 1-1.512 2.738A11.025 11.025 0 0 1 19.3 16.45Zm.5 6.15-4.2-4.15c-.583.183-1.17.321-1.762.413-.592.091-1.205.137-1.838.137-2.517 0-4.758-.696-6.725-2.087C3.308 15.521 1.883 13.717 1 11.5c.35-.883.792-1.704 1.325-2.463A11.522 11.522 0 0 1 4.15 7L1.4 4.2l1.4-1.4 18.4 18.4-1.4 1.4ZM5.55 8.4c-.483.433-.925.908-1.325 1.425A9.016 9.016 0 0 0 3.2 11.5c.833 1.683 2.029 3.02 3.587 4.012C8.346 16.504 10.083 17 12 17c.333 0 .658-.02.975-.062.317-.042.642-.088.975-.138l-.9-.95c-.183.05-.358.087-.525.112A3.497 3.497 0 0 1 12 16c-1.25 0-2.313-.437-3.188-1.312S7.5 12.75 7.5 11.5c0-.183.012-.358.037-.525a4.66 4.66 0 0 1 .113-.525L5.55 8.4Z" fill="#1C1B1F"/></g></symbol><symbol id="visibility" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M12 16c1.25 0 2.313-.437 3.188-1.312S16.5 12.75 16.5 11.5c0-1.25-.437-2.313-1.312-3.188S13.25 7 12 7c-1.25 0-2.313.437-3.188 1.312S7.5 10.25 7.5 11.5c0 1.25.437 2.313 1.312 3.188S10.75 16 12 16Zm0-1.8c-.75 0-1.387-.263-1.912-.788A2.601 2.601 0 0 1 9.3 11.5c0-.75.263-1.388.788-1.913A2.603 2.603 0 0 1 12 8.8c.75 0 1.388.262 1.913.787.525.525.787 1.163.787 1.913s-.262 1.387-.787 1.912A2.605 2.605 0 0 1 12 14.2Zm0 4.8c-2.433 0-4.65-.68-6.65-2.038-2-1.358-3.45-3.179-4.35-5.462.9-2.283 2.35-4.104 4.35-5.463C7.35 4.679 9.567 4 12 4c2.433 0 4.65.679 6.65 2.037 2 1.359 3.45 3.18 4.35 5.463-.9 2.283-2.35 4.104-4.35 5.462C16.65 18.321 14.433 19 12 19Zm0-2a9.545 9.545 0 0 0 5.188-1.488A9.77 9.77 0 0 0 20.8 11.5a9.777 9.777 0 0 0-3.612-4.013A9.55 9.55 0 0 0 12 6a9.55 9.55 0 0 0-5.188 1.487A9.777 9.777 0 0 0 3.2 11.5a9.77 9.77 0 0 0 3.612 4.012A9.545 9.545 0 0 0 12 17Z" fill="#1C1B1F"/></g></symbol></svg>
package/foundations/icons/icon.njk CHANGED
@@ -1,5 +1,10 @@
1
1
  {# This is an auto-generated file #}
2
2
  {% macro Icon(params) %}
3
+ {% if params.icon == "add" %}
4
+ <i class="ds-icon ds-icon--add">
5
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4489_1880" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="25" height="25"><rect x="0.0975037" y="0.407532" width="24" height="24"/></mask><g mask="url(#mask0_4489_1880)"><path d="M11.0975 19.4075V13.4075H5.0975V11.4075H11.0975V5.40753H13.0975V11.4075H19.0975V13.4075H13.0975V19.4075H11.0975Z"/></g></svg>
6
+ </i>
7
+ {% endif %}
3
8
  {% if params.icon == "arrow_back" %}
4
9
  <i class="ds-icon ds-icon--arrow_back">
5
10
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1443" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1443)"><path d="M12 20L4 12L12 4L13.425 5.4L7.825 11H20V13H7.825L13.425 18.6L12 20Z"/></g></svg>
@@ -50,6 +55,11 @@
50
55
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1448" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1448)"><path d="M4 21V9L12 3L20 9V21H14V14H10V21H4ZM6 19H8V12H16V19H18V10L12 5.5L6 10V19Z"/></g></svg>
51
56
  </i>
52
57
  {% endif %}
58
+ {% if params.icon == "info-filled" %}
59
+ <i class="ds-icon ds-icon--info-filled">
60
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4645_1176" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="-1" width="24" height="24"><rect x="0.241394" y="-0.168091" width="24" height="24"/></mask><g mask="url(#mask0_4645_1176)"><path d="M13 9H11V7H13V9ZM13 17H11V11H13V17ZM12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2V2Z"/></g></svg>
61
+ </i>
62
+ {% endif %}
53
63
  {% if params.icon == "manage_accounts-filled" %}
54
64
  <i class="ds-icon ds-icon--manage_accounts-filled">
55
65
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1441" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1441)"><path d="M10 12C8.9 12 7.95833 11.6083 7.175 10.825C6.39167 10.0417 6 9.1 6 8C6 6.9 6.39167 5.95833 7.175 5.175C7.95833 4.39167 8.9 4 10 4C11.1 4 12.0417 4.39167 12.825 5.175C13.6083 5.95833 14 6.9 14 8C14 9.1 13.6083 10.0417 12.825 10.825C12.0417 11.6083 11.1 12 10 12ZM2 20V17.2C2 16.6333 2.14167 16.1123 2.425 15.637C2.70833 15.1623 3.1 14.8 3.6 14.55C4.6 14.05 5.63767 13.6667 6.713 13.4C7.78767 13.1333 8.88333 13 10 13C10.1167 13 10.2293 13 10.338 13C10.446 13 10.55 13.0167 10.65 13.05C10.1667 14.2 9.97067 15.3877 10.062 16.613C10.154 17.8377 10.55 18.9667 11.25 20H2ZM16 21L15.7 19.5C15.5 19.4167 15.3123 19.3293 15.137 19.238C14.9623 19.146 14.7833 19.0333 14.6 18.9L13.15 19.35L12.15 17.65L13.3 16.65C13.2667 16.4167 13.25 16.2 13.25 16C13.25 15.8 13.2667 15.5833 13.3 15.35L12.15 14.35L13.15 12.65L14.6 13.1C14.7833 12.9667 14.9623 12.854 15.137 12.762C15.3123 12.6707 15.5 12.5833 15.7 12.5L16 11H18L18.3 12.5C18.5 12.5833 18.6877 12.675 18.863 12.775C19.0377 12.875 19.2167 13 19.4 13.15L20.85 12.65L21.85 14.4L20.7 15.4C20.7333 15.6 20.75 15.8083 20.75 16.025C20.75 16.2417 20.7333 16.45 20.7 16.65L21.85 17.65L20.85 19.35L19.4 18.9C19.2167 19.0333 19.0377 19.146 18.863 19.238C18.6877 19.3293 18.5 19.4167 18.3 19.5L18 21H16ZM17 18C17.55 18 18.021 17.8043 18.413 17.413C18.8043 17.021 19 16.55 19 16C19 15.45 18.8043 14.979 18.413 14.587C18.021 14.1957 17.55 14 17 14C16.45 14 15.9793 14.1957 15.588 14.587C15.196 14.979 15 15.45 15 16C15 16.55 15.196 17.021 15.588 17.413C15.9793 17.8043 16.45 18 17 18Z"/></g></svg>
@@ -60,16 +70,31 @@
60
70
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1434" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1434)"><path d="M10 12C8.9 12 7.95833 11.6083 7.175 10.825C6.39167 10.0417 6 9.1 6 8C6 6.9 6.39167 5.95833 7.175 5.175C7.95833 4.39167 8.9 4 10 4C11.1 4 12.0417 4.39167 12.825 5.175C13.6083 5.95833 14 6.9 14 8C14 9.1 13.6083 10.0417 12.825 10.825C12.0417 11.6083 11.1 12 10 12ZM2 20V17.2C2 16.65 2.14167 16.1333 2.425 15.65C2.70833 15.1667 3.1 14.8 3.6 14.55C4.45 14.1167 5.40833 13.75 6.475 13.45C7.54167 13.15 8.71667 13 10 13C10.1333 13 10.25 13 10.35 13C10.45 13 10.55 13.0167 10.65 13.05C10.5167 13.35 10.404 13.6627 10.312 13.988C10.2207 14.3127 10.15 14.65 10.1 15H10C8.81667 15 7.754 15.15 6.812 15.45C5.87067 15.75 5.1 16.05 4.5 16.35C4.35 16.4333 4.22933 16.55 4.138 16.7C4.046 16.85 4 17.0167 4 17.2V18H10.3C10.4 18.35 10.5333 18.696 10.7 19.038C10.8667 19.3793 11.05 19.7 11.25 20H2ZM16 21L15.7 19.5C15.5 19.4167 15.3123 19.3293 15.137 19.238C14.9623 19.146 14.7833 19.0333 14.6 18.9L13.15 19.35L12.15 17.65L13.3 16.65C13.2667 16.4167 13.25 16.2 13.25 16C13.25 15.8 13.2667 15.5833 13.3 15.35L12.15 14.35L13.15 12.65L14.6 13.1C14.7833 12.9667 14.9623 12.854 15.137 12.762C15.3123 12.6707 15.5 12.5833 15.7 12.5L16 11H18L18.3 12.5C18.5 12.5833 18.6877 12.675 18.863 12.775C19.0377 12.875 19.2167 13 19.4 13.15L20.85 12.65L21.85 14.4L20.7 15.4C20.7333 15.6 20.75 15.8083 20.75 16.025C20.75 16.2417 20.7333 16.45 20.7 16.65L21.85 17.65L20.85 19.35L19.4 18.9C19.2167 19.0333 19.0377 19.146 18.863 19.238C18.6877 19.3293 18.5 19.4167 18.3 19.5L18 21H16ZM17 18C17.55 18 18.021 17.8043 18.413 17.413C18.8043 17.021 19 16.55 19 16C19 15.45 18.8043 14.979 18.413 14.587C18.021 14.1957 17.55 14 17 14C16.45 14 15.9793 14.1957 15.588 14.587C15.196 14.979 15 15.45 15 16C15 16.55 15.196 17.021 15.588 17.413C15.9793 17.8043 16.45 18 17 18ZM10 10C10.55 10 11.021 9.804 11.413 9.412C11.8043 9.02067 12 8.55 12 8C12 7.45 11.8043 6.97933 11.413 6.588C11.021 6.196 10.55 6 10 6C9.45 6 8.97933 6.196 8.588 6.588C8.196 6.97933 8 7.45 8 8C8 8.55 8.196 9.02067 8.588 9.412C8.97933 9.804 9.45 10 10 10Z"/></g></svg>
61
71
  </i>
62
72
  {% endif %}
73
+ {% if params.icon == "menu-filled" %}
74
+ <i class="ds-icon ds-icon--menu-filled">
75
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1444" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1444)"><path d="M3 18V16H21V18H3ZM3 13V11H21V13H3ZM3 8V6H21V8H3Z"/></g></svg>
76
+ </i>
77
+ {% endif %}
63
78
  {% if params.icon == "menu" %}
64
79
  <i class="ds-icon ds-icon--menu">
65
80
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1442" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1442)"><path d="M3 18V16H21V18H3ZM3 13V11H21V13H3ZM3 8V6H21V8H3Z"/></g></svg>
66
81
  </i>
67
82
  {% endif %}
83
+ {% if params.icon == "more_horiz" %}
84
+ <i class="ds-icon ds-icon--more_horiz">
85
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4489_1891" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4489_1891)"><path d="M6 14C5.45 14 4.97933 13.804 4.588 13.412C4.196 13.0207 4 12.55 4 12C4 11.45 4.196 10.979 4.588 10.587C4.97933 10.1957 5.45 10 6 10C6.55 10 7.02067 10.1957 7.412 10.587C7.804 10.979 8 11.45 8 12C8 12.55 7.804 13.0207 7.412 13.412C7.02067 13.804 6.55 14 6 14ZM12 14C11.45 14 10.9793 13.804 10.588 13.412C10.196 13.0207 10 12.55 10 12C10 11.45 10.196 10.979 10.588 10.587C10.9793 10.1957 11.45 10 12 10C12.55 10 13.021 10.1957 13.413 10.587C13.8043 10.979 14 11.45 14 12C14 12.55 13.8043 13.0207 13.413 13.412C13.021 13.804 12.55 14 12 14ZM18 14C17.45 14 16.979 13.804 16.587 13.412C16.1957 13.0207 16 12.55 16 12C16 11.45 16.1957 10.979 16.587 10.587C16.979 10.1957 17.45 10 18 10C18.55 10 19.021 10.1957 19.413 10.587C19.8043 10.979 20 11.45 20 12C20 12.55 19.8043 13.0207 19.413 13.412C19.021 13.804 18.55 14 18 14Z"/></g></svg>
86
+ </i>
87
+ {% endif %}
68
88
  {% if params.icon == "notifications" %}
69
89
  <i class="ds-icon ds-icon--notifications">
70
90
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1445" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1445)"><path d="M4 19V17H6V10C6 8.61667 6.41667 7.38733 7.25 6.312C8.08333 5.23733 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.646 2.72933 10.938 2.438C11.2293 2.146 11.5833 2 12 2C12.4167 2 12.7707 2.146 13.062 2.438C13.354 2.72933 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.23733 16.75 6.312C17.5833 7.38733 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9793 21.8043 10.588 21.413C10.196 21.021 10 20.55 10 20H14C14 20.55 13.8043 21.021 13.413 21.413C13.021 21.8043 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z"/></g></svg>
71
91
  </i>
72
92
  {% endif %}
93
+ {% if params.icon == "search" %}
94
+ <i class="ds-icon ds-icon--search">
95
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4489_1863" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4489_1863)"><path d="M19.6 21L13.3 14.7C12.8 15.1 12.225 15.4167 11.575 15.65C10.925 15.8833 10.2333 16 9.5 16C7.68333 16 6.146 15.371 4.888 14.113C3.62933 12.8543 3 11.3167 3 9.5C3 7.68333 3.62933 6.14567 4.888 4.887C6.146 3.629 7.68333 3 9.5 3C11.3167 3 12.8543 3.629 14.113 4.887C15.371 6.14567 16 7.68333 16 9.5C16 10.2333 15.8833 10.925 15.65 11.575C15.4167 12.225 15.1 12.8 14.7 13.3L21 19.6L19.6 21ZM9.5 14C10.75 14 11.8127 13.5627 12.688 12.688C13.5627 11.8127 14 10.75 14 9.5C14 8.25 13.5627 7.18733 12.688 6.312C11.8127 5.43733 10.75 5 9.5 5C8.25 5 7.18733 5.43733 6.312 6.312C5.43733 7.18733 5 8.25 5 9.5C5 10.75 5.43733 11.8127 6.312 12.688C7.18733 13.5627 8.25 14 9.5 14Z"/></g></svg>
96
+ </i>
97
+ {% endif %}
73
98
  {% if params.icon == "visibility_off" %}
74
99
  <i class="ds-icon ds-icon--visibility_off">
75
100
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1440" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1440)"><path d="M16.1 13.3L14.65 11.85C14.8 11.0667 14.575 10.3333 13.975 9.64999C13.375 8.96665 12.6 8.69999 11.65 8.84999L10.2 7.39999C10.4833 7.26665 10.7707 7.16665 11.062 7.09999C11.354 7.03332 11.6667 6.99999 12 6.99999C13.25 6.99999 14.3127 7.43732 15.188 8.31199C16.0627 9.18732 16.5 10.25 16.5 11.5C16.5 11.8333 16.4667 12.146 16.4 12.438C16.3333 12.7293 16.2333 13.0167 16.1 13.3ZM19.3 16.45L17.85 15.05C18.4833 14.5667 19.046 14.0373 19.538 13.462C20.0293 12.8873 20.45 12.2333 20.8 11.5C19.9667 9.81665 18.7707 8.47899 17.212 7.48699C15.654 6.49565 13.9167 5.99999 12 5.99999C11.5167 5.99999 11.0417 6.03332 10.575 6.09999C10.1083 6.16665 9.65 6.26665 9.2 6.39999L7.65 4.84999C8.33333 4.56665 9.03333 4.35399 9.75 4.21199C10.4667 4.07065 11.2167 3.99999 12 3.99999C14.5167 3.99999 16.7583 4.69565 18.725 6.08699C20.6917 7.47899 22.1167 9.28332 23 11.5C22.6167 12.4833 22.1127 13.396 21.488 14.238C20.8627 15.0793 20.1333 15.8167 19.3 16.45ZM19.8 22.6L15.6 18.45C15.0167 18.6333 14.4293 18.771 13.838 18.863C13.246 18.9543 12.6333 19 12 19C9.48333 19 7.24167 18.3043 5.275 16.913C3.30833 15.521 1.88333 13.7167 1 11.5C1.35 10.6167 1.79167 9.79565 2.325 9.03699C2.85833 8.27899 3.46667 7.59999 4.15 6.99999L1.4 4.19999L2.8 2.79999L21.2 21.2L19.8 22.6ZM5.55 8.39999C5.06667 8.83332 4.625 9.30832 4.225 9.82499C3.825 10.3417 3.48333 10.9 3.2 11.5C4.03333 13.1833 5.229 14.5207 6.787 15.512C8.34567 16.504 10.0833 17 12 17C12.3333 17 12.6583 16.9793 12.975 16.938C13.2917 16.896 13.6167 16.85 13.95 16.8L13.05 15.85C12.8667 15.9 12.6917 15.9373 12.525 15.962C12.3583 15.9873 12.1833 16 12 16C10.75 16 9.68733 15.5627 8.812 14.688C7.93733 13.8127 7.5 12.75 7.5 11.5C7.5 11.3167 7.51233 11.1417 7.537 10.975C7.56233 10.8083 7.6 10.6333 7.65 10.45L5.55 8.39999Z"/></g></svg>
package/foundations/icons/svg/add.svg ADDED
@@ -0,0 +1,8 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <mask id="mask0_4489_1880" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="25" height="25">
3
+ <rect x="0.0975037" y="0.407532" width="24" height="24" fill="#D9D9D9"/>
4
+ </mask>
5
+ <g mask="url(#mask0_4489_1880)">
6
+ <path d="M11.0975 19.4075V13.4075H5.0975V11.4075H11.0975V5.40753H13.0975V11.4075H19.0975V13.4075H13.0975V19.4075H11.0975Z" fill="#1C1B1F"/>
7
+ </g>
8
+ </svg>
package/foundations/icons/svg/info-filled.svg ADDED
@@ -0,0 +1,8 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <mask id="mask0_4645_1176" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="-1" width="24" height="24">
3
+ <rect x="0.241394" y="-0.168091" width="24" height="24" fill="#D9D9D9"/>
4
+ </mask>
5
+ <g mask="url(#mask0_4645_1176)">
6
+ <path d="M13 9H11V7H13V9ZM13 17H11V11H13V17ZM12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2V2Z" fill="#1B1C1F"/>
7
+ </g>
8
+ </svg>
package/foundations/icons/svg/menu-filled.svg ADDED
@@ -0,0 +1,8 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <mask id="mask0_4407_1444" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
3
+ <rect width="24" height="24" fill="#D9D9D9"/>
4
+ </mask>
5
+ <g mask="url(#mask0_4407_1444)">
6
+ <path d="M3 18V16H21V18H3ZM3 13V11H21V13H3ZM3 8V6H21V8H3Z" fill="#1C1B1F"/>
7
+ </g>
8
+ </svg>
package/foundations/icons/svg/more_horiz.svg ADDED
@@ -0,0 +1,8 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <mask id="mask0_4489_1891" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
3
+ <rect width="24" height="24" fill="#D9D9D9"/>
4
+ </mask>
5
+ <g mask="url(#mask0_4489_1891)">
6
+ <path d="M6 14C5.45 14 4.97933 13.804 4.588 13.412C4.196 13.0207 4 12.55 4 12C4 11.45 4.196 10.979 4.588 10.587C4.97933 10.1957 5.45 10 6 10C6.55 10 7.02067 10.1957 7.412 10.587C7.804 10.979 8 11.45 8 12C8 12.55 7.804 13.0207 7.412 13.412C7.02067 13.804 6.55 14 6 14ZM12 14C11.45 14 10.9793 13.804 10.588 13.412C10.196 13.0207 10 12.55 10 12C10 11.45 10.196 10.979 10.588 10.587C10.9793 10.1957 11.45 10 12 10C12.55 10 13.021 10.1957 13.413 10.587C13.8043 10.979 14 11.45 14 12C14 12.55 13.8043 13.0207 13.413 13.412C13.021 13.804 12.55 14 12 14ZM18 14C17.45 14 16.979 13.804 16.587 13.412C16.1957 13.0207 16 12.55 16 12C16 11.45 16.1957 10.979 16.587 10.587C16.979 10.1957 17.45 10 18 10C18.55 10 19.021 10.1957 19.413 10.587C19.8043 10.979 20 11.45 20 12C20 12.55 19.8043 13.0207 19.413 13.412C19.021 13.804 18.55 14 18 14Z" fill="#1C1B1F"/>
7
+ </g>
8
+ </svg>
package/foundations/icons/svg/search.svg ADDED
@@ -0,0 +1,8 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <mask id="mask0_4489_1863" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
3
+ <rect width="24" height="24" fill="#D9D9D9"/>
4
+ </mask>
5
+ <g mask="url(#mask0_4489_1863)">
6
+ <path d="M19.6 21L13.3 14.7C12.8 15.1 12.225 15.4167 11.575 15.65C10.925 15.8833 10.2333 16 9.5 16C7.68333 16 6.146 15.371 4.888 14.113C3.62933 12.8543 3 11.3167 3 9.5C3 7.68333 3.62933 6.14567 4.888 4.887C6.146 3.629 7.68333 3 9.5 3C11.3167 3 12.8543 3.629 14.113 4.887C15.371 6.14567 16 7.68333 16 9.5C16 10.2333 15.8833 10.925 15.65 11.575C15.4167 12.225 15.1 12.8 14.7 13.3L21 19.6L19.6 21ZM9.5 14C10.75 14 11.8127 13.5627 12.688 12.688C13.5627 11.8127 14 10.75 14 9.5C14 8.25 13.5627 7.18733 12.688 6.312C11.8127 5.43733 10.75 5 9.5 5C8.25 5 7.18733 5.43733 6.312 6.312C5.43733 7.18733 5 8.25 5 9.5C5 10.75 5.43733 11.8127 6.312 12.688C7.18733 13.5627 8.25 14 9.5 14Z" fill="#1C1B1F"/>
7
+ </g>
8
+ </svg>
package/foundations/typography/README.md ADDED
@@ -0,0 +1,27 @@
1
+ **@bonniernews/dn-design-system-web/foundations/typography/README.md**
2
+
3
+ ----
4
+
5
+ # Typography UI
6
+
7
+ Currently available class names:
8
+
9
+ **Body**
10
+ - UI Body Reguler: ds-t-ui-body-regular
11
+ - UI Body Medium: ds-t-ui-body-medium
12
+
13
+ **Details**
14
+ - UI Info: ds-t-ui-info
15
+ - UI Label: ds-t-ui-label
16
+ - UI Meta: ds-t-ui-meta
17
+ - UI Link: ds-t-ui-link
18
+
19
+ **Headlines**
20
+ - UI Headline Large: ds-t-ui-headline-large
21
+ - UI Headline Small: ds-t-ui-headline-small
22
+
23
+ **Subtitles**
24
+ - UI Subtitle Small Regular: ds-t-ui-subtitle-small-regular
25
+ - UI Subtitle Small Medium: ds-t-ui-subtitle-small-medium
26
+ - UI Subtitle Large Regular: ds-t-ui-subtitle-large-regular
27
+ - UI Subtitle Large Bold: ds-t-ui-subtitle-large-bold
package/foundations/typography/typography-ui.scss ADDED
@@ -0,0 +1,53 @@
1
+ @use "../../foundations/helpers/typography.scss" as *;
2
+
3
+ .ds-t-ui-info {
4
+ @include ds-typography("UIInfo");
5
+ }
6
+
7
+ .ds-t-ui-label {
8
+ @include ds-typography("UILabel");
9
+ }
10
+
11
+ .ds-t-ui-meta {
12
+ @include ds-typography("UIMeta");
13
+ }
14
+
15
+ .ds-t-ui-link {
16
+ @include ds-typography("UILink");
17
+
18
+ &:hover {
19
+ text-decoration: none;
20
+ }
21
+ }
22
+
23
+ .ds-t-ui-headline-large {
24
+ @include ds-typography("UIHeadlineLarge");
25
+ }
26
+
27
+ .ds-t-ui-headline-small {
28
+ @include ds-typography("UIHeadlineSmall");
29
+ }
30
+
31
+ .ds-t-ui-subtitle-small-regular {
32
+ @include ds-typography("UISubtitleSmallRegular");
33
+ }
34
+
35
+ .ds-t-ui-subtitle-small-medium {
36
+ @include ds-typography("UISubtitleSmallMedium");
37
+ }
38
+
39
+ .ds-t-ui-subtitle-large-regular {
40
+ @include ds-typography("UISubtitleLargeRegular");
41
+ }
42
+
43
+ .ds-t-ui-subtitle-large-bold {
44
+ @include ds-typography("UISubtitleLargeBold");
45
+ }
46
+
47
+ .ds-t-ui-body-regular {
48
+ @include ds-typography("UIBodyRegular");
49
+ }
50
+
51
+ .ds-t-ui-body-medium {
52
+ @include ds-typography("UIBodyMedium");
53
+ }
package/foundations/typography/typography.njk ADDED
@@ -0,0 +1,15 @@
1
+ {% macro Typography(params) %}
2
+ {% set variant = [] %}
3
+
4
+ {% if params.textComponent %}
5
+ {% set variant = (variant.push('ds-t-' + params.textComponent), variant) %}
6
+ {% endif %}
7
+
8
+ {% if params.textColor %}
9
+ {% set variant = (variant.push("ds-color-text-" + params.textColor), variant) %}
10
+ {% endif %}
11
+
12
+ {% set fontClasses = variant | join(" ") %}
13
+
14
+ <span class="{{fontClasses}}">{{ params.text if params.text }}</span>
15
+ {% endmacro %}
package/foundations/variables/typography.scss CHANGED
@@ -85,6 +85,13 @@ $typography: (
85
85
  letterSpacing: -0.2,
86
86
  lineHeight: 28
87
87
  ),
88
+ UISubtitleSmallMedium: (
89
+ fontFamily: "DN Sans 10",
90
+ fontSize: 16,
91
+ fontWeight: 500,
92
+ letterSpacing: -0.2,
93
+ lineHeight: 20
94
+ ),
88
95
  UISubtitleSmallRegular: (
89
96
  fontFamily: "DN Sans 10",
90
97
  fontSize: 16,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "0.1.0-alpha.2",
3
+ "version": "0.1.0-alpha.4",
4
4
  "description": "DN design system for web.",
5
5
  "main": "index.js",
6
6
  "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",
package/components/text/text-sans.njk DELETED
@@ -1,25 +0,0 @@
1
- {% macro TextSans(params) %}
2
- {% set fontClassName = "ds-font-sans" %}
3
- {% set classNamePrefix = fontClassName + "--" %}
4
- {% set variant = [] %}
5
-
6
- {% if params.monospace %}
7
- {% set variant = (variant.push(classNamePrefix + "monospace"), variant) %}
8
- {% endif %}
9
-
10
- {% if params.size %}
11
- {% set variant = (variant.push(classNamePrefix + params.size), variant) %}
12
- {% endif %}
13
-
14
- {% if params.weight %}
15
- {% set variant = (variant.push(classNamePrefix + params.weight), variant) %}
16
- {% endif %}
17
-
18
- {% if params.textColor %}
19
- {% set variant = (variant.push("ds-color-text-" + params.textColor), variant) %}
20
- {% endif %}
21
-
22
- {% set fontClasses = fontClassName + " " + variant | join(" ") %}
23
-
24
- <p class="{{fontClasses}}">{{ params.text if params.text }}{{ caller() if caller }}</p>
25
- {% endmacro %}
package/components/text/text-sans.scss DELETED
@@ -1 +0,0 @@
1
- @use "../../foundations/typography-sans.scss" as *;
package/foundations/fonts.scss DELETED
@@ -1,82 +0,0 @@
1
- @font-face {
2
- font-family: DNSansVF;
3
- src: url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/Variable/DnSans10-Variable.woff2") format('woff2-variations'),
4
- url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/Variable/DnSans10-Variable.woff2") format('woff2');
5
- font-weight: 300 900;
6
- }
7
-
8
- @font-face {
9
- font-family: DNSans;
10
- font-weight: 300;
11
- font-display: swap;
12
- src: url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/web/DNSans10-Light.woff") format("woff");
13
- }
14
-
15
- @font-face {
16
- font-family: DNSans;
17
- font-weight: 300;
18
- font-display: swap;
19
- src: url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/web/DNSans10-LightItalic.woff") format("woff");
20
- font-style: italic;
21
- }
22
-
23
- @font-face {
24
- font-family: DNSans;
25
- font-weight: 400;
26
- font-display: swap;
27
- src: url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/web/DNSans10-Regular.woff") format("woff");
28
- }
29
-
30
- @font-face {
31
- font-family: DNSans;
32
- font-weight: 400;
33
- font-display: swap;
34
- src: url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/web/DNSans10-RegularItalic.woff") format("woff");
35
- font-style: italic;
36
- }
37
-
38
- @font-face {
39
- font-family: DNSans;
40
- font-weight: 500;
41
- font-display: swap;
42
- src: url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/web/DNSans10-Medium.woff") format("woff");
43
- }
44
-
45
- @font-face {
46
- font-family: DNSans;
47
- font-weight: 500;
48
- font-display: swap;
49
- src: url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/web/DNSans10-MediumItalic.woff") format("woff");
50
- font-style: italic;
51
- }
52
-
53
- @font-face {
54
- font-family: DNSans;
55
- font-weight: 700;
56
- font-display: swap;
57
- src: url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/web/DNSans10-Bold.woff") format("woff");
58
- }
59
-
60
- @font-face {
61
- font-family: DNSans;
62
- font-weight: 700;
63
- font-display: swap;
64
- src: url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/web/DNSans10-BoldItalic.woff") format("woff");
65
- font-style: italic;
66
- }
67
-
68
- @font-face {
69
- font-family: DNSans;
70
- font-weight: 900;
71
- font-display: swap;
72
- src: url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/web/DNSans10-Black.woff") format("woff");
73
- }
74
-
75
- @font-face {
76
- font-family: DNSans;
77
- font-weight: 900;
78
- font-display: swap;
79
- src: url("~@bonniernews/dn-designsystem-foundations/src/typography/fonts/web/DNSans10-BlackItalic.woff") format("woff");
80
- font-style: italic;
81
- }
82
-
package/foundations/helpers/fontFamily.scss DELETED
@@ -1,11 +0,0 @@
1
- @mixin ds-font-sans() {
2
- & {
3
- font-family: DNSans, Helvetica, Arial, sans-serif;
4
- }
5
-
6
- @supports (font-variation-settings: normal) {
7
- & {
8
- font-family: DNSansVF, Helvetica, Arial, sans-serif;
9
- }
10
- }
11
- }
package/foundations/typography-sans.scss DELETED
@@ -1,43 +0,0 @@
1
- @use "./helpers/fontFamily.scss" as *;
2
-
3
- .ds-font-sans {
4
- @include ds-font-sans();
5
- font-weight: 400;
6
-
7
- &--monospace {
8
- font-feature-settings: "tnum";
9
- }
10
-
11
- &--thin {
12
- font-weight: 300;
13
- }
14
- &--regular {
15
- font-weight: 400;
16
- }
17
- &--medium {
18
- font-weight: 500;
19
- }
20
- &--bold {
21
- font-weight: 700;
22
- }
23
- &--black {
24
- font-weight: 900;
25
- }
26
-
27
- &--12 {
28
- font-size: 12px;
29
- line-height: 16px;
30
- }
31
- &--14 {
32
- font-size: 14px;
33
- line-height: 20px;
34
- }
35
- &--16 {
36
- font-size: 16px;
37
- line-height: 24px;
38
- }
39
- &--18 {
40
- font-size: 18px;
41
- line-height: 24px;
42
- }
43
- }