@marigold/icons 0.0.2 → 0.3.0

package/src/info/MobilePhone.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const MobilePhone = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M15.2617 3H8.69638C7.33407 3 6.23438 4.09636 6.23438 5.45455V18.5455C6.23438 19.9036 7.33407 21 8.69638 21H15.2617C16.624 21 17.7237 19.9036 17.7237 18.5455V5.45455C17.7237 4.09636 16.624 3 15.2617 3V3ZM13.6204 19.3637H10.3377V18.5455H13.6204V19.3637V19.3637ZM16.2876 16.909H7.67054V5.4545H16.2876V16.909V16.909Z" />
-  </Svg>
+  </SVG>
 );

package/src/info/Notification.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Notification = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M19.2 3H4.8C3.81 3 3.009 3.81 3.009 4.8L3 21L6.6 17.4H19.2C20.19 17.4 21 16.59 21 15.6V4.8C21 3.81 20.19 3 19.2 3ZM12.9 13.8H11.1V12H12.9V13.8ZM12.9 10.2001H11.1V6.60008H12.9V10.2001Z" />
-  </Svg>
+  </SVG>
 );

package/src/info/Parking.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Parking = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M5.76562 3.375H12.474C15.646 3.375 18.224 5.95292 18.224 9.125C18.224 12.2971 15.646 14.875 12.474 14.875H9.59896V20.625H5.76562V3.375ZM9.59896 11.0417H12.6656C13.7198 11.0417 14.5823 10.1792 14.5823 9.125C14.5823 8.07084 13.7198 7.20834 12.6656 7.20834H9.59896V11.0417Z" />
-  </Svg>
+  </SVG>
 );

package/src/info/Phone.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Phone = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M13.21 18.13L15.41 15.93C15.68 15.66 16.08 15.57 16.43 15.69C17.55 16.06 18.76 16.26 20 16.26C20.55 16.26 21 16.71 21 17.26V20.75C21 21.3 20.55 21.75 20 21.75C10.61 21.75 3 14.14 3 4.75C3 4.2 3.45 3.75 4 3.75H7.5C8.05 3.75 8.5 4.2 8.5 4.75C8.5 6 8.7 7.2 9.07 8.32C9.18 8.67 9.1 9.06 8.82 9.34L6.62 11.54C8.06 14.37 10.38 16.68 13.21 18.13Z" />
-  </Svg>
+  </SVG>
 );

package/src/info/Print.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Print = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M18.5625 8.25H5.4375C3.88125 8.25 2.625 9.50625 2.625 11.0625V16.6875H6.375V20.4375H17.625V16.6875H21.375V11.0625C21.375 9.50625 20.1187 8.25 18.5625 8.25ZM15.75 18.5625H8.25V13.875H15.75V18.5625ZM18.5625 12C18.0469 12 17.625 11.5781 17.625 11.0625C17.625 10.5469 18.0469 10.125 18.5625 10.125C19.0781 10.125 19.5 10.5469 19.5 11.0625C19.5 11.5781 19.0781 12 18.5625 12ZM17.625 3.5625H6.375V7.3125H17.625V3.5625Z" />
-  </Svg>
+  </SVG>
 );

package/src/info/Required.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Required = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M10.8 3.84003H13.2V9.85259L18.1543 7.01815L19.3461 9.10132L14.3584 11.9549L19.3371 14.7999L18.1463 16.8836L13.2 14.0572V20.16H10.8V13.9907L5.76116 16.8735L4.56935 14.7903L9.5232 11.9561L4.56 9.12003L5.75073 7.03624L10.8 9.92154V3.84003Z" />
-  </Svg>
+  </SVG>
 );

package/src/info/ResaleLogbook.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const ResaleLogbook = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M20.1574 16.9691V6.51741C19.2227 6.23416 18.1606 6.09254 16.9709 6.09254C15.1298 6.09254 13.4729 6.54573 12 7.45212V17.8614C13.4729 16.955 15.1298 16.5018 16.9709 16.5018C18.0756 16.5018 19.1378 16.6576 20.1574 16.9691ZM16.9709 4.26562C19.1236 4.26562 20.7947 4.71881 21.9844 5.6252V18.8386C21.9844 18.9519 21.9348 19.0581 21.8357 19.1572C21.7365 19.2563 21.6303 19.3059 21.517 19.3059C21.432 19.3059 21.3612 19.2918 21.3046 19.2634C20.1433 18.6403 18.6987 18.3287 16.9709 18.3287C15.1298 18.3287 13.4729 18.7819 12 19.6883C10.782 18.7819 9.12508 18.3287 7.02906 18.3287C5.49953 18.3287 4.05499 18.6545 2.69541 19.3059C2.66709 19.3059 2.63168 19.313 2.5892 19.3272C2.54671 19.3413 2.5113 19.3484 2.48298 19.3484C2.36968 19.3484 2.26346 19.3059 2.16433 19.2209C2.06519 19.136 2.01562 19.0368 2.01562 18.9235V5.6252C3.23358 4.71881 4.90471 4.26562 7.02906 4.26562C9.12508 4.26562 10.782 4.71881 12 5.6252C13.218 4.71881 14.8749 4.26562 16.9709 4.26562Z" />
-  </Svg>
+  </SVG>
 );

package/src/info/Spinner.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Spinner = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M13.6045 4.71587C13.6045 3.826 12.8831 3.10461 11.9932 3.10461C11.1034 3.10461 10.382 3.826 10.382 4.71587C10.382 5.60574 11.1034 6.32712 11.9932 6.32712C12.8831 6.32712 13.6045 5.60574 13.6045 4.71587Z" />
     <path d="M8.40944 7.49855C8.98143 6.81685 8.89254 5.80056 8.21084 5.22857C7.52914 4.65657 6.51286 4.74547 5.94086 5.42716C5.36887 6.10882 5.45776 7.12515 6.13946 7.69715C6.82111 8.26914 7.83744 8.18025 8.40944 7.49855Z" />
     <path d="M6.1983 11.1897C6.35284 10.3133 5.76768 9.47764 4.89129 9.32309C4.01496 9.16855 3.17927 9.75371 3.02472 10.6301C2.87023 11.5064 3.45539 12.3421 4.33173 12.4967C5.20807 12.6512 6.04375 12.066 6.1983 11.1897Z" />
@@ -12,5 +12,5 @@ export const Spinner = ({ className = '', ...props }) => (
     <path d="M19.2902 14.5638C18.5196 14.1189 17.5341 14.3829 17.0892 15.1536C16.6442 15.9242 16.9083 16.9096 17.6789 17.3546C18.4496 17.7995 19.435 17.5354 19.88 16.7648C20.3249 15.9942 20.0608 15.0087 19.2902 14.5638Z" />
     <path d="M20.9617 10.6301C20.8072 9.75374 19.9715 9.16858 19.0951 9.32308C18.2188 9.47762 17.6336 10.3133 17.7881 11.1896C17.9427 12.066 18.7784 12.6512 19.6547 12.4967C20.5311 12.3421 21.1162 11.5064 20.9617 10.6301Z" />
     <path d="M18.0448 7.49855C18.6168 6.81685 18.5279 5.80056 17.8462 5.22857C17.1645 4.65657 16.1482 4.74547 15.5762 5.42716C15.0042 6.10882 15.0931 7.12515 15.7748 7.69715C16.4565 8.26914 17.4728 8.18025 18.0448 7.49855Z" />
-  </Svg>
+  </SVG>
 );

package/src/info/Thumb.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Thumb = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M18.7851 19.6817L9.77153 19.6992C9.77142 19.6991 9.76995 19.699 9.76728 19.6988C9.71923 19.6954 9.28125 19.6648 9.28125 19.0457V13.11C9.28343 11.6479 9.69273 10.2164 10.4654 8.97509C10.936 8.22328 11.991 7.01912 12.582 6.39625C12.6068 6.36977 12.6441 6.33356 12.6882 6.29074C12.8769 6.10743 13.1905 5.80287 13.1905 5.62041C13.1905 5.50089 13.1961 5.35098 13.2035 5.15468C13.2139 4.87717 13.2278 4.50695 13.2343 3.99879C13.2408 3.44803 13.6895 2.99564 14.2411 3.00003H14.2652C15.2304 3.0175 15.5391 3.90917 15.5391 3.90917C15.5391 3.90917 16.3642 5.53515 15.5938 7.52394C14.9437 9.20457 14.8102 9.34008 14.8102 9.34008C14.8102 9.34008 14.6 9.64385 15.2655 9.63075C15.2655 9.63075 19.3279 9.61324 19.468 9.61324C19.7678 9.61324 20.7243 9.88644 20.6696 11.1037C20.6302 12.0042 20.0699 12.3189 19.7832 12.4216C19.746 12.4347 19.7263 12.4762 19.7416 12.5134C19.7481 12.5287 19.7591 12.5418 19.7744 12.5505C20.0677 12.721 20.6674 13.1515 20.6543 13.8116C20.6368 14.6114 20.315 14.9065 19.6453 15.0901C19.6081 15.0988 19.584 15.1381 19.5949 15.1753C19.5993 15.195 19.6124 15.2102 19.6277 15.219C19.8816 15.3632 20.3172 15.7151 20.2909 16.4275C20.2647 17.1531 19.7394 17.4088 19.4526 17.4963C19.4154 17.5072 19.3935 17.5465 19.4045 17.5837C19.4089 17.599 19.4198 17.6143 19.433 17.623C19.6146 17.7476 19.8838 18.0295 19.8707 18.6087C19.8642 18.9146 19.7613 19.1375 19.6321 19.2971C19.4286 19.5484 19.109 19.6795 18.7851 19.6817ZM7.49974 21H3.89085C3.6067 21 3.375 20.7705 3.375 20.4842V12.1972C3.37718 11.9131 3.6067 11.6836 3.89085 11.6836H7.49974C7.78392 11.6836 8.01562 11.9131 8.01562 12.1993V20.4842C8.01562 20.7683 7.7861 21 7.49974 21Z" />
-  </Svg>
+  </SVG>
 );

package/src/info/Truck.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Truck = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M19.6364 8.17756H16.7727V4.35938H3.40909C2.35909 4.35938 1.5 5.21847 1.5 6.26847V16.7685H3.40909C3.40909 18.353 4.68818 19.6321 6.27273 19.6321C7.85727 19.6321 9.13636 18.353 9.13636 16.7685H14.8636C14.8636 18.353 16.1427 19.6321 17.7273 19.6321C19.3118 19.6321 20.5909 18.353 20.5909 16.7685H22.5V11.9957L19.6364 8.17756ZM6.27273 18.2003C5.48046 18.2003 4.84091 17.5608 4.84091 16.7685C4.84091 15.9762 5.48046 15.3367 6.27273 15.3367C7.065 15.3367 7.70455 15.9762 7.70455 16.7685C7.70455 17.5608 7.065 18.2003 6.27273 18.2003ZM19.1591 9.60938L21.03 11.9957H16.7727V9.60938H19.1591ZM17.7273 18.2003C16.935 18.2003 16.2955 17.5608 16.2955 16.7685C16.2955 15.9762 16.935 15.3367 17.7273 15.3367C18.5195 15.3367 19.1591 15.9762 19.1591 16.7685C19.1591 17.5608 18.5195 18.2003 17.7273 18.2003Z" />
-  </Svg>
+  </SVG>
 );

package/src/social/Facebook.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Facebook = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M20.5312 12.005C20.5312 7.29055 16.7117 3.46875 12 3.46875C7.28832 3.46875 3.46875 7.29055 3.46875 12.005C3.46875 16.2657 6.5885 19.7971 10.667 20.4375V14.4725H8.50085V12.005H10.667V10.1243C10.667 7.98495 11.9406 6.80321 13.8894 6.80321C14.8228 6.80321 15.7991 6.96994 15.7991 6.96994V9.07065H14.7233C13.6635 9.07065 13.333 9.72865 13.333 10.4037V12.005H15.6991L15.3209 14.4725H13.333V20.4375C17.4115 19.7971 20.5312 16.2657 20.5312 12.005Z" />
-  </Svg>
+  </SVG>
 );

package/src/social/Google.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Google = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M12.1722 10.7946V13.6875H17.0551C16.8583 14.929 15.5792 17.3277 12.1722 17.3277C9.2326 17.3277 6.83418 14.9411 6.83418 12C6.83418 9.05893 9.2326 6.67232 12.1722 6.67232C13.8449 6.67232 14.9642 7.37143 15.6038 7.97411L17.9407 5.7683C16.4401 4.3942 14.4968 3.5625 12.1722 3.5625C7.41226 3.5625 3.5625 7.33527 3.5625 12C3.5625 16.6647 7.41226 20.4375 12.1722 20.4375C17.1412 20.4375 20.4375 17.0143 20.4375 12.1929C20.4375 11.6384 20.376 11.2165 20.3022 10.7946H12.1722Z" />
-  </Svg>
+  </SVG>
 );

package/src/social/Instagram.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Instagram = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M12 4.62225C14.403 4.62225 14.688 4.63125 15.6375 4.67475C18.0765 4.78575 19.2157 5.943 19.3267 8.364C19.3702 9.31275 19.3785 9.59775 19.3785 12.0008C19.3785 14.4045 19.3695 14.6888 19.3267 15.6375C19.215 18.0563 18.0788 19.2157 15.6375 19.3267C14.688 19.3702 14.4045 19.3792 12 19.3792C9.597 19.3792 9.312 19.3702 8.36325 19.3267C5.91825 19.215 4.785 18.0525 4.674 15.6368C4.6305 14.688 4.6215 14.4037 4.6215 12C4.6215 9.597 4.63125 9.31275 4.674 8.36325C4.78575 5.943 5.922 4.785 8.36325 4.674C9.31275 4.63125 9.597 4.62225 12 4.62225ZM12 3C9.55575 3 9.24975 3.0105 8.28975 3.054C5.02125 3.204 3.20475 5.0175 3.05475 8.289C3.0105 9.24975 3 9.55575 3 12C3 14.4443 3.0105 14.751 3.054 15.711C3.204 18.9795 5.0175 20.796 8.289 20.946C9.24975 20.9895 9.55575 21 12 21C14.4443 21 14.751 20.9895 15.711 20.946C18.9765 20.796 20.7975 18.9825 20.9452 15.711C20.9895 14.751 21 14.4443 21 12C21 9.55575 20.9895 9.24975 20.946 8.28975C20.799 5.02425 18.9832 3.20475 15.7118 3.05475C14.751 3.0105 14.4443 3 12 3V3ZM12 7.3785C9.44775 7.3785 7.3785 9.44775 7.3785 12C7.3785 14.5522 9.44775 16.6222 12 16.6222C14.5522 16.6222 16.6215 14.553 16.6215 12C16.6215 9.44775 14.5522 7.3785 12 7.3785ZM12 15C10.3432 15 9 13.6575 9 12C9 10.3432 10.3432 9 12 9C13.6567 9 15 10.3432 15 12C15 13.6575 13.6567 15 12 15ZM16.8045 6.11625C16.2075 6.11625 15.7238 6.6 15.7238 7.19625C15.7238 7.7925 16.2075 8.27625 16.8045 8.27625C17.4008 8.27625 17.8837 7.7925 17.8837 7.19625C17.8837 6.6 17.4008 6.11625 16.8045 6.11625Z" />
-  </Svg>
+  </SVG>
 );

package/src/social/Share.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Share = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M15.3481 16.0505L9.44221 12.613C9.48362 12.4224 9.51675 12.2319 9.51675 12.0331C9.51675 11.8343 9.48362 11.6438 9.44221 11.4533L15.2818 8.04895C15.7291 8.4631 16.3172 8.71988 16.9716 8.71988C18.3466 8.71988 19.4565 7.60994 19.4565 6.23494C19.4565 4.85994 18.3466 3.75 16.9716 3.75C15.5966 3.75 14.4866 4.85994 14.4866 6.23494C14.4866 6.43373 14.5198 6.62425 14.5612 6.81476L8.72157 10.2191C8.27428 9.80497 7.68618 9.54819 7.03181 9.54819C5.65681 9.54819 4.54687 10.6581 4.54687 12.0331C4.54687 13.4081 5.65681 14.5181 7.03181 14.5181C7.68618 14.5181 8.27428 14.2613 8.72157 13.8471L14.6192 17.2929C14.5777 17.4669 14.5529 17.6491 14.5529 17.8313C14.5529 19.1649 15.638 20.25 16.9716 20.25C18.3052 20.25 19.3902 19.1649 19.3902 17.8313C19.3902 16.4977 18.3052 15.4127 16.9716 15.4127C16.3421 15.4127 15.7788 15.6611 15.3481 16.0505Z" />
-  </Svg>
+  </SVG>
 );

package/src/social/Twitter.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Twitter = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M18.5651 9.07764C18.5651 13.5511 15.1626 18.7031 8.94366 18.7031C7.02749 18.7031 5.2473 18.1496 3.75 17.1849C4.02195 17.2161 4.28453 17.2271 4.56742 17.2271C6.14756 17.2271 7.60266 16.6923 8.76549 15.7808C7.27913 15.7495 6.0319 14.7754 5.60365 13.4354C5.81309 13.4667 6.02252 13.4885 6.2429 13.4885C6.54611 13.4885 6.84932 13.4463 7.13221 13.3728C5.58177 13.0586 4.4205 11.6967 4.4205 10.0518V10.0095C4.87063 10.2628 5.39422 10.4192 5.94906 10.4395C5.03787 9.83286 4.44082 8.7962 4.44082 7.6235C4.44082 6.99337 4.60962 6.41797 4.90189 5.91449C6.56643 7.96749 9.0687 9.30906 11.8742 9.45447C11.8226 9.2043 11.7913 8.94161 11.7913 8.68049C11.7913 6.81512 13.298 5.29688 15.172 5.29688C16.1457 5.29688 17.0256 5.70654 17.643 6.36481C18.4073 6.2194 19.1403 5.93638 19.7905 5.54861C19.5389 6.33354 19.0043 6.99337 18.3026 7.41242C18.9825 7.33893 19.6436 7.1513 20.25 6.88861C19.7905 7.55939 19.2138 8.15669 18.5542 8.63827C18.5651 8.78525 18.5651 8.93067 18.5651 9.07764Z" />
-  </Svg>
+  </SVG>
 );

package/src/social/Whatsapp.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Whatsapp = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M16.7591 14.0559C16.7825 14.1147 16.7825 14.1852 16.7825 14.2323C16.7825 14.5259 16.6886 14.8549 16.5827 15.1251C16.3125 15.7831 15.22 16.2062 14.5503 16.2062C13.9862 16.2062 12.8232 15.7126 12.3178 15.4775C10.6378 14.7139 9.59203 13.4099 8.58166 11.9176C8.13511 11.2597 7.73593 10.449 7.74763 9.63839V9.54423C7.77103 8.76898 8.05293 8.21656 8.61704 7.68813C8.79309 7.52349 8.98113 7.42962 9.22794 7.42962C9.3689 7.42962 9.50985 7.46471 9.6625 7.46471C9.9798 7.46471 10.0386 7.55887 10.1561 7.86418C10.2383 8.06391 10.8375 9.66178 10.8375 9.77934C10.8375 10.2259 10.0269 10.7309 10.0269 11.0011C10.0269 11.0599 10.0503 11.1187 10.0857 11.1775C10.3439 11.7296 10.8375 12.3642 11.2841 12.7871C11.8242 13.3041 12.4 13.6448 13.058 13.9738C13.1402 14.0206 13.2226 14.0559 13.3165 14.0559C13.6692 14.0559 14.2564 12.9163 14.562 12.9163C14.7617 12.9163 16.6769 13.915 16.7591 14.0559ZM19.5554 11.765C19.5554 7.69983 16.2421 4.38653 12.1769 4.38653C8.11178 4.38653 4.79847 7.69983 4.79847 11.765C4.79847 13.3158 5.29211 14.8315 6.20831 16.0887L5.28041 18.8262L8.12347 17.9214C9.32188 18.7086 10.7437 19.1432 12.1769 19.1432C16.2421 19.1432 19.5554 15.8301 19.5554 11.765ZM21.0357 11.765C21.0357 16.6525 17.0644 20.6235 12.1769 20.6235C10.6849 20.6235 9.20458 20.2477 7.88862 19.5193L2.98914 21.0937L4.58701 16.3352C3.75269 14.9608 3.31813 13.3746 3.31813 11.765C3.31813 6.87724 7.28941 2.90625 12.1769 2.90625C17.0644 2.90625 21.0357 6.87724 21.0357 11.765Z" />
-  </Svg>
+  </SVG>
 );

package/src/ticketing/Deal.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Deal = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <mask
       id="mask0"
       mask-type="alpha"
@@ -18,5 +18,5 @@ export const Deal = ({ className = '', ...props }) => (
       <path d="M20.8125 11.9961L19.0448 9.71232L19.1352 6.82213L16.3611 6.00927L14.7225 3.60938L12 4.58998L9.27754 3.60938L7.65181 6.00927L4.87775 6.82213L4.96806 9.71232L3.1875 11.9961L4.95516 14.2799L4.86484 17.17L7.63891 17.9829L9.26464 20.3828L11.9871 19.4022L14.7096 20.3828L16.3353 17.9829L19.1094 17.17L19.019 14.2799L20.8125 11.9961ZM8.65822 11.5445C8.33565 11.2219 8.18082 10.8349 8.18082 10.3833C8.18082 9.93167 8.33565 9.54459 8.65822 9.22202C8.98078 8.89946 9.36786 8.74462 9.81946 8.74462C10.271 8.74462 10.6581 8.89946 10.9807 9.22202C11.3033 9.54459 11.4581 9.93167 11.4581 10.3833C11.4581 10.8349 11.3033 11.2219 10.9807 11.5445C10.6581 11.8671 10.271 12.0219 9.81946 12.0219C9.36786 12.0219 8.98078 11.8671 8.65822 11.5445ZM10.6452 15.054C10.5807 15.183 10.4001 15.2863 10.2581 15.2863H10.1033C9.96138 15.2863 9.89687 15.183 9.96138 15.054L13.3032 8.92526C13.3677 8.79623 13.5483 8.69301 13.6902 8.69301H13.8322C13.9741 8.69301 14.0386 8.79623 13.9741 8.92526L10.6452 15.054ZM14.1289 12.8993C14.3225 12.8993 14.4902 12.9638 14.6321 13.1057C14.7741 13.2476 14.8386 13.4154 14.8386 13.6089C14.8386 13.8025 14.7741 13.9702 14.6321 14.1121C14.4902 14.254 14.3225 14.3186 14.1289 14.3186C13.9354 14.3186 13.7677 14.254 13.6257 14.1121C13.4838 13.9702 13.4193 13.8025 13.4193 13.6089C13.4193 13.4154 13.4838 13.2476 13.6257 13.1057C13.7677 12.9638 13.9354 12.8993 14.1289 12.8993ZM15.2902 14.7702C14.9676 15.0927 14.5805 15.2476 14.1289 15.2476C13.6773 15.2476 13.2903 15.0927 12.9677 14.7702C12.6451 14.4476 12.4903 14.0605 12.4903 13.6089C12.4903 13.1573 12.6451 12.7573 12.9677 12.4477C13.2903 12.1251 13.6773 11.9703 14.1289 11.9703C14.5805 11.9703 14.9676 12.1251 15.2902 12.4477C15.6127 12.7702 15.7676 13.1573 15.7676 13.6089C15.7805 14.0605 15.6127 14.4476 15.2902 14.7702ZM9.81946 9.67361C10.013 9.67361 10.1807 9.73813 10.3227 9.88006C10.4646 10.022 10.5291 10.1897 10.5291 10.3833C10.5291 10.5768 10.4646 10.7445 10.3227 10.8865C10.1807 11.0284 10.013 11.0929 9.81946 11.0929C9.62592 11.0929 9.45818 11.0284 9.31625 10.8865C9.17432 10.7445 9.10981 10.5768 9.10981 10.3833C9.10981 10.1897 9.17432 10.022 9.31625 9.88006C9.45818 9.73813 9.62592 9.67361 9.81946 9.67361Z" />
       <path d="M24 0H0V24H24V0Z" />
     </g>
-  </Svg>
+  </SVG>
 );

package/src/ticketing/DesignTicket.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const DesignTicket = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M16.0131 8.32198C16.0272 8.32198 16.0415 8.31954 16.0553 8.31339C16.1074 8.29007 16.1308 8.22891 16.1075 8.17675C16.0903 8.13827 16.0526 8.11591 16.0131 8.1158V8.11527C15.0071 8.06481 14.1955 7.25314 14.145 6.24727H14.1447C14.1446 6.23349 14.1419 6.21939 14.1359 6.20593C14.1126 6.15377 14.0515 6.13034 13.9992 6.15367C13.961 6.17073 13.9388 6.20815 13.9385 6.24727H13.9378C13.8874 7.25314 13.0757 8.06481 12.0697 8.11527V8.1158C12.0557 8.1158 12.0414 8.11824 12.0276 8.12449C11.9755 8.14781 11.9521 8.20898 11.9754 8.26113C11.9925 8.29951 12.0303 8.32198 12.0697 8.32198V8.32251C13.0757 8.37297 13.8874 9.18464 13.9378 10.1905H13.9382C13.9382 10.2047 13.9409 10.219 13.9469 10.2327C13.9703 10.285 14.0314 10.3083 14.0836 10.2851C14.1221 10.2678 14.1445 10.2301 14.1445 10.1905H14.145C14.1955 9.18464 15.0071 8.37297 16.0131 8.32251V8.32198ZM10.9421 16.7547C11.2901 17.1027 11.8434 17.1135 12.1782 16.7787C12.5128 16.444 12.502 15.8906 12.154 15.5426C11.806 15.1946 11.2527 15.1839 10.9179 15.5185C10.5832 15.8533 10.5938 16.4066 10.9421 16.7547ZM9.12655 14.9392C9.47466 15.2872 10.028 15.298 10.3627 14.9632C10.6974 14.6285 10.6866 14.0752 10.3386 13.727C9.99048 13.379 9.43724 13.3683 9.10248 13.7031C8.76772 14.0377 8.77854 14.5912 9.12655 14.9392ZM7.2071 13.0197C7.55501 13.3677 8.10845 13.3785 8.44322 13.0439C8.77798 12.7091 8.76706 12.1557 8.41905 11.8078C8.07103 11.4598 7.51769 11.4488 7.18304 11.7836C6.84828 12.1184 6.85909 12.6717 7.2071 13.0197ZM20.2644 6.68816L22.3641 8.78789C22.4846 8.90842 22.4884 9.10188 22.3726 9.21784L14.1009 17.4894C13.753 17.1415 13.1995 17.1306 12.8648 17.4654C12.53 17.8 12.5409 18.3536 12.8888 18.7015L9.23348 22.3567C9.11761 22.4727 8.92405 22.469 8.80352 22.3484L6.70507 20.25C7.46183 19.4933 7.43745 18.2422 6.65058 17.4553C5.86382 16.6686 4.61276 16.6442 3.856 17.4009L1.62239 15.1672C1.50175 15.0468 1.49804 14.8532 1.61401 14.7374L5.26935 11.0819C5.61726 11.4298 6.1707 11.4408 6.50546 11.1061C6.84012 10.7713 6.82931 10.2179 6.4814 9.86998L14.753 1.59827C14.869 1.48241 15.0624 1.48623 15.183 1.60665L17.4178 3.84164C17.414 3.84525 17.4101 3.84862 17.4062 3.85199C17.4014 3.85615 17.3965 3.86029 17.392 3.86485C16.6353 4.62161 16.6596 5.87278 17.4465 6.65954C18.2332 7.4463 19.4844 7.47079 20.241 6.71403C20.2455 6.7096 20.2496 6.70487 20.2536 6.70015L20.2573 6.69591C20.2584 6.69458 20.2596 6.69327 20.2608 6.69197C20.262 6.69068 20.2632 6.68941 20.2644 6.68816ZM21.0294 18.1816C21.0636 18.1817 21.0962 18.2011 21.1111 18.2342C21.1313 18.2794 21.111 18.3324 21.0659 18.3525C21.054 18.3578 21.0416 18.3601 21.0294 18.3601V18.3604C20.1589 18.4042 19.4566 19.1065 19.4128 19.9769H19.4124C19.4124 20.0112 19.393 20.0438 19.3597 20.0587C19.3146 20.0788 19.2617 20.0587 19.2414 20.0134C19.2362 20.0015 19.2339 19.9892 19.234 19.9769H19.2336C19.1899 19.1065 18.4875 18.4042 17.617 18.3604V18.3601C17.5829 18.36 17.5501 18.3406 17.5353 18.3073C17.5151 18.2622 17.5354 18.2092 17.5805 18.189C17.5924 18.1837 17.6048 18.1816 17.617 18.1816V18.1811C18.4875 18.1375 19.1899 17.4351 19.2336 16.5646H19.2341C19.2344 16.5308 19.2537 16.4983 19.2867 16.4836C19.3319 16.4634 19.3848 16.4837 19.4049 16.5288C19.4102 16.5404 19.4125 16.5527 19.4126 16.5646H19.4128C19.4566 17.4351 20.1589 18.1375 21.0294 18.1811V18.1816ZM10.9449 3.5126C10.9325 3.48472 10.905 3.46851 10.8763 3.4684V3.46808C10.1457 3.4313 9.55624 2.84192 9.51967 2.11134H9.51935C9.51935 2.10137 9.51734 2.09109 9.51299 2.08134C9.49603 2.04349 9.45162 2.02643 9.41377 2.04339C9.386 2.05579 9.36989 2.08293 9.36957 2.11134H9.36915C9.33247 2.84192 8.74298 3.4313 8.0124 3.46808V3.4684C8.00212 3.4684 7.99173 3.47031 7.98176 3.47476C7.94381 3.49161 7.92685 3.53614 7.94381 3.57398C7.95632 3.60186 7.98367 3.61818 8.0124 3.61818V3.6185C8.74298 3.65528 9.33247 4.24467 9.36915 4.97525H9.36946C9.36946 4.98553 9.37127 4.99592 9.37572 5.00588C9.39268 5.04373 9.43709 5.06069 9.47504 5.04383C9.50282 5.03132 9.51925 5.00387 9.51925 4.97525H9.51967C9.55624 4.24467 10.1457 3.65528 10.8763 3.6185V3.61818C10.8866 3.61818 10.897 3.61638 10.9071 3.61193C10.9449 3.59497 10.9619 3.55045 10.9449 3.5126ZM5.85556 6.73351C5.90283 6.73351 5.9481 6.76033 5.96866 6.80633C5.99654 6.86877 5.96856 6.94202 5.90612 6.9699C5.88958 6.97721 5.87252 6.98029 5.85556 6.98029V6.98082C4.65156 7.04135 3.68003 8.01287 3.61961 9.21687H3.61898C3.61887 9.26425 3.59216 9.3093 3.54605 9.32997C3.48372 9.35775 3.41036 9.32987 3.38248 9.26743C3.37517 9.251 3.37209 9.23372 3.3722 9.21687H3.37156C3.31114 8.01287 2.33961 7.04135 1.13562 6.98082V6.98029C1.08824 6.98029 1.04308 6.95336 1.02251 6.90736C0.994634 6.84492 1.02262 6.77167 1.08506 6.74379C1.10149 6.73648 1.11866 6.73351 1.13562 6.73351V6.73287C2.33961 6.67235 3.31114 5.70092 3.37156 4.49693H3.3723C3.37283 4.44997 3.39944 4.40524 3.44502 4.38478C3.50746 4.357 3.58071 4.38488 3.60869 4.44743C3.6159 4.46343 3.61898 4.48029 3.61919 4.49693H3.61961C3.68003 5.70092 4.65156 6.67235 5.85556 6.73287V6.73351Z" />
-  </Svg>
+  </SVG>
 );

package/src/ticketing/GiftCard.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const GiftCard = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M20.4 6.21562H18.111C18.2265 5.89013 18.3 5.53312 18.3 5.16562C18.3 3.42262 16.893 2.01562 15.15 2.01562C14.0475 2.01562 13.092 2.58263 12.525 3.43313L12 4.13663L11.475 3.42263C10.908 2.58263 9.9525 2.01562 8.85 2.01562C7.107 2.01562 5.7 3.42262 5.7 5.16562C5.7 5.53312 5.7735 5.89013 5.889 6.21562H3.6C2.4345 6.21562 1.5105 7.15012 1.5105 8.31562L1.5 19.8656C1.5 21.0311 2.4345 21.9656 3.6 21.9656H20.4C21.5655 21.9656 22.5 21.0311 22.5 19.8656V8.31562C22.5 7.15012 21.5655 6.21562 20.4 6.21562ZM15.15 4.11567C15.7275 4.11567 16.2 4.58817 16.2 5.16567C16.2 5.74317 15.7275 6.21567 15.15 6.21567C14.5725 6.21567 14.1 5.74317 14.1 5.16567C14.1 4.58817 14.5725 4.11567 15.15 4.11567ZM8.84997 4.11567C9.42747 4.11567 9.89997 4.58817 9.89997 5.16567C9.89997 5.74317 9.42747 6.21567 8.84997 6.21567C8.27247 6.21567 7.79997 5.74317 7.79997 5.16567C7.79997 4.58817 8.27247 4.11567 8.84997 4.11567ZM20.4 19.8656H3.60001V17.7656H20.4V19.8656ZM20.4 14.6156H3.60001V8.31564H8.93401L6.75001 11.2871L8.45101 12.5156L10.95 9.11364L12 7.68564L13.05 9.11364L15.549 12.5156L17.25 11.2871L15.066 8.31564H20.4V14.6156Z" />
-  </Svg>
+  </SVG>
 );

package/src/ticketing/Membership.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Membership = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M19.5073 2.625C20.02 2.625 20.4595 2.8081 20.8257 3.17432C21.1919 3.54053 21.375 3.97998 21.375 4.49268V14.8198C21.375 15.3325 21.1919 15.772 20.8257 16.1382C20.4595 16.5044 20.02 16.6875 19.5073 16.6875H15.7354V21.375L12 19.5073L8.26465 21.375V16.6875H4.49268C3.97998 16.6875 3.54053 16.5044 3.17432 16.1382C2.8081 15.772 2.625 15.3325 2.625 14.8198V4.49268C2.625 3.97998 2.8081 3.54053 3.17432 3.17432C3.54053 2.8081 3.97998 2.625 4.49268 2.625H19.5073ZM19.5073 14.8198V12.9521H4.49268V14.8198H19.5073ZM19.5073 10.1323V4.49265H4.49268V10.1323H19.5073Z" />
-  </Svg>
+  </SVG>
 );

package/src/ticketing/Pickup.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Pickup = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M3.66667 3.65625V5.73958H20.3333V3.65625H3.66667ZM21.375 11.9896L20.3333 6.78129H3.66667L2.625 11.9896V14.073H3.66667V20.323H14.0833V14.073H18.25V20.323H20.3333V14.073H21.375V11.9896ZM5.75 18.2396V14.0729H12V18.2396H5.75Z" />
-  </Svg>
+  </SVG>
 );

package/src/ticketing/Price.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Price = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <circle cx="11.9766" cy="12.0234" r="9.35156" fill="black" />
     <path
       d="M12.959 8.98416C12.4354 8.98416 12.0065 9.14022 11.6723 9.45234C11.3418 9.76447 11.1209 10.2364 11.0095 10.868H13.5494V11.7264H10.9259L10.9148 11.9772V12.2838L10.9259 12.5011H13.1985V13.3539H11.0206C11.2583 14.5132 11.9341 15.0929 13.0481 15.0929C13.5792 15.0929 14.1232 14.9777 14.6802 14.7473V15.8788C14.1937 16.1054 13.6274 16.2188 12.9813 16.2188C12.0864 16.2188 11.3585 15.9735 10.7978 15.483C10.2408 14.9925 9.87686 14.2828 9.70604 13.3539H8.85938V12.5011H9.61692L9.60578 12.2949V12.0887L9.61692 11.7264H8.85938V10.868H9.6949C9.83601 9.93539 10.1906 9.20339 10.7588 8.67203C11.327 8.14068 12.0604 7.875 12.959 7.875C13.7017 7.875 14.3664 8.03849 14.9531 8.36548L14.4852 9.40775C13.9134 9.12535 13.4046 8.98416 12.959 8.98416Z"
       fill="white"
     />
-  </Svg>
+  </SVG>
 );

package/src/ticketing/Resale.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Resale = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M15.1464 3.83997L11.3369 0.0298664L11.9966 0C18.2867 0 23.4365 4.83996 23.9368 10.9898H22.4365C22.0866 7.2298 19.7464 4.0597 16.4766 2.50984L15.1464 3.83997ZM13.6604 13.7556C13.3112 14.1048 13.3003 14.6601 13.6362 14.996C13.9721 15.3319 14.5274 15.3211 14.8767 14.9718C15.2259 14.6225 15.2367 14.0673 14.9008 13.7314C14.5649 13.3955 14.0097 13.4063 13.6604 13.7556ZM11.8386 15.5774C11.4894 15.9266 11.4786 16.4818 11.8145 16.8177C12.1503 17.1536 12.7056 17.1428 13.0548 16.7936C13.4041 16.4444 13.4149 15.8891 13.079 15.5532C12.7431 15.2173 12.1878 15.2281 11.8386 15.5774ZM16.8027 13.0457C17.1519 12.6965 17.1628 12.1412 16.8269 11.8054C16.491 11.4695 15.9357 11.4803 15.5865 11.8295C15.2374 12.1787 15.2265 12.734 15.5623 13.0699C15.8982 13.4058 16.4536 13.3949 16.8027 13.0457ZM11.1013 18.7472C11.4504 18.398 11.4614 17.8427 11.1255 17.5068C10.7896 17.1709 10.2342 17.1818 9.88506 17.531L1.58482 9.23072C1.4685 9.11439 1.4723 8.92022 1.59324 8.79927L3.70026 6.69231C4.48291 7.4776 5.73838 7.45311 6.52791 6.66358C7.31744 5.87405 7.34193 4.61858 6.58256 3.85922C6.57419 3.85089 8.79927 1.59325 8.79927 1.59325C8.92022 1.4723 9.11439 1.4685 9.23072 1.58483L17.5309 9.88506C17.1818 10.2342 17.1709 10.7896 17.5068 11.1255C17.8427 11.4613 18.398 11.4504 18.7472 11.1013L22.4152 14.7693C22.5315 14.8856 22.5277 15.0798 22.4068 15.2008L20.1654 17.4421C19.4061 16.6827 18.1506 16.7072 17.3611 17.4967C16.5715 18.2863 16.5471 19.5417 17.3064 20.3011L15.2008 22.4067C15.0798 22.5277 14.8856 22.5315 14.7693 22.4152L11.1013 18.7472ZM7.51668 21.48C4.24684 19.9397 1.90659 16.7595 1.54659 13.0001H0.046875C0.556737 19.1595 5.70656 24 11.9966 24L12.6564 23.9696L8.8468 20.1595L7.51668 21.48Z" />
-  </Svg>
+  </SVG>
 );

package/src/ticketing/Scanner.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Scanner = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M15.6816 4.59108L19.3837 8.29311L18.8391 8.83774L15.137 5.13571L15.6816 4.59108ZM19.2444 4.73039C19.4386 4.92466 19.4386 5.23965 19.2444 5.43392C19.0501 5.62819 18.7352 5.62819 18.5409 5.43392C18.3466 5.23965 18.3466 4.92466 18.5409 4.73039C18.7352 4.53613 19.0501 4.53613 19.2444 4.73039ZM17.6827 10.0012L13.9807 6.29918L14.5253 5.75455L18.2273 9.45657L17.6827 10.0012ZM13.6933 13.9907L9.99124 10.2886L12.3453 7.93456L16.0473 11.6366L13.6933 13.9907ZM8.52286 11.2407L12.7341 15.452C13.1201 15.838 13.7518 15.838 14.1378 15.452L22.5603 7.02948C22.9464 6.64346 22.9464 6.01176 22.5603 5.62574L18.3491 1.41452C17.963 1.02849 17.3314 1.02849 16.9453 1.41452L8.52286 9.83696C8.13684 10.223 8.13684 10.8547 8.52286 11.2407ZM4.31163 19.6632C6.44531 21.7968 9.23876 22.8637 12.0322 22.8637V20.8844C9.75115 20.8774 7.46303 20.0071 5.71537 18.2594C3.96771 16.5118 3.09736 14.2236 3.10438 11.9426H1.12514C1.1111 14.736 2.17794 17.5295 4.31163 19.6632ZM12.0322 16.9119V18.8912C10.2495 18.8912 8.47372 18.2104 7.11911 16.8557C5.76449 15.5011 5.08367 13.7254 5.08367 11.9426H7.06291C7.06998 13.213 7.55425 14.4834 8.52285 15.452C9.49144 16.4206 10.7618 16.9049 12.0322 16.9119Z" />
-  </Svg>
+  </SVG>
 );

package/src/ticketing/Seat.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Seat = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M4.79297 14.9715H19.207V20.9531H16.5V17.9623H7.50003V20.9531H4.79297V14.9715ZM18.293 9.99963H21V12.9905H18.293V9.99963ZM3 9.99963H5.70701V12.9905H3V9.99963ZM16.5 12.9905H7.50003V5.02783C7.50003 4.48403 7.67577 4.01793 8.02736 3.62951C8.3789 3.24108 8.80076 3.04688 9.29299 3.04688H14.707C15.1992 3.04688 15.6211 3.24108 15.9726 3.62951C16.3242 4.01793 16.5 4.48403 16.5 5.02783V12.9905Z" />
-  </Svg>
+  </SVG>
 );

package/src/ticketing/Selling.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Selling = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M20.469 11.622L12.369 3.522C12.045 3.198 11.595 3 11.1 3H4.8C3.81 3 3 3.81 3 4.8V11.1C3 11.595 3.198 12.045 3.531 12.378L11.631 20.478C11.955 20.802 12.405 21 12.9 21C13.395 21 13.845 20.802 14.169 20.469L20.469 14.169C20.802 13.845 21 13.395 21 12.9C21 12.405 20.793 11.946 20.469 11.622ZM6.14998 7.50003C5.40298 7.50003 4.79998 6.89703 4.79998 6.15003C4.79998 5.40303 5.40298 4.80003 6.14998 4.80003C6.89698 4.80003 7.49998 5.40303 7.49998 6.15003C7.49998 6.89703 6.89698 7.50003 6.14998 7.50003Z" />
-  </Svg>
+  </SVG>
 );

package/src/ticketing/Ticket.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Ticket = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M9.09926 13.7314C9.43517 13.3955 9.9904 13.4063 10.3397 13.7556C10.6889 14.1048 10.6997 14.6601 10.3638 14.996C10.0279 15.3319 9.47269 15.3211 9.12342 14.9718C8.77419 14.6225 8.76336 14.0673 9.09926 13.7314ZM10.9209 15.5532C11.2568 15.2173 11.8121 15.2281 12.1614 15.5774C12.5106 15.9266 12.5214 16.4818 12.1855 16.8177C11.8497 17.1536 11.2944 17.1428 10.9451 16.7936C10.5959 16.4444 10.5851 15.8891 10.9209 15.5532ZM8.43773 13.0699C8.10183 13.4058 7.54645 13.3949 7.19732 13.0457C6.84809 12.6965 6.83726 12.1412 7.17317 11.8054C7.50902 11.4695 8.0643 11.4803 8.41353 11.8295C8.76267 12.1787 8.77359 12.734 8.43773 13.0699ZM12.8987 18.7472C12.5496 18.398 12.5387 17.8427 12.8746 17.5068C13.2105 17.1709 13.7658 17.1818 14.115 17.531L22.4152 9.23072C22.5315 9.11439 22.5277 8.92022 22.4068 8.79927L20.2998 6.69231C20.2916 6.70063 20.2848 6.70991 20.2765 6.71824C19.5171 7.4776 18.2616 7.45311 17.4721 6.66358C16.6826 5.87405 16.6581 4.61858 17.4175 3.85922C17.4258 3.85089 17.435 3.84392 17.4434 3.83593L15.2008 1.59325C15.0798 1.4723 14.8856 1.4685 14.7693 1.58483L6.46908 9.88506C6.81821 10.2342 6.82913 10.7896 6.49323 11.1255C6.15737 11.4613 5.60199 11.4504 5.25286 11.1013L1.58483 14.7693C1.4685 14.8856 1.4723 15.0798 1.59325 15.2008L3.83459 17.4421C4.59395 16.6827 5.84942 16.7072 6.63895 17.4967C7.42848 18.2863 7.45297 19.5417 6.6936 20.3011L8.79927 22.4067C8.92022 22.5277 9.11439 22.5315 9.23072 22.4152L12.8987 18.7472Z" />
-  </Svg>
+  </SVG>
 );

package/src/ticketing/TicketInsurance.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const TicketInsurance = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M9.28113 10.8262C9.09382 11.0104 9.09382 11.2877 9.28113 11.4719C9.46844 11.6567 9.75035 11.6567 9.93766 11.5643C10.125 11.3794 10.125 11.0104 9.93766 10.8262C9.75035 10.6413 9.46844 10.6413 9.28113 10.8262ZM10.3079 11.8234C10.1219 12.0058 10.1219 12.2787 10.3079 12.4604C10.4938 12.6428 10.7731 12.6428 10.9597 12.4604C11.1456 12.2787 11.1456 12.0058 10.9597 11.8234C10.7731 11.6417 10.4938 11.6417 10.3079 11.8234ZM11.2628 13.4604C11.1703 13.282 11.0785 13.0149 11.2628 12.8365C11.447 12.6587 11.7238 12.6587 11.9087 12.8365C12.093 13.0149 12.093 13.282 11.9087 13.4604C11.7238 13.6382 11.447 13.6382 11.2628 13.4604ZM10.3079 16.2822C10.3079 16.3734 10.2152 16.3734 10.1219 16.2822L9.00493 15.1906C9.47013 14.8265 9.37747 14.0983 9.00493 13.7342C8.63301 13.3708 7.88794 13.3708 7.51602 13.7342L6.30574 12.5515C6.21245 12.5515 6.21245 12.4603 6.30574 12.3697L8.26048 10.4588C8.44643 10.6405 8.72568 10.6405 8.91226 10.4588C9.09822 10.2764 9.09822 10.0035 8.91226 9.82178L13.3796 5.54524C13.3796 5.45406 13.4723 5.45406 13.5656 5.54524L14.7752 6.72803C14.31 7.09211 14.4033 7.81965 14.7752 8.18373C15.1478 8.54781 15.8922 8.54781 16.2641 8.18373L17.4744 9.27597C17.5677 9.27597 17.5677 9.36653 17.4744 9.4577L13.0071 13.8254C12.8205 13.6431 12.5419 13.6431 12.3559 13.8254C12.1693 14.0072 12.1693 14.2807 12.3559 14.4624L10.3079 16.2822ZM20.4528 7.93271V4.52359L11.89 2.63324L3.23462 4.5442V5.18118C3.23462 13.8248 5.56127 18.3755 11.5175 21.3775L11.7041 21.4693H12.076L12.2626 21.3775C17.5564 18.709 19.9782 14.8821 20.4528 7.93271Z" />
-  </Svg>
+  </SVG>
 );

package/src/ticketing/Turnstile.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Turnstile = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M4.20135 3.64917C4.20135 3.09688 4.64907 2.64917 5.20135 2.64917H7.77811C8.33039 2.64917 8.77811 3.09689 8.77811 3.64917V20.3722C8.77811 20.9245 8.33039 21.3722 7.77811 21.3722H5.20135C4.64907 21.3722 4.20135 20.9245 4.20135 20.3722V7.87979H6.48971C6.67026 7.87979 6.81662 7.73343 6.81662 7.55288C6.81662 7.37233 6.67025 7.22597 6.48971 7.22597H4.20135V5.91823H7.14354C7.32408 5.91823 7.47045 5.77187 7.47045 5.59132C7.47045 5.41077 7.32408 5.26441 7.14354 5.26441H4.20135V3.64917ZM9.43192 5.91821H19.8931V8.53349H9.43192V5.91821ZM17.9316 15.7256L11.2812 9.18737H9.43195V11.0367L15.9702 17.6883L17.9316 15.7256Z" />
-  </Svg>
+  </SVG>
 );

package/src/ui/Add.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Add = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M13.1917 13.1917V20.25H10.8083V13.1917H3.75V10.8083H10.8083V3.75H13.1917V10.8083H20.25V13.1917H13.1917Z" />
-  </Svg>
+  </SVG>
 );

package/src/ui/ArrowDown.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const ArrowDown = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M5.97563 7.125L12 13.1363L18.0244 7.125L19.875 8.97563L12 16.8506L4.125 8.97563L5.97563 7.125Z" />
-  </Svg>
+  </SVG>
 );

package/src/ui/ArrowDownA.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const ArrowDownA = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M21 12L19.4137 10.4138L13.125 16.6912V3H10.875V16.6912L4.5975 10.4025L3 12L12 21L21 12Z" />
-  </Svg>
+  </SVG>
 );

package/src/ui/ArrowLeft.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const ArrowLeft = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M16.8506 18.0244L10.8394 12L16.8506 5.97563L15 4.125L7.125 12L15 19.875L16.8506 18.0244Z" />
-  </Svg>
+  </SVG>
 );

package/src/ui/ArrowLeftA.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const ArrowLeftA = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M21 10.875H7.30875L13.5975 4.58625L12 3L3 12L12 21L13.5863 19.4137L7.30875 13.125H21V10.875Z" />
-  </Svg>
+  </SVG>
 );

package/src/ui/ArrowRight.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const ArrowRight = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M7.125 18.0244L13.1363 12L7.125 5.97563L8.97563 4.125L16.8506 12L8.97563 19.875L7.125 18.0244Z" />
-  </Svg>
+  </SVG>
 );

package/src/ui/ArrowRightA.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const ArrowRightA = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M12 3L10.4138 4.58625L16.6912 10.875H3V13.125H16.6912L10.4138 19.4137L12 21L21 12L12 3Z" />
-  </Svg>
+  </SVG>
 );

package/src/ui/ArrowUp.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const ArrowUp = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M5.97563 16.8506L12 10.8394L18.0244 16.8506L19.875 15L12 7.125L4.125 15L5.97563 16.8506Z" />
-  </Svg>
+  </SVG>
 );

package/src/ui/ArrowUpA.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const ArrowUpA = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M3 12L4.58625 13.5863L10.875 7.30875V21H13.125V7.30875L19.4025 13.5975L21 12L12 3L3 12Z" />
-  </Svg>
+  </SVG>
 );

package/src/ui/BurgerMenu.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const BurgerMenu = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M3.5625 6.375H20.4375V8.25H3.5625V6.375ZM3.5625 16.125H20.4375V18H3.5625V16.125ZM20.4375 11.25H3.5625V13.125H20.4375V11.25Z" />
-  </Svg>
+  </SVG>
 );

package/src/ui/Check.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Check = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M8.17368 16.6154L3.19528 11.637L1.5 13.3204L8.17368 19.994L22.5 5.66772L20.8167 3.98437L8.17368 16.6154Z" />
-  </Svg>
+  </SVG>
 );

package/src/ui/CircleChecked.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const CircleChecked = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M12 14.9999C10.3477 14.9999 9 13.6522 9 11.9999C9 10.3475 10.3477 8.99989 12 8.99989C13.6523 8.99989 15 10.3475 15 11.9999C15 13.6522 13.6523 14.9999 12 14.9999ZM5.62494 11.9999C5.62494 15.5155 8.48438 18.3749 12 18.3749C15.5156 18.3749 18.3751 15.5155 18.3751 11.9999C18.3751 8.48428 15.5156 5.62494 12 5.62494C8.48438 5.62494 5.62494 8.48428 5.62494 11.9999ZM12 20.9999C7.03134 20.9999 3 16.9687 3 11.9999C3 7.03115 7.03134 3 12 3C16.9687 3 21 7.03115 21 11.9999C21 16.9687 16.9687 20.9999 12 20.9999Z" />
-  </Svg>
+  </SVG>
 );