@x-plat/design-system 0.11.0 → 0.13.0

package/dist/components/FieldMessage/index.cjs

@@ -166,11 +166,11 @@ var FieldMessage = (props) => {
 FieldMessage.displayName = "FieldMessage";
 var FieldMessage_default = FieldMessage;
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, validations, children } = props;
   const hasMessages = !!validations && validations.length > 0;
   if (!label && !hasMessages) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children });
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lib-xplat-field", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "lib-xplat-field-label", htmlFor, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),

package/dist/components/FieldMessage/index.d.cts

@@ -31,6 +31,14 @@ interface FieldProps {
     required?: boolean;
     /** 라벨의 htmlFor 와 컨트롤의 id 를 잇는 값 */
     htmlFor?: string;
+    /**
+     * 라벨 자체에 붙일 id.
+     *
+     * `htmlFor` 로 이을 수 없는 컨트롤 — 달력처럼 포커스 대상이 여럿이라
+     * 하나를 고를 수 없는 것 — 이 `role="group"` + `aria-labelledby` 로
+     * 라벨을 가리킬 때 쓴다.
+     */
+    labelId?: string;
     validations?: Validation[];
     children: React.ReactNode;
 }

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

@@ -31,6 +31,14 @@ interface FieldProps {
     required?: boolean;
     /** 라벨의 htmlFor 와 컨트롤의 id 를 잇는 값 */
     htmlFor?: string;
+    /**
+     * 라벨 자체에 붙일 id.
+     *
+     * `htmlFor` 로 이을 수 없는 컨트롤 — 달력처럼 포커스 대상이 여럿이라
+     * 하나를 고를 수 없는 것 — 이 `role="group"` + `aria-labelledby` 로
+     * 라벨을 가리킬 때 쓴다.
+     */
+    labelId?: string;
     validations?: Validation[];
     children: React.ReactNode;
 }

package/dist/components/FieldMessage/index.js

@@ -138,11 +138,11 @@ var FieldMessage = (props) => {
 FieldMessage.displayName = "FieldMessage";
 var FieldMessage_default = FieldMessage;
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, validations, children } = props;
   const hasMessages = !!validations && validations.length > 0;
   if (!label && !hasMessages) return /* @__PURE__ */ jsx4(Fragment, { children });
   return /* @__PURE__ */ jsxs3("div", { className: "lib-xplat-field", children: [
-    label && /* @__PURE__ */ jsxs3("label", { className: "lib-xplat-field-label", htmlFor, children: [
+    label && /* @__PURE__ */ jsxs3("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ jsx4("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),

package/dist/components/FileUpload/index.cjs

@@ -1076,11 +1076,11 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, validations, children } = props;
   const hasMessages = !!validations && validations.length > 0;
   if (!label && !hasMessages) return /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(import_jsx_runtime295.Fragment, { children });
   return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("div", { className: "lib-xplat-field", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("label", { className: "lib-xplat-field-label", htmlFor, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),
@@ -1099,10 +1099,13 @@ var FileUpload = (props) => {
     multiple = false,
     maxSize,
     onChange,
-    label = "\uD30C\uC77C\uC744 \uB4DC\uB798\uADF8\uD558\uAC70\uB098 \uD074\uB9AD\uD558\uC5EC \uC5C5\uB85C\uB4DC",
+    placeholder = "\uD30C\uC77C\uC744 \uB4DC\uB798\uADF8\uD558\uAC70\uB098 \uD074\uB9AD\uD558\uC5EC \uC5C5\uB85C\uB4DC",
     description,
-    validations
+    validations,
+    label,
+    required
   } = props;
+  const fieldId = import_react.default.useId();
   const [isDragOver, setIsDragOver] = import_react.default.useState(false);
   const inputRef = import_react.default.useRef(null);
   const handleFiles = (fileList) => {
@@ -1147,6 +1150,7 @@ var FileUpload = (props) => {
           "input",
           {
             ref: inputRef,
+            id: fieldId,
             type: "file",
             accept,
             multiple,
@@ -1155,12 +1159,12 @@ var FileUpload = (props) => {
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime296.jsx)("div", { className: "upload-icon", children: /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(UploadIcon_default, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime296.jsx)("p", { className: "upload-label", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime296.jsx)("p", { className: "upload-label", children: placeholder }),
         description && /* @__PURE__ */ (0, import_jsx_runtime296.jsx)("p", { className: "upload-description", children: description })
       ]
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Field, { validations, children: control });
+  return /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Field, { label, required, htmlFor: fieldId, validations, children: control });
 };
 FileUpload.displayName = "FileUpload";
 var FileUpload_default = FileUpload;

package/dist/components/FileUpload/index.d.cts

@@ -12,10 +12,23 @@ interface FileUploadProps {
     maxSize?: number;
     /** 고른 파일 목록을 준다. maxSize 로 걸러진 것은 빠져 있다 */
     onChange?: (files: File[]) => void;
-    /** 상자 안 큰 글자 */
-    label?: string;
+    /**
+     * 상자 안 큰 글자.
+     *
+     * **0.13.0 에서 `label` 이 필드 라벨로 바뀌면서 이 이름으로 옮겨졌다.**
+     * DS 전체에서 `placeholder` 는 "빈 컨트롤 안에 보이는 글자" 를 뜻한다.
+     */
+    placeholder?: string;
     /** 상자 안 작은 설명 */
     description?: string;
+    /**
+     * 상자 **위에** 붙는 필드 라벨. 클릭하면 파일 선택창이 열린다.
+     *
+     * **0.13.0 이전에는 상자 안 글자를 뜻했다.** 그 용도는 `placeholder` 로 옮겼다.
+     */
+    label?: React.ReactNode;
+    /** 라벨 뒤에 필수 표시(*)를 붙인다 */
+    required?: boolean;
 }
 declare const FileUpload: React.FC<FileUploadProps>;
 

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

@@ -12,10 +12,23 @@ interface FileUploadProps {
     maxSize?: number;
     /** 고른 파일 목록을 준다. maxSize 로 걸러진 것은 빠져 있다 */
     onChange?: (files: File[]) => void;
-    /** 상자 안 큰 글자 */
-    label?: string;
+    /**
+     * 상자 안 큰 글자.
+     *
+     * **0.13.0 에서 `label` 이 필드 라벨로 바뀌면서 이 이름으로 옮겨졌다.**
+     * DS 전체에서 `placeholder` 는 "빈 컨트롤 안에 보이는 글자" 를 뜻한다.
+     */
+    placeholder?: string;
     /** 상자 안 작은 설명 */
     description?: string;
+    /**
+     * 상자 **위에** 붙는 필드 라벨. 클릭하면 파일 선택창이 열린다.
+     *
+     * **0.13.0 이전에는 상자 안 글자를 뜻했다.** 그 용도는 `placeholder` 로 옮겼다.
+     */
+    label?: React.ReactNode;
+    /** 라벨 뒤에 필수 표시(*)를 붙인다 */
+    required?: boolean;
 }
 declare const FileUpload: React.FC<FileUploadProps>;
 

package/dist/components/FileUpload/index.js

@@ -1040,11 +1040,11 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, validations, children } = props;
   const hasMessages = !!validations && validations.length > 0;
   if (!label && !hasMessages) return /* @__PURE__ */ jsx295(Fragment, { children });
   return /* @__PURE__ */ jsxs189("div", { className: "lib-xplat-field", children: [
-    label && /* @__PURE__ */ jsxs189("label", { className: "lib-xplat-field-label", htmlFor, children: [
+    label && /* @__PURE__ */ jsxs189("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ jsx295("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),
@@ -1063,10 +1063,13 @@ var FileUpload = (props) => {
     multiple = false,
     maxSize,
     onChange,
-    label = "\uD30C\uC77C\uC744 \uB4DC\uB798\uADF8\uD558\uAC70\uB098 \uD074\uB9AD\uD558\uC5EC \uC5C5\uB85C\uB4DC",
+    placeholder = "\uD30C\uC77C\uC744 \uB4DC\uB798\uADF8\uD558\uAC70\uB098 \uD074\uB9AD\uD558\uC5EC \uC5C5\uB85C\uB4DC",
     description,
-    validations
+    validations,
+    label,
+    required
   } = props;
+  const fieldId = React.useId();
   const [isDragOver, setIsDragOver] = React.useState(false);
   const inputRef = React.useRef(null);
   const handleFiles = (fileList) => {
@@ -1111,6 +1114,7 @@ var FileUpload = (props) => {
           "input",
           {
             ref: inputRef,
+            id: fieldId,
             type: "file",
             accept,
             multiple,
@@ -1119,12 +1123,12 @@ var FileUpload = (props) => {
           }
         ),
         /* @__PURE__ */ jsx296("div", { className: "upload-icon", children: /* @__PURE__ */ jsx296(UploadIcon_default, {}) }),
-        /* @__PURE__ */ jsx296("p", { className: "upload-label", children: label }),
+        /* @__PURE__ */ jsx296("p", { className: "upload-label", children: placeholder }),
         description && /* @__PURE__ */ jsx296("p", { className: "upload-description", children: description })
       ]
     }
   );
-  return /* @__PURE__ */ jsx296(Field, { validations, children: control });
+  return /* @__PURE__ */ jsx296(Field, { label, required, htmlFor: fieldId, validations, children: control });
 };
 FileUpload.displayName = "FileUpload";
 var FileUpload_default = FileUpload;

package/dist/components/ImageSelector/index.cjs

@@ -1143,11 +1143,11 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, validations, children } = props;
   const hasMessages = !!validations && validations.length > 0;
   if (!label && !hasMessages) return /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(import_jsx_runtime295.Fragment, { children });
   return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("div", { className: "lib-xplat-field", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("label", { className: "lib-xplat-field-label", htmlFor, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),
@@ -1161,7 +1161,8 @@ var hasError = (validations) => !!validations?.some((v) => v.status === "error")
 // src/components/ImageSelector/ImageSelector.tsx
 var import_jsx_runtime296 = require("react/jsx-runtime");
 var ImageSelector = (props) => {
-  const { value, label, onChange, validations } = props;
+  const { value, placeholder, onChange, validations, label, required } = props;
+  const fieldId = import_react.default.useId();
   const [previewUrl, setPreviewUrl] = import_react.default.useState();
   import_react.default.useEffect(() => {
     if (!value) {
@@ -1191,7 +1192,7 @@ var ImageSelector = (props) => {
       {
         type: "file",
         accept: "image/*",
-        id: "image-input",
+        id: fieldId,
         onChange: handleFileChange,
         ref: inputRef,
         "aria-invalid": hasError(validations) || void 0
@@ -1203,10 +1204,10 @@ var ImageSelector = (props) => {
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime296.jsx)("div", { className: "content", children: previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime296.jsx)("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ (0, import_jsx_runtime296.jsxs)("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
       /* @__PURE__ */ (0, import_jsx_runtime296.jsx)("div", { className: "icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(ImageIcon_default, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime296.jsx)("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
+      /* @__PURE__ */ (0, import_jsx_runtime296.jsx)("div", { className: "label", children: placeholder || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
     ] }) })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Field, { validations, children: control });
+  return /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Field, { label, required, htmlFor: fieldId, validations, children: control });
 };
 ImageSelector.displayName = "ImageSelector";
 var ImageSelector_default = ImageSelector;

package/dist/components/ImageSelector/index.d.cts

@@ -6,8 +6,21 @@ interface ImageSelectorProps {
     value?: File;
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
-    /** 비어 있을 때 표시할 안내 글자 */
-    label?: string;
+    /**
+     * 비어 있을 때 상자 안에 표시할 안내 글자.
+     *
+     * **0.13.0 에서 `label` 이 필드 라벨로 바뀌면서 이 이름으로 옮겨졌다.**
+     * DS 전체에서 `placeholder` 는 "빈 컨트롤 안에 보이는 글자" 를 뜻한다.
+     */
+    placeholder?: string;
+    /**
+     * 상자 **위에** 붙는 필드 라벨. 클릭하면 파일 선택창이 열린다.
+     *
+     * **0.13.0 이전에는 상자 안 글자를 뜻했다.** 그 용도는 `placeholder` 로 옮겼다.
+     */
+    label?: React.ReactNode;
+    /** 라벨 뒤에 필수 표시(*)를 붙인다 */
+    required?: boolean;
     /** 이미지를 고르거나 지우면 호출된다. 지우면 undefined 가 온다 */
     onChange?: (value: File | undefined) => void;
 }

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

@@ -6,8 +6,21 @@ interface ImageSelectorProps {
     value?: File;
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
-    /** 비어 있을 때 표시할 안내 글자 */
-    label?: string;
+    /**
+     * 비어 있을 때 상자 안에 표시할 안내 글자.
+     *
+     * **0.13.0 에서 `label` 이 필드 라벨로 바뀌면서 이 이름으로 옮겨졌다.**
+     * DS 전체에서 `placeholder` 는 "빈 컨트롤 안에 보이는 글자" 를 뜻한다.
+     */
+    placeholder?: string;
+    /**
+     * 상자 **위에** 붙는 필드 라벨. 클릭하면 파일 선택창이 열린다.
+     *
+     * **0.13.0 이전에는 상자 안 글자를 뜻했다.** 그 용도는 `placeholder` 로 옮겼다.
+     */
+    label?: React.ReactNode;
+    /** 라벨 뒤에 필수 표시(*)를 붙인다 */
+    required?: boolean;
     /** 이미지를 고르거나 지우면 호출된다. 지우면 undefined 가 온다 */
     onChange?: (value: File | undefined) => void;
 }

package/dist/components/ImageSelector/index.js

@@ -1107,11 +1107,11 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, validations, children } = props;
   const hasMessages = !!validations && validations.length > 0;
   if (!label && !hasMessages) return /* @__PURE__ */ jsx295(Fragment, { children });
   return /* @__PURE__ */ jsxs189("div", { className: "lib-xplat-field", children: [
-    label && /* @__PURE__ */ jsxs189("label", { className: "lib-xplat-field-label", htmlFor, children: [
+    label && /* @__PURE__ */ jsxs189("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ jsx295("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),
@@ -1125,7 +1125,8 @@ var hasError = (validations) => !!validations?.some((v) => v.status === "error")
 // src/components/ImageSelector/ImageSelector.tsx
 import { jsx as jsx296, jsxs as jsxs190 } from "react/jsx-runtime";
 var ImageSelector = (props) => {
-  const { value, label, onChange, validations } = props;
+  const { value, placeholder, onChange, validations, label, required } = props;
+  const fieldId = React.useId();
   const [previewUrl, setPreviewUrl] = React.useState();
   React.useEffect(() => {
     if (!value) {
@@ -1155,7 +1156,7 @@ var ImageSelector = (props) => {
       {
         type: "file",
         accept: "image/*",
-        id: "image-input",
+        id: fieldId,
         onChange: handleFileChange,
         ref: inputRef,
         "aria-invalid": hasError(validations) || void 0
@@ -1167,10 +1168,10 @@ var ImageSelector = (props) => {
     ] }),
     /* @__PURE__ */ jsx296("div", { className: "content", children: previewUrl ? /* @__PURE__ */ jsx296("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ jsxs190("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
       /* @__PURE__ */ jsx296("div", { className: "icon-wrapper", children: /* @__PURE__ */ jsx296(ImageIcon_default, {}) }),
-      /* @__PURE__ */ jsx296("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
+      /* @__PURE__ */ jsx296("div", { className: "label", children: placeholder || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
     ] }) })
   ] });
-  return /* @__PURE__ */ jsx296(Field, { validations, children: control });
+  return /* @__PURE__ */ jsx296(Field, { label, required, htmlFor: fieldId, validations, children: control });
 };
 ImageSelector.displayName = "ImageSelector";
 var ImageSelector_default = ImageSelector;

package/dist/components/Input/index.cjs

@@ -178,11 +178,11 @@ var FieldMessage = (props) => {
 FieldMessage.displayName = "FieldMessage";
 var FieldMessage_default = FieldMessage;
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, validations, children } = props;
   const hasMessages = !!validations && validations.length > 0;
   if (!label && !hasMessages) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children });
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lib-xplat-field", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "lib-xplat-field-label", htmlFor, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),

package/dist/components/Input/index.d.cts

@@ -23,6 +23,10 @@ interface PasswordInputProps extends Omit<InputAttributes, "size"> {
     validations?: Validation[];
     /** 높이와 글자 크기 */
     size?: InputSize;
+    /** 컨트롤 위에 붙는 라벨. 클릭하면 입력칸에 포커스가 간다 */
+    label?: React.ReactNode;
+    /** 라벨 뒤에 필수 표시(*)를 붙인다 */
+    required?: boolean;
     reg?: RegExp;
 }
 declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -23,6 +23,10 @@ interface PasswordInputProps extends Omit<InputAttributes, "size"> {
     validations?: Validation[];
     /** 높이와 글자 크기 */
     size?: InputSize;
+    /** 컨트롤 위에 붙는 라벨. 클릭하면 입력칸에 포커스가 간다 */
+    label?: React.ReactNode;
+    /** 라벨 뒤에 필수 표시(*)를 붙인다 */
+    required?: boolean;
     reg?: RegExp;
 }
 declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Input/index.js

@@ -141,11 +141,11 @@ var FieldMessage = (props) => {
 FieldMessage.displayName = "FieldMessage";
 var FieldMessage_default = FieldMessage;
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, validations, children } = props;
   const hasMessages = !!validations && validations.length > 0;
   if (!label && !hasMessages) return /* @__PURE__ */ jsx4(Fragment, { children });
   return /* @__PURE__ */ jsxs3("div", { className: "lib-xplat-field", children: [
-    label && /* @__PURE__ */ jsxs3("label", { className: "lib-xplat-field-label", htmlFor, children: [
+    label && /* @__PURE__ */ jsxs3("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ jsx4("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),

package/dist/components/PopOver/index.cjs

@@ -51,8 +51,10 @@ var import_react = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [position, setPosition] = import_react.default.useState({
     position: {},
-    direction: "bottom"
+    direction: "bottom",
+    repositioning: false
   });
+  const placedRef = import_react.default.useRef(false);
   const calculatePosition = import_react.default.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -77,11 +79,16 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     if (left < 8) left = 8;
     setPosition({
       position: { top, left },
-      direction
+      direction,
+      repositioning: placedRef.current
     });
+    placedRef.current = true;
   }, [triggerRef, popRef]);
   import_react.default.useLayoutEffect(() => {
-    if (!enabled) return;
+    if (!enabled) {
+      placedRef.current = false;
+      return;
+    }
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
@@ -96,11 +103,17 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   }, [calculatePosition, enabled, popRef]);
   import_react.default.useEffect(() => {
     if (!enabled) return;
-    window.addEventListener("resize", calculatePosition);
-    window.addEventListener("scroll", calculatePosition, true);
+    let raf = 0;
+    const onScrollOrResize = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(calculatePosition);
+    };
+    window.addEventListener("resize", onScrollOrResize, { passive: true });
+    window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
     return () => {
-      window.removeEventListener("resize", calculatePosition);
-      window.removeEventListener("scroll", calculatePosition, true);
+      cancelAnimationFrame(raf);
+      window.removeEventListener("resize", onScrollOrResize);
+      window.removeEventListener("scroll", onScrollOrResize, true);
     };
   }, [calculatePosition, enabled]);
   return position;
@@ -215,6 +228,7 @@ var PopOver = (props) => {
             className: clsx_default(
               "lib-xplat-pop-over-content",
               position.direction,
+              position.repositioning && "repositioning",
               eventTrigger && "visible"
             ),
             ref: popRef,

package/dist/components/PopOver/index.css

@@ -27,3 +27,6 @@
   opacity: 1;
   transform: scale(1);
 }
+.lib-xplat-pop-over-content.repositioning {
+  transition: none;
+}

package/dist/components/PopOver/index.js

@@ -15,8 +15,10 @@ import React from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [position, setPosition] = React.useState({
     position: {},
-    direction: "bottom"
+    direction: "bottom",
+    repositioning: false
   });
+  const placedRef = React.useRef(false);
   const calculatePosition = React.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -41,11 +43,16 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     if (left < 8) left = 8;
     setPosition({
       position: { top, left },
-      direction
+      direction,
+      repositioning: placedRef.current
     });
+    placedRef.current = true;
   }, [triggerRef, popRef]);
   React.useLayoutEffect(() => {
-    if (!enabled) return;
+    if (!enabled) {
+      placedRef.current = false;
+      return;
+    }
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
@@ -60,11 +67,17 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   }, [calculatePosition, enabled, popRef]);
   React.useEffect(() => {
     if (!enabled) return;
-    window.addEventListener("resize", calculatePosition);
-    window.addEventListener("scroll", calculatePosition, true);
+    let raf = 0;
+    const onScrollOrResize = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(calculatePosition);
+    };
+    window.addEventListener("resize", onScrollOrResize, { passive: true });
+    window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
     return () => {
-      window.removeEventListener("resize", calculatePosition);
-      window.removeEventListener("scroll", calculatePosition, true);
+      cancelAnimationFrame(raf);
+      window.removeEventListener("resize", onScrollOrResize);
+      window.removeEventListener("scroll", onScrollOrResize, true);
     };
   }, [calculatePosition, enabled]);
   return position;
@@ -179,6 +192,7 @@ var PopOver = (props) => {
             className: clsx_default(
               "lib-xplat-pop-over-content",
               position.direction,
+              position.repositioning && "repositioning",
               eventTrigger && "visible"
             ),
             ref: popRef,

package/dist/components/Radio/index.cjs

@@ -177,11 +177,11 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, validations, children } = props;
   const hasMessages = !!validations && validations.length > 0;
   if (!label && !hasMessages) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children });
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lib-xplat-field", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "lib-xplat-field-label", htmlFor, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),

package/dist/components/Radio/index.js

@@ -140,11 +140,11 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, validations, children } = props;
   const hasMessages = !!validations && validations.length > 0;
   if (!label && !hasMessages) return /* @__PURE__ */ jsx4(Fragment, { children });
   return /* @__PURE__ */ jsxs3("div", { className: "lib-xplat-field", children: [
-    label && /* @__PURE__ */ jsxs3("label", { className: "lib-xplat-field-label", htmlFor, children: [
+    label && /* @__PURE__ */ jsxs3("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ jsx4("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),