@invoice-sdk/widget 0.0.0 → 1.1.0

package/dist/lib/constants/index.d.ts

@@ -0,0 +1,9 @@
+export interface Option {
+    value: string;
+    label: string;
+}
+export declare const countryOptions: Option[];
+export declare const allProvinces: Record<string, Option[]>;
+export declare const allDistricts: Record<string, Option[]>;
+export declare const allWards: Record<string, Option[]>;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/constants/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/constants/index.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,cAAc,EAAE,MAAM,EAGlC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAQjD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAgBjD,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAyB7C,CAAC"}

package/dist/main.d.ts

@@ -0,0 +1,2 @@
+import './index.css';
+//# 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":"AAGA,OAAO,aAAa,CAAA"}

package/dist/pages/payment.d.ts

@@ -0,0 +1,3 @@
+declare const Payment: () => import("react/jsx-runtime").JSX.Element;
+export default Payment;
+//# sourceMappingURL=payment.d.ts.map

package/dist/pages/payment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"payment.d.ts","sourceRoot":"","sources":["../../src/pages/payment.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,OAAO,+CAoBZ,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/pages/plan.d.ts

@@ -0,0 +1,3 @@
+declare const SelectPlan: React.FC;
+export default SelectPlan;
+//# sourceMappingURL=plan.d.ts.map

package/dist/pages/plan.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plan.d.ts","sourceRoot":"","sources":["../../src/pages/plan.tsx"],"names":[],"mappings":"AAcA,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EA8HvB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/pages/register.d.ts

@@ -0,0 +1,3 @@
+declare const Register: () => import("react/jsx-runtime").JSX.Element;
+export default Register;
+//# sourceMappingURL=register.d.ts.map

package/dist/pages/register.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"register.d.ts","sourceRoot":"","sources":["../../src/pages/register.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,QAAQ,+CAOb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/store/process.d.ts

@@ -0,0 +1,10 @@
+type State = {
+    step: number;
+};
+type Actions = {
+    nextStep: () => void;
+    prevStep: () => void;
+};
+export declare const useProcessStore: import("zustand").UseBoundStore<import("zustand").StoreApi<State & Actions>>;
+export {};
+//# sourceMappingURL=process.d.ts.map

package/dist/store/process.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"process.d.ts","sourceRoot":"","sources":["../../src/store/process.ts"],"names":[],"mappings":"AAEA,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAC;CAEd,CAAA;AAED,KAAK,OAAO,GAAG;IACb,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,eAAe,8EAKzB,CAAC"}

package/dist/store/register.d.ts

@@ -0,0 +1,41 @@
+interface IAddressValue {
+    country: string;
+    province: string;
+    district: string;
+    ward: string;
+    detail: string;
+}
+export interface PackageOption {
+    id: string;
+    code: string;
+    unitsPerMonth: number;
+    priceVND: number;
+}
+export interface IProvider {
+    name: string;
+    route: string;
+    logo: string;
+}
+type State = {
+    selectedProvider: IProvider | null;
+    form: {
+        taxCode: string;
+        companyName: string;
+        representative: string;
+        position: string;
+        email: string;
+        phoneNumber: string | null;
+        address: IAddressValue;
+        license: File | null;
+    };
+    selectedOption: PackageOption | null;
+};
+type Actions = {
+    setSelectedProvider: (provider: IProvider | null) => void;
+    setForm: (form: Partial<State["form"]>) => void;
+    setSelectedOption: (plan: PackageOption | null) => void;
+    reset: () => void;
+};
+export declare const useRegisterStore: import("zustand").UseBoundStore<import("zustand").StoreApi<State & Actions>>;
+export {};
+//# sourceMappingURL=register.d.ts.map

package/dist/store/register.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"register.d.ts","sourceRoot":"","sources":["../../src/store/register.ts"],"names":[],"mappings":"AAEA,UAAU,aAAa;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAGD,KAAK,KAAK,GAAG;IACX,gBAAgB,EAAE,SAAS,GAAG,IAAI,CAAC;IACnC,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM,CAAC;QAChB,WAAW,EAAE,MAAM,CAAC;QACpB,cAAc,EAAE,MAAM,CAAC;QACvB,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;QAC3B,OAAO,EAAE,aAAa,CAAC;QACvB,OAAO,EAAE,IAAI,GAAG,IAAI,CAAC;KACtB,CAAC;IACF,cAAc,EAAE,aAAa,GAAG,IAAI,CAAC;CACtC,CAAC;AAEF,KAAK,OAAO,GAAG;IACb,mBAAmB,EAAE,CAAC,QAAQ,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1D,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,IAAI,CAAC;IAChD,iBAAiB,EAAE,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,KAAK,IAAI,CAAC;IACxD,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AACF,eAAO,MAAM,gBAAgB,8EAkD1B,CAAC"}

package/dist/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../src/App.tsx","../src/index.ts","../src/main.tsx","../src/vite-env.d.ts","../src/components/button.tsx","../src/components/layout.tsx","../src/components/wizard-progress.tsx","../src/components/payment/checkout.tsx","../src/components/payment/order-info.tsx","../src/components/payment/qr-payment.tsx","../src/components/register-form/custom-checkbox.tsx","../src/components/register-form/file-upload.tsx","../src/components/register-form/index.tsx","../src/components/register-form/input-field.tsx","../src/components/register-form/select-filed.tsx","../src/components/register-form/select-option.tsx","../src/components/register-form/select-provider.tsx","../src/components/select-plan/package-selector.tsx","../src/components/select-plan/search-field.tsx","../src/lib/constants/index.ts","../src/pages/payment.tsx","../src/pages/plan.tsx","../src/pages/register.tsx","../src/store/process.ts","../src/store/register.ts"],"version":"5.8.3"}

package/dist/widget.css

@@ -0,0 +1 @@
+/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-content:"";--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-500:oklch(63.7% .237 25.331);--color-green-50:oklch(98.2% .018 155.826);--color-green-500:oklch(72.3% .219 149.579);--color-green-700:oklch(52.7% .154 150.069);--color-blue-500:oklch(62.3% .214 259.815);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-strong-950:#0e121b;--color-primary:#008c44;--color-primary-dark:#085f3b;--color-weak-50:#f5f7fa;--color-soft-400:#99a0ae;--color-icon-primary:#008c4f;--color-icon-soft-400:#99a0ae;--color-text-black:#2c2c2c;--color-border-light:#e3e3e3;--color-grey-6:#bfbfbf;--color-grey-7:#8c8c8c;--color-grey-8:#595959;--color-soft-200:#e1e4ea}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::-moz-placeholder{opacity:1}::placeholder{opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){::-moz-placeholder{color:currentColor}::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::-moz-placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.top-0{top:calc(var(--spacing)*0)}.top-2{top:calc(var(--spacing)*2)}.right-2{right:calc(var(--spacing)*2)}.right-\[-54px\]{right:-54px}.z-10{z-index:10}.z-50{z-index:50}.z-auto{z-index:auto}.mx-auto{margin-inline:auto}.mt-0\.5{margin-top:calc(var(--spacing)*.5)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-4{margin-top:calc(var(--spacing)*4)}.mr-3{margin-right:calc(var(--spacing)*3)}.mr-4{margin-right:calc(var(--spacing)*4)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.ml-1{margin-left:calc(var(--spacing)*1)}.ml-2{margin-left:calc(var(--spacing)*2)}.ml-3{margin-left:calc(var(--spacing)*3)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.aspect-square{aspect-ratio:1}.h-2{height:calc(var(--spacing)*2)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-20{height:calc(var(--spacing)*20)}.h-\[300px\]{height:300px}.h-fit{height:-moz-fit-content;height:fit-content}.h-full{height:100%}.h-screen{height:100vh}.max-h-screen{max-height:100vh}.min-h-screen{min-height:100vh}.w-2{width:calc(var(--spacing)*2)}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-20{width:calc(var(--spacing)*20)}.w-\[1px\]{width:1px}.w-\[440px\]{width:440px}.w-\[1320px\]{width:1320px}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-screen{width:100vw}.max-w-\[200px\]{max-width:200px}.max-w-\[1070px\]{max-width:1070px}.max-w-\[1072px\]{max-width:1072px}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}.gap-8{gap:calc(var(--spacing)*8)}.gap-10{gap:calc(var(--spacing)*10)}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*4)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-x-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-\[10px\]{border-radius:10px}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t-\[36px\]{border-top-style:var(--tw-border-style);border-top-width:36px}.border-b-\[36px\]{border-bottom-style:var(--tw-border-style);border-bottom-width:36px}.border-l-\[16px\]{border-left-style:var(--tw-border-style);border-left-width:16px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-\[\#E1E4EA\]{border-color:#e1e4ea}.border-\[\#E4E7EC\]{border-color:#e4e7ec}.border-border-light{border-color:var(--color-border-light)}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-400{border-color:var(--color-gray-400)}.border-green-500{border-color:var(--color-green-500)}.border-grey-6{border-color:var(--color-grey-6)}.border-primary{border-color:var(--color-primary)}.border-red-500{border-color:var(--color-red-500)}.border-soft-200{border-color:var(--color-soft-200)}.border-weak-50{border-color:var(--color-weak-50)}.\!border-l-primary\/0{border-left-color:#0000!important}@supports (color:color-mix(in lab,red,red)){.\!border-l-primary\/0{border-left-color:color-mix(in oklab,var(--color-primary)0%,transparent)!important}}.bg-black{background-color:var(--color-black)}.bg-border-light{background-color:var(--color-border-light)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-green-50{background-color:var(--color-green-50)}.bg-green-500{background-color:var(--color-green-500)}.bg-icon-primary{background-color:var(--color-icon-primary)}.bg-icon-soft-400{background-color:var(--color-icon-soft-400)}.bg-primary{background-color:var(--color-primary)}.bg-primary\/10{background-color:#008c441a}@supports (color:color-mix(in lab,red,red)){.bg-primary\/10{background-color:color-mix(in oklab,var(--color-primary)10%,transparent)}}.bg-primary\/16{background-color:#008c4429}@supports (color:color-mix(in lab,red,red)){.bg-primary\/16{background-color:color-mix(in oklab,var(--color-primary)16%,transparent)}}.bg-transparent{background-color:#0000}.bg-weak-50{background-color:var(--color-weak-50)}.bg-white{background-color:var(--color-white)}.object-contain{-o-object-fit:contain;object-fit:contain}.p-2{padding:calc(var(--spacing)*2)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-10{padding-inline:calc(var(--spacing)*10)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.py-4{padding-block:calc(var(--spacing)*4)}.py-5{padding-block:calc(var(--spacing)*5)}.py-8{padding-block:calc(var(--spacing)*8)}.pt-4{padding-top:calc(var(--spacing)*4)}.pr-9{padding-right:calc(var(--spacing)*9)}.pb-6{padding-bottom:calc(var(--spacing)*6)}.text-center{text-align:center}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[28px\]{font-size:28px}.leading-3{--tw-leading:calc(var(--spacing)*3);line-height:calc(var(--spacing)*3)}.leading-4{--tw-leading:calc(var(--spacing)*4);line-height:calc(var(--spacing)*4)}.leading-5{--tw-leading:calc(var(--spacing)*5);line-height:calc(var(--spacing)*5)}.leading-6{--tw-leading:calc(var(--spacing)*6);line-height:calc(var(--spacing)*6)}.leading-\[18px\]{--tw-leading:18px;line-height:18px}.leading-\[30px\]{--tw-leading:30px;line-height:30px}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.whitespace-nowrap{white-space:nowrap}.\!text-primary{color:var(--color-primary)!important}.text-\[\#475467\]{color:#475467}.text-\[\#ED1C24\]{color:#ed1c24}.text-black{color:var(--color-black)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-gray-900{color:var(--color-gray-900)}.text-green-500{color:var(--color-green-500)}.text-green-700{color:var(--color-green-700)}.text-grey-7{color:var(--color-grey-7)}.text-grey-8{color:var(--color-grey-8)}.text-primary{color:var(--color-primary)}.text-primary-dark{color:var(--color-primary-dark)}.text-red-500{color:var(--color-red-500)}.text-soft-400{color:var(--color-soft-400)}.text-strong-950{color:var(--color-strong-950)}.text-text-black{color:var(--color-text-black)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.underline{text-decoration-line:underline}.placeholder-gray-400::-moz-placeholder{color:var(--color-gray-400)}.placeholder-gray-400::placeholder{color:var(--color-gray-400)}.shadow-\[0px_1px_8px_0px_rgba\(82\,88\,102\,0\.06\)\]{--tw-shadow:0px 1px 8px 0px var(--tw-shadow-color,#5258660f);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0px_2px_6px_0px_rgba\(31\,34\,41\,0\.04\)\]{--tw-shadow:0px 2px 6px 0px var(--tw-shadow-color,#1f22290a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,visibility,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-250{--tw-duration:.25s;transition-duration:.25s}.peer-checked\:border-primary:is(:where(.peer):checked~*){border-color:var(--color-primary)}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:top-1\/2:before{content:var(--tw-content);top:50%}.before\:left-1\/2:before{content:var(--tw-content);left:50%}.before\:hidden:before{content:var(--tw-content);display:none}.before\:h-2\.5:before{content:var(--tw-content);height:calc(var(--spacing)*2.5)}.before\:w-2\.5:before{content:var(--tw-content);width:calc(var(--spacing)*2.5)}.before\:-translate-x-1\/2:before{content:var(--tw-content);--tw-translate-x: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.before\:-translate-y-1\/2:before{content:var(--tw-content);--tw-translate-y: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.before\:rounded-full:before{content:var(--tw-content);border-radius:3.40282e38px}.before\:bg-primary:before{content:var(--tw-content);background-color:var(--color-primary)}.peer-checked\:before\:block:is(:where(.peer):checked~*):before{content:var(--tw-content);display:block}@media (hover:hover){.hover\:border-gray-300:hover{border-color:var(--color-gray-300)}.hover\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\:bg-primary-dark:hover{background-color:var(--color-primary-dark)}.hover\:bg-transparent:hover{background-color:#0000}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-blue-500:focus{--tw-ring-color:var(--color-blue-500)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.data-\[checked\=true\]\:border-primary[data-checked=true]{border-color:var(--color-primary)}@media (min-width:48rem){.md\:w-1\/2{width:50%}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:gap-20{gap:calc(var(--spacing)*20)}}}.heading{text-color:var(--color-text-black);font-size:14px;font-weight:600}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}

package/package.json

@@ -1,11 +1,5 @@
 {
-  "dependencies": {
-    "@invoice-sdk/api": "workspace:*",
-    "react-hook-form": "^7.56.4",
-    "react-router-dom": "6.30.1",
-    "zod": "^3.25.42",
-    "zustand": "^5.0.5"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@eslint/js": "^9.25.0",
     "@hookform/resolvers": "^5.0.1",
@@ -22,22 +16,45 @@
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.30.1",
     "vite": "^6.3.5",
-    "vite-tsconfig-paths": "^5.1.4"
+    "vite-tsconfig-paths": "^5.1.4",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/commit-analyzer": "^13.0.1",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/npm": "^12.0.1",
+    "@semantic-release/release-notes-generator": "^14.0.3",
+    "semantic-release": "^24.2.4"
   },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
   "name": "@invoice-sdk/widget",
   "peerDependencies": {
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-hook-form": "^7.56.4",
+    "zod": "^3.25.42",
+    "zustand": "^5.0.5"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "tsc -b && vite build",
+    "build": "vite build && tsc -b",
     "dev": "vite",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "publish": "npm publish --access public"
   },
   "type": "module",
-  "version": "0.0.0"
-}
+  "types": "dist/index.d.ts",
+  "version": "1.1.0"
+}

package/eslint.config.js

@@ -1,28 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-
-export default tseslint.config(
-  { ignores: ['dist'] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
-    },
-  },
-)

package/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/src/App.css

@@ -1 +0,0 @@
-@import "tailwindcss";

package/src/App.tsx

@@ -1,40 +0,0 @@
-import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
-import './App.css';
-import Layout from './components/layout';
-import RegistrationForm from './pages/register';
-import SelectPlan from './pages/select-plan';
-import SelectProvider from './pages/select-provider';
-import Status from './pages/status';
-
-function InvoiceRegisterWidget() {
-
-  return (
-    <BrowserRouter>
-      <Routes>
-        {/* ANY route under "/" will first render <Layout /> */}
-        <Route element={<Layout />}>
-          {/* Default redirect (if you want “/” → “/home” for example) */}
-          <Route index element={<Navigate to="/select-provider" replace />} />
-
-          {/* Actual pages */}
-          <Route path="select-provider" element={<SelectProvider />} />
-          <Route path="register" element={<RegistrationForm />} />
-          <Route path="select-plan" element={<SelectPlan />} />
-          <Route path="status" element={<Status />} />
-
-          {/* Optionally: a catch‐all “Not Found” */}
-          <Route
-            path="*"
-            element={
-              <div className="text-center text-red-500">
-                404: Page Not Found
-              </div>
-            }
-          />
-        </Route>
-      </Routes>
-    </BrowserRouter>
-  )
-}
-
-export default InvoiceRegisterWidget

package/src/assets/react.svg

@@ -1 +0,0 @@
-<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="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/src/components/button.tsx

@@ -1,23 +0,0 @@
-
-type Props = {
-  title: string
-  isDisabled?: boolean
-  handleClick?: () => void
-  type?: 'submit' | 'button'
-  className?: string
-}
-
-const Button = (props: Props) => {
-  return (
-    <button
-      type={props.type || 'button'}
-      disabled={props.isDisabled}
-      className={`bg-green-500 hover:bg-green-600 text-white px-6 py-2 rounded disabled:opacity-50 *:disabled:cursor-not-allowed ${props.className}`}
-      onClick={props.handleClick}
-      >
-         {props.title}
-    </button>
-  )
-}
-
-export default Button

package/src/components/form/custom-checkbox.tsx

@@ -1,20 +0,0 @@
-type Props = {
-  checked: boolean
-  setChecked: (checked: boolean) => void
-}
-const CustomCheckbox = ({ checked, setChecked }: Props) => {
-  return (
-    <label className='relative inline-flex cursor-pointer items-center'>
-      <input
-        type='checkbox'
-        className='peer sr-only'
-        checked={checked}
-        onChange={(e) => setChecked(e.target.checked)}
-      />
-
-      <div className='border-[#ACADAE] relative h-5 w-5 rounded-full border-2 before:absolute before:left-1/2 before:top-1/2 before:hidden before:h-2.5 before:w-2.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-green-500 peer-checked:border-green-500 peer-checked:before:block' />
-    </label>
-  )
-}
-
-export default CustomCheckbox

package/src/components/form/file-upload.tsx

@@ -1,141 +0,0 @@
-import { useCallback, useEffect, useRef, useState, type ChangeEvent } from "react";
-
-type FileUploadProps = {
-  label: string;
-  required?: boolean;
-  file: File | null;
-  onFileChange: (file: File) => void;
-  error?: string;
-};
-
-const FileUpload: React.FC<FileUploadProps> = ({
-  label,
-  required = false,
-  file,
-  onFileChange,
-  error,
-}) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
-  const [isModalOpen, setModalOpen] = useState(false);
-
-  const handleFileInput = (e: ChangeEvent<HTMLInputElement>) => {
-    const chosen = e.target.files?.[0];
-    if (!chosen) return;
-    onFileChange(chosen);
-    setPreviewUrl(URL.createObjectURL(chosen));
-  };
-
-  const openPicker = useCallback(() => {
-    inputRef.current?.click();
-  }, []);
-
-  useEffect(() => {
-    if(file){
-      setPreviewUrl(URL.createObjectURL(file as File))
-    }
-  }, [file])
-
-  return (
-    <>
-      {/* Label + Upload button */}
-      <div className="flex flex-col">
-        <label className="font-medium mb-1 text-gray-700">
-          {label}{required && <span className="text-red-500 ml-1">*</span>}
-        </label>
-        <div className="flex items-center">
-          <button
-            type="button"
-            onClick={openPicker}
-            className="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded"
-          >
-            Upload file
-          </button>
-          <input
-            ref={inputRef}
-            type="file"
-            accept="image/*,.pdf"
-            className="hidden"
-            onChange={handleFileInput}
-          />
-        </div>
-
-        {/* Preview box */}
-        <div
-          className="mt-2 h-40 w-full bg-gray-200 rounded overflow-hidden flex items-center justify-center cursor-pointer"
-          onClick={() => previewUrl && setModalOpen(true)}
-        >
-          {previewUrl ? (
-            file?.type === 'application/pdf' ? (
-              <object
-                data={previewUrl}
-                type="application/pdf"
-                width="100%"
-                height="100%"
-              >
-                <p className="text-gray-600 text-sm">
-                  Cannot preview PDF.{' '}
-                  <a
-                    href={previewUrl}
-                    target="_blank"
-                    rel="noreferrer"
-                    className="text-blue-600 underline"
-                  >
-                    Download PDF
-                  </a>
-                </p>
-              </object>
-            ) : (
-              <img
-                src={previewUrl}
-                alt="Preview"
-                className="h-full object-contain"
-              />
-            )
-          ) : (
-            <span className="text-gray-500">No file selected</span>
-          )}
-        </div>
-
-        {error && <span className="text-red-500 text-sm mt-1">{error}</span>}
-      </div>
-
-      {/* Lightbox Modal */}
-     {isModalOpen && previewUrl && (
-  <div
-    className="fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center"
-    onClick={() => setModalOpen(false)}
-  >
-    <div
-      className="relative w-full h-full"
-      onClick={(e) => e.stopPropagation()}
-    >
-      <button
-        onClick={() => setModalOpen(false)}
-        className="absolute top-2 right-2 text-white text-2xl"
-        aria-label="Close preview"
-      >
-        &times;
-      </button>
-
-      {file?.type === 'application/pdf' ? (
-        <object
-          data={previewUrl}
-          type="application/pdf"
-          className="w-full h-full object-contain"
-        />
-      ) : (
-        <img
-          src={previewUrl}
-          alt="Full Preview"
-          className="w-full h-full object-contain"
-        />
-      )}
-    </div>
-  </div>
-)}
-    </>
-  );
-};
-
-export default FileUpload;

package/src/components/form/input-field.tsx

@@ -1,35 +0,0 @@
-import { forwardRef } from "react";
-
-type InputFieldProps = {
-  label: string;
-  required?: boolean;
-  error?: string;
-} & React.InputHTMLAttributes<HTMLInputElement>;
-
-const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
-  ({ label, required = false, error, ...props }, ref) => (
-    <div className="flex flex-col">
-      <label
-        htmlFor={props.name}
-        className="font-medium mb-1 text-gray-700"
-      >
-        {label}
-        {required && <span className="text-red-500 ml-1">*</span>}
-      </label>
-      <input
-        id={props.name}
-        ref={ref}
-        {...props}
-        className={`border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 ${
-          error ? 'border-red-500' : 'border-gray-300'
-        }`}
-      />
-      {error && (
-        <span className="text-red-500 text-sm mt-1">{error}</span>
-      )}
-    </div>
-  )
-);
-InputField.displayName = 'InputField';
-
-export default InputField;

package/src/components/form/select-option.tsx

@@ -1,74 +0,0 @@
-import React from 'react';
-
-type Option = {
-  value: string;
-  label: string;
-};
-
-type SubscriptionSelectorProps = {
-  options: Option[];
-  value: string;
-  onChange: (value: string) => void;
-};
-
-const SubscriptionSelector: React.FC<SubscriptionSelectorProps> = ({
-  options,
-  value,
-  onChange,
-}) => {
-  return (
-    <fieldset
-      role="radiogroup"
-      aria-label="Chọn gói đăng ký"
-      className="flex flex-col md:flex-row gap-4 md:gap-20"
-    >
-      {options.map((opt) => {
-        const selected = opt.value === value;
-        return (
-          <label
-            key={opt.value}
-            className={[
-              'flex items-center cursor-pointer rounded-lg border p-4 transition',
-              selected
-                ? 'border-green-500 bg-green-50'
-                : 'border-gray-300 bg-white hover:bg-gray-50',
-            ].join(' ')}
-          >
-            {/* Visually hidden native radio */}
-            <input
-              type="radio"
-              name="subscription"
-              value={opt.value}
-              checked={selected}
-              onChange={() => onChange(opt.value)}
-              className="sr-only"
-            />
-
-            {/* Custom radio visual */}
-            <span
-              className={[
-                'flex-shrink-0 flex items-center justify-center rounded-full mr-3',
-                selected
-                  ? 'w-5 h-5 border-2 border-green-500 bg-green-500'
-                  : 'w-4 h-4 border border-gray-400',
-              ].join(' ')}
-            >
-              {selected && (
-                <span className="block w-2 h-2 bg-white rounded-full" />
-              )}
-            </span>
-
-            {/* Label text */}
-            <span
-              className={selected ? 'text-green-700 font-medium' : 'text-gray-700'}
-            >
-              {opt.label}
-            </span>
-          </label>
-        );
-      })}
-    </fieldset>
-  );
-};
-
-export default SubscriptionSelector;

package/src/components/layout.tsx

@@ -1,14 +0,0 @@
-import { Outlet } from "react-router-dom"
-import Process from "./process"
-
-
-const MainLayout = () => {
-  return (
-    <div className="max-w-[800px] mx-auto py-10 flex flex-col gap-8">
-      <Process />
-      <Outlet />
-    </div>
-  )
-}
-
-export default MainLayout