@eturnity/eturnity_reusable_components 9.25.13 → 9.25.14

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 (9) hide show
  1. package/package.json +1 -1
  2. package/src/assets/svgIcons/activities_check.svg +3 -0
  3. package/src/assets/svgIcons/add_checklist.svg +3 -0
  4. package/src/assets/svgIcons/checklists.svg +3 -0
  5. package/src/assets/svgIcons/collapse_all.svg +4 -4
  6. package/src/assets/svgIcons/expand_all.svg +2 -3
  7. package/src/assets/svgIcons/pin.svg +2 -4
  8. package/src/assets/svgIcons/warning_triangle_outline.svg +3 -0
  9. package/src/components/inputs/select/index.vue +36 -36
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eturnity/eturnity_reusable_components",
3
- "version": "9.25.13",
3
+ "version": "9.25.14",
4
4
  "files": [
5
5
  "dist",
6
6
  "src"
package/src/assets/svgIcons/activities_check.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M5.58682 0.176177C7.09426 -0.164409 8.67225 -0.00847912 10.0839 0.620513C10.3358 0.73294 10.4489 1.02861 10.3368 1.28067C10.2245 1.5328 9.92883 1.64672 9.67666 1.53458C8.462 0.993353 7.10462 0.858707 5.80752 1.15176C4.51042 1.44483 3.34242 2.14968 2.47842 3.16055C1.61461 4.17133 1.10111 5.43442 1.01358 6.76114C0.926082 8.08805 1.26929 9.40826 1.99307 10.5238C2.7168 11.6393 3.78199 12.4907 5.0292 12.9516C6.27658 13.4124 7.63974 13.4575 8.91495 13.0805C10.19 12.7035 11.3092 11.9246 12.1054 10.8598C12.9015 9.79488 13.332 8.50084 13.3329 7.17129V6.55801C13.3329 6.28198 13.5569 6.05819 13.8329 6.05801C14.1091 6.05801 14.3329 6.28187 14.3329 6.55801V7.17129C14.332 8.71668 13.8315 10.2206 12.9062 11.4584C11.9808 12.696 10.68 13.6013 9.19815 14.0395C7.71624 14.4775 6.13208 14.4256 4.68252 13.89C3.23296 13.3544 1.99531 12.3642 1.1542 11.0678C0.313118 9.77137 -0.0861088 8.23771 0.0155315 6.69571C0.117209 5.15373 0.714679 3.6859 1.71866 2.51114C2.7227 1.3364 4.07948 0.516797 5.58682 0.176177ZM13.4794 1.47989C13.6745 1.28475 13.9911 1.28493 14.1864 1.47989C14.3817 1.67495 14.3823 1.99153 14.1874 2.18692L7.52041 8.86075C7.42672 8.95448 7.29943 9.00715 7.1669 9.00723C7.03436 9.00727 6.90716 8.95439 6.81338 8.86075L4.81338 6.86075C4.61812 6.66549 4.61812 6.34898 4.81338 6.15372C5.00865 5.95853 5.32518 5.95848 5.52041 6.15372L7.16592 7.79922L13.4794 1.47989Z" fill="#00B0EB"/>
3
+ </svg>
package/src/assets/svgIcons/add_checklist.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 1C10.7761 1 11 1.22386 11 1.5V8.5C11 8.77614 10.7761 9 10.5 9H3.5C3.22386 9 3 8.77614 3 8.5V1.5C3 1.22386 3.22386 1 3.5 1H10.5ZM11 9.91465C11.5826 9.70873 12 9.15311 12 8.5V1.5C12 0.671573 11.3284 0 10.5 0H3.5C2.84689 0 2.29127 0.417404 2.08535 1H1.5C0.671573 1 0 1.67157 0 2.5V10.5C0 11.3284 0.671573 12 1.5 12H9.5C10.3284 12 11 11.3284 11 10.5V9.91465ZM10 10H3.5C2.67157 10 2 9.32843 2 8.5V2H1.5C1.22386 2 1 2.22386 1 2.5V10.5C1 10.7761 1.22386 11 1.5 11H9.5C9.77614 11 10 10.7761 10 10.5V10ZM6.5 2.5V4.5H4.5C4.22386 4.5 4 4.72386 4 5C4 5.27614 4.22386 5.5 4.5 5.5H6.5V7.5C6.5 7.77614 6.72386 8 7 8C7.27614 8 7.5 7.77614 7.5 7.5V5.5H9.5C9.77614 5.5 10 5.27614 10 5C10 4.72386 9.77614 4.5 9.5 4.5H7.5V2.5C7.5 2.22386 7.27614 2 7 2C6.72386 2 6.5 2.22386 6.5 2.5Z" fill="#6F20DC"/>
3
+ </svg>
package/src/assets/svgIcons/checklists.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M5.58682 0.176177C7.09426 -0.164409 8.67225 -0.00847912 10.0839 0.620513C10.3358 0.73294 10.4489 1.02861 10.3368 1.28067C10.2245 1.5328 9.92883 1.64672 9.67666 1.53458C8.462 0.993353 7.10462 0.858707 5.80752 1.15176C4.51042 1.44483 3.34242 2.14968 2.47842 3.16055C1.61461 4.17133 1.10111 5.43442 1.01358 6.76114C0.926082 8.08805 1.26929 9.40826 1.99307 10.5238C2.7168 11.6393 3.78199 12.4907 5.0292 12.9516C6.27658 13.4124 7.63974 13.4575 8.91495 13.0805C10.19 12.7035 11.3092 11.9246 12.1054 10.8598C12.9015 9.79488 13.332 8.50084 13.3329 7.17129V6.55801C13.3329 6.28198 13.5569 6.05819 13.8329 6.05801C14.1091 6.05801 14.3329 6.28187 14.3329 6.55801V7.17129C14.332 8.71668 13.8315 10.2206 12.9062 11.4584C11.9808 12.696 10.68 13.6013 9.19815 14.0395C7.71624 14.4775 6.13208 14.4256 4.68252 13.89C3.23296 13.3544 1.99531 12.3642 1.1542 11.0678C0.313118 9.77137 -0.0861088 8.23771 0.0155315 6.69571C0.117209 5.15373 0.714679 3.6859 1.71866 2.51114C2.7227 1.3364 4.07948 0.516797 5.58682 0.176177ZM13.4794 1.47989C13.6745 1.28475 13.9911 1.28493 14.1864 1.47989C14.3817 1.67495 14.3823 1.99153 14.1874 2.18692L7.52041 8.86075C7.42672 8.95448 7.29943 9.00715 7.1669 9.00723C7.03436 9.00727 6.90716 8.95439 6.81338 8.86075L4.81338 6.86075C4.61812 6.66549 4.61812 6.34898 4.81338 6.15372C5.00865 5.95853 5.32518 5.95848 5.52041 6.15372L7.16592 7.79922L13.4794 1.47989Z" fill="#263238"/>
3
+ </svg>
package/src/assets/svgIcons/collapse_all.svg CHANGED
@@ -1,4 +1,4 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
2
- <path d="M3 2L7 5L11 2" stroke="white" stroke-width="1.27273" class="fix"/>
3
- <path d="M3 12L7 9L11 12" stroke="white" stroke-width="1.27273" class="fix"/>
4
- </svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
2
+ <path d="M7.50484 2.78704C7.74396 2.54792 8.11304 2.51799 8.38472 2.6972L8.49507 2.78704L11.3535 5.64544C11.5487 5.84071 11.5487 6.15723 11.3535 6.35247C11.1582 6.5477 10.8417 6.54768 10.6464 6.35247L7.99996 3.70599L5.35347 6.35247C5.15822 6.5477 4.8417 6.54768 4.64644 6.35247C4.45118 6.15722 4.45119 5.84071 4.64644 5.64544L7.50484 2.78704Z" transform="translate(0, 9) scale(1, -1)" fill="#263238"/>
3
+ <path d="M10.6464 9.64544C10.8417 9.45018 11.1582 9.45018 11.3535 9.64544C11.5487 9.84071 11.5487 10.1572 11.3535 10.3525L8.49507 13.2109L8.38472 13.3007C8.11306 13.4799 7.74396 13.4499 7.50484 13.2109L4.64644 10.3525C4.45118 10.1572 4.45119 9.84071 4.64644 9.64544C4.8417 9.45018 5.15821 9.45018 5.35347 9.64544L7.99996 12.2919L10.6464 9.64544Z" transform="translate(0, 23) scale(1, -1)" fill="#263238"/>
4
+ </svg>
package/src/assets/svgIcons/expand_all.svg CHANGED
@@ -1,4 +1,3 @@
1
- <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path fill-rule="evenodd" clip-rule="evenodd" d="M6.99998 1.20459L11.3818 4.49095L10.6182 5.50914L6.99998 2.7955L3.3818 5.50914L2.61816 4.49095L6.99998 1.20459Z" fill="#263238"/>
3
- <path fill-rule="evenodd" clip-rule="evenodd" d="M6.99998 12.7954L11.3818 9.50905L10.6182 8.49086L6.99998 11.2045L3.3818 8.49086L2.61816 9.50905L6.99998 12.7954Z" fill="#263238"/>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
2
+ <path d="M10.6464 9.64544C10.8417 9.45018 11.1582 9.45018 11.3535 9.64544C11.5487 9.84071 11.5487 10.1572 11.3535 10.3525L8.49507 13.2109L8.38472 13.3007C8.11306 13.4799 7.74396 13.4499 7.50484 13.2109L4.64644 10.3525C4.45118 10.1572 4.45119 9.84071 4.64644 9.64544C4.8417 9.45018 5.15821 9.45018 5.35347 9.64544L7.99996 12.2919L10.6464 9.64544ZM7.50484 2.78704C7.74396 2.54792 8.11304 2.51799 8.38472 2.6972L8.49507 2.78704L11.3535 5.64544C11.5487 5.84071 11.5487 6.15723 11.3535 6.35247C11.1582 6.5477 10.8417 6.54768 10.6464 6.35247L7.99996 3.70599L5.35347 6.35247C5.15822 6.5477 4.8417 6.54768 4.64644 6.35247C4.45118 6.15722 4.45119 5.84071 4.64644 5.64544L7.50484 2.78704Z" fill="#263238"/>
4
3
  </svg>
package/src/assets/svgIcons/pin.svg CHANGED
@@ -1,5 +1,3 @@
1
- <svg fill="none" height="16" viewbox="16 12 8 16" width="8" xmlns="http://www.w3.org/2000/svg">
2
- <rect fill="#263238" height="2" width="6" x="17" y="13"></rect>
3
- <path d="M18 15H22L23 21H17L18 15Z" fill="#263238"></path>
4
- <path d="M19 21H21L20 27L19 21Z" fill="#263238"></path>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
2
+ <path d="M8.87495 1.28502C9.11118 1.16144 9.38385 1.12224 9.64741 1.17564C9.86691 1.22014 10.0401 1.33885 10.1806 1.45592C10.3201 1.57216 10.4783 1.73214 10.6582 1.91197L14.0869 5.34068C14.2667 5.52052 14.4267 5.67877 14.5429 5.81822C14.6307 5.92358 14.7195 6.04735 14.7773 6.19517L14.8232 6.35142L14.8408 6.46471C14.8679 6.73007 14.8028 6.99852 14.6552 7.2235C14.5324 7.41053 14.358 7.52725 14.1972 7.61412C14.0375 7.70043 13.8304 7.78835 13.5966 7.88853L11.9335 8.60045C11.8963 8.6164 11.8757 8.62564 11.8603 8.63267C11.8502 8.63726 11.8457 8.63951 11.8457 8.63951C11.8384 8.64368 11.8317 8.64893 11.8251 8.65416C11.8251 8.65416 11.8228 8.65505 11.8124 8.6649L10.7158 9.76158C10.6711 9.80625 10.646 9.83099 10.6279 9.85045C10.6123 9.86718 10.6113 9.86998 10.6113 9.86998C10.6038 9.88066 10.5975 9.89204 10.5927 9.90416C10.5927 9.90416 10.591 9.90687 10.5859 9.92857C10.5798 9.9545 10.5729 9.98955 10.5605 10.0516L10.0722 12.494C10.0107 12.8017 9.95815 13.0669 9.89741 13.2713C9.83811 13.471 9.74752 13.7007 9.55561 13.871C9.30046 14.0973 8.9589 14.201 8.62104 14.1542C8.36714 14.1189 8.16482 13.9777 8.00483 13.8446C7.84087 13.7081 7.64956 13.5167 7.42768 13.2948L5.41889 11.286L2.0019 14.704C1.80664 14.8992 1.49013 14.8992 1.29487 14.704C1.09964 14.5087 1.09962 14.1922 1.29487 13.9969L4.71186 10.579L2.70405 8.57115C2.48217 8.34927 2.29068 8.15797 2.15424 7.994C2.02115 7.83401 1.87989 7.63168 1.84467 7.37779C1.79783 7.03994 1.90153 6.69837 2.12788 6.44322L2.19428 6.37584C2.35506 6.22913 2.5528 6.15332 2.72749 6.10142C2.93196 6.04068 3.19714 5.98816 3.50483 5.92662L5.94819 5.43834C6.00997 5.42598 6.0444 5.41906 6.07026 5.41295C6.09224 5.40775 6.09467 5.40611 6.09467 5.40611C6.1068 5.40135 6.11816 5.395 6.12885 5.38756C6.12885 5.38756 6.13172 5.3865 6.14838 5.37096C6.16785 5.35279 6.19258 5.32774 6.23725 5.28307L7.27827 4.24303C7.30673 4.21457 7.32223 4.19862 7.33393 4.18639C7.34374 4.17612 7.34467 4.17369 7.34467 4.17369C7.34991 4.16709 7.35515 4.16049 7.35932 4.15318C7.35932 4.15318 7.36162 4.14849 7.36616 4.13853C7.37319 4.12309 7.38243 4.10252 7.39838 4.06529L8.1103 2.40221C8.21049 2.16843 8.29938 1.96135 8.38569 1.80162C8.47261 1.64084 8.58916 1.46637 8.77631 1.34361L8.87495 1.28502ZM9.44428 2.15514C9.404 2.14812 9.36282 2.15603 9.32807 2.1776C9.32039 2.18651 9.29906 2.21343 9.2646 2.27721C9.20495 2.38759 9.13795 2.54538 9.03022 2.79674L8.31733 4.45885C8.29137 4.51941 8.26379 4.58574 8.22749 4.64928C8.19814 4.70062 8.16465 4.74945 8.12788 4.79576C8.08238 4.85304 8.03188 4.90348 7.9853 4.95006L6.94428 5.9901C6.87158 6.0628 6.79406 6.14304 6.70112 6.20787C6.62608 6.2602 6.54507 6.30335 6.45991 6.33678C6.3544 6.37816 6.24434 6.39864 6.1435 6.41881L3.70112 6.90709C3.37408 6.9725 3.16272 7.01584 3.01264 7.06041C2.92304 7.08703 2.88368 7.10607 2.87104 7.11314C2.84399 7.14674 2.83107 7.18933 2.83491 7.23228C2.84143 7.24507 2.86316 7.28263 2.9228 7.35435C3.02295 7.4747 3.17515 7.62819 3.41108 7.86412L5.76753 10.2206C5.76934 10.2223 5.77159 10.2237 5.77338 10.2254C5.77484 10.2269 5.77585 10.2289 5.77729 10.2303L8.13471 12.5878C8.37064 12.8237 8.52413 12.9759 8.64448 13.076C8.71401 13.1339 8.75166 13.1557 8.76557 13.1629C8.80866 13.1671 8.8509 13.1548 8.88471 13.1278C8.8916 13.1156 8.91153 13.0767 8.93842 12.9862C8.98298 12.8361 9.02635 12.6247 9.09174 12.2977L9.58003 9.85533C9.60019 9.7545 9.62067 9.64443 9.66206 9.53892C9.69548 9.45378 9.73864 9.37274 9.79096 9.29771C9.85579 9.20478 9.93604 9.12725 10.0087 9.05455L11.0488 8.01353C11.0954 7.96695 11.1458 7.91645 11.2031 7.87096C11.2494 7.83418 11.2982 7.80069 11.3496 7.77135C11.4131 7.73505 11.4794 7.70746 11.54 7.6815L13.2031 6.96861C13.4541 6.86103 13.6113 6.79384 13.7216 6.73424C13.7841 6.70048 13.8108 6.67882 13.8203 6.67076C13.842 6.6359 13.8508 6.59502 13.8437 6.55455C13.8384 6.54431 13.8211 6.51488 13.7744 6.45885C13.694 6.36247 13.5732 6.24109 13.3798 6.04771L9.95112 2.619C9.75776 2.42564 9.63636 2.30481 9.53999 2.22447C9.48382 2.17766 9.45441 2.16036 9.44428 2.15514Z" fill="#263238"/>
5
3
  </svg>
package/src/assets/svgIcons/warning_triangle_outline.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M6.19728 0.499997C6.58218 -0.166668 7.5448 -0.166663 7.9297 0.499997L13.9912 11C14.352 11.6249 13.9523 12.3961 13.2666 12.4902L13.126 12.5H1.00099C0.279555 12.4998 -0.188025 11.7677 0.0732541 11.127L0.135754 11L6.19728 0.499997ZM1.00099 11.5H13.126L7.06349 0.999997L1.00099 11.5ZM7.06349 9.5C7.33963 9.5 7.56349 9.72386 7.56349 10C7.56349 10.2761 7.33963 10.5 7.06349 10.5C6.78735 10.5 6.56349 10.2761 6.56349 10C6.56349 9.72386 6.78735 9.50001 7.06349 9.5ZM7.06349 4C7.33963 4 7.56349 4.22385 7.56349 4.5V7.5C7.56349 7.77614 7.33963 8 7.06349 8C6.78735 7.99999 6.56349 7.77613 6.56349 7.5V4.5C6.56349 4.22386 6.78735 4 7.06349 4Z" fill="#FF6565"/>
3
+ </svg>
package/src/components/inputs/select/index.vue CHANGED
@@ -49,10 +49,10 @@
49
49
  buttonBgColor
50
50
  ? buttonBgColor
51
51
  : colorMode == 'dark'
52
- ? 'transparent'
53
- : colorMode == 'transparent'
54
- ? 'transparent'
55
- : 'white'
52
+ ? 'transparent'
53
+ : colorMode == 'transparent'
54
+ ? 'transparent'
55
+ : 'white'
56
56
  "
57
57
  class="select-button"
58
58
  :color-mode="colorMode"
@@ -169,8 +169,8 @@
169
169
  colorMode == 'dark'
170
170
  ? '#000000'
171
171
  : colorMode == 'transparent'
172
- ? 'grey6'
173
- : dropdownBgColor
172
+ ? 'grey6'
173
+ : dropdownBgColor
174
174
  "
175
175
  :hovered-index="hoveredIndex"
176
176
  :hovered-value="hoveredValueDomAttr"
@@ -307,14 +307,14 @@
307
307
  props.sidebarCaret
308
308
  ? '24px'
309
309
  : props.colorMode === 'transparent'
310
- ? '15px'
311
- : CARET_WIDTH};
310
+ ? '15px'
311
+ : CARET_WIDTH};
312
312
  min-width: ${(props) =>
313
313
  props.sidebarCaret
314
314
  ? '24px'
315
315
  : props.colorMode === 'transparent'
316
- ? '15px'
317
- : CARET_WIDTH};
316
+ ? '15px'
317
+ : CARET_WIDTH};
318
318
  height: 100%;
319
319
  align-items: center;
320
320
  cursor: pointer;
@@ -437,23 +437,23 @@
437
437
  ? 'padding: 10px 15px 10px 5px;'
438
438
  : 'padding: 10px 15px;'
439
439
  : props.isSearchBarVisible
440
- ? ''
441
- : `padding-left: ${
442
- props.hasNoPadding
443
- ? '0'
444
- : props.tablePaddingLeft
445
- ? props.tablePaddingLeft
446
- : props.paddingLeft
447
- }`};
440
+ ? ''
441
+ : `padding-left: ${
442
+ props.hasNoPadding
443
+ ? '0'
444
+ : props.tablePaddingLeft
445
+ ? props.tablePaddingLeft
446
+ : props.paddingLeft
447
+ }`};
448
448
  text-align: ${(props) => (props.textCenter ? 'center' : 'left')};
449
449
  min-height: ${(props) =>
450
450
  props.selectHeight
451
451
  ? props.selectHeight
452
452
  : props.selectMinHeight
453
- ? props.selectMinHeight
454
- : props.height
455
- ? props.height
456
- : '36px'};
453
+ ? props.selectMinHeight
454
+ : props.height
455
+ ? props.height
456
+ : '36px'};
457
457
  display: flex;
458
458
  align-items: center;
459
459
  ${(props) => (props.selectHeight ? `height: ${props.selectHeight};` : '')}
@@ -461,8 +461,8 @@
461
461
  showBorder &&
462
462
  `
463
463
  border: ${BORDER_WIDTH} solid ${
464
- hasError ? theme.colors.red : theme.colors.grey4
465
- }
464
+ hasError ? theme.colors.red : theme.colors.grey4
465
+ }
466
466
  `}
467
467
  opacity: ${(props) =>
468
468
  props.colorMode === 'transparent' && props.disabled ? '0.4' : '1'};
@@ -470,18 +470,18 @@
470
470
  props.colorMode === 'transparent'
471
471
  ? 'transparent'
472
472
  : props.disabled && props.showDisabledBackground
473
- ? props.theme.colors.grey5
474
- : props.theme.colors[props.bgColor]
475
- ? props.theme.colors[props.bgColor]
476
- : props.bgColor} !important;
473
+ ? props.theme.colors.grey5
474
+ : props.theme.colors[props.bgColor]
475
+ ? props.theme.colors[props.bgColor]
476
+ : props.bgColor} !important;
477
477
  color: ${(props) =>
478
478
  props.colorMode === 'transparent'
479
479
  ? props.theme.colors.white
480
480
  : props.disabled && props.showDisabledBackground
481
- ? props.theme.colors.black
482
- : props.theme.colors[props.fontColor]
483
- ? props.theme.colors[props.fontColor]
484
- : props.fontColor};
481
+ ? props.theme.colors.black
482
+ : props.theme.colors[props.fontColor]
483
+ ? props.theme.colors[props.fontColor]
484
+ : props.fontColor};
485
485
  ${(props) => (props.disabled ? 'pointer-events: none' : '')};
486
486
  overflow: hidden;
487
487
  & > .handle {
@@ -489,8 +489,8 @@
489
489
  props.hasError
490
490
  ? props.theme.colors.red
491
491
  : props.colorMode === 'light'
492
- ? props.theme.colors.grey4
493
- : props.theme.colors.white}
492
+ ? props.theme.colors.grey4
493
+ : props.theme.colors.white}
494
494
  1px solid;
495
495
  }
496
496
  `
@@ -536,8 +536,8 @@
536
536
  props.minWidth
537
537
  ? props.minWidth
538
538
  : props.optionWidth
539
- ? props.optionWidth
540
- : '100%'};
539
+ ? props.optionWidth
540
+ : '100%'};
541
541
  background-color: ${(props) =>
542
542
  props.theme.colors[props.bgColor]
543
543
  ? props.theme.colors[props.bgColor]