@hellobetterdigitalnz/betterui 0.0.2 → 0.0.3

package/dist/main.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=main.d.ts.map

package/dist/main.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.tsx"],"names":[],"mappings":"AAEA,OAAO,eAAe,CAAC"}

package/dist/style.css

@@ -0,0 +1 @@
+._accordion_uj5tk_1{display:flex;flex-direction:column;width:100%;border-bottom:1px solid var(--color-gray-300)}._accordion_uj5tk_1 ._header_uj5tk_7{display:flex;justify-content:space-between;align-items:center;min-height:58px;background-color:var(--color-white);cursor:pointer;border-bottom:1px solid var(--border);padding:var(--spacing-1) var(--spacing-2)}._accordion_uj5tk_1 ._title_uj5tk_17 h4{font-size:var(--font-size-h4);line-height:var(--line-height-h4);font-weight:var(--font-weight-h4)}._accordion_uj5tk_1 ._icon_uj5tk_22{display:flex;align-items:center;flex-shrink:0;padding-left:var(--spacing-1)}._accordion_uj5tk_1 ._icon_uj5tk_22 svg{width:24px;height:24px}._accordion_uj5tk_1 ._body_uj5tk_32{height:0;overflow:hidden}._accordion_uj5tk_1 ._bodyOpened_uj5tk_36{height:auto}._accordion_uj5tk_1 ._bodyInner_uj5tk_39{background:var(--color-white);padding:var(--spacing-1\/2) var(--spacing-2) var(--spacing-2) var(--spacing-2)}._badge_10fdy_1{min-height:24px;border-radius:4px;border:1px solid var(--color-gray-200);background:var(--color-lite)}._badge_10fdy_1 ._wrapper_10fdy_7{display:flex;align-items:center;padding:0 var(--spacing-1\/2)}._badge_10fdy_1 ._circle_10fdy_12{width:12px;height:12px;border-radius:100%;flex-shrink:1;margin-right:6px}._badge_10fdy_1 ._circlePending_10fdy_19{background:var(--color-gray-300)}._badge_10fdy_1 ._circleInProgress_10fdy_22{background:var(--color-inprogress)}._badge_10fdy_1 ._circleComplete_10fdy_25{background:var(--color-success)}._badge_10fdy_1 ._title_10fdy_28 span{color:var(--color-gray-900);font-size:var(--font-size-body-sm);font-weight:var(--font-weight-body-sm)}.banner-card{display:flex;min-height:600px;height:100%;position:relative}.banner-card__wrapper{width:100%}.banner-card__picture{background-color:var(--color-gray-300);min-height:200px;background-position:center;background-size:cover;background-repeat:no-repeat;position:absolute;top:0;right:0;left:0;height:100%;width:100%;overflow:hidden}.banner-card__inner{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--spacing-1-1\/4)}.banner-card__content{text-align:center;max-width:960px;margin:0 auto}.banner-card__title{font-size:var(--font-size-h2);font-weight:var(--font-weight-h2);line-height:var(--line-height-h2);margin-bottom:var(--spacing-1-1\/2)}.banner-card__desc{margin-bottom:var(--spacing-1-1\/2)}._button_1im12_1{display:inline-flex;align-items:center;justify-content:center;border-width:1px;border-style:solid;border-radius:4px;font-size:var(--font-size-button);font-weight:var(--font-weight-button);line-height:var(--line-height-button);cursor:pointer;transition:linear all .3s;font-family:var(--font)}._button_1im12_1 svg{width:20px;height:20px}._button_1im12_1:disabled{cursor:not-allowed}._button_1im12_1._disabled_1im12_22{opacity:.3;cursor:not-allowed}._button_1im12_1 ._primaryIcon_1im12_26,._button_1im12_1 ._secondaryIcon_1im12_27{width:20px;height:20px}._button_1im12_1 ._primaryIcon_1im12_26{margin-right:calc(var(--space-unit) * 2)}._button_1im12_1 ._secondaryIcon_1im12_27{margin-left:calc(var(--space-unit) * 2)}._button_1im12_1._noBorder_1im12_37{border-color:transparent;text-decoration-line:underline;--font-weight-button: 400}._button_1im12_1._default_1im12_42{padding:var(--spacing-1\/2) var(--spacing-1-1\/4);min-height:40px}._button_1im12_1._default_1im12_42._noBorder_1im12_37{padding:var(--spacing-1\/2) var(--spacing-3\/4)}._button_1im12_1._large_1im12_49{padding:var(--spacing-1\/2) var(--spacing-2);min-height:48px}._button_1im12_1._large_1im12_49._noBorder_1im12_37{padding:var(--spacing-1\/2) var(--spacing-1)}._button_1im12_1._small_1im12_56{padding:var(--spacing-1\/4) var(--spacing-3\/4);min-height:32px}._button_1im12_1._small_1im12_56._noBorder_1im12_37{padding:var(--spacing-1\/2) var(--spacing-1\/2)}._button_1im12_1._solid-primary_1im12_63{color:var(--color-lite);background-color:var(--color-primary-500);border-color:var(--color-primary-500)}._button_1im12_1._solid-primary_1im12_63:hover:enabled{background-color:var(--color-primary-300);border-color:var(--color-primary-300)}._button_1im12_1._solid-primary_1im12_63:active:enabled{background-color:var(--color-primary-600);border-color:var(--color-primary-600)}._button_1im12_1._solid-secondary_1im12_76{color:var(--color-lite);background-color:var(--color-secondary-500);border-color:var(--color-secondary-500)}._button_1im12_1._solid-secondary_1im12_76:hover:enabled{background-color:var(--color-secondary-300);border-color:var(--color-secondary-300)}._button_1im12_1._solid-secondary_1im12_76:active:enabled{background-color:var(--color-secondary-600);border-color:var(--color-secondary-600)}._button_1im12_1._solid-gray_1im12_89{color:var(--color-lite);background-color:var(--color-gray-500);border-color:var(--color-gray-500)}._button_1im12_1._solid-gray_1im12_89:hover:enabled{background-color:var(--color-gray-300);border-color:var(--color-gray-300)}._button_1im12_1._solid-gray_1im12_89:active:enabled{background-color:var(--color-gray-600);border-color:var(--color-gray-600)}._button_1im12_1._hollow-primary_1im12_102{background:transparent;color:var(--color-primary-800);border-color:var(--color-primary-600)}._button_1im12_1._hollow-primary_1im12_102:hover:enabled{background:var(--color-primary-100)}._button_1im12_1._hollow-primary_1im12_102:active:enabled{background:var(--color-primary-100);border-width:2px}._button_1im12_1._hollow-secondary_1im12_114{background:transparent;color:var(--color-secondary-800);border-color:var(--color-secondary-600)}._button_1im12_1._hollow-secondary_1im12_114:hover:enabled{background:var(--color-secondary-100)}._button_1im12_1._hollow-secondary_1im12_114:active:enabled{background:var(--color-secondary-100);border-width:2px}._button_1im12_1._hollow-gray_1im12_126{background:transparent;color:var(--color-gray-800);border-color:var(--color-gray-600)}._button_1im12_1._hollow-gray_1im12_126:hover:enabled{background:var(--color-gray-100)}._button_1im12_1._hollow-gray_1im12_126:active:enabled{background:var(--color-gray-100);border-width:2px}._button_1im12_1._no-border-primary_1im12_138{background:transparent;color:var(--color-primary-800);border-color:transparent}._button_1im12_1._no-border-primary_1im12_138:hover:enabled{background-color:var(--color-primary-100);color:var(--color-primary-800)}._button_1im12_1._no-border-primary_1im12_138:active:enabled{background-color:var(--color-primary-100);color:var(--color-primary-800)}._button_1im12_1._no-border-secondary_1im12_151{background:transparent;color:var(--color-secondary-800);border-color:transparent}._button_1im12_1._no-border-secondary_1im12_151:hover:enabled{background-color:var(--color-secondary-100);color:var(--color-secondary-800)}._button_1im12_1._no-border-secondary_1im12_151:active:enabled{background-color:var(--color-secondary-100);color:var(--color-secondary-800)}._button_1im12_1._no-border-gray_1im12_164{background:transparent;color:var(--color-gray-800);border-color:transparent}._button_1im12_1._no-border-gray_1im12_164:hover:enabled{background-color:var(--color-gray-100);color:var(--color-gray-800)}._button_1im12_1._no-border-gray_1im12_164:active:enabled{background-color:var(--color-gray-100);color:var(--color-gray-800)}._button_1im12_1 ._button-icon_1im12_177{display:flex;align-items:center;margin-right:calc(var(--spacing) * 2)}._checkbox_4wax2_1{position:relative;display:inline-flex;justify-content:center;flex-shrink:0;flex-grow:0}._checkbox_4wax2_1 input[type=checkbox]{-webkit-appearance:none;width:20px;height:20px;border-radius:4px;background-color:var(--color-white);border:1px solid var(--color-gray-300);outline:2px solid transparent;outline-offset:2px;cursor:pointer}._checkbox_4wax2_1 input[type=checkbox]:checked{background-color:var(--color-gray-800);border-color:var(--color-gray-800)}._checkbox_4wax2_1 input[type=checkbox]:hover{border-color:var(--color-gray-600)}._checkbox_4wax2_1 input[type=checkbox]:focus{outline:2px solid var(--color-gray-800)}._checkbox_4wax2_1 input[type=checkbox]:disabled{background-color:var(--color-gray-200)}._checkbox_4wax2_1 input[type=checkbox]:disabled:checked{border-color:var(--color-gray-200)}._checkbox_4wax2_1 svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}._checkbox_4wax2_1 input[type=checkbox]~svg{color:var(--color-white)}._checkbox_4wax2_1._error_4wax2_45 input[type=checkbox]{border-color:var(--color-error);color:var(--color-white)}._checkbox_4wax2_1._error_4wax2_45 input[type=checkbox]:checked{background-color:var(--color-error)}._input_1auei_1[type=text],._input_1auei_1[type=password],._input_1auei_1[type=email],._input_1auei_1[type=number],._input_1auei_1[type=date],._input_1auei_1[type=tel],._input_1auei_1[type=time]{width:100%;height:48px;padding:var(--space-unit) calc(var(--space-unit) * 3);border:1px solid var(--color-gray-300);border-radius:6px;font-family:var(--font);font-size:var(--font-size-input);line-height:var(--line-height-input);font-weight:var(--line-height-input)}._input_1auei_1[type=text]::placeholder,._input_1auei_1[type=password]::placeholder,._input_1auei_1[type=email]::placeholder,._input_1auei_1[type=number]::placeholder,._input_1auei_1[type=date]::placeholder,._input_1auei_1[type=tel]::placeholder,._input_1auei_1[type=time]::placeholder{color:var(--color-gray-500);font-size:var(--font-size-input);line-height:var(--line-height-input);font-weight:var(--font-weight-input)}._input_1auei_1[type=text]:focus,._input_1auei_1[type=password]:focus,._input_1auei_1[type=email]:focus,._input_1auei_1[type=number]:focus,._input_1auei_1[type=date]:focus,._input_1auei_1[type=tel]:focus,._input_1auei_1[type=time]:focus{outline:none;border:2px solid var(--color-gray-900)}._input_1auei_1[type=text]:disabled,._input_1auei_1[type=password]:disabled,._input_1auei_1[type=email]:disabled,._input_1auei_1[type=number]:disabled,._input_1auei_1[type=date]:disabled,._input_1auei_1[type=tel]:disabled,._input_1auei_1[type=time]:disabled{cursor:not-allowed;opacity:.3}._input_1auei_1._error_1auei_26[type=text],._input_1auei_1._error_1auei_26[type=password],._input_1auei_1._error_1auei_26[type=email],._input_1auei_1._error_1auei_26[type=number],._input_1auei_1._error_1auei_26[type=date],._input_1auei_1._error_1auei_26[type=tel]{border:1px solid var(--color-error);background:var(--color-error-lite)}._input_1auei_1._error_1auei_26[type=text]:focus,._input_1auei_1._error_1auei_26[type=password]:focus,._input_1auei_1._error_1auei_26[type=email]:focus,._input_1auei_1._error_1auei_26[type=number]:focus,._input_1auei_1._error_1auei_26[type=date]:focus,._input_1auei_1._error_1auei_26[type=tel]:focus{border:2px solid var(--color-error);background:#fff}._passwordCon_1auei_35{width:100%;position:relative}._passwordCon_1auei_35 [type=password],._passwordCon_1auei_35 [type=text]{padding-right:calc(var(--space-unit) * 9)}._passwordCon_1auei_35 ._eyeicon_1auei_43{display:flex;position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer}._passwordCon_1auei_35 ._eyeicon_1auei_43 svg{width:16px;height:16px}._date_1auei_56,._time_1auei_57,._currency_1auei_58,._textField_1auei_59{width:100%;position:relative}._date_1auei_56 [type=date],._date_1auei_56 [type=time],._date_1auei_56 [type=number],._time_1auei_57 [type=date],._time_1auei_57 [type=time],._time_1auei_57 [type=number],._currency_1auei_58 [type=date],._currency_1auei_58 [type=time],._currency_1auei_58 [type=number],._textField_1auei_59 [type=date],._textField_1auei_59 [type=time],._textField_1auei_59 [type=number]{text-transform:uppercase}._date_1auei_56 [type=date],._date_1auei_56 [type=text],._date_1auei_56 [type=time],._date_1auei_56 [type=number],._time_1auei_57 [type=date],._time_1auei_57 [type=text],._time_1auei_57 [type=time],._time_1auei_57 [type=number],._currency_1auei_58 [type=date],._currency_1auei_58 [type=text],._currency_1auei_58 [type=time],._currency_1auei_58 [type=number],._textField_1auei_59 [type=date],._textField_1auei_59 [type=text],._textField_1auei_59 [type=time],._textField_1auei_59 [type=number]{padding-left:calc(var(--space-unit) * 11);font-family:var(--font)}._date_1auei_56 [type=date]:-webkit-datetime-edit,._date_1auei_56 [type=text]:-webkit-datetime-edit,._date_1auei_56 [type=time]:-webkit-datetime-edit,._date_1auei_56 [type=number]:-webkit-datetime-edit,._time_1auei_57 [type=date]:-webkit-datetime-edit,._time_1auei_57 [type=text]:-webkit-datetime-edit,._time_1auei_57 [type=time]:-webkit-datetime-edit,._time_1auei_57 [type=number]:-webkit-datetime-edit,._currency_1auei_58 [type=date]:-webkit-datetime-edit,._currency_1auei_58 [type=text]:-webkit-datetime-edit,._currency_1auei_58 [type=time]:-webkit-datetime-edit,._currency_1auei_58 [type=number]:-webkit-datetime-edit,._textField_1auei_59 [type=date]:-webkit-datetime-edit,._textField_1auei_59 [type=text]:-webkit-datetime-edit,._textField_1auei_59 [type=time]:-webkit-datetime-edit,._textField_1auei_59 [type=number]:-webkit-datetime-edit{color:var(--color-gray-300)}._date_1auei_56 [type=date]::-webkit-calendar-picker-indicator,._date_1auei_56 [type=text]::-webkit-calendar-picker-indicator,._date_1auei_56 [type=time]::-webkit-calendar-picker-indicator,._date_1auei_56 [type=number]::-webkit-calendar-picker-indicator,._time_1auei_57 [type=date]::-webkit-calendar-picker-indicator,._time_1auei_57 [type=text]::-webkit-calendar-picker-indicator,._time_1auei_57 [type=time]::-webkit-calendar-picker-indicator,._time_1auei_57 [type=number]::-webkit-calendar-picker-indicator,._currency_1auei_58 [type=date]::-webkit-calendar-picker-indicator,._currency_1auei_58 [type=text]::-webkit-calendar-picker-indicator,._currency_1auei_58 [type=time]::-webkit-calendar-picker-indicator,._currency_1auei_58 [type=number]::-webkit-calendar-picker-indicator,._textField_1auei_59 [type=date]::-webkit-calendar-picker-indicator,._textField_1auei_59 [type=text]::-webkit-calendar-picker-indicator,._textField_1auei_59 [type=time]::-webkit-calendar-picker-indicator,._textField_1auei_59 [type=number]::-webkit-calendar-picker-indicator{position:absolute;left:12px;top:50%;transform:translateY(-50%);cursor:pointer;opacity:0}._date_1auei_56 ._calendarIcon_1auei_137,._date_1auei_56 ._clockIcon_1auei_138,._date_1auei_56 ._currencyIcon_1auei_139,._date_1auei_56 ._textFieldIcon_1auei_140,._time_1auei_57 ._calendarIcon_1auei_137,._time_1auei_57 ._clockIcon_1auei_138,._time_1auei_57 ._currencyIcon_1auei_139,._time_1auei_57 ._textFieldIcon_1auei_140,._currency_1auei_58 ._calendarIcon_1auei_137,._currency_1auei_58 ._clockIcon_1auei_138,._currency_1auei_58 ._currencyIcon_1auei_139,._currency_1auei_58 ._textFieldIcon_1auei_140,._textField_1auei_59 ._calendarIcon_1auei_137,._textField_1auei_59 ._clockIcon_1auei_138,._textField_1auei_59 ._currencyIcon_1auei_139,._textField_1auei_59 ._textFieldIcon_1auei_140{display:flex;position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none}._date_1auei_56 ._calendarIcon_1auei_137 svg,._date_1auei_56 ._clockIcon_1auei_138 svg,._date_1auei_56 ._currencyIcon_1auei_139 svg,._date_1auei_56 ._textFieldIcon_1auei_140 svg,._time_1auei_57 ._calendarIcon_1auei_137 svg,._time_1auei_57 ._clockIcon_1auei_138 svg,._time_1auei_57 ._currencyIcon_1auei_139 svg,._time_1auei_57 ._textFieldIcon_1auei_140 svg,._currency_1auei_58 ._calendarIcon_1auei_137 svg,._currency_1auei_58 ._clockIcon_1auei_138 svg,._currency_1auei_58 ._currencyIcon_1auei_139 svg,._currency_1auei_58 ._textFieldIcon_1auei_140 svg,._textField_1auei_59 ._calendarIcon_1auei_137 svg,._textField_1auei_59 ._clockIcon_1auei_138 svg,._textField_1auei_59 ._currencyIcon_1auei_139 svg,._textField_1auei_59 ._textFieldIcon_1auei_140 svg{flex-shrink:0;width:24px;height:24px}._textarea_1y8ok_1{display:inline-block;border:1px solid var(--color-gray-300);border-radius:6px;resize:none;padding:calc(var(--space-unit) * 3);width:100%;height:96px;font-family:var(--font);font-size:var(--font-size-input);line-height:var(--line-height-input);font-weight:var(--font-weight-input)}._textarea_1y8ok_1::placeholder{font-family:var(--font);color:var(--color-gray-500);font-size:var(--font-size-input);line-height:var(--line-height-input);font-weight:var(--font-weight-input)}._textarea_1y8ok_1:focus{outline:none;border:2px solid var(--color-gray-900)}._textarea_1y8ok_1:disabled{cursor:not-allowed;opacity:.3}._textarea_1y8ok_1._error_1y8ok_29{border:1px solid var(--color-error);background:var(--color-error-lite)}._textarea_1y8ok_1._error_1y8ok_29:focus{border:2px solid var(--color-error);background:#fff}._length_1y8ok_38{display:flex;justify-content:flex-end;font-size:12px}

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@hellobetterdigitalnz/betterui",
-  "private": false,
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
+  "typings": "dist/export.d.ts",
+  "types": "dist/export.d.ts",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
@@ -14,10 +15,20 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.4",
     "classnames": "^2.4.0",
+    "customize-cra": "^1.0.0",
+    "dev": "^0.1.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-app-rewired": "^2.2.1",
+    "react-dom": "^18.2.0",
+    "vite-plugin-dts": "^3.7.0",
+    "vite-plugin-require": "^1.1.14",
+    "vite-tsconfig-paths": "^4.2.3"
   },
   "devDependencies": {
+    "@babel/core": "^7.23.7",
+    "@babel/preset-env": "^7.23.7",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
     "@storybook/addon-essentials": "7.6.5",
     "@storybook/addon-interactions": "7.6.5",
     "@storybook/addon-links": "7.6.5",
@@ -28,21 +39,30 @@
     "@storybook/react": "7.6.5",
     "@storybook/react-vite": "7.6.5",
     "@storybook/test": "7.6.5",
+    "@types/babel__core": "^7",
+    "@types/babel__preset-env": "^7",
+    "@types/customize-cra": "^1",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
     "@vitejs/plugin-react": "^4.2.0",
+    "babel-loader": "^9.1.3",
     "eslint": "^8.53.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",
     "eslint-plugin-storybook": "^0.6.15",
     "sass": "^1.69.5",
     "storybook": "7.6.5",
+    "ts-loader": "^9.5.1",
     "typescript": "^5.2.2",
-    "vite": "^5.0.0"
+    "vite": "^5.0.0",
+    "vite-plugin-babel": "^1.2.0",
+    "webpack": "^5.89.0"
   },
   "files": [
+    "dist/",
     "src/"
-  ]
+  ],
+  "packageManager": "yarn@4.0.2"
 }

package/src/Components/DataDisplay/Cards/BannerCard/BannerCard.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { BannerCard } from './BannerCard.tsx';
+import BannerCard  from './BannerCard.tsx';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {

package/src/Components/DataDisplay/Cards/BannerCard/BannerCard.tsx

@@ -2,7 +2,7 @@ import BannerCardInterface from "./BannerCardInterface.tsx";
 import './banner-card.scss'
 import Button from "../../../Form/Button/Button";
 
-export const BannerCard = (props: BannerCardInterface) => {
+const BannerCard = (props: BannerCardInterface) => {
   const {
     title,
     btnTitle,
@@ -45,3 +45,5 @@ export const BannerCard = (props: BannerCardInterface) => {
     </div>
   );
 };
+
+export default BannerCard;

package/src/Components/DataDisplay/Media/Media.tsx

@@ -1,47 +1,47 @@
-import MediaProps from "./MediaProps.tsx";
-import styles from "./media.module.scss";
-
-const Media = ({ type, videoSrc, imageSrc }: MediaProps) => {
-  const isImageString = typeof imageSrc === "string";
-
-  return (
-    <>
-      {type === "image" && (
-        <>
-          {isImageString ? (
-            <img
-              src={imageSrc}
-              alt={"media image"}
-              className={styles.mediaImage}
-            />
-          ) : (
-            <div className={styles.mediaImage}>{imageSrc}</div>
-          )}
-        </>
-      )}
-      {type === "video" && (
-        <div className="video-container">
-          <div className="custom-play-button">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="64"
-              height="64"
-              viewBox="0 0 64 64"
-            >
-              <path
-                fill="#fff"
-                d="M32 2C16.536 2 4 14.536 4 30s12.536 28 28 28 28-12.536 28-28S47.464 2 32 2zm13.898 32.111L20 50V14l25.898 15.889z"
-              />
-            </svg>
-          </div>
-          <video controls className="custom-video">
-            <source src={videoSrc} type="video/mp4" />
-            Your browser does not support the video tag.
-          </video>
-        </div>
-      )}
-    </>
-  );
-};
-
-export default Media;
+import MediaProps from "./MediaProps.tsx";
+import styles from "./media.module.scss";
+
+const Media = ({ type, videoSrc, imageSrc }: MediaProps) => {
+  const isImageString = typeof imageSrc === "string";
+
+  return (
+    <>
+      {type === "image" && (
+        <>
+          {isImageString ? (
+            <img
+              src={imageSrc}
+              alt={"media image"}
+              className={styles.mediaImage}
+            />
+          ) : (
+            <div className={styles.mediaImage}>{imageSrc}</div>
+          )}
+        </>
+      )}
+      {type === "video" && (
+        <div className="video-container">
+          <div className="custom-play-button">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="64"
+              height="64"
+              viewBox="0 0 64 64"
+            >
+              <path
+                fill="#fff"
+                d="M32 2C16.536 2 4 14.536 4 30s12.536 28 28 28 28-12.536 28-28S47.464 2 32 2zm13.898 32.111L20 50V14l25.898 15.889z"
+              />
+            </svg>
+          </div>
+          <video controls className="custom-video">
+            <source src={videoSrc} type="video/mp4" />
+            Your browser does not support the video tag.
+          </video>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Media;

package/src/Components/DataDisplay/Media/MediaProps.tsx

@@ -1,9 +1,9 @@
-import { ReactNode } from "react";
-
-interface MediaProps {
-  type?: "image" | "video";
-  videoSrc?: string;
-  imageSrc: string | ReactNode;
-}
-
-export default MediaProps;
+import { ReactNode } from "react";
+
+interface MediaProps {
+  type?: "image" | "video";
+  videoSrc?: string;
+  imageSrc: string | ReactNode;
+}
+
+export default MediaProps;

package/src/Components/DataDisplay/NotificationsBell/NotificationsBellProps.tsx

@@ -1,9 +1,9 @@
-import { ReactNode } from "react";
-
-interface NotificationsBellProps {
-  children?: ReactNode;
-  extraClass?: string;
-  active?:boolean;
-}
-
-export default NotificationsBellProps;
+import { ReactNode } from "react";
+
+interface NotificationsBellProps {
+  children?: ReactNode;
+  extraClass?: string;
+  active?:boolean;
+}
+
+export default NotificationsBellProps;

package/src/Components/DataDisplay/NotificationsBell/notificationBell.module.scss

@@ -1,7 +1,7 @@
 .notification {
 	position: relative;
-	padding-right: var(--spacing-2);
-	
+	//padding-right: var(--spacing-2);
+
 	.notificationIcon {
 		display: flex;
 		align-items: center;
@@ -45,4 +45,4 @@
     padding-top: 8px;
 	}
 
-}
+}

package/src/Components/DataDisplay/export.ts

@@ -0,0 +1,14 @@
+export { default as Accordion } from './Accordion/Accordion';
+export type { default as AccordionProps } from './Accordion/AccordionProps';
+export { default as AccordionContext } from './Accordion/AccordionContext';
+export type { default as AccordionContextInterface } from './Accordion/AccordionContextInterface';
+export { default as AccordionItem } from './Accordion/AccordionItem';
+export type { default as AccordionItemProps } from './Accordion/AccordionItemProps';
+export { default as AccordionProvider } from './Accordion/AccordionProvider';
+export type { default as AccordionProviderInterface } from './Accordion/AccordionProviderInterface';
+
+export { default as Badge } from './Badge/Badge';
+export type { default as BadgeProps } from './Badge/BadgeProps';
+
+export { default as BannerCard } from './Cards/BannerCard/BannerCard';
+export type  { default as BannerCardInterface } from './Cards/BannerCard/BannerCardInterface';

package/src/Components/Form/export.ts

@@ -0,0 +1,18 @@
+export type { default as InputProps } from './InputProps';
+export { default as Button } from './Button/Button';
+export type { default as ButtonProps } from './Button/ButtonProps';
+export { default as Checkbox } from './Checkbox/Checkbox';
+export type { default as CheckboxProps } from './Checkbox/CheckboxProps';
+export { default as CheckboxSelect } from './CheckboxSelect/CheckboxSelect';
+export { default as CheckboxSelectItem } from './CheckboxSelect/CheckboxSelectItem';
+export { default as TextField } from './TextField/TextField.tsx';
+export type { default as TextFieldProps } from './TextField/TextFieldProps.tsx';
+export { default as Textarea } from './Textarea/Textarea.tsx';
+export type { default as TextareaProps } from './Textarea/TextareaProps.tsx';
+export { default as TimeField } from './TimeField/TimeField.tsx';
+export { default as EmailField } from './EmailField/EmailField.tsx';
+export { default as PasswordField } from './PasswordField/PasswordField.tsx';
+export { default as DateField } from './DateField/DateField.tsx';
+export { default as CurrencyField } from './CurrencyField/CurrencyField.tsx';
+export type { default as CurrencyFieldProps } from './CurrencyField/CurrencyFieldProps.tsx';
+

package/src/Components/Icons/MathAndFinance/XIcon/XIcon.tsx

@@ -1,107 +1,107 @@
-import IconProps from "../../IconProps";
-
-const XIcon = ({ type = "light" }: IconProps) => {
-  if (type === "thin") {
-    return (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="32"
-        height="32"
-        viewBox="0 0 32 32"
-        fill="none"
-      >
-        <path
-          d="M25.354 24.6463C25.4478 24.7401 25.5006 24.8673 25.5006 25C25.5006 25.1327 25.4478 25.2599 25.354 25.3538C25.2602 25.4476 25.133 25.5003 25.0003 25.5003C24.8676 25.5003 24.7403 25.4476 24.6465 25.3538L16.0003 16.7075L7.35403 25.3538C7.26021 25.4476 7.13296 25.5003 7.00028 25.5003C6.8676 25.5003 6.74035 25.4476 6.64653 25.3538C6.55271 25.2599 6.5 25.1327 6.5 25C6.5 24.8673 6.55271 24.7401 6.64653 24.6463L15.2928 16L6.64653 7.35375C6.55271 7.25993 6.5 7.13269 6.5 7C6.5 6.86732 6.55271 6.74007 6.64653 6.64625C6.74035 6.55243 6.8676 6.49973 7.00028 6.49973C7.13296 6.49973 7.26021 6.55243 7.35403 6.64625L16.0003 15.2925L24.6465 6.64625C24.693 6.5998 24.7481 6.56295 24.8088 6.53781C24.8695 6.51267 24.9346 6.49973 25.0003 6.49973C25.066 6.49973 25.131 6.51267 25.1917 6.53781C25.2524 6.56295 25.3076 6.5998 25.354 6.64625C25.4005 6.69271 25.4373 6.74786 25.4625 6.80856C25.4876 6.86925 25.5006 6.93431 25.5006 7C25.5006 7.0657 25.4876 7.13076 25.4625 7.19145C25.4373 7.25215 25.4005 7.3073 25.354 7.35375L16.7078 16L25.354 24.6463Z"
-          fill="currentColor"
-        />
-      </svg>
-    );
-  }
-
-  if (type === "regular") {
-    return (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="32"
-        height="32"
-        viewBox="0 0 32 32"
-        fill="none"
-      >
-        <path
-          d="M25.7081 24.2925C25.801 24.3854 25.8747 24.4957 25.9249 24.6171C25.9752 24.7385 26.0011 24.8686 26.0011 25C26.0011 25.1314 25.9752 25.2615 25.9249 25.3829C25.8747 25.5043 25.801 25.6146 25.7081 25.7075C25.6151 25.8004 25.5048 25.8741 25.3835 25.9244C25.2621 25.9747 25.132 26.0006 25.0006 26.0006C24.8692 26.0006 24.7391 25.9747 24.6177 25.9244C24.4963 25.8741 24.386 25.8004 24.2931 25.7075L16.0006 17.4138L7.70806 25.7075C7.52042 25.8951 7.26592 26.0006 7.00056 26.0006C6.73519 26.0006 6.4807 25.8951 6.29306 25.7075C6.10542 25.5199 6 25.2654 6 25C6 24.7346 6.10542 24.4801 6.29306 24.2925L14.5868 16L6.29306 7.70751C6.10542 7.51987 6 7.26537 6 7.00001C6 6.73464 6.10542 6.48015 6.29306 6.29251C6.4807 6.10487 6.73519 5.99945 7.00056 5.99945C7.26592 5.99945 7.52042 6.10487 7.70806 6.29251L16.0006 14.5863L24.2931 6.29251C24.4807 6.10487 24.7352 5.99945 25.0006 5.99945C25.2659 5.99945 25.5204 6.10487 25.7081 6.29251C25.8957 6.48015 26.0011 6.73464 26.0011 7.00001C26.0011 7.26537 25.8957 7.51987 25.7081 7.70751L17.4143 16L25.7081 24.2925Z"
-          fill="currentColor"
-        />
-      </svg>
-    );
-  }
-  if (type === "bold") {
-    return (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="32"
-        height="32"
-        viewBox="0 0 32 32"
-        fill="none"
-      >
-        <path
-          d="M26.0612 23.9388C26.343 24.2205 26.5013 24.6027 26.5013 25.0013C26.5013 25.3998 26.343 25.782 26.0612 26.0638C25.7794 26.3455 25.3972 26.5039 24.9987 26.5039C24.6002 26.5039 24.218 26.3455 23.9362 26.0638L15.9999 18.125L8.0612 26.0613C7.7794 26.343 7.39721 26.5014 6.9987 26.5014C6.60018 26.5014 6.21799 26.343 5.9362 26.0613C5.6544 25.7795 5.49609 25.3973 5.49609 24.9988C5.49609 24.6002 5.6544 24.218 5.9362 23.9363L13.8749 16L5.9387 8.06125C5.6569 7.77946 5.49859 7.39727 5.49859 6.99876C5.49859 6.60024 5.6569 6.21805 5.9387 5.93626C6.22049 5.65446 6.60268 5.49615 7.0012 5.49615C7.39971 5.49615 7.7819 5.65446 8.0637 5.93626L15.9999 13.875L23.9387 5.93501C24.2205 5.65321 24.6027 5.4949 25.0012 5.4949C25.3997 5.4949 25.7819 5.65321 26.0637 5.93501C26.3455 6.2168 26.5038 6.59899 26.5038 6.99751C26.5038 7.39602 26.3455 7.77821 26.0637 8.06001L18.1249 16L26.0612 23.9388Z"
-          fill="currentColor"
-        />
-      </svg>
-    );
-  }
-  if (type === "fill") {
-    return (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="32"
-        height="32"
-        viewBox="0 0 32 32"
-        fill="none"
-      >
-        <path
-          d="M26 4H6C5.46957 4 4.96086 4.21071 4.58579 4.58579C4.21071 4.96086 4 5.46957 4 6V26C4 26.5304 4.21071 27.0391 4.58579 27.4142C4.96086 27.7893 5.46957 28 6 28H26C26.5304 28 27.0391 27.7893 27.4142 27.4142C27.7893 27.0391 28 26.5304 28 26V6C28 5.46957 27.7893 4.96086 27.4142 4.58579C27.0391 4.21071 26.5304 4 26 4ZM22.7075 21.2925C22.8004 21.3854 22.8741 21.4957 22.9244 21.6171C22.9747 21.7385 23.0006 21.8686 23.0006 22C23.0006 22.1314 22.9747 22.2615 22.9244 22.3829C22.8741 22.5043 22.8004 22.6146 22.7075 22.7075C22.6146 22.8004 22.5043 22.8741 22.3829 22.9244C22.2615 22.9747 22.1314 23.0006 22 23.0006C21.8686 23.0006 21.7385 22.9747 21.6171 22.9244C21.4957 22.8741 21.3854 22.8004 21.2925 22.7075L16 17.4137L10.7075 22.7075C10.5199 22.8951 10.2654 23.0006 10 23.0006C9.73464 23.0006 9.48014 22.8951 9.2925 22.7075C9.10486 22.5199 8.99944 22.2654 8.99944 22C8.99944 21.7346 9.10486 21.4801 9.2925 21.2925L14.5863 16L9.2925 10.7075C9.10486 10.5199 8.99944 10.2654 8.99944 10C8.99944 9.73464 9.10486 9.48014 9.2925 9.2925C9.48014 9.10486 9.73464 8.99944 10 8.99944C10.2654 8.99944 10.5199 9.10486 10.7075 9.2925L16 14.5863L21.2925 9.2925C21.4801 9.10486 21.7346 8.99944 22 8.99944C22.2654 8.99944 22.5199 9.10486 22.7075 9.2925C22.8951 9.48014 23.0006 9.73464 23.0006 10C23.0006 10.2654 22.8951 10.5199 22.7075 10.7075L17.4137 16L22.7075 21.2925Z"
-          fill="currentColor"
-        />
-      </svg>
-    );
-  }
-  if (type === "duotone") {
-    return (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="32"
-        height="32"
-        viewBox="0 0 32 32"
-        fill="none"
-      >
-        <path
-          opacity="0.2"
-          d="M27 6V26C27 26.2652 26.8946 26.5196 26.7071 26.7071C26.5196 26.8946 26.2652 27 26 27H6C5.73478 27 5.48043 26.8946 5.29289 26.7071C5.10536 26.5196 5 26.2652 5 26V6C5 5.73478 5.10536 5.48043 5.29289 5.29289C5.48043 5.10536 5.73478 5 6 5H26C26.2652 5 26.5196 5.10536 26.7071 5.29289C26.8946 5.48043 27 5.73478 27 6Z"
-          fill="currentColor"
-        />
-        <path
-          d="M25.7081 24.2925C25.801 24.3854 25.8747 24.4957 25.9249 24.6171C25.9752 24.7385 26.0011 24.8686 26.0011 25C26.0011 25.1314 25.9752 25.2615 25.9249 25.3829C25.8747 25.5043 25.801 25.6146 25.7081 25.7075C25.6151 25.8004 25.5048 25.8741 25.3835 25.9244C25.2621 25.9747 25.132 26.0006 25.0006 26.0006C24.8692 26.0006 24.7391 25.9747 24.6177 25.9244C24.4963 25.8741 24.386 25.8004 24.2931 25.7075L16.0006 17.4138L7.70806 25.7075C7.52042 25.8951 7.26592 26.0006 7.00056 26.0006C6.73519 26.0006 6.4807 25.8951 6.29306 25.7075C6.10542 25.5199 6 25.2654 6 25C6 24.7346 6.10542 24.4801 6.29306 24.2925L14.5868 16L6.29306 7.70751C6.10542 7.51987 6 7.26537 6 7.00001C6 6.73464 6.10542 6.48015 6.29306 6.29251C6.4807 6.10487 6.73519 5.99945 7.00056 5.99945C7.26592 5.99945 7.52042 6.10487 7.70806 6.29251L16.0006 14.5863L24.2931 6.29251C24.4807 6.10487 24.7352 5.99945 25.0006 5.99945C25.2659 5.99945 25.5204 6.10487 25.7081 6.29251C25.8957 6.48015 26.0011 6.73464 26.0011 7.00001C26.0011 7.26537 25.8957 7.51987 25.7081 7.70751L17.4143 16L25.7081 24.2925Z"
-          fill="currentColor"
-        />
-      </svg>
-    );
-  }
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="32"
-      height="32"
-      viewBox="0 0 32 32"
-      fill="none"
-    >
-      <path
-        d="M25.5308 24.47C25.6045 24.5387 25.6636 24.6215 25.7046 24.7135C25.7456 24.8055 25.7676 24.9048 25.7694 25.0055C25.7712 25.1062 25.7527 25.2062 25.7149 25.2996C25.6772 25.393 25.6211 25.4778 25.5499 25.549C25.4786 25.6203 25.3938 25.6764 25.3004 25.7141C25.207 25.7518 25.107 25.7704 25.0063 25.7686C24.9056 25.7668 24.8063 25.7448 24.7143 25.7038C24.6223 25.6628 24.5395 25.6037 24.4708 25.53L16.0008 17.0612L7.53082 25.53C7.38865 25.6625 7.2006 25.7346 7.0063 25.7312C6.812 25.7277 6.62661 25.649 6.4892 25.5116C6.35179 25.3742 6.27308 25.1888 6.26965 24.9945C6.26622 24.8002 6.33834 24.6122 6.47082 24.47L14.9396 16L6.47082 7.53C6.33834 7.38782 6.26622 7.19978 6.26965 7.00548C6.27308 6.81118 6.35179 6.62579 6.4892 6.48838C6.62661 6.35096 6.812 6.27225 7.0063 6.26882C7.2006 6.2654 7.38865 6.33752 7.53082 6.47L16.0008 14.9387L24.4708 6.47C24.613 6.33752 24.801 6.2654 24.9953 6.26882C25.1896 6.27225 25.375 6.35096 25.5124 6.48838C25.6499 6.62579 25.7286 6.81118 25.732 7.00548C25.7354 7.19978 25.6633 7.38782 25.5308 7.53L17.0621 16L25.5308 24.47Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-};
-
-export default XIcon;
+import IconProps from "../../IconProps";
+
+const XIcon = ({ type = "light" }: IconProps) => {
+  if (type === "thin") {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+        fill="none"
+      >
+        <path
+          d="M25.354 24.6463C25.4478 24.7401 25.5006 24.8673 25.5006 25C25.5006 25.1327 25.4478 25.2599 25.354 25.3538C25.2602 25.4476 25.133 25.5003 25.0003 25.5003C24.8676 25.5003 24.7403 25.4476 24.6465 25.3538L16.0003 16.7075L7.35403 25.3538C7.26021 25.4476 7.13296 25.5003 7.00028 25.5003C6.8676 25.5003 6.74035 25.4476 6.64653 25.3538C6.55271 25.2599 6.5 25.1327 6.5 25C6.5 24.8673 6.55271 24.7401 6.64653 24.6463L15.2928 16L6.64653 7.35375C6.55271 7.25993 6.5 7.13269 6.5 7C6.5 6.86732 6.55271 6.74007 6.64653 6.64625C6.74035 6.55243 6.8676 6.49973 7.00028 6.49973C7.13296 6.49973 7.26021 6.55243 7.35403 6.64625L16.0003 15.2925L24.6465 6.64625C24.693 6.5998 24.7481 6.56295 24.8088 6.53781C24.8695 6.51267 24.9346 6.49973 25.0003 6.49973C25.066 6.49973 25.131 6.51267 25.1917 6.53781C25.2524 6.56295 25.3076 6.5998 25.354 6.64625C25.4005 6.69271 25.4373 6.74786 25.4625 6.80856C25.4876 6.86925 25.5006 6.93431 25.5006 7C25.5006 7.0657 25.4876 7.13076 25.4625 7.19145C25.4373 7.25215 25.4005 7.3073 25.354 7.35375L16.7078 16L25.354 24.6463Z"
+          fill="currentColor"
+        />
+      </svg>
+    );
+  }
+
+  if (type === "regular") {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+        fill="none"
+      >
+        <path
+          d="M25.7081 24.2925C25.801 24.3854 25.8747 24.4957 25.9249 24.6171C25.9752 24.7385 26.0011 24.8686 26.0011 25C26.0011 25.1314 25.9752 25.2615 25.9249 25.3829C25.8747 25.5043 25.801 25.6146 25.7081 25.7075C25.6151 25.8004 25.5048 25.8741 25.3835 25.9244C25.2621 25.9747 25.132 26.0006 25.0006 26.0006C24.8692 26.0006 24.7391 25.9747 24.6177 25.9244C24.4963 25.8741 24.386 25.8004 24.2931 25.7075L16.0006 17.4138L7.70806 25.7075C7.52042 25.8951 7.26592 26.0006 7.00056 26.0006C6.73519 26.0006 6.4807 25.8951 6.29306 25.7075C6.10542 25.5199 6 25.2654 6 25C6 24.7346 6.10542 24.4801 6.29306 24.2925L14.5868 16L6.29306 7.70751C6.10542 7.51987 6 7.26537 6 7.00001C6 6.73464 6.10542 6.48015 6.29306 6.29251C6.4807 6.10487 6.73519 5.99945 7.00056 5.99945C7.26592 5.99945 7.52042 6.10487 7.70806 6.29251L16.0006 14.5863L24.2931 6.29251C24.4807 6.10487 24.7352 5.99945 25.0006 5.99945C25.2659 5.99945 25.5204 6.10487 25.7081 6.29251C25.8957 6.48015 26.0011 6.73464 26.0011 7.00001C26.0011 7.26537 25.8957 7.51987 25.7081 7.70751L17.4143 16L25.7081 24.2925Z"
+          fill="currentColor"
+        />
+      </svg>
+    );
+  }
+  if (type === "bold") {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+        fill="none"
+      >
+        <path
+          d="M26.0612 23.9388C26.343 24.2205 26.5013 24.6027 26.5013 25.0013C26.5013 25.3998 26.343 25.782 26.0612 26.0638C25.7794 26.3455 25.3972 26.5039 24.9987 26.5039C24.6002 26.5039 24.218 26.3455 23.9362 26.0638L15.9999 18.125L8.0612 26.0613C7.7794 26.343 7.39721 26.5014 6.9987 26.5014C6.60018 26.5014 6.21799 26.343 5.9362 26.0613C5.6544 25.7795 5.49609 25.3973 5.49609 24.9988C5.49609 24.6002 5.6544 24.218 5.9362 23.9363L13.8749 16L5.9387 8.06125C5.6569 7.77946 5.49859 7.39727 5.49859 6.99876C5.49859 6.60024 5.6569 6.21805 5.9387 5.93626C6.22049 5.65446 6.60268 5.49615 7.0012 5.49615C7.39971 5.49615 7.7819 5.65446 8.0637 5.93626L15.9999 13.875L23.9387 5.93501C24.2205 5.65321 24.6027 5.4949 25.0012 5.4949C25.3997 5.4949 25.7819 5.65321 26.0637 5.93501C26.3455 6.2168 26.5038 6.59899 26.5038 6.99751C26.5038 7.39602 26.3455 7.77821 26.0637 8.06001L18.1249 16L26.0612 23.9388Z"
+          fill="currentColor"
+        />
+      </svg>
+    );
+  }
+  if (type === "fill") {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+        fill="none"
+      >
+        <path
+          d="M26 4H6C5.46957 4 4.96086 4.21071 4.58579 4.58579C4.21071 4.96086 4 5.46957 4 6V26C4 26.5304 4.21071 27.0391 4.58579 27.4142C4.96086 27.7893 5.46957 28 6 28H26C26.5304 28 27.0391 27.7893 27.4142 27.4142C27.7893 27.0391 28 26.5304 28 26V6C28 5.46957 27.7893 4.96086 27.4142 4.58579C27.0391 4.21071 26.5304 4 26 4ZM22.7075 21.2925C22.8004 21.3854 22.8741 21.4957 22.9244 21.6171C22.9747 21.7385 23.0006 21.8686 23.0006 22C23.0006 22.1314 22.9747 22.2615 22.9244 22.3829C22.8741 22.5043 22.8004 22.6146 22.7075 22.7075C22.6146 22.8004 22.5043 22.8741 22.3829 22.9244C22.2615 22.9747 22.1314 23.0006 22 23.0006C21.8686 23.0006 21.7385 22.9747 21.6171 22.9244C21.4957 22.8741 21.3854 22.8004 21.2925 22.7075L16 17.4137L10.7075 22.7075C10.5199 22.8951 10.2654 23.0006 10 23.0006C9.73464 23.0006 9.48014 22.8951 9.2925 22.7075C9.10486 22.5199 8.99944 22.2654 8.99944 22C8.99944 21.7346 9.10486 21.4801 9.2925 21.2925L14.5863 16L9.2925 10.7075C9.10486 10.5199 8.99944 10.2654 8.99944 10C8.99944 9.73464 9.10486 9.48014 9.2925 9.2925C9.48014 9.10486 9.73464 8.99944 10 8.99944C10.2654 8.99944 10.5199 9.10486 10.7075 9.2925L16 14.5863L21.2925 9.2925C21.4801 9.10486 21.7346 8.99944 22 8.99944C22.2654 8.99944 22.5199 9.10486 22.7075 9.2925C22.8951 9.48014 23.0006 9.73464 23.0006 10C23.0006 10.2654 22.8951 10.5199 22.7075 10.7075L17.4137 16L22.7075 21.2925Z"
+          fill="currentColor"
+        />
+      </svg>
+    );
+  }
+  if (type === "duotone") {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+        fill="none"
+      >
+        <path
+          opacity="0.2"
+          d="M27 6V26C27 26.2652 26.8946 26.5196 26.7071 26.7071C26.5196 26.8946 26.2652 27 26 27H6C5.73478 27 5.48043 26.8946 5.29289 26.7071C5.10536 26.5196 5 26.2652 5 26V6C5 5.73478 5.10536 5.48043 5.29289 5.29289C5.48043 5.10536 5.73478 5 6 5H26C26.2652 5 26.5196 5.10536 26.7071 5.29289C26.8946 5.48043 27 5.73478 27 6Z"
+          fill="currentColor"
+        />
+        <path
+          d="M25.7081 24.2925C25.801 24.3854 25.8747 24.4957 25.9249 24.6171C25.9752 24.7385 26.0011 24.8686 26.0011 25C26.0011 25.1314 25.9752 25.2615 25.9249 25.3829C25.8747 25.5043 25.801 25.6146 25.7081 25.7075C25.6151 25.8004 25.5048 25.8741 25.3835 25.9244C25.2621 25.9747 25.132 26.0006 25.0006 26.0006C24.8692 26.0006 24.7391 25.9747 24.6177 25.9244C24.4963 25.8741 24.386 25.8004 24.2931 25.7075L16.0006 17.4138L7.70806 25.7075C7.52042 25.8951 7.26592 26.0006 7.00056 26.0006C6.73519 26.0006 6.4807 25.8951 6.29306 25.7075C6.10542 25.5199 6 25.2654 6 25C6 24.7346 6.10542 24.4801 6.29306 24.2925L14.5868 16L6.29306 7.70751C6.10542 7.51987 6 7.26537 6 7.00001C6 6.73464 6.10542 6.48015 6.29306 6.29251C6.4807 6.10487 6.73519 5.99945 7.00056 5.99945C7.26592 5.99945 7.52042 6.10487 7.70806 6.29251L16.0006 14.5863L24.2931 6.29251C24.4807 6.10487 24.7352 5.99945 25.0006 5.99945C25.2659 5.99945 25.5204 6.10487 25.7081 6.29251C25.8957 6.48015 26.0011 6.73464 26.0011 7.00001C26.0011 7.26537 25.8957 7.51987 25.7081 7.70751L17.4143 16L25.7081 24.2925Z"
+          fill="currentColor"
+        />
+      </svg>
+    );
+  }
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+    >
+      <path
+        d="M25.5308 24.47C25.6045 24.5387 25.6636 24.6215 25.7046 24.7135C25.7456 24.8055 25.7676 24.9048 25.7694 25.0055C25.7712 25.1062 25.7527 25.2062 25.7149 25.2996C25.6772 25.393 25.6211 25.4778 25.5499 25.549C25.4786 25.6203 25.3938 25.6764 25.3004 25.7141C25.207 25.7518 25.107 25.7704 25.0063 25.7686C24.9056 25.7668 24.8063 25.7448 24.7143 25.7038C24.6223 25.6628 24.5395 25.6037 24.4708 25.53L16.0008 17.0612L7.53082 25.53C7.38865 25.6625 7.2006 25.7346 7.0063 25.7312C6.812 25.7277 6.62661 25.649 6.4892 25.5116C6.35179 25.3742 6.27308 25.1888 6.26965 24.9945C6.26622 24.8002 6.33834 24.6122 6.47082 24.47L14.9396 16L6.47082 7.53C6.33834 7.38782 6.26622 7.19978 6.26965 7.00548C6.27308 6.81118 6.35179 6.62579 6.4892 6.48838C6.62661 6.35096 6.812 6.27225 7.0063 6.26882C7.2006 6.2654 7.38865 6.33752 7.53082 6.47L16.0008 14.9387L24.4708 6.47C24.613 6.33752 24.801 6.2654 24.9953 6.26882C25.1896 6.27225 25.375 6.35096 25.5124 6.48838C25.6499 6.62579 25.7286 6.81118 25.732 7.00548C25.7354 7.19978 25.6633 7.38782 25.5308 7.53L17.0621 16L25.5308 24.47Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default XIcon;

package/src/Components/Layout/Header/Header.stories.tsx

@@ -0,0 +1,56 @@
+import {Meta, StoryObj} from "@storybook/react";
+import Header from "./Header.tsx";
+import HeaderLeft from "./HeaderLeft.tsx";
+import HeaderRight from "./HeaderRight.tsx";
+import TextField from "../../Form/TextField/TextField.tsx";
+import MagnifyingGlass from "../../Icons/SystemAndDevice/MagnifyingGlass/MagnifyingGlass.tsx";
+import NotificationsBell from "../../DataDisplay/NotificationsBell/NotificationsBell.tsx";
+import ProfileAvatar from "../ProfileAvatar/ProfileAvatar.tsx";
+
+
+const meta: Meta = {
+  title: "Layout / Header",
+  component: Header,
+  parameters: {
+    layout: 'fullscreen', // remove default Storybook padding
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const logo = (
+  <div>
+    <a href={"/"}>
+      <img src={'/image/logo.svg'} width={125} height={45} alt={'Hello Better'}/>
+    </a>
+  </div>
+);
+
+const logoSmall = (
+  <div>
+    <a href={"/"}>
+      <img src={'/image/logo-small.svg'} width={46} height={45} alt={'Hello Better'}/>
+    </a>
+  </div>
+);
+
+const HeaderTemplate: Story = {
+  render: () => {
+    return (
+      <Header>
+        <HeaderLeft logo={logo} logoSmall={logoSmall}/>
+        <HeaderRight searchField={<TextField icon={<MagnifyingGlass/>}/>} searchFieldShow={true}>
+          <li><NotificationsBell/></li>
+          <li><ProfileAvatar initials={'JS'}/></li>
+        </HeaderRight>
+      </Header>
+    );
+  },
+};
+
+export const HeaderComponent = {
+  ...HeaderTemplate,
+};

package/src/Components/Layout/Header/Header.tsx

@@ -1,4 +1,13 @@
-const Header = () => {
+import HeaderProps from "./HeaderProps.tsx";
+import styles from "./header.module.scss"
+
+const Header = (props: HeaderProps) => {
+
+  const {children, extraClass = ''} = props
+
+  return <header className={`${styles.header} ${extraClass}`}>
+    {children}
+  </header>
 
 }