@amboss/design-system 1.15.4 → 1.16.1--canary
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.
- package/build/cjs/src/components/Card/Card.js +5 -35
- package/build/cjs/src/components/Container/Container.js +23 -7
- package/build/cjs/src/components/SearchResult/SearchResult.js +109 -62
- package/build/cjs/src/components/Tag/Tag.js +6 -4
- package/build/cjs/src/components/TagGroup/TagGroup.js +118 -0
- package/build/cjs/src/index.js +3 -0
- package/build/esm/build-tokens/_sizes.json +1 -1
- package/build/esm/src/components/Card/Card.js +5 -34
- package/build/esm/src/components/Card/Card.js.map +1 -1
- package/build/esm/src/components/Container/Container.d.ts +4 -1
- package/build/esm/src/components/Container/Container.js +23 -7
- package/build/esm/src/components/Container/Container.js.map +1 -1
- package/build/esm/src/components/SearchResult/SearchResult.d.ts +0 -4
- package/build/esm/src/components/SearchResult/SearchResult.js +109 -62
- package/build/esm/src/components/SearchResult/SearchResult.js.map +1 -1
- package/build/esm/src/components/Tag/Tag.d.ts +1 -0
- package/build/esm/src/components/Tag/Tag.js +6 -5
- package/build/esm/src/components/Tag/Tag.js.map +1 -1
- package/build/esm/src/components/TagGroup/TagGroup.d.ts +17 -0
- package/build/esm/src/components/TagGroup/TagGroup.js +112 -0
- package/build/esm/src/components/TagGroup/TagGroup.js.map +1 -0
- package/build/esm/src/index.d.ts +1 -0
- package/build/esm/src/index.js +2 -1
- package/build/esm/src/index.js.map +1 -1
- package/build/{cjs/scss → scss}/themes/dark.scss +1 -1
- package/build/{cjs/scss → scss}/themes/light.scss +1 -1
- package/package.json +1 -1
- package/build/esm/scss/themes/dark.scss +0 -111
- package/build/esm/scss/themes/light.scss +0 -111
|
@@ -2,6 +2,7 @@ import _styled from '@emotion/styled/base';
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { PictogramButton } from '../PictogramButton/PictogramButton.js';
|
|
4
4
|
|
|
5
|
+
const MAX_TAG_WIDTH = 200;
|
|
5
6
|
const TagContainer = /*#__PURE__*/_styled("span", process.env.NODE_ENV === "production" ? {
|
|
6
7
|
target: "e1i6narj2"
|
|
7
8
|
} : {
|
|
@@ -16,7 +17,7 @@ const TagContainer = /*#__PURE__*/_styled("span", process.env.NODE_ENV === "prod
|
|
|
16
17
|
return {
|
|
17
18
|
display: "inline-flex",
|
|
18
19
|
alignItems: "center",
|
|
19
|
-
maxWidth:
|
|
20
|
+
maxWidth: `${MAX_TAG_WIDTH}px`,
|
|
20
21
|
paddingLeft: theme.variables.size.spacing.xs,
|
|
21
22
|
paddingRight: isRemovable ? theme.variables.size.spacing.zero : theme.variables.size.spacing.xs,
|
|
22
23
|
paddingTop: isRemovable ? theme.variables.size.spacing.zero : theme.variables.size.spacing.xxs,
|
|
@@ -28,7 +29,7 @@ const TagContainer = /*#__PURE__*/_styled("span", process.env.NODE_ENV === "prod
|
|
|
28
29
|
fontSize: theme.variables.size.font.text.s,
|
|
29
30
|
lineHeight: theme.variables.size.lineHeight.text.xs
|
|
30
31
|
};
|
|
31
|
-
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
32
|
+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhZy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUJxQiIsImZpbGUiOiJUYWcudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBQaWN0b2dyYW1CdXR0b24gfSBmcm9tIFwiLi4vUGljdG9ncmFtQnV0dG9uL1BpY3RvZ3JhbUJ1dHRvblwiO1xuXG5leHBvcnQgY29uc3QgTUFYX1RBR19XSURUSCA9IDIwMDtcblxudHlwZSBCYXNlVGFnUHJvcHMgPSB7XG4gIGxhYmVsOiBzdHJpbmc7XG4gIGNvbG9yVmFyaWFudD86IFwiZ3JheVwiIHwgXCJibHVlXCI7XG4gIFwiZGF0YS1lMmUtdGVzdC1pZFwiPzogc3RyaW5nO1xufTtcbnR5cGUgQ29uZGl0aW9uYWxUYWdQcm9wcyA9XG4gIHwge1xuICAgICAgaXNSZW1vdmFibGU/OiBmYWxzZTtcbiAgICAgIG9uQ2xlYXI/OiBuZXZlcjtcbiAgICAgIGNsZWFyQnRuQXJpYUxhYmVsPzogbmV2ZXI7XG4gICAgfVxuICB8IHtcbiAgICAgIGlzUmVtb3ZhYmxlOiB0cnVlO1xuICAgICAgb25DbGVhcjogKCkgPT4gdm9pZDtcbiAgICAgIGNsZWFyQnRuQXJpYUxhYmVsPzogc3RyaW5nO1xuICAgIH07XG5cbmV4cG9ydCB0eXBlIFRhZ1Byb3BzID0gQmFzZVRhZ1Byb3BzICYgQ29uZGl0aW9uYWxUYWdQcm9wcztcblxuY29uc3QgVGFnQ29udGFpbmVyID0gc3R5bGVkLnNwYW48UGFydGlhbDxUYWdQcm9wcz4+KFxuICAoeyB0aGVtZSwgY29sb3JWYXJpYW50LCBpc1JlbW92YWJsZSB9KSA9PiAoe1xuICAgIGRpc3BsYXk6IFwiaW5saW5lLWZsZXhcIixcbiAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgIG1heFdpZHRoOiBgJHtNQVhfVEFHX1dJRFRIfXB4YCxcbiAgICBwYWRkaW5nTGVmdDogdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy54cyxcbiAgICBwYWRkaW5nUmlnaHQ6IGlzUmVtb3ZhYmxlXG4gICAgICA/IHRoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcuemVyb1xuICAgICAgOiB0aGVtZS52YXJpYWJsZXMuc2l6ZS5zcGFjaW5nLnhzLFxuICAgIHBhZGRpbmdUb3A6IGlzUmVtb3ZhYmxlXG4gICAgICA/IHRoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcuemVyb1xuICAgICAgOiB0aGVtZS52YXJpYWJsZXMuc2l6ZS5zcGFjaW5nLnh4cyxcbiAgICBwYWRkaW5nQm90dG9tOiBpc1JlbW92YWJsZVxuICAgICAgPyB0aGVtZS52YXJpYWJsZXMuc2l6ZS5zcGFjaW5nLnplcm9cbiAgICAgIDogdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy54eHMsXG4gICAgYm9yZGVyUmFkaXVzOiB0aGVtZS52YXJpYWJsZXMuc2l6ZS5ib3JkZXJSYWRpdXMueHMsXG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS52YWx1ZXMuY29sb3IudGFnLmJhY2tncm91bmRbY29sb3JWYXJpYW50XSxcbiAgICBjb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLnRhZy50ZXh0W2NvbG9yVmFyaWFudF0sXG4gICAgZm9udEZhbWlseTogdGhlbWUudmFyaWFibGVzLmZvbnRGYW1pbHkubGF0byxcbiAgICBmb250U2l6ZTogdGhlbWUudmFyaWFibGVzLnNpemUuZm9udC50ZXh0LnMsXG4gICAgbGluZUhlaWdodDogdGhlbWUudmFyaWFibGVzLnNpemUubGluZUhlaWdodC50ZXh0LnhzLFxuICB9KVxuKTtcblxuY29uc3QgVGFnTGFiZWwgPSBzdHlsZWQuc3BhbigoKSA9PiAoe1xuICBvdmVyZmxvdzogXCJoaWRkZW5cIixcbiAgdGV4dE92ZXJmbG93OiBcImVsbGlwc2lzXCIsXG4gIHdoaXRlU3BhY2U6IFwibm93cmFwXCIsXG59KSk7XG5cbmNvbnN0IENsZWFyQnV0dG9uID0gc3R5bGVkKFBpY3RvZ3JhbUJ1dHRvbik8UGFydGlhbDxUYWdQcm9wcz4+KFxuICAoeyB0aGVtZSwgY29sb3JWYXJpYW50IH0pID0+ICh7XG4gICAgYmFja2dyb3VuZENvbG9yOiBcInRyYW5zcGFyZW50XCIsXG4gICAgY29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci50YWcudGV4dFtjb2xvclZhcmlhbnRdLFxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBjb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLnRhZy50ZXh0W2NvbG9yVmFyaWFudF0sXG4gICAgfSxcbiAgfSlcbik7XG5cbmV4cG9ydCBmdW5jdGlvbiBUYWcoe1xuICBsYWJlbCxcbiAgY29sb3JWYXJpYW50ID0gXCJncmF5XCIsXG4gIGlzUmVtb3ZhYmxlID0gZmFsc2UsXG4gIG9uQ2xlYXIsXG4gIGNsZWFyQnRuQXJpYUxhYmVsLFxuICBcImRhdGEtZTJlLXRlc3QtaWRcIjogZGF0YUUyZVRlc3RJZCxcbn06IFRhZ1Byb3BzKTogUmVhY3QuUmVhY3RFbGVtZW50IHtcbiAgcmV0dXJuIChcbiAgICA8VGFnQ29udGFpbmVyXG4gICAgICBkYXRhLWUyZS10ZXN0LWlkPXtkYXRhRTJlVGVzdElkfVxuICAgICAgZGF0YS1kcy1pZD1cIlRhZ1wiXG4gICAgICBjb2xvclZhcmlhbnQ9e2NvbG9yVmFyaWFudH1cbiAgICAgIGlzUmVtb3ZhYmxlPXtpc1JlbW92YWJsZX1cbiAgICA+XG4gICAgICA8VGFnTGFiZWw+e2xhYmVsfTwvVGFnTGFiZWw+XG5cbiAgICAgIHtpc1JlbW92YWJsZSAmJiAoXG4gICAgICAgIDxDbGVhckJ1dHRvblxuICAgICAgICAgIGljb249XCJ4XCJcbiAgICAgICAgICBzaXplPVwieHNcIlxuICAgICAgICAgIGFyaWEtbGFiZWw9e2NsZWFyQnRuQXJpYUxhYmVsfVxuICAgICAgICAgIG9uQ2xpY2s9e29uQ2xlYXJ9XG4gICAgICAgICAgY29sb3JWYXJpYW50PXtjb2xvclZhcmlhbnR9XG4gICAgICAgIC8+XG4gICAgICApfVxuICAgIDwvVGFnQ29udGFpbmVyPlxuICApO1xufVxuIl19 */");
|
|
32
33
|
const TagLabel = /*#__PURE__*/_styled("span", process.env.NODE_ENV === "production" ? {
|
|
33
34
|
target: "e1i6narj1"
|
|
34
35
|
} : {
|
|
@@ -38,7 +39,7 @@ const TagLabel = /*#__PURE__*/_styled("span", process.env.NODE_ENV === "producti
|
|
|
38
39
|
overflow: "hidden",
|
|
39
40
|
textOverflow: "ellipsis",
|
|
40
41
|
whiteSpace: "nowrap"
|
|
41
|
-
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
42
|
+
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhZy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaURpQiIsImZpbGUiOiJUYWcudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBQaWN0b2dyYW1CdXR0b24gfSBmcm9tIFwiLi4vUGljdG9ncmFtQnV0dG9uL1BpY3RvZ3JhbUJ1dHRvblwiO1xuXG5leHBvcnQgY29uc3QgTUFYX1RBR19XSURUSCA9IDIwMDtcblxudHlwZSBCYXNlVGFnUHJvcHMgPSB7XG4gIGxhYmVsOiBzdHJpbmc7XG4gIGNvbG9yVmFyaWFudD86IFwiZ3JheVwiIHwgXCJibHVlXCI7XG4gIFwiZGF0YS1lMmUtdGVzdC1pZFwiPzogc3RyaW5nO1xufTtcbnR5cGUgQ29uZGl0aW9uYWxUYWdQcm9wcyA9XG4gIHwge1xuICAgICAgaXNSZW1vdmFibGU/OiBmYWxzZTtcbiAgICAgIG9uQ2xlYXI/OiBuZXZlcjtcbiAgICAgIGNsZWFyQnRuQXJpYUxhYmVsPzogbmV2ZXI7XG4gICAgfVxuICB8IHtcbiAgICAgIGlzUmVtb3ZhYmxlOiB0cnVlO1xuICAgICAgb25DbGVhcjogKCkgPT4gdm9pZDtcbiAgICAgIGNsZWFyQnRuQXJpYUxhYmVsPzogc3RyaW5nO1xuICAgIH07XG5cbmV4cG9ydCB0eXBlIFRhZ1Byb3BzID0gQmFzZVRhZ1Byb3BzICYgQ29uZGl0aW9uYWxUYWdQcm9wcztcblxuY29uc3QgVGFnQ29udGFpbmVyID0gc3R5bGVkLnNwYW48UGFydGlhbDxUYWdQcm9wcz4+KFxuICAoeyB0aGVtZSwgY29sb3JWYXJpYW50LCBpc1JlbW92YWJsZSB9KSA9PiAoe1xuICAgIGRpc3BsYXk6IFwiaW5saW5lLWZsZXhcIixcbiAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgIG1heFdpZHRoOiBgJHtNQVhfVEFHX1dJRFRIfXB4YCxcbiAgICBwYWRkaW5nTGVmdDogdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy54cyxcbiAgICBwYWRkaW5nUmlnaHQ6IGlzUmVtb3ZhYmxlXG4gICAgICA/IHRoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcuemVyb1xuICAgICAgOiB0aGVtZS52YXJpYWJsZXMuc2l6ZS5zcGFjaW5nLnhzLFxuICAgIHBhZGRpbmdUb3A6IGlzUmVtb3ZhYmxlXG4gICAgICA/IHRoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcuemVyb1xuICAgICAgOiB0aGVtZS52YXJpYWJsZXMuc2l6ZS5zcGFjaW5nLnh4cyxcbiAgICBwYWRkaW5nQm90dG9tOiBpc1JlbW92YWJsZVxuICAgICAgPyB0aGVtZS52YXJpYWJsZXMuc2l6ZS5zcGFjaW5nLnplcm9cbiAgICAgIDogdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy54eHMsXG4gICAgYm9yZGVyUmFkaXVzOiB0aGVtZS52YXJpYWJsZXMuc2l6ZS5ib3JkZXJSYWRpdXMueHMsXG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS52YWx1ZXMuY29sb3IudGFnLmJhY2tncm91bmRbY29sb3JWYXJpYW50XSxcbiAgICBjb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLnRhZy50ZXh0W2NvbG9yVmFyaWFudF0sXG4gICAgZm9udEZhbWlseTogdGhlbWUudmFyaWFibGVzLmZvbnRGYW1pbHkubGF0byxcbiAgICBmb250U2l6ZTogdGhlbWUudmFyaWFibGVzLnNpemUuZm9udC50ZXh0LnMsXG4gICAgbGluZUhlaWdodDogdGhlbWUudmFyaWFibGVzLnNpemUubGluZUhlaWdodC50ZXh0LnhzLFxuICB9KVxuKTtcblxuY29uc3QgVGFnTGFiZWwgPSBzdHlsZWQuc3BhbigoKSA9PiAoe1xuICBvdmVyZmxvdzogXCJoaWRkZW5cIixcbiAgdGV4dE92ZXJmbG93OiBcImVsbGlwc2lzXCIsXG4gIHdoaXRlU3BhY2U6IFwibm93cmFwXCIsXG59KSk7XG5cbmNvbnN0IENsZWFyQnV0dG9uID0gc3R5bGVkKFBpY3RvZ3JhbUJ1dHRvbik8UGFydGlhbDxUYWdQcm9wcz4+KFxuICAoeyB0aGVtZSwgY29sb3JWYXJpYW50IH0pID0+ICh7XG4gICAgYmFja2dyb3VuZENvbG9yOiBcInRyYW5zcGFyZW50XCIsXG4gICAgY29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci50YWcudGV4dFtjb2xvclZhcmlhbnRdLFxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBjb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLnRhZy50ZXh0W2NvbG9yVmFyaWFudF0sXG4gICAgfSxcbiAgfSlcbik7XG5cbmV4cG9ydCBmdW5jdGlvbiBUYWcoe1xuICBsYWJlbCxcbiAgY29sb3JWYXJpYW50ID0gXCJncmF5XCIsXG4gIGlzUmVtb3ZhYmxlID0gZmFsc2UsXG4gIG9uQ2xlYXIsXG4gIGNsZWFyQnRuQXJpYUxhYmVsLFxuICBcImRhdGEtZTJlLXRlc3QtaWRcIjogZGF0YUUyZVRlc3RJZCxcbn06IFRhZ1Byb3BzKTogUmVhY3QuUmVhY3RFbGVtZW50IHtcbiAgcmV0dXJuIChcbiAgICA8VGFnQ29udGFpbmVyXG4gICAgICBkYXRhLWUyZS10ZXN0LWlkPXtkYXRhRTJlVGVzdElkfVxuICAgICAgZGF0YS1kcy1pZD1cIlRhZ1wiXG4gICAgICBjb2xvclZhcmlhbnQ9e2NvbG9yVmFyaWFudH1cbiAgICAgIGlzUmVtb3ZhYmxlPXtpc1JlbW92YWJsZX1cbiAgICA+XG4gICAgICA8VGFnTGFiZWw+e2xhYmVsfTwvVGFnTGFiZWw+XG5cbiAgICAgIHtpc1JlbW92YWJsZSAmJiAoXG4gICAgICAgIDxDbGVhckJ1dHRvblxuICAgICAgICAgIGljb249XCJ4XCJcbiAgICAgICAgICBzaXplPVwieHNcIlxuICAgICAgICAgIGFyaWEtbGFiZWw9e2NsZWFyQnRuQXJpYUxhYmVsfVxuICAgICAgICAgIG9uQ2xpY2s9e29uQ2xlYXJ9XG4gICAgICAgICAgY29sb3JWYXJpYW50PXtjb2xvclZhcmlhbnR9XG4gICAgICAgIC8+XG4gICAgICApfVxuICAgIDwvVGFnQ29udGFpbmVyPlxuICApO1xufVxuIl19 */");
|
|
42
43
|
const ClearButton = /*#__PURE__*/_styled(PictogramButton, process.env.NODE_ENV === "production" ? {
|
|
43
44
|
target: "e1i6narj0"
|
|
44
45
|
} : {
|
|
@@ -56,7 +57,7 @@ const ClearButton = /*#__PURE__*/_styled(PictogramButton, process.env.NODE_ENV =
|
|
|
56
57
|
color: theme.values.color.tag.text[colorVariant]
|
|
57
58
|
}
|
|
58
59
|
};
|
|
59
|
-
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
60
|
+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhZy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdURvQiIsImZpbGUiOiJUYWcudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBQaWN0b2dyYW1CdXR0b24gfSBmcm9tIFwiLi4vUGljdG9ncmFtQnV0dG9uL1BpY3RvZ3JhbUJ1dHRvblwiO1xuXG5leHBvcnQgY29uc3QgTUFYX1RBR19XSURUSCA9IDIwMDtcblxudHlwZSBCYXNlVGFnUHJvcHMgPSB7XG4gIGxhYmVsOiBzdHJpbmc7XG4gIGNvbG9yVmFyaWFudD86IFwiZ3JheVwiIHwgXCJibHVlXCI7XG4gIFwiZGF0YS1lMmUtdGVzdC1pZFwiPzogc3RyaW5nO1xufTtcbnR5cGUgQ29uZGl0aW9uYWxUYWdQcm9wcyA9XG4gIHwge1xuICAgICAgaXNSZW1vdmFibGU/OiBmYWxzZTtcbiAgICAgIG9uQ2xlYXI/OiBuZXZlcjtcbiAgICAgIGNsZWFyQnRuQXJpYUxhYmVsPzogbmV2ZXI7XG4gICAgfVxuICB8IHtcbiAgICAgIGlzUmVtb3ZhYmxlOiB0cnVlO1xuICAgICAgb25DbGVhcjogKCkgPT4gdm9pZDtcbiAgICAgIGNsZWFyQnRuQXJpYUxhYmVsPzogc3RyaW5nO1xuICAgIH07XG5cbmV4cG9ydCB0eXBlIFRhZ1Byb3BzID0gQmFzZVRhZ1Byb3BzICYgQ29uZGl0aW9uYWxUYWdQcm9wcztcblxuY29uc3QgVGFnQ29udGFpbmVyID0gc3R5bGVkLnNwYW48UGFydGlhbDxUYWdQcm9wcz4+KFxuICAoeyB0aGVtZSwgY29sb3JWYXJpYW50LCBpc1JlbW92YWJsZSB9KSA9PiAoe1xuICAgIGRpc3BsYXk6IFwiaW5saW5lLWZsZXhcIixcbiAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgIG1heFdpZHRoOiBgJHtNQVhfVEFHX1dJRFRIfXB4YCxcbiAgICBwYWRkaW5nTGVmdDogdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy54cyxcbiAgICBwYWRkaW5nUmlnaHQ6IGlzUmVtb3ZhYmxlXG4gICAgICA/IHRoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcuemVyb1xuICAgICAgOiB0aGVtZS52YXJpYWJsZXMuc2l6ZS5zcGFjaW5nLnhzLFxuICAgIHBhZGRpbmdUb3A6IGlzUmVtb3ZhYmxlXG4gICAgICA/IHRoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcuemVyb1xuICAgICAgOiB0aGVtZS52YXJpYWJsZXMuc2l6ZS5zcGFjaW5nLnh4cyxcbiAgICBwYWRkaW5nQm90dG9tOiBpc1JlbW92YWJsZVxuICAgICAgPyB0aGVtZS52YXJpYWJsZXMuc2l6ZS5zcGFjaW5nLnplcm9cbiAgICAgIDogdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy54eHMsXG4gICAgYm9yZGVyUmFkaXVzOiB0aGVtZS52YXJpYWJsZXMuc2l6ZS5ib3JkZXJSYWRpdXMueHMsXG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS52YWx1ZXMuY29sb3IudGFnLmJhY2tncm91bmRbY29sb3JWYXJpYW50XSxcbiAgICBjb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLnRhZy50ZXh0W2NvbG9yVmFyaWFudF0sXG4gICAgZm9udEZhbWlseTogdGhlbWUudmFyaWFibGVzLmZvbnRGYW1pbHkubGF0byxcbiAgICBmb250U2l6ZTogdGhlbWUudmFyaWFibGVzLnNpemUuZm9udC50ZXh0LnMsXG4gICAgbGluZUhlaWdodDogdGhlbWUudmFyaWFibGVzLnNpemUubGluZUhlaWdodC50ZXh0LnhzLFxuICB9KVxuKTtcblxuY29uc3QgVGFnTGFiZWwgPSBzdHlsZWQuc3BhbigoKSA9PiAoe1xuICBvdmVyZmxvdzogXCJoaWRkZW5cIixcbiAgdGV4dE92ZXJmbG93OiBcImVsbGlwc2lzXCIsXG4gIHdoaXRlU3BhY2U6IFwibm93cmFwXCIsXG59KSk7XG5cbmNvbnN0IENsZWFyQnV0dG9uID0gc3R5bGVkKFBpY3RvZ3JhbUJ1dHRvbik8UGFydGlhbDxUYWdQcm9wcz4+KFxuICAoeyB0aGVtZSwgY29sb3JWYXJpYW50IH0pID0+ICh7XG4gICAgYmFja2dyb3VuZENvbG9yOiBcInRyYW5zcGFyZW50XCIsXG4gICAgY29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci50YWcudGV4dFtjb2xvclZhcmlhbnRdLFxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBjb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLnRhZy50ZXh0W2NvbG9yVmFyaWFudF0sXG4gICAgfSxcbiAgfSlcbik7XG5cbmV4cG9ydCBmdW5jdGlvbiBUYWcoe1xuICBsYWJlbCxcbiAgY29sb3JWYXJpYW50ID0gXCJncmF5XCIsXG4gIGlzUmVtb3ZhYmxlID0gZmFsc2UsXG4gIG9uQ2xlYXIsXG4gIGNsZWFyQnRuQXJpYUxhYmVsLFxuICBcImRhdGEtZTJlLXRlc3QtaWRcIjogZGF0YUUyZVRlc3RJZCxcbn06IFRhZ1Byb3BzKTogUmVhY3QuUmVhY3RFbGVtZW50IHtcbiAgcmV0dXJuIChcbiAgICA8VGFnQ29udGFpbmVyXG4gICAgICBkYXRhLWUyZS10ZXN0LWlkPXtkYXRhRTJlVGVzdElkfVxuICAgICAgZGF0YS1kcy1pZD1cIlRhZ1wiXG4gICAgICBjb2xvclZhcmlhbnQ9e2NvbG9yVmFyaWFudH1cbiAgICAgIGlzUmVtb3ZhYmxlPXtpc1JlbW92YWJsZX1cbiAgICA+XG4gICAgICA8VGFnTGFiZWw+e2xhYmVsfTwvVGFnTGFiZWw+XG5cbiAgICAgIHtpc1JlbW92YWJsZSAmJiAoXG4gICAgICAgIDxDbGVhckJ1dHRvblxuICAgICAgICAgIGljb249XCJ4XCJcbiAgICAgICAgICBzaXplPVwieHNcIlxuICAgICAgICAgIGFyaWEtbGFiZWw9e2NsZWFyQnRuQXJpYUxhYmVsfVxuICAgICAgICAgIG9uQ2xpY2s9e29uQ2xlYXJ9XG4gICAgICAgICAgY29sb3JWYXJpYW50PXtjb2xvclZhcmlhbnR9XG4gICAgICAgIC8+XG4gICAgICApfVxuICAgIDwvVGFnQ29udGFpbmVyPlxuICApO1xufVxuIl19 */");
|
|
60
61
|
function Tag(_ref3) {
|
|
61
62
|
let {
|
|
62
63
|
label,
|
|
@@ -80,5 +81,5 @@ function Tag(_ref3) {
|
|
|
80
81
|
}));
|
|
81
82
|
}
|
|
82
83
|
|
|
83
|
-
export { Tag };
|
|
84
|
+
export { MAX_TAG_WIDTH, Tag };
|
|
84
85
|
//# sourceMappingURL=Tag.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sources":["../../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { PictogramButton } from \"../PictogramButton/PictogramButton\";\n\ntype BaseTagProps = {\n label: string;\n colorVariant?: \"gray\" | \"blue\";\n \"data-e2e-test-id\"?: string;\n};\ntype ConditionalTagProps =\n | {\n isRemovable?: false;\n onClear?: never;\n clearBtnAriaLabel?: never;\n }\n | {\n isRemovable: true;\n onClear: () => void;\n clearBtnAriaLabel?: string;\n };\n\nexport type TagProps = BaseTagProps & ConditionalTagProps;\n\nconst TagContainer = styled.span<Partial<TagProps>>(\n ({ theme, colorVariant, isRemovable }) => ({\n display: \"inline-flex\",\n alignItems: \"center\",\n maxWidth:
|
|
1
|
+
{"version":3,"file":"Tag.js","sources":["../../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { PictogramButton } from \"../PictogramButton/PictogramButton\";\n\nexport const MAX_TAG_WIDTH = 200;\n\ntype BaseTagProps = {\n label: string;\n colorVariant?: \"gray\" | \"blue\";\n \"data-e2e-test-id\"?: string;\n};\ntype ConditionalTagProps =\n | {\n isRemovable?: false;\n onClear?: never;\n clearBtnAriaLabel?: never;\n }\n | {\n isRemovable: true;\n onClear: () => void;\n clearBtnAriaLabel?: string;\n };\n\nexport type TagProps = BaseTagProps & ConditionalTagProps;\n\nconst TagContainer = styled.span<Partial<TagProps>>(\n ({ theme, colorVariant, isRemovable }) => ({\n display: \"inline-flex\",\n alignItems: \"center\",\n maxWidth: `${MAX_TAG_WIDTH}px`,\n paddingLeft: theme.variables.size.spacing.xs,\n paddingRight: isRemovable\n ? theme.variables.size.spacing.zero\n : theme.variables.size.spacing.xs,\n paddingTop: isRemovable\n ? theme.variables.size.spacing.zero\n : theme.variables.size.spacing.xxs,\n paddingBottom: isRemovable\n ? theme.variables.size.spacing.zero\n : theme.variables.size.spacing.xxs,\n borderRadius: theme.variables.size.borderRadius.xs,\n backgroundColor: theme.values.color.tag.background[colorVariant],\n color: theme.values.color.tag.text[colorVariant],\n fontFamily: theme.variables.fontFamily.lato,\n fontSize: theme.variables.size.font.text.s,\n lineHeight: theme.variables.size.lineHeight.text.xs,\n })\n);\n\nconst TagLabel = styled.span(() => ({\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n}));\n\nconst ClearButton = styled(PictogramButton)<Partial<TagProps>>(\n ({ theme, colorVariant }) => ({\n backgroundColor: \"transparent\",\n color: theme.values.color.tag.text[colorVariant],\n \"&:hover\": {\n color: theme.values.color.tag.text[colorVariant],\n },\n })\n);\n\nexport function Tag({\n label,\n colorVariant = \"gray\",\n isRemovable = false,\n onClear,\n clearBtnAriaLabel,\n \"data-e2e-test-id\": dataE2eTestId,\n}: TagProps): React.ReactElement {\n return (\n <TagContainer\n data-e2e-test-id={dataE2eTestId}\n data-ds-id=\"Tag\"\n colorVariant={colorVariant}\n isRemovable={isRemovable}\n >\n <TagLabel>{label}</TagLabel>\n\n {isRemovable && (\n <ClearButton\n icon=\"x\"\n size=\"xs\"\n aria-label={clearBtnAriaLabel}\n onClick={onClear}\n colorVariant={colorVariant}\n />\n )}\n </TagContainer>\n );\n}\n"],"names":["MAX_TAG_WIDTH","TagContainer","_styled","process","env","NODE_ENV","target","label","_ref","theme","colorVariant","isRemovable","display","alignItems","maxWidth","paddingLeft","variables","size","spacing","xs","paddingRight","zero","paddingTop","xxs","paddingBottom","borderRadius","backgroundColor","values","color","tag","background","text","fontFamily","lato","fontSize","font","s","lineHeight","TagLabel","overflow","textOverflow","whiteSpace","ClearButton","PictogramButton","_ref2","Tag","_ref3","onClear","clearBtnAriaLabel","dataE2eTestId","React","createElement","icon","onClick"],"mappings":"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"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { TagProps } from "../Tag/Tag";
|
|
3
|
+
declare type BaseTagGroupProps = {
|
|
4
|
+
tags: TagProps[];
|
|
5
|
+
colorVariant?: TagProps["colorVariant"];
|
|
6
|
+
"data-e2e-test-id"?: string;
|
|
7
|
+
};
|
|
8
|
+
declare type ConditionalTagGroupProps = {
|
|
9
|
+
isTagRemovable?: false;
|
|
10
|
+
onRemoveTag?: never;
|
|
11
|
+
} | {
|
|
12
|
+
isTagRemovable: true;
|
|
13
|
+
onRemoveTag: (tag: TagProps) => void;
|
|
14
|
+
};
|
|
15
|
+
export declare type TagGroupProps = BaseTagGroupProps & ConditionalTagGroupProps;
|
|
16
|
+
export declare function TagGroup({ colorVariant, isTagRemovable, tags, onRemoveTag, "data-e2e-test-id": dataE2eTestId, }: TagGroupProps): React.ReactElement;
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import _styled from '@emotion/styled/base';
|
|
2
|
+
import React, { useState, useRef } from 'react';
|
|
3
|
+
import { keyframes } from '@emotion/react';
|
|
4
|
+
import { Tag, MAX_TAG_WIDTH } from '../Tag/Tag.js';
|
|
5
|
+
|
|
6
|
+
const shrink = currentWidth => keyframes({
|
|
7
|
+
from: {
|
|
8
|
+
width: `${currentWidth}px`
|
|
9
|
+
},
|
|
10
|
+
to: {
|
|
11
|
+
width: "0px"
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
const StyledContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
|
|
15
|
+
target: "e11cnm531"
|
|
16
|
+
} : {
|
|
17
|
+
target: "e11cnm531",
|
|
18
|
+
label: "StyledContainer"
|
|
19
|
+
})(_ref => {
|
|
20
|
+
let {
|
|
21
|
+
theme
|
|
22
|
+
} = _ref;
|
|
23
|
+
return {
|
|
24
|
+
display: "flex",
|
|
25
|
+
flexWrap: "wrap",
|
|
26
|
+
gap: theme.variables.size.spacing.xs
|
|
27
|
+
};
|
|
28
|
+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhZ0dyb3VwLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQ3dCIiwiZmlsZSI6IlRhZ0dyb3VwLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VTdGF0ZSwgdXNlUmVmIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGtleWZyYW1lcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHsgVGFnLCBUYWdQcm9wcywgTUFYX1RBR19XSURUSCB9IGZyb20gXCIuLi9UYWcvVGFnXCI7XG5cbnR5cGUgQmFzZVRhZ0dyb3VwUHJvcHMgPSB7XG4gIHRhZ3M6IFRhZ1Byb3BzW107XG4gIGNvbG9yVmFyaWFudD86IFRhZ1Byb3BzW1wiY29sb3JWYXJpYW50XCJdO1xuICBcImRhdGEtZTJlLXRlc3QtaWRcIj86IHN0cmluZztcbn07XG5cbnR5cGUgQ29uZGl0aW9uYWxUYWdHcm91cFByb3BzID1cbiAgfCB7XG4gICAgICBpc1RhZ1JlbW92YWJsZT86IGZhbHNlO1xuICAgICAgb25SZW1vdmVUYWc/OiBuZXZlcjtcbiAgICB9XG4gIHwge1xuICAgICAgaXNUYWdSZW1vdmFibGU6IHRydWU7XG4gICAgICBvblJlbW92ZVRhZzogKHRhZzogVGFnUHJvcHMpID0+IHZvaWQ7XG4gICAgfTtcblxuZXhwb3J0IHR5cGUgVGFnR3JvdXBQcm9wcyA9IEJhc2VUYWdHcm91cFByb3BzICYgQ29uZGl0aW9uYWxUYWdHcm91cFByb3BzO1xuXG5jb25zdCBzaHJpbmsgPSAoY3VycmVudFdpZHRoOiBudW1iZXIpID0+XG4gIGtleWZyYW1lcyh7XG4gICAgZnJvbToge1xuICAgICAgd2lkdGg6IGAke2N1cnJlbnRXaWR0aH1weGAsXG4gICAgfSxcbiAgICB0bzoge1xuICAgICAgd2lkdGg6IFwiMHB4XCIsXG4gICAgfSxcbiAgfSk7XG5cbmNvbnN0IFN0eWxlZENvbnRhaW5lciA9IHN0eWxlZC5kaXYoKHsgdGhlbWUgfSkgPT4gKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGZsZXhXcmFwOiBcIndyYXBcIixcbiAgZ2FwOiB0aGVtZS52YXJpYWJsZXMuc2l6ZS5zcGFjaW5nLnhzLFxufSkpO1xuXG50eXBlIFN0eWxlZFRhZ0NvbnRhaW5lclByb3BzID0ge1xuICB0b0JlUmVtb3ZlZD86IGJvb2xlYW47XG4gIHRhZ1dpZHRoPzogbnVtYmVyO1xufTtcbmNvbnN0IFN0eWxlZFRhZ0NvbnRhaW5lciA9IHN0eWxlZC5kaXY8U3R5bGVkVGFnQ29udGFpbmVyUHJvcHM+KFxuICAoeyB0aGVtZSwgdG9CZVJlbW92ZWQsIHRhZ1dpZHRoIH0pID0+ICh7XG4gICAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG5cbiAgICAuLi4odG9CZVJlbW92ZWQgJiYge1xuICAgICAgb3BhY2l0eTogMCxcbiAgICAgIG1hcmdpbkxlZnQ6IGAtJHt0aGVtZS52YXJpYWJsZXMuc2l6ZS5zcGFjaW5nLnhzfWAsXG4gICAgICBhbmltYXRpb246IGAwLjJzIGVhc2Utb3V0IDBzIG5vcm1hbCBmb3J3YXJkcyAke3Nocmluayh0YWdXaWR0aCl9YCxcbiAgICB9KSxcbiAgfSlcbik7XG5cbmV4cG9ydCBmdW5jdGlvbiBUYWdHcm91cCh7XG4gIGNvbG9yVmFyaWFudCA9IFwiZ3JheVwiLFxuICBpc1RhZ1JlbW92YWJsZSA9IGZhbHNlLFxuICB0YWdzLFxuICBvblJlbW92ZVRhZyxcbiAgXCJkYXRhLWUyZS10ZXN0LWlkXCI6IGRhdGFFMmVUZXN0SWQsXG59OiBUYWdHcm91cFByb3BzKTogUmVhY3QuUmVhY3RFbGVtZW50IHtcbiAgY29uc3QgW3RhZ1RvQmVSZW1vdmVkLCBzZXRUYWdUb0JlUmVtb3ZlZF0gPSB1c2VTdGF0ZShudWxsKTtcbiAgY29uc3QgY29udGFpbmVyUmVmID0gdXNlUmVmKCk7XG5cbiAgY29uc3QgaGFuZGxlVGFnUmVtb3ZlID0gKHRhZzogVGFnUHJvcHMsIGluZGV4OiBudW1iZXIpID0+IHtcbiAgICBsZXQgd2lkdGggPSBNQVhfVEFHX1dJRFRIO1xuXG4gICAgaWYgKGNvbnRhaW5lclJlZi5jdXJyZW50KSB7XG4gICAgICBjb25zdCBjb250YWluZXI6IEhUTUxEaXZFbGVtZW50ID0gY29udGFpbmVyUmVmLmN1cnJlbnQ7XG4gICAgICBjb25zdCB0YWdFbG0gPSBjb250YWluZXIuY2hpbGRyZW5baW5kZXhdO1xuXG4gICAgICB3aWR0aCA9IHRhZ0VsbS5jbGllbnRXaWR0aDtcbiAgICB9XG5cbiAgICBzZXRUYWdUb0JlUmVtb3ZlZCh7XG4gICAgICB0YWcsXG4gICAgICB0YWdXaWR0aDogd2lkdGgsXG4gICAgfSk7XG4gIH07XG5cbiAgLy8gUmVtb3ZlIFRhZyBhZnRlciBzaHJpbmsgYW5pbWF0aW9uXG4gIGNvbnN0IGhhbmRsZUFuaW1hdGlvbkVuZCA9ICgpID0+IHtcbiAgICBpZiAob25SZW1vdmVUYWcpIHtcbiAgICAgIG9uUmVtb3ZlVGFnKHRhZ1RvQmVSZW1vdmVkLnRhZyk7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IHRhZ0VsbXMgPSB0YWdzLm1hcCgodGFnLCBpbmRleCkgPT4ge1xuICAgIGNvbnN0IHsgbGFiZWwsIGNsZWFyQnRuQXJpYUxhYmVsIH0gPSB0YWc7XG5cbiAgICBpZiAoaXNUYWdSZW1vdmFibGUpIHtcbiAgICAgIGNvbnN0IGlzVG9CZVJlbW92ZWRUYWcgPVxuICAgICAgICB0YWdUb0JlUmVtb3ZlZCAmJiB0YWdUb0JlUmVtb3ZlZC50YWcubGFiZWwgPT09IGxhYmVsO1xuXG4gICAgICByZXR1cm4gKFxuICAgICAgICA8U3R5bGVkVGFnQ29udGFpbmVyXG4gICAgICAgICAga2V5PXtsYWJlbH1cbiAgICAgICAgICB0b0JlUmVtb3ZlZD17aXNUb0JlUmVtb3ZlZFRhZ31cbiAgICAgICAgICBvbkFuaW1hdGlvbkVuZD17aGFuZGxlQW5pbWF0aW9uRW5kfVxuICAgICAgICAgIHRhZ1dpZHRoPXtpc1RvQmVSZW1vdmVkVGFnICYmIHRhZ1RvQmVSZW1vdmVkLnRhZ1dpZHRofVxuICAgICAgICA+XG4gICAgICAgICAgPFRhZ1xuICAgICAgICAgICAgbGFiZWw9e2xhYmVsfVxuICAgICAgICAgICAgY29sb3JWYXJpYW50PXtjb2xvclZhcmlhbnR9XG4gICAgICAgICAgICBjbGVhckJ0bkFyaWFMYWJlbD17Y2xlYXJCdG5BcmlhTGFiZWx9XG4gICAgICAgICAgICBvbkNsZWFyPXsoKSA9PiBoYW5kbGVUYWdSZW1vdmUodGFnLCBpbmRleCl9XG4gICAgICAgICAgICBpc1JlbW92YWJsZVxuICAgICAgICAgIC8+XG4gICAgICAgIDwvU3R5bGVkVGFnQ29udGFpbmVyPlxuICAgICAgKTtcbiAgICB9XG5cbiAgICByZXR1cm4gPFRhZyBrZXk9e2xhYmVsfSBsYWJlbD17bGFiZWx9IGNvbG9yVmFyaWFudD17Y29sb3JWYXJpYW50fSAvPjtcbiAgfSk7XG5cbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkQ29udGFpbmVyXG4gICAgICBkYXRhLWUyZS10ZXN0LWlkPXtkYXRhRTJlVGVzdElkfVxuICAgICAgZGF0YS1kcy1pZD1cIlRhZ0dyb3VwXCJcbiAgICAgIHJlZj17Y29udGFpbmVyUmVmfVxuICAgID5cbiAgICAgIHt0YWdFbG1zfVxuICAgIDwvU3R5bGVkQ29udGFpbmVyPlxuICApO1xufVxuIl19 */");
|
|
29
|
+
const StyledTagContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
|
|
30
|
+
target: "e11cnm530"
|
|
31
|
+
} : {
|
|
32
|
+
target: "e11cnm530",
|
|
33
|
+
label: "StyledTagContainer"
|
|
34
|
+
})(_ref2 => {
|
|
35
|
+
let {
|
|
36
|
+
theme,
|
|
37
|
+
toBeRemoved,
|
|
38
|
+
tagWidth
|
|
39
|
+
} = _ref2;
|
|
40
|
+
return {
|
|
41
|
+
overflow: "hidden",
|
|
42
|
+
...(toBeRemoved && {
|
|
43
|
+
opacity: 0,
|
|
44
|
+
marginLeft: `-${theme.variables.size.spacing.xs}`,
|
|
45
|
+
animation: `0.2s ease-out 0s normal forwards ${shrink(tagWidth)}`
|
|
46
|
+
})
|
|
47
|
+
};
|
|
48
|
+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhZ0dyb3VwLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyQzJCIiwiZmlsZSI6IlRhZ0dyb3VwLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VTdGF0ZSwgdXNlUmVmIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGtleWZyYW1lcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHsgVGFnLCBUYWdQcm9wcywgTUFYX1RBR19XSURUSCB9IGZyb20gXCIuLi9UYWcvVGFnXCI7XG5cbnR5cGUgQmFzZVRhZ0dyb3VwUHJvcHMgPSB7XG4gIHRhZ3M6IFRhZ1Byb3BzW107XG4gIGNvbG9yVmFyaWFudD86IFRhZ1Byb3BzW1wiY29sb3JWYXJpYW50XCJdO1xuICBcImRhdGEtZTJlLXRlc3QtaWRcIj86IHN0cmluZztcbn07XG5cbnR5cGUgQ29uZGl0aW9uYWxUYWdHcm91cFByb3BzID1cbiAgfCB7XG4gICAgICBpc1RhZ1JlbW92YWJsZT86IGZhbHNlO1xuICAgICAgb25SZW1vdmVUYWc/OiBuZXZlcjtcbiAgICB9XG4gIHwge1xuICAgICAgaXNUYWdSZW1vdmFibGU6IHRydWU7XG4gICAgICBvblJlbW92ZVRhZzogKHRhZzogVGFnUHJvcHMpID0+IHZvaWQ7XG4gICAgfTtcblxuZXhwb3J0IHR5cGUgVGFnR3JvdXBQcm9wcyA9IEJhc2VUYWdHcm91cFByb3BzICYgQ29uZGl0aW9uYWxUYWdHcm91cFByb3BzO1xuXG5jb25zdCBzaHJpbmsgPSAoY3VycmVudFdpZHRoOiBudW1iZXIpID0+XG4gIGtleWZyYW1lcyh7XG4gICAgZnJvbToge1xuICAgICAgd2lkdGg6IGAke2N1cnJlbnRXaWR0aH1weGAsXG4gICAgfSxcbiAgICB0bzoge1xuICAgICAgd2lkdGg6IFwiMHB4XCIsXG4gICAgfSxcbiAgfSk7XG5cbmNvbnN0IFN0eWxlZENvbnRhaW5lciA9IHN0eWxlZC5kaXYoKHsgdGhlbWUgfSkgPT4gKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGZsZXhXcmFwOiBcIndyYXBcIixcbiAgZ2FwOiB0aGVtZS52YXJpYWJsZXMuc2l6ZS5zcGFjaW5nLnhzLFxufSkpO1xuXG50eXBlIFN0eWxlZFRhZ0NvbnRhaW5lclByb3BzID0ge1xuICB0b0JlUmVtb3ZlZD86IGJvb2xlYW47XG4gIHRhZ1dpZHRoPzogbnVtYmVyO1xufTtcbmNvbnN0IFN0eWxlZFRhZ0NvbnRhaW5lciA9IHN0eWxlZC5kaXY8U3R5bGVkVGFnQ29udGFpbmVyUHJvcHM+KFxuICAoeyB0aGVtZSwgdG9CZVJlbW92ZWQsIHRhZ1dpZHRoIH0pID0+ICh7XG4gICAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG5cbiAgICAuLi4odG9CZVJlbW92ZWQgJiYge1xuICAgICAgb3BhY2l0eTogMCxcbiAgICAgIG1hcmdpbkxlZnQ6IGAtJHt0aGVtZS52YXJpYWJsZXMuc2l6ZS5zcGFjaW5nLnhzfWAsXG4gICAgICBhbmltYXRpb246IGAwLjJzIGVhc2Utb3V0IDBzIG5vcm1hbCBmb3J3YXJkcyAke3Nocmluayh0YWdXaWR0aCl9YCxcbiAgICB9KSxcbiAgfSlcbik7XG5cbmV4cG9ydCBmdW5jdGlvbiBUYWdHcm91cCh7XG4gIGNvbG9yVmFyaWFudCA9IFwiZ3JheVwiLFxuICBpc1RhZ1JlbW92YWJsZSA9IGZhbHNlLFxuICB0YWdzLFxuICBvblJlbW92ZVRhZyxcbiAgXCJkYXRhLWUyZS10ZXN0LWlkXCI6IGRhdGFFMmVUZXN0SWQsXG59OiBUYWdHcm91cFByb3BzKTogUmVhY3QuUmVhY3RFbGVtZW50IHtcbiAgY29uc3QgW3RhZ1RvQmVSZW1vdmVkLCBzZXRUYWdUb0JlUmVtb3ZlZF0gPSB1c2VTdGF0ZShudWxsKTtcbiAgY29uc3QgY29udGFpbmVyUmVmID0gdXNlUmVmKCk7XG5cbiAgY29uc3QgaGFuZGxlVGFnUmVtb3ZlID0gKHRhZzogVGFnUHJvcHMsIGluZGV4OiBudW1iZXIpID0+IHtcbiAgICBsZXQgd2lkdGggPSBNQVhfVEFHX1dJRFRIO1xuXG4gICAgaWYgKGNvbnRhaW5lclJlZi5jdXJyZW50KSB7XG4gICAgICBjb25zdCBjb250YWluZXI6IEhUTUxEaXZFbGVtZW50ID0gY29udGFpbmVyUmVmLmN1cnJlbnQ7XG4gICAgICBjb25zdCB0YWdFbG0gPSBjb250YWluZXIuY2hpbGRyZW5baW5kZXhdO1xuXG4gICAgICB3aWR0aCA9IHRhZ0VsbS5jbGllbnRXaWR0aDtcbiAgICB9XG5cbiAgICBzZXRUYWdUb0JlUmVtb3ZlZCh7XG4gICAgICB0YWcsXG4gICAgICB0YWdXaWR0aDogd2lkdGgsXG4gICAgfSk7XG4gIH07XG5cbiAgLy8gUmVtb3ZlIFRhZyBhZnRlciBzaHJpbmsgYW5pbWF0aW9uXG4gIGNvbnN0IGhhbmRsZUFuaW1hdGlvbkVuZCA9ICgpID0+IHtcbiAgICBpZiAob25SZW1vdmVUYWcpIHtcbiAgICAgIG9uUmVtb3ZlVGFnKHRhZ1RvQmVSZW1vdmVkLnRhZyk7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IHRhZ0VsbXMgPSB0YWdzLm1hcCgodGFnLCBpbmRleCkgPT4ge1xuICAgIGNvbnN0IHsgbGFiZWwsIGNsZWFyQnRuQXJpYUxhYmVsIH0gPSB0YWc7XG5cbiAgICBpZiAoaXNUYWdSZW1vdmFibGUpIHtcbiAgICAgIGNvbnN0IGlzVG9CZVJlbW92ZWRUYWcgPVxuICAgICAgICB0YWdUb0JlUmVtb3ZlZCAmJiB0YWdUb0JlUmVtb3ZlZC50YWcubGFiZWwgPT09IGxhYmVsO1xuXG4gICAgICByZXR1cm4gKFxuICAgICAgICA8U3R5bGVkVGFnQ29udGFpbmVyXG4gICAgICAgICAga2V5PXtsYWJlbH1cbiAgICAgICAgICB0b0JlUmVtb3ZlZD17aXNUb0JlUmVtb3ZlZFRhZ31cbiAgICAgICAgICBvbkFuaW1hdGlvbkVuZD17aGFuZGxlQW5pbWF0aW9uRW5kfVxuICAgICAgICAgIHRhZ1dpZHRoPXtpc1RvQmVSZW1vdmVkVGFnICYmIHRhZ1RvQmVSZW1vdmVkLnRhZ1dpZHRofVxuICAgICAgICA+XG4gICAgICAgICAgPFRhZ1xuICAgICAgICAgICAgbGFiZWw9e2xhYmVsfVxuICAgICAgICAgICAgY29sb3JWYXJpYW50PXtjb2xvclZhcmlhbnR9XG4gICAgICAgICAgICBjbGVhckJ0bkFyaWFMYWJlbD17Y2xlYXJCdG5BcmlhTGFiZWx9XG4gICAgICAgICAgICBvbkNsZWFyPXsoKSA9PiBoYW5kbGVUYWdSZW1vdmUodGFnLCBpbmRleCl9XG4gICAgICAgICAgICBpc1JlbW92YWJsZVxuICAgICAgICAgIC8+XG4gICAgICAgIDwvU3R5bGVkVGFnQ29udGFpbmVyPlxuICAgICAgKTtcbiAgICB9XG5cbiAgICByZXR1cm4gPFRhZyBrZXk9e2xhYmVsfSBsYWJlbD17bGFiZWx9IGNvbG9yVmFyaWFudD17Y29sb3JWYXJpYW50fSAvPjtcbiAgfSk7XG5cbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkQ29udGFpbmVyXG4gICAgICBkYXRhLWUyZS10ZXN0LWlkPXtkYXRhRTJlVGVzdElkfVxuICAgICAgZGF0YS1kcy1pZD1cIlRhZ0dyb3VwXCJcbiAgICAgIHJlZj17Y29udGFpbmVyUmVmfVxuICAgID5cbiAgICAgIHt0YWdFbG1zfVxuICAgIDwvU3R5bGVkQ29udGFpbmVyPlxuICApO1xufVxuIl19 */");
|
|
49
|
+
function TagGroup(_ref3) {
|
|
50
|
+
let {
|
|
51
|
+
colorVariant = "gray",
|
|
52
|
+
isTagRemovable = false,
|
|
53
|
+
tags,
|
|
54
|
+
onRemoveTag,
|
|
55
|
+
"data-e2e-test-id": dataE2eTestId
|
|
56
|
+
} = _ref3;
|
|
57
|
+
const [tagToBeRemoved, setTagToBeRemoved] = useState(null);
|
|
58
|
+
const containerRef = useRef();
|
|
59
|
+
const handleTagRemove = (tag, index) => {
|
|
60
|
+
let width = MAX_TAG_WIDTH;
|
|
61
|
+
if (containerRef.current) {
|
|
62
|
+
const container = containerRef.current;
|
|
63
|
+
const tagElm = container.children[index];
|
|
64
|
+
width = tagElm.clientWidth;
|
|
65
|
+
}
|
|
66
|
+
setTagToBeRemoved({
|
|
67
|
+
tag,
|
|
68
|
+
tagWidth: width
|
|
69
|
+
});
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
// Remove Tag after shrink animation
|
|
73
|
+
const handleAnimationEnd = () => {
|
|
74
|
+
if (onRemoveTag) {
|
|
75
|
+
onRemoveTag(tagToBeRemoved.tag);
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
const tagElms = tags.map((tag, index) => {
|
|
79
|
+
const {
|
|
80
|
+
label,
|
|
81
|
+
clearBtnAriaLabel
|
|
82
|
+
} = tag;
|
|
83
|
+
if (isTagRemovable) {
|
|
84
|
+
const isToBeRemovedTag = tagToBeRemoved && tagToBeRemoved.tag.label === label;
|
|
85
|
+
return /*#__PURE__*/React.createElement(StyledTagContainer, {
|
|
86
|
+
key: label,
|
|
87
|
+
toBeRemoved: isToBeRemovedTag,
|
|
88
|
+
onAnimationEnd: handleAnimationEnd,
|
|
89
|
+
tagWidth: isToBeRemovedTag && tagToBeRemoved.tagWidth
|
|
90
|
+
}, /*#__PURE__*/React.createElement(Tag, {
|
|
91
|
+
label: label,
|
|
92
|
+
colorVariant: colorVariant,
|
|
93
|
+
clearBtnAriaLabel: clearBtnAriaLabel,
|
|
94
|
+
onClear: () => handleTagRemove(tag, index),
|
|
95
|
+
isRemovable: true
|
|
96
|
+
}));
|
|
97
|
+
}
|
|
98
|
+
return /*#__PURE__*/React.createElement(Tag, {
|
|
99
|
+
key: label,
|
|
100
|
+
label: label,
|
|
101
|
+
colorVariant: colorVariant
|
|
102
|
+
});
|
|
103
|
+
});
|
|
104
|
+
return /*#__PURE__*/React.createElement(StyledContainer, {
|
|
105
|
+
"data-e2e-test-id": dataE2eTestId,
|
|
106
|
+
"data-ds-id": "TagGroup",
|
|
107
|
+
ref: containerRef
|
|
108
|
+
}, tagElms);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
export { TagGroup };
|
|
112
|
+
//# sourceMappingURL=TagGroup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TagGroup.js","sources":["../../../../../src/components/TagGroup/TagGroup.tsx"],"sourcesContent":["import React, { useState, useRef } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { keyframes } from \"@emotion/react\";\nimport { Tag, TagProps, MAX_TAG_WIDTH } from \"../Tag/Tag\";\n\ntype BaseTagGroupProps = {\n tags: TagProps[];\n colorVariant?: TagProps[\"colorVariant\"];\n \"data-e2e-test-id\"?: string;\n};\n\ntype ConditionalTagGroupProps =\n | {\n isTagRemovable?: false;\n onRemoveTag?: never;\n }\n | {\n isTagRemovable: true;\n onRemoveTag: (tag: TagProps) => void;\n };\n\nexport type TagGroupProps = BaseTagGroupProps & ConditionalTagGroupProps;\n\nconst shrink = (currentWidth: number) =>\n keyframes({\n from: {\n width: `${currentWidth}px`,\n },\n to: {\n width: \"0px\",\n },\n });\n\nconst StyledContainer = styled.div(({ theme }) => ({\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: theme.variables.size.spacing.xs,\n}));\n\ntype StyledTagContainerProps = {\n toBeRemoved?: boolean;\n tagWidth?: number;\n};\nconst StyledTagContainer = styled.div<StyledTagContainerProps>(\n ({ theme, toBeRemoved, tagWidth }) => ({\n overflow: \"hidden\",\n\n ...(toBeRemoved && {\n opacity: 0,\n marginLeft: `-${theme.variables.size.spacing.xs}`,\n animation: `0.2s ease-out 0s normal forwards ${shrink(tagWidth)}`,\n }),\n })\n);\n\nexport function TagGroup({\n colorVariant = \"gray\",\n isTagRemovable = false,\n tags,\n onRemoveTag,\n \"data-e2e-test-id\": dataE2eTestId,\n}: TagGroupProps): React.ReactElement {\n const [tagToBeRemoved, setTagToBeRemoved] = useState(null);\n const containerRef = useRef();\n\n const handleTagRemove = (tag: TagProps, index: number) => {\n let width = MAX_TAG_WIDTH;\n\n if (containerRef.current) {\n const container: HTMLDivElement = containerRef.current;\n const tagElm = container.children[index];\n\n width = tagElm.clientWidth;\n }\n\n setTagToBeRemoved({\n tag,\n tagWidth: width,\n });\n };\n\n // Remove Tag after shrink animation\n const handleAnimationEnd = () => {\n if (onRemoveTag) {\n onRemoveTag(tagToBeRemoved.tag);\n }\n };\n\n const tagElms = tags.map((tag, index) => {\n const { label, clearBtnAriaLabel } = tag;\n\n if (isTagRemovable) {\n const isToBeRemovedTag =\n tagToBeRemoved && tagToBeRemoved.tag.label === label;\n\n return (\n <StyledTagContainer\n key={label}\n toBeRemoved={isToBeRemovedTag}\n onAnimationEnd={handleAnimationEnd}\n tagWidth={isToBeRemovedTag && tagToBeRemoved.tagWidth}\n >\n <Tag\n label={label}\n colorVariant={colorVariant}\n clearBtnAriaLabel={clearBtnAriaLabel}\n onClear={() => handleTagRemove(tag, index)}\n isRemovable\n />\n </StyledTagContainer>\n );\n }\n\n return <Tag key={label} label={label} colorVariant={colorVariant} />;\n });\n\n return (\n <StyledContainer\n data-e2e-test-id={dataE2eTestId}\n data-ds-id=\"TagGroup\"\n ref={containerRef}\n >\n {tagElms}\n </StyledContainer>\n );\n}\n"],"names":["shrink","currentWidth","keyframes","from","width","to","StyledContainer","_styled","process","env","NODE_ENV","target","label","_ref","theme","display","flexWrap","gap","variables","size","spacing","xs","StyledTagContainer","_ref2","toBeRemoved","tagWidth","overflow","opacity","marginLeft","animation","TagGroup","_ref3","colorVariant","isTagRemovable","tags","onRemoveTag","dataE2eTestId","tagToBeRemoved","setTagToBeRemoved","useState","containerRef","useRef","handleTagRemove","tag","index","MAX_TAG_WIDTH","current","container","tagElm","children","clientWidth","handleAnimationEnd","tagElms","map","clearBtnAriaLabel","isToBeRemovedTag","React","createElement","key","onAnimationEnd","Tag","onClear","isRemovable","ref"],"mappings":"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"}
|
package/build/esm/src/index.d.ts
CHANGED
package/build/esm/src/index.js
CHANGED
|
@@ -45,7 +45,8 @@ export { LoadingSpinner } from './components/LoadingSpinner/LoadingSpinner.js';
|
|
|
45
45
|
export { Pagination } from './components/Pagination/Pagination.js';
|
|
46
46
|
export { SegmentedControl } from './components/Form/SegmentedControl/SegmentedControl.js';
|
|
47
47
|
export { Tooltip } from './components/Tooltip/Tooltip.js';
|
|
48
|
-
export { Tag } from './components/Tag/Tag.js';
|
|
48
|
+
export { MAX_TAG_WIDTH, Tag } from './components/Tag/Tag.js';
|
|
49
|
+
export { TagGroup } from './components/TagGroup/TagGroup.js';
|
|
49
50
|
export { Input } from './components/Form/Input/Input.js';
|
|
50
51
|
export { PasswordInput } from './components/Form/PasswordInput/PasswordInput.js';
|
|
51
52
|
export { BaseDataTable, DataTable } from './components/DataTable/DataTable.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/index.ts"],"sourcesContent":["import {\n ambossVisualConfiguration,\n VisualConfig,\n} from \"../build-tokens/visualConfig\";\n\nexport type { VisualConfig };\nexport const { dark, light } = ambossVisualConfiguration;\nexport { ThemeProvider, CacheProvider } from \"@emotion/react\";\nexport { default as createCache } from \"@emotion/cache\";\nexport * from \"./components/Card/Card\";\nexport * from \"./components/Card/CardBox\";\nexport * from \"./components/Box/Box\";\nexport * from \"./components/Inline/Inline\";\nexport * from \"./components/Stack/Stack\";\nexport * from \"./components/Typography/Header/Header\";\nexport * from \"./components/Typography/Text/Text\";\nexport * from \"./components/Typography/TextClamped/TextClamped\";\nexport * from \"./components/Typography/StyledText/StyledText\";\nexport * from \"./components/Link/Link\";\nexport * from \"./components/Icon/Icon\";\nexport * from \"./components/Button/Button\";\nexport * from \"./components/Divider/Divider\";\nexport * from \"./components/Column/Columns\";\nexport * from \"./components/Tabs/Tabs\";\nexport * from \"./components/Badge/Badge\";\nexport * from \"./components/SearchResult/SearchResult\";\nexport * from \"./components/Form/ToggleButton/ToggleButton\";\nexport * from \"./components/DropdownMenu/DropdownMenu\";\nexport * from \"./components/Form/FormFieldGroup/FormFieldGroup\";\nexport * from \"./components/Form/Input\";\nexport * from \"./components/Form/Checkbox/Checkbox\";\nexport * from \"./components/Form/Toggle/Toggle\";\nexport * from \"./components/Form/Radio/Radio\";\nexport * from \"./components/Form/RadioButton/RadioButton\";\nexport * from \"./components/Form/Textarea/Textarea\";\nexport * from \"./components/Form/Select/Select\";\nexport * from \"./components/SubThemeProvider/SubThemeProvider\";\nexport * from \"./components/PictogramButton/PictogramButton\";\nexport * from \"./components/MediaViewerBar/MediaViewerBar\";\nexport * from \"./components/SegmentedProgressBar/SegmentedProgressBar\";\nexport * from \"./components/ProgressBar/ProgressBar\";\nexport * from \"./components/Container/Container\";\nexport * from \"./components/Form/PasswordInput\";\nexport * from \"./components/RoundButton/RoundButton\";\nexport * from \"./components/Notification/Notification\";\nexport * from \"./components/Logo/Logo\";\nexport * from \"./components/MediaItem/MediaItem\";\nexport * from \"./components/Callout/Callout\";\nexport * from \"./components/Patterns/Modal/Modal\";\nexport * from \"./components/Patterns/ButtonGroup/ButtonGroup\";\nexport * from \"./components/Collapsible/Collapsible\";\nexport * from \"./components/LoadingSpinner/LoadingSpinner\";\nexport * from \"./components/Pagination/Pagination\";\nexport * from \"./components/DataTable\";\nexport * from \"./components/Form/SegmentedControl/SegmentedControl\";\nexport * from \"./components/Tooltip/Tooltip\";\nexport * from \"./components/Tag/Tag\";\n"],"names":["dark","light","ambossVisualConfiguration"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/index.ts"],"sourcesContent":["import {\n ambossVisualConfiguration,\n VisualConfig,\n} from \"../build-tokens/visualConfig\";\n\nexport type { VisualConfig };\nexport const { dark, light } = ambossVisualConfiguration;\nexport { ThemeProvider, CacheProvider } from \"@emotion/react\";\nexport { default as createCache } from \"@emotion/cache\";\nexport * from \"./components/Card/Card\";\nexport * from \"./components/Card/CardBox\";\nexport * from \"./components/Box/Box\";\nexport * from \"./components/Inline/Inline\";\nexport * from \"./components/Stack/Stack\";\nexport * from \"./components/Typography/Header/Header\";\nexport * from \"./components/Typography/Text/Text\";\nexport * from \"./components/Typography/TextClamped/TextClamped\";\nexport * from \"./components/Typography/StyledText/StyledText\";\nexport * from \"./components/Link/Link\";\nexport * from \"./components/Icon/Icon\";\nexport * from \"./components/Button/Button\";\nexport * from \"./components/Divider/Divider\";\nexport * from \"./components/Column/Columns\";\nexport * from \"./components/Tabs/Tabs\";\nexport * from \"./components/Badge/Badge\";\nexport * from \"./components/SearchResult/SearchResult\";\nexport * from \"./components/Form/ToggleButton/ToggleButton\";\nexport * from \"./components/DropdownMenu/DropdownMenu\";\nexport * from \"./components/Form/FormFieldGroup/FormFieldGroup\";\nexport * from \"./components/Form/Input\";\nexport * from \"./components/Form/Checkbox/Checkbox\";\nexport * from \"./components/Form/Toggle/Toggle\";\nexport * from \"./components/Form/Radio/Radio\";\nexport * from \"./components/Form/RadioButton/RadioButton\";\nexport * from \"./components/Form/Textarea/Textarea\";\nexport * from \"./components/Form/Select/Select\";\nexport * from \"./components/SubThemeProvider/SubThemeProvider\";\nexport * from \"./components/PictogramButton/PictogramButton\";\nexport * from \"./components/MediaViewerBar/MediaViewerBar\";\nexport * from \"./components/SegmentedProgressBar/SegmentedProgressBar\";\nexport * from \"./components/ProgressBar/ProgressBar\";\nexport * from \"./components/Container/Container\";\nexport * from \"./components/Form/PasswordInput\";\nexport * from \"./components/RoundButton/RoundButton\";\nexport * from \"./components/Notification/Notification\";\nexport * from \"./components/Logo/Logo\";\nexport * from \"./components/MediaItem/MediaItem\";\nexport * from \"./components/Callout/Callout\";\nexport * from \"./components/Patterns/Modal/Modal\";\nexport * from \"./components/Patterns/ButtonGroup/ButtonGroup\";\nexport * from \"./components/Collapsible/Collapsible\";\nexport * from \"./components/LoadingSpinner/LoadingSpinner\";\nexport * from \"./components/Pagination/Pagination\";\nexport * from \"./components/DataTable\";\nexport * from \"./components/Form/SegmentedControl/SegmentedControl\";\nexport * from \"./components/Tooltip/Tooltip\";\nexport * from \"./components/Tag/Tag\";\nexport * from \"./components/TagGroup/TagGroup\";\n"],"names":["dark","light","ambossVisualConfiguration"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMa,MAAA;EAAEA,IAAI;AAAEC,EAAAA,KAAAA;AAAM,CAAC,GAAGC;;;;"}
|
package/package.json
CHANGED
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
// Do not edit directly
|
|
3
|
-
// Generated on Wed, 20 Sep 2023 13:11:41 GMT
|
|
4
|
-
|
|
5
|
-
$dark-color-canvas: #1e2125;
|
|
6
|
-
$dark-color-background-primary-default: #24282d;
|
|
7
|
-
$dark-color-background-secondary-default: #282c34;
|
|
8
|
-
$dark-color-background-secondary-hover: #393e47;
|
|
9
|
-
$dark-color-background-secondary-active: #393e47;
|
|
10
|
-
$dark-color-background-accent-default: #28816b;
|
|
11
|
-
$dark-color-background-accent-hover: #41a48a;
|
|
12
|
-
$dark-color-background-accent-active: #233d3d;
|
|
13
|
-
$dark-color-background-accent-disabled: rgba(40, 129, 107, 0.3);
|
|
14
|
-
$dark-color-background-onAccent-default: #ffffff;
|
|
15
|
-
$dark-color-background-onAccent-hover: #ffffff;
|
|
16
|
-
$dark-color-background-onAccent-active: #ffffff;
|
|
17
|
-
$dark-color-background-onAccent-disabled: rgba(255, 255, 255, 0.6);
|
|
18
|
-
$dark-color-background-error-default: #a45355;
|
|
19
|
-
$dark-color-background-error-hover: #d07c7c;
|
|
20
|
-
$dark-color-background-error-active: #4d3237;
|
|
21
|
-
$dark-color-background-error-disabled: rgba(164, 83, 85, 0.3);
|
|
22
|
-
$dark-color-background-success-default: #28816b;
|
|
23
|
-
$dark-color-background-info-default: #2f538a;
|
|
24
|
-
$dark-color-background-warning-default: #a4792d;
|
|
25
|
-
$dark-color-background-accentSubtle-default: #233d3d;
|
|
26
|
-
$dark-color-background-errorSubtle-default: #312b31;
|
|
27
|
-
$dark-color-background-successSubtle-default: #262e33;
|
|
28
|
-
$dark-color-background-infoSubtle-default: #282e39;
|
|
29
|
-
$dark-color-background-warningSubtle-default: #32302f;
|
|
30
|
-
$dark-color-background-highlight-default: #40454f;
|
|
31
|
-
$dark-color-background-highlight-hover: #393e47;
|
|
32
|
-
$dark-color-background-contrast-default: #ced1d6;
|
|
33
|
-
$dark-color-background-transparent-default: rgba(255, 255, 255, 0);
|
|
34
|
-
$dark-color-background-transparent-hover: rgba(147, 151, 159, 0.08);
|
|
35
|
-
$dark-color-background-transparent-active: rgba(147, 151, 159, 0.08);
|
|
36
|
-
$dark-color-background-backdrop-default: rgba(0, 0, 0, 0.6);
|
|
37
|
-
$dark-color-text-primary-default: #ced1d6;
|
|
38
|
-
$dark-color-text-primary-hover: #ffffff;
|
|
39
|
-
$dark-color-text-secondary-default: #b9bcc3;
|
|
40
|
-
$dark-color-text-secondary-hover: #ced1d6;
|
|
41
|
-
$dark-color-text-tertiary-default: #93979f;
|
|
42
|
-
$dark-color-text-tertiary-disabled: rgba(216, 218, 222, 0.3);
|
|
43
|
-
$dark-color-text-tertiary-hover: #b9bcc3;
|
|
44
|
-
$dark-color-text-quaternary-default: #757a84;
|
|
45
|
-
$dark-color-text-accent-default: #41a48a;
|
|
46
|
-
$dark-color-text-accent-hover: #a6f2dd;
|
|
47
|
-
$dark-color-text-onAccent-default: #ffffff;
|
|
48
|
-
$dark-color-text-onAccent-disabled: rgba(216, 218, 222, 0.3);
|
|
49
|
-
$dark-color-text-info-default: #99c1fa;
|
|
50
|
-
$dark-color-text-error-default: #f49a9a;
|
|
51
|
-
$dark-color-text-error-disabled: rgba(244, 154, 154, 0.3);
|
|
52
|
-
$dark-color-text-warning-default: #fae0b3;
|
|
53
|
-
$dark-color-text-success-default: #a6f2dd;
|
|
54
|
-
$dark-color-icon-primary: #d8dade;
|
|
55
|
-
$dark-color-icon-secondary: #ced1d6;
|
|
56
|
-
$dark-color-icon-tertiary: #93979f;
|
|
57
|
-
$dark-color-icon-quaternary: #757a84;
|
|
58
|
-
$dark-color-icon-accent: #41a48a;
|
|
59
|
-
$dark-color-icon-onAccent: #ffffff;
|
|
60
|
-
$dark-color-icon-info: #6e95cf;
|
|
61
|
-
$dark-color-icon-error: #d07c7c;
|
|
62
|
-
$dark-color-icon-warning: #cbac76;
|
|
63
|
-
$dark-color-icon-success: #41a48a;
|
|
64
|
-
$dark-color-icon-brand: #62b2bc;
|
|
65
|
-
$dark-color-border-primary-default: #5b5f67;
|
|
66
|
-
$dark-color-border-primary-hover: #757a84;
|
|
67
|
-
$dark-color-border-primary-active: #93979f;
|
|
68
|
-
$dark-color-border-primary-disabled: rgba(147, 151, 159, 0.08);
|
|
69
|
-
$dark-color-border-secondary-default: rgba(147, 149, 159, 0.3);
|
|
70
|
-
$dark-color-border-accent-default: #41a48a;
|
|
71
|
-
$dark-color-border-error-default: #d07c7c;
|
|
72
|
-
$dark-color-border-accentSubtle-default: #28816b;
|
|
73
|
-
$dark-color-divider-primary: #40454f;
|
|
74
|
-
$dark-color-divider-secondary: rgba(147, 151, 159, 0.08);
|
|
75
|
-
$dark-color-toggle-background-highlight: #b2ab39;
|
|
76
|
-
$dark-color-toggle-border-highlight: #b2ab39;
|
|
77
|
-
$dark-color-badge-background-default: transparent;
|
|
78
|
-
$dark-color-badge-background-green: transparent;
|
|
79
|
-
$dark-color-badge-background-blue: transparent;
|
|
80
|
-
$dark-color-badge-background-yellow: transparent;
|
|
81
|
-
$dark-color-badge-background-brand: transparent;
|
|
82
|
-
$dark-color-badge-background-purple: transparent;
|
|
83
|
-
$dark-color-badge-background-red: transparent;
|
|
84
|
-
$dark-color-badge-background-gray: transparent;
|
|
85
|
-
$dark-color-badge-text-default: #ced1d6;
|
|
86
|
-
$dark-color-badge-text-green: #41a48a;
|
|
87
|
-
$dark-color-badge-text-blue: #6e95cf;
|
|
88
|
-
$dark-color-badge-text-yellow: #cbac76;
|
|
89
|
-
$dark-color-badge-text-brand: #62b2bc;
|
|
90
|
-
$dark-color-badge-text-purple: #ad97f7;
|
|
91
|
-
$dark-color-badge-text-red: #d07c7c;
|
|
92
|
-
$dark-color-badge-text-gray: #93979f;
|
|
93
|
-
$dark-color-badge-border-default: #393e47;
|
|
94
|
-
$dark-color-badge-border-green: #393e47;
|
|
95
|
-
$dark-color-badge-border-blue: #393e47;
|
|
96
|
-
$dark-color-badge-border-yellow: #393e47;
|
|
97
|
-
$dark-color-badge-border-brand: #393e47;
|
|
98
|
-
$dark-color-badge-border-purple: #393e47;
|
|
99
|
-
$dark-color-badge-border-red: #393e47;
|
|
100
|
-
$dark-color-badge-border-gray: #393e47;
|
|
101
|
-
$dark-color-segmented-progress-bar-monochrome: #ced1d6;
|
|
102
|
-
$dark-color-segmented-progress-bar-success: #28816b;
|
|
103
|
-
$dark-color-segmented-progress-bar-warning: #a4792d;
|
|
104
|
-
$dark-color-segmented-progress-bar-alert: #a45355;
|
|
105
|
-
$dark-color-segmented-progress-bar-in-progress: #5b5f67;
|
|
106
|
-
$dark-color-tag-background-gray: #5b5f67;
|
|
107
|
-
$dark-color-tag-background-blue: #2f538a;
|
|
108
|
-
$dark-color-tag-text-gray: #ced1d6;
|
|
109
|
-
$dark-color-tag-text-blue: #e7effe;
|
|
110
|
-
$dark-color-destructive-tertiary-button-background-hover: rgba(164, 83, 85, 0.08);
|
|
111
|
-
$dark-color-destructive-tertiary-button-background-active: rgba(164, 83, 85, 0.08);
|
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
// Do not edit directly
|
|
3
|
-
// Generated on Wed, 20 Sep 2023 13:11:41 GMT
|
|
4
|
-
|
|
5
|
-
$light-color-canvas: #eef2f5;
|
|
6
|
-
$light-color-background-primary-default: #ffffff;
|
|
7
|
-
$light-color-background-secondary-default: #f5f7f9;
|
|
8
|
-
$light-color-background-secondary-hover: #eef2f5;
|
|
9
|
-
$light-color-background-secondary-active: #ffffff;
|
|
10
|
-
$light-color-background-accent-default: #0fa980;
|
|
11
|
-
$light-color-background-accent-hover: #0b8363;
|
|
12
|
-
$light-color-background-accent-active: #0a5c45;
|
|
13
|
-
$light-color-background-accent-disabled: rgba(15, 169, 128, 0.3);
|
|
14
|
-
$light-color-background-onAccent-default: #ffffff;
|
|
15
|
-
$light-color-background-onAccent-hover: #ffffff;
|
|
16
|
-
$light-color-background-onAccent-active: #ffffff;
|
|
17
|
-
$light-color-background-onAccent-disabled: rgba(255, 255, 255, 0.6);
|
|
18
|
-
$light-color-background-error-default: #dc4847;
|
|
19
|
-
$light-color-background-error-hover: #c02725;
|
|
20
|
-
$light-color-background-error-active: #c02725;
|
|
21
|
-
$light-color-background-error-disabled: rgba(238, 97, 96, 0.3);
|
|
22
|
-
$light-color-background-success-default: #0b8363;
|
|
23
|
-
$light-color-background-info-default: #295dae;
|
|
24
|
-
$light-color-background-warning-default: #df9411;
|
|
25
|
-
$light-color-background-accentSubtle-default: #e8f8f4;
|
|
26
|
-
$light-color-background-errorSubtle-default: #fde8e8;
|
|
27
|
-
$light-color-background-successSubtle-default: #e8f8f4;
|
|
28
|
-
$light-color-background-infoSubtle-default: #e7effe;
|
|
29
|
-
$light-color-background-warningSubtle-default: #fef3e1;
|
|
30
|
-
$light-color-background-highlight-default: #607585;
|
|
31
|
-
$light-color-background-highlight-hover: #40515e;
|
|
32
|
-
$light-color-background-contrast-default: #314554;
|
|
33
|
-
$light-color-background-transparent-default: rgba(255, 255, 255, 0);
|
|
34
|
-
$light-color-background-transparent-hover: rgba(96, 117, 133, 0.08);
|
|
35
|
-
$light-color-background-transparent-active: rgba(96, 117, 133, 0.08);
|
|
36
|
-
$light-color-background-backdrop-default: rgba(0, 0, 0, 0.6);
|
|
37
|
-
$light-color-text-primary-default: #1a1c1c;
|
|
38
|
-
$light-color-text-primary-hover: #1a1c1c;
|
|
39
|
-
$light-color-text-secondary-default: #40515e;
|
|
40
|
-
$light-color-text-secondary-hover: #40515e;
|
|
41
|
-
$light-color-text-tertiary-default: #607585;
|
|
42
|
-
$light-color-text-tertiary-disabled: rgba(64, 81, 94, 0.3);
|
|
43
|
-
$light-color-text-tertiary-hover: #40515e;
|
|
44
|
-
$light-color-text-quaternary-default: #a3b2bd;
|
|
45
|
-
$light-color-text-accent-default: #0b8363;
|
|
46
|
-
$light-color-text-accent-hover: #0a5c45;
|
|
47
|
-
$light-color-text-onAccent-default: #ffffff;
|
|
48
|
-
$light-color-text-onAccent-disabled: rgba(255, 255, 255, 0.6);
|
|
49
|
-
$light-color-text-info-default: #1c427d;
|
|
50
|
-
$light-color-text-error-default: #c02725;
|
|
51
|
-
$light-color-text-error-disabled: rgba(192, 39, 37, 0.3);
|
|
52
|
-
$light-color-text-warning-default: #314554;
|
|
53
|
-
$light-color-text-success-default: #0a5c45;
|
|
54
|
-
$light-color-icon-primary: #1a1c1c;
|
|
55
|
-
$light-color-icon-secondary: #40515e;
|
|
56
|
-
$light-color-icon-tertiary: #607585;
|
|
57
|
-
$light-color-icon-quaternary: #a3b2bd;
|
|
58
|
-
$light-color-icon-accent: #0b8363;
|
|
59
|
-
$light-color-icon-onAccent: #ffffff;
|
|
60
|
-
$light-color-icon-info: #295dae;
|
|
61
|
-
$light-color-icon-error: #dc4847;
|
|
62
|
-
$light-color-icon-warning: #df9411;
|
|
63
|
-
$light-color-icon-success: #0b8363;
|
|
64
|
-
$light-color-icon-brand: #0aa6b8;
|
|
65
|
-
$light-color-border-primary-default: #a3b2bd;
|
|
66
|
-
$light-color-border-primary-hover: #607585;
|
|
67
|
-
$light-color-border-primary-active: #40515e;
|
|
68
|
-
$light-color-border-primary-disabled: rgba(163, 178, 189, 0.3);
|
|
69
|
-
$light-color-border-secondary-default: rgba(163, 178, 189, 0.3);
|
|
70
|
-
$light-color-border-accent-default: #0b8363;
|
|
71
|
-
$light-color-border-error-default: #dc4847;
|
|
72
|
-
$light-color-border-accentSubtle-default: #8adcc6;
|
|
73
|
-
$light-color-divider-primary: #e0e6eb;
|
|
74
|
-
$light-color-divider-secondary: rgba(163, 178, 189, 0.3);
|
|
75
|
-
$light-color-toggle-background-highlight: #f3eb75;
|
|
76
|
-
$light-color-toggle-border-highlight: #f3eb75;
|
|
77
|
-
$light-color-badge-background-default: #ffffff;
|
|
78
|
-
$light-color-badge-background-green: #e8f8f4;
|
|
79
|
-
$light-color-badge-background-blue: #e7effe;
|
|
80
|
-
$light-color-badge-background-yellow: #fef3e1;
|
|
81
|
-
$light-color-badge-background-brand: #e7f6f8;
|
|
82
|
-
$light-color-badge-background-purple: #f2effb;
|
|
83
|
-
$light-color-badge-background-red: #fde8e8;
|
|
84
|
-
$light-color-badge-background-gray: #eef2f5;
|
|
85
|
-
$light-color-badge-text-default: #1a1c1c;
|
|
86
|
-
$light-color-badge-text-green: #0b8363;
|
|
87
|
-
$light-color-badge-text-blue: #295dae;
|
|
88
|
-
$light-color-badge-text-yellow: #9a6304;
|
|
89
|
-
$light-color-badge-text-brand: #067c89;
|
|
90
|
-
$light-color-badge-text-purple: #5d44ab;
|
|
91
|
-
$light-color-badge-text-red: #c02725;
|
|
92
|
-
$light-color-badge-text-gray: #607585;
|
|
93
|
-
$light-color-badge-border-default: #e0e6eb;
|
|
94
|
-
$light-color-badge-border-green: #e8f8f4;
|
|
95
|
-
$light-color-badge-border-blue: #e7effe;
|
|
96
|
-
$light-color-badge-border-yellow: #fef3e1;
|
|
97
|
-
$light-color-badge-border-brand: #e7f6f8;
|
|
98
|
-
$light-color-badge-border-purple: #f2effb;
|
|
99
|
-
$light-color-badge-border-red: #fde8e8;
|
|
100
|
-
$light-color-badge-border-gray: #eef2f5;
|
|
101
|
-
$light-color-segmented-progress-bar-monochrome: #607585;
|
|
102
|
-
$light-color-segmented-progress-bar-success: #39d6ac;
|
|
103
|
-
$light-color-segmented-progress-bar-warning: #f1d56b;
|
|
104
|
-
$light-color-segmented-progress-bar-alert: #f07575;
|
|
105
|
-
$light-color-segmented-progress-bar-in-progress: #e0e6eb;
|
|
106
|
-
$light-color-tag-background-gray: #e0e6eb;
|
|
107
|
-
$light-color-tag-background-blue: #d2e2f9;
|
|
108
|
-
$light-color-tag-text-gray: #40515e;
|
|
109
|
-
$light-color-tag-text-blue: #1c427d;
|
|
110
|
-
$light-color-destructive-tertiary-button-background-hover: rgba(238, 97, 96, 0.08);
|
|
111
|
-
$light-color-destructive-tertiary-button-background-active: rgba(238, 97, 96, 0.08);
|