webadwaita 0.0.14 → 0.0.16

package/.eslintrc.js

@@ -0,0 +1,8 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  extends: ["@repo/eslint-config/react.js"],
+  // Resolve tsconfig.json relative to this package, not the workspace root.
+  parserOptions: {
+    project: require("node:path").resolve(__dirname, "tsconfig.json"),
+  },
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,30 @@
+npm warn Unknown project config "auto-install-peers". This will stop working in the next major version of npm.
+npm warn Unknown project config "public-hoist-pattern". This will stop working in the next major version of npm.
+
+> webadwaita@0.0.16 build
+> tsup
+
+CLI Building entry: src/index.ts, src/components/atoms/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.5.1
+CLI Using tsup config: C:\Users\micha\repos\webadwaita\packages\ui\tsup.config.ts
+CLI Target: es6
+CJS Build start
+ESM Build start
+DTS Build start
+CJS dist\index.css                  688.00 B
+CJS dist\index.js                   2.76 KB
+CJS dist\components\atoms\index.css 688.00 B
+CJS dist\components\atoms\index.js  2.78 KB
+CJS ⚡️ Build success in 1324ms
+ESM dist\index.mjs                  70.00 B
+ESM dist\components\atoms\index.mjs 74.00 B
+ESM dist\chunk-APFHYC4L.mjs         1.82 KB
+ESM dist\components\atoms\index.css 688.00 B
+ESM dist\index.css                  688.00 B
+ESM ⚡️ Build success in 1330ms
+DTS ⚡️ Build success in 3352ms
+DTS dist\components\atoms\index.d.ts  294.00 B
+DTS dist\index.d.ts                   67.00 B
+DTS dist\components\atoms\index.d.mts 294.00 B
+DTS dist\index.d.mts                  68.00 B

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# webadwaita
+
+## 0.0.16
+
+### Patch Changes
+
+- Set up project structure with atomic design pattern (atoms/molecules), SCSS modules support, co-located Storybook stories, and component type files.

package/dist/button.d.mts

@@ -0,0 +1,9 @@
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+}
+declare function Button({ children, ...other }: ButtonProps): JSX.Element;
+declare namespace Button {
+    var displayName: string;
+}
+
+export { Button, type ButtonProps };

package/dist/button.d.ts

@@ -0,0 +1,9 @@
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+}
+declare function Button({ children, ...other }: ButtonProps): JSX.Element;
+declare namespace Button {
+    var displayName: string;
+}
+
+export { Button, type ButtonProps };

package/dist/button.js

@@ -0,0 +1,64 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/button.tsx
+var button_exports = {};
+__export(button_exports, {
+  Button: () => Button
+});
+module.exports = __toCommonJS(button_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+function Button(_a) {
+  var _b = _a, { children } = _b, other = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", __spreadProps(__spreadValues({ type: "button" }, other), { children }));
+}
+Button.displayName = "Button";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button
+});

package/dist/button.mjs

@@ -0,0 +1,42 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/button.tsx
+import { jsx } from "react/jsx-runtime";
+function Button(_a) {
+  var _b = _a, { children } = _b, other = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx("button", __spreadProps(__spreadValues({ type: "button" }, other), { children }));
+}
+Button.displayName = "Button";
+export {
+  Button
+};

package/dist/chunk-APFHYC4L.mjs

@@ -0,0 +1,54 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/components/atoms/Button/Button.module.scss
+var Button_module_default = {};
+
+// src/components/atoms/Button/Button.tsx
+import { jsx } from "react/jsx-runtime";
+function Button(_a) {
+  var _b = _a, { children, className } = _b, other = __objRest(_b, ["children", "className"]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    __spreadProps(__spreadValues({
+      type: "button",
+      className: className ? `${Button_module_default.button} ${className}` : Button_module_default.button
+    }, other), {
+      children
+    })
+  );
+}
+Button.displayName = "Button";
+
+export {
+  Button
+};

package/dist/components/atoms/index.css

@@ -0,0 +1,32 @@
+/* src/components/atoms/Button/Button.module.scss */
+.button {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border: 1px solid #0052a3;
+  border-radius: 0.25rem;
+  background-color: #0066cc;
+  color: #fff;
+  cursor: pointer;
+  outline: none;
+  transition:
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+}
+.button:hover {
+  background-color: #0052a3;
+  border-color: #004080;
+}
+.button:focus {
+  border-color: #004080;
+  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.25);
+}
+.button:active {
+  background-color: #004080;
+}
+.button:disabled {
+  background-color: #99c2e6;
+  cursor: not-allowed;
+  opacity: 0.6;
+}

package/dist/components/atoms/index.d.mts

@@ -0,0 +1,10 @@
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+}
+
+declare function Button({ children, className, ...other }: ButtonProps): JSX.Element;
+declare namespace Button {
+    var displayName: string;
+}
+
+export { Button, type ButtonProps };

package/dist/components/atoms/index.d.ts

@@ -0,0 +1,10 @@
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+}
+
+declare function Button({ children, className, ...other }: ButtonProps): JSX.Element;
+declare namespace Button {
+    var displayName: string;
+}
+
+export { Button, type ButtonProps };

package/dist/components/atoms/index.js

@@ -0,0 +1,77 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/atoms/index.ts
+var atoms_exports = {};
+__export(atoms_exports, {
+  Button: () => Button
+});
+module.exports = __toCommonJS(atoms_exports);
+
+// src/components/atoms/Button/Button.module.scss
+var Button_module_default = {};
+
+// src/components/atoms/Button/Button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Button(_a) {
+  var _b = _a, { children, className } = _b, other = __objRest(_b, ["children", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    __spreadProps(__spreadValues({
+      type: "button",
+      className: className ? `${Button_module_default.button} ${className}` : Button_module_default.button
+    }, other), {
+      children
+    })
+  );
+}
+Button.displayName = "Button";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button
+});

package/dist/components/atoms/index.mjs

@@ -0,0 +1,6 @@
+import {
+  Button
+} from "../../chunk-APFHYC4L.mjs";
+export {
+  Button
+};

package/dist/index.css

@@ -0,0 +1,32 @@
+/* src/components/atoms/Button/Button.module.scss */
+.button {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border: 1px solid #0052a3;
+  border-radius: 0.25rem;
+  background-color: #0066cc;
+  color: #fff;
+  cursor: pointer;
+  outline: none;
+  transition:
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+}
+.button:hover {
+  background-color: #0052a3;
+  border-color: #004080;
+}
+.button:focus {
+  border-color: #004080;
+  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.25);
+}
+.button:active {
+  background-color: #004080;
+}
+.button:disabled {
+  background-color: #99c2e6;
+  cursor: not-allowed;
+  opacity: 0.6;
+}

package/dist/index.d.mts

@@ -0,0 +1 @@
+export { Button, ButtonProps } from './components/atoms/index.mjs';

package/dist/index.d.ts

@@ -1,41 +1 @@
-import { JSX as JSX_2 } from 'react/jsx-runtime';
-
-export declare function Arrow2TopRight(): JSX_2.Element;
-
-export declare function Button({ variant, icon, circle, children, ...rest }: {
-    variant?: string;
-    icon?: React.ReactNode;
-    circle?: boolean;
-    children?: React.ReactNode;
-}): JSX_2.Element;
-
-export declare function Entry({ placeholder, ...props }: {
-    placeholder?: string;
-}): JSX_2.Element;
-
-export declare function Heading({ children }: any): JSX_2.Element;
-
-export declare function List({ children }: any): JSX_2.Element;
-
-export declare function ListItem({ onClick, children, }: {
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
-    children: React.ReactNode;
-}): JSX_2.Element;
-
-export declare function Loupe(): JSX_2.Element;
-
-export declare function Spinner(): JSX_2.Element;
-
-export declare function Welcome({ logo, title, description, }: {
-    logo: React.ReactNode;
-    title: string;
-    description: string;
-}): JSX_2.Element;
-
-declare function Window_2({ center, children, }: {
-    center?: boolean;
-    children: React.ReactNode;
-}): JSX_2.Element;
-export { Window_2 as Window }
-
-export { }
+export { Button, ButtonProps } from './components/atoms/index.js';

package/dist/index.js

@@ -0,0 +1,77 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/atoms/Button/Button.module.scss
+var Button_module_default = {};
+
+// src/components/atoms/Button/Button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Button(_a) {
+  var _b = _a, { children, className } = _b, other = __objRest(_b, ["children", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    __spreadProps(__spreadValues({
+      type: "button",
+      className: className ? `${Button_module_default.button} ${className}` : Button_module_default.button
+    }, other), {
+      children
+    })
+  );
+}
+Button.displayName = "Button";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button
+});

package/dist/index.mjs

@@ -0,0 +1,6 @@
+import {
+  Button
+} from "./chunk-APFHYC4L.mjs";
+export {
+  Button
+};

package/package.json

@@ -1,47 +1,44 @@
 {
   "name": "webadwaita",
-  "version": "0.0.14",
-  "type": "module",
-  "main": "./dist/index.umd.js",
-  "module": "./dist/index.es.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
+  "version": "0.0.16",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
   ],
+  "license": "MIT",
   "exports": {
     ".": {
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js",
-      "types": "./dist/index.d.ts"
+      "types": "./src/index.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
     },
-    "./dist/style.css": "./dist/style.css"
+    "./atoms": {
+      "types": "./src/components/atoms/index.ts",
+      "import": "./dist/atoms.mjs",
+      "require": "./dist/atoms.js"
+    }
   },
   "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint . --max-warnings 0",
+    "clean": "rm -rf .turbo node_modules dist"
+  },
+  "devDependencies": {
+    "@repo/eslint-config": "*",
+    "@repo/typescript-config": "*",
+    "@types/react": "^18.2.61",
+    "@types/react-dom": "^18.2.19",
+    "esbuild-sass-plugin": "^3.6.0",
+    "eslint": "^8.57.0",
+    "sass": "^1.97.3",
+    "tsup": "^8.0.2",
+    "typescript": "5.5.4"
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-icons": "^5.0.1"
+    "react": "^18.2.0"
   },
-  "devDependencies": {
-    "@types/node": "^20.11.16",
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.17",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
-    "@vitejs/plugin-react-swc": "^3.5.0",
-    "autoprefixer": "^10.4.16",
-    "eslint": "^8.55.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "postcss": "^8.4.33",
-    "tailwindcss": "^3.4.0",
-    "typescript": "^5.2.2",
-    "vite": "^5.0.8",
-    "vite-plugin-dts": "^3.7.2"
+  "publishConfig": {
+    "access": "public"
   }
 }

package/src/components/atoms/Button/Button.module.scss

@@ -0,0 +1,32 @@
+.button {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border: 1px solid #0052a3;
+  border-radius: 0.25rem;
+  background-color: #0066cc;
+  color: #fff;
+  cursor: pointer;
+  outline: none;
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
+  &:hover {
+    background-color: #0052a3;
+    border-color: #004080;
+  }
+
+  &:focus {
+    border-color: #004080;
+    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.25);
+  }
+
+  &:active {
+    background-color: #004080;
+  }
+
+  &:disabled {
+    background-color: #99c2e6;
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+}