@vector-business-services/cristal-ds-web 0.0.0-stage → 0.1.0

package/dist/icons.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+var react = require('@phosphor-icons/react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/icons/index.ts
+var ICON_DEFAULTS = {
+  weight: "bold",
+  size: "1em",
+  color: "currentColor",
+  mirrored: false,
+  shapeRendering: "geometricPrecision"
+};
+function IconProvider({ children, value }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.IconContext.Provider, { value: { ...ICON_DEFAULTS, ...value }, children });
+}
+
+exports.ICON_DEFAULTS = ICON_DEFAULTS;
+exports.IconProvider = IconProvider;
+Object.keys(react).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return react[k]; }
+  });
+});
+//# sourceMappingURL=icons.cjs.map
+//# sourceMappingURL=icons.cjs.map

package/dist/icons.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icons/IconProvider.tsx"],"names":["jsx","IconContext"],"mappings":";;;;;;AAMO,IAAM,aAAA,GAA2B;AAAA,EACtC,MAAA,EAAQ,MAAA;AAAA,EACR,IAAA,EAAM,KAAA;AAAA,EACN,KAAA,EAAO,cAAA;AAAA,EACP,QAAA,EAAU,KAAA;AAAA,EACV,cAAA,EAAgB;AAClB;AAQO,SAAS,YAAA,CAAa,EAAE,QAAA,EAAU,KAAA,EAAM,EAAsB;AACnE,EAAA,uBACEA,cAAA,CAACC,iBAAA,CAAY,QAAA,EAAZ,EAAqB,KAAA,EAAO,EAAE,GAAG,aAAA,EAAe,GAAG,KAAA,EAAM,EAAI,QAAA,EAAS,CAAA;AAE3E","file":"icons.cjs","sourcesContent":["import type { ReactNode } from 'react';\nimport { IconContext, type IconProps } from '@phosphor-icons/react';\n\n// Padrões do Cristal para os ícones Phosphor: bold, herdando cor e tamanho do texto,\n// com antialias explícito (shape-rendering) no SVG.\n// Qualquer ícone pode sobrescrever via props (ex.: weight=\"regular\" para casos específicos).\nexport const ICON_DEFAULTS: IconProps = {\n  weight: 'bold',\n  size: '1em',\n  color: 'currentColor',\n  mirrored: false,\n  shapeRendering: 'geometricPrecision',\n};\n\nexport interface IconProviderProps {\n  children: ReactNode;\n  /** Sobrescreve os padrões para tudo que estiver dentro (ex.: { weight: 'regular' }). */\n  value?: IconProps;\n}\n\nexport function IconProvider({ children, value }: IconProviderProps) {\n  return (\n    <IconContext.Provider value={{ ...ICON_DEFAULTS, ...value }}>{children}</IconContext.Provider>\n  );\n}\n"]}

package/dist/icons.d.cts

@@ -0,0 +1,15 @@
+import { IconProps } from '@phosphor-icons/react';
+export * from '@phosphor-icons/react';
+import * as react$1 from 'react';
+import { ReactNode } from 'react';
+
+declare const ICON_DEFAULTS: IconProps;
+interface IconProviderProps {
+    children: ReactNode;
+    /** Sobrescreve os padrões para tudo que estiver dentro (ex.: { weight: 'regular' }). */
+    value?: IconProps;
+}
+declare function IconProvider({ children, value }: IconProviderProps): react$1.JSX.Element;
+
+export { ICON_DEFAULTS, IconProvider };
+export type { IconProviderProps };

package/dist/icons.d.ts

@@ -0,0 +1,15 @@
+import { IconProps } from '@phosphor-icons/react';
+export * from '@phosphor-icons/react';
+import * as react$1 from 'react';
+import { ReactNode } from 'react';
+
+declare const ICON_DEFAULTS: IconProps;
+interface IconProviderProps {
+    children: ReactNode;
+    /** Sobrescreve os padrões para tudo que estiver dentro (ex.: { weight: 'regular' }). */
+    value?: IconProps;
+}
+declare function IconProvider({ children, value }: IconProviderProps): react$1.JSX.Element;
+
+export { ICON_DEFAULTS, IconProvider };
+export type { IconProviderProps };

package/dist/icons.js

@@ -0,0 +1,19 @@
+import { IconContext } from '@phosphor-icons/react';
+export * from '@phosphor-icons/react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/icons/index.ts
+var ICON_DEFAULTS = {
+  weight: "bold",
+  size: "1em",
+  color: "currentColor",
+  mirrored: false,
+  shapeRendering: "geometricPrecision"
+};
+function IconProvider({ children, value }) {
+  return /* @__PURE__ */ jsx(IconContext.Provider, { value: { ...ICON_DEFAULTS, ...value }, children });
+}
+
+export { ICON_DEFAULTS, IconProvider };
+//# sourceMappingURL=icons.js.map
+//# sourceMappingURL=icons.js.map

package/dist/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icons/IconProvider.tsx"],"names":[],"mappings":";;;;;AAMO,IAAM,aAAA,GAA2B;AAAA,EACtC,MAAA,EAAQ,MAAA;AAAA,EACR,IAAA,EAAM,KAAA;AAAA,EACN,KAAA,EAAO,cAAA;AAAA,EACP,QAAA,EAAU,KAAA;AAAA,EACV,cAAA,EAAgB;AAClB;AAQO,SAAS,YAAA,CAAa,EAAE,QAAA,EAAU,KAAA,EAAM,EAAsB;AACnE,EAAA,uBACE,GAAA,CAAC,WAAA,CAAY,QAAA,EAAZ,EAAqB,KAAA,EAAO,EAAE,GAAG,aAAA,EAAe,GAAG,KAAA,EAAM,EAAI,QAAA,EAAS,CAAA;AAE3E","file":"icons.js","sourcesContent":["import type { ReactNode } from 'react';\nimport { IconContext, type IconProps } from '@phosphor-icons/react';\n\n// Padrões do Cristal para os ícones Phosphor: bold, herdando cor e tamanho do texto,\n// com antialias explícito (shape-rendering) no SVG.\n// Qualquer ícone pode sobrescrever via props (ex.: weight=\"regular\" para casos específicos).\nexport const ICON_DEFAULTS: IconProps = {\n  weight: 'bold',\n  size: '1em',\n  color: 'currentColor',\n  mirrored: false,\n  shapeRendering: 'geometricPrecision',\n};\n\nexport interface IconProviderProps {\n  children: ReactNode;\n  /** Sobrescreve os padrões para tudo que estiver dentro (ex.: { weight: 'regular' }). */\n  value?: IconProps;\n}\n\nexport function IconProvider({ children, value }: IconProviderProps) {\n  return (\n    <IconContext.Provider value={{ ...ICON_DEFAULTS, ...value }}>{children}</IconContext.Provider>\n  );\n}\n"]}

package/dist/index.cjs

@@ -0,0 +1,475 @@
+'use strict';
+
+var react = require('react');
+var autocomplete = require('primereact/autocomplete');
+var react$1 = require('@phosphor-icons/react');
+var jsxRuntime = require('react/jsx-runtime');
+var badge = require('primereact/badge');
+var button = require('primereact/button');
+var chip = require('primereact/chip');
+var divider = require('primereact/divider');
+var inputtext = require('primereact/inputtext');
+var multiselect = require('primereact/multiselect');
+var tag = require('primereact/tag');
+
+// src/components/AutoComplete/AutoComplete.tsx
+var AutoComplete = react.forwardRef(function AutoComplete2({
+  variant = "outline",
+  size = "large",
+  label,
+  hint,
+  error,
+  inputId,
+  required,
+  disabled,
+  className,
+  style,
+  ...props
+}, ref) {
+  const autoId = react.useId();
+  const id = inputId ?? autoId;
+  const hintId = `${id}-hint`;
+  const supportText = error ?? hint;
+  const classes = [
+    "cr-field",
+    "cr-autocomplete",
+    `cr-field--${variant}`,
+    `cr-field--${size}`,
+    error && "cr-field--error",
+    disabled && "cr-field--disabled",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes, style, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cr-field__label", htmlFor: id, children: [
+      label,
+      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-field__required", "aria-hidden": "true", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      autocomplete.AutoComplete,
+      {
+        unstyled: true,
+        inputRef: ref,
+        inputId: id,
+        required,
+        disabled,
+        scrollHeight: "185px",
+        pt: {
+          root: { className: "cr-autocomplete__root" },
+          input: {
+            root: {
+              className: "cr-field__control cr-autocomplete__input",
+              "aria-describedby": supportText ? hintId : void 0,
+              "aria-invalid": error ? true : void 0
+            }
+          },
+          // O Prime mostra um spinner próprio enquanto busca; o Figma não define esse estado.
+          loadingIcon: { className: "cr-autocomplete__loader" },
+          panel: { className: "cr-autocomplete__panel" },
+          list: { className: "cr-autocomplete__list" },
+          item: { className: "cr-autocomplete__item" }
+        },
+        ...props
+      }
+    ),
+    supportText && /* @__PURE__ */ jsxRuntime.jsxs("p", { id: hintId, className: `cr-field__hint${error ? " cr-field__hint--error" : ""}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-field__hint-icon", "aria-hidden": "true", children: error ? /* @__PURE__ */ jsxRuntime.jsx(react$1.WarningCircle, {}) : /* @__PURE__ */ jsxRuntime.jsx(react$1.Info, {}) }),
+      supportText
+    ] })
+  ] });
+});
+var Badge = react.forwardRef(function Badge2({ variant = "default", size = "large", className, children, ...props }, ref) {
+  const primeRef = react.useRef(null);
+  react.useImperativeHandle(ref, () => primeRef.current?.getElement());
+  const classes = ["cr-badge", `cr-badge--${variant}`, `cr-badge--${size}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    badge.Badge,
+    {
+      unstyled: true,
+      ref: primeRef,
+      className: classes,
+      value: size === "small" ? null : children,
+      ...props
+    }
+  );
+});
+var Button = react.forwardRef(function Button2({
+  variant = "primary",
+  size = "large",
+  leadingIcon,
+  trailingIcon,
+  type = "button",
+  className,
+  children,
+  ...props
+}, ref) {
+  const classes = ["cr-button", `cr-button--${variant}`, `cr-button--${size}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    button.Button,
+    {
+      unstyled: true,
+      ref,
+      type,
+      className: classes,
+      ...props,
+      children: [
+        leadingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-button__icon", "aria-hidden": "true", children: leadingIcon }),
+        children,
+        trailingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-button__icon", "aria-hidden": "true", children: trailingIcon })
+      ]
+    }
+  );
+});
+var Chip = react.forwardRef(function Chip2({
+  label,
+  variant = "default",
+  size = "small",
+  leadingIcon,
+  trailingIcon,
+  disabled = false,
+  onRemove,
+  removeLabel = "Remover",
+  className,
+  ...props
+}, ref) {
+  const classes = [
+    "cr-chip",
+    `cr-chip--${variant}`,
+    `cr-chip--${size}`,
+    disabled && "cr-chip--disabled",
+    className
+  ].filter(Boolean).join(" ");
+  const removable = Boolean(onRemove) && !disabled;
+  const trailing = trailingIcon ?? (onRemove ? /* @__PURE__ */ jsxRuntime.jsx(react$1.X, {}) : null);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chip.Chip,
+    {
+      unstyled: true,
+      pt: { root: { ref, "aria-label": void 0 } },
+      className: classes,
+      label,
+      "aria-disabled": disabled || void 0,
+      icon: leadingIcon ? () => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-chip__icon cr-chip__icon--leading", "aria-hidden": "true", children: leadingIcon }) : void 0,
+      removable: Boolean(trailing),
+      removeIcon: (options) => {
+        if (!removable) {
+          return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-chip__icon cr-chip__icon--trailing", "aria-hidden": "true", children: trailing });
+        }
+        const { role, tabIndex, onClick, onKeyDown } = options.iconProps;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            role,
+            tabIndex,
+            onClick,
+            onKeyDown,
+            className: "cr-chip__icon cr-chip__icon--trailing cr-chip__remove",
+            "aria-label": removeLabel,
+            children: trailing
+          }
+        );
+      },
+      onRemove: onRemove ? (event) => onRemove(event) !== false : void 0,
+      ...props
+    }
+  );
+});
+var Divider = react.forwardRef(function Divider2({ orientation = "horizontal", variant = "solid", className, style, ...props }, ref) {
+  const primeRef = react.useRef(null);
+  react.useImperativeHandle(ref, () => primeRef.current?.getElement());
+  const classes = ["cr-divider", `cr-divider--${orientation}`, `cr-divider--${variant}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    divider.Divider,
+    {
+      unstyled: true,
+      ref: primeRef,
+      layout: orientation,
+      pt: {
+        root: { className: classes, style },
+        content: { className: "cr-divider__content" }
+      },
+      ...props
+    }
+  );
+});
+var IconButton = react.forwardRef(function IconButton2({ variant = "primary", size = "large", icon, type = "button", className, ...props }, ref) {
+  const classes = [
+    "cr-icon-button",
+    `cr-icon-button--${variant}`,
+    `cr-icon-button--${size}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    button.Button,
+    {
+      unstyled: true,
+      ref,
+      type,
+      className: classes,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-icon-button__icon", "aria-hidden": "true", children: icon })
+    }
+  );
+});
+var Input = react.forwardRef(function Input2({
+  variant = "outline",
+  size = "large",
+  label,
+  leadingIcon,
+  trailingIcon,
+  hint,
+  error,
+  id,
+  required,
+  disabled,
+  className,
+  ...props
+}, ref) {
+  const autoId = react.useId();
+  const inputId = id ?? autoId;
+  const hintId = `${inputId}-hint`;
+  const supportText = error ?? hint;
+  const classes = [
+    "cr-field",
+    `cr-field--${variant}`,
+    `cr-field--${size}`,
+    error && "cr-field--error",
+    disabled && "cr-field--disabled",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cr-field__label", htmlFor: inputId, children: [
+      label,
+      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-field__required", "aria-hidden": "true", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cr-field__control", children: [
+      leadingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-field__icon", "aria-hidden": "true", children: leadingIcon }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        inputtext.InputText,
+        {
+          unstyled: true,
+          ref,
+          id: inputId,
+          className: "cr-field__input",
+          required,
+          disabled,
+          invalid: Boolean(error),
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": supportText ? hintId : void 0,
+          ...props
+        }
+      ),
+      trailingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-field__icon", children: trailingIcon })
+    ] }),
+    supportText && /* @__PURE__ */ jsxRuntime.jsxs("p", { id: hintId, className: `cr-field__hint${error ? " cr-field__hint--error" : ""}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-field__hint-icon", "aria-hidden": "true", children: error ? /* @__PURE__ */ jsxRuntime.jsx(react$1.WarningCircle, {}) : /* @__PURE__ */ jsxRuntime.jsx(react$1.Info, {}) }),
+      supportText
+    ] })
+  ] });
+});
+var MultiSelect = react.forwardRef(function MultiSelect2({
+  variant = "outline",
+  size = "large",
+  density = "normal",
+  label,
+  options,
+  optionLabel = "label",
+  optionValue,
+  value,
+  onChange,
+  placeholder = "Selecionar op\xE7\xE3o",
+  filter = false,
+  filterPlaceholder = "Pesquisar",
+  maxChips = 3,
+  selectedItemsLabel = "{0} itens selecionados",
+  removeLabel = "Remover",
+  selectAllLabel = "Selecionar todos",
+  emptyFilterMessage = "Nenhum resultado encontrado",
+  hint,
+  error,
+  required,
+  disabled,
+  id,
+  className,
+  ...props
+}, ref) {
+  const autoId = react.useId();
+  const inputId = id ?? autoId;
+  const hintId = `${inputId}-hint`;
+  const supportText = error ?? hint;
+  const selected = value ?? [];
+  const overflow = selected.length > maxChips;
+  const classes = [
+    "cr-field",
+    `cr-field--${variant}`,
+    `cr-field--${size}`,
+    "cr-multiselect",
+    error && "cr-field--error",
+    disabled && "cr-field--disabled",
+    className
+  ].filter(Boolean).join(" ");
+  const valueOf = (option) => optionValue ? option[optionValue] : option;
+  const labelOf = (item) => {
+    const option = options.find((o) => valueOf(o) === item) ?? item;
+    const text = option?.[optionLabel];
+    return String(text ?? item);
+  };
+  const remove = (event, next) => {
+    event.originalEvent.stopPropagation();
+    onChange?.(next);
+    return false;
+  };
+  const renderSelected = (item) => {
+    if (item === void 0) {
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-multiselect__placeholder", children: placeholder });
+    }
+    if (overflow) {
+      if (selected.indexOf(item) !== 0) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Chip,
+        {
+          className: "cr-multiselect__chip",
+          label: selectedItemsLabel.replace("{0}", String(selected.length)),
+          disabled,
+          onRemove: disabled ? void 0 : (event) => remove(event, []),
+          removeLabel
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Chip,
+      {
+        className: "cr-multiselect__chip",
+        label: labelOf(item),
+        disabled,
+        onRemove: disabled ? void 0 : (event) => remove(
+          event,
+          selected.filter((v) => v !== item)
+        ),
+        removeLabel: `${removeLabel} ${labelOf(item)}`
+      }
+    );
+  };
+  const checkbox = {
+    root: { className: "cr-multiselect__checkbox" },
+    box: { className: "cr-multiselect__checkbox-box" },
+    input: { className: "cr-multiselect__checkbox-input" }
+  };
+  const pt = {
+    // Com a lista aberta o foco vai para a busca (no body), fora da caixa: o estado Focused do
+    // Figma vem do estado do Prime.
+    root: (options2) => {
+      const open = options2?.state?.overlayVisible;
+      return {
+        className: `cr-field__control cr-multiselect__control${open ? " cr-multiselect__control--open" : ""}`
+      };
+    },
+    hiddenInputWrapper: { className: "cr-multiselect__hidden" },
+    input: {
+      "aria-describedby": supportText ? hintId : void 0,
+      "aria-invalid": error ? true : void 0,
+      "aria-required": required || void 0
+    },
+    labelContainer: { className: "cr-multiselect__value" },
+    label: { className: "cr-multiselect__chips" },
+    trigger: { className: "cr-field__icon cr-multiselect__trigger" },
+    panel: { className: `cr-multiselect__panel cr-multiselect__panel--${density}` },
+    header: { className: "cr-multiselect__header" },
+    headerCheckboxContainer: { className: "cr-multiselect__select-all" },
+    // O Prime repete role=checkbox na <div> em volta do <input>: o leitor de tela veria dois.
+    headerCheckbox: {
+      ...checkbox,
+      root: { ...checkbox.root, role: void 0, "aria-checked": void 0 },
+      input: { ...checkbox.input, "aria-label": selectAllLabel }
+    },
+    filterContainer: { className: "cr-multiselect__search" },
+    // O filtro é um InputText do Prime, que lê o pass-through da raiz (a tipagem do Prime diverge).
+    filterInput: {
+      root: { className: "cr-multiselect__search-input", "aria-label": filterPlaceholder }
+    },
+    closeButton: { className: "cr-multiselect__close" },
+    wrapper: { className: "cr-multiselect__wrapper" },
+    list: { className: "cr-multiselect__list" },
+    item: (options2) => {
+      const context = options2?.context;
+      const focused = context !== void 0 && context.focusedIndex === context.index;
+      return {
+        className: `cr-multiselect__item${focused ? " cr-multiselect__item--focused" : ""}`
+      };
+    },
+    checkboxContainer: { className: "cr-multiselect__item-checkbox" },
+    // O item (role=option) já diz se está selecionado; o checkbox é só visual para o leitor de tela.
+    // O item (role=option) já diz se está selecionado. O checkbox do Prime fica só visual: inert
+    // tira o <input> do foco e do leitor de tela (tabindex=-1 e aria-hidden não bastam dentro de
+    // um option), e o clique cai no item.
+    checkbox: {
+      ...checkbox,
+      root: { ...checkbox.root, role: void 0, "aria-checked": void 0, inert: true }
+    },
+    emptyMessage: { className: "cr-multiselect__empty" }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cr-field__label", htmlFor: inputId, children: [
+      label,
+      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-field__required", "aria-hidden": "true", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      multiselect.MultiSelect,
+      {
+        unstyled: true,
+        inputId,
+        inputRef: ref,
+        value: selected,
+        options,
+        optionLabel,
+        optionValue,
+        onChange: (event) => onChange?.(event.value),
+        disabled,
+        invalid: Boolean(error),
+        placeholder,
+        selectedItemTemplate: renderSelected,
+        filter,
+        filterPlaceholder,
+        scrollHeight: density === "compact" ? "224px" : "280px",
+        emptyFilterMessage,
+        filterIcon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-multiselect__search-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(react$1.MagnifyingGlass, {}) }),
+        dropdownIcon: /* @__PURE__ */ jsxRuntime.jsx(react$1.CaretDown, { "aria-hidden": "true" }),
+        checkboxIcon: /* @__PURE__ */ jsxRuntime.jsx(react$1.Check, { "aria-hidden": "true" }),
+        itemCheckboxIcon: /* @__PURE__ */ jsxRuntime.jsx(react$1.Check, { "aria-hidden": "true" }),
+        pt,
+        ...props
+      }
+    ),
+    supportText && /* @__PURE__ */ jsxRuntime.jsxs("p", { id: hintId, className: `cr-field__hint${error ? " cr-field__hint--error" : ""}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-field__hint-icon", "aria-hidden": "true", children: error ? /* @__PURE__ */ jsxRuntime.jsx(react$1.WarningCircle, {}) : /* @__PURE__ */ jsxRuntime.jsx(react$1.Info, {}) }),
+      supportText
+    ] })
+  ] });
+});
+var Tag = react.forwardRef(function Tag2({ variant = "default", size = "small", icon, className, children, ...props }, ref) {
+  const primeRef = react.useRef(null);
+  react.useImperativeHandle(ref, () => primeRef.current?.getElement());
+  const classes = ["cr-tag", `cr-tag--${variant}`, `cr-tag--${size}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    tag.Tag,
+    {
+      unstyled: true,
+      ref: primeRef,
+      className: classes,
+      icon: icon ? () => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-tag__icon", "aria-hidden": "true", children: icon }) : void 0,
+      value: children,
+      ...props
+    }
+  );
+});
+
+exports.AutoComplete = AutoComplete;
+exports.Badge = Badge;
+exports.Button = Button;
+exports.Chip = Chip;
+exports.Divider = Divider;
+exports.IconButton = IconButton;
+exports.Input = Input;
+exports.MultiSelect = MultiSelect;
+exports.Tag = Tag;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map