@scalar/components 0.12.54 → 0.12.56

package/README.md

@@ -1,8 +1,8 @@
-# Scalar's Component Library
+# Scalar Components
 
-Scalars internal component library now open sourced and [almost] ready to use! it's besed used with our themeing library OR if you want you can simply set the css vars yourself. Refer to the variable legend below. This project is still very early!
+This library is designed to work seamlessly with our theming system, but it’s also flexible enough for standalone use by setting CSS variables manually. For a list of available variables, please refer to the variable legend below.
 
-## Install
+## Installation
 
 ```bash
 pnpm i @scalar/components
@@ -10,13 +10,13 @@ pnpm i @scalar/components
 
 ## Usage
 
-In your main setup file (main.ts etc)
+To get started, import the CSS styles in your main setup file (e.g., main.ts, index.ts, or App.vue):
 
 ```ts
 import '@scalar/components/style.css'
 ```
 
-Then to use the components
+Then, you can use the components in your Vue components. Here’s an example:
 
 ```vue
 <script setup lang="ts">
@@ -40,7 +40,7 @@ import { ScalarButton, ScalarTextField } from '@scalar/components'
 
 ## CSS Layers
 
-This package exports its' tailwind styles in the following CSS cascade layers to make them easy to overwrite.
+This package exports its Tailwind styles using CSS cascade layers to avoid any conflicts with existing CSS. The layers are organized as follows:
 
 - `scalar-base`: reset and normalize
 - `scalar-components`: complex component styles

package/dist/components/ScalarIcon/ScalarIcon.stories.d.ts

@@ -15,7 +15,7 @@ declare const meta: {
     argTypes: {
         icon: {
             control: "select";
-            options: readonly ["Add", "AddTab", "ArrowLeft", "ArrowRight", "Brackets", "Branch", "Changelog", "Checkmark", "ChevronDown", "ChevronLeft", "ChevronRight", "ChevronUp", "Clipboard", "Close", "CloseTab", "CloseTabs", "Cloud", "CodeFolder", "Cog", "Collection", "Cookie", "DarkMode", "Delete", "Discord", "DiscordLine", "DocsPage", "Download", "Duplicate", "Edit", "Ellipses", "Email", "Error", "Example", "ExternalLink", "FilterList", "Folder", "GitHub", "GitHubLine", "Google", "Help", "Hide", "History", "House", "Import", "Info", "Key", "Leave", "LightDarkModeToggle", "LightMode", "Link", "Lock", "Logo", "LogoAPI", "LogoClient", "LogoMarket", "LogoSwagger", "Magic", "Menu", "Page", "PaperAirplane", "Pencil", "Play", "Refresh", "Roadmap", "Scribble", "Search", "Server", "Settings", "Show", "Sort", "Terminal", "ThumbsDown", "ThumbsUp", "Trash", "Unlock", "Upload", "UploadSimple", "User", "Users", "Wallet", "Workspace", "programming-framework-angular", "programming-framework-astro", "programming-framework-laravel", "programming-framework-nextdotjs", "programming-framework-react", "programming-framework-vuedotjs", "programming-language-c", "programming-language-clojure", "programming-language-csharp", "programming-language-css3", "programming-language-go", "programming-language-html5", "programming-language-http", "programming-language-java", "programming-language-javascript", "programming-language-json", "programming-language-kotlin", "programming-language-node", "programming-language-objc", "programming-language-ocaml", "programming-language-php", "programming-language-powershell", "programming-language-python", "programming-language-r", "programming-language-ruby", "programming-language-scala", "programming-language-shell", "programming-language-swift", "programming-language-typescript", "programming-script-code", "programming-tool-git", "programming-tool-tailwindcss"];
+            options: readonly ["Add", "AddTab", "ArrowLeft", "ArrowRight", "Brackets", "Branch", "Changelog", "Checkmark", "ChevronDown", "ChevronLeft", "ChevronRight", "ChevronUp", "Clipboard", "Close", "CloseTab", "CloseTabs", "Cloud", "CodeFolder", "Cog", "Collection", "Cookie", "DarkMode", "Delete", "Discord", "DiscordLine", "DocsPage", "Download", "Duplicate", "Edit", "Ellipses", "Email", "Error", "Example", "ExternalLink", "FilterList", "Folder", "GitHub", "GitHubLine", "Google", "Help", "Hide", "History", "House", "Import", "Info", "Key", "Leave", "LightDarkModeToggle", "LightMode", "Link", "Lock", "Logo", "LogoAPI", "LogoClient", "LogoMarket", "LogoSwagger", "Magic", "Menu", "Page", "PaperAirplane", "Pencil", "Play", "Refresh", "Roadmap", "Scribble", "Search", "Server", "Settings", "Show", "Sort", "Terminal", "ThumbsDown", "ThumbsUp", "Trash", "Unlock", "Unwatch", "Upload", "UploadSimple", "User", "Users", "Wallet", "Watch", "Workspace", "programming-framework-angular", "programming-framework-astro", "programming-framework-laravel", "programming-framework-nextdotjs", "programming-framework-react", "programming-framework-vuedotjs", "programming-language-c", "programming-language-clojure", "programming-language-csharp", "programming-language-css3", "programming-language-go", "programming-language-html5", "programming-language-http", "programming-language-java", "programming-language-javascript", "programming-language-json", "programming-language-kotlin", "programming-language-node", "programming-language-objc", "programming-language-ocaml", "programming-language-php", "programming-language-powershell", "programming-language-python", "programming-language-r", "programming-language-ruby", "programming-language-scala", "programming-language-shell", "programming-language-swift", "programming-language-typescript", "programming-script-code", "programming-tool-git", "programming-tool-tailwindcss"];
         };
         size: {
             control: "select";

package/dist/components/ScalarIcon/icons/Unwatch.svg.js

@@ -0,0 +1,21 @@
+import { openBlock as o, createElementBlock as n, createElementVNode as t } from "vue";
+const r = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24"
+};
+function l(c, e) {
+  return o(), n("svg", r, e[0] || (e[0] = [
+    t("path", {
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M4.9 19.1c-3.038-3.038-3.71-7.592-2.015-11.3M7.8 16.2c-1.397-1.397-1.945-3.346-1.646-5.2M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5m2.9-11.4C23 8.8 23 15.1 19.1 19m-8.423-8.5a2 2 0 0 1 2.75 2.901M22 22 2 2"
+    }, null, -1)
+  ]));
+}
+const d = { render: l };
+export {
+  d as default,
+  l as render
+};

package/dist/components/ScalarIcon/icons/Watch.svg.js

@@ -0,0 +1,21 @@
+import { openBlock as o, createElementBlock as t, createElementVNode as n } from "vue";
+const r = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24"
+};
+function l(c, e) {
+  return o(), t("svg", r, e[0] || (e[0] = [
+    n("path", {
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M4.9 19.1C1 15.2 1 8.8 4.9 4.9m2.9 11.3c-2.3-2.3-2.3-6.1 0-8.5m8.4.1c2.3 2.3 2.3 6.1 0 8.5m2.9-11.4C23 8.8 23 15.1 19.1 19M14 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0"
+    }, null, -1)
+  ]));
+}
+const d = { render: l };
+export {
+  d as default,
+  l as render
+};

package/dist/components/ScalarIcon/icons/icons.d.ts

@@ -1,2 +1,2 @@
-export declare const ICONS: readonly ["Add", "AddTab", "ArrowLeft", "ArrowRight", "Brackets", "Branch", "Changelog", "Checkmark", "ChevronDown", "ChevronLeft", "ChevronRight", "ChevronUp", "Clipboard", "Close", "CloseTab", "CloseTabs", "Cloud", "CodeFolder", "Cog", "Collection", "Cookie", "DarkMode", "Delete", "Discord", "DiscordLine", "DocsPage", "Download", "Duplicate", "Edit", "Ellipses", "Email", "Error", "Example", "ExternalLink", "FilterList", "Folder", "GitHub", "GitHubLine", "Google", "Help", "Hide", "History", "House", "Import", "Info", "Key", "Leave", "LightDarkModeToggle", "LightMode", "Link", "Lock", "Logo", "LogoAPI", "LogoClient", "LogoMarket", "LogoSwagger", "Magic", "Menu", "Page", "PaperAirplane", "Pencil", "Play", "Refresh", "Roadmap", "Scribble", "Search", "Server", "Settings", "Show", "Sort", "Terminal", "ThumbsDown", "ThumbsUp", "Trash", "Unlock", "Upload", "UploadSimple", "User", "Users", "Wallet", "Workspace", "programming-framework-angular", "programming-framework-astro", "programming-framework-laravel", "programming-framework-nextdotjs", "programming-framework-react", "programming-framework-vuedotjs", "programming-language-c", "programming-language-clojure", "programming-language-csharp", "programming-language-css3", "programming-language-go", "programming-language-html5", "programming-language-http", "programming-language-java", "programming-language-javascript", "programming-language-json", "programming-language-kotlin", "programming-language-node", "programming-language-objc", "programming-language-ocaml", "programming-language-php", "programming-language-powershell", "programming-language-python", "programming-language-r", "programming-language-ruby", "programming-language-scala", "programming-language-shell", "programming-language-swift", "programming-language-typescript", "programming-script-code", "programming-tool-git", "programming-tool-tailwindcss"];
+export declare const ICONS: readonly ["Add", "AddTab", "ArrowLeft", "ArrowRight", "Brackets", "Branch", "Changelog", "Checkmark", "ChevronDown", "ChevronLeft", "ChevronRight", "ChevronUp", "Clipboard", "Close", "CloseTab", "CloseTabs", "Cloud", "CodeFolder", "Cog", "Collection", "Cookie", "DarkMode", "Delete", "Discord", "DiscordLine", "DocsPage", "Download", "Duplicate", "Edit", "Ellipses", "Email", "Error", "Example", "ExternalLink", "FilterList", "Folder", "GitHub", "GitHubLine", "Google", "Help", "Hide", "History", "House", "Import", "Info", "Key", "Leave", "LightDarkModeToggle", "LightMode", "Link", "Lock", "Logo", "LogoAPI", "LogoClient", "LogoMarket", "LogoSwagger", "Magic", "Menu", "Page", "PaperAirplane", "Pencil", "Play", "Refresh", "Roadmap", "Scribble", "Search", "Server", "Settings", "Show", "Sort", "Terminal", "ThumbsDown", "ThumbsUp", "Trash", "Unlock", "Unwatch", "Upload", "UploadSimple", "User", "Users", "Wallet", "Watch", "Workspace", "programming-framework-angular", "programming-framework-astro", "programming-framework-laravel", "programming-framework-nextdotjs", "programming-framework-react", "programming-framework-vuedotjs", "programming-language-c", "programming-language-clojure", "programming-language-csharp", "programming-language-css3", "programming-language-go", "programming-language-html5", "programming-language-http", "programming-language-java", "programming-language-javascript", "programming-language-json", "programming-language-kotlin", "programming-language-node", "programming-language-objc", "programming-language-ocaml", "programming-language-php", "programming-language-powershell", "programming-language-python", "programming-language-r", "programming-language-ruby", "programming-language-scala", "programming-language-shell", "programming-language-swift", "programming-language-typescript", "programming-script-code", "programming-tool-git", "programming-tool-tailwindcss"];
 //# sourceMappingURL=icons.d.ts.map

package/dist/components/ScalarIcon/icons/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../../src/components/ScalarIcon/icons/icons.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,k2DAkHR,CAAA"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../../src/components/ScalarIcon/icons/icons.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,s3DAoHR,CAAA"}

package/dist/components/ScalarIcon/icons/index.js

@@ -3,8 +3,8 @@ import * as a from "./AddTab.svg.js";
 import * as s from "./ArrowLeft.svg.js";
 import * as i from "./ArrowRight.svg.js";
 import * as p from "./Brackets.svg.js";
-import * as e from "./Branch.svg.js";
-import * as t from "./Changelog.svg.js";
+import * as t from "./Branch.svg.js";
+import * as e from "./Changelog.svg.js";
 import * as n from "./Checkmark.svg.js";
 import * as v from "./ChevronDown.svg.js";
 import * as f from "./ChevronLeft.svg.js";
@@ -21,10 +21,10 @@ import * as b from "./Collection.svg.js";
 import * as D from "./Cookie.svg.js";
 import * as S from "./DarkMode.svg.js";
 import * as T from "./Delete.svg.js";
-import * as P from "./Discord.svg.js";
-import * as A from "./DiscordLine.svg.js";
-import * as H from "./DocsPage.svg.js";
-import * as U from "./Download.svg.js";
+import * as U from "./Discord.svg.js";
+import * as P from "./DiscordLine.svg.js";
+import * as A from "./DocsPage.svg.js";
+import * as H from "./Download.svg.js";
 import * as j from "./Duplicate.svg.js";
 import * as y from "./Edit.svg.js";
 import * as E from "./Ellipses.svg.js";
@@ -34,8 +34,8 @@ import * as R from "./Example.svg.js";
 import * as G from "./ExternalLink.svg.js";
 import * as x from "./FilterList.svg.js";
 import * as I from "./Folder.svg.js";
-import * as B from "./GitHub.svg.js";
-import * as W from "./GitHubLine.svg.js";
+import * as W from "./GitHub.svg.js";
+import * as B from "./GitHubLine.svg.js";
 import * as J from "./Google.svg.js";
 import * as K from "./Help.svg.js";
 import * as O from "./Hide.svg.js";
@@ -57,8 +57,8 @@ import * as ar from "./LogoSwagger.svg.js";
 import * as sr from "./Magic.svg.js";
 import * as ir from "./Menu.svg.js";
 import * as pr from "./Page.svg.js";
-import * as er from "./PaperAirplane.svg.js";
-import * as tr from "./Pencil.svg.js";
+import * as tr from "./PaperAirplane.svg.js";
+import * as er from "./Pencil.svg.js";
 import * as nr from "./Play.svg.js";
 import * as vr from "./Refresh.svg.js";
 import * as fr from "./Roadmap.svg.js";
@@ -73,52 +73,54 @@ import * as kr from "./ThumbsDown.svg.js";
 import * as wr from "./ThumbsUp.svg.js";
 import * as br from "./Trash.svg.js";
 import * as Dr from "./Unlock.svg.js";
-import * as Sr from "./Upload.svg.js";
-import * as Tr from "./UploadSimple.svg.js";
+import * as Sr from "./Unwatch.svg.js";
+import * as Tr from "./Upload.svg.js";
+import * as Ur from "./UploadSimple.svg.js";
 import * as Pr from "./User.svg.js";
 import * as Ar from "./Users.svg.js";
 import * as Hr from "./Wallet.svg.js";
-import * as Ur from "./Workspace.svg.js";
-import * as jr from "./programming-framework-angular.svg.js";
-import * as yr from "./programming-framework-astro.svg.js";
-import * as Er from "./programming-framework-laravel.svg.js";
-import * as Fr from "./programming-framework-nextdotjs.svg.js";
-import * as Mr from "./programming-framework-react.svg.js";
-import * as Rr from "./programming-framework-vuedotjs.svg.js";
-import * as Gr from "./programming-language-c.svg.js";
-import * as xr from "./programming-language-clojure.svg.js";
-import * as Ir from "./programming-language-csharp.svg.js";
-import * as Br from "./programming-language-css3.svg.js";
-import * as Wr from "./programming-language-go.svg.js";
-import * as Jr from "./programming-language-html5.svg.js";
-import * as Kr from "./programming-language-http.svg.js";
-import * as Or from "./programming-language-java.svg.js";
-import * as Nr from "./programming-language-javascript.svg.js";
-import * as $r from "./programming-language-json.svg.js";
-import * as Vr from "./programming-language-kotlin.svg.js";
-import * as qr from "./programming-language-node.svg.js";
-import * as zr from "./programming-language-objc.svg.js";
-import * as Qr from "./programming-language-ocaml.svg.js";
-import * as Xr from "./programming-language-php.svg.js";
-import * as Yr from "./programming-language-powershell.svg.js";
-import * as Zr from "./programming-language-python.svg.js";
-import * as _r from "./programming-language-r.svg.js";
-import * as ro from "./programming-language-ruby.svg.js";
-import * as oo from "./programming-language-scala.svg.js";
-import * as mo from "./programming-language-shell.svg.js";
-import * as go from "./programming-language-swift.svg.js";
-import * as ao from "./programming-language-typescript.svg.js";
-import * as so from "./programming-script-code.svg.js";
-import * as io from "./programming-tool-git.svg.js";
-import * as po from "./programming-tool-tailwindcss.svg.js";
+import * as jr from "./Watch.svg.js";
+import * as yr from "./Workspace.svg.js";
+import * as Er from "./programming-framework-angular.svg.js";
+import * as Fr from "./programming-framework-astro.svg.js";
+import * as Mr from "./programming-framework-laravel.svg.js";
+import * as Rr from "./programming-framework-nextdotjs.svg.js";
+import * as Gr from "./programming-framework-react.svg.js";
+import * as xr from "./programming-framework-vuedotjs.svg.js";
+import * as Ir from "./programming-language-c.svg.js";
+import * as Wr from "./programming-language-clojure.svg.js";
+import * as Br from "./programming-language-csharp.svg.js";
+import * as Jr from "./programming-language-css3.svg.js";
+import * as Kr from "./programming-language-go.svg.js";
+import * as Or from "./programming-language-html5.svg.js";
+import * as Nr from "./programming-language-http.svg.js";
+import * as $r from "./programming-language-java.svg.js";
+import * as Vr from "./programming-language-javascript.svg.js";
+import * as qr from "./programming-language-json.svg.js";
+import * as zr from "./programming-language-kotlin.svg.js";
+import * as Qr from "./programming-language-node.svg.js";
+import * as Xr from "./programming-language-objc.svg.js";
+import * as Yr from "./programming-language-ocaml.svg.js";
+import * as Zr from "./programming-language-php.svg.js";
+import * as _r from "./programming-language-powershell.svg.js";
+import * as ro from "./programming-language-python.svg.js";
+import * as oo from "./programming-language-r.svg.js";
+import * as mo from "./programming-language-ruby.svg.js";
+import * as go from "./programming-language-scala.svg.js";
+import * as ao from "./programming-language-shell.svg.js";
+import * as so from "./programming-language-swift.svg.js";
+import * as io from "./programming-language-typescript.svg.js";
+import * as po from "./programming-script-code.svg.js";
+import * as to from "./programming-tool-git.svg.js";
+import * as eo from "./programming-tool-tailwindcss.svg.js";
 const m = /* @__PURE__ */ Object.assign({
   "./Add.svg": g,
   "./AddTab.svg": a,
   "./ArrowLeft.svg": s,
   "./ArrowRight.svg": i,
   "./Brackets.svg": p,
-  "./Branch.svg": e,
-  "./Changelog.svg": t,
+  "./Branch.svg": t,
+  "./Changelog.svg": e,
   "./Checkmark.svg": n,
   "./ChevronDown.svg": v,
   "./ChevronLeft.svg": f,
@@ -135,10 +137,10 @@ const m = /* @__PURE__ */ Object.assign({
   "./Cookie.svg": D,
   "./DarkMode.svg": S,
   "./Delete.svg": T,
-  "./Discord.svg": P,
-  "./DiscordLine.svg": A,
-  "./DocsPage.svg": H,
-  "./Download.svg": U,
+  "./Discord.svg": U,
+  "./DiscordLine.svg": P,
+  "./DocsPage.svg": A,
+  "./Download.svg": H,
   "./Duplicate.svg": j,
   "./Edit.svg": y,
   "./Ellipses.svg": E,
@@ -148,8 +150,8 @@ const m = /* @__PURE__ */ Object.assign({
   "./ExternalLink.svg": G,
   "./FilterList.svg": x,
   "./Folder.svg": I,
-  "./GitHub.svg": B,
-  "./GitHubLine.svg": W,
+  "./GitHub.svg": W,
+  "./GitHubLine.svg": B,
   "./Google.svg": J,
   "./Help.svg": K,
   "./Hide.svg": O,
@@ -171,8 +173,8 @@ const m = /* @__PURE__ */ Object.assign({
   "./Magic.svg": sr,
   "./Menu.svg": ir,
   "./Page.svg": pr,
-  "./PaperAirplane.svg": er,
-  "./Pencil.svg": tr,
+  "./PaperAirplane.svg": tr,
+  "./Pencil.svg": er,
   "./Play.svg": nr,
   "./Refresh.svg": vr,
   "./Roadmap.svg": fr,
@@ -187,48 +189,50 @@ const m = /* @__PURE__ */ Object.assign({
   "./ThumbsUp.svg": wr,
   "./Trash.svg": br,
   "./Unlock.svg": Dr,
-  "./Upload.svg": Sr,
-  "./UploadSimple.svg": Tr,
+  "./Unwatch.svg": Sr,
+  "./Upload.svg": Tr,
+  "./UploadSimple.svg": Ur,
   "./User.svg": Pr,
   "./Users.svg": Ar,
   "./Wallet.svg": Hr,
-  "./Workspace.svg": Ur,
-  "./programming-framework-angular.svg": jr,
-  "./programming-framework-astro.svg": yr,
-  "./programming-framework-laravel.svg": Er,
-  "./programming-framework-nextdotjs.svg": Fr,
-  "./programming-framework-react.svg": Mr,
-  "./programming-framework-vuedotjs.svg": Rr,
-  "./programming-language-c.svg": Gr,
-  "./programming-language-clojure.svg": xr,
-  "./programming-language-csharp.svg": Ir,
-  "./programming-language-css3.svg": Br,
-  "./programming-language-go.svg": Wr,
-  "./programming-language-html5.svg": Jr,
-  "./programming-language-http.svg": Kr,
-  "./programming-language-java.svg": Or,
-  "./programming-language-javascript.svg": Nr,
-  "./programming-language-json.svg": $r,
-  "./programming-language-kotlin.svg": Vr,
-  "./programming-language-node.svg": qr,
-  "./programming-language-objc.svg": zr,
-  "./programming-language-ocaml.svg": Qr,
-  "./programming-language-php.svg": Xr,
-  "./programming-language-powershell.svg": Yr,
-  "./programming-language-python.svg": Zr,
-  "./programming-language-r.svg": _r,
-  "./programming-language-ruby.svg": ro,
-  "./programming-language-scala.svg": oo,
-  "./programming-language-shell.svg": mo,
-  "./programming-language-swift.svg": go,
-  "./programming-language-typescript.svg": ao,
-  "./programming-script-code.svg": so,
-  "./programming-tool-git.svg": io,
-  "./programming-tool-tailwindcss.svg": po
-}), eo = (r) => {
+  "./Watch.svg": jr,
+  "./Workspace.svg": yr,
+  "./programming-framework-angular.svg": Er,
+  "./programming-framework-astro.svg": Fr,
+  "./programming-framework-laravel.svg": Mr,
+  "./programming-framework-nextdotjs.svg": Rr,
+  "./programming-framework-react.svg": Gr,
+  "./programming-framework-vuedotjs.svg": xr,
+  "./programming-language-c.svg": Ir,
+  "./programming-language-clojure.svg": Wr,
+  "./programming-language-csharp.svg": Br,
+  "./programming-language-css3.svg": Jr,
+  "./programming-language-go.svg": Kr,
+  "./programming-language-html5.svg": Or,
+  "./programming-language-http.svg": Nr,
+  "./programming-language-java.svg": $r,
+  "./programming-language-javascript.svg": Vr,
+  "./programming-language-json.svg": qr,
+  "./programming-language-kotlin.svg": zr,
+  "./programming-language-node.svg": Qr,
+  "./programming-language-objc.svg": Xr,
+  "./programming-language-ocaml.svg": Yr,
+  "./programming-language-php.svg": Zr,
+  "./programming-language-powershell.svg": _r,
+  "./programming-language-python.svg": ro,
+  "./programming-language-r.svg": oo,
+  "./programming-language-ruby.svg": mo,
+  "./programming-language-scala.svg": go,
+  "./programming-language-shell.svg": ao,
+  "./programming-language-swift.svg": so,
+  "./programming-language-typescript.svg": io,
+  "./programming-script-code.svg": po,
+  "./programming-tool-git.svg": to,
+  "./programming-tool-tailwindcss.svg": eo
+}), no = (r) => {
   const o = `./${r}.svg`;
   return m[o] ? m[o] : (console.warn(`Could not find icon: ${r}`), null);
 };
 export {
-  eo as getIcon
+  no as getIcon
 };

package/dist/components/ScalarIconButton/ScalarIconButton.stories.d.ts

@@ -22,7 +22,7 @@ declare const meta: {
     argTypes: {
         icon: {
             control: "select";
-            options: readonly ["Add", "AddTab", "ArrowLeft", "ArrowRight", "Brackets", "Branch", "Changelog", "Checkmark", "ChevronDown", "ChevronLeft", "ChevronRight", "ChevronUp", "Clipboard", "Close", "CloseTab", "CloseTabs", "Cloud", "CodeFolder", "Cog", "Collection", "Cookie", "DarkMode", "Delete", "Discord", "DiscordLine", "DocsPage", "Download", "Duplicate", "Edit", "Ellipses", "Email", "Error", "Example", "ExternalLink", "FilterList", "Folder", "GitHub", "GitHubLine", "Google", "Help", "Hide", "History", "House", "Import", "Info", "Key", "Leave", "LightDarkModeToggle", "LightMode", "Link", "Lock", "Logo", "LogoAPI", "LogoClient", "LogoMarket", "LogoSwagger", "Magic", "Menu", "Page", "PaperAirplane", "Pencil", "Play", "Refresh", "Roadmap", "Scribble", "Search", "Server", "Settings", "Show", "Sort", "Terminal", "ThumbsDown", "ThumbsUp", "Trash", "Unlock", "Upload", "UploadSimple", "User", "Users", "Wallet", "Workspace", "programming-framework-angular", "programming-framework-astro", "programming-framework-laravel", "programming-framework-nextdotjs", "programming-framework-react", "programming-framework-vuedotjs", "programming-language-c", "programming-language-clojure", "programming-language-csharp", "programming-language-css3", "programming-language-go", "programming-language-html5", "programming-language-http", "programming-language-java", "programming-language-javascript", "programming-language-json", "programming-language-kotlin", "programming-language-node", "programming-language-objc", "programming-language-ocaml", "programming-language-php", "programming-language-powershell", "programming-language-python", "programming-language-r", "programming-language-ruby", "programming-language-scala", "programming-language-shell", "programming-language-swift", "programming-language-typescript", "programming-script-code", "programming-tool-git", "programming-tool-tailwindcss"];
+            options: readonly ["Add", "AddTab", "ArrowLeft", "ArrowRight", "Brackets", "Branch", "Changelog", "Checkmark", "ChevronDown", "ChevronLeft", "ChevronRight", "ChevronUp", "Clipboard", "Close", "CloseTab", "CloseTabs", "Cloud", "CodeFolder", "Cog", "Collection", "Cookie", "DarkMode", "Delete", "Discord", "DiscordLine", "DocsPage", "Download", "Duplicate", "Edit", "Ellipses", "Email", "Error", "Example", "ExternalLink", "FilterList", "Folder", "GitHub", "GitHubLine", "Google", "Help", "Hide", "History", "House", "Import", "Info", "Key", "Leave", "LightDarkModeToggle", "LightMode", "Link", "Lock", "Logo", "LogoAPI", "LogoClient", "LogoMarket", "LogoSwagger", "Magic", "Menu", "Page", "PaperAirplane", "Pencil", "Play", "Refresh", "Roadmap", "Scribble", "Search", "Server", "Settings", "Show", "Sort", "Terminal", "ThumbsDown", "ThumbsUp", "Trash", "Unlock", "Unwatch", "Upload", "UploadSimple", "User", "Users", "Wallet", "Watch", "Workspace", "programming-framework-angular", "programming-framework-astro", "programming-framework-laravel", "programming-framework-nextdotjs", "programming-framework-react", "programming-framework-vuedotjs", "programming-language-c", "programming-language-clojure", "programming-language-csharp", "programming-language-css3", "programming-language-go", "programming-language-html5", "programming-language-http", "programming-language-java", "programming-language-javascript", "programming-language-json", "programming-language-kotlin", "programming-language-node", "programming-language-objc", "programming-language-ocaml", "programming-language-php", "programming-language-powershell", "programming-language-python", "programming-language-r", "programming-language-ruby", "programming-language-scala", "programming-language-shell", "programming-language-swift", "programming-language-typescript", "programming-script-code", "programming-tool-git", "programming-tool-tailwindcss"];
         };
         size: {
             control: "select";

package/dist/components/ScalarModal/ScalarModal.vue.d.ts

@@ -1,4 +1,5 @@
-export declare const useModal: () => {
+/** Hook for creating a reactive modal state */
+export declare function useModal(): {
     open: boolean;
     show: () => void;
     hide: () => void;

package/dist/components/ScalarModal/ScalarModal.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarModal.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarModal/ScalarModal.vue"],"names":[],"mappings":"AA8LA,eAAO,MAAM,QAAQ;;;;CASjB,CAAA;;WAMO,UAAU,CAAC,OAAO,QAAQ,CAAC;YAC1B,MAAM;gBACF,MAAM;eACP,MAAM;;;;WAHV,UAAU,CAAC,OAAO,QAAQ,CAAC;YAC1B,MAAM;gBACF,MAAM;eACP,MAAM;;;;;;qBAkNS,GAAG;qBACH,GAAG;;AA3NjC,wBA2PK;AAcL,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACpC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarModal.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarModal/ScalarModal.vue"],"names":[],"mappings":"AAyNA,+CAA+C;AAC/C,wBAAgB,QAAQ;;;;EAUvB;;WAMU,UAAU,CAAC,OAAO,QAAQ,CAAC;YAC1B,MAAM;gBACF,MAAM;eACP,MAAM;;;;WAHV,UAAU,CAAC,OAAO,QAAQ,CAAC;YAC1B,MAAM;gBACF,MAAM;eACP,MAAM;;;;;;qBA8PS,GAAG;qBACH,GAAG;;AAvQjC,wBAwSK;AAcL,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACpC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/ScalarModal/ScalarModal.vue.js

@@ -1,9 +1,9 @@
 import o from "./ScalarModal.vue2.js";
-import { useModal as e } from "./ScalarModal.vue2.js";
+import { useModal as f } from "./ScalarModal.vue2.js";
 /* empty css                 */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-df67288f"]]);
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-e37b0bd8"]]);
 export {
   m as default,
-  e as useModal
+  f as useModal
 };

package/dist/components/ScalarModal/ScalarModal.vue2.js

@@ -1,15 +1,23 @@
-import { defineComponent as p, openBlock as t, createBlock as o, unref as a, withCtx as s, createElementVNode as x, normalizeClass as l, createVNode as h, normalizeStyle as v, createTextVNode as f, toDisplayString as u, createCommentVNode as b, createElementBlock as y, renderSlot as d, reactive as g } from "vue";
-import { Dialog as w, DialogPanel as z, DialogTitle as k, DialogDescription as C } from "@headlessui/vue";
-import { cva as i, cx as m } from "../../cva.js";
-const B = () => g({
-  open: !1,
-  show() {
-    this.open = !0;
-  },
-  hide() {
-    this.open = !1;
-  }
-}), W = /* @__PURE__ */ p({
+import { defineComponent as v, openBlock as l, createBlock as r, unref as a, withCtx as o, createElementVNode as x, normalizeClass as s, createVNode as i, normalizeStyle as b, createTextVNode as g, toDisplayString as y, createCommentVNode as d, createElementBlock as n, renderSlot as m, reactive as w } from "vue";
+import { Dialog as z, DialogPanel as k, DialogTitle as C, DialogDescription as D } from "@headlessui/vue";
+import { cva as c, cx as p } from "../../cva.js";
+import S from "../ScalarIconButton/ScalarIconButton.vue.js";
+const $ = {
+  key: 0,
+  class: "close-button z-10 fixed right-2 top-2"
+};
+function E() {
+  return w({
+    open: !1,
+    show() {
+      this.open = !0;
+    },
+    hide() {
+      this.open = !1;
+    }
+  });
+}
+const M = /* @__PURE__ */ v({
   __name: "ScalarModal",
   props: {
     state: {},
@@ -19,11 +27,11 @@ const B = () => g({
     size: { default: "md" },
     variant: {}
   },
-  setup(D) {
-    const n = i({
+  setup(N) {
+    const f = c({
       base: [
         "scalar-modal",
-        "col relative mx-auto mb-0 mt-20 w-[calc(100vw-16px)] rounded-lg bg-b-2 p-0 text-left leading-snug text-c-1 opacity-0 lg:w-[calc(100vw-32px)]"
+        "col relative mx-auto mb-0 w-[calc(100vw-16px)] rounded-lg bg-b-2 p-0 text-left leading-snug text-c-1 opacity-0 lg:w-[calc(100vw-32px)]"
       ].join(" "),
       variants: {
         size: {
@@ -31,9 +39,9 @@ const B = () => g({
           xs: "mt-20 max-w-screen-xs",
           sm: "mt-20 max-w-screen-sm",
           md: "mt-20 max-w-screen-md",
-          lg: "mt-10 max-w-screen-lg",
-          xl: "mt-2 max-w-screen-xl",
-          full: "mt-0 overflow-hidden"
+          lg: "m-auto max-w-screen-lg",
+          xl: "m-auto max-w-screen-xl",
+          full: "full-size-styles mt-0 overflow-hidden lg:w-full"
         },
         variant: {
           form: "scalar-modal-form",
@@ -41,7 +49,7 @@ const B = () => g({
           search: "scalar-modal-search"
         }
       }
-    }), c = i({
+    }), u = c({
       base: [
         "scalar-modal-body",
         "relative m-1 max-h-[calc(100dvh-240px)] rounded-lg bg-b-1 p-3"
@@ -58,19 +66,19 @@ const B = () => g({
           sm: "max-h-[calc(100dvh-240px)]",
           md: "max-h-[calc(100dvh-240px)]",
           lg: "max-h-[calc(100dvh-180px)]",
-          xl: "max-h-[calc(100dvh-120px)]",
-          full: "max-h-dvh"
+          xl: "m-0 max-h-[calc(100dvh-120px)] p-0",
+          full: "max-h-dvh rounded-none bg-transparent"
         }
       }
     });
-    return (e, r) => (t(), o(a(w), {
+    return (e, t) => (l(), r(a(z), {
       open: e.state.open,
-      onClose: r[0] || (r[0] = (N) => e.state.hide())
+      onClose: t[1] || (t[1] = (h) => e.state.hide())
     }, {
-      default: s(() => [
+      default: o(() => [
         x("div", {
-          class: l(
-            a(m)(
+          class: s(
+            a(p)(
               "scalar-modal-layout fixed left-0 top-0 flex items-start justify-center",
               "z-[1001] h-[100dvh] w-[100dvw]",
               "bg-backdrop opacity-0 dark:bg-backdropdark",
@@ -78,37 +86,45 @@ const B = () => g({
             )
           )
         }, [
-          h(a(z), {
-            class: l(a(n)({ size: e.size, variant: e.variant })),
-            style: v({ maxWidth: e.maxWidth })
+          i(a(k), {
+            class: s(a(f)({ size: e.size, variant: e.variant })),
+            style: b({ maxWidth: e.maxWidth })
           }, {
-            default: s(() => [
-              e.title ? (t(), o(a(k), {
+            default: o(() => [
+              e.title ? (l(), r(a(C), {
                 key: 0,
-                class: l(["scalar-modal-header m-0 -mb-1 rounded-lg p-3 text-left text-sm font-medium text-c-1", { "pb-0 pt-6": e.variant === "history" }])
+                class: s(["scalar-modal-header m-0 -mb-1 rounded-lg p-3 text-left text-sm font-medium text-c-1", { "pb-0 pt-6": e.variant === "history" }])
               }, {
-                default: s(() => [
-                  f(u(e.title), 1)
+                default: o(() => [
+                  g(y(e.title), 1)
                 ]),
                 _: 1
-              }, 8, ["class"])) : b("", !0),
-              e.size === "full" ? (t(), y("div", {
+              }, 8, ["class"])) : d("", !0),
+              e.size === "full" ? (l(), n("div", {
                 key: 1,
-                class: l(e.bodyClass)
+                class: s(e.bodyClass)
               }, [
-                d(e.$slots, "default", {}, void 0, !0)
-              ], 2)) : (t(), o(a(C), {
+                m(e.$slots, "default", {}, void 0, !0)
+              ], 2)) : (l(), r(a(D), {
                 key: 2,
-                class: l(a(m)(e.bodyClass, a(c)({ size: e.size, variant: e.variant })))
+                class: s(a(p)(e.bodyClass, a(u)({ size: e.size, variant: e.variant })))
               }, {
-                default: s(() => [
-                  d(e.$slots, "default", {}, void 0, !0)
+                default: o(() => [
+                  m(e.$slots, "default", {}, void 0, !0)
                 ]),
                 _: 3
               }, 8, ["class"]))
             ]),
             _: 3
-          }, 8, ["class", "style"])
+          }, 8, ["class", "style"]),
+          e.size === "full" ? (l(), n("div", $, [
+            i(a(S), {
+              class: "hover:bg-b-2 focus:outline-none",
+              icon: "Close",
+              label: "Clear Search",
+              onClose: t[0] || (t[0] = (h) => e.state.hide())
+            })
+          ])) : d("", !0)
         ], 2)
       ]),
       _: 3
@@ -116,6 +132,6 @@ const B = () => g({
   }
 });
 export {
-  W as default,
-  B as useModal
+  M as default,
+  E as useModal
 };