uikit-react-public 0.11.13

package/lib/components/Icon/svgs/ZoomOutSvg.tsx

@@ -0,0 +1,39 @@
+import { memo } from 'react';
+
+const ZoomOutSvg = ({ ...props }) => {
+  const { title, ...rest } = props;
+
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth={2}
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      {...rest}
+    >
+      {title && <title>{title}</title>}
+      <circle
+        cx='11'
+        cy='11'
+        r='8'
+      ></circle>
+      <line
+        x1='21'
+        y1='21'
+        x2='16.65'
+        y2='16.65'
+      ></line>
+      <line
+        x1='8'
+        y1='11'
+        x2='14'
+        y2='11'
+      ></line>
+    </svg>
+  );
+};
+
+export default memo(ZoomOutSvg);

package/lib/components/Icon/svgs/internal/EmptySvg.tsx

@@ -0,0 +1,23 @@
+import { memo } from 'react';
+
+const EmptySvg = ({ ...props }) => {
+  const { title, children, ...rest } = props;
+
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      {...rest}
+    >
+      {title && <title>{title}</title>}
+      {children}
+    </svg>
+  );
+};
+
+export default memo(EmptySvg);

package/lib/components/Icon/svgs/social/FacebookSvg.tsx

@@ -0,0 +1,18 @@
+import { memo } from 'react';
+
+const FacebookSvg = ({ ...props }) => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      fill='currentColor'
+      {...props}
+    >
+      {props.title && <title>{props.title}</title>}
+
+      <path d='M24 12.0733C24 5.40541 18.6274 0 12 0C5.37258 0 0 5.40541 0 12.0733C0 18.0994 4.3882 23.0943 10.125 24V15.5633H7.07812V12.0733H10.125V9.41343C10.125 6.38755 11.9166 4.71615 14.6576 4.71615C15.9705 4.71615 17.3438 4.95195 17.3438 4.95195V7.92313H15.8306C14.34 7.92313 13.875 8.85386 13.875 9.80864V12.0733H17.2031L16.6711 15.5633H13.875V24C19.6118 23.0943 24 18.0994 24 12.0733Z' />
+    </svg>
+  );
+};
+
+export default memo(FacebookSvg);

package/lib/components/Icon/svgs/social/FlickrSvg.tsx

@@ -0,0 +1,19 @@
+import { memo } from 'react';
+
+const FlickrSvg = ({ ...props }) => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      fill='currentColor'
+      {...props}
+    >
+      {props.title && <title>{props.title}</title>}
+
+      <path d='M11 12C11 14.7614 8.76142 17 6 17C3.23858 17 1 14.7614 1 12C1 9.23858 3.23858 7 6 7C8.76142 7 11 9.23858 11 12Z' />
+      <path d='M23 12C23 14.7614 20.7614 17 18 17C15.2386 17 13 14.7614 13 12C13 9.23858 15.2386 7 18 7C20.7614 7 23 9.23858 23 12Z' />
+    </svg>
+  );
+};
+
+export default memo(FlickrSvg);

package/lib/components/Icon/svgs/social/InstagramSvg.tsx

@@ -0,0 +1,19 @@
+import { memo } from 'react';
+
+const InstagramSvg = ({ ...props }) => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      fill='currentColor'
+      {...props}
+    >
+      {props.title && <title>{props.title}</title>}
+
+      <path d='M11.9987 7.97012C9.77942 7.97012 7.97004 9.77951 7.97004 11.9987C7.97004 14.218 9.77942 16.0274 11.9987 16.0274C14.2179 16.0274 16.0273 14.218 16.0273 11.9987C16.0273 9.77951 14.2179 7.97012 11.9987 7.97012Z' />
+      <path d='M22.915 7.4603C22.8351 5.7009 22.4252 4.14143 21.1356 2.85187C19.8561 1.5723 18.2966 1.17244 16.5372 1.08247C14.7178 0.972509 9.27968 0.972509 7.4603 1.08247C5.7009 1.16244 4.14143 1.5723 2.85187 2.85187C1.56231 4.13143 1.17244 5.7009 1.08247 7.4603C0.972509 9.27968 0.972509 14.7178 1.08247 16.5372C1.16244 18.2966 1.5723 19.8561 2.86187 21.1456C4.15143 22.4352 5.71089 22.8351 7.47029 22.925C9.28967 23.025 14.7278 23.025 16.5372 22.925C18.2966 22.8451 19.8561 22.4352 21.1456 21.1456C22.4352 19.8561 22.8351 18.2966 22.925 16.5372C23.025 14.7178 23.025 9.27968 22.925 7.47029L22.915 7.4603ZM11.9987 18.1966C8.56992 18.1966 5.80086 15.4276 5.80086 11.9987C5.80086 8.56992 8.56992 5.80086 11.9987 5.80086C15.4276 5.80086 18.1966 8.56992 18.1966 11.9987C18.1966 15.4276 15.4276 18.1966 11.9987 18.1966ZM18.4565 6.99046C17.6568 6.99046 17.007 6.34068 17.007 5.54095C17.007 4.74122 17.6568 4.09145 18.4565 4.09145C19.2563 4.09145 19.9061 4.74122 19.9061 5.54095C19.9061 6.34068 19.2563 6.99046 18.4565 6.99046Z' />
+    </svg>
+  );
+};
+
+export default memo(InstagramSvg);

package/lib/components/Icon/svgs/social/SoundcloudSvg.tsx

@@ -0,0 +1,22 @@
+import { memo } from 'react';
+
+const SoundcloudSvg = ({ ...props }) => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      fill='currentColor'
+      {...props}
+    >
+      {props.title && <title>{props.title}</title>}
+
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M23.9869 14.6691C23.8888 16.4909 22.3837 17.92 20.5841 17.8873H12.4043C12.0335 17.8873 11.7281 17.5709 11.7281 17.2V8.25455C11.7172 7.93818 11.8917 7.65455 12.1753 7.52364C12.1862 7.53455 12.9387 7 14.5202 7C15.4908 7 16.4397 7.26182 17.2686 7.76364C18.5773 8.54909 19.5044 9.85818 19.8316 11.3636C20.1152 11.2873 20.4096 11.2436 20.7041 11.2436C21.5875 11.2436 22.4491 11.6036 23.0708 12.2473C23.6924 12.8909 24.0305 13.7636 23.9978 14.6691H23.9869ZM10.7138 8.82182C10.9647 11.8545 11.1392 14.6145 10.7138 17.6473C10.7029 17.7782 10.583 17.8873 10.4521 17.8873C10.3212 17.8873 10.2012 17.7782 10.1903 17.6473C9.7977 14.6473 9.96129 11.8327 10.1903 8.82182C10.1794 8.72364 10.223 8.61455 10.3103 8.56C10.3975 8.50545 10.5066 8.50545 10.5939 8.56C10.6811 8.61455 10.7247 8.71273 10.7138 8.82182ZM9.05606 17.6473C9.03425 17.7891 8.91428 17.8873 8.7834 17.8873C8.65252 17.8873 8.53255 17.7891 8.51074 17.6473C8.21627 15.0618 8.21627 12.4545 8.51074 9.86909C8.52165 9.72727 8.64162 9.61818 8.7834 9.61818C8.92518 9.61818 9.04515 9.72727 9.05606 9.86909C9.38325 12.4545 9.38325 15.0727 9.05606 17.6473ZM7.39829 9.59636C7.67095 12.3782 7.79092 14.8655 7.39829 17.6364C7.39829 17.7891 7.27832 17.9091 7.13653 17.9091C6.99475 17.9091 6.87478 17.7891 6.87478 17.6364C6.49306 14.8982 6.62393 12.3345 6.87478 9.59636C6.88569 9.45455 7.00566 9.35636 7.13653 9.35636C7.26741 9.35636 7.38738 9.46545 7.39829 9.59636ZM5.74051 17.6473C5.72961 17.7891 5.60964 17.8982 5.46785 17.8982C5.32607 17.8982 5.21701 17.7891 5.19519 17.6473C4.88981 15.2364 4.88981 12.7927 5.19519 10.3818C5.19519 10.2291 5.31516 10.0982 5.46785 10.0982C5.62054 10.0982 5.74051 10.2182 5.74051 10.3818C6.06771 12.7927 6.0568 15.2364 5.74051 17.6473ZM4.08274 12.1927C4.49718 14.08 4.31178 15.7382 4.07184 17.6582C4.05002 17.7891 3.94096 17.8764 3.81008 17.8764C3.6792 17.8764 3.57014 17.7782 3.55923 17.6582C3.3302 15.76 3.14479 14.0582 3.54833 12.1927C3.54833 12.04 3.6683 11.92 3.82099 11.92C3.97368 11.92 4.09365 12.04 4.09365 12.1927H4.08274ZM2.42497 11.9091C2.80669 13.84 2.68672 15.4764 2.42497 17.4073C2.39225 17.6909 1.91237 17.6909 1.87965 17.4073C1.63971 15.4982 1.51974 13.8182 1.87965 11.9091C1.89056 11.7673 2.02143 11.6582 2.16322 11.6582C2.305 11.6582 2.42497 11.7673 2.44678 11.9091H2.42497ZM0.75629 12.8473C1.15983 14.1236 1.01804 15.1709 0.745383 16.48C0.734477 16.6109 0.614506 16.72 0.48363 16.72C0.352753 16.72 0.232782 16.6218 0.221876 16.48C-0.0180648 15.1927 -0.116222 14.1345 0.200063 12.8473C0.21097 12.7055 0.33094 12.5964 0.48363 12.5964C0.636319 12.5964 0.745383 12.7055 0.767196 12.8473H0.75629Z'
+      />
+    </svg>
+  );
+};
+
+export default memo(SoundcloudSvg);

package/lib/components/Icon/svgs/social/TiktokSvg.tsx

@@ -0,0 +1,18 @@
+import { memo } from 'react';
+
+const TiktokSvg = ({ ...props }) => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      fill='currentColor'
+      {...props}
+    >
+      {props.title && <title>{props.title}</title>}
+
+      <path d='M18.4255 6.20955C17.3086 5.47455 16.4973 4.29091 16.2491 2.91636C16.1918 2.62045 16.1632 2.315 16.1632 2H12.5836V16.4709C12.5168 18.0936 11.1995 19.3918 9.57682 19.3918C9.07091 19.3918 8.60318 19.2677 8.18318 19.0386C7.22864 18.5327 6.57 17.5209 6.57 16.3564C6.57 14.6859 7.91591 13.3209 9.57682 13.3209C9.88227 13.3209 10.1782 13.3686 10.4645 13.4641V9.77954C10.1782 9.74136 9.88227 9.71273 9.57682 9.71273C5.94955 9.71273 3 12.6909 3 16.3564C3 18.6091 4.11682 20.5945 5.80636 21.7973C6.87545 22.5514 8.17364 23 9.57682 23C13.2041 23 16.1536 20.0218 16.1536 16.3564V9.01591C17.5568 10.0277 19.275 10.6291 21.1268 10.6291V7.02091C20.1245 7.02091 19.1986 6.725 18.4159 6.20955H18.4255Z' />
+    </svg>
+  );
+};
+
+export default memo(TiktokSvg);

package/lib/components/Icon/svgs/social/XSvg.tsx

@@ -0,0 +1,18 @@
+import { memo } from 'react';
+
+const XSvg = ({ ...props }) => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      fill='currentColor'
+      {...props}
+    >
+      {props.title && <title>{props.title}</title>}
+
+      <path d='M13.6468 10.4686L20.9321 2H19.2057L12.8799 9.3532L7.82741 2H2L9.6403 13.1193L2 22H3.72649L10.4068 14.2348L15.7425 22H21.5699L13.6464 10.4686H13.6468ZM11.2821 13.2173L10.508 12.1101L4.34857 3.29968H7.00037L11.9711 10.4099L12.7452 11.5172L19.2066 20.7594H16.5548L11.2821 13.2177V13.2173Z' />
+    </svg>
+  );
+};
+
+export default memo(XSvg);

package/lib/components/Icon/svgs/social/YoutubeSvg.tsx

@@ -0,0 +1,18 @@
+import { memo } from 'react';
+
+const YoutubeSvg = ({ ...props }) => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      fill='currentColor'
+      {...props}
+    >
+      {props.title && <title>{props.title}</title>}
+
+      <path d='M22.5402 6.40849C22.2903 5.45909 21.5407 4.71955 20.5911 4.45971C18.8719 4 11.995 4 11.995 4C11.995 4 5.11813 4 3.40891 4.45971C2.45934 4.70956 1.71967 5.45909 1.45979 6.40849C1 8.12742 1 12.005 1 12.005C1 12.005 1 15.8826 1.45979 17.5915C1.70968 18.5409 2.45934 19.2804 3.40891 19.5403C5.11813 20 11.995 20 11.995 20C11.995 20 18.8719 20 20.5911 19.5403C21.5407 19.2904 22.2803 18.5409 22.5402 17.5915C23 15.8826 23 12.005 23 12.005C23 12.005 23 8.12742 22.5402 6.40849ZM10.0059 15.5028V8.50718L16.0032 12.005L10.0059 15.5028Z' />
+    </svg>
+  );
+};
+
+export default memo(YoutubeSvg);

package/lib/components/Icon/svgs/social/reference-from-figma/Facebook-full.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1550_17246)">
+<path d="M24 12.0733C24 5.40541 18.6274 0 12 0C5.37258 0 0 5.40541 0 12.0733C0 18.0994 4.3882 23.0943 10.125 24V15.5633H7.07812V12.0733H10.125V9.41343C10.125 6.38755 11.9166 4.71615 14.6576 4.71615C15.9705 4.71615 17.3438 4.95195 17.3438 4.95195V7.92313H15.8306C14.34 7.92313 13.875 8.85386 13.875 9.80864V12.0733H17.2031L16.6711 15.5633H13.875V24C19.6118 23.0943 24 18.0994 24 12.0733Z" fill="#1A1A1A"/>
+</g>
+<defs>
+<clipPath id="clip0_1550_17246">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/lib/components/Icon/svgs/social/reference-from-figma/Facebook-line.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 2H15C13.6739 2 12.4021 2.52678 11.4645 3.46447C10.5268 4.40215 10 5.67392 10 7V10H7V14H10V22H14V14H17L18 10H14V7C14 6.73478 14.1054 6.48043 14.2929 6.29289C14.4804 6.10536 14.7348 6 15 6H18V2Z" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/lib/components/Icon/svgs/social/reference-from-figma/Flickr.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 12C11 14.7614 8.76142 17 6 17C3.23858 17 1 14.7614 1 12C1 9.23858 3.23858 7 6 7C8.76142 7 11 9.23858 11 12Z" fill="#1A1A1A"/>
+<path d="M23 12C23 14.7614 20.7614 17 18 17C15.2386 17 13 14.7614 13 12C13 9.23858 15.2386 7 18 7C20.7614 7 23 9.23858 23 12Z" fill="#1A1A1A"/>
+</svg>

package/lib/components/Icon/svgs/social/reference-from-figma/Git-line.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1544_10594)">
+<path d="M9 19C4 20.5 4 16.5 2 16M16 22V18.13C16.0375 17.6532 15.9731 17.1738 15.811 16.7238C15.6489 16.2738 15.3929 15.8634 15.06 15.52C18.2 15.17 21.5 13.98 21.5 8.52C21.4997 7.12383 20.9627 5.7812 20 4.77C20.4559 3.54851 20.4236 2.19835 19.91 0.999999C19.91 0.999999 18.73 0.649999 16 2.48C13.708 1.85882 11.292 1.85882 9 2.48C6.27 0.649999 5.09 0.999999 5.09 0.999999C4.57638 2.19835 4.54414 3.54851 5 4.77C4.03013 5.7887 3.49252 7.14346 3.5 8.55C3.5 13.97 6.8 15.16 9.94 15.55C9.611 15.89 9.35726 16.2954 9.19531 16.7399C9.03335 17.1844 8.96681 17.6581 9 18.13V22" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1544_10594">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/lib/components/Icon/svgs/social/reference-from-figma/Instagram-full.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9987 7.97012C9.77942 7.97012 7.97004 9.77951 7.97004 11.9987C7.97004 14.218 9.77942 16.0274 11.9987 16.0274C14.2179 16.0274 16.0273 14.218 16.0273 11.9987C16.0273 9.77951 14.2179 7.97012 11.9987 7.97012Z" fill="#1A1A1A"/>
+<path d="M22.915 7.4603C22.8351 5.7009 22.4252 4.14143 21.1356 2.85187C19.8561 1.5723 18.2966 1.17244 16.5372 1.08247C14.7178 0.972509 9.27968 0.972509 7.4603 1.08247C5.7009 1.16244 4.14143 1.5723 2.85187 2.85187C1.56231 4.13143 1.17244 5.7009 1.08247 7.4603C0.972509 9.27968 0.972509 14.7178 1.08247 16.5372C1.16244 18.2966 1.5723 19.8561 2.86187 21.1456C4.15143 22.4352 5.71089 22.8351 7.47029 22.925C9.28967 23.025 14.7278 23.025 16.5372 22.925C18.2966 22.8451 19.8561 22.4352 21.1456 21.1456C22.4352 19.8561 22.8351 18.2966 22.925 16.5372C23.025 14.7178 23.025 9.27968 22.925 7.47029L22.915 7.4603ZM11.9987 18.1966C8.56992 18.1966 5.80086 15.4276 5.80086 11.9987C5.80086 8.56992 8.56992 5.80086 11.9987 5.80086C15.4276 5.80086 18.1966 8.56992 18.1966 11.9987C18.1966 15.4276 15.4276 18.1966 11.9987 18.1966ZM18.4565 6.99046C17.6568 6.99046 17.007 6.34068 17.007 5.54095C17.007 4.74122 17.6568 4.09145 18.4565 4.09145C19.2563 4.09145 19.9061 4.74122 19.9061 5.54095C19.9061 6.34068 19.2563 6.99046 18.4565 6.99046Z" fill="#1A1A1A"/>
+</svg>

package/lib/components/Icon/svgs/social/reference-from-figma/Instagram-line.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1544_12560)">
+<path d="M17 2H7C4.23858 2 2 4.23858 2 7V17C2 19.7614 4.23858 22 7 22H17C19.7614 22 22 19.7614 22 17V7C22 4.23858 19.7614 2 17 2Z" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 11.37C16.1234 12.2022 15.9812 13.0522 15.5937 13.799C15.2062 14.5458 14.5931 15.1514 13.8416 15.5297C13.0901 15.9079 12.2384 16.0396 11.4077 15.9059C10.5771 15.7723 9.80971 15.3801 9.21479 14.7852C8.61987 14.1902 8.22768 13.4229 8.09402 12.5922C7.96035 11.7615 8.09202 10.9099 8.47028 10.1584C8.84854 9.40685 9.45414 8.79374 10.2009 8.40624C10.9477 8.01874 11.7977 7.87658 12.63 8C13.4789 8.12588 14.2648 8.52146 14.8716 9.1283C15.4785 9.73515 15.8741 10.5211 16 11.37Z" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1544_12560">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/lib/components/Icon/svgs/social/reference-from-figma/Linkedin-full.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.5545 2H3.50909C2.69091 2 2 2.64545 2 3.43636V20.5636C2 21.3545 2.45455 22 3.27273 22H20.3091C21.1273 22 22 21.3545 22 20.5636V3.43636C22 2.64545 21.3636 2 20.5545 2ZM9.61818 9.61818H12.3091V10.9909H12.3364C12.7455 10.2545 13.9636 9.5 15.4545 9.5C18.3273 9.5 19.1364 11.0273 19.1364 13.8545V19.1364H16.2818V14.3727C16.2818 13.1091 15.7727 11.9909 14.5909 11.9909C13.1545 11.9909 12.4727 12.9636 12.4727 14.5636V19.1364H9.61818V9.61818ZM4.85455 19.1455H7.70909V9.61818H4.85455V19.1455ZM8.07273 6.28182C8.07273 7.27273 7.27273 8.06364 6.29091 8.06364C5.30909 8.06364 4.50909 7.26364 4.50909 6.28182C4.50909 5.3 5.30909 4.5 6.29091 4.5C7.27273 4.5 8.07273 5.3 8.07273 6.28182Z" fill="#1A1A1A"/>
+</svg>

package/lib/components/Icon/svgs/social/reference-from-figma/Linkeding-line.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 8C17.5913 8 19.1174 8.63214 20.2426 9.75736C21.3679 10.8826 22 12.4087 22 14V21H18V14C18 13.4696 17.7893 12.9609 17.4142 12.5858C17.0391 12.2107 16.5304 12 16 12C15.4696 12 14.9609 12.2107 14.5858 12.5858C14.2107 12.9609 14 13.4696 14 14V21H10V14C10 12.4087 10.6321 10.8826 11.7574 9.75736C12.8826 8.63214 14.4087 8 16 8V8Z" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 9H2V21H6V9Z" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 6C5.10457 6 6 5.10457 6 4C6 2.89543 5.10457 2 4 2C2.89543 2 2 2.89543 2 4C2 5.10457 2.89543 6 4 6Z" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/lib/components/Icon/svgs/social/reference-from-figma/Slack-line.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.5 10C13.67 10 13 9.33 13 8.5V3.5C13 2.67 13.67 2 14.5 2C15.33 2 16 2.67 16 3.5V8.5C16 9.33 15.33 10 14.5 10Z" stroke="#1A1A1A" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.5 10H19V8.5C19 7.67 19.67 7 20.5 7C21.33 7 22 7.67 22 8.5C22 9.33 21.33 10 20.5 10Z" stroke="#1A1A1A" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.5 14C10.33 14 11 14.67 11 15.5V20.5C11 21.33 10.33 22 9.5 22C8.67 22 8 21.33 8 20.5V15.5C8 14.67 8.67 14 9.5 14Z" stroke="#1A1A1A" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.5 14H5V15.5C5 16.33 4.33 17 3.5 17C2.67 17 2 16.33 2 15.5C2 14.67 2.67 14 3.5 14Z" stroke="#1A1A1A" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 14.5C14 13.67 14.67 13 15.5 13H20.5C21.33 13 22 13.67 22 14.5C22 15.33 21.33 16 20.5 16H15.5C14.67 16 14 15.33 14 14.5Z" stroke="#1A1A1A" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.5 19H14V20.5C14 21.33 14.67 22 15.5 22C16.33 22 17 21.33 17 20.5C17 19.67 16.33 19 15.5 19Z" stroke="#1A1A1A" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 9.5C10 8.67 9.33 8 8.5 8H3.5C2.67 8 2 8.67 2 9.5C2 10.33 2.67 11 3.5 11H8.5C9.33 11 10 10.33 10 9.5Z" stroke="#1A1A1A" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.5 5H10V3.5C10 2.67 9.33 2 8.5 2C7.67 2 7 2.67 7 3.5C7 4.33 7.67 5 8.5 5Z" stroke="#1A1A1A" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/lib/components/Icon/svgs/social/reference-from-figma/Soundcloud.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.9869 14.6691C23.8888 16.4909 22.3837 17.92 20.5841 17.8873H12.4043C12.0335 17.8873 11.7281 17.5709 11.7281 17.2V8.25455C11.7172 7.93818 11.8917 7.65455 12.1753 7.52364C12.1862 7.53455 12.9387 7 14.5202 7C15.4908 7 16.4397 7.26182 17.2686 7.76364C18.5773 8.54909 19.5044 9.85818 19.8316 11.3636C20.1152 11.2873 20.4096 11.2436 20.7041 11.2436C21.5875 11.2436 22.4491 11.6036 23.0708 12.2473C23.6924 12.8909 24.0305 13.7636 23.9978 14.6691H23.9869ZM10.7138 8.82182C10.9647 11.8545 11.1392 14.6145 10.7138 17.6473C10.7029 17.7782 10.583 17.8873 10.4521 17.8873C10.3212 17.8873 10.2012 17.7782 10.1903 17.6473C9.7977 14.6473 9.96129 11.8327 10.1903 8.82182C10.1794 8.72364 10.223 8.61455 10.3103 8.56C10.3975 8.50545 10.5066 8.50545 10.5939 8.56C10.6811 8.61455 10.7247 8.71273 10.7138 8.82182ZM9.05606 17.6473C9.03425 17.7891 8.91428 17.8873 8.7834 17.8873C8.65252 17.8873 8.53255 17.7891 8.51074 17.6473C8.21627 15.0618 8.21627 12.4545 8.51074 9.86909C8.52165 9.72727 8.64162 9.61818 8.7834 9.61818C8.92518 9.61818 9.04515 9.72727 9.05606 9.86909C9.38325 12.4545 9.38325 15.0727 9.05606 17.6473ZM7.39829 9.59636C7.67095 12.3782 7.79092 14.8655 7.39829 17.6364C7.39829 17.7891 7.27832 17.9091 7.13653 17.9091C6.99475 17.9091 6.87478 17.7891 6.87478 17.6364C6.49306 14.8982 6.62393 12.3345 6.87478 9.59636C6.88569 9.45455 7.00566 9.35636 7.13653 9.35636C7.26741 9.35636 7.38738 9.46545 7.39829 9.59636ZM5.74051 17.6473C5.72961 17.7891 5.60964 17.8982 5.46785 17.8982C5.32607 17.8982 5.21701 17.7891 5.19519 17.6473C4.88981 15.2364 4.88981 12.7927 5.19519 10.3818C5.19519 10.2291 5.31516 10.0982 5.46785 10.0982C5.62054 10.0982 5.74051 10.2182 5.74051 10.3818C6.06771 12.7927 6.0568 15.2364 5.74051 17.6473ZM4.08274 12.1927C4.49718 14.08 4.31178 15.7382 4.07184 17.6582C4.05002 17.7891 3.94096 17.8764 3.81008 17.8764C3.6792 17.8764 3.57014 17.7782 3.55923 17.6582C3.3302 15.76 3.14479 14.0582 3.54833 12.1927C3.54833 12.04 3.6683 11.92 3.82099 11.92C3.97368 11.92 4.09365 12.04 4.09365 12.1927H4.08274ZM2.42497 11.9091C2.80669 13.84 2.68672 15.4764 2.42497 17.4073C2.39225 17.6909 1.91237 17.6909 1.87965 17.4073C1.63971 15.4982 1.51974 13.8182 1.87965 11.9091C1.89056 11.7673 2.02143 11.6582 2.16322 11.6582C2.305 11.6582 2.42497 11.7673 2.44678 11.9091H2.42497ZM0.75629 12.8473C1.15983 14.1236 1.01804 15.1709 0.745383 16.48C0.734477 16.6109 0.614506 16.72 0.48363 16.72C0.352753 16.72 0.232782 16.6218 0.221876 16.48C-0.0180648 15.1927 -0.116222 14.1345 0.200063 12.8473C0.21097 12.7055 0.33094 12.5964 0.48363 12.5964C0.636319 12.5964 0.745383 12.7055 0.767196 12.8473H0.75629Z" fill="#1A1A1A"/>
+</svg>

package/lib/components/Icon/svgs/social/reference-from-figma/X.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.6468 10.4686L20.9321 2H19.2057L12.8799 9.3532L7.82741 2H2L9.6403 13.1193L2 22H3.72649L10.4068 14.2348L15.7425 22H21.5699L13.6464 10.4686H13.6468ZM11.2821 13.2173L10.508 12.1101L4.34857 3.29968H7.00037L11.9711 10.4099L12.7452 11.5172L19.2066 20.7594H16.5548L11.2821 13.2177V13.2173Z" fill="#1A1A1A"/>
+</svg>

package/lib/components/Icon/svgs/social/reference-from-figma/tok-tok.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.4255 6.20955C17.3086 5.47455 16.4973 4.29091 16.2491 2.91636C16.1918 2.62045 16.1632 2.315 16.1632 2H12.5836V16.4709C12.5168 18.0936 11.1995 19.3918 9.57682 19.3918C9.07091 19.3918 8.60318 19.2677 8.18318 19.0386C7.22864 18.5327 6.57 17.5209 6.57 16.3564C6.57 14.6859 7.91591 13.3209 9.57682 13.3209C9.88227 13.3209 10.1782 13.3686 10.4645 13.4641V9.77954C10.1782 9.74136 9.88227 9.71273 9.57682 9.71273C5.94955 9.71273 3 12.6909 3 16.3564C3 18.6091 4.11682 20.5945 5.80636 21.7973C6.87545 22.5514 8.17364 23 9.57682 23C13.2041 23 16.1536 20.0218 16.1536 16.3564V9.01591C17.5568 10.0277 19.275 10.6291 21.1268 10.6291V7.02091C20.1245 7.02091 19.1986 6.725 18.4159 6.20955H18.4255Z" fill="#1A1A1A"/>
+</svg>

package/lib/components/Icon/svgs/social/reference-from-figma/you-tube.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.5402 6.40849C22.2903 5.45909 21.5407 4.71955 20.5911 4.45971C18.8719 4 11.995 4 11.995 4C11.995 4 5.11813 4 3.40891 4.45971C2.45934 4.70956 1.71967 5.45909 1.45979 6.40849C1 8.12742 1 12.005 1 12.005C1 12.005 1 15.8826 1.45979 17.5915C1.70968 18.5409 2.45934 19.2804 3.40891 19.5403C5.11813 20 11.995 20 11.995 20C11.995 20 18.8719 20 20.5911 19.5403C21.5407 19.2904 22.2803 18.5409 22.5402 17.5915C23 15.8826 23 12.005 23 12.005C23 12.005 23 8.12742 22.5402 6.40849ZM10.0059 15.5028V8.50718L16.0032 12.005L10.0059 15.5028Z" fill="#1A1A1A"/>
+</svg>

package/lib/components/IconButton/IconButton.stories.tsx

@@ -0,0 +1,59 @@
+import { ComponentType } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import IconButton from './IconButton';
+import Icon from '../Icon/Icon';
+
+const meta: Meta = {
+  title: 'Components/Ready to use/IconButton',
+  component: IconButton,
+  argTypes: {
+    icon: {
+      control: 'select',
+      options: Icon.getIconNames(),
+    },
+    iconSize: {
+      control: 'select',
+      options: [16, 24, 32],
+      defaultValue: 24,
+    },
+  },
+  args: {
+    icon: Icon.getIconNames()[0],
+    iconSize: 24,
+    title: 'IconButton',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: '(Pick an icon to view)',
+  render: (args) => {
+    const IconComponent = Icon[
+      args.icon as keyof typeof Icon
+    ] as ComponentType<{ size: number }>;
+    return (
+      <>
+        <IconButton>
+          <IconComponent size={args.iconSize} />
+        </IconButton>
+      </>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: (args) => {
+    const IconComponent = Icon[
+      args.icon as keyof typeof Icon
+    ] as ComponentType<{ size: number }>;
+    return (
+      <>
+        <IconButton disabled>
+          <IconComponent size={args.iconSize} />
+        </IconButton>
+      </>
+    );
+  },
+};

package/lib/components/IconButton/IconButton.tsx

@@ -0,0 +1,71 @@
+import { memo, ButtonHTMLAttributes, forwardRef } from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+import marginsStyle, { MarginProps } from '../common/marginsStyle';
+
+export const NAME = 'ucl-uikit-icon-button';
+
+export interface IconButtonBaseProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  testId?: string;
+}
+
+export type IconButtonProps = IconButtonBaseProps & MarginProps;
+
+export type Ref = HTMLButtonElement;
+
+const IconButton = forwardRef<Ref, IconButtonProps>(
+  ({ testId = NAME, className, children, ...props }, ref) => {
+    const [theme] = useTheme();
+
+    const baseStyle = css`
+      background-color: transparent;
+      border: none;
+      padding: 0;
+      vertical-align: middle;
+      outline: none;
+      cursor: pointer;
+      color: inherit;
+    `;
+
+    const hoverStyle = css`
+      &:hover {
+        color: ${theme.color.interaction.blue80};
+      }
+    `;
+
+    const focusStyle = css`
+      &:focus-visible {
+        box-shadow: ${theme.boxShadow.focus};
+      }
+    `;
+
+    const disabledStyle = css`
+      color: ${theme.color.text.disabled};
+      cursor: not-allowed;
+    `;
+
+    const style = cx(
+      NAME,
+      baseStyle,
+      marginsStyle(props, theme),
+      !props.disabled && hoverStyle,
+      !props.disabled && focusStyle,
+      props.disabled && disabledStyle,
+      className
+    );
+
+    return (
+      <button
+        ref={ref}
+        className={style}
+        data-testid={testId}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+
+export default memo(IconButton);

package/lib/components/IconButton/__tests__/IconButton.test.tsx

@@ -0,0 +1,110 @@
+import { describe, expect, test, vitest } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import IconButton from '../IconButton';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+import { Icon } from '../../';
+
+describe('IconButton', () => {
+  // Snapshot tests
+
+  test('snapshot: no props', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <IconButton>
+          <Icon.Check />
+        </IconButton>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: testId prop', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <IconButton testId='abc'>
+          <Icon.Check />
+        </IconButton>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: disabled prop', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <IconButton disabled>
+          <Icon.Check />
+        </IconButton>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  // Interaction tests
+
+  test('click', async () => {
+    const testClick = vitest.fn();
+    render(
+      <ThemeContextProvider>
+        <IconButton onClick={testClick}>
+          <Icon.Check />
+        </IconButton>
+      </ThemeContextProvider>
+    );
+    const iconButton = screen.getByRole('button') as HTMLButtonElement;
+    expect(testClick).not.toBeCalled();
+    await iconButton.click();
+    expect(testClick).toBeCalled();
+  });
+
+  test('Can be found via default testId', () => {
+    const testClick = vitest.fn();
+    render(
+      <ThemeContextProvider>
+        <IconButton onClick={testClick}>
+          <Icon.Check />
+        </IconButton>
+      </ThemeContextProvider>
+    );
+    const iconButton = screen.getByTestId(
+      'ucl-uikit-icon-button'
+    ) as HTMLButtonElement;
+    expect(iconButton).toBeInTheDocument();
+  });
+
+  test('Can be found via custom testId', () => {
+    const testClick = vitest.fn();
+    render(
+      <ThemeContextProvider>
+        <IconButton
+          testId='abc'
+          onClick={testClick}
+        >
+          <Icon.Smile />
+        </IconButton>
+      </ThemeContextProvider>
+    );
+    const iconButton = screen.getByTestId('abc') as HTMLButtonElement;
+    expect(iconButton).toBeInTheDocument();
+  });
+
+  test('Cannot be clicked when disabled', async () => {
+    const testClick = vitest.fn();
+    render(
+      <ThemeContextProvider>
+        <IconButton
+          disabled
+          onClick={testClick}
+        >
+          <Icon.Check />
+        </IconButton>
+      </ThemeContextProvider>
+    );
+    const iconButton = screen.getByRole('button') as HTMLButtonElement;
+    expect(testClick).not.toBeCalled();
+    await iconButton.click();
+    expect(testClick).not.toBeCalled();
+  });
+
+  // TODO: test hover, focus, active styles
+});

package/lib/components/IconButton/__tests__/__snapshots__/IconButton.test.tsx.snap

@@ -0,0 +1,77 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`IconButton > snapshot: disabled prop 1`] = `
+<button
+  class="ucl-uikit-icon-button css-gno5xt"
+  data-testid="ucl-uikit-icon-button"
+  disabled=""
+>
+  <svg
+    class="ucl-uikit-icon css-148hpxb"
+    data-testid="ucl-uikit-icon"
+    fill="none"
+    height="24"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="3"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <polyline
+      points="20 6 9 17 4 12"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButton > snapshot: no props 1`] = `
+<button
+  class="ucl-uikit-icon-button css-14jzv8g"
+  data-testid="ucl-uikit-icon-button"
+>
+  <svg
+    class="ucl-uikit-icon css-148hpxb"
+    data-testid="ucl-uikit-icon"
+    fill="none"
+    height="24"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="3"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <polyline
+      points="20 6 9 17 4 12"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButton > snapshot: testId prop 1`] = `
+<button
+  class="ucl-uikit-icon-button css-14jzv8g"
+  data-testid="abc"
+>
+  <svg
+    class="ucl-uikit-icon css-148hpxb"
+    data-testid="ucl-uikit-icon"
+    fill="none"
+    height="24"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="3"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <polyline
+      points="20 6 9 17 4 12"
+    />
+  </svg>
+</button>
+`;

package/lib/components/IconButton/index.ts

@@ -0,0 +1,2 @@
+export { default } from './IconButton';
+export type { IconButtonProps } from './IconButton';