@react-fabric/form 1.0.0-beta.36 → 1.0.0-beta.37

package/{src/input/ArrayInput.module.css → css/_arrayInput.css}

@@ -21,20 +21,20 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer var {
-  .arrayInput {
+@layer variants {
+  .fabric-arrayInput {
     & [data-ref="fieldWrapper"] {
       flex: 1 1 0%;
     }
 
-    & .addButton :global(.buttonInner) {
-      color: theme(colors.tint.600);
-      outline: 1px dashed theme(colors.tint.600);
+    & .fabric-addButton .fabric-button {
+      color: var(--color-tint-600);
+      outline: 1px dashed var(--color-tint-600);
 
       &[data-invalid="true"] {
-        color: theme(colors.danger.600);
-        background-color: theme(colors.danger.100);
-        outline: 1px dashed theme(colors.danger.600);
+        color: var(--color-danger-600);
+        background-color: var(--color-danger-100);
+        outline: 1px dashed var(--color-danger-600);
       }
     }
   }

package/{src/input/ColorPicker.module.css → css/_colorPicker.css}

@@ -21,44 +21,44 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .colorPicker {
-    --color-shadow: theme(borderColor.base);
+@layer components {
+  .fabric-colorPicker {
+    --color-shadow: var(--border-color-base);
 
     & input {
       padding: 0 4px !important;
 
       line-height: 2;
-      color: theme(textColor.base);
+      color: var(--text-color-base);
 
-      background-color: theme(backgroundColor.base);
-      border: 1px solid theme(borderColor.base);
-      border-radius: theme(borderRadius.sm);
+      background-color: var(--bg-color-base);
+      border: 1px solid var(--border-color-base);
+      border-radius: var(--rounded-sm);
       box-shadow: none;
 
       &:focus {
-        border-color: theme(borderColor.primary.DEFAULT);
+        border-color: var(--border-primary-500);
       }
     }
 
     & label {
-      color: theme(textColor.base);
+      color: var(--text-color-base);
     }
 
-    & :global(.flexbox-fix) {
+    & .flexbox-fix {
       justify-content: center;
-      border-color: theme(borderColor.muted);
+      border-color: var(--border-color-muted);
 
       & > div > div {
         text-align: center;
       }
 
       & span > div {
-        box-shadow: 0 0 1px 1px theme(borderColor.base) inset !important;
+        box-shadow: 0 0 1px 1px var(--border-color-base) inset !important;
       }
     }
 
-    & :global(.saturation-black) ~ div {
+    & .saturation-black ~ div {
       pointer-events: none;
     }
   }

package/{src/internal/Field.module.css → css/_field.css}

@@ -21,28 +21,28 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .fieldWrapper {
+@layer components {
+  .fabric-fieldWrapper {
     /* later */
   }
 }
 
-@layer var {
-  .inputWrapper {
+@layer variants {
+  .fabric-inputWrapper {
     &::after {
       inset-inline: 50%;
       transition: all 300ms;
       transition-delay: 100ms;
     }
 
-    & .decorate:has([data-ref="button"]) {
+    & .fabric-decorate:has([data-ref="button"]) {
       display: flex;
       align-self: stretch;
     }
 
     &:has(input[disabled], textarea[disabled]) {
       cursor: not-allowed;
-      background-color: theme(colors.tint.50);
+      background-color: var(--color-tint-50);
 
       & input,
       & textarea {
@@ -54,14 +54,14 @@
     &:has([data-open="true"]) {
       z-index: 1;
       background-color: var(--fabric-input-focus);
-      outline-color: var(--primary);
+      outline-color: var(--color-primary);
 
       &:not(:has([aria-readonly="true"]:not([hidden])))::after {
         inset-inline: 0;
       }
     }
 
-    &:global(.fixed) {
+    &.fixed {
       box-shadow: 0 0 2rem 0.5rem var(--fabric-shadow);
     }
 
@@ -96,33 +96,33 @@
       appearance: none;
     }
 
-    & input[type="date"]:global(.empty)::-webkit-datetime-edit,
-    & input[type="datetime-local"]:global(.empty)::-webkit-datetime-edit {
-      color: theme(colors.tint.400);
+    & input[type="date"].empty::-webkit-datetime-edit,
+    & input[type="datetime-local"].empty::-webkit-datetime-edit {
+      color: var(--color-tint-400);
     }
 
     & input:-webkit-autofill {
       box-shadow: 0 0 0 999em var(--fabric-input) inset;
 
-      -webkit-text-fill-color: theme(colors.accent.700);
+      -webkit-text-fill-color: var(--color-accent-700);
     }
 
     & input:-webkit-autofill:focus {
       box-shadow: 0 0 0 999em var(--fabric-input-focus) inset;
 
-      -webkit-text-fill-color: theme(colors.accent.700);
+      -webkit-text-fill-color: var(--color-accent-700);
     }
 
-    &.invalidWrapper {
-      outline-color: theme(colors.danger.500);
+    &.fabric-invalidWrapper {
+      outline-color: var(--color-danger-500);
 
       &::after {
-        background-color: theme(colors.danger.500);
+        background-color: var(--color-danger-500);
       }
     }
   }
 
-  .fieldGroup {
+  .fabric-fieldGroup {
     > * {
       line-height: 1;
     }

package/{src/input/File.module.css → css/_file.css}

@@ -21,19 +21,19 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .fileInput {
+@layer components {
+  .fabric-fileInput {
     &::-webkit-file-upload-button {
       cursor: pointer;
 
       padding-block: 0;
 
-      color: theme(textColor.white);
+      color: var(--text-white);
 
       opacity: 0.8;
-      background-color: theme(backgroundColor.primary.500);
+      background-color: var(--bg-primary-500);
       border: 0;
-      border-radius: theme(borderRadius.DEFAULT);
+      border-radius: var(--rounded);
 
       &:hover {
         opacity: 0.9;
@@ -41,12 +41,12 @@
     }
 
     &[aria-invalid="true"]::-webkit-file-upload-button {
-      background-color: theme(backgroundColor.danger.500);
+      background-color: var(--bg-danger-500);
     }
 
     &:disabled::-webkit-file-upload-button {
       pointer-events: none;
-      background-color: theme(backgroundColor.muted);
+      background-color: var(--bg-color-muted);
     }
 
     &[readOnly] {

package/css/styles.css

@@ -0,0 +1,27 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2025 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@import "./_arrayInput.css";
+@import "./_colorPicker.css";
+@import "./_field.css";
+@import "./_file.css";

package/dist/cjs/builder/FileField.js

@@ -7,23 +7,29 @@ var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var core = require('@react-fabric/core');
 var utilities = require('@react-fabric/utilities');
 var react = require('react');
+var reactI18next = require('react-i18next');
 var useFileUploader = require('../hooks/useFileUploader.js');
 var Field = require('../input/Field.js');
 var Hidden = require('../input/Hidden.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["uploadHandler", "inline", "label", "accept", "value", "fileUrl", "multiple"];
+var _excluded = ["uploadHandler", "inline", "label", "accept", "value", "fileUrl", "multiple", "invalid", "error"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FileField = function FileField(_ref) {
+  var _error$values$label, _error$values, _error$values2;
   var uploadHandler = _ref.uploadHandler,
     inline = _ref.inline,
     label = _ref.label,
     accept = _ref.accept,
     value = _ref.value;
     _ref.fileUrl;
-    var multiple = _ref.multiple,
+    var multiple = _ref.multiple;
+    _ref.invalid;
+    var error = _ref.error,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
   var _useFileUploader = useFileUploader.useFileUploader( /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data, config) {
         return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -49,32 +55,38 @@ var FileField = function FileField(_ref) {
     upload = _useFileUploader.upload,
     remove = _useFileUploader.remove;
   return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsxs(Field.Field, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Field.Field, {
       plain: true,
       inline: inline,
       label: label,
-      className: "inline-block",
-      children: [/*#__PURE__*/jsxRuntime.jsx(Hidden.HiddenInput, _objectSpread({
+      children: /*#__PURE__*/jsxRuntime.jsx(Hidden.HiddenInput, _objectSpread({
         hiddenValue: multiple ? list : list === null || list === void 0 ? void 0 : list[0]
-      }, rest)), /*#__PURE__*/jsxRuntime.jsx("span", {
-        children: /*#__PURE__*/jsxRuntime.jsx(core.Button, {
-          badge: pending > 0 ? "".concat(pending) : undefined,
-          "data-ref": "filebtn",
-          children: /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
-            children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-              children: "Add file"
-            }), /*#__PURE__*/jsxRuntime.jsx("input", {
-              type: "file",
-              accept: accept,
-              multiple: multiple,
-              className: "absolute inset-0 opacity-0 z-5",
-              onChange: function onChange(e) {
-                return [upload(e.target.files), e.target.value = ""];
-              }
-            })]
-          })
+      }, rest))
+    }), /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
+      color: "danger-200",
+      content: utilities.isString(error) ? "".concat(error) : error && t(error === null || error === void 0 ? void 0 : error.key, error.values ? _objectSpread(_objectSpread({}, error === null || error === void 0 ? void 0 : error.values), {}, {
+        label: t((_error$values$label = (_error$values = error.values) === null || _error$values === void 0 ? void 0 : _error$values.label) !== null && _error$values$label !== void 0 ? _error$values$label : "form:badkey", (_error$values2 = error.values) === null || _error$values2 === void 0 ? void 0 : _error$values2.path)
+      }) : {}),
+      disabled: !error,
+      children: /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+        badge: pending > 0 ? "".concat(pending) : undefined,
+        color: error ? "danger" : undefined,
+        variant: error ? "soft" : undefined,
+        "data-ref": "filebtn",
+        children: /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+            children: "Add file"
+          }), /*#__PURE__*/jsxRuntime.jsx("input", {
+            type: "file",
+            accept: accept,
+            multiple: multiple,
+            className: "absolute inset-0 opacity-0 z-5",
+            onChange: function onChange(e) {
+              return [upload(e.target.files), e.target.value = ""];
+            }
+          })]
         })
-      })]
+      })
     }), /*#__PURE__*/jsxRuntime.jsx("br", {}), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "bg-alternate",
       children: files.map(function (file, idx) {

package/dist/cjs/input/ArrayInput.js

@@ -11,7 +11,6 @@ var react = require('react');
 var reactHookForm = require('react-hook-form');
 var reactI18next = require('react-i18next');
 var FieldWrapper = require('../internal/FieldWrapper.js');
-var ArrayInput_module = require('./ArrayInput.module.css');
 var modifiers = require('@dnd-kit/modifiers');
 var utilities = require('@dnd-kit/utilities');
 var jsxRuntime = require('react/jsx-runtime');
@@ -135,7 +134,7 @@ var ArrayInput = function ArrayInput(_ref) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex justify-end",
       children: /*#__PURE__*/jsxRuntime.jsx(core$1.Tooltip, {
-        color: "danger",
+        color: "danger-200",
         content: utilities$1.isString(error) ? "".concat(error) : t(error === null || error === void 0 ? void 0 : error.key, error !== null && error !== void 0 && error.values ? _objectSpread(_objectSpread({}, error === null || error === void 0 ? void 0 : error.values), {}, {
           label: t((_error$values$label = (_error$values = error.values) === null || _error$values === void 0 ? void 0 : _error$values.label) !== null && _error$values$label !== void 0 ? _error$values$label : "form:badkey", (_error$values2 = error.values) === null || _error$values2 === void 0 ? void 0 : _error$values2.path)
         }) : {}),
@@ -148,14 +147,14 @@ var ArrayInput = function ArrayInput(_ref) {
           },
           "data-invalid": !!error,
           disabled: !!disabled || readOnly || fields.length > maxItems,
-          className: classNames(ArrayInput_module.addButton, "me-10"),
+          className: classNames("fabric-addButton", "me-10"),
           children: addLabel !== null && addLabel !== void 0 ? addLabel : t("addArray")
         })
       })
     });
   }, [error, fields, handleAdd, disabled, readOnly, addLabel, maxItems]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: ArrayInput_module.arrayInput,
+    className: "fabric-arrayInput",
     children: [/*#__PURE__*/jsxRuntime.jsx(FieldWrapper.FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
       appendLabel: /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "-me-2",

package/dist/cjs/input/AvatarInput.js

@@ -80,7 +80,7 @@ var AvatarInput = function AvatarInput(_ref) {
         size: size,
         avatar: base64
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "absolute inset-x-0 bottom-0 cursor-pointer bg-opacity-20 hover:bg-opacity-50 bg-black text-white text-xs text-center py-1",
+        className: "absolute inset-x-0 bottom-0 cursor-pointer bg-black/20 hover:bg-black/50 text-white text-xs text-center py-1",
         children: [/*#__PURE__*/jsxRuntime.jsx("span", {
           children: "Edit"
         }), /*#__PURE__*/jsxRuntime.jsx("input", {

package/dist/cjs/input/Checkbox.js

@@ -67,7 +67,7 @@ var Checkbox = function Checkbox(_ref) {
       checked: actualValue,
       onChange: handleChange
     }, rest)), /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-      className: classNames("p-0.5", actualValue && icon && !iconChecked && "bg-primary-500 text-white"),
+      className: classNames("p-0.5", actualValue && icon && !iconChecked && "bg-primary-500 text-white!"),
       size: "1.25em",
       color: invalid ? "danger" : "primary",
       icon: actualValue ? iconOn : iconOff

package/dist/cjs/input/ColorInput.js

@@ -77,7 +77,7 @@ var ColorInput = function ColorInput(_ref) {
     getReferenceProps = _useInteractions.getReferenceProps,
     getFloatingProps = _useInteractions.getFloatingProps;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classNames("flex-content min-h-[1.5em] min-w-[3.5em] self-stretch flex items-center outline-tint-200 rounded", !disabled && "bg-base", !noOutline && "bg-[var(--fabric-input)] outline overflow-hidden"),
+    className: classNames("flex-content min-h-[1.5em] min-w-[3.5em] self-stretch flex items-center outline-tint-200 rounded", !disabled && "bg-base", !noOutline && "bg-(--fabric-input) outline overflow-hidden"),
     children: [decorateStart && /*#__PURE__*/jsxRuntime.jsx("div", {
       className: classNames("text-muted leading-none flex-content", utilities.isString(decorateStart) && "px-2"),
       children: decorateStart

package/dist/cjs/input/ColorPicker.js

@@ -5,7 +5,6 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var Color = require('color');
 var react = require('react');
 var reactColor = require('react-color');
-var ColorPicker_module = require('./ColorPicker.module.css');
 var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["a"],
@@ -37,7 +36,7 @@ var ColorPicker = /*#__PURE__*/react.memo(function (_ref) {
   }, [onChange]);
   return /*#__PURE__*/jsxRuntime.jsx(reactColor.SketchPicker, {
     width: "16rem",
-    className: ColorPicker_module.colorPicker,
+    className: "fabric-colorPicker",
     styles: {
       "default": {
         hue: {

package/dist/cjs/input/Field.js

@@ -5,7 +5,6 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var core = require('@react-fabric/core');
 var classNames = require('classnames');
 var react = require('react');
-var Field_module = require('../internal/Field.module.css');
 var FieldWrapper = require('../internal/FieldWrapper.js');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -20,7 +19,7 @@ var Field = function Field(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsxRuntime.jsx(FieldWrapper.FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames(Field_module.fieldGroup, !plain && !noOutline && "outline", !plain && "bg-base", plain && "flex-wrap", "flex-1 rounded", !vertical && "flex"),
+      className: classNames("fabric-fieldGroup", !plain && !noOutline && "outline", !plain && "bg-base", plain && "flex-wrap", "flex-1 rounded", !vertical && "flex"),
       children: core.cloneChildren(children, function (child) {
         return /*#__PURE__*/react.cloneElement(child, {
           "data-inner": true

package/dist/cjs/input/File.js

@@ -9,7 +9,6 @@ var classNames = require('classnames');
 var react = require('react');
 var InputWrapper = require('../internal/InputWrapper.js');
 var eventHandlers = require('../utils/eventHandlers.js');
-var File_module = require('./File.module.css');
 var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["ref", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "name", "accept", "showList", "multiple", "onChange", "onEnterPressed"];
@@ -139,7 +138,7 @@ var FileInput = function FileInput(_ref) {
     })
   }, rest), {}, {
     children: /*#__PURE__*/jsxRuntime.jsx("input", {
-      className: classNames("appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0", File_module.fileInput, utilities.isArray(actualValue) && (actualValue === null || actualValue === void 0 ? void 0 : actualValue.length) && "text-[var(--fabric-bg)]"),
+      className: classNames("appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0", "fabric-fileInput", utilities.isArray(actualValue) && (actualValue === null || actualValue === void 0 ? void 0 : actualValue.length) && "text-(--fabric-bg)"),
       "aria-invalid": invalid,
       "aria-disabled": disabled,
       "aria-readonly": readOnly,

package/dist/cjs/input/Radio.js

@@ -51,7 +51,7 @@ var Radio = function Radio(_ref) {
       autoComplete: "off",
       onChange: handleChange
     }, rest)), /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-      className: classNames("p-0.5 hidden peer-checked:inline-block", icon && !iconChecked && "bg-primary-500 text-white"),
+      className: classNames("p-0.5 hidden peer-checked:inline-block", icon && !iconChecked && "bg-primary-500 text-white!"),
       color: invalid ? "danger" : "primary",
       size: "1.25em",
       icon: iconOn

package/dist/cjs/internal/ErrorIcon.js

@@ -20,7 +20,7 @@ var ErrorIcon = function ErrorIcon(_ref) {
       label: t((_error$values$label = (_error$values = error.values) === null || _error$values === void 0 ? void 0 : _error$values.label) !== null && _error$values$label !== void 0 ? _error$values$label : "form:badkey", (_error$values2 = error.values) === null || _error$values2 === void 0 ? void 0 : _error$values2.path)
     }) : {}),
     placement: "bottom",
-    color: "danger",
+    color: "danger-200",
     children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
       className: "flex-content first:ms-2 self-center",
       color: "danger",

package/dist/cjs/internal/FieldWrapper.js

@@ -1,7 +1,6 @@
 'use strict';
 
 var classNames = require('classnames');
-var Field_module = require('./Field.module.css');
 var jsxRuntime = require('react/jsx-runtime');
 
 /*
@@ -42,7 +41,7 @@ var FieldWrapper = function FieldWrapper(_ref) {
     className = _ref.className,
     isInner = _ref["data-inner"];
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classNames(Field_module.fieldWrapper, className, inline ? "flex flex-nowrap gap-1" : "block"),
+    className: classNames("fabric-fieldWrapper", className, inline ? "flex flex-nowrap gap-1" : "block"),
     "data-ref": "fieldWrapper",
     style: {
       width: width,

package/dist/cjs/internal/InputWrapper.js

@@ -9,7 +9,6 @@ var classNames = require('classnames');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var ErrorIcon = require('./ErrorIcon.js');
-var Field_module = require('./Field.module.css');
 var FieldWrapper = require('./FieldWrapper.js');
 
 var _excluded = ["invalid", "error", "allowClear", "showClear", "decorateStart", "decorateEnd", "decorateEndShowWhenEmpty", "decorateEndHideWhenEmpty", "children", "onClear", "noOutline", "noBorder", "textarea", "textareaExpandable", "data-inner", "data-open", "floatingExpand", "wrapperRef", "width"];
@@ -69,13 +68,13 @@ var InputWrapper = function InputWrapper(_ref) {
   var el = /*#__PURE__*/jsxRuntime.jsxs("div", {
     role: "none",
     ref: wrapperRef,
-    className: classNames(Field_module.inputWrapper, invalid && Field_module.invalidWrapper, !noOutline && !noBorder && "bg-[var(--fabric-input)] outline overflow-hidden", "flex flex-nowrap items-center flex-1", textarea ? "rounded-capped group" : "rounded", isExpanded ? "fixed inset-4 z-[99]" : floatingExpand ? "absolute inset-x-0" : "relative", !noOutline && "after:absolute after:bottom-0 after:h-px after:bg-primary-500 after:mx-auto"),
+    className: classNames("fabric-inputWrapper", invalid && "fabric-invalidWrapper", !noOutline && !noBorder && "bg-(--fabric-input) outline overflow-hidden", "flex flex-nowrap items-center flex-1", textarea ? "rounded-capped group" : "rounded", isExpanded ? "fixed inset-4 z-[99]" : floatingExpand ? "absolute inset-x-0" : "relative", !noOutline && "after:absolute after:bottom-0 after:h-px after:bg-primary-500 after:mx-auto"),
     onKeyDown: function onKeyDown(e) {
       return e.key === "Escape" && isExpanded && (setExpanded(false), e.stopPropagation());
     },
     children: [decorateStart && /*#__PURE__*/jsxRuntime.jsx("div", {
       onClickCapture: doFocus,
-      className: classNames(Field_module.decorate, "text-muted leading-none flex-content", utilities.isString(decorateStart) && "px-1"),
+      className: classNames("fabric-decorate", "text-muted leading-none flex-content", utilities.isString(decorateStart) && "px-1"),
       children: decorateStart
     }), /*#__PURE__*/jsxRuntime.jsx(ErrorIcon.ErrorIcon, {
       invalid: invalid,
@@ -83,10 +82,10 @@ var InputWrapper = function InputWrapper(_ref) {
     }), children, allowClear && showClear && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
       icon: core.CoreIcons.close,
       onClick: handleClear,
-      className: classNames("text-tint-500 hover:text-tint-700 p-1 z-1 flex-content", Field_module.inputClear, textarea && "self-start mt-1 me-1")
+      className: classNames("text-tint-500 hover:text-tint-700 p-1 z-1 flex-content", "fabric-inputClear", textarea && "self-start mt-1 me-1")
     }), decorateEnd && /*#__PURE__*/jsxRuntime.jsx("div", {
       onClickCapture: doFocus,
-      className: classNames(Field_module.decorate, "text-muted leading-none flex-content", utilities.isString(decorateEnd) && "px-1", decorateEndHideWhenEmpty && "peer-placeholder-shown:hidden", decorateEndShowWhenEmpty && "hidden peer-placeholder-shown:inline-block"),
+      className: classNames("fabric-decorate", "text-muted leading-none flex-content", utilities.isString(decorateEnd) && "px-1", decorateEndHideWhenEmpty && "peer-placeholder-shown:hidden", decorateEndShowWhenEmpty && "hidden peer-placeholder-shown:inline-block"),
       children: decorateEnd
     }), textareaExpandable && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
       onClick: function onClick() {

package/dist/cjs/select/AutoComplete.js

@@ -243,7 +243,7 @@ var AutoComplete = function AutoComplete(_ref) {
         visuallyHiddenDismiss: true,
         children: /*#__PURE__*/jsxRuntime.jsx(Options.Options, _objectSpread(_objectSpread({
           ref: refs.setFloating,
-          className: "outline shadow-lg max-h-[40vh] z-[var(--z-popover)]",
+          className: "outline shadow-lg max-h-[40vh] z-(--z-popover)",
           style: _objectSpread({
             width: (_refs$reference$curre = refs.reference.current) === null || _refs$reference$curre === void 0 ? void 0 : _refs$reference$curre.getBoundingClientRect().width
           }, floatingStyles)

package/dist/cjs/select/Select.js

@@ -262,7 +262,7 @@ var Select = function Select(_ref) {
         visuallyHiddenDismiss: true,
         children: /*#__PURE__*/jsxRuntime.jsx(Options.Options, _objectSpread(_objectSpread({
           ref: refs.setFloating,
-          className: "outline shadow-lg max-h-[40vh] z-[var(--z-popover)]",
+          className: "outline shadow-lg max-h-[40vh] z-(--z-popover)",
           style: _objectSpread({
             width: (_refs$reference$curre = refs.reference.current) === null || _refs$reference$curre === void 0 ? void 0 : _refs$reference$curre.getBoundingClientRect().width
           }, floatingStyles)