glints-aries 4.0.147 → 4.0.151

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 (65) hide show
  1. package/es/General/Icon/components/HandShakeIcon.d.ts +4 -0
  2. package/es/General/Icon/components/HandShakeIcon.js +15 -0
  3. package/es/General/Icon/components/MessageOutlineIcon.d.ts +4 -0
  4. package/es/General/Icon/components/MessageOutlineIcon.js +14 -0
  5. package/es/General/Icon/components/MessageOutlineIncomingIcon.d.ts +4 -0
  6. package/es/General/Icon/components/MessageOutlineIncomingIcon.js +20 -0
  7. package/es/General/Icon/components/NameTagIcon.d.ts +4 -0
  8. package/es/General/Icon/components/NameTagIcon.js +15 -0
  9. package/es/General/Icon/components/SalaryIcon.d.ts +4 -0
  10. package/es/General/Icon/components/SalaryIcon.js +15 -0
  11. package/es/General/Icon/components/UserCogIcon.d.ts +4 -0
  12. package/es/General/Icon/components/UserCogIcon.js +15 -0
  13. package/es/General/Icon/components/UserWrenchIcon.d.ts +4 -0
  14. package/es/General/Icon/components/UserWrenchIcon.js +18 -0
  15. package/es/General/Icon/components/index.d.ts +7 -0
  16. package/es/General/Icon/components/index.js +7 -0
  17. package/es/Input/DownshiftSelect/Select.d.ts +8 -0
  18. package/es/Input/DownshiftSelect/Select.js +42 -18
  19. package/es/Input/DownshiftSelect/Select.stories.d.ts +1 -0
  20. package/es/Input/DownshiftSelect/Select.stories.js +28 -6
  21. package/es/Input/DownshiftSelect/SelectStyle.d.ts +3 -0
  22. package/es/Input/DownshiftSelect/SelectStyle.js +13 -1
  23. package/es/Input/TextField/TextField.d.ts +2 -0
  24. package/es/Input/TextField/TextField.js +4 -3
  25. package/es/Input/TextField/TextField.stories.d.ts +1 -0
  26. package/es/Input/TextField/TextField.stories.js +6 -0
  27. package/es/Input/TextField/TextFieldStyle.d.ts +1 -0
  28. package/es/Input/TextField/TextFieldStyle.js +7 -3
  29. package/es/Utils/Icon/IconLibrary.d.ts +7 -0
  30. package/es/Utils/Icon/IconLibrary.js +49 -0
  31. package/es/index.d.ts +8 -1
  32. package/es/index.js +7 -0
  33. package/lib/General/Icon/components/HandShakeIcon.d.ts +4 -0
  34. package/lib/General/Icon/components/HandShakeIcon.js +26 -0
  35. package/lib/General/Icon/components/MessageOutlineIcon.d.ts +4 -0
  36. package/lib/General/Icon/components/MessageOutlineIcon.js +25 -0
  37. package/lib/General/Icon/components/MessageOutlineIncomingIcon.d.ts +4 -0
  38. package/lib/General/Icon/components/MessageOutlineIncomingIcon.js +31 -0
  39. package/lib/General/Icon/components/NameTagIcon.d.ts +4 -0
  40. package/lib/General/Icon/components/NameTagIcon.js +26 -0
  41. package/lib/General/Icon/components/SalaryIcon.d.ts +4 -0
  42. package/lib/General/Icon/components/SalaryIcon.js +26 -0
  43. package/lib/General/Icon/components/UserCogIcon.d.ts +4 -0
  44. package/lib/General/Icon/components/UserCogIcon.js +26 -0
  45. package/lib/General/Icon/components/UserWrenchIcon.d.ts +4 -0
  46. package/lib/General/Icon/components/UserWrenchIcon.js +29 -0
  47. package/lib/General/Icon/components/index.d.ts +7 -0
  48. package/lib/General/Icon/components/index.js +30 -2
  49. package/lib/Input/DownshiftSelect/Select.d.ts +8 -0
  50. package/lib/Input/DownshiftSelect/Select.js +41 -17
  51. package/lib/Input/DownshiftSelect/Select.stories.d.ts +1 -0
  52. package/lib/Input/DownshiftSelect/Select.stories.js +30 -7
  53. package/lib/Input/DownshiftSelect/SelectStyle.d.ts +3 -0
  54. package/lib/Input/DownshiftSelect/SelectStyle.js +23 -2
  55. package/lib/Input/TextField/TextField.d.ts +2 -0
  56. package/lib/Input/TextField/TextField.js +3 -2
  57. package/lib/Input/TextField/TextField.stories.d.ts +1 -0
  58. package/lib/Input/TextField/TextField.stories.js +8 -1
  59. package/lib/Input/TextField/TextFieldStyle.d.ts +1 -0
  60. package/lib/Input/TextField/TextFieldStyle.js +11 -4
  61. package/lib/Utils/Icon/IconLibrary.d.ts +7 -0
  62. package/lib/Utils/Icon/IconLibrary.js +49 -0
  63. package/lib/index.d.ts +8 -1
  64. package/lib/index.js +30 -2
  65. package/package.json +1 -1
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { Props } from '../Icon';
3
+ declare const HandShakeIcon: (props: Partial<Props>) => JSX.Element;
4
+ export default HandShakeIcon;
@@ -0,0 +1,15 @@
1
+ // GENERATE BY ./src/General/Icon/generateIcons.js
2
+ // DO NOT EDIT IT MANUALLY
3
+ import * as React from 'react';
4
+ import Icon from '../Icon';
5
+
6
+ var HandShakeIcon = function HandShakeIcon(props) {
7
+ return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("g", {
8
+ transform: "scale(4, 4)"
9
+ }, /*#__PURE__*/React.createElement("path", {
10
+ d: "M19.47 5.19703L17.685 3.41203C17.2899 3.02046 16.7562 2.80078 16.2 2.80078H7.695C7.14 2.80078 6.60375 3.02203 6.21 3.41203L4.425 5.19703H0V14.7858H2.4C3.06 14.7858 3.5925 14.2533 3.59625 13.597H3.9375L7.11 16.462C8.26875 17.4033 9.8775 17.4258 11.07 16.6045C11.5388 17.0095 12.045 17.2008 12.6112 17.2008C13.2937 17.2008 13.935 16.9233 14.4413 16.3008C15.27 16.627 16.2488 16.3983 16.8413 15.6708L17.8237 14.4595C18.0338 14.2008 18.165 13.9045 18.2325 13.597H20.4037C20.4075 14.2533 20.9438 14.7858 21.6 14.7858H24V5.19703H19.47ZM1.8 13.5858C1.47 13.5858 1.2 13.3158 1.2 12.9858C1.2 12.6558 1.47 12.3858 1.8 12.3858C2.13 12.3858 2.4 12.6558 2.4 12.9858C2.4 13.3195 2.13 13.5858 1.8 13.5858ZM16.425 13.327L15.4462 14.5345C15.3413 14.662 15.1538 14.6845 15.0225 14.5795L14.1263 13.852L13.0013 15.2208C12.7763 15.4945 12.4388 15.4008 12.3263 15.3108L10.9462 14.1295L10.3612 14.8495C9.84 15.4908 8.89125 15.5883 8.2875 15.097L4.63875 11.797H3.6V6.99328H5.17125L7.485 4.68328C7.56 4.65328 7.62375 4.62703 7.69875 4.59703H9.825L8.37375 5.92828C7.27125 6.93703 7.2075 8.63953 8.20875 9.72703C8.76375 10.3345 10.5037 11.272 12.015 9.89203L12.3225 9.61078L16.38 12.9033C16.5075 13.0083 16.5263 13.1995 16.425 13.327ZM20.4 11.797H17.805C17.7188 11.692 17.6213 11.5945 17.5163 11.5083L13.665 8.38078L14.1337 7.95328C14.3775 7.72828 14.3963 7.34953 14.1713 7.10578L13.7625 6.66703C13.5375 6.42328 13.1588 6.40828 12.915 6.62953L10.845 8.52703C10.4888 8.85328 9.88125 8.87953 9.5475 8.52703C9.19875 8.15578 9.22875 7.58578 9.5925 7.25578L12.0525 5.00203C12.33 4.74703 12.69 4.60828 13.065 4.60828L16.2038 4.60078C16.2825 4.60078 16.3575 4.63078 16.41 4.68703L18.7238 6.99703H20.4V11.797ZM22.2 13.5858C21.87 13.5858 21.6 13.3158 21.6 12.9858C21.6 12.6558 21.87 12.3858 22.2 12.3858C22.53 12.3858 22.8 12.6558 22.8 12.9858C22.8 13.3195 22.53 13.5858 22.2 13.5858Z",
11
+ fill: "black"
12
+ })));
13
+ };
14
+
15
+ export default HandShakeIcon;
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { Props } from '../Icon';
3
+ declare const MessageOutlineIcon: (props: Partial<Props>) => JSX.Element;
4
+ export default MessageOutlineIcon;
@@ -0,0 +1,14 @@
1
+ // GENERATE BY ./src/General/Icon/generateIcons.js
2
+ // DO NOT EDIT IT MANUALLY
3
+ import * as React from 'react';
4
+ import Icon from '../Icon';
5
+
6
+ var MessageOutlineIcon = function MessageOutlineIcon(props) {
7
+ return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("g", {
8
+ transform: "scale(4)"
9
+ }, /*#__PURE__*/React.createElement("path", {
10
+ d: "M10.875 12C10.875 12.2984 10.9935 12.5845 11.2045 12.7955C11.4155 13.0065 11.7016 13.125 12 13.125C12.2984 13.125 12.5845 13.0065 12.7955 12.7955C13.0065 12.5845 13.125 12.2984 13.125 12C13.125 11.7016 13.0065 11.4155 12.7955 11.2045C12.5845 10.9935 12.2984 10.875 12 10.875C11.7016 10.875 11.4155 10.9935 11.2045 11.2045C10.9935 11.4155 10.875 11.7016 10.875 12ZM15.5625 12C15.5625 12.2984 15.681 12.5845 15.892 12.7955C16.103 13.0065 16.3891 13.125 16.6875 13.125C16.9859 13.125 17.272 13.0065 17.483 12.7955C17.694 12.5845 17.8125 12.2984 17.8125 12C17.8125 11.7016 17.694 11.4155 17.483 11.2045C17.272 10.9935 16.9859 10.875 16.6875 10.875C16.3891 10.875 16.103 10.9935 15.892 11.2045C15.681 11.4155 15.5625 11.7016 15.5625 12ZM6.18751 12C6.18751 12.2984 6.30604 12.5845 6.51702 12.7955C6.72799 13.0065 7.01414 13.125 7.31251 13.125C7.61088 13.125 7.89703 13.0065 8.10801 12.7955C8.31898 12.5845 8.43751 12.2984 8.43751 12C8.43751 11.7016 8.31898 11.4155 8.10801 11.2045C7.89703 10.9935 7.61088 10.875 7.31251 10.875C7.01414 10.875 6.72799 10.9935 6.51702 11.2045C6.30604 11.4155 6.18751 11.7016 6.18751 12ZM21.6844 7.93125C21.1547 6.67266 20.3953 5.54297 19.4274 4.57266C18.4662 3.60796 17.3251 2.84114 16.0688 2.31563C14.7797 1.77422 13.4109 1.5 12 1.5H11.9531C10.5328 1.50703 9.15704 1.78828 7.86329 2.34141C6.61772 2.87232 5.48735 3.64049 4.53517 4.60312C3.57657 5.57109 2.82423 6.69609 2.30392 7.95C1.76485 9.24844 1.49298 10.6289 1.50001 12.0492C1.50796 13.6769 1.89304 15.2806 2.62501 16.7344V20.2969C2.62501 20.5828 2.7386 20.857 2.94079 21.0592C3.14297 21.2614 3.4172 21.375 3.70314 21.375H7.26798C8.72179 22.107 10.3255 22.492 11.9531 22.5H12.0024C13.4063 22.5 14.768 22.2281 16.05 21.6961C17.3 21.1768 18.4368 20.419 19.3969 19.4648C20.3649 18.5063 21.1266 17.3859 21.6586 16.1367C22.2117 14.843 22.493 13.4672 22.5 12.0469C22.507 10.6195 22.2305 9.23438 21.6844 7.93125ZM18.143 18.1969C16.5 19.8234 14.3203 20.7188 12 20.7188H11.9602C10.5469 20.7117 9.14298 20.3602 7.90314 19.6992L7.70626 19.5938H4.40626V16.2938L4.30079 16.0969C3.63985 14.857 3.28829 13.4531 3.28126 12.0398C3.27189 9.70312 4.16485 7.50937 5.80314 5.85703C7.43907 4.20469 9.62579 3.29062 11.9625 3.28125H12.0024C13.1742 3.28125 14.3109 3.50859 15.382 3.95859C16.4274 4.39687 17.3649 5.02734 18.1711 5.83359C18.975 6.6375 19.6078 7.57734 20.0461 8.62266C20.5008 9.70547 20.7281 10.8539 20.7234 12.0398C20.7094 14.3742 19.793 16.5609 18.143 18.1969Z"
11
+ })));
12
+ };
13
+
14
+ export default MessageOutlineIcon;
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { Props } from '../Icon';
3
+ declare const MessageOutlineIncomingIcon: (props: Partial<Props>) => JSX.Element;
4
+ export default MessageOutlineIncomingIcon;
@@ -0,0 +1,20 @@
1
+ // GENERATE BY ./src/General/Icon/generateIcons.js
2
+ // DO NOT EDIT IT MANUALLY
3
+ import * as React from 'react';
4
+ import Icon from '../Icon';
5
+
6
+ var MessageOutlineIncomingIcon = function MessageOutlineIncomingIcon(props) {
7
+ return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("g", {
8
+ transform: "scale(4)"
9
+ }, /*#__PURE__*/React.createElement("path", {
10
+ d: "M9.87513 11C9.87513 11.2984 9.99366 11.5845 10.2046 11.7955C10.4156 12.0065 10.7018 12.125 11.0001 12.125C11.2985 12.125 11.5846 12.0065 11.7956 11.7955C12.0066 11.5845 12.1251 11.2984 12.1251 11C12.1251 10.7016 12.0066 10.4155 11.7956 10.2045C11.5846 9.99353 11.2985 9.875 11.0001 9.875C10.7018 9.875 10.4156 9.99353 10.2046 10.2045C9.99366 10.4155 9.87513 10.7016 9.87513 11V11ZM14.5626 11C14.5626 11.2984 14.6812 11.5845 14.8921 11.7955C15.1031 12.0065 15.3893 12.125 15.6876 12.125C15.986 12.125 16.2721 12.0065 16.4831 11.7955C16.6941 11.5845 16.8126 11.2984 16.8126 11C16.8126 10.7016 16.6941 10.4155 16.4831 10.2045C16.2721 9.99353 15.986 9.875 15.6876 9.875C15.3893 9.875 15.1031 9.99353 14.8921 10.2045C14.6812 10.4155 14.5626 10.7016 14.5626 11ZM5.18763 11C5.18763 11.2984 5.30616 11.5845 5.51714 11.7955C5.72812 12.0065 6.01426 12.125 6.31263 12.125C6.611 12.125 6.89715 12.0065 7.10813 11.7955C7.31911 11.5845 7.43763 11.2984 7.43763 11C7.43763 10.7016 7.31911 10.4155 7.10813 10.2045C6.89715 9.99353 6.611 9.875 6.31263 9.875C6.01426 9.875 5.72812 9.99353 5.51714 10.2045C5.30616 10.4155 5.18763 10.7016 5.18763 11V11ZM20.6845 6.93125C20.1548 5.67266 19.3954 4.54297 18.4275 3.57266C17.4663 2.60796 16.3252 1.84114 15.0689 1.31563C13.7798 0.774219 12.4111 0.5 11.0001 0.5H10.9533C9.53295 0.507031 8.15716 0.788281 6.86341 1.34141C5.61785 1.87232 4.48747 2.64049 3.53529 3.60312C2.5767 4.57109 1.82435 5.69609 1.30404 6.95C0.764977 8.24844 0.493102 9.62891 0.500133 11.0492C0.508086 12.6769 0.893161 14.2806 1.62513 15.7344V19.2969C1.62513 19.5828 1.73872 19.857 1.94091 20.0592C2.1431 20.2614 2.41732 20.375 2.70326 20.375H6.2681C7.72192 21.107 9.32559 21.492 10.9533 21.5H11.0025C12.4064 21.5 13.7681 21.2281 15.0501 20.6961C16.3001 20.1768 17.4369 19.419 18.397 18.4648C19.365 17.5062 20.1267 16.3859 20.6587 15.1367C21.2119 13.843 21.4931 12.4672 21.5001 11.0469C21.5072 9.61953 21.2306 8.23437 20.6845 6.93125V6.93125ZM17.1431 17.1969C15.5001 18.8234 13.3204 19.7188 11.0001 19.7188H10.9603C9.54701 19.7117 8.1431 19.3602 6.90326 18.6992L6.70638 18.5938H3.40638V15.2938L3.30091 15.0969C2.63998 13.857 2.28841 12.4531 2.28138 11.0398C2.27201 8.70313 3.16498 6.50937 4.80326 4.85703C6.4392 3.20469 8.62591 2.29063 10.9626 2.28125H11.0025C12.1744 2.28125 13.3111 2.50859 14.3822 2.95859C15.4275 3.39687 16.365 4.02734 17.1712 4.83359C17.9751 5.6375 18.6079 6.57734 19.0462 7.62266C19.5009 8.70547 19.7283 9.85391 19.7236 11.0398C19.7095 13.3742 18.7931 15.5609 17.1431 17.1969V17.1969Z"
11
+ }), /*#__PURE__*/React.createElement("ellipse", {
12
+ cx: "17.5",
13
+ cy: "6.8402",
14
+ rx: "4.5",
15
+ ry: "4.8695",
16
+ fill: "#F01818"
17
+ })));
18
+ };
19
+
20
+ export default MessageOutlineIncomingIcon;
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { Props } from '../Icon';
3
+ declare const NameTagIcon: (props: Partial<Props>) => JSX.Element;
4
+ export default NameTagIcon;
@@ -0,0 +1,15 @@
1
+ // GENERATE BY ./src/General/Icon/generateIcons.js
2
+ // DO NOT EDIT IT MANUALLY
3
+ import * as React from 'react';
4
+ import Icon from '../Icon';
5
+
6
+ var NameTagIcon = function NameTagIcon(props) {
7
+ return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("g", {
8
+ transform: "scale(4, 4)"
9
+ }, /*#__PURE__*/React.createElement("path", {
10
+ d: "M12 6.5C12.1978 6.5 12.3911 6.55865 12.5556 6.66853C12.72 6.77841 12.8482 6.93459 12.9239 7.11732C12.9996 7.30004 13.0194 7.50111 12.9808 7.69509C12.9422 7.88907 12.847 8.06725 12.7071 8.20711C12.5673 8.34696 12.3891 8.4422 12.1951 8.48079C12.0011 8.51937 11.8 8.49957 11.6173 8.42388C11.4346 8.34819 11.2784 8.22002 11.1685 8.05557C11.0586 7.89112 11 7.69778 11 7.5C11 7.23478 11.1054 6.98043 11.2929 6.79289C11.4804 6.60536 11.7348 6.5 12 6.5ZM6 14.5H18V17.5H6V14.5ZM20 6.5H16V3.5H8V6.5H4C3.46957 6.5 2.96086 6.71071 2.58579 7.08579C2.21071 7.46086 2 7.96957 2 8.5V19.5C2 20.0304 2.21071 20.5391 2.58579 20.9142C2.96086 21.2893 3.46957 21.5 4 21.5H20C20.5304 21.5 21.0391 21.2893 21.4142 20.9142C21.7893 20.5391 22 20.0304 22 19.5V8.5C22 7.96957 21.7893 7.46086 21.4142 7.08579C21.0391 6.71071 20.5304 6.5 20 6.5ZM10 5.5H14V10.5H10V5.5ZM20 19.5H4V10.5H8C8 11.0304 8.21071 11.5391 8.58579 11.9142C8.96086 12.2893 9.46957 12.5 10 12.5H14C14.5304 12.5 15.0391 12.2893 15.4142 11.9142C15.7893 11.5391 16 11.0304 16 10.5H20V19.5Z",
11
+ fill: "black"
12
+ })));
13
+ };
14
+
15
+ export default NameTagIcon;
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { Props } from '../Icon';
3
+ declare const SalaryIcon: (props: Partial<Props>) => JSX.Element;
4
+ export default SalaryIcon;
@@ -0,0 +1,15 @@
1
+ // GENERATE BY ./src/General/Icon/generateIcons.js
2
+ // DO NOT EDIT IT MANUALLY
3
+ import * as React from 'react';
4
+ import Icon from '../Icon';
5
+
6
+ var SalaryIcon = function SalaryIcon(props) {
7
+ return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("g", {
8
+ transform: "scale(4,4)"
9
+ }, /*#__PURE__*/React.createElement("path", {
10
+ d: "M19.36 3H6.56C6.39026 3 6.22747 3.06743 6.10745 3.18745C5.98743 3.30747 5.92 3.47026 5.92 3.64V5.56H4.64C4.47026 5.56 4.30747 5.62743 4.18745 5.74745C4.06743 5.86748 4 6.03026 4 6.2C4 6.36974 4.06743 6.53252 4.18745 6.65255C4.30747 6.77257 4.47026 6.84 4.64 6.84H5.92V17.08H4.64C4.47026 17.08 4.30747 17.1474 4.18745 17.2675C4.06743 17.3875 4 17.5503 4 17.72C4 17.8897 4.06743 18.0525 4.18745 18.1725C4.30747 18.2926 4.47026 18.36 4.64 18.36H5.92V20.28C5.92 20.4497 5.98743 20.6125 6.10745 20.7325C6.22747 20.8526 6.39026 20.92 6.56 20.92H19.36C19.5297 20.92 19.6925 20.8526 19.8125 20.7325C19.9326 20.6125 20 20.4497 20 20.28V3.64C20 3.47026 19.9326 3.30747 19.8125 3.18745C19.6925 3.06743 19.5297 3 19.36 3ZM18.72 19.64H7.2V18.36H7.84C8.00974 18.36 8.17252 18.2926 8.29255 18.1725C8.41257 18.0525 8.48 17.8897 8.48 17.72C8.48 17.5503 8.41257 17.3875 8.29255 17.2675C8.17252 17.1474 8.00974 17.08 7.84 17.08H7.2V6.84H7.84C8.00974 6.84 8.17252 6.77257 8.29255 6.65255C8.41257 6.53252 8.48 6.36974 8.48 6.2C8.48 6.03026 8.41257 5.86748 8.29255 5.74745C8.17252 5.62743 8.00974 5.56 7.84 5.56H7.2V4.28H18.72V19.64ZM13.6832 11.2688C13.6832 10.872 13.3504 10.6288 12.5824 10.3664C11.4688 9.9888 10.7136 9.4704 10.7136 8.4464C10.7291 7.97697 10.9161 7.5295 11.2392 7.18866C11.5624 6.84782 11.9993 6.63725 12.4672 6.5968V5.6304H13.4848V6.5392C14.0048 6.54777 14.5172 6.66551 14.9888 6.8848L14.688 8.056C14.2231 7.8298 13.7138 7.70957 13.1968 7.704C12.5184 7.704 12.3008 7.9984 12.3008 8.2864C12.3008 8.5744 12.6656 8.8496 13.5808 9.1824C14.816 9.6176 15.3152 10.1872 15.3152 11.1024C15.299 11.5945 15.101 12.0632 14.7593 12.4178C14.4177 12.7724 13.9568 12.9878 13.4656 13.0224V14.0784H12.416V13.1184C11.8012 13.1021 11.1978 12.9491 10.6496 12.6704L10.9632 11.4544C11.4892 11.7502 12.0813 11.9087 12.6848 11.9152C13.28 11.9152 13.6832 11.6848 13.6832 11.2688ZM9.12 15.8C9.12 15.6303 9.18743 15.4675 9.30745 15.3475C9.42747 15.2274 9.59026 15.16 9.76 15.16H16.16C16.3297 15.16 16.4925 15.2274 16.6125 15.3475C16.7326 15.4675 16.8 15.6303 16.8 15.8C16.8 15.9697 16.7326 16.1325 16.6125 16.2525C16.4925 16.3726 16.3297 16.44 16.16 16.44H9.76C9.59026 16.44 9.42747 16.3726 9.30745 16.2525C9.18743 16.1325 9.12 15.9697 9.12 15.8ZM9.12 17.72C9.12 17.5503 9.18743 17.3875 9.30745 17.2675C9.42747 17.1474 9.59026 17.08 9.76 17.08H16.16C16.3297 17.08 16.4925 17.1474 16.6125 17.2675C16.7326 17.3875 16.8 17.5503 16.8 17.72C16.8 17.8897 16.7326 18.0525 16.6125 18.1725C16.4925 18.2926 16.3297 18.36 16.16 18.36H9.76C9.59026 18.36 9.42747 18.2926 9.30745 18.1725C9.18743 18.0525 9.12 17.8897 9.12 17.72Z",
11
+ fill: "black"
12
+ })));
13
+ };
14
+
15
+ export default SalaryIcon;
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { Props } from '../Icon';
3
+ declare const UserCogIcon: (props: Partial<Props>) => JSX.Element;
4
+ export default UserCogIcon;
@@ -0,0 +1,15 @@
1
+ // GENERATE BY ./src/General/Icon/generateIcons.js
2
+ // DO NOT EDIT IT MANUALLY
3
+ import * as React from 'react';
4
+ import Icon from '../Icon';
5
+
6
+ var UserCogIcon = function UserCogIcon(props) {
7
+ return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("g", {
8
+ transform: "scale(4, 4)"
9
+ }, /*#__PURE__*/React.createElement("path", {
10
+ d: "M12 4.25C9.075 4.25 6.75 6.575 6.75 9.5C6.74487 10.3602 6.95239 11.2082 7.35408 11.9688C7.75578 12.7295 8.33921 13.379 9.0525 13.8597C6.3825 15.0095 4.5 17.669 4.5 20.75H6C6 17.45 8.7 14.75 12 14.75C14.925 14.75 17.25 12.425 17.25 9.5C17.25 6.575 14.925 4.25 12 4.25ZM12 5.75C14.1 5.75 15.75 7.4 15.75 9.5C15.75 11.6 14.1 13.25 12 13.25C9.9 13.25 8.25 11.6 8.25 9.5C8.25 7.4 9.9 5.75 12 5.75ZM18.075 14V15.575C17.625 15.65 17.175 15.875 16.8 16.1L15.675 14.975L14.625 16.025L15.75 17.15C15.45 17.525 15.3 17.975 15.225 18.5H13.5V20H15.075C15.15 20.45 15.375 20.9 15.6 21.35L14.475 22.475L15.525 23.525L16.65 22.4C17.025 22.625 17.475 22.85 17.925 22.925V24.5H19.425V22.925C19.875 22.85 20.325 22.625 20.7 22.4L21.825 23.525L22.875 22.475L21.75 21.35C22.05 20.975 22.2 20.525 22.275 20H24V18.5H22.425C22.35 18.05 22.125 17.6 21.9 17.15L23.025 16.025L21.975 14.975L20.85 16.1C20.475 15.875 20.025 15.65 19.575 15.575V14H18.075ZM18.75 17C20.025 17 21 17.975 21 19.25C21 20.525 20.025 21.5 18.75 21.5C17.475 21.5 16.5 20.525 16.5 19.25C16.5 17.975 17.475 17 18.75 17ZM18.75 18.5C18.6546 18.5012 18.5607 18.5232 18.4747 18.5645C18.3855 18.6069 18.3043 18.6645 18.2347 18.7347C18.1645 18.8043 18.1069 18.8855 18.0645 18.9747C18.0232 19.0607 18.0012 19.1546 18 19.25C18 19.5312 18.2107 19.8125 18.4747 19.9355C18.5607 19.9768 18.6546 19.9988 18.75 20C19.125 20 19.5 19.625 19.5 19.25C19.5 18.875 19.125 18.5 18.75 18.5Z",
11
+ fill: "black"
12
+ })));
13
+ };
14
+
15
+ export default UserCogIcon;
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { Props } from '../Icon';
3
+ declare const UserWrenchIcon: (props: Partial<Props>) => JSX.Element;
4
+ export default UserWrenchIcon;
@@ -0,0 +1,18 @@
1
+ // GENERATE BY ./src/General/Icon/generateIcons.js
2
+ // DO NOT EDIT IT MANUALLY
3
+ import * as React from 'react';
4
+ import Icon from '../Icon';
5
+
6
+ var UserWrenchIcon = function UserWrenchIcon(props) {
7
+ return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("g", {
8
+ transform: "scale(4, 4)"
9
+ }, /*#__PURE__*/React.createElement("path", {
10
+ d: "M12 4.25C9.075 4.25 6.75 6.575 6.75 9.5C6.74487 10.3602 6.95239 11.2082 7.35408 11.9688C7.75578 12.7295 8.33921 13.379 9.0525 13.8597C6.3825 15.0095 4.5 17.669 4.5 20.75H6C6 17.45 8.7 14.75 12 14.75C14.925 14.75 17.25 12.425 17.25 9.5C17.25 6.575 14.925 4.25 12 4.25ZM12 5.75C14.1 5.75 15.75 7.4 15.75 9.5C15.75 11.6 14.1 13.25 12 13.25C9.9 13.25 8.25 11.6 8.25 9.5C8.25 7.4 9.9 5.75 12 5.75Z",
11
+ fill: "black"
12
+ }), /*#__PURE__*/React.createElement("path", {
13
+ d: "M18.7518 13C18.4201 12.9999 18.0925 13.0824 17.7925 13.2414C17.4925 13.4005 17.2275 13.6322 17.0166 13.92C16.8056 14.2078 16.6539 14.5445 16.5723 14.906C16.4907 15.2675 16.4813 15.6448 16.5447 16.0109L13.3349 19.7509C13.1167 20.0023 12.9963 20.3407 13.0001 20.6919C13.0039 21.0431 13.1316 21.3782 13.3551 21.6235C13.5786 21.8688 13.8797 22.0042 14.192 21.9999C14.5043 21.9956 14.8023 21.852 15.0204 21.6007L18.1998 17.9786C18.5733 18.0851 18.9649 18.0817 19.337 17.969C19.7091 17.8562 20.0491 17.6378 20.3245 17.3347C20.5999 17.0316 20.8013 16.654 20.9095 16.2381C21.0178 15.8223 21.0291 15.3821 20.9424 14.9599C20.9324 14.9111 20.9109 14.8663 20.8802 14.83C20.8495 14.7937 20.8108 14.7673 20.768 14.7535C20.7252 14.7397 20.6799 14.739 20.6368 14.7515C20.5937 14.764 20.5543 14.7892 20.5228 14.8245L19.2514 16.2541L18.1058 14.9661L19.3773 13.5365C19.4087 13.501 19.4311 13.4567 19.4422 13.4083C19.4533 13.3598 19.4527 13.3088 19.4404 13.2607C19.4282 13.2126 19.4047 13.169 19.3724 13.1346C19.3401 13.1001 19.3002 13.0759 19.2569 13.0646C19.0912 13.0217 18.9218 13.0001 18.7518 13Z",
14
+ fill: "black"
15
+ })));
16
+ };
17
+
18
+ export default UserWrenchIcon;
@@ -80,6 +80,7 @@ export { default as GroupIcon } from './GroupIcon';
80
80
  export { default as GuaranteeIcon } from './GuaranteeIcon';
81
81
  export { default as GithubIcon } from './GithubIcon';
82
82
  export { default as HandIcon } from './HandIcon';
83
+ export { default as HandShakeIcon } from './HandShakeIcon';
83
84
  export { default as HeartSolidIcon } from './HeartSolidIcon';
84
85
  export { default as HeartIcon } from './HeartIcon';
85
86
  export { default as HelpIcon } from './HelpIcon';
@@ -103,6 +104,8 @@ export { default as MailSolidIcon } from './MailSolidIcon';
103
104
  export { default as MedalIcon } from './MedalIcon';
104
105
  export { default as MenuIcon } from './MenuIcon';
105
106
  export { default as MenuHalfIcon } from './MenuHalfIcon';
107
+ export { default as MessageOutlineIcon } from './MessageOutlineIcon';
108
+ export { default as MessageOutlineIncomingIcon, } from './MessageOutlineIncomingIcon';
106
109
  export { default as MicIcon } from './MicIcon';
107
110
  export { default as MicOffIcon } from './MicOffIcon';
108
111
  export { default as MinusIcon } from './MinusIcon';
@@ -110,6 +113,7 @@ export { default as MinusCircleIcon } from './MinusCircleIcon';
110
113
  export { default as MinusCircleSolidIcon } from './MinusCircleSolidIcon';
111
114
  export { default as MoreIcon } from './MoreIcon';
112
115
  export { default as MoreHorizontalIcon } from './MoreHorizontalIcon';
116
+ export { default as NameTagIcon } from './NameTagIcon';
113
117
  export { default as NotificationIcon } from './NotificationIcon';
114
118
  export { default as NumberListIcon } from './NumberListIcon';
115
119
  export { default as OnlineIcon } from './OnlineIcon';
@@ -125,6 +129,7 @@ export { default as ReplyIcon } from './ReplyIcon';
125
129
  export { default as ResumeOutlineIcon } from './ResumeOutlineIcon';
126
130
  export { default as RotateIcon } from './RotateIcon';
127
131
  export { default as RssIcon } from './RssIcon';
132
+ export { default as SalaryIcon } from './SalaryIcon';
128
133
  export { default as SaveSolidIcon } from './SaveSolidIcon';
129
134
  export { default as SearchIcon } from './SearchIcon';
130
135
  export { default as SendIcon } from './SendIcon';
@@ -157,6 +162,8 @@ export { default as TwitterIcon } from './TwitterIcon';
157
162
  export { default as UploadIcon } from './UploadIcon';
158
163
  export { default as UpvoteIcon } from './UpvoteIcon';
159
164
  export { default as UserIcon } from './UserIcon';
165
+ export { default as UserCogIcon } from './UserCogIcon';
166
+ export { default as UserWrenchIcon } from './UserWrenchIcon';
160
167
  export { default as VideoIcon } from './VideoIcon';
161
168
  export { default as VideoOffIcon } from './VideoOffIcon';
162
169
  export { default as ViewIcon } from './ViewIcon';
@@ -80,6 +80,7 @@ export { default as GroupIcon } from './GroupIcon';
80
80
  export { default as GuaranteeIcon } from './GuaranteeIcon';
81
81
  export { default as GithubIcon } from './GithubIcon';
82
82
  export { default as HandIcon } from './HandIcon';
83
+ export { default as HandShakeIcon } from './HandShakeIcon';
83
84
  export { default as HeartSolidIcon } from './HeartSolidIcon';
84
85
  export { default as HeartIcon } from './HeartIcon';
85
86
  export { default as HelpIcon } from './HelpIcon';
@@ -103,6 +104,8 @@ export { default as MailSolidIcon } from './MailSolidIcon';
103
104
  export { default as MedalIcon } from './MedalIcon';
104
105
  export { default as MenuIcon } from './MenuIcon';
105
106
  export { default as MenuHalfIcon } from './MenuHalfIcon';
107
+ export { default as MessageOutlineIcon } from './MessageOutlineIcon';
108
+ export { default as MessageOutlineIncomingIcon } from './MessageOutlineIncomingIcon';
106
109
  export { default as MicIcon } from './MicIcon';
107
110
  export { default as MicOffIcon } from './MicOffIcon';
108
111
  export { default as MinusIcon } from './MinusIcon';
@@ -110,6 +113,7 @@ export { default as MinusCircleIcon } from './MinusCircleIcon';
110
113
  export { default as MinusCircleSolidIcon } from './MinusCircleSolidIcon';
111
114
  export { default as MoreIcon } from './MoreIcon';
112
115
  export { default as MoreHorizontalIcon } from './MoreHorizontalIcon';
116
+ export { default as NameTagIcon } from './NameTagIcon';
113
117
  export { default as NotificationIcon } from './NotificationIcon';
114
118
  export { default as NumberListIcon } from './NumberListIcon';
115
119
  export { default as OnlineIcon } from './OnlineIcon';
@@ -125,6 +129,7 @@ export { default as ReplyIcon } from './ReplyIcon';
125
129
  export { default as ResumeOutlineIcon } from './ResumeOutlineIcon';
126
130
  export { default as RotateIcon } from './RotateIcon';
127
131
  export { default as RssIcon } from './RssIcon';
132
+ export { default as SalaryIcon } from './SalaryIcon';
128
133
  export { default as SaveSolidIcon } from './SaveSolidIcon';
129
134
  export { default as SearchIcon } from './SearchIcon';
130
135
  export { default as SendIcon } from './SendIcon';
@@ -157,6 +162,8 @@ export { default as TwitterIcon } from './TwitterIcon';
157
162
  export { default as UploadIcon } from './UploadIcon';
158
163
  export { default as UpvoteIcon } from './UpvoteIcon';
159
164
  export { default as UserIcon } from './UserIcon';
165
+ export { default as UserCogIcon } from './UserCogIcon';
166
+ export { default as UserWrenchIcon } from './UserWrenchIcon';
160
167
  export { default as VideoIcon } from './VideoIcon';
161
168
  export { default as VideoOffIcon } from './VideoOffIcon';
162
169
  export { default as ViewIcon } from './ViewIcon';
@@ -25,6 +25,9 @@ declare type MenuType = HTMLProps<HTMLUListElement>;
25
25
  declare type ItemType = ItemProps & HTMLProps<HTMLLIElement>;
26
26
  declare type EmptyListType = HTMLProps<HTMLLIElement>;
27
27
  declare type HelperTextType = HTMLProps<HTMLSpanElement>;
28
+ declare type GroupContainerType = HTMLProps<HTMLLIElement>;
29
+ declare type GroupType = HTMLProps<HTMLUListElement>;
30
+ declare type GroupHeadingType = HTMLProps<HTMLLIElement>;
28
31
  export interface Components {
29
32
  Container: React.ComponentType<ContainerType>;
30
33
  Label: React.ComponentType<LabelType>;
@@ -38,6 +41,9 @@ export interface Components {
38
41
  Item: React.ComponentType<ItemType>;
39
42
  EmptyList: React.ComponentType<EmptyListType>;
40
43
  HelperText: React.ComponentType<HelperTextType>;
44
+ GroupContainer: React.ComponentType<GroupContainerType>;
45
+ Group: React.ComponentType<GroupType>;
46
+ GroupHeading: React.ComponentType<GroupHeadingType>;
41
47
  }
42
48
  export declare const SubComponents: typeof internalComponents;
43
49
  export interface Props {
@@ -86,6 +92,8 @@ export interface Props {
86
92
  onBlur?: React.FocusEventHandler<HTMLInputElement>;
87
93
  /** Text to be displayed in EmptyList when transformFunction returns an empty list */
88
94
  emptyListText?: string;
95
+ /** Key by which to group items. Also used as group */
96
+ groupKey?: string;
89
97
  }
90
98
  export declare const Select: React.FC<Props> & {
91
99
  Components: Components;
@@ -12,7 +12,7 @@ import * as internalComponents from './SelectStyle';
12
12
  import { ArrowDownIcon } from '../../General/Icon/components';
13
13
  import { ArrowUpIcon } from '../../General/Icon/components';
14
14
  import { CloseCircleSolidIcon } from '../../General/Icon/components';
15
- import { isFunction, isUndefined, noop } from 'lodash';
15
+ import { groupBy, indexOf, isFunction, isUndefined, noop } from 'lodash';
16
16
  import { useId } from 'react-id-generator';
17
17
  export var defaultTransformFunction = function defaultTransformFunction(items, inputValue) {
18
18
  return items.filter(function (item) {
@@ -59,7 +59,8 @@ export var Select = function Select(_ref) {
59
59
  onBlurExternal = _ref.onBlur,
60
60
  _ref$emptyListText = _ref.emptyListText,
61
61
  emptyListText = _ref$emptyListText === void 0 ? defaultEmptyListText : _ref$emptyListText,
62
- props = _objectWithoutPropertiesLoose(_ref, ["items", "transformFunction", "components", "isLoading", "isOpenInitially", "helperText", "downshift", "placeholder", "label", "disabled", "disableTyping", "isOpen", "invalid", "onIsOpenChange", "selectedItem", "onSelectedItemChange", "inputValue", "onInputValueChange", "onClear", "onFocus", "onBlur", "emptyListText"]);
62
+ groupKey = _ref.groupKey,
63
+ props = _objectWithoutPropertiesLoose(_ref, ["items", "transformFunction", "components", "isLoading", "isOpenInitially", "helperText", "downshift", "placeholder", "label", "disabled", "disableTyping", "isOpen", "invalid", "onIsOpenChange", "selectedItem", "onSelectedItemChange", "inputValue", "onInputValueChange", "onClear", "onFocus", "onBlur", "emptyListText", "groupKey"]);
63
64
 
64
65
  var mergedComponents = _objectSpread(_objectSpread({}, internalComponents), externalComponents);
65
66
 
@@ -74,7 +75,10 @@ export var Select = function Select(_ref) {
74
75
  Menu = mergedComponents.Menu,
75
76
  Item = mergedComponents.Item,
76
77
  EmptyList = mergedComponents.EmptyList,
77
- HelperText = mergedComponents.HelperText;
78
+ HelperText = mergedComponents.HelperText,
79
+ GroupContainer = mergedComponents.GroupContainer,
80
+ Group = mergedComponents.Group,
81
+ GroupHeading = mergedComponents.GroupHeading;
78
82
 
79
83
  var _useState = useState(''),
80
84
  inputValueInternal = _useState[0],
@@ -164,6 +168,7 @@ export var Select = function Select(_ref) {
164
168
  onBlurInternal();
165
169
  };
166
170
 
171
+ var groups = groupKey && groupBy(displayItems, groupKey);
167
172
  return /*#__PURE__*/React.createElement(Container, {
168
173
  "data-testid": "container"
169
174
  }, label && /*#__PURE__*/React.createElement(Label, _extends({}, getLabelProps(), {
@@ -214,21 +219,40 @@ export var Select = function Select(_ref) {
214
219
  ref: undefined
215
220
  }), isOpen ? /*#__PURE__*/React.createElement(ArrowUpIcon, null) : /*#__PURE__*/React.createElement(ArrowDownIcon, null)))), /*#__PURE__*/React.createElement(Menu, _extends({}, getMenuProps(), {
216
221
  "data-testid": "menu"
217
- }), isOpen && displayItems.length > 0 ? displayItems.map(function (item, index) {
218
- return /*#__PURE__*/React.createElement(Item, _extends({}, getItemProps({
219
- item: item,
220
- index: index,
221
- disabled: disabled || item.disabled
222
- }), {
223
- key: item.value,
224
- item: item,
225
- title: item.label // getToggleButtonProps adds a ref here, but functional components don't support them. Overriding the ref here prevents a React warning
226
- ,
227
- ref: undefined
228
- }), itemToString(item));
229
- }) : /*#__PURE__*/React.createElement(EmptyList, {
230
- "data-testid": "empty-list"
231
- }, emptyListText)), helperText && /*#__PURE__*/React.createElement(HelperText, {
222
+ }), function () {
223
+ var renderItem = function renderItem(item) {
224
+ return /*#__PURE__*/React.createElement(Item, _extends({}, getItemProps({
225
+ item: item,
226
+ index: indexOf(displayItems, item),
227
+ disabled: disabled || item.disabled
228
+ }), {
229
+ key: item.value,
230
+ item: item,
231
+ title: item.label + indexOf(displayItems, item) // getToggleButtonProps adds a ref here, but functional components don't support them. Overriding the ref here prevents a React warning
232
+ ,
233
+ ref: undefined
234
+ }), itemToString(item));
235
+ };
236
+
237
+ if (isOpen) {
238
+ if (groups && Object.keys(groups).length > 0) {
239
+ return Object.keys(groups).map(function (groupKey) {
240
+ return /*#__PURE__*/React.createElement(GroupContainer, {
241
+ key: groupKey
242
+ }, /*#__PURE__*/React.createElement(Group, null, /*#__PURE__*/React.createElement(GroupHeading, {
243
+ disabled: true,
244
+ "data-testid": "group-heading"
245
+ }, groupKey), groups[groupKey].map(renderItem)));
246
+ });
247
+ } else if (displayItems.length > 0) {
248
+ return displayItems.map(renderItem);
249
+ }
250
+ }
251
+
252
+ return /*#__PURE__*/React.createElement(EmptyList, {
253
+ "data-testid": "empty-list"
254
+ }, emptyListText);
255
+ }()), helperText && /*#__PURE__*/React.createElement(HelperText, {
232
256
  id: helperId,
233
257
  "data-invalid": invalid,
234
258
  "data-testid": "helper-text"
@@ -4,6 +4,7 @@ declare const _default: Meta<import("@storybook/react").Args>;
4
4
  export default _default;
5
5
  export declare const Interactive: any;
6
6
  export declare const RealisticExample: Story<Props>;
7
+ export declare const Groups: any;
7
8
  export declare const TransformFunctionForCustomFilter: any;
8
9
  export declare const TransformFunctionForNoFilter: any;
9
10
  export declare const CustomComponents: any;
@@ -49,12 +49,23 @@ export default {
49
49
  return /*#__PURE__*/React.createElement(StoryContainer, null, Story());
50
50
  }]
51
51
  };
52
- var items = ['Software Engineer', 'Software Tester', 'Back-end Engineer', 'Front-end Engineer'].map(function (label) {
53
- return {
54
- value: label,
55
- label: label
56
- };
57
- });
52
+ var items = [{
53
+ label: 'Software Engineer',
54
+ value: 'v0',
55
+ category: 'Software Engineering'
56
+ }, {
57
+ label: 'Software Tester',
58
+ value: 'v1',
59
+ category: 'Quality Assurance'
60
+ }, {
61
+ label: 'Back-end Engineer',
62
+ value: 'v2',
63
+ category: 'Software Engineering'
64
+ }, {
65
+ label: 'Front-end Engineer',
66
+ value: 'v3',
67
+ category: 'Software Engineering'
68
+ }];
58
69
  var componentNames = Object.keys(Components).filter(function (name) {
59
70
  return !name.startsWith('_');
60
71
  });
@@ -116,6 +127,17 @@ RealisticExample.parameters = {
116
127
  }
117
128
  }
118
129
  };
130
+ export var Groups = Template.bind({});
131
+ Groups.args = {
132
+ groupKey: 'category'
133
+ };
134
+ Groups.parameters = {
135
+ docs: {
136
+ description: {
137
+ story: "You can pass groupKey to group items by that key. This will also be used as the header for the group."
138
+ }
139
+ }
140
+ };
119
141
  export var TransformFunctionForCustomFilter = Template.bind({});
120
142
  TransformFunctionForCustomFilter.args = {
121
143
  transformFunction: function transformFunction(items, inputValue) {
@@ -13,3 +13,6 @@ export declare const Menu: import("styled-components").StyledComponent<"ul", any
13
13
  export declare const Item: import("styled-components").StyledComponent<"li", any, ItemProps, never>;
14
14
  export declare const EmptyList: import("styled-components").StyledComponent<"li", any, {}, never>;
15
15
  export declare const HelperText: import("styled-components").StyledComponent<"span", any, {}, never>;
16
+ export declare const GroupContainer: import("styled-components").StyledComponent<"li", any, {}, never>;
17
+ export declare const Group: import("styled-components").StyledComponent<"ul", any, {}, never>;
18
+ export declare const GroupHeading: import("styled-components").StyledComponent<"li", any, {}, never>;
@@ -53,4 +53,16 @@ export var EmptyList = styled.li.withConfig({
53
53
  export var HelperText = styled.span.withConfig({
54
54
  displayName: "SelectStyle__HelperText",
55
55
  componentId: "qr1jv6-12"
56
- })(["margin-top:4px;color:", ";font-size:0.875em;&[data-invalid='true']{color:", ";}"], Greyscale.devilsgrey, PrimaryColor.glintsred);
56
+ })(["margin-top:4px;color:", ";font-size:0.875em;&[data-invalid='true']{color:", ";}"], Greyscale.devilsgrey, PrimaryColor.glintsred);
57
+ export var GroupContainer = styled.li.withConfig({
58
+ displayName: "SelectStyle__GroupContainer",
59
+ componentId: "qr1jv6-13"
60
+ })(["margin-bottom:0.5em;padding:0;list-style-type:none;"]);
61
+ export var Group = styled.ul.withConfig({
62
+ displayName: "SelectStyle__Group",
63
+ componentId: "qr1jv6-14"
64
+ })(["padding:0;"]);
65
+ export var GroupHeading = styled.li.withConfig({
66
+ displayName: "SelectStyle__GroupHeading",
67
+ componentId: "qr1jv6-15"
68
+ })(["padding:0.5em 1em;list-style-type:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:", ";font-size:0.75em;text-transform:uppercase;"], Greyscale.devilsgrey);
@@ -28,6 +28,8 @@ export interface Props extends React.ComponentPropsWithoutRef<typeof TextFieldIn
28
28
  forwardedRef?: React.RefObject<HTMLInputElement>;
29
29
  /** Icon at the start of the input element. */
30
30
  startIcon?: React.ReactNode;
31
+ /** Icon at the end of the input element. */
32
+ endIcon?: React.ReactNode;
31
33
  }
32
34
  declare const _default: React.ForwardRefExoticComponent<Pick<Props, string | number> & React.RefAttributes<HTMLInputElement>>;
33
35
  export default _default;
@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutP
3
3
  import * as React from 'react';
4
4
  import classNames from 'classnames';
5
5
  import { EyeIcon, EyeSlashedIcon, CloseCircleSolidIcon } from '../../General/Icon/components';
6
- import { TextFieldContainer, TextFieldInput, TextFieldLabel, IconContainer, StartIconContainer } from './TextFieldStyle';
6
+ import { TextFieldContainer, TextFieldInput, TextFieldLabel, IconContainer, StartIconContainer, EndIconContainer } from './TextFieldStyle';
7
7
  export var isFilled = function isFilled(type, value) {
8
8
  if (value === undefined || value === null) return false;
9
9
  if (type === 'number') return !isNaN(parseInt(value));
@@ -35,7 +35,8 @@ export var TextField = function TextField(_ref) {
35
35
  forwardedRef = _ref.forwardedRef,
36
36
  onChange = _ref.onChange,
37
37
  startIcon = _ref.startIcon,
38
- restProps = _objectWithoutPropertiesLoose(_ref, ["value", "status", "onKeyDown", "disableTyping", "small", "type", "label", "disabled", "className", "removeFloatingLabel", "allowClear", "forwardedRef", "onChange", "startIcon"]);
38
+ endIcon = _ref.endIcon,
39
+ restProps = _objectWithoutPropertiesLoose(_ref, ["value", "status", "onKeyDown", "disableTyping", "small", "type", "label", "disabled", "className", "removeFloatingLabel", "allowClear", "forwardedRef", "onChange", "startIcon", "endIcon"]);
39
40
 
40
41
  var _React$useState = React.useState(false),
41
42
  floating = _React$useState[0],
@@ -99,7 +100,7 @@ export var TextField = function TextField(_ref) {
99
100
  onClick: handleShowPassword
100
101
  }, inputType === 'password' ? /*#__PURE__*/React.createElement(EyeSlashedIcon, {
101
102
  "data-testid": "invisible-icon"
102
- }) : /*#__PURE__*/React.createElement(EyeIcon, null)));
103
+ }) : /*#__PURE__*/React.createElement(EyeIcon, null)), endIcon && /*#__PURE__*/React.createElement(EndIconContainer, null, endIcon));
103
104
  };
104
105
 
105
106
  var forwardRef = function forwardRef(props, ref) {
@@ -5,4 +5,5 @@ export declare const Interactive: any;
5
5
  export declare const TextFieldWithClearIcon: any;
6
6
  export declare const Disabled: any;
7
7
  export declare const TextFieldWithStartIcon: any;
8
+ export declare const TextFieldWithEndIcon: any;
8
9
  export declare const PasswordField: any;
@@ -47,6 +47,12 @@ TextFieldWithStartIcon.args = {
47
47
  type: 'text',
48
48
  startIcon: /*#__PURE__*/React.createElement(SearchIcon, null)
49
49
  };
50
+ export var TextFieldWithEndIcon = Template.bind({});
51
+ TextFieldWithEndIcon.args = {
52
+ label: 'Description',
53
+ type: 'text',
54
+ endIcon: /*#__PURE__*/React.createElement(SearchIcon, null)
55
+ };
50
56
  export var PasswordField = Template.bind({});
51
57
  PasswordField.args = {
52
58
  label: 'Description',
@@ -1,5 +1,6 @@
1
1
  export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
2
2
  export declare const StartIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
3
+ export declare const EndIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
3
4
  export declare const TextFieldContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
4
5
  export declare const TextFieldLabel: import("styled-components").StyledComponent<"label", any, TextFieldLabelProps, never>;
5
6
  declare type statusType = 'success' | 'error';
@@ -9,13 +9,17 @@ export var StartIconContainer = styled.div.withConfig({
9
9
  displayName: "TextFieldStyle__StartIconContainer",
10
10
  componentId: "sc-5sd02x-1"
11
11
  })(["position:absolute;display:flex;left:16px;svg{fill:#666666;}"]);
12
+ export var EndIconContainer = styled.div.withConfig({
13
+ displayName: "TextFieldStyle__EndIconContainer",
14
+ componentId: "sc-5sd02x-2"
15
+ })(["position:absolute;display:flex;right:16px;svg{fill:#666666;}"]);
12
16
  export var TextFieldContainer = styled.div.withConfig({
13
17
  displayName: "TextFieldStyle__TextFieldContainer",
14
- componentId: "sc-5sd02x-2"
18
+ componentId: "sc-5sd02x-3"
15
19
  })(["position:relative;display:flex;align-items:center;flex-grow:1;"]);
16
20
  export var TextFieldLabel = styled.label.withConfig({
17
21
  displayName: "TextFieldStyle__TextFieldLabel",
18
- componentId: "sc-5sd02x-3"
22
+ componentId: "sc-5sd02x-4"
19
23
  })(["position:absolute;left:", ";margin-right:1px;overflow:hidden;color:#666666;transition:all .2s;pointer-events:none;font-weight:400;font-size:", ";", " ", " ", ""], function (_ref) {
20
24
  var small = _ref.small;
21
25
  return small ? '16px' : '22px';
@@ -44,7 +48,7 @@ export var TextFieldLabel = styled.label.withConfig({
44
48
  });
45
49
  export var TextFieldInput = styled.input.withConfig({
46
50
  displayName: "TextFieldStyle__TextFieldInput",
47
- componentId: "sc-5sd02x-4"
51
+ componentId: "sc-5sd02x-5"
48
52
  })(["position:relative;width:100%;outline:none;font-size:", ";padding:", ";border:unset;border-radius:", ";transition:all .5s;background-color:", ";", " ", " &:hover{transition:all .5s;background-color:", ";~ ", "{color:#666666;}}&:focus{background-color:", ";", " ~ ", "{padding:0 5px;top:1em;transform:", ";transition:all .2s;font-size:12px;right:auto;background-color:", ";}}&:disabled{cursor:not-allowed;background:", ";+ ", "{background:transparent;color:", ";}}"], function (_ref6) {
49
53
  var small = _ref6.small;
50
54
  return small ? '14px' : '16px';
@@ -82,6 +82,7 @@ export declare const ICONS: {
82
82
  GUARANTEE: JSX.Element;
83
83
  GITHUB: JSX.Element;
84
84
  HAND: JSX.Element;
85
+ HAND_SHAKE: JSX.Element;
85
86
  HEART_SOLID: JSX.Element;
86
87
  HEART: JSX.Element;
87
88
  HELP: JSX.Element;
@@ -105,6 +106,8 @@ export declare const ICONS: {
105
106
  MEDAL: JSX.Element;
106
107
  MENU: JSX.Element;
107
108
  MENU_HALF: JSX.Element;
109
+ MESSAGE_OUTLINE: JSX.Element;
110
+ MESSAGE_OUTLINE_INCOMING: JSX.Element;
108
111
  MIC: JSX.Element;
109
112
  MIC_OFF: JSX.Element;
110
113
  MINUS: JSX.Element;
@@ -112,6 +115,7 @@ export declare const ICONS: {
112
115
  MINUS_CIRCLE_SOLID: JSX.Element;
113
116
  MORE: JSX.Element;
114
117
  MORE_HORIZONTAL: JSX.Element;
118
+ NAME_TAG: JSX.Element;
115
119
  NOTIFICATION: JSX.Element;
116
120
  NUMBER_LIST: JSX.Element;
117
121
  ONLINE: JSX.Element;
@@ -127,6 +131,7 @@ export declare const ICONS: {
127
131
  RESUME_OUTLINE: JSX.Element;
128
132
  ROTATE: JSX.Element;
129
133
  RSS: JSX.Element;
134
+ SALARY: JSX.Element;
130
135
  SAVE_SOLID: JSX.Element;
131
136
  SEARCH: JSX.Element;
132
137
  SEND: JSX.Element;
@@ -159,6 +164,8 @@ export declare const ICONS: {
159
164
  UPLOAD: JSX.Element;
160
165
  UPVOTE: JSX.Element;
161
166
  USER: JSX.Element;
167
+ USER_COG: JSX.Element;
168
+ USER_WRENCH: JSX.Element;
162
169
  VIDEO: JSX.Element;
163
170
  VIDEO_OFF: JSX.Element;
164
171
  VIEW: JSX.Element;