@fabio.caffarello/react-design-system 1.0.0

package/README.md

@@ -0,0 +1,123 @@
+# React Design System
+
+![Vite](https://img.shields.io/badge/built%20with-vite-646cff)
+![TypeScript](https://img.shields.io/badge/typescript-%23007acc.svg?style=flat&logo=typescript&logoColor=white)
+![Storybook](https://img.shields.io/badge/storybook-%23FF4785.svg?style=flat&logo=storybook&logoColor=white)
+![Vitest](https://img.shields.io/badge/tested%20with-vitest-6E9F18)
+![TailwindCSS](https://img.shields.io/badge/styled%20with-tailwindcss-38bdf8)
+
+## Overview
+
+This repository is a modern, scalable, and flexible Design System built with React, TypeScript, and Vite. It provides a robust foundation for building consistent, accessible, and reusable UI components across multiple frontend projects.
+
+- **Atomic Design:** Organized into Atoms, Molecules, and Organisms for maximum reusability.
+- **Interactive Documentation:** Storybook for live component visualization, documentation, and testing.
+- **Automated Testing:** Vitest and Testing Library for unit and integration tests.
+- **Styling:** TailwindCSS for utility-first, customizable styles.
+- **Developer Experience:** ESLint, Prettier, and strict TypeScript configuration.
+
+## Technologies
+
+- **React 19**
+- **TypeScript 5**
+- **Vite** (fast dev/build)
+- **Storybook 10** (with accessibility and docs addons)
+- **Vitest** (unit and story testing)
+- **Testing Library** (DOM assertions)
+- **TailwindCSS** (utility-first CSS)
+- **Plop** (component code generation)
+- **ESLint & Prettier** (code quality and formatting)
+
+## Folder Structure
+
+```sh
+src/
+  ui/
+    atoms/        # Basic components (Button, Input, Text, etc.)
+    molecules/    # Combinations of atoms (InputWithLabel, etc.)
+    organisms/    # Complex blocks (LoginBox, etc.)
+  assets/         # Images, icons, etc.
+  style.css       # TailwindCSS and custom theme variables
+public/           # Static files
+.storybook/       # Storybook configuration
+plop-templates/   # Component and story templates
+```
+
+## Getting Started
+
+1. **Install dependencies:**
+
+    ```sh
+    npm install
+    ```
+
+2. **Start development server:**
+
+    ```sh
+    npm run dev
+    ```
+
+3. **View and document components in Storybook:**
+
+    ```sh
+    npm run storybook
+    ```
+
+4. **Run unit and story tests:**
+
+    ```sh
+    npm run test
+    ```
+
+5. **Lint and format code:**
+
+    ```sh
+    npm run lint
+    ```
+
+## Component Generation
+
+Create new components using Plop:
+
+```sh
+npm run plop
+```
+
+Follow the prompts to generate Atoms, Molecules, Organisms, or Views with ready-to-use templates and Storybook stories.
+
+## Testing & Quality
+
+- **Unit tests:** Located alongside components as `.test.tsx` files, run with Vitest.
+- **Storybook tests:** Story files are also tested for visual and interaction regressions.
+- **Linting:** ESLint with recommended rules for React, TypeScript, and Storybook.
+- **Formatting:** Prettier for consistent code style.
+
+## TailwindCSS & Theming
+
+- Utility classes are used throughout components for rapid styling.
+- Custom theme variables are defined in `src/style.css` for spacing, colors, and shadows.
+- Easily extend or override Tailwind and theme tokens for your brand.
+
+## Contribution
+
+1. Fork the repository and create a feature branch from `main`.
+2. Add or update components, stories, and tests.
+3. Ensure all tests and lints pass.
+4. Open a Pull Request with a clear description and motivation.
+
+## Storybook Demo
+
+Explore the live documentation and interactive components:
+
+[Storybook on GitHub Pages](https://fabiocaffarello.github.io/react-design-system)
+
+## Roadmap
+
+- [x] Atomic Design structure
+- [x] Storybook integration
+- [x] Automated unit and story testing
+- [x] TailwindCSS theming
+- [ ] Improve components design
+- [ ] New components (Cards, Modals, etc.)
+- [ ] Customizable themes and dark mode
+- [ ] Accessibility improvements

package/dist/App.d.ts

@@ -0,0 +1,3 @@
+import "./App.css";
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;

package/dist/index.cjs

@@ -0,0 +1,22 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const oe=require("react");var h={exports:{}},_={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var W;function se(){if(W)return _;W=1;var n=Symbol.for("react.transitional.element"),a=Symbol.for("react.fragment");function s(o,c,f){var m=null;if(f!==void 0&&(m=""+f),c.key!==void 0&&(m=""+c.key),"key"in c){f={};for(var d in c)d!=="key"&&(f[d]=c[d])}else f=c;return c=f.ref,{$$typeof:n,type:o,key:m,ref:c!==void 0?c:null,props:f}}return _.Fragment=a,_.jsx=s,_.jsxs=s,_}var E={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var D;function le(){return D||(D=1,process.env.NODE_ENV!=="production"&&(function(){function n(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===te?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case g:return"Fragment";case G:return"Profiler";case z:return"StrictMode";case Q:return"Suspense";case K:return"SuspenseList";case re:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case V:return"Portal";case H:return e.displayName||"Context";case X:return(e._context.displayName||"Context")+".Consumer";case Z:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ee:return r=e.displayName||null,r!==null?r:n(e.type)||"Memo";case R:r=e._payload,e=e._init;try{return n(e(r))}catch{}}return null}function a(e){return""+e}function s(e){try{a(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,l=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",l),a(e)}}function o(e){if(e===g)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===R)return"<...>";try{var r=n(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function c(){var e=T.A;return e===null?null:e.getOwner()}function f(){return Error("react-stack-top-frame")}function m(e){if(C.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function d(e,r){function t(){I||(I=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function b(){var e=n(this.type);return Y[e]||(Y[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function J(e,r,t,l,x,j){var u=t.ref;return e={$$typeof:P,type:e,key:r,props:t,_owner:l},(u!==void 0?u:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:b}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:x}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:j}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function O(e,r,t,l,x,j){var u=r.children;if(u!==void 0)if(l)if(ne(u)){for(l=0;l<u.length;l++)N(u[l]);Object.freeze&&Object.freeze(u)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else N(u);if(C.call(r,"key")){u=n(e);var p=Object.keys(r).filter(function(ae){return ae!=="key"});l=0<p.length?"{key: someKey, "+p.join(": ..., ")+": ...}":"{key: someKey}",L[u+l]||(p=0<p.length?"{"+p.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,l,u,p,u),L[u+l]=!0)}if(u=null,t!==void 0&&(s(t),u=""+t),m(r)&&(s(r.key),u=""+r.key),"key"in r){t={};for(var y in r)y!=="key"&&(t[y]=r[y])}else t=r;return u&&d(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),J(e,u,t,c(),x,j)}function N(e){A(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===R&&(e._payload.status==="fulfilled"?A(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function A(e){return typeof e=="object"&&e!==null&&e.$$typeof===P}var v=oe,P=Symbol.for("react.transitional.element"),V=Symbol.for("react.portal"),g=Symbol.for("react.fragment"),z=Symbol.for("react.strict_mode"),G=Symbol.for("react.profiler"),X=Symbol.for("react.consumer"),H=Symbol.for("react.context"),Z=Symbol.for("react.forward_ref"),Q=Symbol.for("react.suspense"),K=Symbol.for("react.suspense_list"),ee=Symbol.for("react.memo"),R=Symbol.for("react.lazy"),re=Symbol.for("react.activity"),te=Symbol.for("react.client.reference"),T=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,C=Object.prototype.hasOwnProperty,ne=Array.isArray,k=console.createTask?console.createTask:function(){return null};v={react_stack_bottom_frame:function(e){return e()}};var I,Y={},$=v.react_stack_bottom_frame.bind(v,f)(),F=k(o(f)),L={};E.Fragment=g,E.jsx=function(e,r,t){var l=1e4>T.recentlyCreatedOwnerStacks++;return O(e,r,t,!1,l?Error("react-stack-top-frame"):$,l?k(o(e)):F)},E.jsxs=function(e,r,t){var l=1e4>T.recentlyCreatedOwnerStacks++;return O(e,r,t,!0,l?Error("react-stack-top-frame"):$,l?k(o(e)):F)}})()),E}var M;function ue(){return M||(M=1,process.env.NODE_ENV==="production"?h.exports=se():h.exports=le()),h.exports}var i=ue();function ie({variant:n="info",className:a,...s}){const o=[a||""];switch(n){case"warning":{o.push("bg-yellow-100 text-yellow-800 border-yellow-500");break}case"error":{o.push("bg-red-100 text-red-800 border-red-500");break}default:case"info":{o.push("bg-blue-100 text-blue-800 border-blue-500");break}}return i.jsx("div",{role:"alert",className:`border px-4 py-2 rounded-lg ${o.join(" ")}`,...s})}function q({variant:n,bold:a,italic:s,className:o,as:c,color:f,...m}){const d=[o];let b;if(c)b=c;else switch(n){case"heading":b="h2";break;case"list":b="li";break;case"paragraph":default:b="p";break}return a&&d.push("font-bold"),s&&d.push("italic"),f&&d.push(`text-${f}`),i.jsx(b,{className:d.join(" "),...m})}function U({className:n,...a}){const s=[n,"px-large","border","border-1","border-grey-light","rounded","lh-form-element","h-form-element","text-base"];return i.jsx("input",{className:s.join(" "),...a})}function w({className:n,variant:a="regular",...s}){const o=[n,"rounded","h-form-element","lh-form-element","px-large","text-base"];switch(a){case"error":o.push("bg-red-light","text-red-dark","font-bold");break;case"secondary":o.push("bg-transparent","text-grey-minor","px-0");break;case"regular":default:o.push("bg-blue-light","text-blue-dark","font-bold");break}return i.jsx("button",{className:o.join(" "),...s})}function B({className:n,...a}){const s=[n,"p-large","bg-bg","rounded","shadow-card"];return i.jsx("div",{className:s.join(" "),...a})}function S({label:n,...a}){return a.id||console.error("InputWithLabel component requires an id prop"),i.jsxs("div",{className:"mb-medium grid gap-small",children:[i.jsx(q,{as:"label",htmlFor:a.id,className:"cursor-pointer",children:n}),i.jsx(U,{...a})]})}function ce({onForgotPasswordClick:n,className:a,...s}){return i.jsx(B,{className:a,children:i.jsxs("form",{...s,onSubmit:o=>{o.preventDefault(),s.onSubmit&&s.onSubmit(o)},children:[i.jsx(S,{id:"login-email",label:"Your email",placeholder:"myname@email.com"}),i.jsx(S,{id:"login-password",label:"Your password",placeholder:"••••••••",type:"password"}),i.jsxs("div",{className:"flex justify-between",children:[i.jsx(w,{variant:"secondary",type:"button",onClick:n,children:"Forgot password?"}),i.jsx(w,{variant:"regular",type:"submit",children:"Sign in"})]})]})})}exports.BoxWrapper=B;exports.Button=w;exports.Info=ie;exports.Input=U;exports.InputWithLabel=S;exports.LoginBox=ce;exports.Text=q;

package/dist/index.js

@@ -0,0 +1,439 @@
+import te from "react";
+var x = { exports: {} }, _ = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var F;
+function ne() {
+  if (F) return _;
+  F = 1;
+  var n = Symbol.for("react.transitional.element"), a = Symbol.for("react.fragment");
+  function s(o, c, f) {
+    var m = null;
+    if (f !== void 0 && (m = "" + f), c.key !== void 0 && (m = "" + c.key), "key" in c) {
+      f = {};
+      for (var d in c)
+        d !== "key" && (f[d] = c[d]);
+    } else f = c;
+    return c = f.ref, {
+      $$typeof: n,
+      type: o,
+      key: m,
+      ref: c !== void 0 ? c : null,
+      props: f
+    };
+  }
+  return _.Fragment = a, _.jsx = s, _.jsxs = s, _;
+}
+var E = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var D;
+function ae() {
+  return D || (D = 1, process.env.NODE_ENV !== "production" && (function() {
+    function n(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === K ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case R:
+          return "Fragment";
+        case V:
+          return "Profiler";
+        case J:
+          return "StrictMode";
+        case X:
+          return "Suspense";
+        case H:
+          return "SuspenseList";
+        case Q:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case q:
+            return "Portal";
+          case G:
+            return e.displayName || "Context";
+          case z:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case B:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case Z:
+            return r = e.displayName || null, r !== null ? r : n(e.type) || "Memo";
+          case g:
+            r = e._payload, e = e._init;
+            try {
+              return n(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function a(e) {
+      return "" + e;
+    }
+    function s(e) {
+      try {
+        a(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var t = r.error, l = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return t.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          l
+        ), a(e);
+      }
+    }
+    function o(e) {
+      if (e === R) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === g)
+        return "<...>";
+      try {
+        var r = n(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function c() {
+      var e = T.A;
+      return e === null ? null : e.getOwner();
+    }
+    function f() {
+      return Error("react-stack-top-frame");
+    }
+    function m(e) {
+      if (A.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function d(e, r) {
+      function t() {
+        P || (P = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          r
+        ));
+      }
+      t.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: t,
+        configurable: !0
+      });
+    }
+    function b() {
+      var e = n(this.type);
+      return C[e] || (C[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function U(e, r, t, l, h, j) {
+      var u = t.ref;
+      return e = {
+        $$typeof: N,
+        type: e,
+        key: r,
+        props: t,
+        _owner: l
+      }, (u !== void 0 ? u : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: b
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: h
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: j
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function y(e, r, t, l, h, j) {
+      var u = r.children;
+      if (u !== void 0)
+        if (l)
+          if (ee(u)) {
+            for (l = 0; l < u.length; l++)
+              S(u[l]);
+            Object.freeze && Object.freeze(u);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else S(u);
+      if (A.call(r, "key")) {
+        u = n(e);
+        var p = Object.keys(r).filter(function(re) {
+          return re !== "key";
+        });
+        l = 0 < p.length ? "{key: someKey, " + p.join(": ..., ") + ": ...}" : "{key: someKey}", $[u + l] || (p = 0 < p.length ? "{" + p.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          l,
+          u,
+          p,
+          u
+        ), $[u + l] = !0);
+      }
+      if (u = null, t !== void 0 && (s(t), u = "" + t), m(r) && (s(r.key), u = "" + r.key), "key" in r) {
+        t = {};
+        for (var w in r)
+          w !== "key" && (t[w] = r[w]);
+      } else t = r;
+      return u && d(
+        t,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), U(
+        e,
+        u,
+        t,
+        c(),
+        h,
+        j
+      );
+    }
+    function S(e) {
+      O(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === g && (e._payload.status === "fulfilled" ? O(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function O(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === N;
+    }
+    var v = te, N = Symbol.for("react.transitional.element"), q = Symbol.for("react.portal"), R = Symbol.for("react.fragment"), J = Symbol.for("react.strict_mode"), V = Symbol.for("react.profiler"), z = Symbol.for("react.consumer"), G = Symbol.for("react.context"), B = Symbol.for("react.forward_ref"), X = Symbol.for("react.suspense"), H = Symbol.for("react.suspense_list"), Z = Symbol.for("react.memo"), g = Symbol.for("react.lazy"), Q = Symbol.for("react.activity"), K = Symbol.for("react.client.reference"), T = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, A = Object.prototype.hasOwnProperty, ee = Array.isArray, k = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    v = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var P, C = {}, Y = v.react_stack_bottom_frame.bind(
+      v,
+      f
+    )(), I = k(o(f)), $ = {};
+    E.Fragment = R, E.jsx = function(e, r, t) {
+      var l = 1e4 > T.recentlyCreatedOwnerStacks++;
+      return y(
+        e,
+        r,
+        t,
+        !1,
+        l ? Error("react-stack-top-frame") : Y,
+        l ? k(o(e)) : I
+      );
+    }, E.jsxs = function(e, r, t) {
+      var l = 1e4 > T.recentlyCreatedOwnerStacks++;
+      return y(
+        e,
+        r,
+        t,
+        !0,
+        l ? Error("react-stack-top-frame") : Y,
+        l ? k(o(e)) : I
+      );
+    };
+  })()), E;
+}
+var L;
+function oe() {
+  return L || (L = 1, process.env.NODE_ENV === "production" ? x.exports = ne() : x.exports = ae()), x.exports;
+}
+var i = oe();
+function ce({ variant: n = "info", className: a, ...s }) {
+  const o = [a || ""];
+  switch (n) {
+    case "warning": {
+      o.push("bg-yellow-100 text-yellow-800 border-yellow-500");
+      break;
+    }
+    case "error": {
+      o.push("bg-red-100 text-red-800 border-red-500");
+      break;
+    }
+    default:
+    case "info": {
+      o.push("bg-blue-100 text-blue-800 border-blue-500");
+      break;
+    }
+  }
+  return /* @__PURE__ */ i.jsx(
+    "div",
+    {
+      role: "alert",
+      className: `border px-4 py-2 rounded-lg ${o.join(" ")}`,
+      ...s
+    }
+  );
+}
+function se({
+  variant: n,
+  bold: a,
+  italic: s,
+  className: o,
+  as: c,
+  color: f,
+  ...m
+}) {
+  const d = [o];
+  let b;
+  if (c)
+    b = c;
+  else
+    switch (n) {
+      case "heading":
+        b = "h2";
+        break;
+      case "list":
+        b = "li";
+        break;
+      case "paragraph":
+      default:
+        b = "p";
+        break;
+    }
+  return a && d.push("font-bold"), s && d.push("italic"), f && d.push(`text-${f}`), /* @__PURE__ */ i.jsx(b, { className: d.join(" "), ...m });
+}
+function le({ className: n, ...a }) {
+  const s = [
+    n,
+    "px-large",
+    "border",
+    "border-1",
+    "border-grey-light",
+    "rounded",
+    "lh-form-element",
+    "h-form-element",
+    "text-base"
+  ];
+  return /* @__PURE__ */ i.jsx("input", { className: s.join(" "), ...a });
+}
+function W({
+  className: n,
+  variant: a = "regular",
+  ...s
+}) {
+  const o = [
+    n,
+    "rounded",
+    "h-form-element",
+    "lh-form-element",
+    "px-large",
+    "text-base"
+  ];
+  switch (a) {
+    case "error":
+      o.push("bg-red-light", "text-red-dark", "font-bold");
+      break;
+    case "secondary":
+      o.push("bg-transparent", "text-grey-minor", "px-0");
+      break;
+    case "regular":
+    default:
+      o.push("bg-blue-light", "text-blue-dark", "font-bold");
+      break;
+  }
+  return /* @__PURE__ */ i.jsx("button", { className: o.join(" "), ...s });
+}
+function ue({ className: n, ...a }) {
+  const s = [n, "p-large", "bg-bg", "rounded", "shadow-card"];
+  return /* @__PURE__ */ i.jsx("div", { className: s.join(" "), ...a });
+}
+function M({ label: n, ...a }) {
+  return a.id || console.error("InputWithLabel component requires an id prop"), /* @__PURE__ */ i.jsxs("div", { className: "mb-medium grid gap-small", children: [
+    /* @__PURE__ */ i.jsx(se, { as: "label", htmlFor: a.id, className: "cursor-pointer", children: n }),
+    /* @__PURE__ */ i.jsx(le, { ...a })
+  ] });
+}
+function fe({
+  onForgotPasswordClick: n,
+  className: a,
+  ...s
+}) {
+  return /* @__PURE__ */ i.jsx(ue, { className: a, children: /* @__PURE__ */ i.jsxs(
+    "form",
+    {
+      ...s,
+      onSubmit: (o) => {
+        o.preventDefault(), s.onSubmit && s.onSubmit(o);
+      },
+      children: [
+        /* @__PURE__ */ i.jsx(
+          M,
+          {
+            id: "login-email",
+            label: "Your email",
+            placeholder: "myname@email.com"
+          }
+        ),
+        /* @__PURE__ */ i.jsx(
+          M,
+          {
+            id: "login-password",
+            label: "Your password",
+            placeholder: "••••••••",
+            type: "password"
+          }
+        ),
+        /* @__PURE__ */ i.jsxs("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ i.jsx(
+            W,
+            {
+              variant: "secondary",
+              type: "button",
+              onClick: n,
+              children: "Forgot password?"
+            }
+          ),
+          /* @__PURE__ */ i.jsx(W, { variant: "regular", type: "submit", children: "Sign in" })
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  ue as BoxWrapper,
+  W as Button,
+  ce as Info,
+  le as Input,
+  M as InputWithLabel,
+  fe as LoginBox,
+  se as Text
+};

package/dist/main.d.ts

@@ -0,0 +1 @@
+import "./style.css";

package/dist/setupTests.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/ui/atoms/BoxWrapper/BoxWrapper.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from "react";
+type Props = HTMLAttributes<HTMLDivElement>;
+export default function BoxWrapper({ className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/atoms/BoxWrapper/BoxWrapper.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import BoxWrapper from "./BoxWrapper";
+declare const meta: Meta<typeof BoxWrapper>;
+export declare const Primary: StoryObj<typeof BoxWrapper>;
+export default meta;

package/dist/ui/atoms/Button/Button.d.ts

@@ -0,0 +1,6 @@
+import type { ButtonHTMLAttributes } from "react";
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "regular" | "error" | "secondary";
+}
+export default function Button({ className, variant, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/atoms/Button/Button.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Button from "./Button";
+declare const meta: Meta<typeof Button>;
+export declare const Primary: StoryObj<typeof Button>;
+export default meta;

package/dist/ui/atoms/Info/Info.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from "react";
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    variant?: "info" | "warning" | "error";
+}
+export default function Info({ variant, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/atoms/Info/Info.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Info from "./Info";
+declare const meta: Meta<typeof Info>;
+export declare const Primary: StoryObj<typeof Info>;
+export default meta;

package/dist/ui/atoms/Input/Input.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLProps } from "react";
+type Props = HTMLProps<HTMLInputElement>;
+export default function Input({ className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/atoms/Input/Input.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Input from "./Input";
+declare const meta: Meta<typeof Input>;
+export declare const Primary: StoryObj<typeof Input>;
+export default meta;

package/dist/ui/atoms/Input/Input.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/atoms/Text/Text.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentPropsWithoutRef, ElementType, HTMLAttributes, JSX } from "react";
+interface Props<T extends ElementType> extends HTMLAttributes<JSX.IntrinsicElements> {
+    variant?: "heading" | "list" | "paragraph";
+    as?: T;
+    bold?: boolean;
+    italic?: boolean;
+    color?: string;
+}
+type ReturnProps<P extends ElementType> = Props<P> & Omit<ComponentPropsWithoutRef<P>, keyof Props<P>>;
+export default function Text<T extends ElementType = "p">({ variant, bold, italic, className, as, color, ...rest }: ReturnProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};