kahuna-base-react-components 1.0.6 → 1.1.0

package/src/assets/fonts/Inter/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/src/assets/fonts/Inter/README.txt

@@ -0,0 +1,72 @@
+Inter Variable Font
+===================
+
+This download contains Inter as both a variable font and static fonts.
+
+Inter is a variable font with these axes:
+  slnt
+  wght
+
+This means all the styles are contained in a single file:
+  Inter-VariableFont_slnt,wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Inter:
+  static/Inter-Thin.ttf
+  static/Inter-ExtraLight.ttf
+  static/Inter-Light.ttf
+  static/Inter-Regular.ttf
+  static/Inter-Medium.ttf
+  static/Inter-SemiBold.ttf
+  static/Inter-Bold.ttf
+  static/Inter-ExtraBold.ttf
+  static/Inter-Black.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.

package/src/assets/kahuna-text.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="77" height="16" viewBox="0 0 77 16" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M0.707764 15.8631V0H3.28184V8.18083L10.4681 0H13.6018L7.84865 6.66212L14.0272 15.8631H10.9152L5.99013 8.58845L3.28184 11.6708V15.8631H0.707764ZM33.2155 4.12439C35.7679 4.12439 37.8495 5.52913 37.8495 9.40476V9.40579V15.8641H35.4313V9.6096C35.4313 7.41051 34.468 6.23254 32.6776 6.23254C30.7747 6.23254 29.611 7.66031 29.611 9.99423V15.8631H27.1929V0H29.611V5.93782C30.3276 4.9407 31.4241 4.12439 33.2155 4.12439ZM58.5928 4.12439C61.1224 4.12439 63.204 5.52913 63.204 9.40476V15.8631H60.7642V9.60857C60.7642 7.40944 59.8462 6.2315 58.0331 6.2315C56.1085 6.2315 54.9666 7.65928 54.9666 10.0162V15.8631H52.5484V4.26025H54.6527L54.9212 5.77893C55.6377 4.87172 56.7342 4.12439 58.5928 4.12439ZM75.8007 13.733H76.2922V15.8631H75.016C73.4486 15.8631 72.9117 15.1607 72.9117 14.0047C72.1508 15.1827 70.9871 15.9989 69.1286 15.9989C66.6216 15.9989 64.8756 14.7531 64.8756 12.5999C64.8756 10.22 66.5772 8.88321 69.778 8.88321H72.666V8.18083C72.666 6.88896 71.7481 6.09564 70.159 6.09564C68.7269 6.09564 67.7636 6.77502 67.585 7.79514H65.2122C65.458 5.52913 67.3836 4.12439 70.2716 4.12439C73.3165 4.12439 75.0625 5.59812 75.0625 8.33969V12.9856C75.0625 13.5741 75.3082 13.733 75.8007 13.733ZM72.666 11.1043V10.6966H69.6665C68.1663 10.6966 67.3382 11.2631 67.3382 12.4411C67.3382 13.4162 68.1446 14.0956 69.4652 14.0956C71.4796 14.0956 72.6433 12.8947 72.666 11.1043ZM47.8267 4.26128V10.0622V10.0632C47.8267 12.4651 46.6403 13.8699 44.8717 13.8699C43.1029 13.8699 42.2078 12.7139 42.2078 10.4479V4.26128H39.7896V10.7196C39.7896 14.6851 41.8722 16 44.312 16C46.0807 16 47.1328 15.2757 47.8494 14.3914L48.1179 15.8641H50.2449V4.26128H47.8267ZM25.9559 13.733H25.4644C24.9719 13.733 24.7262 13.5751 24.7262 12.9856V8.33969C24.7262 5.59708 22.9802 4.12439 19.9353 4.12439C17.0474 4.12439 15.1217 5.52913 14.876 7.79514H17.2487C17.4273 6.77502 18.3896 6.09564 19.8228 6.09564C21.4118 6.09564 22.3297 6.88896 22.3297 8.18083V8.88321H19.4418C16.241 8.88321 14.5394 10.22 14.5394 12.5999C14.5394 14.7531 16.2854 15.9989 18.7923 15.9989C20.6498 15.9989 21.8145 15.1827 22.5755 14.0047C22.5755 15.1607 23.1123 15.8631 24.6797 15.8631H25.9559V13.733ZM22.3287 10.6966V11.1043C22.307 12.8947 21.1423 14.0956 19.1279 14.0956C17.8073 14.0956 17.0009 13.4152 17.0009 12.4411C17.0009 11.2631 17.829 10.6966 19.3292 10.6966H22.3287Z" fill="#111111"/>
+</svg>

package/src/assets/logo-gray.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="88" height="88" viewBox="0 0 88 88" fill="none">
+  <g clip-path="url(#clip0_4001_21322)">
+    <path d="M59.0563 20.0887H28.9455C27.4794 20.0887 26.29 21.2798 26.29 22.7442V65.2523C26.29 66.7201 27.4811 67.9112 28.9455 67.9112H59.0563C60.5241 67.9112 61.7118 66.7202 61.7118 65.2558V22.7442C61.7118 21.2764 60.5207 20.0887 59.0563 20.0887ZM49.7458 29.2806V60.3419C49.7458 61.6756 48.7558 62.8031 47.4307 62.975L32.8849 64.8656C31.295 65.0719 29.8857 63.8344 29.8857 62.2325V26.0562C29.8857 24.3564 31.4566 23.0948 33.1169 23.4627L47.6627 26.687C48.8778 26.9552 49.7441 28.0328 49.7441 29.2806H49.7475H49.7458Z" fill="#F3F3F3"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_4001_21322">
+      <rect width="88" height="88" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>

package/src/assets/logo-small-hovered.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
+  <rect x="4" y="4" width="40" height="40" rx="8" fill="#F7F7F7"/>
+  <path d="M30.8005 13H17.1995C16.5372 13 16 13.5479 16 14.2216V33.7768C16 34.4521 16.538 35 17.1995 35H30.8005C31.4635 35 32 34.4521 32 33.7784V14.2216C32 13.5464 31.462 13 30.8005 13ZM26.595 17.2286V31.5178C26.595 32.1314 26.1478 32.6501 25.5492 32.7292L18.9789 33.5989C18.2608 33.6938 17.6241 33.1245 17.6241 32.3876V15.7453C17.6241 14.9633 18.3337 14.3829 19.0837 14.5521L25.654 16.0354C26.2029 16.1588 26.5942 16.6545 26.5942 17.2286H26.5958H26.595Z" fill="#111111"/>
+</svg>

package/src/assets/logo-small.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
+  <g clip-path="url(#clip0_4002_7556)">
+    <rect width="48" height="48" rx="8" fill="white"/>
+    <path d="M31.6506 12H16.3494C15.6044 12 15 12.5978 15 13.3327V34.6656C15 35.4022 15.6053 36 16.3494 36H31.6506C32.3965 36 33 35.4022 33 34.6673V13.3327C33 12.596 32.3947 12 31.6506 12ZM26.9194 16.613V32.2013C26.9194 32.8706 26.4163 33.4365 25.7429 33.5227L18.3513 34.4715C17.5434 34.575 16.8272 33.954 16.8272 33.1501V14.9948C16.8272 14.1417 17.6255 13.5086 18.4692 13.6932L25.8608 15.3114C26.4783 15.4459 26.9185 15.9868 26.9185 16.613H26.9202H26.9194Z" fill="#111111"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_4002_7556">
+      <rect width="48" height="48" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>

package/src/assets/logo.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72" fill="none">
+  <g clip-path="url(#clip0_4001_25558)">
+    <path d="M68.5322 0H3.46781C1.55259 0 0 1.55259 0 3.46781V68.5322C0 70.4474 1.55259 72 3.46781 72H68.5322C70.4474 72 72 70.4474 72 68.5322V3.46781C72 1.55259 70.4474 0 68.5322 0Z" fill="#111111"/>
+    <path d="M48.3185 16.4362H23.6824C22.4829 16.4362 21.5098 17.4107 21.5098 18.6089V53.3882C21.5098 54.5892 22.4843 55.5637 23.6824 55.5637H48.3185C49.5195 55.5637 50.4912 54.5892 50.4912 53.3911V18.6089C50.4912 17.4079 49.5166 16.4362 48.3185 16.4362ZM40.7009 23.9568V49.3706C40.7009 50.4618 39.8909 51.3843 38.8066 51.525L26.9055 53.0718C25.6048 53.2406 24.4516 52.2281 24.4516 50.9175V21.3187C24.4516 19.9279 25.737 18.8957 27.0954 19.1967L38.9965 21.8348C39.9907 22.0542 40.6995 22.9359 40.6995 23.9568H40.7023H40.7009Z" fill="white"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_4001_25558">
+      <rect width="72" height="72" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>

package/src/assets/progress.svg

@@ -0,0 +1,37 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Progress">
+<g id="Rectangle 1" filter="url(#filter0_di_252_33054)">
+<rect x="6" y="6" width="16" height="16" rx="8" fill="white"/>
+<rect x="6.5" y="6.5" width="15" height="15" rx="7.5" stroke="white"/>
+</g>
+<g id="Dot" filter="url(#filter1_d_252_33054)">
+<path d="M11 14C11 12.3431 12.3431 11 14 11C15.6569 11 17 12.3431 17 14C17 15.6569 15.6569 17 14 17C12.3431 17 11 15.6569 11 14Z" fill="#B5B5B5"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_di_252_33054" x="0" y="0" width="28" height="28" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="3"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.105882 0 0 0 0 0.109804 0 0 0 0 0.113725 0 0 0 0.06 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_252_33054"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_252_33054" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-3"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.894118 0 0 0 0 0.898039 0 0 0 0 0.905882 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_252_33054"/>
+</filter>
+<filter id="filter1_d_252_33054" x="7" y="9" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.105882 0 0 0 0 0.109804 0 0 0 0 0.113725 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_252_33054"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_252_33054" result="shape"/>
+</filter>
+</defs>
+</svg>

package/src/assets/separator.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2" height="14" viewBox="0 0 2 14" fill="none">
+  <path d="M1 1V13" stroke="#E7E7E7" stroke-linecap="round"/>
+</svg>

package/src/assets/slider-dots.svg

@@ -0,0 +1,7 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="dots, grid, slide">
+        <path id="Vector" fill-rule="evenodd" clip-rule="evenodd"
+              d="M4 5C4.55228 5 5 4.55228 5 4C5 3.44772 4.55228 3 4 3C3.44772 3 3 3.44772 3 4C3 4.55228 3.44772 5 4 5ZM4 9C4.55228 9 5 8.55229 5 8C5 7.44772 4.55228 7 4 7C3.44772 7 3 7.44772 3 8C3 8.55229 3.44772 9 4 9ZM9 8C9 8.55229 8.55229 9 8 9C7.44772 9 7 8.55229 7 8C7 7.44772 7.44772 7 8 7C8.55229 7 9 7.44772 9 8ZM8 5C8.55229 5 9 4.55228 9 4C9 3.44772 8.55229 3 8 3C7.44772 3 7 3.44772 7 4C7 4.55228 7.44772 5 8 5Z"
+              fill="#111111"/>
+    </g>
+</svg>

package/src/assets/slider-step.svg

@@ -0,0 +1,3 @@
+<svg width="5" height="4" viewBox="0 0 5 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle id="Ellipse 4" cx="2.59961" cy="2" r="2" fill="#B5B5B5"/>
+</svg>

package/src/assets/slider-thumb.svg

@@ -0,0 +1,3 @@
+<svg width="2" height="16" viewBox="0 0 2 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="2" height="16" rx="1" fill="#666666"/>
+</svg>

package/src/assets/tracks.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="tracks">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M4.58398 9.99984C4.58398 8.15889 6.07637 6.6665 7.91732 6.6665C8.22791 6.6665 8.52857 6.70898 8.81383 6.78845C8.00161 7.61543 7.50065 8.74913 7.50065 9.99984C7.50065 11.2505 8.00161 12.3842 8.81383 13.2112C8.52857 13.2907 8.22791 13.3332 7.91732 13.3332C6.07637 13.3332 4.58398 11.8408 4.58398 9.99984ZM10.0007 14.0834C9.3756 14.4029 8.6675 14.5832 7.91732 14.5832C5.38601 14.5832 3.33398 12.5311 3.33398 9.99984C3.33398 7.46853 5.38601 5.4165 7.91732 5.4165C8.6675 5.4165 9.3756 5.59674 10.0007 5.91626C10.6257 5.59674 11.3338 5.4165 12.084 5.4165C14.6153 5.4165 16.6673 7.46853 16.6673 9.99984C16.6673 12.5311 14.6153 14.5832 12.084 14.5832C11.3338 14.5832 10.6257 14.4029 10.0007 14.0834ZM11.1875 6.78845C11.4727 6.70898 11.7734 6.6665 12.084 6.6665C13.9249 6.6665 15.4173 8.15889 15.4173 9.99984C15.4173 11.8408 13.9249 13.3332 12.084 13.3332C11.7734 13.3332 11.4727 13.2907 11.1875 13.2112C11.9997 12.3842 12.5007 11.2505 12.5007 9.99984C12.5007 8.74913 11.9997 7.61543 11.1875 6.78845ZM10.0007 7.3976C10.7627 8.00848 11.2507 8.94718 11.2507 9.99984C11.2507 11.0525 10.7627 11.9912 10.0007 12.6021C9.2386 11.9912 8.75065 11.0525 8.75065 9.99984C8.75065 8.94718 9.2386 8.00848 10.0007 7.3976Z" fill="#111111"/>
+</g>
+</svg>

package/src/assets/union.svg

@@ -0,0 +1,3 @@
+<svg width="77" height="16" viewBox="0 0 77 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M0.708008 15.8631V0H3.28208V8.18083L10.4684 0H13.6021L7.84889 6.66212L14.0275 15.8631H10.9155L5.99037 8.58845L3.28208 11.6708V15.8631H0.708008ZM33.2158 4.12439C35.7682 4.12439 37.8497 5.52913 37.8497 9.40476V9.40579V15.8641H35.4316V9.6096C35.4316 7.41051 34.4683 6.23254 32.6779 6.23254C30.7749 6.23254 29.6113 7.66031 29.6113 9.99423V15.8631H27.1931V0H29.6113V5.93782C30.3278 4.9407 31.4244 4.12439 33.2158 4.12439ZM58.593 4.12439C61.1227 4.12439 63.2042 5.52913 63.2042 9.40476V15.8631H60.7644V9.60857C60.7644 7.40944 59.8465 6.2315 58.0334 6.2315C56.1088 6.2315 54.9668 7.65928 54.9668 10.0162V15.8631H52.5486V4.26025H54.6529L54.9214 5.77893C55.6379 4.87172 56.7345 4.12439 58.593 4.12439ZM75.8009 13.733H76.2924V15.8631H75.0162C73.4489 15.8631 72.912 15.1607 72.912 14.0047C72.151 15.1827 70.9874 15.9989 69.1288 15.9989C66.6219 15.9989 64.8759 14.7531 64.8759 12.5999C64.8759 10.22 66.5775 8.88321 69.7783 8.88321H72.6662V8.18083C72.6662 6.88896 71.7483 6.09564 70.1593 6.09564C68.7272 6.09564 67.7638 6.77502 67.5852 7.79514H65.2125C65.4582 5.52913 67.3839 4.12439 70.2718 4.12439C73.3167 4.12439 75.0627 5.59812 75.0627 8.33969V12.9856C75.0627 13.5741 75.3084 13.733 75.8009 13.733ZM72.6662 11.1043V10.6966H69.6668C68.1665 10.6966 67.3384 11.2631 67.3384 12.4411C67.3384 13.4162 68.1448 14.0956 69.4654 14.0956C71.4799 14.0956 72.6435 12.8947 72.6662 11.1043ZM47.827 4.26128V10.0622V10.0632C47.827 12.4651 46.6406 13.8699 44.8719 13.8699C43.1032 13.8699 42.208 12.7139 42.208 10.4479V4.26128H39.7898V10.7196C39.7898 14.6851 41.8724 16 44.3123 16C46.081 16 47.1331 15.2757 47.8497 14.3914L48.1181 15.8641H50.2451V4.26128H47.827ZM25.9561 13.733H25.4647C24.9722 13.733 24.7264 13.5751 24.7264 12.9856V8.33969C24.7264 5.59708 22.9805 4.12439 19.9356 4.12439C17.0476 4.12439 15.1219 5.52913 14.8762 7.79514H17.249C17.4276 6.77502 18.3899 6.09564 19.823 6.09564C21.412 6.09564 22.33 6.88896 22.33 8.18083V8.88321H19.442C16.2412 8.88321 14.5396 10.22 14.5396 12.5999C14.5396 14.7531 16.2856 15.9989 18.7926 15.9989C20.6501 15.9989 21.8147 15.1827 22.5757 14.0047C22.5757 15.1607 23.1126 15.8631 24.68 15.8631H25.9561V13.733ZM22.3289 10.6966V11.1043C22.3073 12.8947 21.1426 14.0956 19.1281 14.0956C17.8075 14.0956 17.0011 13.4152 17.0011 12.4411C17.0011 11.2631 17.8292 10.6966 19.3295 10.6966H22.3289Z" fill="#111111"/>
+</svg>

package/src/assets/vector.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2" height="14" viewBox="0 0 2 14" fill="none">
+  <path d="M1.29199 1V13" stroke="#B7B7B7" stroke-linecap="round"/>
+</svg>

package/src/components/KButton/KButton.stories.tsx

@@ -1,23 +1,80 @@
 import {Meta, StoryFn} from "@storybook/react";
 import KButton from "./KButton";
+// @ts-ignore
+import ChevronRightIcon from "../../assets/chevron-right.svg"
+// @ts-ignore
+import ChevronLeftIcon from "../../assets/chevron-left.svg"
+// @ts-ignore
+import TracksIcon from "../../assets/tracks.svg"
 
 export default {
   title: "ReactComponentLibrary/KButton",
-  component: KButton,
-} as Meta<typeof KButton>;
+  component: KButton
+} as Meta<typeof KButton>
 
 const Template: StoryFn<typeof KButton> = (args) => <KButton {...args} />;
 
-export const ButtonTest = Template.bind({});
-ButtonTest.args = {
-  label: "Save Me!",
-  theme: "primary",
-  testIdPrefix: "rating",
+export const KButtonText = Template.bind({});
+KButtonText.args = {
+  onClick: () => {
+    alert("clicked")
+  },
+  text: "Hello World",
+  background: "#F2FE67",
+  borderRadius: 10,
+  width: "160px",
+  height: "44px",
+  hoverBackground: "#A2FE67",
+  textDecoration: "underline"
 };
 
-export const ButtonSecondary = Template.bind({});
-ButtonSecondary.args = {
-  label: "Secondary theme Save V2",
-  theme: "secondary",
-  testIdPrefix: "rating",
+export const KButtonIcon = Template.bind({});
+KButtonIcon.args = {
+  onClick: () => {
+    alert("clicked")
+  },
+  icon: TracksIcon,
+  width: "50px"
+};
+
+export const KButtonLeftIconText = Template.bind({});
+KButtonLeftIconText.args = {
+  onClick: () => {
+    alert("clicked")
+  },
+  leftIcon: ChevronLeftIcon,
+  text: "Hello World",
+  width: "160px"
+};
+
+export const KButtonRightIconText = Template.bind({});
+KButtonRightIconText.args = {
+  onClick: () => {
+    alert("clicked")
+  },
+  rightIcon: ChevronRightIcon,
+  text: "Hello World",
+  width: "160px"
+};
+
+export const KButtonLeftRightIconText = Template.bind({});
+KButtonLeftRightIconText.args = {
+  onClick: () => {
+    alert("clicked")
+  },
+  leftIcon: ChevronLeftIcon,
+  rightIcon: ChevronRightIcon,
+  text: "Hello World",
+  width: "160px"
+};
+
+export const KButtonLeftRightMiddleIcon = Template.bind({});
+KButtonLeftRightMiddleIcon.args = {
+  onClick: () => {
+    alert("clicked")
+  },
+  leftIcon: ChevronLeftIcon,
+  rightIcon: ChevronRightIcon,
+  icon: TracksIcon,
+  width: "160px"
 };

package/src/components/KButton/KButton.tsx

@@ -1,24 +1,61 @@
-import React from "react";
+import React, { useState } from "react"
+import "../../main.css"
+import KSpan from "../KSpan"
 
 export interface KButtonProps {
-  testIdPrefix: string;
-  label?: string;
-  theme: "primary" | "secondary";
-  disabled?: boolean;
+  onClick: () => void
+  text?: string
+  icon?: string
+  rightIcon?: string
+  leftIcon?: string
+  background?: string
+  borderRadius?: number
+  width?: string
+  height?: string
+  disabled?: boolean
+  textColor?: string
+  padding?: string
+  shadowDisabled?: boolean
+  hoverBackground?: string
+  fontWeight?: number
+  textDecoration?: string
+  gap?: string
 }
 
 const KButton: React.FC<KButtonProps> = (props) => {
+  const [hover, setHover] = useState(false)
+
+  const disabled = props.disabled || false
+  const background = disabled ? "#F0F0F0" : props.background || "#F2FE67"
+  const borderRadius = props.borderRadius || 10
+  const width = props.width || "100%"
+  const height = props.height || "44px"
+  const textColor = disabled ? "#D6D6D6" : props.textColor || "#111"
+  const padding = props.padding || "12px 16px"
+  const boxShadow = props.shadowDisabled ? "" : "0 0 0 1px rgba(17, 17, 17, 0.04), 0 1px 1px 0 rgba(17, 17, 17, 0.04)"
+  const hoverBackground = props.hoverBackground || background
+  const fontWeight = props.fontWeight || 500
+  const textDecoration = props.textDecoration || "none"
+  const gap = props.gap || "0px"
   return (
     <button
-      disabled={props.disabled}
-      data-testid={`${props.testIdPrefix}`}
-      className={``}
-      onClick={() => {
-      }}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      className={"k-button"}
+      disabled={disabled}
+      onClick={props.onClick}
+      style={{ background: hover ? hoverBackground : background, borderRadius, width, height, padding, boxShadow }}
     >
-      <span>{props.label}</span>
+      <div className={"flex items-center"} style={{gap}}>
+        {props.leftIcon && <img src={props.leftIcon} alt={"button-left-icon"} />}
+        {props.text && (
+          <KSpan text={props.text} color={textColor} fontWeight={fontWeight} textDecoration={textDecoration} />
+        )}
+        {props.icon && <img src={props.icon} alt={"button-icon"} />}
+        {props.rightIcon && <img src={props.rightIcon} alt={"button-right-icon"} />}
+      </div>
     </button>
-  );
-};
+  )
+}
 
-export default KButton;
+export default KButton

package/src/components/KCodeInput/KCodeInput.stories.tsx

@@ -0,0 +1,84 @@
+import { Meta, StoryFn } from "@storybook/react"
+import KCodeInput, { KCodeInputProps } from "./KCodeInput"
+// @ts-ignore
+import { useEffect, useState } from "react"
+
+export default {
+  title: "ReactComponentLibrary/KCodeInput",
+  component: KCodeInput,
+  parameters: {
+    layout: "centered"
+  }
+} as Meta<typeof KCodeInput>
+
+const KCodeInputWrapper: React.FC<KCodeInputProps> = (args) => {
+  const [code, setCode] = useState<string>("");
+
+  useEffect(() => {
+    console.log("code: ", code);
+  }, [code]);
+
+  return (
+    <div className="w-[300px] p-4">
+    <KCodeInput
+      {...args}
+      onChange={(value:string) => {
+        //console.log("value: ", value);
+        setCode(value);
+        //console.log("Value updated to: ", option.value);
+      }}
+    />
+    </div>
+  );
+};
+
+
+const Template: StoryFn<typeof KCodeInput> = (args) => <KCodeInputWrapper {...args} />
+
+export const KCodeInputPrimary = Template.bind({})
+KCodeInputPrimary.args = {
+  length: 6,
+  allowedCharacters: 'alpha',
+  isPassword: false,
+  disabled: false,
+  autoFocus:true,
+  gap:2,
+  width: 150,
+  background: "red",
+  hoverBackground: "green",
+  focusedBackground: "blue",
+  filledBackground: "black",
+  fitInContainer: true,
+  border: "1px solid black",
+  hoverBorder: "1px solid yellow",
+  focusedBorder: "1px solid white",
+  filledBorder: "1px solid gray",
+  fontSize: "15px",
+  padding: "10px",
+  color: "white", 
+}
+
+export const KCodeInputSecondary = Template.bind({})
+KCodeInputSecondary.args = {
+  isCodeCorrect: true,
+  boxShadow: "1px 2px 10px black",
+  hoverBoxShadow: "1px 2px 10px red",
+  focusedBoxShadow: "1px 2px 10px yellow",
+  filledBoxShadow: "1px 2px 10px purple",
+  fontSize: "30px",
+  padding: "10px",
+  color: "orange", 
+  autoBlur: true,
+  autoFocus: true,
+  width: 50,
+  height: 90,
+  fitInContainer: true,
+  gap: 12
+}
+
+export const KCodeInputDefault = Template.bind({})
+KCodeInputDefault.args = {
+  isCodeCorrect: false,
+  allowedCharacters:"numeric",
+  autoBlur:true
+}