@raystack/apsara 0.48.5 → 0.49.0

package/dist/components/amount/amount.cjs

@@ -76,24 +76,46 @@ function isValidCurrency(currency) {
  * ```
  */
 const Amount = React.forwardRef(({ value = 0, currency = 'USD', locale = 'en-US', hideDecimals = false, currencyDisplay = 'symbol', minimumFractionDigits, maximumFractionDigits, groupDigits = true, valueInMinorUnits = true }, ref) => {
-    const validCurrency = isValidCurrency(currency) ? currency : 'USD';
-    if (validCurrency !== currency) {
-        console.warn(`Invalid currency code: ${currency}. Falling back to USD.`);
+    try {
+        if (typeof value === 'number' &&
+            Math.abs(value) > Number.MAX_SAFE_INTEGER) {
+            console.warn(`Warning: The number ${value} exceeds JavaScript's safe integer limit (${Number.MAX_SAFE_INTEGER}). ` +
+                'For large numbers, pass the value as a string to maintain precision.');
+        }
+        const validCurrency = isValidCurrency(currency) ? currency : 'USD';
+        if (validCurrency !== currency) {
+            console.warn(`Invalid currency code: ${currency}. Falling back to USD.`);
+        }
+        const decimals = getCurrencyDecimals(validCurrency);
+        // Handle minor units - use string manipulation for strings and Math.pow for numbers
+        const baseValue = valueInMinorUnits && decimals > 0
+            ? typeof value === 'string'
+                ? value.slice(0, -decimals) + '.' + value.slice(-decimals)
+                : value / Math.pow(10, decimals)
+            : value;
+        // Remove decimals if hideDecimals is true - handle string and number separately
+        // Note: Not all numbers passed is converted to string as methods like Math.trunc
+        // or toString cannot handle large numbers thus, we need to handle it separately (large numbers passed in value throws console warning).
+        const finalBaseValue = hideDecimals
+            ? typeof baseValue === 'string'
+                ? baseValue.split('.')[0]
+                : Math.trunc(baseValue)
+            : baseValue;
+        const formattedValue = new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency: validCurrency.toUpperCase(),
+            currencyDisplay,
+            minimumFractionDigits: hideDecimals ? 0 : minimumFractionDigits,
+            maximumFractionDigits: hideDecimals ? 0 : maximumFractionDigits,
+            useGrouping: groupDigits
+            // @ts-ignore - Handling large numbers as string or number, so we need to pass the value as string or number.
+        }).format(finalBaseValue);
+        return jsxRuntime.jsxRuntimeExports.jsx("span", { ref: ref, children: formattedValue });
+    }
+    catch (error) {
+        console.error('Error formatting amount:', error);
+        return jsxRuntime.jsxRuntimeExports.jsx("span", { ref: ref, children: value });
     }
-    const decimals = getCurrencyDecimals(validCurrency);
-    const baseValue = valueInMinorUnits
-        ? value / Math.pow(10, decimals)
-        : value;
-    const finalBaseValue = hideDecimals ? Math.trunc(baseValue) : baseValue;
-    const formattedValue = new Intl.NumberFormat(locale, {
-        style: 'currency',
-        currency: validCurrency.toUpperCase(),
-        currencyDisplay,
-        minimumFractionDigits: hideDecimals ? 0 : minimumFractionDigits,
-        maximumFractionDigits: hideDecimals ? 0 : maximumFractionDigits,
-        useGrouping: groupDigits
-    }).format(finalBaseValue);
-    return jsxRuntime.jsxRuntimeExports.jsx("span", { ref: ref, children: formattedValue });
 });
 Amount.displayName = 'Amount';
 

package/dist/components/amount/amount.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"amount.cjs","sources":["../../../components/amount/amount.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nexport interface AmountProps {\n  /**\n   * The monetary value to display\n   * @default 0\n   * @example\n   * valueInMinorUnits=true: 1299 => \"$12.99\"\n   * valueInMinorUnits=false: 12.99 => \"$12.99\"\n   */\n  value: number;\n\n  /**\n   * ISO 4217 currency code\n   * @default 'USD'\n   */\n  currency?: string;\n\n  /**\n   * Whether the value is in minor units (cents, paise, etc.)\n   * If true, the value will be converted based on the currency's decimal places\n   * If false, the value will be used as is\n   * @default true\n   * @example\n   * USD: 1299 => $12.99 (2 decimals)\n   * JPY: 1299 => ¥1,299 (0 decimals)\n   * BHD: 1299 => BHD 1.299 (3 decimals)\n   */\n  valueInMinorUnits?: boolean;\n\n  /**\n   * BCP 47 language tag\n   * @default 'en-US'\n   * @example 'en-US', 'de-DE', 'ja-JP'\n   */\n  locale?: string;\n\n  /**\n   * Truncates decimal places\n   * @default false\n   */\n  hideDecimals?: boolean;\n\n  /**\n   * Currency display format\n   * @default 'symbol'\n   * @example 'symbol' - $12.99, 'code' - USD 12.99, 'name' - 12.99 US Dollars\n   */\n  currencyDisplay?: 'symbol' | 'code' | 'name';\n\n  /**\n   * Number of minimum fraction digits\n   * @default undefined (uses currency's default)\n   */\n  minimumFractionDigits?: number;\n\n  /**\n   * Number of maximum fraction digits\n   * @default undefined (uses currency's default)\n   */\n  maximumFractionDigits?: number;\n\n  /**\n   * Group digits (e.g., thousand separators)\n   * @default true\n   */\n  groupDigits?: boolean;\n}\n\n/**\n * Get the number of decimal places for a currency\n */\nfunction getCurrencyDecimals(currency: string): number {\n  try {\n    const formatter = new Intl.NumberFormat('en', {\n      style: 'currency',\n      currency: currency.toUpperCase()\n    });\n\n    // Format a number and count the decimal places\n    const formatted = formatter.format(1); // Get string representation of 1 unit with currency symbol\n    const match = formatted.match(/\\.([\\d]+)/); // Extract the decimal part\n    return match ? match[1].length : 0;\n  } catch {\n    // Default to 2 decimal places\n    return 2;\n  }\n}\n\n/**\n * Check if a currency is valid\n */\nfunction isValidCurrency(currency: string): boolean {\n  try {\n    new Intl.NumberFormat('en', {\n      style: 'currency',\n      currency: currency.toUpperCase()\n    });\n    return true;\n  } catch {\n    return false;\n  }\n}\n\n/**\n * Amount component for displaying monetary values.\n * Automatically formats currencies using Intl.NumberFormat.\n * Inherits styling from parent Text component.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Text>\n *   Total: <Amount value={1299} />  // Shows as \"$12.99\"\n * </Text>\n *\n * // With different currency and locale\n * <Text>\n *   Prix: <Amount value={1299} currency=\"EUR\" locale=\"fr-FR\" />  // Shows as \"12,99 €\"\n * </Text>\n *\n * // Without decimals\n * <Text>\n *   Price: <Amount value={1299} hideDecimals />  // Shows as \"$12\"\n * </Text>\n *\n * // With currency code\n * <Text>\n *   Amount: <Amount value={1299} currencyDisplay=\"code\" />  // Shows as \"USD 12.99\"\n * </Text>\n *\n * // With value in major units\n * <Text>\n *   Amount: <Amount value={12.99} valueInMinorUnits={false} />  // Shows as \"$12.99\"\n * </Text>\n *\n * // With groupDigits (default is true)\n * <Text>\n *   Amount: <Amount value={129999999} groupDigits />  // Shows as \"$129,999,999.99\"\n * </Text>\n * ```\n */\nexport const Amount = forwardRef<HTMLSpanElement, AmountProps>(\n  (\n    {\n      value = 0,\n      currency = 'USD',\n      locale = 'en-US',\n      hideDecimals = false,\n      currencyDisplay = 'symbol',\n      minimumFractionDigits,\n      maximumFractionDigits,\n      groupDigits = true,\n      valueInMinorUnits = true\n    },\n    ref\n  ) => {\n    const validCurrency = isValidCurrency(currency) ? currency : 'USD';\n    if (validCurrency !== currency) {\n      console.warn(`Invalid currency code: ${currency}. Falling back to USD.`);\n    }\n\n    const decimals = getCurrencyDecimals(validCurrency);\n    const baseValue = valueInMinorUnits\n      ? value / Math.pow(10, decimals)\n      : value;\n    const finalBaseValue = hideDecimals ? Math.trunc(baseValue) : baseValue;\n\n    const formattedValue = new Intl.NumberFormat(locale, {\n      style: 'currency' as const,\n      currency: validCurrency.toUpperCase(),\n      currencyDisplay,\n      minimumFractionDigits: hideDecimals ? 0 : minimumFractionDigits,\n      maximumFractionDigits: hideDecimals ? 0 : maximumFractionDigits,\n      useGrouping: groupDigits\n    }).format(finalBaseValue);\n\n    return <span ref={ref}>{formattedValue}</span>;\n  }\n);\n\nAmount.displayName = 'Amount';\n"],"names":["forwardRef","_jsx"],"mappings":";;;;;AAqEA;;AAEG;AACH,SAAS,mBAAmB,CAAC,QAAgB,EAAA;AAC3C,IAAA,IAAI;QACF,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;AAC5C,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,QAAQ,EAAE,QAAQ,CAAC,WAAW,EAAE;AACjC,SAAA,CAAC,CAAC;;QAGH,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACtC,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;AAC3C,QAAA,OAAO,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;KACpC;AAAC,IAAA,MAAM;;AAEN,QAAA,OAAO,CAAC,CAAC;KACV;AACH,CAAC;AAED;;AAEG;AACH,SAAS,eAAe,CAAC,QAAgB,EAAA;AACvC,IAAA,IAAI;AACF,QAAA,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;AAC1B,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,QAAQ,EAAE,QAAQ,CAAC,WAAW,EAAE;AACjC,SAAA,CAAC,CAAC;AACH,QAAA,OAAO,IAAI,CAAC;KACb;AAAC,IAAA,MAAM;AACN,QAAA,OAAO,KAAK,CAAC;KACd;AACH,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCG;AACU,MAAA,MAAM,GAAGA,gBAAU,CAC9B,CACE,EACE,KAAK,GAAG,CAAC,EACT,QAAQ,GAAG,KAAK,EAChB,MAAM,GAAG,OAAO,EAChB,YAAY,GAAG,KAAK,EACpB,eAAe,GAAG,QAAQ,EAC1B,qBAAqB,EACrB,qBAAqB,EACrB,WAAW,GAAG,IAAI,EAClB,iBAAiB,GAAG,IAAI,EACzB,EACD,GAAG,KACD;AACF,IAAA,MAAM,aAAa,GAAG,eAAe,CAAC,QAAQ,CAAC,GAAG,QAAQ,GAAG,KAAK,CAAC;AACnE,IAAA,IAAI,aAAa,KAAK,QAAQ,EAAE;AAC9B,QAAA,OAAO,CAAC,IAAI,CAAC,0BAA0B,QAAQ,CAAA,sBAAA,CAAwB,CAAC,CAAC;KAC1E;AAED,IAAA,MAAM,QAAQ,GAAG,mBAAmB,CAAC,aAAa,CAAC,CAAC;IACpD,MAAM,SAAS,GAAG,iBAAiB;UAC/B,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,QAAQ,CAAC;UAC9B,KAAK,CAAC;AACV,IAAA,MAAM,cAAc,GAAG,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;IAExE,MAAM,cAAc,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE;AACnD,QAAA,KAAK,EAAE,UAAmB;AAC1B,QAAA,QAAQ,EAAE,aAAa,CAAC,WAAW,EAAE;QACrC,eAAe;QACf,qBAAqB,EAAE,YAAY,GAAG,CAAC,GAAG,qBAAqB;QAC/D,qBAAqB,EAAE,YAAY,GAAG,CAAC,GAAG,qBAAqB;AAC/D,QAAA,WAAW,EAAE,WAAW;AACzB,KAAA,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;AAE1B,IAAA,OAAOC,2CAAM,GAAG,EAAE,GAAG,EAAG,QAAA,EAAA,cAAc,GAAQ,CAAC;AACjD,CAAC,EACD;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
+{"version":3,"file":"amount.cjs","sources":["../../../components/amount/amount.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nexport interface AmountProps {\n  /**\n   * The monetary value to display\n   * For large numbers (> 2^53), pass the value as string to maintain precision\n   * @default 0\n   * @example\n   * valueInMinorUnits=true: 1299 => \"$12.99\"\n   * valueInMinorUnits=false: 12.99 => \"$12.99\"\n   */\n  value: number | string;\n\n  /**\n   * ISO 4217 currency code\n   * @default 'USD'\n   */\n  currency?: string;\n\n  /**\n   * Whether the value is in minor units (cents, paise, etc.)\n   * If true, the value will be converted based on the currency's decimal places\n   * If false, the value will be used as is\n   * @default true\n   * @example\n   * USD: 1299 => $12.99 (2 decimals)\n   * JPY: 1299 => ¥1,299 (0 decimals)\n   * BHD: 1299 => BHD 1.299 (3 decimals)\n   */\n  valueInMinorUnits?: boolean;\n\n  /**\n   * BCP 47 language tag\n   * @default 'en-US'\n   * @example 'en-US', 'de-DE', 'ja-JP'\n   */\n  locale?: string;\n\n  /**\n   * Truncates decimal places\n   * @default false\n   */\n  hideDecimals?: boolean;\n\n  /**\n   * Currency display format\n   * @default 'symbol'\n   * @example 'symbol' - $12.99, 'code' - USD 12.99, 'name' - 12.99 US Dollars\n   */\n  currencyDisplay?: 'symbol' | 'code' | 'name';\n\n  /**\n   * Number of minimum fraction digits\n   * @default undefined (uses currency's default)\n   */\n  minimumFractionDigits?: number;\n\n  /**\n   * Number of maximum fraction digits\n   * @default undefined (uses currency's default)\n   */\n  maximumFractionDigits?: number;\n\n  /**\n   * Group digits (e.g., thousand separators)\n   * @default true\n   */\n  groupDigits?: boolean;\n}\n\n/**\n * Get the number of decimal places for a currency\n */\nfunction getCurrencyDecimals(currency: string): number {\n  try {\n    const formatter = new Intl.NumberFormat('en', {\n      style: 'currency',\n      currency: currency.toUpperCase()\n    });\n\n    // Format a number and count the decimal places\n    const formatted = formatter.format(1); // Get string representation of 1 unit with currency symbol\n    const match = formatted.match(/\\.([\\d]+)/); // Extract the decimal part\n    return match ? match[1].length : 0;\n  } catch {\n    // Default to 2 decimal places\n    return 2;\n  }\n}\n\n/**\n * Check if a currency is valid\n */\nfunction isValidCurrency(currency: string): boolean {\n  try {\n    new Intl.NumberFormat('en', {\n      style: 'currency',\n      currency: currency.toUpperCase()\n    });\n    return true;\n  } catch {\n    return false;\n  }\n}\n\n/**\n * Amount component for displaying monetary values.\n * Automatically formats currencies using Intl.NumberFormat.\n * Inherits styling from parent Text component.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Text>\n *   Total: <Amount value={1299} />  // Shows as \"$12.99\"\n * </Text>\n *\n * // With different currency and locale\n * <Text>\n *   Prix: <Amount value={1299} currency=\"EUR\" locale=\"fr-FR\" />  // Shows as \"12,99 €\"\n * </Text>\n *\n * // Without decimals\n * <Text>\n *   Price: <Amount value={1299} hideDecimals />  // Shows as \"$12\"\n * </Text>\n *\n * // With currency code\n * <Text>\n *   Amount: <Amount value={1299} currencyDisplay=\"code\" />  // Shows as \"USD 12.99\"\n * </Text>\n *\n * // With value in major units\n * <Text>\n *   Amount: <Amount value={12.99} valueInMinorUnits={false} />  // Shows as \"$12.99\"\n * </Text>\n *\n * // With groupDigits (default is true)\n * <Text>\n *   Amount: <Amount value={129999999} groupDigits />  // Shows as \"$129,999,999.99\"\n * </Text>\n * ```\n */\nexport const Amount = forwardRef<HTMLSpanElement, AmountProps>(\n  (\n    {\n      value = 0,\n      currency = 'USD',\n      locale = 'en-US',\n      hideDecimals = false,\n      currencyDisplay = 'symbol',\n      minimumFractionDigits,\n      maximumFractionDigits,\n      groupDigits = true,\n      valueInMinorUnits = true\n    },\n    ref\n  ) => {\n    try {\n      if (\n        typeof value === 'number' &&\n        Math.abs(value) > Number.MAX_SAFE_INTEGER\n      ) {\n        console.warn(\n          `Warning: The number ${value} exceeds JavaScript's safe integer limit (${Number.MAX_SAFE_INTEGER}). ` +\n            'For large numbers, pass the value as a string to maintain precision.'\n        );\n      }\n\n      const validCurrency = isValidCurrency(currency) ? currency : 'USD';\n      if (validCurrency !== currency) {\n        console.warn(\n          `Invalid currency code: ${currency}. Falling back to USD.`\n        );\n      }\n\n      const decimals = getCurrencyDecimals(validCurrency);\n\n      // Handle minor units - use string manipulation for strings and Math.pow for numbers\n      const baseValue =\n        valueInMinorUnits && decimals > 0\n          ? typeof value === 'string'\n            ? value.slice(0, -decimals) + '.' + value.slice(-decimals)\n            : value / Math.pow(10, decimals)\n          : value;\n\n      // Remove decimals if hideDecimals is true - handle string and number separately\n      // Note: Not all numbers passed is converted to string as methods like Math.trunc\n      // or toString cannot handle large numbers thus, we need to handle it separately (large numbers passed in value throws console warning).\n      const finalBaseValue = hideDecimals\n        ? typeof baseValue === 'string'\n          ? baseValue.split('.')[0]\n          : Math.trunc(baseValue)\n        : baseValue;\n\n      const formattedValue = new Intl.NumberFormat(locale, {\n        style: 'currency' as const,\n        currency: validCurrency.toUpperCase(),\n        currencyDisplay,\n        minimumFractionDigits: hideDecimals ? 0 : minimumFractionDigits,\n        maximumFractionDigits: hideDecimals ? 0 : maximumFractionDigits,\n        useGrouping: groupDigits\n        // @ts-ignore - Handling large numbers as string or number, so we need to pass the value as string or number.\n      }).format(finalBaseValue);\n\n      return <span ref={ref}>{formattedValue}</span>;\n    } catch (error) {\n      console.error('Error formatting amount:', error);\n      return <span ref={ref}>{value}</span>;\n    }\n  }\n);\n\nAmount.displayName = 'Amount';\n"],"names":["forwardRef","_jsx"],"mappings":";;;;;AAsEA;;AAEG;AACH,SAAS,mBAAmB,CAAC,QAAgB,EAAA;AAC3C,IAAA,IAAI;QACF,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;AAC5C,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,QAAQ,EAAE,QAAQ,CAAC,WAAW,EAAE;AACjC,SAAA,CAAC,CAAC;;QAGH,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACtC,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;AAC3C,QAAA,OAAO,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;KACpC;AAAC,IAAA,MAAM;;AAEN,QAAA,OAAO,CAAC,CAAC;KACV;AACH,CAAC;AAED;;AAEG;AACH,SAAS,eAAe,CAAC,QAAgB,EAAA;AACvC,IAAA,IAAI;AACF,QAAA,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;AAC1B,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,QAAQ,EAAE,QAAQ,CAAC,WAAW,EAAE;AACjC,SAAA,CAAC,CAAC;AACH,QAAA,OAAO,IAAI,CAAC;KACb;AAAC,IAAA,MAAM;AACN,QAAA,OAAO,KAAK,CAAC;KACd;AACH,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCG;AACU,MAAA,MAAM,GAAGA,gBAAU,CAC9B,CACE,EACE,KAAK,GAAG,CAAC,EACT,QAAQ,GAAG,KAAK,EAChB,MAAM,GAAG,OAAO,EAChB,YAAY,GAAG,KAAK,EACpB,eAAe,GAAG,QAAQ,EAC1B,qBAAqB,EACrB,qBAAqB,EACrB,WAAW,GAAG,IAAI,EAClB,iBAAiB,GAAG,IAAI,EACzB,EACD,GAAG,KACD;AACF,IAAA,IAAI;QACF,IACE,OAAO,KAAK,KAAK,QAAQ;YACzB,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,gBAAgB,EACzC;YACA,OAAO,CAAC,IAAI,CACV,CAAA,oBAAA,EAAuB,KAAK,CAA6C,0CAAA,EAAA,MAAM,CAAC,gBAAgB,CAAK,GAAA,CAAA;AACnG,gBAAA,sEAAsE,CACzE,CAAC;SACH;AAED,QAAA,MAAM,aAAa,GAAG,eAAe,CAAC,QAAQ,CAAC,GAAG,QAAQ,GAAG,KAAK,CAAC;AACnE,QAAA,IAAI,aAAa,KAAK,QAAQ,EAAE;AAC9B,YAAA,OAAO,CAAC,IAAI,CACV,0BAA0B,QAAQ,CAAA,sBAAA,CAAwB,CAC3D,CAAC;SACH;AAED,QAAA,MAAM,QAAQ,GAAG,mBAAmB,CAAC,aAAa,CAAC,CAAC;;AAGpD,QAAA,MAAM,SAAS,GACb,iBAAiB,IAAI,QAAQ,GAAG,CAAC;AAC/B,cAAE,OAAO,KAAK,KAAK,QAAQ;AACzB,kBAAE,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,GAAG,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC;kBACxD,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,QAAQ,CAAC;cAChC,KAAK,CAAC;;;;QAKZ,MAAM,cAAc,GAAG,YAAY;AACjC,cAAE,OAAO,SAAS,KAAK,QAAQ;kBAC3B,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AACzB,kBAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC;cACvB,SAAS,CAAC;QAEd,MAAM,cAAc,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE;AACnD,YAAA,KAAK,EAAE,UAAmB;AAC1B,YAAA,QAAQ,EAAE,aAAa,CAAC,WAAW,EAAE;YACrC,eAAe;YACf,qBAAqB,EAAE,YAAY,GAAG,CAAC,GAAG,qBAAqB;YAC/D,qBAAqB,EAAE,YAAY,GAAG,CAAC,GAAG,qBAAqB;AAC/D,YAAA,WAAW,EAAE,WAAW;;AAEzB,SAAA,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;AAE1B,QAAA,OAAOC,2CAAM,GAAG,EAAE,GAAG,EAAG,QAAA,EAAA,cAAc,GAAQ,CAAC;KAChD;IAAC,OAAO,KAAK,EAAE;AACd,QAAA,OAAO,CAAC,KAAK,CAAC,0BAA0B,EAAE,KAAK,CAAC,CAAC;AACjD,QAAA,OAAOA,2CAAM,GAAG,EAAE,GAAG,EAAG,QAAA,EAAA,KAAK,GAAQ,CAAC;KACvC;AACH,CAAC,EACD;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}

package/dist/components/amount/amount.d.ts

@@ -1,12 +1,13 @@
 export interface AmountProps {
     /**
      * The monetary value to display
+     * For large numbers (> 2^53), pass the value as string to maintain precision
      * @default 0
      * @example
      * valueInMinorUnits=true: 1299 => "$12.99"
      * valueInMinorUnits=false: 12.99 => "$12.99"
      */
-    value: number;
+    value: number | string;
     /**
      * ISO 4217 currency code
      * @default 'USD'

package/dist/components/amount/amount.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"amount.d.ts","sourceRoot":"","sources":["../../../components/amount/amount.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,WAAW;IAC1B;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;;OASG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAE7C;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAqCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,MAAM,yGAqClB,CAAC"}
+{"version":3,"file":"amount.d.ts","sourceRoot":"","sources":["../../../components/amount/amount.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,WAAW;IAC1B;;;;;;;OAOG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAEvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;;OASG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAE7C;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAqCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,MAAM,yGAoElB,CAAC"}

package/dist/components/amount/amount.js

@@ -74,24 +74,46 @@ function isValidCurrency(currency) {
  * ```
  */
 const Amount = forwardRef(({ value = 0, currency = 'USD', locale = 'en-US', hideDecimals = false, currencyDisplay = 'symbol', minimumFractionDigits, maximumFractionDigits, groupDigits = true, valueInMinorUnits = true }, ref) => {
-    const validCurrency = isValidCurrency(currency) ? currency : 'USD';
-    if (validCurrency !== currency) {
-        console.warn(`Invalid currency code: ${currency}. Falling back to USD.`);
+    try {
+        if (typeof value === 'number' &&
+            Math.abs(value) > Number.MAX_SAFE_INTEGER) {
+            console.warn(`Warning: The number ${value} exceeds JavaScript's safe integer limit (${Number.MAX_SAFE_INTEGER}). ` +
+                'For large numbers, pass the value as a string to maintain precision.');
+        }
+        const validCurrency = isValidCurrency(currency) ? currency : 'USD';
+        if (validCurrency !== currency) {
+            console.warn(`Invalid currency code: ${currency}. Falling back to USD.`);
+        }
+        const decimals = getCurrencyDecimals(validCurrency);
+        // Handle minor units - use string manipulation for strings and Math.pow for numbers
+        const baseValue = valueInMinorUnits && decimals > 0
+            ? typeof value === 'string'
+                ? value.slice(0, -decimals) + '.' + value.slice(-decimals)
+                : value / Math.pow(10, decimals)
+            : value;
+        // Remove decimals if hideDecimals is true - handle string and number separately
+        // Note: Not all numbers passed is converted to string as methods like Math.trunc
+        // or toString cannot handle large numbers thus, we need to handle it separately (large numbers passed in value throws console warning).
+        const finalBaseValue = hideDecimals
+            ? typeof baseValue === 'string'
+                ? baseValue.split('.')[0]
+                : Math.trunc(baseValue)
+            : baseValue;
+        const formattedValue = new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency: validCurrency.toUpperCase(),
+            currencyDisplay,
+            minimumFractionDigits: hideDecimals ? 0 : minimumFractionDigits,
+            maximumFractionDigits: hideDecimals ? 0 : maximumFractionDigits,
+            useGrouping: groupDigits
+            // @ts-ignore - Handling large numbers as string or number, so we need to pass the value as string or number.
+        }).format(finalBaseValue);
+        return jsxRuntimeExports.jsx("span", { ref: ref, children: formattedValue });
+    }
+    catch (error) {
+        console.error('Error formatting amount:', error);
+        return jsxRuntimeExports.jsx("span", { ref: ref, children: value });
     }
-    const decimals = getCurrencyDecimals(validCurrency);
-    const baseValue = valueInMinorUnits
-        ? value / Math.pow(10, decimals)
-        : value;
-    const finalBaseValue = hideDecimals ? Math.trunc(baseValue) : baseValue;
-    const formattedValue = new Intl.NumberFormat(locale, {
-        style: 'currency',
-        currency: validCurrency.toUpperCase(),
-        currencyDisplay,
-        minimumFractionDigits: hideDecimals ? 0 : minimumFractionDigits,
-        maximumFractionDigits: hideDecimals ? 0 : maximumFractionDigits,
-        useGrouping: groupDigits
-    }).format(finalBaseValue);
-    return jsxRuntimeExports.jsx("span", { ref: ref, children: formattedValue });
 });
 Amount.displayName = 'Amount';
 

package/dist/components/amount/amount.js.map

@@ -1 +1 @@
-{"version":3,"file":"amount.js","sources":["../../../components/amount/amount.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nexport interface AmountProps {\n  /**\n   * The monetary value to display\n   * @default 0\n   * @example\n   * valueInMinorUnits=true: 1299 => \"$12.99\"\n   * valueInMinorUnits=false: 12.99 => \"$12.99\"\n   */\n  value: number;\n\n  /**\n   * ISO 4217 currency code\n   * @default 'USD'\n   */\n  currency?: string;\n\n  /**\n   * Whether the value is in minor units (cents, paise, etc.)\n   * If true, the value will be converted based on the currency's decimal places\n   * If false, the value will be used as is\n   * @default true\n   * @example\n   * USD: 1299 => $12.99 (2 decimals)\n   * JPY: 1299 => ¥1,299 (0 decimals)\n   * BHD: 1299 => BHD 1.299 (3 decimals)\n   */\n  valueInMinorUnits?: boolean;\n\n  /**\n   * BCP 47 language tag\n   * @default 'en-US'\n   * @example 'en-US', 'de-DE', 'ja-JP'\n   */\n  locale?: string;\n\n  /**\n   * Truncates decimal places\n   * @default false\n   */\n  hideDecimals?: boolean;\n\n  /**\n   * Currency display format\n   * @default 'symbol'\n   * @example 'symbol' - $12.99, 'code' - USD 12.99, 'name' - 12.99 US Dollars\n   */\n  currencyDisplay?: 'symbol' | 'code' | 'name';\n\n  /**\n   * Number of minimum fraction digits\n   * @default undefined (uses currency's default)\n   */\n  minimumFractionDigits?: number;\n\n  /**\n   * Number of maximum fraction digits\n   * @default undefined (uses currency's default)\n   */\n  maximumFractionDigits?: number;\n\n  /**\n   * Group digits (e.g., thousand separators)\n   * @default true\n   */\n  groupDigits?: boolean;\n}\n\n/**\n * Get the number of decimal places for a currency\n */\nfunction getCurrencyDecimals(currency: string): number {\n  try {\n    const formatter = new Intl.NumberFormat('en', {\n      style: 'currency',\n      currency: currency.toUpperCase()\n    });\n\n    // Format a number and count the decimal places\n    const formatted = formatter.format(1); // Get string representation of 1 unit with currency symbol\n    const match = formatted.match(/\\.([\\d]+)/); // Extract the decimal part\n    return match ? match[1].length : 0;\n  } catch {\n    // Default to 2 decimal places\n    return 2;\n  }\n}\n\n/**\n * Check if a currency is valid\n */\nfunction isValidCurrency(currency: string): boolean {\n  try {\n    new Intl.NumberFormat('en', {\n      style: 'currency',\n      currency: currency.toUpperCase()\n    });\n    return true;\n  } catch {\n    return false;\n  }\n}\n\n/**\n * Amount component for displaying monetary values.\n * Automatically formats currencies using Intl.NumberFormat.\n * Inherits styling from parent Text component.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Text>\n *   Total: <Amount value={1299} />  // Shows as \"$12.99\"\n * </Text>\n *\n * // With different currency and locale\n * <Text>\n *   Prix: <Amount value={1299} currency=\"EUR\" locale=\"fr-FR\" />  // Shows as \"12,99 €\"\n * </Text>\n *\n * // Without decimals\n * <Text>\n *   Price: <Amount value={1299} hideDecimals />  // Shows as \"$12\"\n * </Text>\n *\n * // With currency code\n * <Text>\n *   Amount: <Amount value={1299} currencyDisplay=\"code\" />  // Shows as \"USD 12.99\"\n * </Text>\n *\n * // With value in major units\n * <Text>\n *   Amount: <Amount value={12.99} valueInMinorUnits={false} />  // Shows as \"$12.99\"\n * </Text>\n *\n * // With groupDigits (default is true)\n * <Text>\n *   Amount: <Amount value={129999999} groupDigits />  // Shows as \"$129,999,999.99\"\n * </Text>\n * ```\n */\nexport const Amount = forwardRef<HTMLSpanElement, AmountProps>(\n  (\n    {\n      value = 0,\n      currency = 'USD',\n      locale = 'en-US',\n      hideDecimals = false,\n      currencyDisplay = 'symbol',\n      minimumFractionDigits,\n      maximumFractionDigits,\n      groupDigits = true,\n      valueInMinorUnits = true\n    },\n    ref\n  ) => {\n    const validCurrency = isValidCurrency(currency) ? currency : 'USD';\n    if (validCurrency !== currency) {\n      console.warn(`Invalid currency code: ${currency}. Falling back to USD.`);\n    }\n\n    const decimals = getCurrencyDecimals(validCurrency);\n    const baseValue = valueInMinorUnits\n      ? value / Math.pow(10, decimals)\n      : value;\n    const finalBaseValue = hideDecimals ? Math.trunc(baseValue) : baseValue;\n\n    const formattedValue = new Intl.NumberFormat(locale, {\n      style: 'currency' as const,\n      currency: validCurrency.toUpperCase(),\n      currencyDisplay,\n      minimumFractionDigits: hideDecimals ? 0 : minimumFractionDigits,\n      maximumFractionDigits: hideDecimals ? 0 : maximumFractionDigits,\n      useGrouping: groupDigits\n    }).format(finalBaseValue);\n\n    return <span ref={ref}>{formattedValue}</span>;\n  }\n);\n\nAmount.displayName = 'Amount';\n"],"names":["_jsx"],"mappings":";;;AAqEA;;AAEG;AACH,SAAS,mBAAmB,CAAC,QAAgB,EAAA;AAC3C,IAAA,IAAI;QACF,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;AAC5C,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,QAAQ,EAAE,QAAQ,CAAC,WAAW,EAAE;AACjC,SAAA,CAAC,CAAC;;QAGH,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACtC,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;AAC3C,QAAA,OAAO,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;KACpC;AAAC,IAAA,MAAM;;AAEN,QAAA,OAAO,CAAC,CAAC;KACV;AACH,CAAC;AAED;;AAEG;AACH,SAAS,eAAe,CAAC,QAAgB,EAAA;AACvC,IAAA,IAAI;AACF,QAAA,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;AAC1B,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,QAAQ,EAAE,QAAQ,CAAC,WAAW,EAAE;AACjC,SAAA,CAAC,CAAC;AACH,QAAA,OAAO,IAAI,CAAC;KACb;AAAC,IAAA,MAAM;AACN,QAAA,OAAO,KAAK,CAAC;KACd;AACH,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCG;AACU,MAAA,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,KAAK,GAAG,CAAC,EACT,QAAQ,GAAG,KAAK,EAChB,MAAM,GAAG,OAAO,EAChB,YAAY,GAAG,KAAK,EACpB,eAAe,GAAG,QAAQ,EAC1B,qBAAqB,EACrB,qBAAqB,EACrB,WAAW,GAAG,IAAI,EAClB,iBAAiB,GAAG,IAAI,EACzB,EACD,GAAG,KACD;AACF,IAAA,MAAM,aAAa,GAAG,eAAe,CAAC,QAAQ,CAAC,GAAG,QAAQ,GAAG,KAAK,CAAC;AACnE,IAAA,IAAI,aAAa,KAAK,QAAQ,EAAE;AAC9B,QAAA,OAAO,CAAC,IAAI,CAAC,0BAA0B,QAAQ,CAAA,sBAAA,CAAwB,CAAC,CAAC;KAC1E;AAED,IAAA,MAAM,QAAQ,GAAG,mBAAmB,CAAC,aAAa,CAAC,CAAC;IACpD,MAAM,SAAS,GAAG,iBAAiB;UAC/B,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,QAAQ,CAAC;UAC9B,KAAK,CAAC;AACV,IAAA,MAAM,cAAc,GAAG,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;IAExE,MAAM,cAAc,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE;AACnD,QAAA,KAAK,EAAE,UAAmB;AAC1B,QAAA,QAAQ,EAAE,aAAa,CAAC,WAAW,EAAE;QACrC,eAAe;QACf,qBAAqB,EAAE,YAAY,GAAG,CAAC,GAAG,qBAAqB;QAC/D,qBAAqB,EAAE,YAAY,GAAG,CAAC,GAAG,qBAAqB;AAC/D,QAAA,WAAW,EAAE,WAAW;AACzB,KAAA,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;AAE1B,IAAA,OAAOA,gCAAM,GAAG,EAAE,GAAG,EAAG,QAAA,EAAA,cAAc,GAAQ,CAAC;AACjD,CAAC,EACD;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
+{"version":3,"file":"amount.js","sources":["../../../components/amount/amount.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nexport interface AmountProps {\n  /**\n   * The monetary value to display\n   * For large numbers (> 2^53), pass the value as string to maintain precision\n   * @default 0\n   * @example\n   * valueInMinorUnits=true: 1299 => \"$12.99\"\n   * valueInMinorUnits=false: 12.99 => \"$12.99\"\n   */\n  value: number | string;\n\n  /**\n   * ISO 4217 currency code\n   * @default 'USD'\n   */\n  currency?: string;\n\n  /**\n   * Whether the value is in minor units (cents, paise, etc.)\n   * If true, the value will be converted based on the currency's decimal places\n   * If false, the value will be used as is\n   * @default true\n   * @example\n   * USD: 1299 => $12.99 (2 decimals)\n   * JPY: 1299 => ¥1,299 (0 decimals)\n   * BHD: 1299 => BHD 1.299 (3 decimals)\n   */\n  valueInMinorUnits?: boolean;\n\n  /**\n   * BCP 47 language tag\n   * @default 'en-US'\n   * @example 'en-US', 'de-DE', 'ja-JP'\n   */\n  locale?: string;\n\n  /**\n   * Truncates decimal places\n   * @default false\n   */\n  hideDecimals?: boolean;\n\n  /**\n   * Currency display format\n   * @default 'symbol'\n   * @example 'symbol' - $12.99, 'code' - USD 12.99, 'name' - 12.99 US Dollars\n   */\n  currencyDisplay?: 'symbol' | 'code' | 'name';\n\n  /**\n   * Number of minimum fraction digits\n   * @default undefined (uses currency's default)\n   */\n  minimumFractionDigits?: number;\n\n  /**\n   * Number of maximum fraction digits\n   * @default undefined (uses currency's default)\n   */\n  maximumFractionDigits?: number;\n\n  /**\n   * Group digits (e.g., thousand separators)\n   * @default true\n   */\n  groupDigits?: boolean;\n}\n\n/**\n * Get the number of decimal places for a currency\n */\nfunction getCurrencyDecimals(currency: string): number {\n  try {\n    const formatter = new Intl.NumberFormat('en', {\n      style: 'currency',\n      currency: currency.toUpperCase()\n    });\n\n    // Format a number and count the decimal places\n    const formatted = formatter.format(1); // Get string representation of 1 unit with currency symbol\n    const match = formatted.match(/\\.([\\d]+)/); // Extract the decimal part\n    return match ? match[1].length : 0;\n  } catch {\n    // Default to 2 decimal places\n    return 2;\n  }\n}\n\n/**\n * Check if a currency is valid\n */\nfunction isValidCurrency(currency: string): boolean {\n  try {\n    new Intl.NumberFormat('en', {\n      style: 'currency',\n      currency: currency.toUpperCase()\n    });\n    return true;\n  } catch {\n    return false;\n  }\n}\n\n/**\n * Amount component for displaying monetary values.\n * Automatically formats currencies using Intl.NumberFormat.\n * Inherits styling from parent Text component.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Text>\n *   Total: <Amount value={1299} />  // Shows as \"$12.99\"\n * </Text>\n *\n * // With different currency and locale\n * <Text>\n *   Prix: <Amount value={1299} currency=\"EUR\" locale=\"fr-FR\" />  // Shows as \"12,99 €\"\n * </Text>\n *\n * // Without decimals\n * <Text>\n *   Price: <Amount value={1299} hideDecimals />  // Shows as \"$12\"\n * </Text>\n *\n * // With currency code\n * <Text>\n *   Amount: <Amount value={1299} currencyDisplay=\"code\" />  // Shows as \"USD 12.99\"\n * </Text>\n *\n * // With value in major units\n * <Text>\n *   Amount: <Amount value={12.99} valueInMinorUnits={false} />  // Shows as \"$12.99\"\n * </Text>\n *\n * // With groupDigits (default is true)\n * <Text>\n *   Amount: <Amount value={129999999} groupDigits />  // Shows as \"$129,999,999.99\"\n * </Text>\n * ```\n */\nexport const Amount = forwardRef<HTMLSpanElement, AmountProps>(\n  (\n    {\n      value = 0,\n      currency = 'USD',\n      locale = 'en-US',\n      hideDecimals = false,\n      currencyDisplay = 'symbol',\n      minimumFractionDigits,\n      maximumFractionDigits,\n      groupDigits = true,\n      valueInMinorUnits = true\n    },\n    ref\n  ) => {\n    try {\n      if (\n        typeof value === 'number' &&\n        Math.abs(value) > Number.MAX_SAFE_INTEGER\n      ) {\n        console.warn(\n          `Warning: The number ${value} exceeds JavaScript's safe integer limit (${Number.MAX_SAFE_INTEGER}). ` +\n            'For large numbers, pass the value as a string to maintain precision.'\n        );\n      }\n\n      const validCurrency = isValidCurrency(currency) ? currency : 'USD';\n      if (validCurrency !== currency) {\n        console.warn(\n          `Invalid currency code: ${currency}. Falling back to USD.`\n        );\n      }\n\n      const decimals = getCurrencyDecimals(validCurrency);\n\n      // Handle minor units - use string manipulation for strings and Math.pow for numbers\n      const baseValue =\n        valueInMinorUnits && decimals > 0\n          ? typeof value === 'string'\n            ? value.slice(0, -decimals) + '.' + value.slice(-decimals)\n            : value / Math.pow(10, decimals)\n          : value;\n\n      // Remove decimals if hideDecimals is true - handle string and number separately\n      // Note: Not all numbers passed is converted to string as methods like Math.trunc\n      // or toString cannot handle large numbers thus, we need to handle it separately (large numbers passed in value throws console warning).\n      const finalBaseValue = hideDecimals\n        ? typeof baseValue === 'string'\n          ? baseValue.split('.')[0]\n          : Math.trunc(baseValue)\n        : baseValue;\n\n      const formattedValue = new Intl.NumberFormat(locale, {\n        style: 'currency' as const,\n        currency: validCurrency.toUpperCase(),\n        currencyDisplay,\n        minimumFractionDigits: hideDecimals ? 0 : minimumFractionDigits,\n        maximumFractionDigits: hideDecimals ? 0 : maximumFractionDigits,\n        useGrouping: groupDigits\n        // @ts-ignore - Handling large numbers as string or number, so we need to pass the value as string or number.\n      }).format(finalBaseValue);\n\n      return <span ref={ref}>{formattedValue}</span>;\n    } catch (error) {\n      console.error('Error formatting amount:', error);\n      return <span ref={ref}>{value}</span>;\n    }\n  }\n);\n\nAmount.displayName = 'Amount';\n"],"names":["_jsx"],"mappings":"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"}

package/dist/components/filter-chip/filter-chip.cjs

@@ -13,9 +13,8 @@ require('../tooltip/tooltip.cjs');
 var datePicker = require('../calendar/date-picker.cjs');
 require('../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/dayjs.min.cjs');
 require('../popover/popover.cjs');
-require('../input-field/input-field.cjs');
+var inputField = require('../input-field/input-field.cjs');
 var text = require('../text/text.cjs');
-var textfield = require('../textfield/textfield.cjs');
 var filterChipOperation = require('./filter-chip-operation.cjs');
 var filterChip_module = require('./filter-chip.module.css.cjs');
 
@@ -55,16 +54,16 @@ const FilterChip = ({ label, value, onRemove, className, ref, columnType = filte
                                 style: {
                                     display: 'none'
                                 }
-                            }, variant: 'text', className: index.cx(filterChip_module.default.selectValue, filterChip_module.default.selectColumn), children: jsxRuntime.jsxRuntimeExports.jsx(select.Select.Value, { placeholder: 'Select value', children: isMultiSelectColumn && filterValue.length > 1
+                            }, variant: 'text', className: index.cx(filterChip_module.default.selectValue, !showOnRemove && filterChip_module.default.selectColumn), children: jsxRuntime.jsxRuntimeExports.jsx(select.Select.Value, { placeholder: 'Select value', children: isMultiSelectColumn && filterValue.length > 1
                                     ? `${filterValue.length} selected`
                                     : undefined }) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.Content, { "data-variant": 'filter', children: options.map(opt => (jsxRuntime.jsxRuntimeExports.jsx(select.Select.Item, { value: opt.value.toString(), children: opt.label }, opt.value.toString()))) })] }));
             case filters.FilterType.date:
                 return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.dateFieldWrapper, children: jsxRuntime.jsxRuntimeExports.jsx(datePicker.DatePicker, { value: filterValue, onSelect: date => handleFilterValueChange(date), showCalendarIcon: false, inputFieldProps: { className: filterChip_module.default.dateField } }) }));
             default:
-                return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.textFieldWrapper, children: jsxRuntime.jsxRuntimeExports.jsx(textfield.TextField, { className: filterChip_module.default.textField, value: filterValue, onChange: e => handleFilterValueChange(e.target.value) }) }));
+                return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.inputFieldWrapper, children: jsxRuntime.jsxRuntimeExports.jsx(inputField.InputField, { variant: variant === 'text' ? 'borderless' : 'default', className: filterChip_module.default.inputField, value: filterValue, onChange: e => handleFilterValueChange(e.target.value) }) }));
         }
     };
-    return (jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { align: 'center', ref: ref, className: chip({ variant, className }), role: 'group', "aria-label": `Filter by ${label}`, ...props, children: [jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { align: 'center', gap: 2, className: filterChip_module.default['chip-label'], children: [leadingIcon && (jsxRuntime.jsxRuntimeExports.jsx("span", { className: filterChip_module.default.leadingIcon, "aria-hidden": 'true', children: leadingIcon })), jsxRuntime.jsxRuntimeExports.jsx(text.Text, { size: 2, weight: 'normal', children: label })] }), jsxRuntime.jsxRuntimeExports.jsx(filterChipOperation.Operation, { operations: computedOperations, label: label, value: operation, onChange: handleOperationChange, showAlternateLabel: isMultiSelectColumn && filterValue.length <= 1 }), renderValueInput(), showOnRemove && (jsxRuntime.jsxRuntimeExports.jsx("button", { className: filterChip_module.default.removeIconContainer, "aria-label": `Remove ${label} filter`, onClick: onRemove, children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.Cross1Icon, { className: filterChip_module.default.removeIcon }) }))] }));
+    return (jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { align: 'center', ref: ref, className: chip({ variant, className }), role: 'group', "aria-label": `Filter by ${label}`, "data-variant": variant, ...props, children: [jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { align: 'center', gap: 2, className: filterChip_module.default['chip-label'], children: [leadingIcon && (jsxRuntime.jsxRuntimeExports.jsx("span", { className: filterChip_module.default.leadingIcon, "aria-hidden": 'true', children: leadingIcon })), jsxRuntime.jsxRuntimeExports.jsx(text.Text, { size: 2, weight: 'normal', children: label })] }), jsxRuntime.jsxRuntimeExports.jsx(filterChipOperation.Operation, { operations: computedOperations, label: label, value: operation, onChange: handleOperationChange, showAlternateLabel: isMultiSelectColumn && filterValue.length <= 1 }), renderValueInput(), showOnRemove && (jsxRuntime.jsxRuntimeExports.jsx("button", { className: filterChip_module.default.removeIconContainer, "aria-label": `Remove ${label} filter`, onClick: onRemove, children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.Cross1Icon, { className: filterChip_module.default.removeIcon }) }))] }));
 };
 FilterChip.displayName = 'FilterChip';
 

package/dist/components/filter-chip/filter-chip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"filter-chip.cjs","sources":["../../../components/filter-chip/filter-chip.tsx"],"sourcesContent":["import { Cross1Icon } from '@radix-ui/react-icons';\nimport { VariantProps, cva, cx } from 'class-variance-authority';\nimport { ReactElement, ReactNode, useCallback, useState } from 'react';\nimport {\n  FilterOperation,\n  FilterOperator,\n  FilterSelectOption,\n  FilterType,\n  FilterTypes,\n  filterOperators\n} from '~/types/filters';\nimport { DatePicker } from '../calendar';\nimport { Flex } from '../flex';\nimport { Select } from '../select';\nimport { Text } from '../text';\nimport { TextField } from '../textfield';\nimport { Operation } from './filter-chip-operation';\nimport styles from './filter-chip.module.css';\n\nconst chip = cva(styles.chip, {\n  variants: {\n    variant: {\n      default: styles['chip-default'],\n      text: null\n    }\n  },\n  defaultVariants: {\n    variant: 'default'\n  }\n});\n\nexport interface FilterChipProps extends VariantProps<typeof chip> {\n  label: string;\n  value?: string;\n  onRemove?: () => void;\n  className?: string;\n  ref?: React.RefObject<HTMLDivElement>;\n  children?: ReactNode;\n  columnType?: FilterTypes;\n  options?: FilterSelectOption[];\n  onValueChange?: (value: any, operation: string) => void;\n  onOperationChange?: (operation: string) => void;\n  leadingIcon?: ReactElement;\n  operations?: FilterOperator<string>[];\n}\n\nexport const FilterChip = ({\n  label,\n  value,\n  onRemove,\n  className,\n  ref,\n  columnType = FilterType.string,\n  options = [],\n  onValueChange,\n  onOperationChange,\n  leadingIcon,\n  variant,\n  operations,\n  ...props\n}: FilterChipProps) => {\n  const computedOperations = operations?.length\n    ? operations\n    : filterOperators[columnType];\n\n  const [operation, setOperation] = useState<FilterOperation | undefined>(\n    computedOperations?.[0]\n  );\n  const [filterValue, setFilterValue] = useState<any>(value || '');\n\n  const showOnRemove = typeof onRemove === 'function';\n  const isMultiSelectColumn = columnType === FilterType.multiselect;\n\n  const handleOperationChange = useCallback(\n    (operation: FilterOperation) => {\n      setOperation(operation);\n      if (operation?.value) onOperationChange?.(operation.value);\n    },\n    [onOperationChange]\n  );\n\n  const handleFilterValueChange = useCallback(\n    (value: any) => {\n      setFilterValue(value);\n      onValueChange?.(value, operation?.value ?? '');\n    },\n    [operation, onValueChange]\n  );\n\n  const renderValueInput = () => {\n    switch (columnType) {\n      case FilterType.multiselect:\n      case FilterType.select:\n        return (\n          <Select\n            value={isMultiSelectColumn ? filterValue : filterValue.toString()}\n            onValueChange={handleFilterValueChange}\n            multiple={isMultiSelectColumn}\n          >\n            <Select.Trigger\n              iconProps={{\n                style: {\n                  display: 'none'\n                }\n              }}\n              variant='text'\n              className={cx(styles.selectValue, styles.selectColumn)}\n            >\n              <Select.Value placeholder='Select value'>\n                {isMultiSelectColumn && filterValue.length > 1\n                  ? `${filterValue.length} selected`\n                  : undefined}\n              </Select.Value>\n            </Select.Trigger>\n            <Select.Content data-variant='filter'>\n              {options.map(opt => (\n                <Select.Item\n                  key={opt.value.toString()}\n                  value={opt.value.toString()}\n                >\n                  {opt.label}\n                </Select.Item>\n              ))}\n            </Select.Content>\n          </Select>\n        );\n      case FilterType.date:\n        return (\n          <div className={styles.dateFieldWrapper}>\n            <DatePicker\n              value={filterValue}\n              onSelect={date => handleFilterValueChange(date)}\n              showCalendarIcon={false}\n              inputFieldProps={{ className: styles.dateField }}\n            />\n          </div>\n        );\n      default:\n        return (\n          <div className={styles.textFieldWrapper}>\n            <TextField\n              className={styles.textField}\n              value={filterValue}\n              onChange={e => handleFilterValueChange(e.target.value)}\n            />\n          </div>\n        );\n    }\n  };\n\n  return (\n    <Flex\n      align='center'\n      ref={ref}\n      className={chip({ variant, className })}\n      role='group'\n      aria-label={`Filter by ${label}`}\n      {...props}\n    >\n      <Flex align='center' gap={2} className={styles['chip-label']}>\n        {leadingIcon && (\n          <span className={styles.leadingIcon} aria-hidden='true'>\n            {leadingIcon}\n          </span>\n        )}\n        <Text size={2} weight='normal'>\n          {label}\n        </Text>\n      </Flex>\n      <Operation\n        operations={computedOperations}\n        label={label}\n        value={operation}\n        onChange={handleOperationChange}\n        showAlternateLabel={isMultiSelectColumn && filterValue.length <= 1}\n      />\n      {renderValueInput()}\n      {showOnRemove && (\n        <button\n          className={styles.removeIconContainer}\n          aria-label={`Remove ${label} filter`}\n          onClick={onRemove}\n        >\n          <Cross1Icon className={styles.removeIcon} />\n        </button>\n      )}\n    </Flex>\n  );\n};\n\nFilterChip.displayName = 'FilterChip';\n"],"names":["cva","styles","FilterType","filterOperators","useState","useCallback","_jsxs","Select","_jsx","cx","DatePicker","TextField","Flex","Text","Operation","Cross1Icon"],"mappings":"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"}
+{"version":3,"file":"filter-chip.cjs","sources":["../../../components/filter-chip/filter-chip.tsx"],"sourcesContent":["import { Cross1Icon } from '@radix-ui/react-icons';\nimport { VariantProps, cva, cx } from 'class-variance-authority';\nimport { ReactElement, ReactNode, useCallback, useState } from 'react';\nimport {\n  FilterOperation,\n  FilterOperator,\n  FilterSelectOption,\n  FilterType,\n  FilterTypes,\n  filterOperators\n} from '~/types/filters';\nimport { DatePicker } from '../calendar';\nimport { Flex } from '../flex';\nimport { InputField } from '../input-field';\nimport { Select } from '../select';\nimport { Text } from '../text';\nimport { Operation } from './filter-chip-operation';\nimport styles from './filter-chip.module.css';\n\nconst chip = cva(styles.chip, {\n  variants: {\n    variant: {\n      default: styles['chip-default'],\n      text: null\n    }\n  },\n  defaultVariants: {\n    variant: 'default'\n  }\n});\n\nexport interface FilterChipProps extends VariantProps<typeof chip> {\n  label: string;\n  value?: string;\n  onRemove?: () => void;\n  className?: string;\n  ref?: React.RefObject<HTMLDivElement>;\n  children?: ReactNode;\n  columnType?: FilterTypes;\n  options?: FilterSelectOption[];\n  onValueChange?: (value: any, operation: string) => void;\n  onOperationChange?: (operation: string) => void;\n  leadingIcon?: ReactElement;\n  operations?: FilterOperator<string>[];\n}\n\nexport const FilterChip = ({\n  label,\n  value,\n  onRemove,\n  className,\n  ref,\n  columnType = FilterType.string,\n  options = [],\n  onValueChange,\n  onOperationChange,\n  leadingIcon,\n  variant,\n  operations,\n  ...props\n}: FilterChipProps) => {\n  const computedOperations = operations?.length\n    ? operations\n    : filterOperators[columnType];\n\n  const [operation, setOperation] = useState<FilterOperation | undefined>(\n    computedOperations?.[0]\n  );\n  const [filterValue, setFilterValue] = useState<any>(value || '');\n\n  const showOnRemove = typeof onRemove === 'function';\n  const isMultiSelectColumn = columnType === FilterType.multiselect;\n\n  const handleOperationChange = useCallback(\n    (operation: FilterOperation) => {\n      setOperation(operation);\n      if (operation?.value) onOperationChange?.(operation.value);\n    },\n    [onOperationChange]\n  );\n\n  const handleFilterValueChange = useCallback(\n    (value: any) => {\n      setFilterValue(value);\n      onValueChange?.(value, operation?.value ?? '');\n    },\n    [operation, onValueChange]\n  );\n\n  const renderValueInput = () => {\n    switch (columnType) {\n      case FilterType.multiselect:\n      case FilterType.select:\n        return (\n          <Select\n            value={isMultiSelectColumn ? filterValue : filterValue.toString()}\n            onValueChange={handleFilterValueChange}\n            multiple={isMultiSelectColumn}\n          >\n            <Select.Trigger\n              iconProps={{\n                style: {\n                  display: 'none'\n                }\n              }}\n              variant='text'\n              className={cx(\n                styles.selectValue,\n                !showOnRemove && styles.selectColumn\n              )}\n            >\n              <Select.Value placeholder='Select value'>\n                {isMultiSelectColumn && filterValue.length > 1\n                  ? `${filterValue.length} selected`\n                  : undefined}\n              </Select.Value>\n            </Select.Trigger>\n            <Select.Content data-variant='filter'>\n              {options.map(opt => (\n                <Select.Item\n                  key={opt.value.toString()}\n                  value={opt.value.toString()}\n                >\n                  {opt.label}\n                </Select.Item>\n              ))}\n            </Select.Content>\n          </Select>\n        );\n      case FilterType.date:\n        return (\n          <div className={styles.dateFieldWrapper}>\n            <DatePicker\n              value={filterValue}\n              onSelect={date => handleFilterValueChange(date)}\n              showCalendarIcon={false}\n              inputFieldProps={{ className: styles.dateField }}\n            />\n          </div>\n        );\n      default:\n        return (\n          <div className={styles.inputFieldWrapper}>\n            <InputField\n              variant={variant === 'text' ? 'borderless' : 'default'}\n              className={styles.inputField}\n              value={filterValue}\n              onChange={e => handleFilterValueChange(e.target.value)}\n            />\n          </div>\n        );\n    }\n  };\n\n  return (\n    <Flex\n      align='center'\n      ref={ref}\n      className={chip({ variant, className })}\n      role='group'\n      aria-label={`Filter by ${label}`}\n      data-variant={variant}\n      {...props}\n    >\n      <Flex align='center' gap={2} className={styles['chip-label']}>\n        {leadingIcon && (\n          <span className={styles.leadingIcon} aria-hidden='true'>\n            {leadingIcon}\n          </span>\n        )}\n        <Text size={2} weight='normal'>\n          {label}\n        </Text>\n      </Flex>\n      <Operation\n        operations={computedOperations}\n        label={label}\n        value={operation}\n        onChange={handleOperationChange}\n        showAlternateLabel={isMultiSelectColumn && filterValue.length <= 1}\n      />\n      {renderValueInput()}\n      {showOnRemove && (\n        <button\n          className={styles.removeIconContainer}\n          aria-label={`Remove ${label} filter`}\n          onClick={onRemove}\n        >\n          <Cross1Icon className={styles.removeIcon} />\n        </button>\n      )}\n    </Flex>\n  );\n};\n\nFilterChip.displayName = 'FilterChip';\n"],"names":["cva","styles","FilterType","filterOperators","useState","useCallback","_jsxs","Select","_jsx","cx","DatePicker","InputField","Flex","Text","Operation","Cross1Icon"],"mappings":"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"}

package/dist/components/filter-chip/filter-chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filter-chip.d.ts","sourceRoot":"","sources":["../../../components/filter-chip/filter-chip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAW,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAC;AACvE,OAAO,EAEL,cAAc,EACd,kBAAkB,EAElB,WAAW,EAEZ,MAAM,iBAAiB,CAAC;AASzB,QAAA,MAAM,IAAI;;8EAUR,CAAC;AAEH,MAAM,WAAW,eAAgB,SAAQ,YAAY,CAAC,OAAO,IAAI,CAAC;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,EAAE,CAAC;CACvC;AAED,eAAO,MAAM,UAAU;oJAcpB,eAAe;;CAgIjB,CAAC"}
+{"version":3,"file":"filter-chip.d.ts","sourceRoot":"","sources":["../../../components/filter-chip/filter-chip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAW,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAC;AACvE,OAAO,EAEL,cAAc,EACd,kBAAkB,EAElB,WAAW,EAEZ,MAAM,iBAAiB,CAAC;AASzB,QAAA,MAAM,IAAI;;8EAUR,CAAC;AAEH,MAAM,WAAW,eAAgB,SAAQ,YAAY,CAAC,OAAO,IAAI,CAAC;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,EAAE,CAAC;CACvC;AAED,eAAO,MAAM,UAAU;oJAcpB,eAAe;;CAqIjB,CAAC"}

package/dist/components/filter-chip/filter-chip.js

@@ -11,9 +11,8 @@ import '../tooltip/tooltip.js';
 import { DatePicker } from '../calendar/date-picker.js';
 import '../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/dayjs.min.js';
 import '../popover/popover.js';
-import '../input-field/input-field.js';
+import { InputField } from '../input-field/input-field.js';
 import { Text } from '../text/text.js';
-import { TextField } from '../textfield/textfield.js';
 import { Operation } from './filter-chip-operation.js';
 import styles from './filter-chip.module.css.js';
 
@@ -53,16 +52,16 @@ const FilterChip = ({ label, value, onRemove, className, ref, columnType = Filte
                                 style: {
                                     display: 'none'
                                 }
-                            }, variant: 'text', className: cx(styles.selectValue, styles.selectColumn), children: jsxRuntimeExports.jsx(Select.Value, { placeholder: 'Select value', children: isMultiSelectColumn && filterValue.length > 1
+                            }, variant: 'text', className: cx(styles.selectValue, !showOnRemove && styles.selectColumn), children: jsxRuntimeExports.jsx(Select.Value, { placeholder: 'Select value', children: isMultiSelectColumn && filterValue.length > 1
                                     ? `${filterValue.length} selected`
                                     : undefined }) }), jsxRuntimeExports.jsx(Select.Content, { "data-variant": 'filter', children: options.map(opt => (jsxRuntimeExports.jsx(Select.Item, { value: opt.value.toString(), children: opt.label }, opt.value.toString()))) })] }));
             case FilterType.date:
                 return (jsxRuntimeExports.jsx("div", { className: styles.dateFieldWrapper, children: jsxRuntimeExports.jsx(DatePicker, { value: filterValue, onSelect: date => handleFilterValueChange(date), showCalendarIcon: false, inputFieldProps: { className: styles.dateField } }) }));
             default:
-                return (jsxRuntimeExports.jsx("div", { className: styles.textFieldWrapper, children: jsxRuntimeExports.jsx(TextField, { className: styles.textField, value: filterValue, onChange: e => handleFilterValueChange(e.target.value) }) }));
+                return (jsxRuntimeExports.jsx("div", { className: styles.inputFieldWrapper, children: jsxRuntimeExports.jsx(InputField, { variant: variant === 'text' ? 'borderless' : 'default', className: styles.inputField, value: filterValue, onChange: e => handleFilterValueChange(e.target.value) }) }));
         }
     };
-    return (jsxRuntimeExports.jsxs(Flex, { align: 'center', ref: ref, className: chip({ variant, className }), role: 'group', "aria-label": `Filter by ${label}`, ...props, children: [jsxRuntimeExports.jsxs(Flex, { align: 'center', gap: 2, className: styles['chip-label'], children: [leadingIcon && (jsxRuntimeExports.jsx("span", { className: styles.leadingIcon, "aria-hidden": 'true', children: leadingIcon })), jsxRuntimeExports.jsx(Text, { size: 2, weight: 'normal', children: label })] }), jsxRuntimeExports.jsx(Operation, { operations: computedOperations, label: label, value: operation, onChange: handleOperationChange, showAlternateLabel: isMultiSelectColumn && filterValue.length <= 1 }), renderValueInput(), showOnRemove && (jsxRuntimeExports.jsx("button", { className: styles.removeIconContainer, "aria-label": `Remove ${label} filter`, onClick: onRemove, children: jsxRuntimeExports.jsx(Cross1Icon, { className: styles.removeIcon }) }))] }));
+    return (jsxRuntimeExports.jsxs(Flex, { align: 'center', ref: ref, className: chip({ variant, className }), role: 'group', "aria-label": `Filter by ${label}`, "data-variant": variant, ...props, children: [jsxRuntimeExports.jsxs(Flex, { align: 'center', gap: 2, className: styles['chip-label'], children: [leadingIcon && (jsxRuntimeExports.jsx("span", { className: styles.leadingIcon, "aria-hidden": 'true', children: leadingIcon })), jsxRuntimeExports.jsx(Text, { size: 2, weight: 'normal', children: label })] }), jsxRuntimeExports.jsx(Operation, { operations: computedOperations, label: label, value: operation, onChange: handleOperationChange, showAlternateLabel: isMultiSelectColumn && filterValue.length <= 1 }), renderValueInput(), showOnRemove && (jsxRuntimeExports.jsx("button", { className: styles.removeIconContainer, "aria-label": `Remove ${label} filter`, onClick: onRemove, children: jsxRuntimeExports.jsx(Cross1Icon, { className: styles.removeIcon }) }))] }));
 };
 FilterChip.displayName = 'FilterChip';
 

package/dist/components/filter-chip/filter-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-chip.js","sources":["../../../components/filter-chip/filter-chip.tsx"],"sourcesContent":["import { Cross1Icon } from '@radix-ui/react-icons';\nimport { VariantProps, cva, cx } from 'class-variance-authority';\nimport { ReactElement, ReactNode, useCallback, useState } from 'react';\nimport {\n  FilterOperation,\n  FilterOperator,\n  FilterSelectOption,\n  FilterType,\n  FilterTypes,\n  filterOperators\n} from '~/types/filters';\nimport { DatePicker } from '../calendar';\nimport { Flex } from '../flex';\nimport { Select } from '../select';\nimport { Text } from '../text';\nimport { TextField } from '../textfield';\nimport { Operation } from './filter-chip-operation';\nimport styles from './filter-chip.module.css';\n\nconst chip = cva(styles.chip, {\n  variants: {\n    variant: {\n      default: styles['chip-default'],\n      text: null\n    }\n  },\n  defaultVariants: {\n    variant: 'default'\n  }\n});\n\nexport interface FilterChipProps extends VariantProps<typeof chip> {\n  label: string;\n  value?: string;\n  onRemove?: () => void;\n  className?: string;\n  ref?: React.RefObject<HTMLDivElement>;\n  children?: ReactNode;\n  columnType?: FilterTypes;\n  options?: FilterSelectOption[];\n  onValueChange?: (value: any, operation: string) => void;\n  onOperationChange?: (operation: string) => void;\n  leadingIcon?: ReactElement;\n  operations?: FilterOperator<string>[];\n}\n\nexport const FilterChip = ({\n  label,\n  value,\n  onRemove,\n  className,\n  ref,\n  columnType = FilterType.string,\n  options = [],\n  onValueChange,\n  onOperationChange,\n  leadingIcon,\n  variant,\n  operations,\n  ...props\n}: FilterChipProps) => {\n  const computedOperations = operations?.length\n    ? operations\n    : filterOperators[columnType];\n\n  const [operation, setOperation] = useState<FilterOperation | undefined>(\n    computedOperations?.[0]\n  );\n  const [filterValue, setFilterValue] = useState<any>(value || '');\n\n  const showOnRemove = typeof onRemove === 'function';\n  const isMultiSelectColumn = columnType === FilterType.multiselect;\n\n  const handleOperationChange = useCallback(\n    (operation: FilterOperation) => {\n      setOperation(operation);\n      if (operation?.value) onOperationChange?.(operation.value);\n    },\n    [onOperationChange]\n  );\n\n  const handleFilterValueChange = useCallback(\n    (value: any) => {\n      setFilterValue(value);\n      onValueChange?.(value, operation?.value ?? '');\n    },\n    [operation, onValueChange]\n  );\n\n  const renderValueInput = () => {\n    switch (columnType) {\n      case FilterType.multiselect:\n      case FilterType.select:\n        return (\n          <Select\n            value={isMultiSelectColumn ? filterValue : filterValue.toString()}\n            onValueChange={handleFilterValueChange}\n            multiple={isMultiSelectColumn}\n          >\n            <Select.Trigger\n              iconProps={{\n                style: {\n                  display: 'none'\n                }\n              }}\n              variant='text'\n              className={cx(styles.selectValue, styles.selectColumn)}\n            >\n              <Select.Value placeholder='Select value'>\n                {isMultiSelectColumn && filterValue.length > 1\n                  ? `${filterValue.length} selected`\n                  : undefined}\n              </Select.Value>\n            </Select.Trigger>\n            <Select.Content data-variant='filter'>\n              {options.map(opt => (\n                <Select.Item\n                  key={opt.value.toString()}\n                  value={opt.value.toString()}\n                >\n                  {opt.label}\n                </Select.Item>\n              ))}\n            </Select.Content>\n          </Select>\n        );\n      case FilterType.date:\n        return (\n          <div className={styles.dateFieldWrapper}>\n            <DatePicker\n              value={filterValue}\n              onSelect={date => handleFilterValueChange(date)}\n              showCalendarIcon={false}\n              inputFieldProps={{ className: styles.dateField }}\n            />\n          </div>\n        );\n      default:\n        return (\n          <div className={styles.textFieldWrapper}>\n            <TextField\n              className={styles.textField}\n              value={filterValue}\n              onChange={e => handleFilterValueChange(e.target.value)}\n            />\n          </div>\n        );\n    }\n  };\n\n  return (\n    <Flex\n      align='center'\n      ref={ref}\n      className={chip({ variant, className })}\n      role='group'\n      aria-label={`Filter by ${label}`}\n      {...props}\n    >\n      <Flex align='center' gap={2} className={styles['chip-label']}>\n        {leadingIcon && (\n          <span className={styles.leadingIcon} aria-hidden='true'>\n            {leadingIcon}\n          </span>\n        )}\n        <Text size={2} weight='normal'>\n          {label}\n        </Text>\n      </Flex>\n      <Operation\n        operations={computedOperations}\n        label={label}\n        value={operation}\n        onChange={handleOperationChange}\n        showAlternateLabel={isMultiSelectColumn && filterValue.length <= 1}\n      />\n      {renderValueInput()}\n      {showOnRemove && (\n        <button\n          className={styles.removeIconContainer}\n          aria-label={`Remove ${label} filter`}\n          onClick={onRemove}\n        >\n          <Cross1Icon className={styles.removeIcon} />\n        </button>\n      )}\n    </Flex>\n  );\n};\n\nFilterChip.displayName = 'FilterChip';\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;AAmBA,MAAM,IAAI,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;AAC5B,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,MAAM,CAAC,cAAc,CAAC;AAC/B,YAAA,IAAI,EAAE,IAAI;AACX,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,SAAS;AACnB,KAAA;AACF,CAAA,CAAC,CAAC;AAiBU,MAAA,UAAU,GAAG,CAAC,EACzB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,SAAS,EACT,GAAG,EACH,UAAU,GAAG,UAAU,CAAC,MAAM,EAC9B,OAAO,GAAG,EAAE,EACZ,aAAa,EACb,iBAAiB,EACjB,WAAW,EACX,OAAO,EACP,UAAU,EACV,GAAG,KAAK,EACQ,KAAI;AACpB,IAAA,MAAM,kBAAkB,GAAG,UAAU,EAAE,MAAM;AAC3C,UAAE,UAAU;AACZ,UAAE,eAAe,CAAC,UAAU,CAAC,CAAC;AAEhC,IAAA,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CACxC,kBAAkB,GAAG,CAAC,CAAC,CACxB,CAAC;AACF,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAM,KAAK,IAAI,EAAE,CAAC,CAAC;AAEjE,IAAA,MAAM,YAAY,GAAG,OAAO,QAAQ,KAAK,UAAU,CAAC;AACpD,IAAA,MAAM,mBAAmB,GAAG,UAAU,KAAK,UAAU,CAAC,WAAW,CAAC;AAElE,IAAA,MAAM,qBAAqB,GAAG,WAAW,CACvC,CAAC,SAA0B,KAAI;QAC7B,YAAY,CAAC,SAAS,CAAC,CAAC;QACxB,IAAI,SAAS,EAAE,KAAK;AAAE,YAAA,iBAAiB,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;AAC7D,KAAC,EACD,CAAC,iBAAiB,CAAC,CACpB,CAAC;AAEF,IAAA,MAAM,uBAAuB,GAAG,WAAW,CACzC,CAAC,KAAU,KAAI;QACb,cAAc,CAAC,KAAK,CAAC,CAAC;QACtB,aAAa,GAAG,KAAK,EAAE,SAAS,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC;AACjD,KAAC,EACD,CAAC,SAAS,EAAE,aAAa,CAAC,CAC3B,CAAC;IAEF,MAAM,gBAAgB,GAAG,MAAK;QAC5B,QAAQ,UAAU;YAChB,KAAK,UAAU,CAAC,WAAW,CAAC;YAC5B,KAAK,UAAU,CAAC,MAAM;AACpB,gBAAA,QACEA,sBAAA,CAAC,MAAM,EAAA,EACL,KAAK,EAAE,mBAAmB,GAAG,WAAW,GAAG,WAAW,CAAC,QAAQ,EAAE,EACjE,aAAa,EAAE,uBAAuB,EACtC,QAAQ,EAAE,mBAAmB,EAAA,QAAA,EAAA,CAE7BC,sBAAC,MAAM,CAAC,OAAO,EAAA,EACb,SAAS,EAAE;AACT,gCAAA,KAAK,EAAE;AACL,oCAAA,OAAO,EAAE,MAAM;AAChB,iCAAA;AACF,6BAAA,EACD,OAAO,EAAC,MAAM,EACd,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,YAAY,CAAC,EAEtD,QAAA,EAAAA,qBAAA,CAAC,MAAM,CAAC,KAAK,EAAA,EAAC,WAAW,EAAC,cAAc,EACrC,QAAA,EAAA,mBAAmB,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC;AAC5C,sCAAE,CAAA,EAAG,WAAW,CAAC,MAAM,CAAW,SAAA,CAAA;sCAChC,SAAS,EACA,CAAA,EAAA,CACA,EACjBA,qBAAC,CAAA,MAAM,CAAC,OAAO,EAAc,EAAA,cAAA,EAAA,QAAQ,YAClC,OAAO,CAAC,GAAG,CAAC,GAAG,KACdA,qBAAC,CAAA,MAAM,CAAC,IAAI,IAEV,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAA,QAAA,EAE1B,GAAG,CAAC,KAAK,EAAA,EAHL,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,CAIb,CACf,CAAC,EAAA,CACa,CACV,EAAA,CAAA,EACT;YACJ,KAAK,UAAU,CAAC,IAAI;AAClB,gBAAA,QACEA,qBAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,gBAAgB,EACrC,QAAA,EAAAA,qBAAA,CAAC,UAAU,EACT,EAAA,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,IAAI,IAAI,uBAAuB,CAAC,IAAI,CAAC,EAC/C,gBAAgB,EAAE,KAAK,EACvB,eAAe,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,EAChD,CAAA,EAAA,CACE,EACN;AACJ,YAAA;AACE,gBAAA,QACEA,qBAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAAA,QAAA,EACrCA,qBAAC,CAAA,SAAS,IACR,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,IAAI,uBAAuB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACtD,CAAA,EAAA,CACE,EACN;SACL;AACH,KAAC,CAAC;AAEF,IAAA,QACED,sBAAA,CAAC,IAAI,EAAA,EACH,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EACvC,IAAI,EAAC,OAAO,EAAA,YAAA,EACA,aAAa,KAAK,CAAA,CAAE,EAC5B,GAAA,KAAK,aAETA,sBAAC,CAAA,IAAI,EAAC,EAAA,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,EAAA,QAAA,EAAA,CACzD,WAAW,KACVC,qBAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,WAAW,iBAAc,MAAM,EAAA,QAAA,EACpD,WAAW,EAAA,CACP,CACR,EACDA,qBAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,CAAC,EAAE,MAAM,EAAC,QAAQ,EAC3B,QAAA,EAAA,KAAK,GACD,CACF,EAAA,CAAA,EACPA,qBAAC,CAAA,SAAS,EACR,EAAA,UAAU,EAAE,kBAAkB,EAC9B,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,qBAAqB,EAC/B,kBAAkB,EAAE,mBAAmB,IAAI,WAAW,CAAC,MAAM,IAAI,CAAC,EAClE,CAAA,EACD,gBAAgB,EAAE,EAClB,YAAY,KACXA,qBAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAE,MAAM,CAAC,mBAAmB,EACzB,YAAA,EAAA,CAAA,OAAA,EAAU,KAAK,CAAS,OAAA,CAAA,EACpC,OAAO,EAAE,QAAQ,EAAA,QAAA,EAEjBA,qBAAC,CAAA,UAAU,IAAC,SAAS,EAAE,MAAM,CAAC,UAAU,EAAI,CAAA,EAAA,CACrC,CACV,CAAA,EAAA,CACI,EACP;AACJ,EAAE;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"filter-chip.js","sources":["../../../components/filter-chip/filter-chip.tsx"],"sourcesContent":["import { Cross1Icon } from '@radix-ui/react-icons';\nimport { VariantProps, cva, cx } from 'class-variance-authority';\nimport { ReactElement, ReactNode, useCallback, useState } from 'react';\nimport {\n  FilterOperation,\n  FilterOperator,\n  FilterSelectOption,\n  FilterType,\n  FilterTypes,\n  filterOperators\n} from '~/types/filters';\nimport { DatePicker } from '../calendar';\nimport { Flex } from '../flex';\nimport { InputField } from '../input-field';\nimport { Select } from '../select';\nimport { Text } from '../text';\nimport { Operation } from './filter-chip-operation';\nimport styles from './filter-chip.module.css';\n\nconst chip = cva(styles.chip, {\n  variants: {\n    variant: {\n      default: styles['chip-default'],\n      text: null\n    }\n  },\n  defaultVariants: {\n    variant: 'default'\n  }\n});\n\nexport interface FilterChipProps extends VariantProps<typeof chip> {\n  label: string;\n  value?: string;\n  onRemove?: () => void;\n  className?: string;\n  ref?: React.RefObject<HTMLDivElement>;\n  children?: ReactNode;\n  columnType?: FilterTypes;\n  options?: FilterSelectOption[];\n  onValueChange?: (value: any, operation: string) => void;\n  onOperationChange?: (operation: string) => void;\n  leadingIcon?: ReactElement;\n  operations?: FilterOperator<string>[];\n}\n\nexport const FilterChip = ({\n  label,\n  value,\n  onRemove,\n  className,\n  ref,\n  columnType = FilterType.string,\n  options = [],\n  onValueChange,\n  onOperationChange,\n  leadingIcon,\n  variant,\n  operations,\n  ...props\n}: FilterChipProps) => {\n  const computedOperations = operations?.length\n    ? operations\n    : filterOperators[columnType];\n\n  const [operation, setOperation] = useState<FilterOperation | undefined>(\n    computedOperations?.[0]\n  );\n  const [filterValue, setFilterValue] = useState<any>(value || '');\n\n  const showOnRemove = typeof onRemove === 'function';\n  const isMultiSelectColumn = columnType === FilterType.multiselect;\n\n  const handleOperationChange = useCallback(\n    (operation: FilterOperation) => {\n      setOperation(operation);\n      if (operation?.value) onOperationChange?.(operation.value);\n    },\n    [onOperationChange]\n  );\n\n  const handleFilterValueChange = useCallback(\n    (value: any) => {\n      setFilterValue(value);\n      onValueChange?.(value, operation?.value ?? '');\n    },\n    [operation, onValueChange]\n  );\n\n  const renderValueInput = () => {\n    switch (columnType) {\n      case FilterType.multiselect:\n      case FilterType.select:\n        return (\n          <Select\n            value={isMultiSelectColumn ? filterValue : filterValue.toString()}\n            onValueChange={handleFilterValueChange}\n            multiple={isMultiSelectColumn}\n          >\n            <Select.Trigger\n              iconProps={{\n                style: {\n                  display: 'none'\n                }\n              }}\n              variant='text'\n              className={cx(\n                styles.selectValue,\n                !showOnRemove && styles.selectColumn\n              )}\n            >\n              <Select.Value placeholder='Select value'>\n                {isMultiSelectColumn && filterValue.length > 1\n                  ? `${filterValue.length} selected`\n                  : undefined}\n              </Select.Value>\n            </Select.Trigger>\n            <Select.Content data-variant='filter'>\n              {options.map(opt => (\n                <Select.Item\n                  key={opt.value.toString()}\n                  value={opt.value.toString()}\n                >\n                  {opt.label}\n                </Select.Item>\n              ))}\n            </Select.Content>\n          </Select>\n        );\n      case FilterType.date:\n        return (\n          <div className={styles.dateFieldWrapper}>\n            <DatePicker\n              value={filterValue}\n              onSelect={date => handleFilterValueChange(date)}\n              showCalendarIcon={false}\n              inputFieldProps={{ className: styles.dateField }}\n            />\n          </div>\n        );\n      default:\n        return (\n          <div className={styles.inputFieldWrapper}>\n            <InputField\n              variant={variant === 'text' ? 'borderless' : 'default'}\n              className={styles.inputField}\n              value={filterValue}\n              onChange={e => handleFilterValueChange(e.target.value)}\n            />\n          </div>\n        );\n    }\n  };\n\n  return (\n    <Flex\n      align='center'\n      ref={ref}\n      className={chip({ variant, className })}\n      role='group'\n      aria-label={`Filter by ${label}`}\n      data-variant={variant}\n      {...props}\n    >\n      <Flex align='center' gap={2} className={styles['chip-label']}>\n        {leadingIcon && (\n          <span className={styles.leadingIcon} aria-hidden='true'>\n            {leadingIcon}\n          </span>\n        )}\n        <Text size={2} weight='normal'>\n          {label}\n        </Text>\n      </Flex>\n      <Operation\n        operations={computedOperations}\n        label={label}\n        value={operation}\n        onChange={handleOperationChange}\n        showAlternateLabel={isMultiSelectColumn && filterValue.length <= 1}\n      />\n      {renderValueInput()}\n      {showOnRemove && (\n        <button\n          className={styles.removeIconContainer}\n          aria-label={`Remove ${label} filter`}\n          onClick={onRemove}\n        >\n          <Cross1Icon className={styles.removeIcon} />\n        </button>\n      )}\n    </Flex>\n  );\n};\n\nFilterChip.displayName = 'FilterChip';\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/filter-chip/filter-chip.module.css.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"chip":"filter-chip-module_chip__BphAr","chip-default":"filter-chip-module_chip-default__q9QfE","chip-label":"filter-chip-module_chip-label__-ugGs","operationText":"filter-chip-module_operationText__spj1Y","value":"filter-chip-module_value__5JK-z","removeIconContainer":"filter-chip-module_removeIconContainer__W5cow","removeIcon":"filter-chip-module_removeIcon__6xmN1","selectValue":"filter-chip-module_selectValue__qtzzQ","operationValue":"filter-chip-module_operationValue__n-7CS","selectColumn":"filter-chip-module_selectColumn__uaqj2","leadingIcon":"filter-chip-module_leadingIcon__ANvl2","textFieldWrapper":"filter-chip-module_textFieldWrapper__29UIA","textField":"filter-chip-module_textField__tADFO","dateFieldWrapper":"filter-chip-module_dateFieldWrapper__fPmxI","dateField":"filter-chip-module_dateField__nxEVq","chip___default":"filter-chip-module_chip-default__q9QfE","chip___label":"filter-chip-module_chip-label__-ugGs"};
+var styles = {"chip":"filter-chip-module_chip__BphAr","chip-default":"filter-chip-module_chip-default__q9QfE","chip-label":"filter-chip-module_chip-label__-ugGs","operationText":"filter-chip-module_operationText__spj1Y","value":"filter-chip-module_value__5JK-z","removeIconContainer":"filter-chip-module_removeIconContainer__W5cow","removeIcon":"filter-chip-module_removeIcon__6xmN1","selectValue":"filter-chip-module_selectValue__qtzzQ","operationValue":"filter-chip-module_operationValue__n-7CS","selectColumn":"filter-chip-module_selectColumn__uaqj2","leadingIcon":"filter-chip-module_leadingIcon__ANvl2","inputFieldWrapper":"filter-chip-module_inputFieldWrapper__1v3SK","inputField":"filter-chip-module_inputField__0JtvK","dateFieldWrapper":"filter-chip-module_dateFieldWrapper__fPmxI","dateField":"filter-chip-module_dateField__nxEVq","chip___default":"filter-chip-module_chip-default__q9QfE","chip___label":"filter-chip-module_chip-label__-ugGs"};
 
 exports.default = styles;
 //# sourceMappingURL=filter-chip.module.css.cjs.map

package/dist/components/filter-chip/filter-chip.module.css.js

@@ -1,4 +1,4 @@
-var styles = {"chip":"filter-chip-module_chip__BphAr","chip-default":"filter-chip-module_chip-default__q9QfE","chip-label":"filter-chip-module_chip-label__-ugGs","operationText":"filter-chip-module_operationText__spj1Y","value":"filter-chip-module_value__5JK-z","removeIconContainer":"filter-chip-module_removeIconContainer__W5cow","removeIcon":"filter-chip-module_removeIcon__6xmN1","selectValue":"filter-chip-module_selectValue__qtzzQ","operationValue":"filter-chip-module_operationValue__n-7CS","selectColumn":"filter-chip-module_selectColumn__uaqj2","leadingIcon":"filter-chip-module_leadingIcon__ANvl2","textFieldWrapper":"filter-chip-module_textFieldWrapper__29UIA","textField":"filter-chip-module_textField__tADFO","dateFieldWrapper":"filter-chip-module_dateFieldWrapper__fPmxI","dateField":"filter-chip-module_dateField__nxEVq","chip___default":"filter-chip-module_chip-default__q9QfE","chip___label":"filter-chip-module_chip-label__-ugGs"};
+var styles = {"chip":"filter-chip-module_chip__BphAr","chip-default":"filter-chip-module_chip-default__q9QfE","chip-label":"filter-chip-module_chip-label__-ugGs","operationText":"filter-chip-module_operationText__spj1Y","value":"filter-chip-module_value__5JK-z","removeIconContainer":"filter-chip-module_removeIconContainer__W5cow","removeIcon":"filter-chip-module_removeIcon__6xmN1","selectValue":"filter-chip-module_selectValue__qtzzQ","operationValue":"filter-chip-module_operationValue__n-7CS","selectColumn":"filter-chip-module_selectColumn__uaqj2","leadingIcon":"filter-chip-module_leadingIcon__ANvl2","inputFieldWrapper":"filter-chip-module_inputFieldWrapper__1v3SK","inputField":"filter-chip-module_inputField__0JtvK","dateFieldWrapper":"filter-chip-module_dateFieldWrapper__fPmxI","dateField":"filter-chip-module_dateField__nxEVq","chip___default":"filter-chip-module_chip-default__q9QfE","chip___label":"filter-chip-module_chip-label__-ugGs"};
 
 export { styles as default };
 //# sourceMappingURL=filter-chip.module.css.js.map