ods-ant 0.2.0 → 0.4.0

package/README.md

@@ -18,6 +18,7 @@ This repo now supports a dedicated library build that is isolated from app and S
 - Build package artifacts: `npm run build:lib`
 - Strictly type-check the library surface: `npm run build:lib:strict`
 - Validate publish tarball contents: `npm run pack:check`
+- Validate entrypoints and consumer imports: `npm run test:publish`
 - Prepublish hook: `npm publish` will automatically run `prepublishOnly`
 
 Published output is generated in `dist-lib/`.
@@ -26,8 +27,17 @@ Published output is generated in `dist-lib/`.
 
 ### Public Entrypoints
 
-- Root components API: `ods-ant`
-- Theme export: `ods-ant/theme`
+| Path | Description |
+|------|-------------|
+| `ods-ant` | Aggregate root — all components (convenience / prototyping) |
+| `ods-ant/theme` | Theme tokens and Ant Design theme config |
+| `ods-ant/forms` | All form components |
+| `ods-ant/display` | All display components |
+| `ods-ant/navigation` | All navigation components |
+| `ods-ant/feedback` | All feedback components |
+| `ods-ant/forms/Button` | Individual component (recommended for app code) |
+| `ods-ant/display/Image` | Individual component (recommended for app code) |
+| `ods-ant/<family>/<Component>` | Any component following the same pattern |
 
 ### Peer Dependencies
 
@@ -65,6 +75,22 @@ If you also need to refresh peers at the same time:
 npm install ods-ant@latest antd @ant-design/icons dayjs react react-dom
 ```
 
+**Recommended — import only the components you use:**
+
+```tsx
+import { Button } from 'ods-ant/forms/Button';
+import { Input } from 'ods-ant/forms/Input';
+import { Image } from 'ods-ant/display/Image';
+import { Modal } from 'ods-ant/feedback/Modal';
+import { appTheme } from 'ods-ant/theme';
+
+export function Example() {
+  return <Button dsVariant="primary">Save</Button>;
+}
+```
+
+**Convenience — import everything from the root (suitable for quick prototyping):**
+
 ```tsx
 import { Button, Select } from 'ods-ant';
 import { appTheme } from 'ods-ant/theme';

package/dist-lib/AutoComplete-cpf8hCnK.js

@@ -0,0 +1,93 @@
+import { appTheme as e } from "./theme.js";
+import { FieldShell as t } from "./forms/FieldShell.js";
+import { t as n } from "./fieldProps-EeYy2kXb.js";
+import { s as r, t as i } from "./selectStyles-C8j5Vvgp.js";
+import { AutoComplete as a } from "antd";
+import { useEffect as o, useId as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+//#region src/ds/forms/autoCompleteStyles.ts
+var l = "ds-autocomplete-styles", u = "ds-autocomplete", d = e.token?.fontFamily ?? "'Nunito', sans-serif", f = d, p = (...e) => e.filter(Boolean).join(" ").trim(), m = () => {
+	if (typeof document > "u") return;
+	let e = document.getElementById(l);
+	e || (e = document.createElement("style"), e.id = l, document.head.appendChild(e)), e.textContent = `
+    .${u},
+    .${u}.ant-select,
+    .${u} .ant-select,
+    .${u}.ant-select .ant-select-selector,
+    .${u} .ant-select-selector,
+    .${u}.ant-select .ant-select-selector,
+    .${u}.ant-select .ant-select-selection-search,
+    .${u}.ant-select .ant-select-selection-search-input,
+    .${u}.ant-select .ant-select-selection-item,
+    .${u}.ant-select .ant-select-selection-placeholder,
+    .${u}.ant-select .ant-select-content,
+    .${u}.ant-select .ant-select-input,
+    .${u}.ant-select .ant-select-placeholder {
+      font-family: ${d} !important;
+    }
+
+    .${u}.ant-select,
+    .${u}.ant-select .ant-select-selector,
+    .${u} .ant-select-selector {
+      border-radius: 4px !important;
+    }
+
+    .${u} .ant-select-selection-search,
+    .${u} .ant-select-selection-search-input,
+    .${u} .ant-select-selection-item,
+    .${u} .ant-select-selection-placeholder,
+    .${u} .ant-select-content,
+    .${u} .ant-select-input,
+    .${u} .ant-select-placeholder,
+    .${u} .ant-input,
+    .${u}.ant-select .ant-input,
+    .${u} input,
+    .${u} textarea {
+      font-family: ${d} !important;
+    }
+  `;
+}, h = ({ className: e, style: l, fieldLabel: d, fieldRequired: h, fieldDescription: g, fieldError: _, fieldActions: v, containerStyle: y, clear: b, clearable: x = !1, clearLabel: S, clearVisibility: C = "always", onClear: w, onValueChange: T, id: E, ...D }) => {
+	let O = s();
+	o(() => {
+		r(), m();
+	}, []);
+	let k = !!(d || h || g || _ || v || x || b || w), A = E ?? (k ? O : void 0), j = A ? `${A}-description` : void 0, M = A ? `${A}-error` : void 0, N = b?.onClear ?? w, P = n(g ? j : void 0, _ ? M : void 0), F = /* @__PURE__ */ c(a, {
+		...D,
+		id: A,
+		className: p(u, i, e),
+		style: {
+			fontFamily: f,
+			...l
+		},
+		"aria-describedby": P,
+		"aria-invalid": _ ? !0 : void 0,
+		onChange: (e) => {
+			D.onChange?.(e), T?.(String(e));
+		}
+	});
+	return k ? /* @__PURE__ */ c(t, {
+		label: d,
+		required: h,
+		htmlFor: A,
+		description: g,
+		descriptionId: j,
+		error: _,
+		errorId: M,
+		clear: b,
+		clearable: x,
+		clearLabel: S,
+		clearVisibility: C,
+		clearValue: D.value,
+		onClear: () => {
+			N?.(), T?.(""), D.onChange?.("");
+		},
+		extraActions: v,
+		style: y,
+		children: F
+	}) : F;
+};
+h.displayName = "AutoComplete";
+//#endregion
+export { h as t };
+
+//# sourceMappingURL=AutoComplete-cpf8hCnK.js.map

package/dist-lib/AutoComplete-cpf8hCnK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoComplete-cpf8hCnK.js","names":[],"sources":["../src/ds/forms/autoCompleteStyles.ts","../src/ds/forms/AutoComplete.tsx"],"sourcesContent":["import { appTheme } from '../../theme/ontadaTheme';\n\nconst STYLE_ID = 'ds-autocomplete-styles';\nexport const DS_AUTOCOMPLETE_CLASS = 'ds-autocomplete';\n\nconst FONT_FAMILY = appTheme.token?.fontFamily ?? \"'Nunito', sans-serif\";\nexport const DS_AUTOCOMPLETE_FONT_FAMILY = FONT_FAMILY;\n\nexport const mergeAutoCompleteClassNames = (...classNames: Array<string | undefined>): string =>\n  classNames.filter(Boolean).join(' ').trim();\n\nexport const ensureAutoCompleteStyles = () => {\n  if (typeof document === 'undefined') {\n    return;\n  }\n\n  let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null;\n  if (!style) {\n    style = document.createElement('style');\n    style.id = STYLE_ID;\n    document.head.appendChild(style);\n  }\n  style.textContent = `\n    .${DS_AUTOCOMPLETE_CLASS},\n    .${DS_AUTOCOMPLETE_CLASS}.ant-select,\n    .${DS_AUTOCOMPLETE_CLASS} .ant-select,\n    .${DS_AUTOCOMPLETE_CLASS}.ant-select .ant-select-selector,\n    .${DS_AUTOCOMPLETE_CLASS} .ant-select-selector,\n    .${DS_AUTOCOMPLETE_CLASS}.ant-select .ant-select-selector,\n    .${DS_AUTOCOMPLETE_CLASS}.ant-select .ant-select-selection-search,\n    .${DS_AUTOCOMPLETE_CLASS}.ant-select .ant-select-selection-search-input,\n    .${DS_AUTOCOMPLETE_CLASS}.ant-select .ant-select-selection-item,\n    .${DS_AUTOCOMPLETE_CLASS}.ant-select .ant-select-selection-placeholder,\n    .${DS_AUTOCOMPLETE_CLASS}.ant-select .ant-select-content,\n    .${DS_AUTOCOMPLETE_CLASS}.ant-select .ant-select-input,\n    .${DS_AUTOCOMPLETE_CLASS}.ant-select .ant-select-placeholder {\n      font-family: ${FONT_FAMILY} !important;\n    }\n\n    .${DS_AUTOCOMPLETE_CLASS}.ant-select,\n    .${DS_AUTOCOMPLETE_CLASS}.ant-select .ant-select-selector,\n    .${DS_AUTOCOMPLETE_CLASS} .ant-select-selector {\n      border-radius: 4px !important;\n    }\n\n    .${DS_AUTOCOMPLETE_CLASS} .ant-select-selection-search,\n    .${DS_AUTOCOMPLETE_CLASS} .ant-select-selection-search-input,\n    .${DS_AUTOCOMPLETE_CLASS} .ant-select-selection-item,\n    .${DS_AUTOCOMPLETE_CLASS} .ant-select-selection-placeholder,\n    .${DS_AUTOCOMPLETE_CLASS} .ant-select-content,\n    .${DS_AUTOCOMPLETE_CLASS} .ant-select-input,\n    .${DS_AUTOCOMPLETE_CLASS} .ant-select-placeholder,\n    .${DS_AUTOCOMPLETE_CLASS} .ant-input,\n    .${DS_AUTOCOMPLETE_CLASS}.ant-select .ant-input,\n    .${DS_AUTOCOMPLETE_CLASS} input,\n    .${DS_AUTOCOMPLETE_CLASS} textarea {\n      font-family: ${FONT_FAMILY} !important;\n    }\n  `;\n\n};\n","import { AutoComplete as AntAutoComplete } from 'antd';\nimport type { ComponentProps } from 'react';\nimport { useEffect, useId } from 'react';\nimport { FieldShell } from './FieldShell';\nimport type { DSFieldShellProps } from './fieldProps';\nimport { joinDescribedByIds } from './fieldProps';\nimport {\n  DS_AUTOCOMPLETE_CLASS,\n  DS_AUTOCOMPLETE_FONT_FAMILY,\n  ensureAutoCompleteStyles,\n  mergeAutoCompleteClassNames,\n} from './autoCompleteStyles';\nimport { DS_SELECT_CLASS, ensureSelectStyles } from './selectStyles';\n\nexport type AutoCompleteProps = ComponentProps<typeof AntAutoComplete>;\n\nexport type AutoCompleteFieldProps = DSFieldShellProps & {\n  onValueChange?: (nextValue: string) => void;\n};\n\nexport const AutoComplete = ({\n  className,\n  style,\n  fieldLabel,\n  fieldRequired,\n  fieldDescription,\n  fieldError,\n  fieldActions,\n  containerStyle,\n  clear,\n  clearable = false,\n  clearLabel,\n  clearVisibility = 'always',\n  onClear,\n  onValueChange,\n  id,\n  ...props\n}: AutoCompleteProps & AutoCompleteFieldProps) => {\n  const generatedId = useId();\n  useEffect(() => {\n    ensureSelectStyles();\n    ensureAutoCompleteStyles();\n  }, []);\n\n  const shouldWrapInFieldShell = Boolean(\n    fieldLabel ||\n      fieldRequired ||\n      fieldDescription ||\n      fieldError ||\n      fieldActions ||\n      clearable ||\n      clear ||\n      onClear,\n  );\n  const controlId = id ?? (shouldWrapInFieldShell ? generatedId : undefined);\n  const descriptionId = controlId ? `${controlId}-description` : undefined;\n  const errorId = controlId ? `${controlId}-error` : undefined;\n  const clearAction = clear?.onClear ?? onClear;\n  const describedBy = joinDescribedByIds(\n    fieldDescription ? descriptionId : undefined,\n    fieldError ? errorId : undefined,\n  );\n\n  const control = (\n    <AntAutoComplete\n      {...props}\n      id={controlId}\n      className={mergeAutoCompleteClassNames(DS_AUTOCOMPLETE_CLASS, DS_SELECT_CLASS, className)}\n      style={{ fontFamily: DS_AUTOCOMPLETE_FONT_FAMILY, ...style }}\n      aria-describedby={describedBy}\n      aria-invalid={fieldError ? true : undefined}\n      onChange={(nextValue) => {\n        props.onChange?.(nextValue);\n        onValueChange?.(String(nextValue));\n      }}\n    />\n  );\n\n  if (!shouldWrapInFieldShell) {\n    return control;\n  }\n\n  return (\n    <FieldShell\n      label={fieldLabel}\n      required={fieldRequired}\n      htmlFor={controlId}\n      description={fieldDescription}\n      descriptionId={descriptionId}\n      error={fieldError}\n      errorId={errorId}\n      clear={clear}\n      clearable={clearable}\n      clearLabel={clearLabel}\n      clearVisibility={clearVisibility}\n      clearValue={props.value}\n      onClear={() => {\n        clearAction?.();\n        onValueChange?.('');\n        props.onChange?.('');\n      }}\n      extraActions={fieldActions}\n      style={containerStyle}\n    >\n      {control}\n    </FieldShell>\n  );\n};\n\nAutoComplete.displayName = 'AutoComplete';\n"],"mappings":";;;;;;;;AAEA,IAAM,IAAW,0BACJ,IAAwB,mBAE/B,IAAc,EAAS,OAAO,cAAc,wBACrC,IAA8B,GAE9B,KAA+B,GAAG,MAC7C,EAAW,OAAO,QAAQ,CAAC,KAAK,IAAI,CAAC,MAAM,EAEhC,UAAiC;AAC5C,KAAI,OAAO,WAAa,IACtB;CAGF,IAAI,IAAQ,SAAS,eAAe,EAAS;AAM7C,CALK,MACH,IAAQ,SAAS,cAAc,QAAQ,EACvC,EAAM,KAAK,GACX,SAAS,KAAK,YAAY,EAAM,GAElC,EAAM,cAAc;OACf,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;qBACR,EAAY;;;OAG1B,EAAsB;OACtB,EAAsB;OACtB,EAAsB;;;;OAItB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;qBACR,EAAY;;;GCpCpB,KAAgB,EAC3B,cACA,UACA,eACA,kBACA,qBACA,eACA,iBACA,mBACA,UACA,eAAY,IACZ,eACA,qBAAkB,UAClB,YACA,kBACA,OACA,GAAG,QAC6C;CAChD,IAAM,IAAc,GAAO;AAC3B,SAAgB;AAEd,EADA,GAAoB,EACpB,GAA0B;IACzB,EAAE,CAAC;CAEN,IAAM,IAAyB,GAC7B,KACE,KACA,KACA,KACA,KACA,KACA,KACA,IAEE,IAAY,MAAO,IAAyB,IAAc,KAAA,IAC1D,IAAgB,IAAY,GAAG,EAAU,gBAAgB,KAAA,GACzD,IAAU,IAAY,GAAG,EAAU,UAAU,KAAA,GAC7C,IAAc,GAAO,WAAW,GAChC,IAAc,EAClB,IAAmB,IAAgB,KAAA,GACnC,IAAa,IAAU,KAAA,EACxB,EAEK,IACJ,kBAAC,GAAD;EACE,GAAI;EACJ,IAAI;EACJ,WAAW,EAA4B,GAAuB,GAAiB,EAAU;EACzF,OAAO;GAAE,YAAY;GAA6B,GAAG;GAAO;EAC5D,oBAAkB;EAClB,gBAAc,IAAa,KAAO,KAAA;EAClC,WAAW,MAAc;AAEvB,GADA,EAAM,WAAW,EAAU,EAC3B,IAAgB,OAAO,EAAU,CAAC;;EAEpC,CAAA;AAOJ,QAJK,IAKH,kBAAC,GAAD;EACE,OAAO;EACP,UAAU;EACV,SAAS;EACT,aAAa;EACE;EACf,OAAO;EACE;EACF;EACI;EACC;EACK;EACjB,YAAY,EAAM;EAClB,eAAe;AAGb,GAFA,KAAe,EACf,IAAgB,GAAG,EACnB,EAAM,WAAW,GAAG;;EAEtB,cAAc;EACd,OAAO;YAEN;EACU,CAAA,GA1BN;;AA8BX,EAAa,cAAc"}

package/dist-lib/AutoComplete-gOMQxLvY.cjs

@@ -0,0 +1,38 @@
+require(`./chunk-Bmb41Sf3.cjs`);const e=require(`./theme.cjs`),t=require(`./forms/FieldShell.cjs`),n=require(`./fieldProps-CuWfEbFx.cjs`),r=require(`./selectStyles-BFeXUMpO.cjs`);let i=require(`antd`),a=require(`react`),o=require(`react/jsx-runtime`);var s=`ds-autocomplete-styles`,c=`ds-autocomplete`,l=e.appTheme.token?.fontFamily??`'Nunito', sans-serif`,u=l,d=(...e)=>e.filter(Boolean).join(` `).trim(),f=()=>{if(typeof document>`u`)return;let e=document.getElementById(s);e||(e=document.createElement(`style`),e.id=s,document.head.appendChild(e)),e.textContent=`
+    .${c},
+    .${c}.ant-select,
+    .${c} .ant-select,
+    .${c}.ant-select .ant-select-selector,
+    .${c} .ant-select-selector,
+    .${c}.ant-select .ant-select-selector,
+    .${c}.ant-select .ant-select-selection-search,
+    .${c}.ant-select .ant-select-selection-search-input,
+    .${c}.ant-select .ant-select-selection-item,
+    .${c}.ant-select .ant-select-selection-placeholder,
+    .${c}.ant-select .ant-select-content,
+    .${c}.ant-select .ant-select-input,
+    .${c}.ant-select .ant-select-placeholder {
+      font-family: ${l} !important;
+    }
+
+    .${c}.ant-select,
+    .${c}.ant-select .ant-select-selector,
+    .${c} .ant-select-selector {
+      border-radius: 4px !important;
+    }
+
+    .${c} .ant-select-selection-search,
+    .${c} .ant-select-selection-search-input,
+    .${c} .ant-select-selection-item,
+    .${c} .ant-select-selection-placeholder,
+    .${c} .ant-select-content,
+    .${c} .ant-select-input,
+    .${c} .ant-select-placeholder,
+    .${c} .ant-input,
+    .${c}.ant-select .ant-input,
+    .${c} input,
+    .${c} textarea {
+      font-family: ${l} !important;
+    }
+  `},p=({className:e,style:s,fieldLabel:l,fieldRequired:p,fieldDescription:m,fieldError:h,fieldActions:g,containerStyle:_,clear:v,clearable:y=!1,clearLabel:b,clearVisibility:x=`always`,onClear:S,onValueChange:C,id:w,...T})=>{let E=(0,a.useId)();(0,a.useEffect)(()=>{r.s(),f()},[]);let D=!!(l||p||m||h||g||y||v||S),O=w??(D?E:void 0),k=O?`${O}-description`:void 0,A=O?`${O}-error`:void 0,j=v?.onClear??S,M=n.t(m?k:void 0,h?A:void 0),N=(0,o.jsx)(i.AutoComplete,{...T,id:O,className:d(c,r.t,e),style:{fontFamily:u,...s},"aria-describedby":M,"aria-invalid":h?!0:void 0,onChange:e=>{T.onChange?.(e),C?.(String(e))}});return D?(0,o.jsx)(t.FieldShell,{label:l,required:p,htmlFor:O,description:m,descriptionId:k,error:h,errorId:A,clear:v,clearable:y,clearLabel:b,clearVisibility:x,clearValue:T.value,onClear:()=>{j?.(),C?.(``),T.onChange?.(``)},extraActions:g,style:_,children:N}):N};p.displayName=`AutoComplete`,Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return p}});
+//# sourceMappingURL=AutoComplete-gOMQxLvY.cjs.map

package/dist-lib/AutoComplete-gOMQxLvY.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoComplete-gOMQxLvY.cjs","names":[],"sources":["../src/ds/forms/autoCompleteStyles.ts","../src/ds/forms/AutoComplete.tsx"],"sourcesContent":["import { appTheme } from '../../theme/ontadaTheme';\n\nconst STYLE_ID = 'ds-autocomplete-styles';\nexport const DS_AUTOCOMPLETE_CLASS = 'ds-autocomplete';\n\nconst FONT_FAMILY = appTheme.token?.fontFamily ?? \"'Nunito', sans-serif\";\nexport const DS_AUTOCOMPLETE_FONT_FAMILY = FONT_FAMILY;\n\nexport const mergeAutoCompleteClassNames = (...classNames: Array<string | undefined>): string =>\n  classNames.filter(Boolean).join(' ').trim();\n\nexport const ensureAutoCompleteStyles = () => {\n  if (typeof document === 'undefined') {\n    return;\n  }\n\n  let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null;\n  if (!style) {\n    style = document.createElement('style');\n    style.id = STYLE_ID;\n    document.head.appendChild(style);\n  }\n  style.textContent = `\n    .${DS_AUTOCOMPLETE_CLASS},\n    .${DS_AUTOCOMPLETE_CLASS}.ant-select,\n    .${DS_AUTOCOMPLETE_CLASS} .ant-select,\n    .${DS_AUTOCOMPLETE_CLASS}.ant-select .ant-select-selector,\n    .${DS_AUTOCOMPLETE_CLASS} .ant-select-selector,\n    .${DS_AUTOCOMPLETE_CLASS}.ant-select .ant-select-selector,\n    .${DS_AUTOCOMPLETE_CLASS}.ant-select .ant-select-selection-search,\n    .${DS_AUTOCOMPLETE_CLASS}.ant-select .ant-select-selection-search-input,\n    .${DS_AUTOCOMPLETE_CLASS}.ant-select .ant-select-selection-item,\n    .${DS_AUTOCOMPLETE_CLASS}.ant-select .ant-select-selection-placeholder,\n    .${DS_AUTOCOMPLETE_CLASS}.ant-select .ant-select-content,\n    .${DS_AUTOCOMPLETE_CLASS}.ant-select .ant-select-input,\n    .${DS_AUTOCOMPLETE_CLASS}.ant-select .ant-select-placeholder {\n      font-family: ${FONT_FAMILY} !important;\n    }\n\n    .${DS_AUTOCOMPLETE_CLASS}.ant-select,\n    .${DS_AUTOCOMPLETE_CLASS}.ant-select .ant-select-selector,\n    .${DS_AUTOCOMPLETE_CLASS} .ant-select-selector {\n      border-radius: 4px !important;\n    }\n\n    .${DS_AUTOCOMPLETE_CLASS} .ant-select-selection-search,\n    .${DS_AUTOCOMPLETE_CLASS} .ant-select-selection-search-input,\n    .${DS_AUTOCOMPLETE_CLASS} .ant-select-selection-item,\n    .${DS_AUTOCOMPLETE_CLASS} .ant-select-selection-placeholder,\n    .${DS_AUTOCOMPLETE_CLASS} .ant-select-content,\n    .${DS_AUTOCOMPLETE_CLASS} .ant-select-input,\n    .${DS_AUTOCOMPLETE_CLASS} .ant-select-placeholder,\n    .${DS_AUTOCOMPLETE_CLASS} .ant-input,\n    .${DS_AUTOCOMPLETE_CLASS}.ant-select .ant-input,\n    .${DS_AUTOCOMPLETE_CLASS} input,\n    .${DS_AUTOCOMPLETE_CLASS} textarea {\n      font-family: ${FONT_FAMILY} !important;\n    }\n  `;\n\n};\n","import { AutoComplete as AntAutoComplete } from 'antd';\nimport type { ComponentProps } from 'react';\nimport { useEffect, useId } from 'react';\nimport { FieldShell } from './FieldShell';\nimport type { DSFieldShellProps } from './fieldProps';\nimport { joinDescribedByIds } from './fieldProps';\nimport {\n  DS_AUTOCOMPLETE_CLASS,\n  DS_AUTOCOMPLETE_FONT_FAMILY,\n  ensureAutoCompleteStyles,\n  mergeAutoCompleteClassNames,\n} from './autoCompleteStyles';\nimport { DS_SELECT_CLASS, ensureSelectStyles } from './selectStyles';\n\nexport type AutoCompleteProps = ComponentProps<typeof AntAutoComplete>;\n\nexport type AutoCompleteFieldProps = DSFieldShellProps & {\n  onValueChange?: (nextValue: string) => void;\n};\n\nexport const AutoComplete = ({\n  className,\n  style,\n  fieldLabel,\n  fieldRequired,\n  fieldDescription,\n  fieldError,\n  fieldActions,\n  containerStyle,\n  clear,\n  clearable = false,\n  clearLabel,\n  clearVisibility = 'always',\n  onClear,\n  onValueChange,\n  id,\n  ...props\n}: AutoCompleteProps & AutoCompleteFieldProps) => {\n  const generatedId = useId();\n  useEffect(() => {\n    ensureSelectStyles();\n    ensureAutoCompleteStyles();\n  }, []);\n\n  const shouldWrapInFieldShell = Boolean(\n    fieldLabel ||\n      fieldRequired ||\n      fieldDescription ||\n      fieldError ||\n      fieldActions ||\n      clearable ||\n      clear ||\n      onClear,\n  );\n  const controlId = id ?? (shouldWrapInFieldShell ? generatedId : undefined);\n  const descriptionId = controlId ? `${controlId}-description` : undefined;\n  const errorId = controlId ? `${controlId}-error` : undefined;\n  const clearAction = clear?.onClear ?? onClear;\n  const describedBy = joinDescribedByIds(\n    fieldDescription ? descriptionId : undefined,\n    fieldError ? errorId : undefined,\n  );\n\n  const control = (\n    <AntAutoComplete\n      {...props}\n      id={controlId}\n      className={mergeAutoCompleteClassNames(DS_AUTOCOMPLETE_CLASS, DS_SELECT_CLASS, className)}\n      style={{ fontFamily: DS_AUTOCOMPLETE_FONT_FAMILY, ...style }}\n      aria-describedby={describedBy}\n      aria-invalid={fieldError ? true : undefined}\n      onChange={(nextValue) => {\n        props.onChange?.(nextValue);\n        onValueChange?.(String(nextValue));\n      }}\n    />\n  );\n\n  if (!shouldWrapInFieldShell) {\n    return control;\n  }\n\n  return (\n    <FieldShell\n      label={fieldLabel}\n      required={fieldRequired}\n      htmlFor={controlId}\n      description={fieldDescription}\n      descriptionId={descriptionId}\n      error={fieldError}\n      errorId={errorId}\n      clear={clear}\n      clearable={clearable}\n      clearLabel={clearLabel}\n      clearVisibility={clearVisibility}\n      clearValue={props.value}\n      onClear={() => {\n        clearAction?.();\n        onValueChange?.('');\n        props.onChange?.('');\n      }}\n      extraActions={fieldActions}\n      style={containerStyle}\n    >\n      {control}\n    </FieldShell>\n  );\n};\n\nAutoComplete.displayName = 'AutoComplete';\n"],"mappings":"2PAEA,IAAM,EAAW,yBACJ,EAAwB,kBAE/B,EAAc,EAAA,SAAS,OAAO,YAAc,uBACrC,EAA8B,EAE9B,GAA+B,GAAG,IAC7C,EAAW,OAAO,QAAQ,CAAC,KAAK,IAAI,CAAC,MAAM,CAEhC,MAAiC,CAC5C,GAAI,OAAO,SAAa,IACtB,OAGF,IAAI,EAAQ,SAAS,eAAe,EAAS,CACxC,IACH,EAAQ,SAAS,cAAc,QAAQ,CACvC,EAAM,GAAK,EACX,SAAS,KAAK,YAAY,EAAM,EAElC,EAAM,YAAc;OACf,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;qBACR,EAAY;;;OAG1B,EAAsB;OACtB,EAAsB;OACtB,EAAsB;;;;OAItB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;OACtB,EAAsB;qBACR,EAAY;;KCpCpB,GAAgB,CAC3B,YACA,QACA,aACA,gBACA,mBACA,aACA,eACA,iBACA,QACA,YAAY,GACZ,aACA,kBAAkB,SAClB,UACA,gBACA,KACA,GAAG,KAC6C,CAChD,IAAM,GAAA,EAAA,EAAA,QAAqB,EAC3B,EAAA,EAAA,eAAgB,CACd,EAAA,GAAoB,CACpB,GAA0B,EACzB,EAAE,CAAC,CAEN,IAAM,EAAyB,GAC7B,GACE,GACA,GACA,GACA,GACA,GACA,GACA,GAEE,EAAY,IAAO,EAAyB,EAAc,IAAA,IAC1D,EAAgB,EAAY,GAAG,EAAU,cAAgB,IAAA,GACzD,EAAU,EAAY,GAAG,EAAU,QAAU,IAAA,GAC7C,EAAc,GAAO,SAAW,EAChC,EAAc,EAAA,EAClB,EAAmB,EAAgB,IAAA,GACnC,EAAa,EAAU,IAAA,GACxB,CAEK,GACJ,EAAA,EAAA,KAAC,EAAA,aAAD,CACE,GAAI,EACJ,GAAI,EACJ,UAAW,EAA4B,EAAuB,EAAA,EAAiB,EAAU,CACzF,MAAO,CAAE,WAAY,EAA6B,GAAG,EAAO,CAC5D,mBAAkB,EAClB,eAAc,EAAa,GAAO,IAAA,GAClC,SAAW,GAAc,CACvB,EAAM,WAAW,EAAU,CAC3B,IAAgB,OAAO,EAAU,CAAC,EAEpC,CAAA,CAOJ,OAJK,GAKH,EAAA,EAAA,KAAC,EAAA,WAAD,CACE,MAAO,EACP,SAAU,EACV,QAAS,EACT,YAAa,EACE,gBACf,MAAO,EACE,UACF,QACI,YACC,aACK,kBACjB,WAAY,EAAM,MAClB,YAAe,CACb,KAAe,CACf,IAAgB,GAAG,CACnB,EAAM,WAAW,GAAG,EAEtB,aAAc,EACd,MAAO,WAEN,EACU,CAAA,CA1BN,GA8BX,EAAa,YAAc"}