@digitalservicebund/ris-ui 0.0.1 → 1.0.0

package/README.md

@@ -1,6 +1,6 @@
 # RIS UI
 
-**Component library for NeuRIS** | 👀 [Demo](https://digitalservicebund.github.io/ris-ui) | 🤖 [PrimeVue Docs](https://primevue.org)
+**Component library for NeuRIS** | 👀 [Demo](https://digitalservicebund.github.io/ris-ui) | 📦 [npm](https://www.npmjs.com/package/@digitalservicebund/ris-ui) | 🤖 [PrimeVue Docs](https://primevue.org)
 
 ## Installation
 
@@ -21,7 +21,7 @@ npm install @digitalservicebund/ris-ui
 
 ## Usage
 
-Import and apply the RIS UI theme and styling where you set up your application (typically `main.ts`):
+Import and apply the RIS UI theme, styling, and fonts where you set up your application (typically `main.ts`):
 
 ```diff
   // main.ts
@@ -29,6 +29,7 @@ Import and apply the RIS UI theme and styling where you set up your application
   import PrimeVue from "primevue/config";
 + import { RisUiTheme } from "@digitalservicebund/ris-ui/primevue";
 + import "@digitalservicebund/ris-ui/primevue/style.css";
++ import "@digitalservicebund/ris-ui/fonts.css";
 
   const app = createApp().use(PrimeVue, {
 +   unstyled: true,
@@ -52,7 +53,7 @@ If you want, also install the Tailwind preset (for colors, spacings, etc.) and p
 
 ## Development
 
-If you want to make changes to RIS UI, you'll need the current [Node.js LTS](https://nodejs.org/en/download/package-manager) as well as NPM installed on your machine.
+To make changes to RIS UI, you'll need the current [Node.js LTS](https://nodejs.org/en/download/package-manager) along with npm installed on your machine.
 
 To get started, first clone this repository:
 
@@ -64,6 +65,10 @@ Then install dependencies:
 
 ```sh
 npm install
+
+# This will populate the public/fonts folder. See public/fonts/.gitkeep
+# for more information.
+npm run sync-fonts
 ```
 
 You can now run a local preview to see any changes you make to the code:
@@ -141,9 +146,18 @@ When you make a commit now, Lefthook will ensure your changes and commit message
 - ESLint passes without warnings
 - The commit message follows the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification. If you're making changes to a component, please use the component name as the scope (multiple scopes are allowed).
 
+Keep in mind that your commit messages will be used for generating changelogs and inferring version numbers when making a release. If you made multiple changes, please consider squashing them to keep the history, as well as the changelogs, tidy and readable.
+
 ### Making a release
 
-> 🚜 Under construction
+To release a new version, run the ["Release to npm"](https://github.com/digitalservicebund/ris-ui/actions/workflows/release.yml) action. This will:
+
+- Build the project
+- Publish the build to npm
+- Create a Git tag and GitHub release
+- Generate a changelog based on the commits since the last release
+
+Releases are created automatically by [semantic-release](https://github.com/semantic-release/semantic-release?tab=readme-ov-file). Please refer to their documentation to learn more about how version numbers are inferred and how changelogs are created. 
 
 ## Contributing
 

package/dist/fonts/.gitkeep

@@ -0,0 +1,8 @@
+Fonts are provided by @digitalservicebund/angie. But we need to copy
+them here rather than bundling them with the rest of the CSS since
+Vite would otherwise base64-encode and inline them in the CSS. Because
+we don't need all those fonts, the CSS would be unnecessarily big and
+slow.
+
+Also see:
+https://github.com/vitejs/vite/issues/3295#issuecomment-1353409889

package/dist/fonts.css

@@ -0,0 +1,92 @@
+/* BundesSans */
+@font-face {
+  font-family: BundesSansWeb;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    url("./fonts/BundesSansWeb-Regular.woff2") format("woff2"),
+    url("./fonts/BundesSansWeb-Regular.woff") format("woff");
+}
+
+@font-face {
+  font-family: BundesSansWeb;
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    url("./fonts/BundesSansWeb-Italic.woff2") format("woff2"),
+    url("./fonts/BundesSansWeb-Italic.woff") format("woff");
+}
+
+@font-face {
+  font-family: BundesSansWeb;
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src:
+    url("./fonts/BundesSansWeb-Bold.woff2") format("woff2"),
+    url("./fonts/BundesSansWeb-Bold.woff") format("woff");
+}
+
+@font-face {
+  font-family: BundesSansWeb;
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src:
+    url("./fonts/BundesSansWeb-BoldItalic.woff2") format("woff2"),
+    url("./fonts/BundesSansWeb-BoldItalic.woff") format("woff");
+}
+
+/* BundesSerif */
+@font-face {
+  font-family: BundesSerifWeb;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    url("./fonts/BundesSerifWeb-Regular.woff2") format("woff2"),
+    url("./fonts/BundesSerifWeb-Regular.woff") format("woff");
+}
+
+@font-face {
+  font-family: BundesSerifWeb;
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    url("./fonts/BundesSerifWeb-Italic.woff2") format("woff2"),
+    url("./fonts/BundesSerifWeb-Italic.woff") format("woff");
+}
+
+@font-face {
+  font-family: BundesSerifWeb;
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src:
+    url("./fonts/BundesSerifWeb-Bold.woff2") format("woff2"),
+    url("./fonts/BundesSerifWeb-Bold.woff") format("woff");
+}
+
+@font-face {
+  font-family: BundesSerifWeb;
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src:
+    url("./fonts/BundesSerifWeb-BoldItalic.woff2") format("woff2"),
+    url("./fonts/BundesSerifWeb-BoldItalic.woff") format("woff");
+}
+
+/* BundesSans Condensed */
+@font-face {
+  font-family: BundesSansCondWeb;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    url("./fonts/BundesSansCondWeb.woff2") format("woff2"),
+    url("./fonts/BundesSansCondWeb.woff") format("woff");
+}

package/dist/lib/tags.d.ts

@@ -9,7 +9,7 @@
  */
 export declare const html: (strings: TemplateStringsArray, ...expressions: unknown[]) => string;
 /**
- * Tagges template string for Tailwind classes. The tag itself doesn't do
+ * Tagged template string for Tailwind classes. The tag itself doesn't do
  * anything, but using it will allow your editor to provide Tailwind
  * Intellisense for template strings in scripts, as well as automatic class
  * sorting via Prettier.

package/dist/primevue/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c={root:({props:e,context:o,instance:l})=>{let t,r,n,a,s,u;return l.hasIcon&&e.size==="large"&&e.label&&(e.iconPos==="left"?t="pl-20 pr-24 gap-8":e.iconPos==="right"&&(t="pl-24 pr-20 gap-8")),l.hasIcon&&(!e.size||e.size==="small")&&e.label&&(e.iconPos==="left"?t="pl-12 pr-16 gap-4":e.iconPos==="right"&&(t="pl-16 pr-12 gap-4")),l.hasIcon&&!e.label&&(t="p-0 gap-0"),e.size==="large"?r=e.label?"py-20 px-24 text-[1.125rem] min-h-64":"w-64 h-64":r=e.label?"py-8 px-16 text-base min-h-48":"w-48 h-48",e.severity==="primary"&&(o.disabled?n="bg-gray-400 cursor-not-allowed text-gray-600 border-transparent":n="bg-blue-800 border-transparent text-white hover:bg-blue-700 active:bg-blue-500 active:text-blue-800 focus:outline-none focus:ring-blue-800 focus:ring-4 focus:ring-offset-4"),e.severity==="secondary"&&(o.disabled?a="bg-white cursor-not-allowed text-blue-800 text-opacity-50 border-blue-800 border-opacity-50":a="bg-white text-blue-800 border-solid border-blue-800 hover:bg-gray-200 active:bg-white active:text-blue-800 active:border-transparent focus:outline-none focus:ring-blue-800 focus:ring-4 focus:ring-offset-2 focus:bg-gray-200"),e.severity==="ghost"&&(o.disabled?s="cursor-not-allowed text-gray-800 text-opacity-50 border-transparent":s="bg-transparent text-blue-800 border-transparent hover:bg-white hover:border-gray-500 hover:border-2 hover:border-solid active:bg-white active:border-transparent focus:outline-none focus:ring-blue-800 focus:ring-4 focus:ring-offset-4 focus:bg-white focus:border-gray-500 focus:border-2 focus:border-solid"),l.hasIcon&&(e.iconPos==="left"?u="flex-row":e.iconPos==="right"&&(u="flex-row-reverse")),{class:["inline-flex","items-center","justify-center","font-bold","text-center","max-w-full","leading-24","rounded-none","box-border","border","border-2",!o.disabled&&"focus:outline-none focus:ring-4 focus:ring-offset-4",!e.size&&"py-8 px-16 text-base min-h-48",t,r,n,a,s,u]}},label:({props:e})=>({class:[{underline:e.severity==="ghost"},{"sr-only":!e.label}]})},g=(e,...o)=>{let l=e[0];for(let t=1,r=e.length;t<r;t++)l+=o[t-1],l+=e[t];return l},i=g,f={root:{class:i`has-[input:read-only]:curser-not-allowed inline-flex items-center gap-4 border-2 border-blue-800 bg-white px-16 py-0 outline-4 -outline-offset-4 outline-blue-800 has-[[aria-invalid]]:border-red-800 has-[input:disabled]:border-blue-500 has-[input:read-only]:border-blue-300 has-[[aria-invalid]]:bg-red-200 has-[input:disabled]:bg-white has-[input:read-only]:bg-blue-300 has-[[data-size=large]]:px-24 has-[input:disabled]:text-blue-500 has-[input:disabled]:outline-none has-[:focus]:outline has-[:hover]:outline has-[[aria-invalid]]:outline-red-800`}},h={root:{class:i`m-0 p-0`}},y={root:({props:e,parent:o})=>{const l=i`border-2 border-blue-800 bg-white outline-4 -outline-offset-4 outline-blue-800 placeholder:text-gray-900 read-only:cursor-not-allowed read-only:border-blue-300 read-only:bg-blue-300 hover:outline focus:outline disabled:border-blue-500 disabled:bg-white disabled:text-blue-500 disabled:outline-none aria-[invalid]:border-red-800 aria-[invalid]:bg-red-200 aria-[invalid]:outline-red-800 aria-[invalid]:disabled:outline-none`,t=i`[&[type=password]:not(:placeholder-shown)]:text-[28px] [&[type=password]:not(:placeholder-shown)]:tracking-[4px] [&[type=password]]:w-full`,r=o.instance.$name==="InputGroup",n=i`bg-transparent placeholder:text-gray-900 focus:outline-none`,a=i`w-full`,s=i`ris-body2-regular h-48 px-16 py-4`,u=i`ris-body1-regular h-64 px-24 py-4`,d=i`ris-body2-regular h-[44px] p-0`,b=i`ris-body1-regular h-[60px] p-0`;return{class:{[l]:!r,[n]:r,[a]:!!e.fluid,[t]:!0,[s]:(!e.size||e.size==="small")&&!r,[d]:(!e.size||e.size==="small")&&r,[u]:e.size==="large"&&!r,[b]:e.size==="large"&&r},"data-size":e.size??"small"}}},x={},v={button:c,inputText:y,inputGroup:f,inputGroupAddon:h,password:x};exports.RisUi=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=(e,...n)=>{let o=e[0];for(let a=1,i=e.length;a<i;a++)o+=n[a-1],o+=e[a];return o},t=c,h={root:({props:e,instance:n})=>{const o=t`relative inline-flex max-w-full items-center justify-center gap-8 rounded-none text-center outline-4 outline-offset-4 outline-blue-800 focus:outline active:outline-none disabled:cursor-not-allowed disabled:outline-none`,a=e.severity??"primary",i=t`bg-blue-800 text-white hover:bg-blue-700 active:bg-blue-500 active:text-blue-800 disabled:bg-gray-400 disabled:text-gray-600`,b=t`border-2 border-blue-800 bg-white text-blue-800 hover:bg-gray-200 focus:bg-gray-200 active:border-white active:bg-white disabled:border-blue-500 disabled:text-blue-500 disabled:hover:bg-white`,u=t`border-2 border-transparent bg-transparent text-blue-800 underline hover:border-gray-500 hover:bg-white focus:border-gray-500 active:border-white active:bg-white disabled:bg-transparent disabled:text-gray-500`,s=e.size??"small";let l=t`ris-body2-bold h-48 py-4`,r=t`ris-body1-bold h-64 py-4`;const d=e.iconPos??"left";return n.hasIcon&&e.label?d==="left"?(l=t`${l} pl-8 pr-16`,r=t`${r} pl-20 pr-24`):d==="right"&&(l=t`${l} pl-16 pr-8`,r=t`${r} pl-24 pr-20`):n.hasIcon&&!e.label?(l=t`${l} w-48 px-4`,r=t`${r} w-64 px-4`):(l=t`${l} px-16`,r=t`${r} px-24`),{class:{[o]:!0,[l]:s==="small",[r]:s==="large",[i]:!e.text&&a==="primary",[b]:!e.text&&a==="secondary",[u]:e.text&&a==="primary"}}},label:({props:e})=>({class:{hidden:!e.label,[t`-order-1`]:e.iconPos==="right"}}),loadingIcon:({props:e})=>({class:{[t`animate-spin`]:!0,[t`h-24 w-24`]:e.size==="large",[t`h-[1.34em] w-[1.34em]`]:!e.size||e.size==="small"}})},g={root:{class:t`has-[input:read-only]:curser-not-allowed inline-flex items-center gap-4 border-2 border-blue-800 bg-white px-16 py-0 outline-4 -outline-offset-4 outline-blue-800 has-[[aria-invalid]]:border-red-800 has-[input:disabled]:border-blue-500 has-[input:read-only]:border-blue-300 has-[[aria-invalid]]:bg-red-200 has-[input:disabled]:bg-white has-[input:read-only]:bg-blue-300 has-[[data-size=large]]:px-24 has-[input:disabled]:text-blue-500 has-[input:disabled]:outline-none has-[:focus]:outline has-[:hover]:outline has-[[aria-invalid]]:outline-red-800`}},y={root:{class:t`m-0 p-0`}},p={root:({props:e,parent:n})=>{const o=t`border-2 border-blue-800 bg-white outline-4 -outline-offset-4 outline-blue-800 placeholder:text-gray-900 read-only:cursor-not-allowed read-only:border-blue-300 read-only:bg-blue-300 hover:outline focus:outline disabled:border-blue-500 disabled:bg-white disabled:text-blue-500 disabled:outline-none aria-[invalid]:border-red-800 aria-[invalid]:bg-red-200 aria-[invalid]:outline-red-800 aria-[invalid]:disabled:outline-none`,a=t`[&[type=password]:not(:placeholder-shown)]:text-[28px] [&[type=password]:not(:placeholder-shown)]:tracking-[4px] [&[type=password]]:w-full`,i=n.instance.$name==="InputGroup",b=t`bg-transparent placeholder:text-gray-900 focus:outline-none`,u=t`w-full`,s=t`ris-body2-regular h-48 px-16 py-4`,l=t`ris-body1-regular h-64 px-24 py-4`,r=t`ris-body2-regular h-[44px] p-0`,d=t`ris-body1-regular h-[60px] p-0`;return{class:{[o]:!i,[b]:i,[u]:!!e.fluid,[a]:!0,[s]:(!e.size||e.size==="small")&&!i,[r]:(!e.size||e.size==="small")&&i,[l]:e.size==="large"&&!i,[d]:e.size==="large"&&i},"data-size":e.size??"small"}}},x={},w={button:h,inputText:p,inputGroup:g,inputGroupAddon:y,password:x};exports.RisUiTheme=w;

package/dist/primevue/index.d.ts

@@ -1,5 +1,5 @@
 import "./global.css";
-export declare const RisUi: {
+export declare const RisUiTheme: {
     button: import("primevue/button").ButtonPassThroughOptions<any>;
     inputText: import("primevue/inputtext").InputTextPassThroughOptions<any>;
     inputGroup: import("primevue/inputgroup").InputGroupPassThroughOptions;

package/dist/primevue/index.js

@@ -1,62 +1,58 @@
-const c = {
-  root: ({ props: e, context: o, instance: l }) => {
-    let r, t, n, a, s, u;
-    return l.hasIcon && e.size === "large" && e.label && (e.iconPos === "left" ? r = "pl-20 pr-24 gap-8" : e.iconPos === "right" && (r = "pl-24 pr-20 gap-8")), l.hasIcon && (!e.size || e.size === "small") && e.label && (e.iconPos === "left" ? r = "pl-12 pr-16 gap-4" : e.iconPos === "right" && (r = "pl-16 pr-12 gap-4")), l.hasIcon && !e.label && (r = "p-0 gap-0"), e.size === "large" ? t = e.label ? "py-20 px-24 text-[1.125rem] min-h-64" : "w-64 h-64" : t = e.label ? "py-8 px-16 text-base min-h-48" : "w-48 h-48", e.severity === "primary" && (o.disabled ? n = "bg-gray-400 cursor-not-allowed text-gray-600 border-transparent" : n = "bg-blue-800 border-transparent text-white hover:bg-blue-700 active:bg-blue-500 active:text-blue-800 focus:outline-none focus:ring-blue-800 focus:ring-4 focus:ring-offset-4"), e.severity === "secondary" && (o.disabled ? a = "bg-white cursor-not-allowed text-blue-800 text-opacity-50 border-blue-800 border-opacity-50" : a = "bg-white text-blue-800 border-solid border-blue-800 hover:bg-gray-200 active:bg-white active:text-blue-800 active:border-transparent focus:outline-none focus:ring-blue-800 focus:ring-4 focus:ring-offset-2 focus:bg-gray-200"), e.severity === "ghost" && (o.disabled ? s = "cursor-not-allowed text-gray-800 text-opacity-50 border-transparent" : s = "bg-transparent text-blue-800 border-transparent hover:bg-white hover:border-gray-500 hover:border-2 hover:border-solid active:bg-white active:border-transparent focus:outline-none focus:ring-blue-800 focus:ring-4 focus:ring-offset-4 focus:bg-white focus:border-gray-500 focus:border-2 focus:border-solid"), l.hasIcon && (e.iconPos === "left" ? u = "flex-row" : e.iconPos === "right" && (u = "flex-row-reverse")), {
-      class: [
-        "inline-flex",
-        "items-center",
-        "justify-center",
-        "font-bold",
-        "text-center",
-        "max-w-full",
-        "leading-24",
-        "rounded-none",
-        "box-border",
-        "border",
-        "border-2",
-        !o.disabled && "focus:outline-none focus:ring-4 focus:ring-offset-4",
-        !e.size && "py-8 px-16 text-base min-h-48",
-        r,
-        t,
-        n,
-        a,
-        s,
-        u
-      ]
+const c = (e, ...n) => {
+  let o = e[0];
+  for (let a = 1, i = e.length; a < i; a++)
+    o += n[a - 1], o += e[a];
+  return o;
+}, t = c, h = {
+  root: ({ props: e, instance: n }) => {
+    const o = t`relative inline-flex max-w-full items-center justify-center gap-8 rounded-none text-center outline-4 outline-offset-4 outline-blue-800 focus:outline active:outline-none disabled:cursor-not-allowed disabled:outline-none`, a = e.severity ?? "primary", i = t`bg-blue-800 text-white hover:bg-blue-700 active:bg-blue-500 active:text-blue-800 disabled:bg-gray-400 disabled:text-gray-600`, b = t`border-2 border-blue-800 bg-white text-blue-800 hover:bg-gray-200 focus:bg-gray-200 active:border-white active:bg-white disabled:border-blue-500 disabled:text-blue-500 disabled:hover:bg-white`, u = t`border-2 border-transparent bg-transparent text-blue-800 underline hover:border-gray-500 hover:bg-white focus:border-gray-500 active:border-white active:bg-white disabled:bg-transparent disabled:text-gray-500`, s = e.size ?? "small";
+    let l = t`ris-body2-bold h-48 py-4`, r = t`ris-body1-bold h-64 py-4`;
+    const d = e.iconPos ?? "left";
+    return n.hasIcon && e.label ? d === "left" ? (l = t`${l} pl-8 pr-16`, r = t`${r} pl-20 pr-24`) : d === "right" && (l = t`${l} pl-16 pr-8`, r = t`${r} pl-24 pr-20`) : n.hasIcon && !e.label ? (l = t`${l} w-48 px-4`, r = t`${r} w-64 px-4`) : (l = t`${l} px-16`, r = t`${r} px-24`), {
+      class: {
+        [o]: !0,
+        [l]: s === "small",
+        [r]: s === "large",
+        [i]: !e.text && a === "primary",
+        [b]: !e.text && a === "secondary",
+        [u]: e.text && a === "primary"
+      }
     };
   },
   label: ({ props: e }) => ({
-    class: [
-      { underline: e.severity === "ghost" },
-      { "sr-only": !e.label }
-    ]
+    class: {
+      hidden: !e.label,
+      [t`-order-1`]: e.iconPos === "right"
+    }
+  }),
+  loadingIcon: ({ props: e }) => ({
+    class: {
+      [t`animate-spin`]: !0,
+      [t`h-24 w-24`]: e.size === "large",
+      [t`h-[1.34em] w-[1.34em]`]: !e.size || e.size === "small"
+    }
   })
-}, g = (e, ...o) => {
-  let l = e[0];
-  for (let r = 1, t = e.length; r < t; r++)
-    l += o[r - 1], l += e[r];
-  return l;
-}, i = g, f = {
+}, g = {
   root: {
-    class: i`has-[input:read-only]:curser-not-allowed inline-flex items-center gap-4 border-2 border-blue-800 bg-white px-16 py-0 outline-4 -outline-offset-4 outline-blue-800 has-[[aria-invalid]]:border-red-800 has-[input:disabled]:border-blue-500 has-[input:read-only]:border-blue-300 has-[[aria-invalid]]:bg-red-200 has-[input:disabled]:bg-white has-[input:read-only]:bg-blue-300 has-[[data-size=large]]:px-24 has-[input:disabled]:text-blue-500 has-[input:disabled]:outline-none has-[:focus]:outline has-[:hover]:outline has-[[aria-invalid]]:outline-red-800`
+    class: t`has-[input:read-only]:curser-not-allowed inline-flex items-center gap-4 border-2 border-blue-800 bg-white px-16 py-0 outline-4 -outline-offset-4 outline-blue-800 has-[[aria-invalid]]:border-red-800 has-[input:disabled]:border-blue-500 has-[input:read-only]:border-blue-300 has-[[aria-invalid]]:bg-red-200 has-[input:disabled]:bg-white has-[input:read-only]:bg-blue-300 has-[[data-size=large]]:px-24 has-[input:disabled]:text-blue-500 has-[input:disabled]:outline-none has-[:focus]:outline has-[:hover]:outline has-[[aria-invalid]]:outline-red-800`
   }
-}, h = {
+}, p = {
   root: {
-    class: i`m-0 p-0`
+    class: t`m-0 p-0`
   }
 }, y = {
-  root: ({ props: e, parent: o }) => {
-    const l = i`border-2 border-blue-800 bg-white outline-4 -outline-offset-4 outline-blue-800 placeholder:text-gray-900 read-only:cursor-not-allowed read-only:border-blue-300 read-only:bg-blue-300 hover:outline focus:outline disabled:border-blue-500 disabled:bg-white disabled:text-blue-500 disabled:outline-none aria-[invalid]:border-red-800 aria-[invalid]:bg-red-200 aria-[invalid]:outline-red-800 aria-[invalid]:disabled:outline-none`, r = i`[&[type=password]:not(:placeholder-shown)]:text-[28px] [&[type=password]:not(:placeholder-shown)]:tracking-[4px] [&[type=password]]:w-full`, t = o.instance.$name === "InputGroup", n = i`bg-transparent placeholder:text-gray-900 focus:outline-none`, a = i`w-full`, s = i`ris-body2-regular h-48 px-16 py-4`, u = i`ris-body1-regular h-64 px-24 py-4`, d = i`ris-body2-regular h-[44px] p-0`, b = i`ris-body1-regular h-[60px] p-0`;
+  root: ({ props: e, parent: n }) => {
+    const o = t`border-2 border-blue-800 bg-white outline-4 -outline-offset-4 outline-blue-800 placeholder:text-gray-900 read-only:cursor-not-allowed read-only:border-blue-300 read-only:bg-blue-300 hover:outline focus:outline disabled:border-blue-500 disabled:bg-white disabled:text-blue-500 disabled:outline-none aria-[invalid]:border-red-800 aria-[invalid]:bg-red-200 aria-[invalid]:outline-red-800 aria-[invalid]:disabled:outline-none`, a = t`[&[type=password]:not(:placeholder-shown)]:text-[28px] [&[type=password]:not(:placeholder-shown)]:tracking-[4px] [&[type=password]]:w-full`, i = n.instance.$name === "InputGroup", b = t`bg-transparent placeholder:text-gray-900 focus:outline-none`, u = t`w-full`, s = t`ris-body2-regular h-48 px-16 py-4`, l = t`ris-body1-regular h-64 px-24 py-4`, r = t`ris-body2-regular h-[44px] p-0`, d = t`ris-body1-regular h-[60px] p-0`;
     return {
       class: {
-        [l]: !t,
-        [n]: t,
-        [a]: !!e.fluid,
-        [r]: !0,
-        [s]: (!e.size || e.size === "small") && !t,
-        [d]: (!e.size || e.size === "small") && t,
-        [u]: e.size === "large" && !t,
-        [b]: e.size === "large" && t
+        [o]: !i,
+        [b]: i,
+        [u]: !!e.fluid,
+        [a]: !0,
+        [s]: (!e.size || e.size === "small") && !i,
+        [r]: (!e.size || e.size === "small") && i,
+        [l]: e.size === "large" && !i,
+        [d]: e.size === "large" && i
       },
       "data-size": e.size ?? "small"
     };
@@ -64,12 +60,12 @@ const c = {
 }, x = {
   // All styling moved to inputText.ts
 }, w = {
-  button: c,
+  button: h,
   inputText: y,
-  inputGroup: f,
-  inputGroupAddon: h,
+  inputGroup: g,
+  inputGroupAddon: p,
   password: x
 };
 export {
-  w as RisUi
+  w as RisUiTheme
 };