@activecollab/components 1.0.118 → 1.0.121

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 (40) hide show
  1. package/dist/cjs/components/Button/Styles.js +6 -6
  2. package/dist/cjs/components/Button/Styles.js.map +1 -1
  3. package/dist/cjs/components/ProgressBar/ProgressBar.js +32 -3
  4. package/dist/cjs/components/ProgressBar/ProgressBar.js.map +1 -1
  5. package/dist/cjs/components/ProgressBar/Styles.js +6 -2
  6. package/dist/cjs/components/ProgressBar/Styles.js.map +1 -1
  7. package/dist/cjs/components/Trigger/Styles.js +19 -0
  8. package/dist/cjs/components/Trigger/Styles.js.map +1 -0
  9. package/dist/cjs/components/Trigger/Trigger.js +40 -0
  10. package/dist/cjs/components/Trigger/Trigger.js.map +1 -0
  11. package/dist/cjs/components/Trigger/index.js +19 -0
  12. package/dist/cjs/components/Trigger/index.js.map +1 -0
  13. package/dist/esm/components/Button/Styles.d.ts.map +1 -1
  14. package/dist/esm/components/Button/Styles.js +6 -6
  15. package/dist/esm/components/Button/Styles.js.map +1 -1
  16. package/dist/esm/components/ProgressBar/ProgressBar.d.ts +2 -0
  17. package/dist/esm/components/ProgressBar/ProgressBar.d.ts.map +1 -1
  18. package/dist/esm/components/ProgressBar/ProgressBar.js +32 -3
  19. package/dist/esm/components/ProgressBar/ProgressBar.js.map +1 -1
  20. package/dist/esm/components/ProgressBar/Styles.d.ts +2 -0
  21. package/dist/esm/components/ProgressBar/Styles.d.ts.map +1 -1
  22. package/dist/esm/components/ProgressBar/Styles.js +6 -2
  23. package/dist/esm/components/ProgressBar/Styles.js.map +1 -1
  24. package/dist/esm/components/Trigger/Styles.d.ts +2 -0
  25. package/dist/esm/components/Trigger/Styles.d.ts.map +1 -0
  26. package/dist/esm/components/Trigger/Styles.js +7 -0
  27. package/dist/esm/components/Trigger/Styles.js.map +1 -0
  28. package/dist/esm/components/Trigger/Trigger.d.ts +3 -0
  29. package/dist/esm/components/Trigger/Trigger.d.ts.map +1 -0
  30. package/dist/esm/components/Trigger/Trigger.js +19 -0
  31. package/dist/esm/components/Trigger/Trigger.js.map +1 -0
  32. package/dist/esm/components/Trigger/index.d.ts +2 -0
  33. package/dist/esm/components/Trigger/index.d.ts.map +1 -0
  34. package/dist/esm/components/Trigger/index.js +2 -0
  35. package/dist/esm/components/Trigger/index.js.map +1 -0
  36. package/dist/index.js +44 -11
  37. package/dist/index.js.map +1 -1
  38. package/dist/index.min.js +1 -1
  39. package/dist/index.min.js.map +1 -1
  40. package/package.json +1 -1
@@ -25,17 +25,17 @@ var StyledButton = _styledComponents.default.button.withConfig({
25
25
  }, function (props) {
26
26
  return props.size === "big" && (0, _styledComponents.css)(["height:40px;"]);
27
27
  }, function (props) {
28
- return (props.variant === "primary" || props.variant === "contained") && (0, _styledComponents.css)(["padding:0 16px;background-color:var(--color-primary);border-radius:var(--ac-br-rounded);color:var(--page-paper-main);&:hover{box-shadow:0 3px 6px -2px var(--color-primary-500);background-color:var(--color-primary-800);}&:active{box-shadow:0 4px 10px -2px var(--color-primary-600);background-color:var(--color-primary-800);}"]);
28
+ return (props.variant === "primary" || props.variant === "contained") && (0, _styledComponents.css)(["padding:0 16px;background-color:var(--color-primary);border-radius:var(--ac-br-rounded);color:var(--page-paper-main);&:hover,&:focus{box-shadow:0 3px 6px -2px var(--color-primary-500);background-color:var(--color-primary-800);}&:active{box-shadow:0 4px 10px -2px var(--color-primary-600);background-color:var(--color-primary-800);}"]);
29
29
  }, function (props) {
30
- return (props.variant === "secondary" || props.variant === "outlined") && (0, _styledComponents.css)(["padding:0 16px;background-color:transparent;border-radius:var(--ac-br-rounded);border:solid 1px var(--color-theme-700);color:var(--color-theme-700);&:hover{border-color:var(--color-primary);color:var(--color-primary);}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"]);
30
+ return (props.variant === "secondary" || props.variant === "outlined") && (0, _styledComponents.css)(["padding:0 16px;background-color:transparent;border-radius:var(--ac-br-rounded);border:solid 1px var(--color-theme-700);color:var(--color-theme-700);&:hover,&:focus{border-color:var(--color-primary);color:var(--color-primary);}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"]);
31
31
  }, function (props) {
32
- return props.variant === "dark transparent" && (0, _styledComponents.css)(["padding:0 8px;background-color:rgba(0,0,0,0.5);border-radius:var(--ac-br-6);color:var(--only-white);&:hover{background-color:rgba(0,0,0,0.85);}&:active{background-color:var(--only-black);}"]);
32
+ return props.variant === "dark transparent" && (0, _styledComponents.css)(["padding:0 8px;background-color:rgba(0,0,0,0.5);border-radius:var(--ac-br-6);color:var(--only-white);&:hover,&:focus{background-color:rgba(0,0,0,0.85);}&:active{background-color:var(--only-black);}"]);
33
33
  }, function (props) {
34
- return (props.variant === "tertiary" || props.variant === "text colored") && (0, _styledComponents.css)(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-primary);&:hover{background-color:var(--color-primary-200);}&:active{background-color:var(--color-primary-300);}"]);
34
+ return (props.variant === "tertiary" || props.variant === "text colored") && (0, _styledComponents.css)(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-primary);&:hover,&:focus{background-color:var(--color-primary-200);}&:active{background-color:var(--color-primary-300);}"]);
35
35
  }, function (props) {
36
- return (props.variant === "option" || props.variant === "text gray") && (0, _styledComponents.css)(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-theme-700);&:hover{background-color:var(--color-theme-300);color:var(--color-theme-900);}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"]);
36
+ return (props.variant === "option" || props.variant === "text gray") && (0, _styledComponents.css)(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-theme-700);&:hover,&:focus{background-color:var(--color-theme-300);color:var(--color-theme-900);}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"]);
37
37
  }, function (props) {
38
- return props.variant === "circle raised" && (0, _styledComponents.css)(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700);transition:ease 0.3s all;&:hover{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"]);
38
+ return props.variant === "circle raised" && (0, _styledComponents.css)(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700);transition:ease 0.3s all;&:hover,&:focus{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"]);
39
39
  }, function (props) {
40
40
  return props.iconOnly && (0, _styledComponents.css)(["display:inline-flex;justify-content:center;align-items:center;padding:0;width:32px;", ";", " ", ""], (props.size === "small" || props.size === "big") && (0, _styledComponents.css)(["border-radius:var(--ac-br-rounded);"]), props.size === "small" && (0, _styledComponents.css)(["width:24px;"]), props.size === "big" && (0, _styledComponents.css)(["width:40px;"]));
41
41
  }, function (props) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Button/Styles.ts"],"names":["StyledButton","styled","button","FontStyle","BoxSizingStyle","props","size","css","variant","iconOnly","displayName","StyledButtonElements","span","StyledButtonElement"],"mappings":"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","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { IButtonProps } from \"./Button\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\ninterface StyledButtonProps extends IButtonProps {\n iconOnly: boolean;\n}\n\nexport const StyledButton = styled.button<StyledButtonProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n vertical-align: middle;\n font-weight: 500;\n display: inline-block;\n line-height: 1;\n margin: 0;\n text-decoration: none;\n font-size: 0.875rem;\n user-select: none;\n cursor: pointer;\n text-align: center;\n\n border: none;\n height: 32px;\n transition: all 0.3s ease;\n\n svg {\n fill: currentColor;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n text-decoration: none;\n }\n\n &:disabled {\n cursor: default;\n opacity: 50%;\n pointer-events: none;\n }\n\n ${(props) =>\n props.size === \"small\" &&\n css`\n height: 24px;\n `}\n\n ${(props) =>\n props.size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n (props.variant === \"primary\" || props.variant === \"contained\") &&\n css`\n padding: 0 16px;\n background-color: var(--color-primary);\n border-radius: var(--ac-br-rounded);\n color: var(--page-paper-main);\n\n &:hover {\n box-shadow: 0 3px 6px -2px var(--color-primary-500);\n background-color: var(--color-primary-800);\n }\n\n &:active {\n box-shadow: 0 4px 10px -2px var(--color-primary-600);\n background-color: var(--color-primary-800);\n }\n `}\n\n ${(props) =>\n (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n css`\n padding: 0 16px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n border: solid 1px var(--color-theme-700);\n color: var(--color-theme-700);\n\n &:hover {\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n\n &:active {\n border-color: var(--color-primary);\n color: var(--color-primary);\n background-color: var(--color-primary-200);\n }\n `}\n\n ${(props) =>\n props.variant === \"dark transparent\" &&\n css`\n padding: 0 8px;\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: var(--ac-br-6);\n color: var(--only-white);\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.85);\n }\n\n &:active {\n background-color: var(--only-black);\n }\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-primary);\n\n &:hover {\n background-color: var(--color-primary-200);\n }\n\n &:active {\n background-color: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n (props.variant === \"option\" || props.variant === \"text gray\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-theme-700);\n\n &:hover {\n background-color: var(--color-theme-300);\n color: var(--color-theme-900);\n }\n\n &:active {\n background-color: var(--color-theme-400);\n color: var(--color-theme-900);\n }\n `}\n\n ${(props) =>\n props.variant === \"circle raised\" &&\n css`\n padding: 0 6px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n color: var(--color-theme-700);\n transition: ease 0.3s all;\n\n &:hover {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary);\n }\n\n &:active {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary-hover);\n }\n `}\n\n ${(props) =>\n props.iconOnly &&\n css`\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n width: 32px;\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\n `};\n\n ${props.size === \"small\" &&\n css`\n width: 24px;\n `}\n\n ${props.size === \"big\" &&\n css`\n width: 40px;\n `}\n `}\n\n ${(props) =>\n (props.variant === \"primary\" ||\n props.variant === \"contained\" ||\n props.variant === \"secondary\" ||\n props.variant === \"outlined\") &&\n css`\n .c-btn__elements__element:first-child svg {\n margin-left: -6px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -6px;\n }\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\n `}\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" ||\n props.variant === \"text colored\" ||\n props.variant === \"option\" ||\n props.variant === \"text gray\" ||\n props.variant === \"dark transparent\") &&\n css`\n .c-btn__elements__element:first-child svg {\n margin-left: -4px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -4px;\n }\n ${props.size === \"small\" &&\n css`\n border-radius: var(--ac-br-4);\n `}\n ${props.size === \"big\" &&\n css`\n border-radius: var(--ac-br-8);\n `}\n `}\n`;\n\nStyledButton.displayName = \"StyledButton\";\n\nexport const StyledButtonElements = styled.span`\n display: flex;\n align-items: center;\n`;\n\nStyledButtonElements.displayName = \"StyledButtonElements\";\n\nexport const StyledButtonElement = styled.span`\n display: inline-flex;\n svg {\n margin: 0 4px;\n }\n`;\n\nStyledButtonElement.displayName = \"StyledButtonElement\";\n"],"file":"Styles.js"}
1
+ {"version":3,"sources":["../../../../src/components/Button/Styles.ts"],"names":["StyledButton","styled","button","FontStyle","BoxSizingStyle","props","size","css","variant","iconOnly","displayName","StyledButtonElements","span","StyledButtonElement"],"mappings":"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","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { IButtonProps } from \"./Button\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\ninterface StyledButtonProps extends IButtonProps {\n iconOnly: boolean;\n}\n\nexport const StyledButton = styled.button<StyledButtonProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n vertical-align: middle;\n font-weight: 500;\n display: inline-block;\n line-height: 1;\n margin: 0;\n text-decoration: none;\n font-size: 0.875rem;\n user-select: none;\n cursor: pointer;\n text-align: center;\n\n border: none;\n height: 32px;\n transition: all 0.3s ease;\n\n svg {\n fill: currentColor;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n text-decoration: none;\n }\n\n &:disabled {\n cursor: default;\n opacity: 50%;\n pointer-events: none;\n }\n\n ${(props) =>\n props.size === \"small\" &&\n css`\n height: 24px;\n `}\n\n ${(props) =>\n props.size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n (props.variant === \"primary\" || props.variant === \"contained\") &&\n css`\n padding: 0 16px;\n background-color: var(--color-primary);\n border-radius: var(--ac-br-rounded);\n color: var(--page-paper-main);\n\n &:hover,\n &:focus {\n box-shadow: 0 3px 6px -2px var(--color-primary-500);\n background-color: var(--color-primary-800);\n }\n\n &:active {\n box-shadow: 0 4px 10px -2px var(--color-primary-600);\n background-color: var(--color-primary-800);\n }\n `}\n\n ${(props) =>\n (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n css`\n padding: 0 16px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n border: solid 1px var(--color-theme-700);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus {\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n\n &:active {\n border-color: var(--color-primary);\n color: var(--color-primary);\n background-color: var(--color-primary-200);\n }\n `}\n\n ${(props) =>\n props.variant === \"dark transparent\" &&\n css`\n padding: 0 8px;\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: var(--ac-br-6);\n color: var(--only-white);\n\n &:hover,\n &:focus {\n background-color: rgba(0, 0, 0, 0.85);\n }\n\n &:active {\n background-color: var(--only-black);\n }\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-primary);\n\n &:hover,\n &:focus {\n background-color: var(--color-primary-200);\n }\n\n &:active {\n background-color: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n (props.variant === \"option\" || props.variant === \"text gray\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus {\n background-color: var(--color-theme-300);\n color: var(--color-theme-900);\n }\n\n &:active {\n background-color: var(--color-theme-400);\n color: var(--color-theme-900);\n }\n `}\n\n ${(props) =>\n props.variant === \"circle raised\" &&\n css`\n padding: 0 6px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n color: var(--color-theme-700);\n transition: ease 0.3s all;\n\n &:hover,\n &:focus {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary);\n }\n\n &:active {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary-hover);\n }\n `}\n\n ${(props) =>\n props.iconOnly &&\n css`\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n width: 32px;\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\n `};\n\n ${props.size === \"small\" &&\n css`\n width: 24px;\n `}\n\n ${props.size === \"big\" &&\n css`\n width: 40px;\n `}\n `}\n\n ${(props) =>\n (props.variant === \"primary\" ||\n props.variant === \"contained\" ||\n props.variant === \"secondary\" ||\n props.variant === \"outlined\") &&\n css`\n .c-btn__elements__element:first-child svg {\n margin-left: -6px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -6px;\n }\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\n `}\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" ||\n props.variant === \"text colored\" ||\n props.variant === \"option\" ||\n props.variant === \"text gray\" ||\n props.variant === \"dark transparent\") &&\n css`\n .c-btn__elements__element:first-child svg {\n margin-left: -4px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -4px;\n }\n ${props.size === \"small\" &&\n css`\n border-radius: var(--ac-br-4);\n `}\n ${props.size === \"big\" &&\n css`\n border-radius: var(--ac-br-8);\n `}\n `}\n`;\n\nStyledButton.displayName = \"StyledButton\";\n\nexport const StyledButtonElements = styled.span`\n display: flex;\n align-items: center;\n`;\n\nStyledButtonElements.displayName = \"StyledButtonElements\";\n\nexport const StyledButtonElement = styled.span`\n display: inline-flex;\n svg {\n margin: 0 4px;\n }\n`;\n\nStyledButtonElement.displayName = \"StyledButtonElement\";\n"],"file":"Styles.js"}
@@ -16,9 +16,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
16
16
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
17
17
 
18
18
  var ProgressBar = function ProgressBar(_ref) {
19
- var progress = _ref.progress,
19
+ var _ref$progress = _ref.progress,
20
+ progress = _ref$progress === void 0 ? 0 : _ref$progress,
20
21
  backgroundColor = _ref.backgroundColor,
21
- progressColor = _ref.progressColor;
22
+ progressColor = _ref.progressColor,
23
+ _ref$stroke = _ref.stroke,
24
+ stroke = _ref$stroke === void 0 ? 3 : _ref$stroke,
25
+ _ref$width = _ref.width,
26
+ width = _ref$width === void 0 ? 100 : _ref$width;
22
27
  var progressNumber = (0, _react.useMemo)(function () {
23
28
  var width = progress;
24
29
 
@@ -32,14 +37,38 @@ var ProgressBar = function ProgressBar(_ref) {
32
37
 
33
38
  return width;
34
39
  }, [progress]);
40
+ var widthPercent = (0, _react.useMemo)(function () {
41
+ var width_percent = width;
42
+
43
+ if (width > 100) {
44
+ width_percent = 100;
45
+ }
46
+
47
+ if (width <= 0) {
48
+ width_percent = 100;
49
+ }
50
+
51
+ return width_percent;
52
+ }, [width]);
53
+ var height = (0, _react.useMemo)(function () {
54
+ var stroke_min = stroke;
55
+
56
+ if (stroke <= 0) {
57
+ stroke_min = 3;
58
+ }
59
+
60
+ return stroke_min;
61
+ }, [stroke]);
35
62
  return /*#__PURE__*/_react.default.createElement(_Styles.StyledProgressBar, {
36
63
  className: "c-progress-bar",
37
- $color: backgroundColor
64
+ $color: backgroundColor,
65
+ $width: widthPercent
38
66
  }, /*#__PURE__*/_react.default.createElement(_Styles.StyledProgressBarProgress, {
39
67
  className: "c-progress-bar__progress",
40
68
  style: {
41
69
  width: "".concat(progressNumber, "%")
42
70
  },
71
+ $height: height,
43
72
  $color: progressColor
44
73
  }));
45
74
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"names":["ProgressBar","progress","backgroundColor","progressColor","progressNumber","width","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;AAWO,IAAMA,WAAkC,GAAG,SAArCA,WAAqC,OAI5C;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,MAFJC,eAEI,QAFJA,eAEI;AAAA,MADJC,aACI,QADJA,aACI;AACJ,MAAMC,cAAc,GAAG,oBAAQ,YAAM;AACnC,QAAIC,KAAK,GAAGJ,QAAZ;;AACA,QAAIA,QAAQ,GAAG,GAAf,EAAoB;AAClBI,MAAAA,KAAK,GAAG,GAAR;AACD;;AACD,QAAIJ,QAAQ,GAAG,CAAf,EAAkB;AAChBI,MAAAA,KAAK,GAAG,CAAR;AACD;;AACD,WAAOA,KAAP;AACD,GATsB,EASpB,CAACJ,QAAD,CAToB,CAAvB;AAWA,sBACE,6BAAC,yBAAD;AAAmB,IAAA,SAAS,EAAE,gBAA9B;AAAgD,IAAA,MAAM,EAAEC;AAAxD,kBACE,6BAAC,iCAAD;AACE,IAAA,SAAS,EAAE,0BADb;AAEE,IAAA,KAAK,EAAE;AAAEG,MAAAA,KAAK,YAAKD,cAAL;AAAP,KAFT;AAGE,IAAA,MAAM,EAAED;AAHV,IADF,CADF;AASD,CAzBM;;;AA2BPH,WAAW,CAACM,WAAZ,GAA0B,aAA1B","sourcesContent":["import React, { FC, useMemo } from \"react\";\nimport { StyledProgressBar, StyledProgressBarProgress } from \"./Styles\";\n\nexport interface IProgressBarProps {\n /** Progress prop can be number. */\n progress: number;\n /** Custom classname for styling. */\n backgroundColor?: string;\n /** Custom classname for styling. */\n progressColor?: string;\n}\n\nexport const ProgressBar: FC<IProgressBarProps> = ({\n progress,\n backgroundColor,\n progressColor,\n}) => {\n const progressNumber = useMemo(() => {\n let width = progress;\n if (progress > 100) {\n width = 100;\n }\n if (progress < 0) {\n width = 0;\n }\n return width;\n }, [progress]);\n\n return (\n <StyledProgressBar className={\"c-progress-bar\"} $color={backgroundColor}>\n <StyledProgressBarProgress\n className={\"c-progress-bar__progress\"}\n style={{ width: `${progressNumber}%` }}\n $color={progressColor}\n />\n </StyledProgressBar>\n );\n};\n\nProgressBar.displayName = \"ProgressBar\";\n"],"file":"ProgressBar.js"}
1
+ {"version":3,"sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"names":["ProgressBar","progress","backgroundColor","progressColor","stroke","width","progressNumber","widthPercent","width_percent","height","stroke_min","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;AAeO,IAAMA,WAAkC,GAAG,SAArCA,WAAqC,OAM5C;AAAA,2BALJC,QAKI;AAAA,MALJA,QAKI,8BALO,CAKP;AAAA,MAJJC,eAII,QAJJA,eAII;AAAA,MAHJC,aAGI,QAHJA,aAGI;AAAA,yBAFJC,MAEI;AAAA,MAFJA,MAEI,4BAFK,CAEL;AAAA,wBADJC,KACI;AAAA,MADJA,KACI,2BADI,GACJ;AACJ,MAAMC,cAAc,GAAG,oBAAQ,YAAM;AACnC,QAAID,KAAK,GAAGJ,QAAZ;;AACA,QAAIA,QAAQ,GAAG,GAAf,EAAoB;AAClBI,MAAAA,KAAK,GAAG,GAAR;AACD;;AACD,QAAIJ,QAAQ,GAAG,CAAf,EAAkB;AAChBI,MAAAA,KAAK,GAAG,CAAR;AACD;;AACD,WAAOA,KAAP;AACD,GATsB,EASpB,CAACJ,QAAD,CAToB,CAAvB;AAWA,MAAMM,YAAY,GAAG,oBAAQ,YAAM;AACjC,QAAIC,aAAa,GAAGH,KAApB;;AAEA,QAAIA,KAAK,GAAG,GAAZ,EAAiB;AACfG,MAAAA,aAAa,GAAG,GAAhB;AACD;;AAED,QAAIH,KAAK,IAAI,CAAb,EAAgB;AACdG,MAAAA,aAAa,GAAG,GAAhB;AACD;;AAED,WAAOA,aAAP;AACD,GAZoB,EAYlB,CAACH,KAAD,CAZkB,CAArB;AAcA,MAAMI,MAAM,GAAG,oBAAQ,YAAM;AAC3B,QAAIC,UAAU,GAAGN,MAAjB;;AAEA,QAAIA,MAAM,IAAI,CAAd,EAAiB;AACfM,MAAAA,UAAU,GAAG,CAAb;AACD;;AAED,WAAOA,UAAP;AACD,GARc,EAQZ,CAACN,MAAD,CARY,CAAf;AAUA,sBACE,6BAAC,yBAAD;AACE,IAAA,SAAS,EAAE,gBADb;AAEE,IAAA,MAAM,EAAEF,eAFV;AAGE,IAAA,MAAM,EAAEK;AAHV,kBAKE,6BAAC,iCAAD;AACE,IAAA,SAAS,EAAE,0BADb;AAEE,IAAA,KAAK,EAAE;AAAEF,MAAAA,KAAK,YAAKC,cAAL;AAAP,KAFT;AAGE,IAAA,OAAO,EAAEG,MAHX;AAIE,IAAA,MAAM,EAAEN;AAJV,IALF,CADF;AAcD,CAxDM;;;AA0DPH,WAAW,CAACW,WAAZ,GAA0B,aAA1B","sourcesContent":["import React, { FC, useMemo } from \"react\";\nimport { StyledProgressBar, StyledProgressBarProgress } from \"./Styles\";\n\nexport interface IProgressBarProps {\n /** Progress prop can be number. */\n progress: number;\n /** Custom classname for styling. */\n backgroundColor?: string;\n /** Custom classname for styling. */\n progressColor?: string;\n /** Progress height. */\n stroke?: number;\n /** Progress width in percentage. */\n width?: number;\n}\n\nexport const ProgressBar: FC<IProgressBarProps> = ({\n progress = 0,\n backgroundColor,\n progressColor,\n stroke = 3,\n width = 100,\n}) => {\n const progressNumber = useMemo(() => {\n let width = progress;\n if (progress > 100) {\n width = 100;\n }\n if (progress < 0) {\n width = 0;\n }\n return width;\n }, [progress]);\n\n const widthPercent = useMemo(() => {\n let width_percent = width;\n\n if (width > 100) {\n width_percent = 100;\n }\n\n if (width <= 0) {\n width_percent = 100;\n }\n\n return width_percent;\n }, [width]);\n\n const height = useMemo(() => {\n let stroke_min = stroke;\n\n if (stroke <= 0) {\n stroke_min = 3;\n }\n\n return stroke_min;\n }, [stroke]);\n\n return (\n <StyledProgressBar\n className={\"c-progress-bar\"}\n $color={backgroundColor}\n $width={widthPercent}\n >\n <StyledProgressBarProgress\n className={\"c-progress-bar__progress\"}\n style={{ width: `${progressNumber}%` }}\n $height={height}\n $color={progressColor}\n />\n </StyledProgressBar>\n );\n};\n\nProgressBar.displayName = \"ProgressBar\";\n"],"file":"ProgressBar.js"}
@@ -18,7 +18,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
18
18
  var StyledProgressBar = _styledComponents.default.div.withConfig({
19
19
  displayName: "Styles__StyledProgressBar",
20
20
  componentId: "sc-k5nm08-0"
21
- })(["", " ", ""], _BoxSizingStyle.BoxSizingStyle, function (props) {
21
+ })(["", " ", " ", ""], _BoxSizingStyle.BoxSizingStyle, function (props) {
22
+ return props.$width ? (0, _styledComponents.css)(["width:", "%;"], props.$width) : (0, _styledComponents.css)(["width:100%;"]);
23
+ }, function (props) {
22
24
  return props.$color ? (0, _styledComponents.css)(["background-color:", ";"], props.$color) : (0, _styledComponents.css)(["background-color:var(--color-theme-300);"]);
23
25
  });
24
26
 
@@ -28,7 +30,9 @@ StyledProgressBar.displayName = "StyledProgressBar";
28
30
  var StyledProgressBarProgress = _styledComponents.default.div.withConfig({
29
31
  displayName: "Styles__StyledProgressBarProgress",
30
32
  componentId: "sc-k5nm08-1"
31
- })(["height:3px;", ""], function (props) {
33
+ })(["", " ", ""], function (props) {
34
+ return props.$height ? (0, _styledComponents.css)(["height:", "px;"], props.$height) : (0, _styledComponents.css)(["height:3px;"]);
35
+ }, function (props) {
32
36
  return props.$color ? (0, _styledComponents.css)(["background-color:", ";"], props.$color) : (0, _styledComponents.css)(["background-color:var(--color-secondary);"]);
33
37
  });
34
38
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/ProgressBar/Styles.ts"],"names":["StyledProgressBar","styled","div","BoxSizingStyle","props","$color","css","displayName","StyledProgressBarProgress"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;AAMO,IAAMA,iBAAiB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,kBAC1BC,8BAD0B,EAG1B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,MAAN,OACIC,qBADJ,8BAE0BF,KAAK,CAACC,MAFhC,QAIIC,qBAJJ,+CADA;AAAA,CAH0B,CAAvB;;;AAaPN,iBAAiB,CAACO,WAAlB,GAAgC,mBAAhC;;AAEO,IAAMC,yBAAyB,GAAGP,0BAAOC,GAAV;AAAA;AAAA;AAAA,wBAGlC,UAACE,KAAD;AAAA,SACAA,KAAK,CAACC,MAAN,OACIC,qBADJ,8BAE0BF,KAAK,CAACC,MAFhC,QAIIC,qBAJJ,+CADA;AAAA,CAHkC,CAA/B;;;AAaPE,yBAAyB,CAACD,WAA1B,GAAwC,2BAAxC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\ninterface IStyledProgressBar {\n $color?: string;\n}\n\nexport const StyledProgressBar = styled.div<IStyledProgressBar>`\n ${BoxSizingStyle}\n\n ${(props) =>\n props.$color\n ? css`\n background-color: ${props.$color};\n `\n : css`\n background-color: var(--color-theme-300);\n `}\n`;\n\nStyledProgressBar.displayName = \"StyledProgressBar\";\n\nexport const StyledProgressBarProgress = styled.div<IStyledProgressBar>`\n height: 3px;\n\n ${(props) =>\n props.$color\n ? css`\n background-color: ${props.$color};\n `\n : css`\n background-color: var(--color-secondary);\n `}\n`;\n\nStyledProgressBarProgress.displayName = \"StyledProgressBarProgress\";\n"],"file":"Styles.js"}
1
+ {"version":3,"sources":["../../../../src/components/ProgressBar/Styles.ts"],"names":["StyledProgressBar","styled","div","BoxSizingStyle","props","$width","css","$color","displayName","StyledProgressBarProgress","$height"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;AAQO,IAAMA,iBAAiB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,uBAC1BC,8BAD0B,EAG1B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,MAAN,OACIC,qBADJ,oBAEeF,KAAK,CAACC,MAFrB,QAIIC,qBAJJ,kBADA;AAAA,CAH0B,EAY1B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,MAAN,OACID,qBADJ,8BAE0BF,KAAK,CAACG,MAFhC,QAIID,qBAJJ,+CADA;AAAA,CAZ0B,CAAvB;;;AAsBPN,iBAAiB,CAACQ,WAAlB,GAAgC,mBAAhC;;AAEO,IAAMC,yBAAyB,GAAGR,0BAAOC,GAAV;AAAA;AAAA;AAAA,kBAClC,UAACE,KAAD;AAAA,SACAA,KAAK,CAACM,OAAN,OACIJ,qBADJ,sBAEgBF,KAAK,CAACM,OAFtB,QAIIJ,qBAJJ,kBADA;AAAA,CADkC,EAUlC,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,MAAN,OACID,qBADJ,8BAE0BF,KAAK,CAACG,MAFhC,QAIID,qBAJJ,+CADA;AAAA,CAVkC,CAA/B;;;AAoBPG,yBAAyB,CAACD,WAA1B,GAAwC,2BAAxC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\ninterface IStyledProgressBar {\n $color?: string;\n $height?: number;\n $width?: number;\n}\n\nexport const StyledProgressBar = styled.div<IStyledProgressBar>`\n ${BoxSizingStyle}\n\n ${(props) =>\n props.$width\n ? css`\n width: ${props.$width}%;\n `\n : css`\n width: 100%;\n `}\n\n ${(props) =>\n props.$color\n ? css`\n background-color: ${props.$color};\n `\n : css`\n background-color: var(--color-theme-300);\n `}\n`;\n\nStyledProgressBar.displayName = \"StyledProgressBar\";\n\nexport const StyledProgressBarProgress = styled.div<IStyledProgressBar>`\n ${(props) =>\n props.$height\n ? css`\n height: ${props.$height}px;\n `\n : css`\n height: 3px;\n `}\n\n ${(props) =>\n props.$color\n ? css`\n background-color: ${props.$color};\n `\n : css`\n background-color: var(--color-secondary);\n `}\n`;\n\nStyledProgressBarProgress.displayName = \"StyledProgressBarProgress\";\n"],"file":"Styles.js"}
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.StyledButton = void 0;
7
+
8
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
9
+
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+
12
+ var StyledButton = _styledComponents.default.button.withConfig({
13
+ displayName: "Styles__StyledButton",
14
+ componentId: "sc-1tom9pu-0"
15
+ })(["border:none;margin:0;padding:0;width:auto;overflow:visible;cursor:pointer;background:transparent;outline:none;color:inherit;font:inherit;line-height:inherit;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;&::-moz-focus-inner{border:0;padding:0;}"]);
16
+
17
+ exports.StyledButton = StyledButton;
18
+ StyledButton.displayName = "StyledButton";
19
+ //# sourceMappingURL=Styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/components/Trigger/Styles.ts"],"names":["StyledButton","styled","button","displayName"],"mappings":";;;;;;;AAAA;;;;AAEO,IAAMA,YAAY,GAAGC,0BAAOC,MAAV;AAAA;AAAA;AAAA,oSAAlB;;;AA2BPF,YAAY,CAACG,WAAb,GAA2B,cAA3B","sourcesContent":["import styled from \"styled-components\";\n\nexport const StyledButton = styled.button`\n border: none;\n margin: 0;\n padding: 0;\n width: auto;\n overflow: visible;\n cursor: pointer;\n\n background: transparent;\n\n outline: none;\n color: inherit;\n font: inherit;\n\n line-height: inherit;\n\n -webkit-font-smoothing: inherit;\n -moz-osx-font-smoothing: inherit;\n\n -webkit-appearance: none;\n\n &::-moz-focus-inner {\n border: 0;\n padding: 0;\n }\n`;\n\nStyledButton.displayName = \"StyledButton\";\n"],"file":"Styles.js"}
@@ -0,0 +1,40 @@
1
+ "use strict";
2
+
3
+ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.Trigger = void 0;
9
+
10
+ var _react = _interopRequireWildcard(require("react"));
11
+
12
+ var _Styles = require("./Styles");
13
+
14
+ var _excluded = ["children", "type"];
15
+
16
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
17
+
18
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
19
+
20
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
21
+
22
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
23
+
24
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
25
+
26
+ var Trigger = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
27
+ var children = _ref.children,
28
+ _ref$type = _ref.type,
29
+ type = _ref$type === void 0 ? "button" : _ref$type,
30
+ rest = _objectWithoutProperties(_ref, _excluded);
31
+
32
+ return /*#__PURE__*/_react.default.createElement(_Styles.StyledButton, _extends({
33
+ ref: ref,
34
+ role: "button",
35
+ type: type
36
+ }, rest), children);
37
+ });
38
+ exports.Trigger = Trigger;
39
+ Trigger.displayName = "Trigger";
40
+ //# sourceMappingURL=Trigger.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/components/Trigger/Trigger.tsx"],"names":["Trigger","ref","children","type","rest","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;;;;;;;AAEO,IAAMA,OAAO,gBAAG,uBAGrB,gBAAyCC,GAAzC,EAAiD;AAAA,MAA9CC,QAA8C,QAA9CA,QAA8C;AAAA,uBAApCC,IAAoC;AAAA,MAApCA,IAAoC,0BAA7B,QAA6B;AAAA,MAAhBC,IAAgB;;AACjD,sBACE,6BAAC,oBAAD;AAAc,IAAA,GAAG,EAAEH,GAAnB;AAAwB,IAAA,IAAI,EAAC,QAA7B;AAAsC,IAAA,IAAI,EAAEE;AAA5C,KAAsDC,IAAtD,GACGF,QADH,CADF;AAKD,CATsB,CAAhB;;AAWPF,OAAO,CAACK,WAAR,GAAsB,SAAtB","sourcesContent":["import React, { forwardRef, ComponentPropsWithoutRef } from \"react\";\nimport { StyledButton } from \"./Styles\";\n\nexport const Trigger = forwardRef<\n HTMLButtonElement,\n ComponentPropsWithoutRef<\"button\">\n>(({ children, type = \"button\", ...rest }, ref) => {\n return (\n <StyledButton ref={ref} role=\"button\" type={type} {...rest}>\n {children}\n </StyledButton>\n );\n});\n\nTrigger.displayName = \"Trigger\";\n"],"file":"Trigger.js"}
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+
7
+ var _Trigger = require("./Trigger");
8
+
9
+ Object.keys(_Trigger).forEach(function (key) {
10
+ if (key === "default" || key === "__esModule") return;
11
+ if (key in exports && exports[key] === _Trigger[key]) return;
12
+ Object.defineProperty(exports, key, {
13
+ enumerable: true,
14
+ get: function get() {
15
+ return _Trigger[key];
16
+ }
17
+ });
18
+ });
19
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/components/Trigger/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./Trigger\";\n"],"file":"index.js"}
@@ -1 +1 @@
1
- {"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAIxC,UAAU,iBAAkB,SAAQ,YAAY;IAC9C,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,sFAqOxB,CAAC;AAIF,eAAO,MAAM,oBAAoB,qEAGhC,CAAC;AAIF,eAAO,MAAM,mBAAmB,qEAK/B,CAAC"}
1
+ {"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAIxC,UAAU,iBAAkB,SAAQ,YAAY;IAC9C,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,sFA2OxB,CAAC;AAIF,eAAO,MAAM,oBAAoB,qEAGhC,CAAC;AAIF,eAAO,MAAM,mBAAmB,qEAK/B,CAAC"}
@@ -9,17 +9,17 @@ export var StyledButton = styled.button.withConfig({
9
9
  }, function (props) {
10
10
  return props.size === "big" && css(["height:40px;"]);
11
11
  }, function (props) {
12
- return (props.variant === "primary" || props.variant === "contained") && css(["padding:0 16px;background-color:var(--color-primary);border-radius:var(--ac-br-rounded);color:var(--page-paper-main);&:hover{box-shadow:0 3px 6px -2px var(--color-primary-500);background-color:var(--color-primary-800);}&:active{box-shadow:0 4px 10px -2px var(--color-primary-600);background-color:var(--color-primary-800);}"]);
12
+ return (props.variant === "primary" || props.variant === "contained") && css(["padding:0 16px;background-color:var(--color-primary);border-radius:var(--ac-br-rounded);color:var(--page-paper-main);&:hover,&:focus{box-shadow:0 3px 6px -2px var(--color-primary-500);background-color:var(--color-primary-800);}&:active{box-shadow:0 4px 10px -2px var(--color-primary-600);background-color:var(--color-primary-800);}"]);
13
13
  }, function (props) {
14
- return (props.variant === "secondary" || props.variant === "outlined") && css(["padding:0 16px;background-color:transparent;border-radius:var(--ac-br-rounded);border:solid 1px var(--color-theme-700);color:var(--color-theme-700);&:hover{border-color:var(--color-primary);color:var(--color-primary);}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"]);
14
+ return (props.variant === "secondary" || props.variant === "outlined") && css(["padding:0 16px;background-color:transparent;border-radius:var(--ac-br-rounded);border:solid 1px var(--color-theme-700);color:var(--color-theme-700);&:hover,&:focus{border-color:var(--color-primary);color:var(--color-primary);}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"]);
15
15
  }, function (props) {
16
- return props.variant === "dark transparent" && css(["padding:0 8px;background-color:rgba(0,0,0,0.5);border-radius:var(--ac-br-6);color:var(--only-white);&:hover{background-color:rgba(0,0,0,0.85);}&:active{background-color:var(--only-black);}"]);
16
+ return props.variant === "dark transparent" && css(["padding:0 8px;background-color:rgba(0,0,0,0.5);border-radius:var(--ac-br-6);color:var(--only-white);&:hover,&:focus{background-color:rgba(0,0,0,0.85);}&:active{background-color:var(--only-black);}"]);
17
17
  }, function (props) {
18
- return (props.variant === "tertiary" || props.variant === "text colored") && css(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-primary);&:hover{background-color:var(--color-primary-200);}&:active{background-color:var(--color-primary-300);}"]);
18
+ return (props.variant === "tertiary" || props.variant === "text colored") && css(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-primary);&:hover,&:focus{background-color:var(--color-primary-200);}&:active{background-color:var(--color-primary-300);}"]);
19
19
  }, function (props) {
20
- return (props.variant === "option" || props.variant === "text gray") && css(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-theme-700);&:hover{background-color:var(--color-theme-300);color:var(--color-theme-900);}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"]);
20
+ return (props.variant === "option" || props.variant === "text gray") && css(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-theme-700);&:hover,&:focus{background-color:var(--color-theme-300);color:var(--color-theme-900);}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"]);
21
21
  }, function (props) {
22
- return props.variant === "circle raised" && css(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700);transition:ease 0.3s all;&:hover{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"]);
22
+ return props.variant === "circle raised" && css(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700);transition:ease 0.3s all;&:hover,&:focus{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"]);
23
23
  }, function (props) {
24
24
  return props.iconOnly && css(["display:inline-flex;justify-content:center;align-items:center;padding:0;width:32px;", ";", " ", ""], (props.size === "small" || props.size === "big") && css(["border-radius:var(--ac-br-rounded);"]), props.size === "small" && css(["width:24px;"]), props.size === "big" && css(["width:40px;"]));
25
25
  }, function (props) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Button/Styles.ts"],"names":["styled","css","FontStyle","BoxSizingStyle","StyledButton","button","props","size","variant","iconOnly","displayName","StyledButtonElements","span","StyledButtonElement"],"mappings":"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","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { IButtonProps } from \"./Button\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\ninterface StyledButtonProps extends IButtonProps {\n iconOnly: boolean;\n}\n\nexport const StyledButton = styled.button<StyledButtonProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n vertical-align: middle;\n font-weight: 500;\n display: inline-block;\n line-height: 1;\n margin: 0;\n text-decoration: none;\n font-size: 0.875rem;\n user-select: none;\n cursor: pointer;\n text-align: center;\n\n border: none;\n height: 32px;\n transition: all 0.3s ease;\n\n svg {\n fill: currentColor;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n text-decoration: none;\n }\n\n &:disabled {\n cursor: default;\n opacity: 50%;\n pointer-events: none;\n }\n\n ${(props) =>\n props.size === \"small\" &&\n css`\n height: 24px;\n `}\n\n ${(props) =>\n props.size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n (props.variant === \"primary\" || props.variant === \"contained\") &&\n css`\n padding: 0 16px;\n background-color: var(--color-primary);\n border-radius: var(--ac-br-rounded);\n color: var(--page-paper-main);\n\n &:hover {\n box-shadow: 0 3px 6px -2px var(--color-primary-500);\n background-color: var(--color-primary-800);\n }\n\n &:active {\n box-shadow: 0 4px 10px -2px var(--color-primary-600);\n background-color: var(--color-primary-800);\n }\n `}\n\n ${(props) =>\n (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n css`\n padding: 0 16px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n border: solid 1px var(--color-theme-700);\n color: var(--color-theme-700);\n\n &:hover {\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n\n &:active {\n border-color: var(--color-primary);\n color: var(--color-primary);\n background-color: var(--color-primary-200);\n }\n `}\n\n ${(props) =>\n props.variant === \"dark transparent\" &&\n css`\n padding: 0 8px;\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: var(--ac-br-6);\n color: var(--only-white);\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.85);\n }\n\n &:active {\n background-color: var(--only-black);\n }\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-primary);\n\n &:hover {\n background-color: var(--color-primary-200);\n }\n\n &:active {\n background-color: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n (props.variant === \"option\" || props.variant === \"text gray\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-theme-700);\n\n &:hover {\n background-color: var(--color-theme-300);\n color: var(--color-theme-900);\n }\n\n &:active {\n background-color: var(--color-theme-400);\n color: var(--color-theme-900);\n }\n `}\n\n ${(props) =>\n props.variant === \"circle raised\" &&\n css`\n padding: 0 6px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n color: var(--color-theme-700);\n transition: ease 0.3s all;\n\n &:hover {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary);\n }\n\n &:active {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary-hover);\n }\n `}\n\n ${(props) =>\n props.iconOnly &&\n css`\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n width: 32px;\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\n `};\n\n ${props.size === \"small\" &&\n css`\n width: 24px;\n `}\n\n ${props.size === \"big\" &&\n css`\n width: 40px;\n `}\n `}\n\n ${(props) =>\n (props.variant === \"primary\" ||\n props.variant === \"contained\" ||\n props.variant === \"secondary\" ||\n props.variant === \"outlined\") &&\n css`\n .c-btn__elements__element:first-child svg {\n margin-left: -6px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -6px;\n }\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\n `}\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" ||\n props.variant === \"text colored\" ||\n props.variant === \"option\" ||\n props.variant === \"text gray\" ||\n props.variant === \"dark transparent\") &&\n css`\n .c-btn__elements__element:first-child svg {\n margin-left: -4px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -4px;\n }\n ${props.size === \"small\" &&\n css`\n border-radius: var(--ac-br-4);\n `}\n ${props.size === \"big\" &&\n css`\n border-radius: var(--ac-br-8);\n `}\n `}\n`;\n\nStyledButton.displayName = \"StyledButton\";\n\nexport const StyledButtonElements = styled.span`\n display: flex;\n align-items: center;\n`;\n\nStyledButtonElements.displayName = \"StyledButtonElements\";\n\nexport const StyledButtonElement = styled.span`\n display: inline-flex;\n svg {\n margin: 0 4px;\n }\n`;\n\nStyledButtonElement.displayName = \"StyledButtonElement\";\n"],"file":"Styles.js"}
1
+ {"version":3,"sources":["../../../../src/components/Button/Styles.ts"],"names":["styled","css","FontStyle","BoxSizingStyle","StyledButton","button","props","size","variant","iconOnly","displayName","StyledButtonElements","span","StyledButtonElement"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAEA,SAASC,SAAT,QAA0B,cAA1B;AACA,SAASC,cAAT,QAA+B,mBAA/B;AAMA,OAAO,IAAMC,YAAY,GAAGJ,MAAM,CAACK,MAAV;AAAA;AAAA;AAAA,ifACrBH,SADqB,EAErBC,cAFqB,EAsCrB,UAACG,KAAD;AAAA,SACAA,KAAK,CAACC,IAAN,KAAe,OAAf,IACAN,GADA,kBADA;AAAA,CAtCqB,EA4CrB,UAACK,KAAD;AAAA,SACAA,KAAK,CAACC,IAAN,KAAe,KAAf,IACAN,GADA,kBADA;AAAA,CA5CqB,EAkDrB,UAACK,KAAD;AAAA,SACA,CAACA,KAAK,CAACE,OAAN,KAAkB,SAAlB,IAA+BF,KAAK,CAACE,OAAN,KAAkB,WAAlD,KACAP,GADA,iVADA;AAAA,CAlDqB,EAsErB,UAACK,KAAD;AAAA,SACA,CAACA,KAAK,CAACE,OAAN,KAAkB,WAAlB,IAAiCF,KAAK,CAACE,OAAN,KAAkB,UAApD,KACAP,GADA,yVADA;AAAA,CAtEqB,EA4FrB,UAACK,KAAD;AAAA,SACAA,KAAK,CAACE,OAAN,KAAkB,kBAAlB,IACAP,GADA,0MADA;AAAA,CA5FqB,EA8GrB,UAACK,KAAD;AAAA,SACA,CAACA,KAAK,CAACE,OAAN,KAAkB,UAAlB,IAAgCF,KAAK,CAACE,OAAN,KAAkB,cAAnD,KACAP,GADA,wNADA;AAAA,CA9GqB,EAgIrB,UAACK,KAAD;AAAA,SACA,CAACA,KAAK,CAACE,OAAN,KAAkB,QAAlB,IAA8BF,KAAK,CAACE,OAAN,KAAkB,WAAjD,KACAP,GADA,gRADA;AAAA,CAhIqB,EAoJrB,UAACK,KAAD;AAAA,SACAA,KAAK,CAACE,OAAN,KAAkB,eAAlB,IACAP,GADA,+TADA;AAAA,CApJqB,EAyKrB,UAACK,KAAD;AAAA,SACAA,KAAK,CAACG,QAAN,IACAR,GADA,wGAQI,CAACK,KAAK,CAACC,IAAN,KAAe,OAAf,IAA0BD,KAAK,CAACC,IAAN,KAAe,KAA1C,KACFN,GADE,yCARJ,EAaIK,KAAK,CAACC,IAAN,KAAe,OAAf,IACFN,GADE,iBAbJ,EAkBIK,KAAK,CAACC,IAAN,KAAe,KAAf,IACFN,GADE,iBAlBJ,CADA;AAAA,CAzKqB,EAkMrB,UAACK,KAAD;AAAA,SACA,CAACA,KAAK,CAACE,OAAN,KAAkB,SAAlB,IACCF,KAAK,CAACE,OAAN,KAAkB,WADnB,IAECF,KAAK,CAACE,OAAN,KAAkB,WAFnB,IAGCF,KAAK,CAACE,OAAN,KAAkB,UAHpB,KAIAP,GAJA,mIAYI,CAACK,KAAK,CAACC,IAAN,KAAe,OAAf,IAA0BD,KAAK,CAACC,IAAN,KAAe,KAA1C,KACFN,GADE,yCAZJ,CADA;AAAA,CAlMqB,EAqNrB,UAACK,KAAD;AAAA,SACA,CAACA,KAAK,CAACE,OAAN,KAAkB,UAAlB,IACCF,KAAK,CAACE,OAAN,KAAkB,cADnB,IAECF,KAAK,CAACE,OAAN,KAAkB,QAFnB,IAGCF,KAAK,CAACE,OAAN,KAAkB,WAHnB,IAICF,KAAK,CAACE,OAAN,KAAkB,kBAJpB,KAKAP,GALA,wIAYIK,KAAK,CAACC,IAAN,KAAe,OAAf,IACFN,GADE,mCAZJ,EAgBIK,KAAK,CAACC,IAAN,KAAe,KAAf,IACFN,GADE,mCAhBJ,CADA;AAAA,CArNqB,CAAlB;AA6OPG,YAAY,CAACM,WAAb,GAA2B,cAA3B;AAEA,OAAO,IAAMC,oBAAoB,GAAGX,MAAM,CAACY,IAAV;AAAA;AAAA;AAAA,wCAA1B;AAKPD,oBAAoB,CAACD,WAArB,GAAmC,sBAAnC;AAEA,OAAO,IAAMG,mBAAmB,GAAGb,MAAM,CAACY,IAAV;AAAA;AAAA;AAAA,8CAAzB;AAOPC,mBAAmB,CAACH,WAApB,GAAkC,qBAAlC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { IButtonProps } from \"./Button\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\ninterface StyledButtonProps extends IButtonProps {\n iconOnly: boolean;\n}\n\nexport const StyledButton = styled.button<StyledButtonProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n vertical-align: middle;\n font-weight: 500;\n display: inline-block;\n line-height: 1;\n margin: 0;\n text-decoration: none;\n font-size: 0.875rem;\n user-select: none;\n cursor: pointer;\n text-align: center;\n\n border: none;\n height: 32px;\n transition: all 0.3s ease;\n\n svg {\n fill: currentColor;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n text-decoration: none;\n }\n\n &:disabled {\n cursor: default;\n opacity: 50%;\n pointer-events: none;\n }\n\n ${(props) =>\n props.size === \"small\" &&\n css`\n height: 24px;\n `}\n\n ${(props) =>\n props.size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n (props.variant === \"primary\" || props.variant === \"contained\") &&\n css`\n padding: 0 16px;\n background-color: var(--color-primary);\n border-radius: var(--ac-br-rounded);\n color: var(--page-paper-main);\n\n &:hover,\n &:focus {\n box-shadow: 0 3px 6px -2px var(--color-primary-500);\n background-color: var(--color-primary-800);\n }\n\n &:active {\n box-shadow: 0 4px 10px -2px var(--color-primary-600);\n background-color: var(--color-primary-800);\n }\n `}\n\n ${(props) =>\n (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n css`\n padding: 0 16px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n border: solid 1px var(--color-theme-700);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus {\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n\n &:active {\n border-color: var(--color-primary);\n color: var(--color-primary);\n background-color: var(--color-primary-200);\n }\n `}\n\n ${(props) =>\n props.variant === \"dark transparent\" &&\n css`\n padding: 0 8px;\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: var(--ac-br-6);\n color: var(--only-white);\n\n &:hover,\n &:focus {\n background-color: rgba(0, 0, 0, 0.85);\n }\n\n &:active {\n background-color: var(--only-black);\n }\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-primary);\n\n &:hover,\n &:focus {\n background-color: var(--color-primary-200);\n }\n\n &:active {\n background-color: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n (props.variant === \"option\" || props.variant === \"text gray\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus {\n background-color: var(--color-theme-300);\n color: var(--color-theme-900);\n }\n\n &:active {\n background-color: var(--color-theme-400);\n color: var(--color-theme-900);\n }\n `}\n\n ${(props) =>\n props.variant === \"circle raised\" &&\n css`\n padding: 0 6px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n color: var(--color-theme-700);\n transition: ease 0.3s all;\n\n &:hover,\n &:focus {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary);\n }\n\n &:active {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary-hover);\n }\n `}\n\n ${(props) =>\n props.iconOnly &&\n css`\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n width: 32px;\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\n `};\n\n ${props.size === \"small\" &&\n css`\n width: 24px;\n `}\n\n ${props.size === \"big\" &&\n css`\n width: 40px;\n `}\n `}\n\n ${(props) =>\n (props.variant === \"primary\" ||\n props.variant === \"contained\" ||\n props.variant === \"secondary\" ||\n props.variant === \"outlined\") &&\n css`\n .c-btn__elements__element:first-child svg {\n margin-left: -6px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -6px;\n }\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\n `}\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" ||\n props.variant === \"text colored\" ||\n props.variant === \"option\" ||\n props.variant === \"text gray\" ||\n props.variant === \"dark transparent\") &&\n css`\n .c-btn__elements__element:first-child svg {\n margin-left: -4px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -4px;\n }\n ${props.size === \"small\" &&\n css`\n border-radius: var(--ac-br-4);\n `}\n ${props.size === \"big\" &&\n css`\n border-radius: var(--ac-br-8);\n `}\n `}\n`;\n\nStyledButton.displayName = \"StyledButton\";\n\nexport const StyledButtonElements = styled.span`\n display: flex;\n align-items: center;\n`;\n\nStyledButtonElements.displayName = \"StyledButtonElements\";\n\nexport const StyledButtonElement = styled.span`\n display: inline-flex;\n svg {\n margin: 0 4px;\n }\n`;\n\nStyledButtonElement.displayName = \"StyledButtonElement\";\n"],"file":"Styles.js"}
@@ -3,6 +3,8 @@ export interface IProgressBarProps {
3
3
  progress: number;
4
4
  backgroundColor?: string;
5
5
  progressColor?: string;
6
+ stroke?: number;
7
+ width?: number;
6
8
  }
7
9
  export declare const ProgressBar: FC<IProgressBarProps>;
8
10
  //# sourceMappingURL=ProgressBar.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AAG3C,MAAM,WAAW,iBAAiB;IAEhC,QAAQ,EAAE,MAAM,CAAC;IAEjB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,iBAAiB,CAyB7C,CAAC"}
1
+ {"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AAG3C,MAAM,WAAW,iBAAiB;IAEhC,QAAQ,EAAE,MAAM,CAAC;IAEjB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,iBAAiB,CAwD7C,CAAC"}
@@ -1,9 +1,14 @@
1
1
  import React, { useMemo } from "react";
2
2
  import { StyledProgressBar, StyledProgressBarProgress } from "./Styles";
3
3
  export var ProgressBar = function ProgressBar(_ref) {
4
- var progress = _ref.progress,
4
+ var _ref$progress = _ref.progress,
5
+ progress = _ref$progress === void 0 ? 0 : _ref$progress,
5
6
  backgroundColor = _ref.backgroundColor,
6
- progressColor = _ref.progressColor;
7
+ progressColor = _ref.progressColor,
8
+ _ref$stroke = _ref.stroke,
9
+ stroke = _ref$stroke === void 0 ? 3 : _ref$stroke,
10
+ _ref$width = _ref.width,
11
+ width = _ref$width === void 0 ? 100 : _ref$width;
7
12
  var progressNumber = useMemo(function () {
8
13
  var width = progress;
9
14
 
@@ -17,14 +22,38 @@ export var ProgressBar = function ProgressBar(_ref) {
17
22
 
18
23
  return width;
19
24
  }, [progress]);
25
+ var widthPercent = useMemo(function () {
26
+ var width_percent = width;
27
+
28
+ if (width > 100) {
29
+ width_percent = 100;
30
+ }
31
+
32
+ if (width <= 0) {
33
+ width_percent = 100;
34
+ }
35
+
36
+ return width_percent;
37
+ }, [width]);
38
+ var height = useMemo(function () {
39
+ var stroke_min = stroke;
40
+
41
+ if (stroke <= 0) {
42
+ stroke_min = 3;
43
+ }
44
+
45
+ return stroke_min;
46
+ }, [stroke]);
20
47
  return /*#__PURE__*/React.createElement(StyledProgressBar, {
21
48
  className: "c-progress-bar",
22
- $color: backgroundColor
49
+ $color: backgroundColor,
50
+ $width: widthPercent
23
51
  }, /*#__PURE__*/React.createElement(StyledProgressBarProgress, {
24
52
  className: "c-progress-bar__progress",
25
53
  style: {
26
54
  width: progressNumber + "%"
27
55
  },
56
+ $height: height,
28
57
  $color: progressColor
29
58
  }));
30
59
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"names":["React","useMemo","StyledProgressBar","StyledProgressBarProgress","ProgressBar","progress","backgroundColor","progressColor","progressNumber","width","displayName"],"mappings":"AAAA,OAAOA,KAAP,IAAoBC,OAApB,QAAmC,OAAnC;AACA,SAASC,iBAAT,EAA4BC,yBAA5B,QAA6D,UAA7D;AAWA,OAAO,IAAMC,WAAkC,GAAG,SAArCA,WAAqC,OAI5C;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,MAFJC,eAEI,QAFJA,eAEI;AAAA,MADJC,aACI,QADJA,aACI;AACJ,MAAMC,cAAc,GAAGP,OAAO,CAAC,YAAM;AACnC,QAAIQ,KAAK,GAAGJ,QAAZ;;AACA,QAAIA,QAAQ,GAAG,GAAf,EAAoB;AAClBI,MAAAA,KAAK,GAAG,GAAR;AACD;;AACD,QAAIJ,QAAQ,GAAG,CAAf,EAAkB;AAChBI,MAAAA,KAAK,GAAG,CAAR;AACD;;AACD,WAAOA,KAAP;AACD,GAT6B,EAS3B,CAACJ,QAAD,CAT2B,CAA9B;AAWA,sBACE,oBAAC,iBAAD;AAAmB,IAAA,SAAS,EAAE,gBAA9B;AAAgD,IAAA,MAAM,EAAEC;AAAxD,kBACE,oBAAC,yBAAD;AACE,IAAA,SAAS,EAAE,0BADb;AAEE,IAAA,KAAK,EAAE;AAAEG,MAAAA,KAAK,EAAKD,cAAL;AAAP,KAFT;AAGE,IAAA,MAAM,EAAED;AAHV,IADF,CADF;AASD,CAzBM;AA2BPH,WAAW,CAACM,WAAZ,GAA0B,aAA1B","sourcesContent":["import React, { FC, useMemo } from \"react\";\nimport { StyledProgressBar, StyledProgressBarProgress } from \"./Styles\";\n\nexport interface IProgressBarProps {\n /** Progress prop can be number. */\n progress: number;\n /** Custom classname for styling. */\n backgroundColor?: string;\n /** Custom classname for styling. */\n progressColor?: string;\n}\n\nexport const ProgressBar: FC<IProgressBarProps> = ({\n progress,\n backgroundColor,\n progressColor,\n}) => {\n const progressNumber = useMemo(() => {\n let width = progress;\n if (progress > 100) {\n width = 100;\n }\n if (progress < 0) {\n width = 0;\n }\n return width;\n }, [progress]);\n\n return (\n <StyledProgressBar className={\"c-progress-bar\"} $color={backgroundColor}>\n <StyledProgressBarProgress\n className={\"c-progress-bar__progress\"}\n style={{ width: `${progressNumber}%` }}\n $color={progressColor}\n />\n </StyledProgressBar>\n );\n};\n\nProgressBar.displayName = \"ProgressBar\";\n"],"file":"ProgressBar.js"}
1
+ {"version":3,"sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"names":["React","useMemo","StyledProgressBar","StyledProgressBarProgress","ProgressBar","progress","backgroundColor","progressColor","stroke","width","progressNumber","widthPercent","width_percent","height","stroke_min","displayName"],"mappings":"AAAA,OAAOA,KAAP,IAAoBC,OAApB,QAAmC,OAAnC;AACA,SAASC,iBAAT,EAA4BC,yBAA5B,QAA6D,UAA7D;AAeA,OAAO,IAAMC,WAAkC,GAAG,SAArCA,WAAqC,OAM5C;AAAA,2BALJC,QAKI;AAAA,MALJA,QAKI,8BALO,CAKP;AAAA,MAJJC,eAII,QAJJA,eAII;AAAA,MAHJC,aAGI,QAHJA,aAGI;AAAA,yBAFJC,MAEI;AAAA,MAFJA,MAEI,4BAFK,CAEL;AAAA,wBADJC,KACI;AAAA,MADJA,KACI,2BADI,GACJ;AACJ,MAAMC,cAAc,GAAGT,OAAO,CAAC,YAAM;AACnC,QAAIQ,KAAK,GAAGJ,QAAZ;;AACA,QAAIA,QAAQ,GAAG,GAAf,EAAoB;AAClBI,MAAAA,KAAK,GAAG,GAAR;AACD;;AACD,QAAIJ,QAAQ,GAAG,CAAf,EAAkB;AAChBI,MAAAA,KAAK,GAAG,CAAR;AACD;;AACD,WAAOA,KAAP;AACD,GAT6B,EAS3B,CAACJ,QAAD,CAT2B,CAA9B;AAWA,MAAMM,YAAY,GAAGV,OAAO,CAAC,YAAM;AACjC,QAAIW,aAAa,GAAGH,KAApB;;AAEA,QAAIA,KAAK,GAAG,GAAZ,EAAiB;AACfG,MAAAA,aAAa,GAAG,GAAhB;AACD;;AAED,QAAIH,KAAK,IAAI,CAAb,EAAgB;AACdG,MAAAA,aAAa,GAAG,GAAhB;AACD;;AAED,WAAOA,aAAP;AACD,GAZ2B,EAYzB,CAACH,KAAD,CAZyB,CAA5B;AAcA,MAAMI,MAAM,GAAGZ,OAAO,CAAC,YAAM;AAC3B,QAAIa,UAAU,GAAGN,MAAjB;;AAEA,QAAIA,MAAM,IAAI,CAAd,EAAiB;AACfM,MAAAA,UAAU,GAAG,CAAb;AACD;;AAED,WAAOA,UAAP;AACD,GARqB,EAQnB,CAACN,MAAD,CARmB,CAAtB;AAUA,sBACE,oBAAC,iBAAD;AACE,IAAA,SAAS,EAAE,gBADb;AAEE,IAAA,MAAM,EAAEF,eAFV;AAGE,IAAA,MAAM,EAAEK;AAHV,kBAKE,oBAAC,yBAAD;AACE,IAAA,SAAS,EAAE,0BADb;AAEE,IAAA,KAAK,EAAE;AAAEF,MAAAA,KAAK,EAAKC,cAAL;AAAP,KAFT;AAGE,IAAA,OAAO,EAAEG,MAHX;AAIE,IAAA,MAAM,EAAEN;AAJV,IALF,CADF;AAcD,CAxDM;AA0DPH,WAAW,CAACW,WAAZ,GAA0B,aAA1B","sourcesContent":["import React, { FC, useMemo } from \"react\";\nimport { StyledProgressBar, StyledProgressBarProgress } from \"./Styles\";\n\nexport interface IProgressBarProps {\n /** Progress prop can be number. */\n progress: number;\n /** Custom classname for styling. */\n backgroundColor?: string;\n /** Custom classname for styling. */\n progressColor?: string;\n /** Progress height. */\n stroke?: number;\n /** Progress width in percentage. */\n width?: number;\n}\n\nexport const ProgressBar: FC<IProgressBarProps> = ({\n progress = 0,\n backgroundColor,\n progressColor,\n stroke = 3,\n width = 100,\n}) => {\n const progressNumber = useMemo(() => {\n let width = progress;\n if (progress > 100) {\n width = 100;\n }\n if (progress < 0) {\n width = 0;\n }\n return width;\n }, [progress]);\n\n const widthPercent = useMemo(() => {\n let width_percent = width;\n\n if (width > 100) {\n width_percent = 100;\n }\n\n if (width <= 0) {\n width_percent = 100;\n }\n\n return width_percent;\n }, [width]);\n\n const height = useMemo(() => {\n let stroke_min = stroke;\n\n if (stroke <= 0) {\n stroke_min = 3;\n }\n\n return stroke_min;\n }, [stroke]);\n\n return (\n <StyledProgressBar\n className={\"c-progress-bar\"}\n $color={backgroundColor}\n $width={widthPercent}\n >\n <StyledProgressBarProgress\n className={\"c-progress-bar__progress\"}\n style={{ width: `${progressNumber}%` }}\n $height={height}\n $color={progressColor}\n />\n </StyledProgressBar>\n );\n};\n\nProgressBar.displayName = \"ProgressBar\";\n"],"file":"ProgressBar.js"}
@@ -1,5 +1,7 @@
1
1
  interface IStyledProgressBar {
2
2
  $color?: string;
3
+ $height?: number;
4
+ $width?: number;
3
5
  }
4
6
  export declare const StyledProgressBar: import("styled-components").StyledComponent<"div", any, IStyledProgressBar, never>;
5
7
  export declare const StyledProgressBarProgress: import("styled-components").StyledComponent<"div", any, IStyledProgressBar, never>;
@@ -1 +1 @@
1
- {"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressBar/Styles.ts"],"names":[],"mappings":"AAGA,UAAU,kBAAkB;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,iBAAiB,oFAW7B,CAAC;AAIF,eAAO,MAAM,yBAAyB,oFAWrC,CAAC"}
1
+ {"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressBar/Styles.ts"],"names":[],"mappings":"AAGA,UAAU,kBAAkB;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,iBAAiB,oFAoB7B,CAAC;AAIF,eAAO,MAAM,yBAAyB,oFAkBrC,CAAC"}
@@ -3,14 +3,18 @@ import { BoxSizingStyle } from "../BoxSizingStyle";
3
3
  export var StyledProgressBar = styled.div.withConfig({
4
4
  displayName: "Styles__StyledProgressBar",
5
5
  componentId: "sc-k5nm08-0"
6
- })(["", " ", ""], BoxSizingStyle, function (props) {
6
+ })(["", " ", " ", ""], BoxSizingStyle, function (props) {
7
+ return props.$width ? css(["width:", "%;"], props.$width) : css(["width:100%;"]);
8
+ }, function (props) {
7
9
  return props.$color ? css(["background-color:", ";"], props.$color) : css(["background-color:var(--color-theme-300);"]);
8
10
  });
9
11
  StyledProgressBar.displayName = "StyledProgressBar";
10
12
  export var StyledProgressBarProgress = styled.div.withConfig({
11
13
  displayName: "Styles__StyledProgressBarProgress",
12
14
  componentId: "sc-k5nm08-1"
13
- })(["height:3px;", ""], function (props) {
15
+ })(["", " ", ""], function (props) {
16
+ return props.$height ? css(["height:", "px;"], props.$height) : css(["height:3px;"]);
17
+ }, function (props) {
14
18
  return props.$color ? css(["background-color:", ";"], props.$color) : css(["background-color:var(--color-secondary);"]);
15
19
  });
16
20
  StyledProgressBarProgress.displayName = "StyledProgressBarProgress";
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/ProgressBar/Styles.ts"],"names":["styled","css","BoxSizingStyle","StyledProgressBar","div","props","$color","displayName","StyledProgressBarProgress"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,cAAT,QAA+B,mBAA/B;AAMA,OAAO,IAAMC,iBAAiB,GAAGH,MAAM,CAACI,GAAV;AAAA;AAAA;AAAA,kBAC1BF,cAD0B,EAG1B,UAACG,KAAD;AAAA,SACAA,KAAK,CAACC,MAAN,GACIL,GADJ,6BAE0BI,KAAK,CAACC,MAFhC,IAIIL,GAJJ,8CADA;AAAA,CAH0B,CAAvB;AAaPE,iBAAiB,CAACI,WAAlB,GAAgC,mBAAhC;AAEA,OAAO,IAAMC,yBAAyB,GAAGR,MAAM,CAACI,GAAV;AAAA;AAAA;AAAA,wBAGlC,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,MAAN,GACIL,GADJ,6BAE0BI,KAAK,CAACC,MAFhC,IAIIL,GAJJ,8CADA;AAAA,CAHkC,CAA/B;AAaPO,yBAAyB,CAACD,WAA1B,GAAwC,2BAAxC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\ninterface IStyledProgressBar {\n $color?: string;\n}\n\nexport const StyledProgressBar = styled.div<IStyledProgressBar>`\n ${BoxSizingStyle}\n\n ${(props) =>\n props.$color\n ? css`\n background-color: ${props.$color};\n `\n : css`\n background-color: var(--color-theme-300);\n `}\n`;\n\nStyledProgressBar.displayName = \"StyledProgressBar\";\n\nexport const StyledProgressBarProgress = styled.div<IStyledProgressBar>`\n height: 3px;\n\n ${(props) =>\n props.$color\n ? css`\n background-color: ${props.$color};\n `\n : css`\n background-color: var(--color-secondary);\n `}\n`;\n\nStyledProgressBarProgress.displayName = \"StyledProgressBarProgress\";\n"],"file":"Styles.js"}
1
+ {"version":3,"sources":["../../../../src/components/ProgressBar/Styles.ts"],"names":["styled","css","BoxSizingStyle","StyledProgressBar","div","props","$width","$color","displayName","StyledProgressBarProgress","$height"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,cAAT,QAA+B,mBAA/B;AAQA,OAAO,IAAMC,iBAAiB,GAAGH,MAAM,CAACI,GAAV;AAAA;AAAA;AAAA,uBAC1BF,cAD0B,EAG1B,UAACG,KAAD;AAAA,SACAA,KAAK,CAACC,MAAN,GACIL,GADJ,mBAEeI,KAAK,CAACC,MAFrB,IAIIL,GAJJ,iBADA;AAAA,CAH0B,EAY1B,UAACI,KAAD;AAAA,SACAA,KAAK,CAACE,MAAN,GACIN,GADJ,6BAE0BI,KAAK,CAACE,MAFhC,IAIIN,GAJJ,8CADA;AAAA,CAZ0B,CAAvB;AAsBPE,iBAAiB,CAACK,WAAlB,GAAgC,mBAAhC;AAEA,OAAO,IAAMC,yBAAyB,GAAGT,MAAM,CAACI,GAAV;AAAA;AAAA;AAAA,kBAClC,UAACC,KAAD;AAAA,SACAA,KAAK,CAACK,OAAN,GACIT,GADJ,qBAEgBI,KAAK,CAACK,OAFtB,IAIIT,GAJJ,iBADA;AAAA,CADkC,EAUlC,UAACI,KAAD;AAAA,SACAA,KAAK,CAACE,MAAN,GACIN,GADJ,6BAE0BI,KAAK,CAACE,MAFhC,IAIIN,GAJJ,8CADA;AAAA,CAVkC,CAA/B;AAoBPQ,yBAAyB,CAACD,WAA1B,GAAwC,2BAAxC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\ninterface IStyledProgressBar {\n $color?: string;\n $height?: number;\n $width?: number;\n}\n\nexport const StyledProgressBar = styled.div<IStyledProgressBar>`\n ${BoxSizingStyle}\n\n ${(props) =>\n props.$width\n ? css`\n width: ${props.$width}%;\n `\n : css`\n width: 100%;\n `}\n\n ${(props) =>\n props.$color\n ? css`\n background-color: ${props.$color};\n `\n : css`\n background-color: var(--color-theme-300);\n `}\n`;\n\nStyledProgressBar.displayName = \"StyledProgressBar\";\n\nexport const StyledProgressBarProgress = styled.div<IStyledProgressBar>`\n ${(props) =>\n props.$height\n ? css`\n height: ${props.$height}px;\n `\n : css`\n height: 3px;\n `}\n\n ${(props) =>\n props.$color\n ? css`\n background-color: ${props.$color};\n `\n : css`\n background-color: var(--color-secondary);\n `}\n`;\n\nStyledProgressBarProgress.displayName = \"StyledProgressBarProgress\";\n"],"file":"Styles.js"}
@@ -0,0 +1,2 @@
1
+ export declare const StyledButton: import("styled-components").StyledComponent<"button", any, {}, never>;
2
+ //# sourceMappingURL=Styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Trigger/Styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,uEAyBxB,CAAC"}
@@ -0,0 +1,7 @@
1
+ import styled from "styled-components";
2
+ export var StyledButton = styled.button.withConfig({
3
+ displayName: "Styles__StyledButton",
4
+ componentId: "sc-1tom9pu-0"
5
+ })(["border:none;margin:0;padding:0;width:auto;overflow:visible;cursor:pointer;background:transparent;outline:none;color:inherit;font:inherit;line-height:inherit;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;&::-moz-focus-inner{border:0;padding:0;}"]);
6
+ StyledButton.displayName = "StyledButton";
7
+ //# sourceMappingURL=Styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/components/Trigger/Styles.ts"],"names":["styled","StyledButton","button","displayName"],"mappings":"AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA,OAAO,IAAMC,YAAY,GAAGD,MAAM,CAACE,MAAV;AAAA;AAAA;AAAA,oSAAlB;AA2BPD,YAAY,CAACE,WAAb,GAA2B,cAA3B","sourcesContent":["import styled from \"styled-components\";\n\nexport const StyledButton = styled.button`\n border: none;\n margin: 0;\n padding: 0;\n width: auto;\n overflow: visible;\n cursor: pointer;\n\n background: transparent;\n\n outline: none;\n color: inherit;\n font: inherit;\n\n line-height: inherit;\n\n -webkit-font-smoothing: inherit;\n -moz-osx-font-smoothing: inherit;\n\n -webkit-appearance: none;\n\n &::-moz-focus-inner {\n border: 0;\n padding: 0;\n }\n`;\n\nStyledButton.displayName = \"StyledButton\";\n"],"file":"Styles.js"}
@@ -0,0 +1,3 @@
1
+ import React from "react";
2
+ export declare const Trigger: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & React.RefAttributes<HTMLButtonElement>>;
3
+ //# sourceMappingURL=Trigger.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Trigger.d.ts","sourceRoot":"","sources":["../../../../src/components/Trigger/Trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAGpE,eAAO,MAAM,OAAO,wOASlB,CAAC"}
@@ -0,0 +1,19 @@
1
+ import _extends from "@babel/runtime/helpers/esm/extends";
2
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
+ var _excluded = ["children", "type"];
4
+ import React, { forwardRef } from "react";
5
+ import { StyledButton } from "./Styles";
6
+ export var Trigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
7
+ var children = _ref.children,
8
+ _ref$type = _ref.type,
9
+ type = _ref$type === void 0 ? "button" : _ref$type,
10
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded);
11
+
12
+ return /*#__PURE__*/React.createElement(StyledButton, _extends({
13
+ ref: ref,
14
+ role: "button",
15
+ type: type
16
+ }, rest), children);
17
+ });
18
+ Trigger.displayName = "Trigger";
19
+ //# sourceMappingURL=Trigger.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/components/Trigger/Trigger.tsx"],"names":["React","forwardRef","StyledButton","Trigger","ref","children","type","rest","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAA4D,OAA5D;AACA,SAASC,YAAT,QAA6B,UAA7B;AAEA,OAAO,IAAMC,OAAO,gBAAGF,UAAU,CAG/B,gBAAyCG,GAAzC,EAAiD;AAAA,MAA9CC,QAA8C,QAA9CA,QAA8C;AAAA,uBAApCC,IAAoC;AAAA,MAApCA,IAAoC,0BAA7B,QAA6B;AAAA,MAAhBC,IAAgB;;AACjD,sBACE,oBAAC,YAAD;AAAc,IAAA,GAAG,EAAEH,GAAnB;AAAwB,IAAA,IAAI,EAAC,QAA7B;AAAsC,IAAA,IAAI,EAAEE;AAA5C,KAAsDC,IAAtD,GACGF,QADH,CADF;AAKD,CATgC,CAA1B;AAWPF,OAAO,CAACK,WAAR,GAAsB,SAAtB","sourcesContent":["import React, { forwardRef, ComponentPropsWithoutRef } from \"react\";\nimport { StyledButton } from \"./Styles\";\n\nexport const Trigger = forwardRef<\n HTMLButtonElement,\n ComponentPropsWithoutRef<\"button\">\n>(({ children, type = \"button\", ...rest }, ref) => {\n return (\n <StyledButton ref={ref} role=\"button\" type={type} {...rest}>\n {children}\n </StyledButton>\n );\n});\n\nTrigger.displayName = \"Trigger\";\n"],"file":"Trigger.js"}
@@ -0,0 +1,2 @@
1
+ export * from "./Trigger";
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Trigger/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}
@@ -0,0 +1,2 @@
1
+ export * from "./Trigger";
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/components/Trigger/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAd","sourcesContent":["export * from \"./Trigger\";\n"],"file":"index.js"}