@uipath/apollo-wind 2.39.0 → 2.40.0

package/dist/components/custom/flow-properties-simple.cjs

@@ -31,22 +31,25 @@ const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
 const accordion_cjs_namespaceObject = require("../ui/accordion.cjs");
 const input_cjs_namespaceObject = require("../ui/input.cjs");
+const label_cjs_namespaceObject = require("../ui/label.cjs");
 const select_cjs_namespaceObject = require("../ui/select.cjs");
 const typography_cjs_namespaceObject = require("../../foundation/Future/typography.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 function FieldItem({ field, onGraphControl }) {
     const [value, setValue] = external_react_namespaceObject.useState(field.value ?? '');
+    const inputId = external_react_namespaceObject.useId();
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         className: "flex flex-col gap-1 pt-4",
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                 className: "flex items-center justify-between",
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(label_cjs_namespaceObject.Label, {
+                        htmlFor: inputId,
                         className: "text-sm font-medium leading-5 text-foreground-muted",
                         children: [
                             field.label,
-                            field.required && '*'
+                            field.required && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.RequiredIndicator, {})
                         ]
                     }),
                     field.showGraphControl && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
@@ -65,7 +68,8 @@ function FieldItem({ field, onGraphControl }) {
                 onValueChange: setValue,
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectTrigger, {
-                        "aria-label": field.label,
+                        "aria-required": field.required,
+                        id: inputId,
                         className: "h-10 rounded-xl border-0 bg-surface-overlay text-foreground shadow-sm placeholder:text-foreground-muted",
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectValue, {
                             placeholder: field.placeholder ?? 'Select...'
@@ -84,6 +88,8 @@ function FieldItem({ field, onGraphControl }) {
                 className: "flex h-10 w-full items-center overflow-hidden rounded-xl bg-surface-overlay shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] transition-colors focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background",
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.Input, {
+                        "aria-required": field.required,
+                        id: inputId,
                         value: value,
                         onChange: (e)=>setValue(e.target.value),
                         placeholder: field.placeholder,
@@ -99,6 +105,8 @@ function FieldItem({ field, onGraphControl }) {
                     })
                 ]
             }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.Input, {
+                "aria-required": field.required,
+                id: inputId,
                 value: value,
                 onChange: (e)=>setValue(e.target.value),
                 placeholder: field.placeholder

package/dist/components/custom/flow-properties-simple.js

@@ -1,24 +1,27 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Copy, FileJson, Folder, Redo2, RefreshCw, Settings2, Undo2, Variable, Webhook, X } from "lucide-react";
-import { useState } from "react";
+import { useId, useState } from "react";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../ui/accordion.js";
 import { Input } from "../ui/input.js";
+import { Label, RequiredIndicator } from "../ui/label.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select.js";
 import { fontFamily } from "../../foundation/Future/typography.js";
 import { cn } from "../../lib/index.js";
 function FieldItem({ field, onGraphControl }) {
     const [value, setValue] = useState(field.value ?? '');
+    const inputId = useId();
     return /*#__PURE__*/ jsxs("div", {
         className: "flex flex-col gap-1 pt-4",
         children: [
             /*#__PURE__*/ jsxs("div", {
                 className: "flex items-center justify-between",
                 children: [
-                    /*#__PURE__*/ jsxs("span", {
+                    /*#__PURE__*/ jsxs(Label, {
+                        htmlFor: inputId,
                         className: "text-sm font-medium leading-5 text-foreground-muted",
                         children: [
                             field.label,
-                            field.required && '*'
+                            field.required && /*#__PURE__*/ jsx(RequiredIndicator, {})
                         ]
                     }),
                     field.showGraphControl && /*#__PURE__*/ jsx("button", {
@@ -37,7 +40,8 @@ function FieldItem({ field, onGraphControl }) {
                 onValueChange: setValue,
                 children: [
                     /*#__PURE__*/ jsx(SelectTrigger, {
-                        "aria-label": field.label,
+                        "aria-required": field.required,
+                        id: inputId,
                         className: "h-10 rounded-xl border-0 bg-surface-overlay text-foreground shadow-sm placeholder:text-foreground-muted",
                         children: /*#__PURE__*/ jsx(SelectValue, {
                             placeholder: field.placeholder ?? 'Select...'
@@ -56,6 +60,8 @@ function FieldItem({ field, onGraphControl }) {
                 className: "flex h-10 w-full items-center overflow-hidden rounded-xl bg-surface-overlay shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] transition-colors focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background",
                 children: [
                     /*#__PURE__*/ jsx(Input, {
+                        "aria-required": field.required,
+                        id: inputId,
                         value: value,
                         onChange: (e)=>setValue(e.target.value),
                         placeholder: field.placeholder,
@@ -71,6 +77,8 @@ function FieldItem({ field, onGraphControl }) {
                     })
                 ]
             }) : /*#__PURE__*/ jsx(Input, {
+                "aria-required": field.required,
+                id: inputId,
                 value: value,
                 onChange: (e)=>setValue(e.target.value),
                 placeholder: field.placeholder

package/dist/components/ui/index.cjs

@@ -36,7 +36,7 @@ var __webpack_modules__ = {
     "./chart" (module) {
         module.exports = require("./chart.cjs");
     },
-    "@/components/ui/checkbox" (module) {
+    "./checkbox" (module) {
         module.exports = require("./checkbox.cjs");
     },
     "./collapsible" (module) {
@@ -66,10 +66,10 @@ var __webpack_modules__ = {
     "./drawer" (module) {
         module.exports = require("./drawer.cjs");
     },
-    "@/components/ui/dropdown-menu" (module) {
+    "./dropdown-menu" (module) {
         module.exports = require("./dropdown-menu.cjs");
     },
-    "@/components/ui/editable-cell" (module) {
+    "./editable-cell" (module) {
         module.exports = require("./editable-cell.cjs");
     },
     "./empty-state" (module) {
@@ -84,10 +84,10 @@ var __webpack_modules__ = {
     "@/components/ui/input-group" (module) {
         module.exports = require("./input-group.cjs");
     },
-    "@/components/ui/input" (module) {
+    "./input" (module) {
         module.exports = require("./input.cjs");
     },
-    "./label" (module) {
+    "@/components/ui/label" (module) {
         module.exports = require("./label.cjs");
     },
     "./layout" (module) {
@@ -156,7 +156,7 @@ var __webpack_modules__ = {
     "./switch" (module) {
         module.exports = require("./switch.cjs");
     },
-    "@/components/ui/table" (module) {
+    "./table" (module) {
         module.exports = require("./table.cjs");
     },
     "./tabs" (module) {
@@ -168,7 +168,7 @@ var __webpack_modules__ = {
     "./toggle-group" (module) {
         module.exports = require("./toggle-group.cjs");
     },
-    "@/components/ui/toggle" (module) {
+    "./toggle" (module) {
         module.exports = require("./toggle.cjs");
     },
     "./tooltip" (module) {
@@ -311,7 +311,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_chart__rspack_import_11[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _checkbox__rspack_import_12 = __webpack_require__("@/components/ui/checkbox");
+    var _checkbox__rspack_import_12 = __webpack_require__("./checkbox");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _checkbox__rspack_import_12)if ([
         "TreeView",
@@ -381,14 +381,14 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_drawer__rspack_import_21[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dropdown_menu__rspack_import_22 = __webpack_require__("@/components/ui/dropdown-menu");
+    var _dropdown_menu__rspack_import_22 = __webpack_require__("./dropdown-menu");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dropdown_menu__rspack_import_22)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_dropdown_menu__rspack_import_22[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _editable_cell__rspack_import_23 = __webpack_require__("@/components/ui/editable-cell");
+    var _editable_cell__rspack_import_23 = __webpack_require__("./editable-cell");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _editable_cell__rspack_import_23)if ([
         "TreeView",
@@ -416,7 +416,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_hover_card__rspack_import_26[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _input__rspack_import_27 = __webpack_require__("@/components/ui/input");
+    var _input__rspack_import_27 = __webpack_require__("./input");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _input__rspack_import_27)if ([
         "TreeView",
@@ -430,7 +430,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_input_group__rspack_import_28[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _label__rspack_import_29 = __webpack_require__("./label");
+    var _label__rspack_import_29 = __webpack_require__("@/components/ui/label");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _label__rspack_import_29)if ([
         "TreeView",
@@ -591,7 +591,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_switch__rspack_import_51[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _table__rspack_import_52 = __webpack_require__("@/components/ui/table");
+    var _table__rspack_import_52 = __webpack_require__("./table");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _table__rspack_import_52)if ([
         "TreeView",
@@ -612,7 +612,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_textarea__rspack_import_54[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _toggle__rspack_import_55 = __webpack_require__("@/components/ui/toggle");
+    var _toggle__rspack_import_55 = __webpack_require__("./toggle");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _toggle__rspack_import_55)if ([
         "TreeView",

package/dist/components/ui/label.cjs

@@ -32,7 +32,7 @@ const react_label_namespaceObject = require("@radix-ui/react-label");
 const external_class_variance_authority_namespaceObject = require("class-variance-authority");
 const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
-const labelVariants = (0, external_class_variance_authority_namespaceObject.cva)('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
+const labelVariants = (0, external_class_variance_authority_namespaceObject.cva)('text-xs font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
 const Label = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_label_namespaceObject.Root, {
         ref: ref,
         "data-slot": "label",
@@ -43,7 +43,7 @@ Label.displayName = react_label_namespaceObject.Root.displayName;
 const RequiredIndicator = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
         ref: ref,
         ...props,
-        className: (0, index_cjs_namespaceObject.cn)('ml-0.5 text-current', className),
+        className: (0, index_cjs_namespaceObject.cn)('ml-0.5', className, 'text-foreground'),
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                 "aria-hidden": "true",

package/dist/components/ui/label.d.ts

@@ -9,7 +9,7 @@ export interface RequiredIndicatorProps extends Omit<React.HTMLAttributes<HTMLSp
 /**
  * Marks a field as required. Place it right after the label text.
  *
- * Uses `text-current` rather than an error/destructive color: an untouched
+ * Uses the foreground color rather than an error/destructive color: an untouched
  * required field isn't in an error state, so coloring the asterisk red reads
  * as a validation failure before the person has done anything. The asterisk
  * glyph is `aria-hidden` since it's a visual affordance, not the thing that

package/dist/components/ui/label.js

@@ -3,7 +3,7 @@ import { Root } from "@radix-ui/react-label";
 import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
 import { cn } from "../../lib/index.js";
-const labelVariants = cva('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
+const labelVariants = cva('text-xs font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
 const Label = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Root, {
         ref: ref,
         "data-slot": "label",
@@ -14,7 +14,7 @@ Label.displayName = Root.displayName;
 const RequiredIndicator = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsxs("span", {
         ref: ref,
         ...props,
-        className: cn('ml-0.5 text-current', className),
+        className: cn('ml-0.5', className, 'text-foreground'),
         children: [
             /*#__PURE__*/ jsx("span", {
                 "aria-hidden": "true",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-wind",
-  "version": "2.39.0",
+  "version": "2.40.0",
   "description": "UiPath wind design system - A Tailwind CSS based React component library",
   "type": "module",
   "main": "./dist/index.js",