@protonradio/proton-ui 0.11.15 → 0.11.16

package/dist/components/DataTable/DataTable.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.es.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { AriaAttributes, ReactNode, useMemo } from \"react\";\r\nimport { Table } from \"../Table/Table\";\r\nimport { Elevation } from \"../Elevation/Elevation\";\r\nimport { Tombstone } from \"../Tombstone/Tombstone\";\r\nimport { Icon } from \"../Icon/Icon\";\r\nimport \"./DataTable.css\";\r\n\r\nexport type SortDirection = \"ASC\" | \"DESC\";\r\n\r\ntype SortingConfig<T> =\r\n  | {\r\n      /** When sorting is enabled, all these props must be provided together. */\r\n      sortableColumns: string[];\r\n      sortedBy: string;\r\n      sortDirection: SortDirection;\r\n      onSort: (columnId: string, direction: SortDirection) => void;\r\n    }\r\n  | {\r\n      /** When no sorting is needed, none of these props should be provided */\r\n      sortableColumns?: never;\r\n      sortedBy?: never;\r\n      sortDirection?: never;\r\n      onSort?: never;\r\n    };\r\n\r\nexport interface DataTableColumn<T> {\r\n  /** id for the column */\r\n  id: string;\r\n  /** Header text or component */\r\n  header: ReactNode;\r\n  /** Function to render cell content from row data */\r\n  cell: (row: T) => ReactNode;\r\n  /** Whether this column should be hidden */\r\n  hidden?: boolean;\r\n}\r\n\r\ninterface BaseDataTableProps<T = any> {\r\n  /** Array of column definitions\r\n   * - {@link DataTableColumn}\r\n   */\r\n  columns: DataTableColumn<T>[];\r\n  /** Array of data objects to display. Can be empty array for loading/empty states */\r\n  data?: T[] | null;\r\n  /** Loading state */\r\n  loading?: boolean;\r\n  /** Tombstone component to use when loading */\r\n  tombstoneComponent?: ReactNode;\r\n  /** Error state */\r\n  error?: boolean | string;\r\n  /** Table name/caption for accessibility. This provides essential context for screen readers. */\r\n  name: string;\r\n  /** Callback when a row is clicked */\r\n  onRowClick?: (row: T) => void;\r\n  /** Custom empty state message */\r\n  emptyMessage?: string;\r\n  /** Custom error message */\r\n  errorMessage?: string;\r\n  /** Number of skeleton rows to show in loading state */\r\n  loadingRows?: number;\r\n  /** Test ID for testing purposes */\r\n  \"data-testid\"?: string;\r\n}\r\n\r\nexport type DataTableProps<T = any> = BaseDataTableProps<T> & SortingConfig<T>;\r\n\r\n/**\r\n * DataTable is a declarative wrapper around the base Table component that provides:\r\n *\r\n * API:\r\n *  - {@link DataTableProps}\r\n *  - {@link SortingConfig}\r\n */\r\nexport function DataTable<T = any>(props: DataTableProps<T>) {\r\n  const {\r\n    columns,\r\n    data = [],\r\n    loading = false,\r\n    tombstoneComponent,\r\n    error = false,\r\n    name,\r\n    onRowClick,\r\n    emptyMessage = \"Data Unavailable\",\r\n    errorMessage,\r\n    loadingRows = 5,\r\n    \"data-testid\": testId,\r\n  } = props;\r\n\r\n  const sortableColumns =\r\n    \"sortableColumns\" in props ? props.sortableColumns : [];\r\n  const sortedBy = \"sortedBy\" in props ? props.sortedBy : undefined;\r\n  const sortDirection =\r\n    \"sortDirection\" in props ? props.sortDirection : undefined;\r\n  const onSort = \"onSort\" in props ? props.onSort : undefined;\r\n\r\n  const visibleColumns = useMemo(\r\n    () => columns.filter((col) => !col.hidden),\r\n    [columns]\r\n  );\r\n\r\n  const handleSortClick = (column: DataTableColumn<T>) => {\r\n    if (!onSort) return;\r\n\r\n    const isCurrentlySorted = sortedBy === column.id;\r\n    const newDirection =\r\n      isCurrentlySorted && sortDirection === \"ASC\" ? \"DESC\" : \"ASC\";\r\n\r\n    onSort(column.id, newDirection);\r\n  };\r\n\r\n  const getSortState = (columnId: string): AriaAttributes[\"aria-sort\"] => {\r\n    if (sortedBy !== columnId) return \"none\";\r\n    return sortDirection === \"ASC\" ? \"ascending\" : \"descending\";\r\n  };\r\n\r\n  if (error) {\r\n    const message =\r\n      typeof error === \"string\" ? error : errorMessage || \"An error occurred\";\r\n    return (\r\n      <EmptyState\r\n        columns={visibleColumns}\r\n        message={message}\r\n        name={name}\r\n        testId={testId}\r\n        isError\r\n      />\r\n    );\r\n  }\r\n\r\n  if (loading) {\r\n    return (\r\n      <div\r\n        className=\"proton-DataTable\"\r\n        data-testid={testId}\r\n        aria-busy=\"true\"\r\n        aria-label={`Loading ${name}...`}\r\n      >\r\n        <Table name={name}>\r\n          <Table.Header>\r\n            {visibleColumns.map((column) => (\r\n              <Table.Column key={column.id} id={column.id}>\r\n                {column.header}\r\n              </Table.Column>\r\n            ))}\r\n          </Table.Header>\r\n          <Table.Body>\r\n            {Array.from({ length: loadingRows }).map((_, index) => (\r\n              <Table.Row key={`loading-${index}`}>\r\n                {visibleColumns.map((column) => (\r\n                  <Table.Cell key={column.id}>\r\n                    {tombstoneComponent || (\r\n                      <Tombstone\r\n                        height=\"1rem\"\r\n                        width={\r\n                          // cascading tombstone widths\r\n                          index % 3 === 0\r\n                            ? \"80%\"\r\n                            : index % 3 === 1\r\n                              ? \"60%\"\r\n                              : \"90%\"\r\n                        }\r\n                      />\r\n                    )}\r\n                  </Table.Cell>\r\n                ))}\r\n              </Table.Row>\r\n            ))}\r\n          </Table.Body>\r\n        </Table>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  if (!data || data.length === 0) {\r\n    return (\r\n      <EmptyState\r\n        columns={visibleColumns}\r\n        message={emptyMessage}\r\n        name={name}\r\n        testId={testId}\r\n      />\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div className=\"proton-DataTable\" data-testid={testId}>\r\n      <Table name={name}>\r\n        <Table.Header>\r\n          {visibleColumns.map((column) => {\r\n            const isSortable = sortableColumns.includes(column.id);\r\n            const sortState = getSortState(column.id);\r\n\r\n            return (\r\n              <Table.Column\r\n                key={column.id}\r\n                id={column.id}\r\n                {...(isSortable && { \"aria-sort\": sortState })}\r\n              >\r\n                <span className=\"proton-DataTable__header-content\">\r\n                  {column.header}\r\n                  {isSortable && (\r\n                    <button\r\n                      className=\"proton-DataTable__sort-button\"\r\n                      onClick={() => handleSortClick(column)}\r\n                      aria-label={`Sort by ${column.header}: ${sortState}`}\r\n                      type=\"button\"\r\n                    >\r\n                      <Icon\r\n                        id={\"chevron-up\"}\r\n                        size={12}\r\n                        color={\r\n                          sortState === \"ascending\"\r\n                            ? \"var(--proton-color__primary)\"\r\n                            : \"currentColor\"\r\n                        }\r\n                      />\r\n                    </button>\r\n                  )}\r\n                </span>\r\n              </Table.Column>\r\n            );\r\n          })}\r\n        </Table.Header>\r\n        <Table.Body>\r\n          {data.map((row, index) => {\r\n            // Generate a key from the row data or use index as fallback\r\n            const rowKey = ((row as any)?.id || (row as any)?.key) ?? index;\r\n\r\n            return (\r\n              <Table.Row\r\n                key={rowKey}\r\n                onClick={onRowClick ? () => onRowClick(row) : undefined}\r\n              >\r\n                {visibleColumns.map((column) => (\r\n                  <Table.Cell key={column.id}>{column.cell(row)}</Table.Cell>\r\n                ))}\r\n              </Table.Row>\r\n            );\r\n          })}\r\n        </Table.Body>\r\n      </Table>\r\n    </div>\r\n  );\r\n}\r\n\r\nconst EmptyState = ({\r\n  columns,\r\n  message,\r\n  name,\r\n  testId,\r\n  isError = false,\r\n}: Partial<DataTableProps> & {\r\n  testId?: string;\r\n  message: string;\r\n  isError?: boolean;\r\n}) => {\r\n  return (\r\n    <div className=\"proton-DataTable\" data-testid={testId}>\r\n      <Table name={name}>\r\n        <Table.Header>\r\n          {columns?.map((column) => (\r\n            <Table.Column key={column.id} id={column.id}>\r\n              {column.header}\r\n            </Table.Column>\r\n          ))}\r\n        </Table.Header>\r\n        <Table.Body>\r\n          <Table.Row>\r\n            <Table.Cell colSpan={columns?.length || 1}>\r\n              <div\r\n                className=\"proton-DataTable__message-cell\"\r\n                role={isError ? \"alert\" : \"status\"}\r\n                aria-live=\"polite\"\r\n              >\r\n                <Elevation>\r\n                  <div className=\"proton-DataTable__empty-cell\">{message}</div>\r\n                </Elevation>\r\n              </div>\r\n            </Table.Cell>\r\n          </Table.Row>\r\n        </Table.Body>\r\n      </Table>\r\n    </div>\r\n  );\r\n};\r\n"],"names":["DataTable","props","columns","data","loading","tombstoneComponent","error","name","onRowClick","emptyMessage","errorMessage","loadingRows","testId","sortableColumns","sortedBy","sortDirection","onSort","visibleColumns","useMemo","col","handleSortClick","column","newDirection","getSortState","columnId","message","jsx","EmptyState","jsxs","Table","_","index","Tombstone","isSortable","sortState","Icon","row","rowKey","isError","Elevation"],"mappings":"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"}
+{"version":3,"file":"DataTable.es.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["\"use client\";\n\nimport { AriaAttributes, ReactNode, useMemo } from \"react\";\nimport { Table } from \"../Table/Table\";\nimport { Elevation } from \"../Elevation/Elevation\";\nimport { Tombstone } from \"../Tombstone/Tombstone\";\nimport { Icon } from \"../Icon/Icon\";\nimport \"./DataTable.css\";\n\nexport type SortDirection = \"ASC\" | \"DESC\";\n\ntype SortingConfig<T> =\n  | {\n      /** When sorting is enabled, all these props must be provided together. */\n      sortableColumns: string[];\n      sortedBy: string;\n      sortDirection: SortDirection;\n      onSort: (columnId: string, direction: SortDirection) => void;\n    }\n  | {\n      /** When no sorting is needed, none of these props should be provided */\n      sortableColumns?: never;\n      sortedBy?: never;\n      sortDirection?: never;\n      onSort?: never;\n    };\n\nexport interface DataTableColumn<T> {\n  /** id for the column */\n  id: string;\n  /** Header text or component */\n  header: ReactNode;\n  /** Function to render cell content from row data */\n  cell: (row: T) => ReactNode;\n  /** Whether this column should be hidden */\n  hidden?: boolean;\n}\n\ninterface BaseDataTableProps<T = any> {\n  /** Array of column definitions\n   * - {@link DataTableColumn}\n   */\n  columns: DataTableColumn<T>[];\n  /** Array of data objects to display. Can be empty array for loading/empty states */\n  data?: T[] | null;\n  /** Loading state */\n  loading?: boolean;\n  /** Tombstone component to use when loading */\n  tombstoneComponent?: ReactNode;\n  /** Error state */\n  error?: boolean | string;\n  /** Table name/caption for accessibility. This provides essential context for screen readers. */\n  name: string;\n  /** Callback when a row is clicked */\n  onRowClick?: (row: T) => void;\n  /** Custom empty state message */\n  emptyMessage?: string;\n  /** Custom error message */\n  errorMessage?: string;\n  /** Number of skeleton rows to show in loading state */\n  loadingRows?: number;\n  /** Test ID for testing purposes */\n  \"data-testid\"?: string;\n}\n\nexport type DataTableProps<T = any> = BaseDataTableProps<T> & SortingConfig<T>;\n\n/**\n * DataTable is a declarative wrapper around the base Table component that provides:\n *\n * API:\n *  - {@link DataTableProps}\n *  - {@link SortingConfig}\n */\nexport function DataTable<T = any>(props: DataTableProps<T>) {\n  const {\n    columns,\n    data = [],\n    loading = false,\n    tombstoneComponent,\n    error = false,\n    name,\n    onRowClick,\n    emptyMessage = \"Data Unavailable\",\n    errorMessage,\n    loadingRows = 5,\n    \"data-testid\": testId,\n  } = props;\n\n  const sortableColumns =\n    \"sortableColumns\" in props ? props.sortableColumns : [];\n  const sortedBy = \"sortedBy\" in props ? props.sortedBy : undefined;\n  const sortDirection =\n    \"sortDirection\" in props ? props.sortDirection : undefined;\n  const onSort = \"onSort\" in props ? props.onSort : undefined;\n\n  const visibleColumns = useMemo(\n    () => columns.filter((col) => !col.hidden),\n    [columns]\n  );\n\n  const handleSortClick = (column: DataTableColumn<T>) => {\n    if (!onSort) return;\n\n    const isCurrentlySorted = sortedBy === column.id;\n    const newDirection =\n      isCurrentlySorted && sortDirection === \"ASC\" ? \"DESC\" : \"ASC\";\n\n    onSort(column.id, newDirection);\n  };\n\n  const getSortState = (columnId: string): AriaAttributes[\"aria-sort\"] => {\n    if (sortedBy !== columnId) return \"none\";\n    return sortDirection === \"ASC\" ? \"ascending\" : \"descending\";\n  };\n\n  if (error) {\n    const message =\n      typeof error === \"string\" ? error : errorMessage || \"An error occurred\";\n    return (\n      <EmptyState\n        columns={visibleColumns}\n        message={message}\n        name={name}\n        testId={testId}\n        isError\n      />\n    );\n  }\n\n  if (loading) {\n    return (\n      <div\n        className=\"proton-DataTable\"\n        data-testid={testId}\n        aria-busy=\"true\"\n        aria-label={`Loading ${name}...`}\n      >\n        <Table name={name}>\n          <Table.Header>\n            {visibleColumns.map((column) => (\n              <Table.Column key={column.id} id={column.id}>\n                {column.header}\n              </Table.Column>\n            ))}\n          </Table.Header>\n          <Table.Body>\n            {Array.from({ length: loadingRows }).map((_, index) => (\n              <Table.Row key={`loading-${index}`}>\n                {visibleColumns.map((column) => (\n                  <Table.Cell key={column.id}>\n                    {tombstoneComponent || (\n                      <Tombstone\n                        height=\"1rem\"\n                        width={\n                          // cascading tombstone widths\n                          index % 3 === 0\n                            ? \"80%\"\n                            : index % 3 === 1\n                              ? \"60%\"\n                              : \"90%\"\n                        }\n                      />\n                    )}\n                  </Table.Cell>\n                ))}\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </div>\n    );\n  }\n\n  if (!data || data.length === 0) {\n    return (\n      <EmptyState\n        columns={visibleColumns}\n        message={emptyMessage}\n        name={name}\n        testId={testId}\n      />\n    );\n  }\n\n  return (\n    <div className=\"proton-DataTable\" data-testid={testId}>\n      <Table name={name}>\n        <Table.Header>\n          {visibleColumns.map((column) => {\n            const isSortable = sortableColumns.includes(column.id);\n            const sortState = getSortState(column.id);\n\n            return (\n              <Table.Column\n                key={column.id}\n                id={column.id}\n                {...(isSortable && { \"aria-sort\": sortState })}\n              >\n                <span className=\"proton-DataTable__header-content\">\n                  {column.header}\n                  {isSortable && (\n                    <button\n                      className=\"proton-DataTable__sort-button\"\n                      onClick={() => handleSortClick(column)}\n                      aria-label={`Sort by ${column.header}: ${sortState}`}\n                      type=\"button\"\n                    >\n                      <Icon\n                        id={\"chevron-up\"}\n                        size={12}\n                        color={\n                          sortState === \"ascending\"\n                            ? \"var(--proton-color__primary)\"\n                            : \"currentColor\"\n                        }\n                      />\n                    </button>\n                  )}\n                </span>\n              </Table.Column>\n            );\n          })}\n        </Table.Header>\n        <Table.Body>\n          {data.map((row, index) => {\n            // Generate a key from the row data or use index as fallback\n            const rowKey = ((row as any)?.id || (row as any)?.key) ?? index;\n\n            return (\n              <Table.Row\n                key={rowKey}\n                onClick={onRowClick ? () => onRowClick(row) : undefined}\n              >\n                {visibleColumns.map((column) => (\n                  <Table.Cell key={column.id}>{column.cell(row)}</Table.Cell>\n                ))}\n              </Table.Row>\n            );\n          })}\n        </Table.Body>\n      </Table>\n    </div>\n  );\n}\n\nconst EmptyState = ({\n  columns,\n  message,\n  name,\n  testId,\n  isError = false,\n}: Partial<DataTableProps> & {\n  testId?: string;\n  message: string;\n  isError?: boolean;\n}) => {\n  return (\n    <div className=\"proton-DataTable\" data-testid={testId}>\n      <Table name={name}>\n        <Table.Header>\n          {columns?.map((column) => (\n            <Table.Column key={column.id} id={column.id}>\n              {column.header}\n            </Table.Column>\n          ))}\n        </Table.Header>\n        <Table.Body>\n          <Table.Row>\n            <Table.Cell colSpan={columns?.length || 1}>\n              <div\n                className=\"proton-DataTable__message-cell\"\n                role={isError ? \"alert\" : \"status\"}\n                aria-live=\"polite\"\n              >\n                <Elevation>\n                  <div className=\"proton-DataTable__empty-cell\">{message}</div>\n                </Elevation>\n              </div>\n            </Table.Cell>\n          </Table.Row>\n        </Table.Body>\n      </Table>\n    </div>\n  );\n};\n"],"names":["DataTable","props","columns","data","loading","tombstoneComponent","error","name","onRowClick","emptyMessage","errorMessage","loadingRows","testId","sortableColumns","sortedBy","sortDirection","onSort","visibleColumns","useMemo","col","handleSortClick","column","newDirection","getSortState","columnId","message","jsx","EmptyState","jsxs","Table","_","index","Tombstone","isSortable","sortState","Icon","row","rowKey","isError","Elevation"],"mappings":";;;;;;;AA0EO,SAASA,EAAmBC,GAA0B;AAC3D,QAAM;AAAA,IACJ,SAAAC;AAAA,IACA,MAAAC,IAAO,CAAA;AAAA,IACP,SAAAC,IAAU;AAAA,IACV,oBAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,MAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,cAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,eAAeC;AAAA,EAAA,IACbX,GAEEY,IACJ,qBAAqBZ,IAAQA,EAAM,kBAAkB,CAAA,GACjDa,IAAW,cAAcb,IAAQA,EAAM,WAAW,QAClDc,IACJ,mBAAmBd,IAAQA,EAAM,gBAAgB,QAC7Ce,IAAS,YAAYf,IAAQA,EAAM,SAAS,QAE5CgB,IAAiBC;AAAA,IACrB,MAAMhB,EAAQ,OAAO,CAACiB,MAAQ,CAACA,EAAI,MAAM;AAAA,IACzC,CAACjB,CAAO;AAAA,EAAA,GAGJkB,IAAkB,CAACC,MAA+B;AACtD,QAAI,CAACL,EAAQ;AAGb,UAAMM,IADoBR,MAAaO,EAAO,MAEvBN,MAAkB,QAAQ,SAAS;AAE1D,IAAAC,EAAOK,EAAO,IAAIC,CAAY;AAAA,EAChC,GAEMC,IAAe,CAACC,MAChBV,MAAaU,IAAiB,SAC3BT,MAAkB,QAAQ,cAAc;AAGjD,MAAIT,GAAO;AACT,UAAMmB,IACJ,OAAOnB,KAAU,WAAWA,IAAQI,KAAgB;AACtD,WACEgB,gBAAAA,EAAAA;AAAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAASV;AAAA,QACT,SAAAQ;AAAA,QACA,MAAAlB;AAAA,QACA,QAAAK;AAAA,QACA,SAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb;AAEA,SAAIR,IAEAsB,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAad;AAAA,MACb,aAAU;AAAA,MACV,cAAY,WAAWL,CAAI;AAAA,MAE3B,UAAAqB,gBAAAA,EAAAA,KAACC,KAAM,MAAAtB,GACL,UAAA;AAAA,QAAAmB,gBAAAA,MAACG,EAAM,QAAN,EACE,YAAe,IAAI,CAACR,MACnBK,gBAAAA,EAAAA,IAACG,EAAM,QAAN,EAA6B,IAAIR,EAAO,IACtC,UAAAA,EAAO,UADSA,EAAO,EAE1B,CACD,GACH;AAAA,QACAK,gBAAAA,EAAAA,IAACG,EAAM,MAAN,EACE,UAAA,MAAM,KAAK,EAAE,QAAQlB,EAAA,CAAa,EAAE,IAAI,CAACmB,GAAGC,MAC3CL,gBAAAA,MAACG,EAAM,KAAN,EACE,UAAAZ,EAAe,IAAI,CAACI,MACnBK,gBAAAA,EAAAA,IAACG,EAAM,MAAN,EACE,UAAAxB,KACCqB,gBAAAA,EAAAA;AAAAA,UAACM;AAAA,UAAA;AAAA,YACC,QAAO;AAAA,YACP;AAAA;AAAA,cAEED,IAAQ,MAAM,IACV,QACAA,IAAQ,MAAM,IACZ,QACA;AAAA;AAAA,UAAA;AAAA,QAAA,KAVGV,EAAO,EAcxB,CACD,KAjBa,WAAWU,CAAK,EAkBhC,CACD,EAAA,CACH;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA,IAKF,CAAC5B,KAAQA,EAAK,WAAW,IAEzBuB,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAASV;AAAA,MACT,SAASR;AAAA,MACT,MAAAF;AAAA,MACA,QAAAK;AAAA,IAAA;AAAA,EAAA,IAMJc,gBAAAA,EAAAA,IAAC,SAAI,WAAU,oBAAmB,eAAad,GAC7C,UAAAgB,gBAAAA,EAAAA,KAACC,KAAM,MAAAtB,GACL,UAAA;AAAA,IAAAmB,gBAAAA,EAAAA,IAACG,EAAM,QAAN,EACE,UAAAZ,EAAe,IAAI,CAACI,MAAW;AAC9B,YAAMY,IAAapB,EAAgB,SAASQ,EAAO,EAAE,GAC/Ca,IAAYX,EAAaF,EAAO,EAAE;AAExC,aACEK,gBAAAA,EAAAA;AAAAA,QAACG,EAAM;AAAA,QAAN;AAAA,UAEC,IAAIR,EAAO;AAAA,UACV,GAAIY,KAAc,EAAE,aAAaC,EAAA;AAAA,UAElC,UAAAN,gBAAAA,EAAAA,KAAC,QAAA,EAAK,WAAU,oCACb,UAAA;AAAA,YAAAP,EAAO;AAAA,YACPY,KACCP,gBAAAA,EAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS,MAAMN,EAAgBC,CAAM;AAAA,gBACrC,cAAY,WAAWA,EAAO,MAAM,KAAKa,CAAS;AAAA,gBAClD,MAAK;AAAA,gBAEL,UAAAR,gBAAAA,EAAAA;AAAAA,kBAACS;AAAA,kBAAA;AAAA,oBACC,IAAI;AAAA,oBACJ,MAAM;AAAA,oBACN,OACED,MAAc,cACV,iCACA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAER;AAAA,YAAA;AAAA,UACF,EAAA,CAEJ;AAAA,QAAA;AAAA,QAxBKb,EAAO;AAAA,MAAA;AAAA,IA2BlB,CAAC,EAAA,CACH;AAAA,IACAK,gBAAAA,MAACG,EAAM,MAAN,EACE,YAAK,IAAI,CAACO,GAAKL,MAAU;AAExB,YAAMM,MAAWD,KAAA,gBAAAA,EAAa,QAAOA,KAAA,gBAAAA,EAAa,SAAQL;AAE1D,aACEL,gBAAAA,EAAAA;AAAAA,QAACG,EAAM;AAAA,QAAN;AAAA,UAEC,SAASrB,IAAa,MAAMA,EAAW4B,CAAG,IAAI;AAAA,UAE7C,UAAAnB,EAAe,IAAI,CAACI,4BAClBQ,EAAM,MAAN,EAA4B,UAAAR,EAAO,KAAKe,CAAG,EAAA,GAA3Bf,EAAO,EAAsB,CAC/C;AAAA,QAAA;AAAA,QALIgB;AAAA,MAAA;AAAA,IAQX,CAAC,EAAA,CACH;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;AAEA,MAAMV,IAAa,CAAC;AAAA,EAClB,SAAAzB;AAAA,EACA,SAAAuB;AAAA,EACA,MAAAlB;AAAA,EACA,QAAAK;AAAA,EACA,SAAA0B,IAAU;AACZ,MAMIZ,gBAAAA,EAAAA,IAAC,SAAI,WAAU,oBAAmB,eAAad,GAC7C,UAAAgB,gBAAAA,EAAAA,KAACC,KAAM,MAAAtB,GACL,UAAA;AAAA,EAAAmB,gBAAAA,MAACG,EAAM,QAAN,EACE,iCAAS,IAAI,CAACR,MACbK,gBAAAA,EAAAA,IAACG,EAAM,QAAN,EAA6B,IAAIR,EAAO,IACtC,UAAAA,EAAO,UADSA,EAAO,EAE1B,IAEJ;AAAA,EACAK,gBAAAA,EAAAA,IAACG,EAAM,MAAN,EACC,gCAACA,EAAM,KAAN,EACC,UAAAH,gBAAAA,EAAAA,IAACG,EAAM,MAAN,EAAW,UAAS3B,KAAA,gBAAAA,EAAS,WAAU,GACtC,UAAAwB,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAMY,IAAU,UAAU;AAAA,MAC1B,aAAU;AAAA,MAEV,gCAACC,GAAA,EACC,UAAAb,gBAAAA,EAAAA,IAAC,SAAI,WAAU,gCAAgC,aAAQ,EAAA,CACzD;AAAA,IAAA;AAAA,EAAA,EACF,CACF,GACF,EAAA,CACF;AAAA,EAAA,CACF,EAAA,CACF;"}

package/dist/components/Dialog/Dialog.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.cjs.js","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { useRef } from \"react\";\r\nimport { type AriaDialogProps, useDialog } from \"@react-aria/dialog\";\r\n\r\nimport \"./Dialog.css\";\r\n\r\ninterface DialogProps extends AriaDialogProps {\r\n  title?: React.ReactNode;\r\n  children: React.ReactNode;\r\n}\r\n\r\n/**\r\n * Intended use in overlay containers such as modals or popovers.\r\n *\r\n * API:\r\n *  - {@link DialogProps}\r\n *  - extends {@link AriaDialogProps}\r\n */\r\nexport function Dialog({ title, children, ...props }: DialogProps) {\r\n  let ref = useRef(null);\r\n  let { dialogProps, titleProps } = useDialog(props, ref);\r\n\r\n  return (\r\n    <div {...dialogProps} ref={ref} className=\"proton-Dialog\">\r\n      {title && (\r\n        <h3 {...titleProps} className=\"proton-Dialog__header\">\r\n          {title}\r\n        </h3>\r\n      )}\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["Dialog","title","children","props","ref","useRef","dialogProps","titleProps","useDialog"],"mappings":"0QAmBO,SAASA,EAAO,CAAE,MAAAC,EAAO,SAAAC,EAAU,GAAGC,GAAsB,CAC7D,IAAAC,EAAMC,SAAO,IAAI,EACjB,CAAE,YAAAC,EAAa,WAAAC,CAAA,EAAeC,EAAAA,UAAUL,EAAOC,CAAG,EAEtD,gCACG,MAAK,CAAA,GAAGE,EAAa,IAAAF,EAAU,UAAU,gBACvC,SAAA,CAAAH,2BACE,KAAI,CAAA,GAAGM,EAAY,UAAU,wBAC3B,SACHN,EAAA,EAEDC,CACH,CAAA,CAAA,CAEJ"}
+{"version":3,"file":"Dialog.cjs.js","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef } from \"react\";\nimport { type AriaDialogProps, useDialog } from \"@react-aria/dialog\";\n\nimport \"./Dialog.css\";\n\ninterface DialogProps extends AriaDialogProps {\n  title?: React.ReactNode;\n  children: React.ReactNode;\n}\n\n/**\n * Intended use in overlay containers such as modals or popovers.\n *\n * API:\n *  - {@link DialogProps}\n *  - extends {@link AriaDialogProps}\n */\nexport function Dialog({ title, children, ...props }: DialogProps) {\n  let ref = useRef(null);\n  let { dialogProps, titleProps } = useDialog(props, ref);\n\n  return (\n    <div {...dialogProps} ref={ref} className=\"proton-Dialog\">\n      {title && (\n        <h3 {...titleProps} className=\"proton-Dialog__header\">\n          {title}\n        </h3>\n      )}\n      {children}\n    </div>\n  );\n}\n"],"names":["Dialog","title","children","props","ref","useRef","dialogProps","titleProps","useDialog"],"mappings":"0QAmBO,SAASA,EAAO,CAAE,MAAAC,EAAO,SAAAC,EAAU,GAAGC,GAAsB,CACjE,IAAIC,EAAMC,EAAAA,OAAO,IAAI,EACjB,CAAE,YAAAC,EAAa,WAAAC,CAAA,EAAeC,EAAAA,UAAUL,EAAOC,CAAG,EAEtD,gCACG,MAAA,CAAK,GAAGE,EAAa,IAAAF,EAAU,UAAU,gBACvC,SAAA,CAAAH,2BACE,KAAA,CAAI,GAAGM,EAAY,UAAU,wBAC3B,SAAAN,EACH,EAEDC,CAAA,EACH,CAEJ"}

package/dist/components/Dialog/Dialog.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.es.js","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { useRef } from \"react\";\r\nimport { type AriaDialogProps, useDialog } from \"@react-aria/dialog\";\r\n\r\nimport \"./Dialog.css\";\r\n\r\ninterface DialogProps extends AriaDialogProps {\r\n  title?: React.ReactNode;\r\n  children: React.ReactNode;\r\n}\r\n\r\n/**\r\n * Intended use in overlay containers such as modals or popovers.\r\n *\r\n * API:\r\n *  - {@link DialogProps}\r\n *  - extends {@link AriaDialogProps}\r\n */\r\nexport function Dialog({ title, children, ...props }: DialogProps) {\r\n  let ref = useRef(null);\r\n  let { dialogProps, titleProps } = useDialog(props, ref);\r\n\r\n  return (\r\n    <div {...dialogProps} ref={ref} className=\"proton-Dialog\">\r\n      {title && (\r\n        <h3 {...titleProps} className=\"proton-Dialog__header\">\r\n          {title}\r\n        </h3>\r\n      )}\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["Dialog","title","children","props","ref","useRef","dialogProps","titleProps","useDialog"],"mappings":";;;;AAmBO,SAASA,EAAO,EAAE,OAAAC,GAAO,UAAAC,GAAU,GAAGC,KAAsB;AAC7D,MAAAC,IAAMC,EAAO,IAAI,GACjB,EAAE,aAAAC,GAAa,YAAAC,EAAA,IAAeC,EAAUL,GAAOC,CAAG;AAEtD,gCACG,OAAK,EAAA,GAAGE,GAAa,KAAAF,GAAU,WAAU,iBACvC,UAAA;AAAA,IAAAH,2BACE,MAAI,EAAA,GAAGM,GAAY,WAAU,yBAC3B,UACHN,GAAA;AAAA,IAEDC;AAAA,EACH,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Dialog.es.js","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef } from \"react\";\nimport { type AriaDialogProps, useDialog } from \"@react-aria/dialog\";\n\nimport \"./Dialog.css\";\n\ninterface DialogProps extends AriaDialogProps {\n  title?: React.ReactNode;\n  children: React.ReactNode;\n}\n\n/**\n * Intended use in overlay containers such as modals or popovers.\n *\n * API:\n *  - {@link DialogProps}\n *  - extends {@link AriaDialogProps}\n */\nexport function Dialog({ title, children, ...props }: DialogProps) {\n  let ref = useRef(null);\n  let { dialogProps, titleProps } = useDialog(props, ref);\n\n  return (\n    <div {...dialogProps} ref={ref} className=\"proton-Dialog\">\n      {title && (\n        <h3 {...titleProps} className=\"proton-Dialog__header\">\n          {title}\n        </h3>\n      )}\n      {children}\n    </div>\n  );\n}\n"],"names":["Dialog","title","children","props","ref","useRef","dialogProps","titleProps","useDialog"],"mappings":";;;;AAmBO,SAASA,EAAO,EAAE,OAAAC,GAAO,UAAAC,GAAU,GAAGC,KAAsB;AACjE,MAAIC,IAAMC,EAAO,IAAI,GACjB,EAAE,aAAAC,GAAa,YAAAC,EAAA,IAAeC,EAAUL,GAAOC,CAAG;AAEtD,gCACG,OAAA,EAAK,GAAGE,GAAa,KAAAF,GAAU,WAAU,iBACvC,UAAA;AAAA,IAAAH,2BACE,MAAA,EAAI,GAAGM,GAAY,WAAU,yBAC3B,UAAAN,GACH;AAAA,IAEDC;AAAA,EAAA,GACH;AAEJ;"}

package/dist/components/Elevation/Elevation.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Elevation.cjs.js","sources":["../../../src/components/Elevation/Elevation.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { ReactNode } from \"react\";\r\nimport { transparentize, mix } from \"color2k\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\nimport \"./Elevation.css\";\r\n\r\nexport interface ElevationProps {\r\n  /**\r\n   * The content to be displayed within the elevation.\r\n   */\r\n  children?: ReactNode;\r\n  /**\r\n   * The data-testid attribute for testing purposes.\r\n  */\r\n \"data-testid\"?: string;\r\n /**\r\n  * Whether the elevation should have a background gradient.\r\n  * @important only works in custom dark mode\r\n  * @default false\r\n  */\r\n hasPrimaryGradient?: boolean;\r\n}\r\n\r\n/**\r\n * Elevation component creates a visual elevation effect using the theme-aware background color.\r\n *\r\n * This component is designed to be used as a visual layer that sits on top of other content\r\n * to create a sense of depth or hierarchy in the UI. It uses the `--proton-control__background-color-light`\r\n * CSS variable which is theme-aware and will adapt to light, dark themes.\r\n *\r\n * API:\r\n *  - {@link ElevationProps}\r\n */\r\nexport const Elevation = ({\r\n  children,\r\n  hasPrimaryGradient = false,\r\n  \"data-testid\": dataTestId,\r\n}: ElevationProps) => {\r\n  const { hasPalette, palette, style } = useTheme();\r\n\r\n  const defaultBg = style[\"--proton-control__background-color-light\"];\r\n  let primaryDark = defaultBg;\r\n  let secondaryDark = transparentize(defaultBg, 0.01);\r\n\r\n  if (hasPalette) {\r\n    primaryDark = transparentize(defaultBg, 0.1);\r\n    secondaryDark = transparentize(defaultBg, 0.12);\r\n    if (hasPrimaryGradient) {\r\n      const basePrimary = transparentize(palette.PRIMARY.MEDIUM_LIGHT, 0.88);\r\n      const baseSecondary = transparentize(palette.PRIMARY.LIGHT, 0.84);\r\n      primaryDark = mix(primaryDark, basePrimary, 0.15);\r\n      secondaryDark = mix(secondaryDark, baseSecondary, 0.15);\r\n    }\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className=\"proton-Elevation\"\r\n      data-testid={dataTestId}\r\n      role=\"presentation\"\r\n      aria-label=\"Elevated content area\"\r\n      style={{\r\n        background: `linear-gradient(to top left, ${primaryDark}, ${secondaryDark})`,\r\n      }}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n};\r\n"],"names":["Elevation","children","hasPrimaryGradient","dataTestId","hasPalette","palette","style","useTheme","defaultBg","primaryDark","secondaryDark","transparentize","basePrimary","baseSecondary","mix","jsx"],"mappings":"kSAkCO,MAAMA,EAAY,CAAC,CACxB,SAAAC,EACA,mBAAAC,EAAqB,GACrB,cAAeC,CACjB,IAAsB,CACpB,KAAM,CAAE,WAAAC,EAAY,QAAAC,EAAS,MAAAC,GAAUC,EAAS,SAAA,EAE1CC,EAAYF,EAAM,0CAA0C,EAClE,IAAIG,EAAcD,EACdE,EAAgBC,EAAAA,eAAeH,EAAW,GAAI,EAElD,GAAIJ,IACYK,EAAAE,EAAA,eAAeH,EAAW,EAAG,EAC3BE,EAAAC,EAAA,eAAeH,EAAW,GAAI,EAC1CN,GAAoB,CACtB,MAAMU,EAAcD,EAAAA,eAAeN,EAAQ,QAAQ,aAAc,GAAI,EAC/DQ,EAAgBF,EAAAA,eAAeN,EAAQ,QAAQ,MAAO,GAAI,EAClDI,EAAAK,EAAAA,IAAIL,EAAaG,EAAa,GAAI,EAChCF,EAAAI,EAAAA,IAAIJ,EAAeG,EAAe,GAAI,CACxD,CAIA,OAAAE,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,mBACV,cAAaZ,EACb,KAAK,eACL,aAAW,wBACX,MAAO,CACL,WAAY,gCAAgCM,CAAW,KAAKC,CAAa,GAC3E,EAEC,SAAAT,CAAA,CAAA,CAGP"}
+{"version":3,"file":"Elevation.cjs.js","sources":["../../../src/components/Elevation/Elevation.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { transparentize, mix } from \"color2k\";\nimport { useTheme } from \"../ThemeProvider\";\nimport \"./Elevation.css\";\n\nexport interface ElevationProps {\n  /**\n   * The content to be displayed within the elevation.\n   */\n  children?: ReactNode;\n  /**\n   * The data-testid attribute for testing purposes.\n  */\n \"data-testid\"?: string;\n /**\n  * Whether the elevation should have a background gradient.\n  * @important only works in custom dark mode\n  * @default false\n  */\n hasPrimaryGradient?: boolean;\n}\n\n/**\n * Elevation component creates a visual elevation effect using the theme-aware background color.\n *\n * This component is designed to be used as a visual layer that sits on top of other content\n * to create a sense of depth or hierarchy in the UI. It uses the `--proton-control__background-color-light`\n * CSS variable which is theme-aware and will adapt to light, dark themes.\n *\n * API:\n *  - {@link ElevationProps}\n */\nexport const Elevation = ({\n  children,\n  hasPrimaryGradient = false,\n  \"data-testid\": dataTestId,\n}: ElevationProps) => {\n  const { hasPalette, palette, style } = useTheme();\n\n  const defaultBg = style[\"--proton-control__background-color-light\"];\n  let primaryDark = defaultBg;\n  let secondaryDark = transparentize(defaultBg, 0.01);\n\n  if (hasPalette) {\n    primaryDark = transparentize(defaultBg, 0.1);\n    secondaryDark = transparentize(defaultBg, 0.12);\n    if (hasPrimaryGradient) {\n      const basePrimary = transparentize(palette.PRIMARY.MEDIUM_LIGHT, 0.88);\n      const baseSecondary = transparentize(palette.PRIMARY.LIGHT, 0.84);\n      primaryDark = mix(primaryDark, basePrimary, 0.15);\n      secondaryDark = mix(secondaryDark, baseSecondary, 0.15);\n    }\n  }\n\n  return (\n    <div\n      className=\"proton-Elevation\"\n      data-testid={dataTestId}\n      role=\"presentation\"\n      aria-label=\"Elevated content area\"\n      style={{\n        background: `linear-gradient(to top left, ${primaryDark}, ${secondaryDark})`,\n      }}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["Elevation","children","hasPrimaryGradient","dataTestId","hasPalette","palette","style","useTheme","defaultBg","primaryDark","secondaryDark","transparentize","basePrimary","baseSecondary","mix","jsx"],"mappings":"kSAkCO,MAAMA,EAAY,CAAC,CACxB,SAAAC,EACA,mBAAAC,EAAqB,GACrB,cAAeC,CACjB,IAAsB,CACpB,KAAM,CAAE,WAAAC,EAAY,QAAAC,EAAS,MAAAC,CAAA,EAAUC,EAAAA,SAAA,EAEjCC,EAAYF,EAAM,0CAA0C,EAClE,IAAIG,EAAcD,EACdE,EAAgBC,EAAAA,eAAeH,EAAW,GAAI,EAElD,GAAIJ,IACFK,EAAcE,EAAAA,eAAeH,EAAW,EAAG,EAC3CE,EAAgBC,EAAAA,eAAeH,EAAW,GAAI,EAC1CN,GAAoB,CACtB,MAAMU,EAAcD,EAAAA,eAAeN,EAAQ,QAAQ,aAAc,GAAI,EAC/DQ,EAAgBF,EAAAA,eAAeN,EAAQ,QAAQ,MAAO,GAAI,EAChEI,EAAcK,EAAAA,IAAIL,EAAaG,EAAa,GAAI,EAChDF,EAAgBI,EAAAA,IAAIJ,EAAeG,EAAe,GAAI,CACxD,CAGF,OACEE,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAU,mBACV,cAAaZ,EACb,KAAK,eACL,aAAW,wBACX,MAAO,CACL,WAAY,gCAAgCM,CAAW,KAAKC,CAAa,GAAA,EAG1E,SAAAT,CAAA,CAAA,CAGP"}

package/dist/components/Elevation/Elevation.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Elevation.es.js","sources":["../../../src/components/Elevation/Elevation.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { ReactNode } from \"react\";\r\nimport { transparentize, mix } from \"color2k\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\nimport \"./Elevation.css\";\r\n\r\nexport interface ElevationProps {\r\n  /**\r\n   * The content to be displayed within the elevation.\r\n   */\r\n  children?: ReactNode;\r\n  /**\r\n   * The data-testid attribute for testing purposes.\r\n  */\r\n \"data-testid\"?: string;\r\n /**\r\n  * Whether the elevation should have a background gradient.\r\n  * @important only works in custom dark mode\r\n  * @default false\r\n  */\r\n hasPrimaryGradient?: boolean;\r\n}\r\n\r\n/**\r\n * Elevation component creates a visual elevation effect using the theme-aware background color.\r\n *\r\n * This component is designed to be used as a visual layer that sits on top of other content\r\n * to create a sense of depth or hierarchy in the UI. It uses the `--proton-control__background-color-light`\r\n * CSS variable which is theme-aware and will adapt to light, dark themes.\r\n *\r\n * API:\r\n *  - {@link ElevationProps}\r\n */\r\nexport const Elevation = ({\r\n  children,\r\n  hasPrimaryGradient = false,\r\n  \"data-testid\": dataTestId,\r\n}: ElevationProps) => {\r\n  const { hasPalette, palette, style } = useTheme();\r\n\r\n  const defaultBg = style[\"--proton-control__background-color-light\"];\r\n  let primaryDark = defaultBg;\r\n  let secondaryDark = transparentize(defaultBg, 0.01);\r\n\r\n  if (hasPalette) {\r\n    primaryDark = transparentize(defaultBg, 0.1);\r\n    secondaryDark = transparentize(defaultBg, 0.12);\r\n    if (hasPrimaryGradient) {\r\n      const basePrimary = transparentize(palette.PRIMARY.MEDIUM_LIGHT, 0.88);\r\n      const baseSecondary = transparentize(palette.PRIMARY.LIGHT, 0.84);\r\n      primaryDark = mix(primaryDark, basePrimary, 0.15);\r\n      secondaryDark = mix(secondaryDark, baseSecondary, 0.15);\r\n    }\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className=\"proton-Elevation\"\r\n      data-testid={dataTestId}\r\n      role=\"presentation\"\r\n      aria-label=\"Elevated content area\"\r\n      style={{\r\n        background: `linear-gradient(to top left, ${primaryDark}, ${secondaryDark})`,\r\n      }}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n};\r\n"],"names":["Elevation","children","hasPrimaryGradient","dataTestId","hasPalette","palette","style","useTheme","defaultBg","primaryDark","secondaryDark","transparentize","basePrimary","baseSecondary","mix","jsx"],"mappings":";;;;AAkCO,MAAMA,IAAY,CAAC;AAAA,EACxB,UAAAC;AAAA,EACA,oBAAAC,IAAqB;AAAA,EACrB,eAAeC;AACjB,MAAsB;AACpB,QAAM,EAAE,YAAAC,GAAY,SAAAC,GAAS,OAAAC,MAAUC,EAAS,GAE1CC,IAAYF,EAAM,0CAA0C;AAClE,MAAIG,IAAcD,GACdE,IAAgBC,EAAeH,GAAW,IAAI;AAElD,MAAIJ,MACYK,IAAAE,EAAeH,GAAW,GAAG,GAC3BE,IAAAC,EAAeH,GAAW,IAAI,GAC1CN,IAAoB;AACtB,UAAMU,IAAcD,EAAeN,EAAQ,QAAQ,cAAc,IAAI,GAC/DQ,IAAgBF,EAAeN,EAAQ,QAAQ,OAAO,IAAI;AAClD,IAAAI,IAAAK,EAAIL,GAAaG,GAAa,IAAI,GAChCF,IAAAI,EAAIJ,GAAeG,GAAe,IAAI;AAAA,EACxD;AAIA,SAAAE,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAaZ;AAAA,MACb,MAAK;AAAA,MACL,cAAW;AAAA,MACX,OAAO;AAAA,QACL,YAAY,gCAAgCM,CAAW,KAAKC,CAAa;AAAA,MAC3E;AAAA,MAEC,UAAAT;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"Elevation.es.js","sources":["../../../src/components/Elevation/Elevation.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { transparentize, mix } from \"color2k\";\nimport { useTheme } from \"../ThemeProvider\";\nimport \"./Elevation.css\";\n\nexport interface ElevationProps {\n  /**\n   * The content to be displayed within the elevation.\n   */\n  children?: ReactNode;\n  /**\n   * The data-testid attribute for testing purposes.\n  */\n \"data-testid\"?: string;\n /**\n  * Whether the elevation should have a background gradient.\n  * @important only works in custom dark mode\n  * @default false\n  */\n hasPrimaryGradient?: boolean;\n}\n\n/**\n * Elevation component creates a visual elevation effect using the theme-aware background color.\n *\n * This component is designed to be used as a visual layer that sits on top of other content\n * to create a sense of depth or hierarchy in the UI. It uses the `--proton-control__background-color-light`\n * CSS variable which is theme-aware and will adapt to light, dark themes.\n *\n * API:\n *  - {@link ElevationProps}\n */\nexport const Elevation = ({\n  children,\n  hasPrimaryGradient = false,\n  \"data-testid\": dataTestId,\n}: ElevationProps) => {\n  const { hasPalette, palette, style } = useTheme();\n\n  const defaultBg = style[\"--proton-control__background-color-light\"];\n  let primaryDark = defaultBg;\n  let secondaryDark = transparentize(defaultBg, 0.01);\n\n  if (hasPalette) {\n    primaryDark = transparentize(defaultBg, 0.1);\n    secondaryDark = transparentize(defaultBg, 0.12);\n    if (hasPrimaryGradient) {\n      const basePrimary = transparentize(palette.PRIMARY.MEDIUM_LIGHT, 0.88);\n      const baseSecondary = transparentize(palette.PRIMARY.LIGHT, 0.84);\n      primaryDark = mix(primaryDark, basePrimary, 0.15);\n      secondaryDark = mix(secondaryDark, baseSecondary, 0.15);\n    }\n  }\n\n  return (\n    <div\n      className=\"proton-Elevation\"\n      data-testid={dataTestId}\n      role=\"presentation\"\n      aria-label=\"Elevated content area\"\n      style={{\n        background: `linear-gradient(to top left, ${primaryDark}, ${secondaryDark})`,\n      }}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["Elevation","children","hasPrimaryGradient","dataTestId","hasPalette","palette","style","useTheme","defaultBg","primaryDark","secondaryDark","transparentize","basePrimary","baseSecondary","mix","jsx"],"mappings":";;;;AAkCO,MAAMA,IAAY,CAAC;AAAA,EACxB,UAAAC;AAAA,EACA,oBAAAC,IAAqB;AAAA,EACrB,eAAeC;AACjB,MAAsB;AACpB,QAAM,EAAE,YAAAC,GAAY,SAAAC,GAAS,OAAAC,EAAA,IAAUC,EAAA,GAEjCC,IAAYF,EAAM,0CAA0C;AAClE,MAAIG,IAAcD,GACdE,IAAgBC,EAAeH,GAAW,IAAI;AAElD,MAAIJ,MACFK,IAAcE,EAAeH,GAAW,GAAG,GAC3CE,IAAgBC,EAAeH,GAAW,IAAI,GAC1CN,IAAoB;AACtB,UAAMU,IAAcD,EAAeN,EAAQ,QAAQ,cAAc,IAAI,GAC/DQ,IAAgBF,EAAeN,EAAQ,QAAQ,OAAO,IAAI;AAChE,IAAAI,IAAcK,EAAIL,GAAaG,GAAa,IAAI,GAChDF,IAAgBI,EAAIJ,GAAeG,GAAe,IAAI;AAAA,EACxD;AAGF,SACEE,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAaZ;AAAA,MACb,MAAK;AAAA,MACL,cAAW;AAAA,MACX,OAAO;AAAA,QACL,YAAY,gCAAgCM,CAAW,KAAKC,CAAa;AAAA,MAAA;AAAA,MAG1E,UAAAT;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/Icon/Icon.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.cjs.js","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import { SVGProps } from \"react\";\r\nimport iconURL from \"../../../assets/svg/icons.svg\";\r\n\r\ntype IconID =\r\n  | \"external-link\"\r\n  | \"caret-down\"\r\n  | \"caret-right\"\r\n  | \"chevron-right\"\r\n  | \"chevron-left\"\r\n  | \"chevron-up\"\r\n  | \"chevron-down\";\r\n\r\n/*\r\n *\r\n * 🚧 UNDER CONSTRUCTION 🚧\r\n *\r\n */\r\n\r\nexport interface IconProps {\r\n  /**\r\n   * The spritesheet ID defined in the Icons spritesheet.\r\n   */\r\n  id: IconID;\r\n\r\n  /**\r\n   * The desired width/height of the icon. Accepts any valid CSS unit.\r\n   */\r\n  size?: number | string;\r\n\r\n  /**\r\n   * The stroke color of the icon.\r\n   */\r\n  color?: string;\r\n}\r\n\r\n/**\r\n * An icon component that displays SVG icons from a sprite sheet or inline.\r\n *\r\n * API:\r\n *  - {@link IconProps}\r\n */\r\nexport function Icon(props: IconProps) {\r\n  let iconStyle = {\r\n    height: props.size || undefined,\r\n    width: props.size || undefined,\r\n    color: props.color || undefined,\r\n  };\r\n\r\n  if (props.id === \"chevron-right\") {\r\n    return <Chevron direction=\"right\" {...iconStyle} />;\r\n  }\r\n\r\n  if (props.id === \"chevron-left\") {\r\n    return <Chevron direction=\"left\" {...iconStyle} />;\r\n  }\r\n\r\n  if (props.id === \"chevron-up\") {\r\n    return <Chevron direction=\"up\" {...iconStyle} />;\r\n  }\r\n\r\n  if (props.id === \"chevron-down\") {\r\n    return <Chevron direction=\"down\" {...iconStyle} />;\r\n  }\r\n\r\n  return (\r\n    <svg style={iconStyle} {...props}>\r\n      <use href={`${iconURL}#${props.id}`} />\r\n    </svg>\r\n  );\r\n}\r\n\r\nfunction Chevron({\r\n  direction,\r\n  ...props\r\n}: {\r\n  direction: \"right\" | \"left\" | \"up\" | \"down\";\r\n} & SVGProps<SVGSVGElement>) {\r\n  const rotateMap = {\r\n    right: 0,\r\n    down: 90,\r\n    left: 180,\r\n    up: 270,\r\n  };\r\n\r\n  return (\r\n    <svg\r\n      viewBox=\"0 0 16 16\"\r\n      style={{\r\n        transform: `rotate(${rotateMap[direction]}deg)`,\r\n      }}\r\n      {...props}\r\n    >\r\n      {/* NOTE: this is the path for the \"right\" direction */}\r\n      <path\r\n        fill=\"currentColor\"\r\n        d=\"M5.74 3.2a.75.75 0 0 0-.04 1.06L9.227 8L5.7 11.74a.75.75 0 1 0 1.1 1.02l4-4.25a.75.75 0 0 0 0-1.02l-4-4.25a.75.75 0 0 0-1.06-.04\"\r\n      />\r\n    </svg>\r\n  );\r\n}\r\n"],"names":["Icon","props","iconStyle","jsx","Chevron","iconURL","direction","rotateMap"],"mappings":"8LAyCO,SAASA,EAAKC,EAAkB,CACrC,IAAIC,EAAY,CACd,OAAQD,EAAM,MAAQ,OACtB,MAAOA,EAAM,MAAQ,OACrB,MAAOA,EAAM,OAAS,MAAA,EAGpB,OAAAA,EAAM,KAAO,gBACPE,EAAAA,kBAAAA,IAAAC,EAAA,CAAQ,UAAU,QAAS,GAAGF,CAAW,CAAA,EAG/CD,EAAM,KAAO,eACPE,EAAAA,kBAAAA,IAAAC,EAAA,CAAQ,UAAU,OAAQ,GAAGF,CAAW,CAAA,EAG9CD,EAAM,KAAO,aACPE,EAAAA,kBAAAA,IAAAC,EAAA,CAAQ,UAAU,KAAM,GAAGF,CAAW,CAAA,EAG5CD,EAAM,KAAO,eACPE,EAAAA,kBAAAA,IAAAC,EAAA,CAAQ,UAAU,OAAQ,GAAGF,CAAW,CAAA,EAI/CC,EAAA,kBAAA,IAAA,MAAA,CAAI,MAAOD,EAAY,GAAGD,EACzB,SAAAE,wBAAC,MAAI,CAAA,KAAM,GAAGE,EAAAA,OAAO,IAAIJ,EAAM,EAAE,GAAI,CACvC,CAAA,CAEJ,CAEA,SAASG,EAAQ,CACf,UAAAE,EACA,GAAGL,CACL,EAE6B,CAC3B,MAAMM,EAAY,CAChB,MAAO,EACP,KAAM,GACN,KAAM,IACN,GAAI,GAAA,EAIJ,OAAAJ,EAAA,kBAAA,IAAC,MAAA,CACC,QAAQ,YACR,MAAO,CACL,UAAW,UAAUI,EAAUD,CAAS,CAAC,MAC3C,EACC,GAAGL,EAGJ,SAAAE,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,kIAAA,CACJ,CAAA,CAAA,CAGN"}
+{"version":3,"file":"Icon.cjs.js","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import { SVGProps } from \"react\";\nimport iconURL from \"../../../assets/svg/icons.svg\";\n\ntype IconID =\n  | \"external-link\"\n  | \"caret-down\"\n  | \"caret-right\"\n  | \"chevron-right\"\n  | \"chevron-left\"\n  | \"chevron-up\"\n  | \"chevron-down\";\n\n/*\n *\n * 🚧 UNDER CONSTRUCTION 🚧\n *\n */\n\nexport interface IconProps {\n  /**\n   * The spritesheet ID defined in the Icons spritesheet.\n   */\n  id: IconID;\n\n  /**\n   * The desired width/height of the icon. Accepts any valid CSS unit.\n   */\n  size?: number | string;\n\n  /**\n   * The stroke color of the icon.\n   */\n  color?: string;\n}\n\n/**\n * An icon component that displays SVG icons from a sprite sheet or inline.\n *\n * API:\n *  - {@link IconProps}\n */\nexport function Icon(props: IconProps) {\n  let iconStyle = {\n    height: props.size || undefined,\n    width: props.size || undefined,\n    color: props.color || undefined,\n  };\n\n  if (props.id === \"chevron-right\") {\n    return <Chevron direction=\"right\" {...iconStyle} />;\n  }\n\n  if (props.id === \"chevron-left\") {\n    return <Chevron direction=\"left\" {...iconStyle} />;\n  }\n\n  if (props.id === \"chevron-up\") {\n    return <Chevron direction=\"up\" {...iconStyle} />;\n  }\n\n  if (props.id === \"chevron-down\") {\n    return <Chevron direction=\"down\" {...iconStyle} />;\n  }\n\n  return (\n    <svg style={iconStyle} {...props}>\n      <use href={`${iconURL}#${props.id}`} />\n    </svg>\n  );\n}\n\nfunction Chevron({\n  direction,\n  ...props\n}: {\n  direction: \"right\" | \"left\" | \"up\" | \"down\";\n} & SVGProps<SVGSVGElement>) {\n  const rotateMap = {\n    right: 0,\n    down: 90,\n    left: 180,\n    up: 270,\n  };\n\n  return (\n    <svg\n      viewBox=\"0 0 16 16\"\n      style={{\n        transform: `rotate(${rotateMap[direction]}deg)`,\n      }}\n      {...props}\n    >\n      {/* NOTE: this is the path for the \"right\" direction */}\n      <path\n        fill=\"currentColor\"\n        d=\"M5.74 3.2a.75.75 0 0 0-.04 1.06L9.227 8L5.7 11.74a.75.75 0 1 0 1.1 1.02l4-4.25a.75.75 0 0 0 0-1.02l-4-4.25a.75.75 0 0 0-1.06-.04\"\n      />\n    </svg>\n  );\n}\n"],"names":["Icon","props","iconStyle","jsx","Chevron","iconURL","direction","rotateMap"],"mappings":"8LAyCO,SAASA,EAAKC,EAAkB,CACrC,IAAIC,EAAY,CACd,OAAQD,EAAM,MAAQ,OACtB,MAAOA,EAAM,MAAQ,OACrB,MAAOA,EAAM,OAAS,MAAA,EAGxB,OAAIA,EAAM,KAAO,gBACRE,EAAAA,kBAAAA,IAACC,EAAA,CAAQ,UAAU,QAAS,GAAGF,EAAW,EAG/CD,EAAM,KAAO,eACRE,EAAAA,kBAAAA,IAACC,EAAA,CAAQ,UAAU,OAAQ,GAAGF,EAAW,EAG9CD,EAAM,KAAO,aACRE,EAAAA,kBAAAA,IAACC,EAAA,CAAQ,UAAU,KAAM,GAAGF,EAAW,EAG5CD,EAAM,KAAO,eACRE,EAAAA,kBAAAA,IAACC,EAAA,CAAQ,UAAU,OAAQ,GAAGF,EAAW,EAIhDC,EAAAA,kBAAAA,IAAC,MAAA,CAAI,MAAOD,EAAY,GAAGD,EACzB,SAAAE,wBAAC,MAAA,CAAI,KAAM,GAAGE,EAAAA,OAAO,IAAIJ,EAAM,EAAE,GAAI,EACvC,CAEJ,CAEA,SAASG,EAAQ,CACf,UAAAE,EACA,GAAGL,CACL,EAE6B,CAC3B,MAAMM,EAAY,CAChB,MAAO,EACP,KAAM,GACN,KAAM,IACN,GAAI,GAAA,EAGN,OACEJ,EAAAA,kBAAAA,IAAC,MAAA,CACC,QAAQ,YACR,MAAO,CACL,UAAW,UAAUI,EAAUD,CAAS,CAAC,MAAA,EAE1C,GAAGL,EAGJ,SAAAE,EAAAA,kBAAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,kIAAA,CAAA,CACJ,CAAA,CAGN"}

package/dist/components/Icon/Icon.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.es.js","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import { SVGProps } from \"react\";\r\nimport iconURL from \"../../../assets/svg/icons.svg\";\r\n\r\ntype IconID =\r\n  | \"external-link\"\r\n  | \"caret-down\"\r\n  | \"caret-right\"\r\n  | \"chevron-right\"\r\n  | \"chevron-left\"\r\n  | \"chevron-up\"\r\n  | \"chevron-down\";\r\n\r\n/*\r\n *\r\n * 🚧 UNDER CONSTRUCTION 🚧\r\n *\r\n */\r\n\r\nexport interface IconProps {\r\n  /**\r\n   * The spritesheet ID defined in the Icons spritesheet.\r\n   */\r\n  id: IconID;\r\n\r\n  /**\r\n   * The desired width/height of the icon. Accepts any valid CSS unit.\r\n   */\r\n  size?: number | string;\r\n\r\n  /**\r\n   * The stroke color of the icon.\r\n   */\r\n  color?: string;\r\n}\r\n\r\n/**\r\n * An icon component that displays SVG icons from a sprite sheet or inline.\r\n *\r\n * API:\r\n *  - {@link IconProps}\r\n */\r\nexport function Icon(props: IconProps) {\r\n  let iconStyle = {\r\n    height: props.size || undefined,\r\n    width: props.size || undefined,\r\n    color: props.color || undefined,\r\n  };\r\n\r\n  if (props.id === \"chevron-right\") {\r\n    return <Chevron direction=\"right\" {...iconStyle} />;\r\n  }\r\n\r\n  if (props.id === \"chevron-left\") {\r\n    return <Chevron direction=\"left\" {...iconStyle} />;\r\n  }\r\n\r\n  if (props.id === \"chevron-up\") {\r\n    return <Chevron direction=\"up\" {...iconStyle} />;\r\n  }\r\n\r\n  if (props.id === \"chevron-down\") {\r\n    return <Chevron direction=\"down\" {...iconStyle} />;\r\n  }\r\n\r\n  return (\r\n    <svg style={iconStyle} {...props}>\r\n      <use href={`${iconURL}#${props.id}`} />\r\n    </svg>\r\n  );\r\n}\r\n\r\nfunction Chevron({\r\n  direction,\r\n  ...props\r\n}: {\r\n  direction: \"right\" | \"left\" | \"up\" | \"down\";\r\n} & SVGProps<SVGSVGElement>) {\r\n  const rotateMap = {\r\n    right: 0,\r\n    down: 90,\r\n    left: 180,\r\n    up: 270,\r\n  };\r\n\r\n  return (\r\n    <svg\r\n      viewBox=\"0 0 16 16\"\r\n      style={{\r\n        transform: `rotate(${rotateMap[direction]}deg)`,\r\n      }}\r\n      {...props}\r\n    >\r\n      {/* NOTE: this is the path for the \"right\" direction */}\r\n      <path\r\n        fill=\"currentColor\"\r\n        d=\"M5.74 3.2a.75.75 0 0 0-.04 1.06L9.227 8L5.7 11.74a.75.75 0 1 0 1.1 1.02l4-4.25a.75.75 0 0 0 0-1.02l-4-4.25a.75.75 0 0 0-1.06-.04\"\r\n      />\r\n    </svg>\r\n  );\r\n}\r\n"],"names":["Icon","props","iconStyle","jsx","Chevron","iconURL","direction","rotateMap"],"mappings":";;AAyCO,SAASA,EAAKC,GAAkB;AACrC,MAAIC,IAAY;AAAA,IACd,QAAQD,EAAM,QAAQ;AAAA,IACtB,OAAOA,EAAM,QAAQ;AAAA,IACrB,OAAOA,EAAM,SAAS;AAAA,EAAA;AAGpB,SAAAA,EAAM,OAAO,kBACPE,gBAAAA,EAAAA,IAAAC,GAAA,EAAQ,WAAU,SAAS,GAAGF,EAAW,CAAA,IAG/CD,EAAM,OAAO,iBACPE,gBAAAA,EAAAA,IAAAC,GAAA,EAAQ,WAAU,QAAQ,GAAGF,EAAW,CAAA,IAG9CD,EAAM,OAAO,eACPE,gBAAAA,EAAAA,IAAAC,GAAA,EAAQ,WAAU,MAAM,GAAGF,EAAW,CAAA,IAG5CD,EAAM,OAAO,iBACPE,gBAAAA,EAAAA,IAAAC,GAAA,EAAQ,WAAU,QAAQ,GAAGF,EAAW,CAAA,IAI/CC,gBAAAA,EAAA,IAAA,OAAA,EAAI,OAAOD,GAAY,GAAGD,GACzB,UAAAE,gBAAAA,MAAC,OAAI,EAAA,MAAM,GAAGE,CAAO,IAAIJ,EAAM,EAAE,IAAI,EACvC,CAAA;AAEJ;AAEA,SAASG,EAAQ;AAAA,EACf,WAAAE;AAAA,EACA,GAAGL;AACL,GAE6B;AAC3B,QAAMM,IAAY;AAAA,IAChB,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,IAAI;AAAA,EAAA;AAIJ,SAAAJ,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,OAAO;AAAA,QACL,WAAW,UAAUI,EAAUD,CAAS,CAAC;AAAA,MAC3C;AAAA,MACC,GAAGL;AAAA,MAGJ,UAAAE,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,GAAE;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Icon.es.js","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import { SVGProps } from \"react\";\nimport iconURL from \"../../../assets/svg/icons.svg\";\n\ntype IconID =\n  | \"external-link\"\n  | \"caret-down\"\n  | \"caret-right\"\n  | \"chevron-right\"\n  | \"chevron-left\"\n  | \"chevron-up\"\n  | \"chevron-down\";\n\n/*\n *\n * 🚧 UNDER CONSTRUCTION 🚧\n *\n */\n\nexport interface IconProps {\n  /**\n   * The spritesheet ID defined in the Icons spritesheet.\n   */\n  id: IconID;\n\n  /**\n   * The desired width/height of the icon. Accepts any valid CSS unit.\n   */\n  size?: number | string;\n\n  /**\n   * The stroke color of the icon.\n   */\n  color?: string;\n}\n\n/**\n * An icon component that displays SVG icons from a sprite sheet or inline.\n *\n * API:\n *  - {@link IconProps}\n */\nexport function Icon(props: IconProps) {\n  let iconStyle = {\n    height: props.size || undefined,\n    width: props.size || undefined,\n    color: props.color || undefined,\n  };\n\n  if (props.id === \"chevron-right\") {\n    return <Chevron direction=\"right\" {...iconStyle} />;\n  }\n\n  if (props.id === \"chevron-left\") {\n    return <Chevron direction=\"left\" {...iconStyle} />;\n  }\n\n  if (props.id === \"chevron-up\") {\n    return <Chevron direction=\"up\" {...iconStyle} />;\n  }\n\n  if (props.id === \"chevron-down\") {\n    return <Chevron direction=\"down\" {...iconStyle} />;\n  }\n\n  return (\n    <svg style={iconStyle} {...props}>\n      <use href={`${iconURL}#${props.id}`} />\n    </svg>\n  );\n}\n\nfunction Chevron({\n  direction,\n  ...props\n}: {\n  direction: \"right\" | \"left\" | \"up\" | \"down\";\n} & SVGProps<SVGSVGElement>) {\n  const rotateMap = {\n    right: 0,\n    down: 90,\n    left: 180,\n    up: 270,\n  };\n\n  return (\n    <svg\n      viewBox=\"0 0 16 16\"\n      style={{\n        transform: `rotate(${rotateMap[direction]}deg)`,\n      }}\n      {...props}\n    >\n      {/* NOTE: this is the path for the \"right\" direction */}\n      <path\n        fill=\"currentColor\"\n        d=\"M5.74 3.2a.75.75 0 0 0-.04 1.06L9.227 8L5.7 11.74a.75.75 0 1 0 1.1 1.02l4-4.25a.75.75 0 0 0 0-1.02l-4-4.25a.75.75 0 0 0-1.06-.04\"\n      />\n    </svg>\n  );\n}\n"],"names":["Icon","props","iconStyle","jsx","Chevron","iconURL","direction","rotateMap"],"mappings":";;AAyCO,SAASA,EAAKC,GAAkB;AACrC,MAAIC,IAAY;AAAA,IACd,QAAQD,EAAM,QAAQ;AAAA,IACtB,OAAOA,EAAM,QAAQ;AAAA,IACrB,OAAOA,EAAM,SAAS;AAAA,EAAA;AAGxB,SAAIA,EAAM,OAAO,kBACRE,gBAAAA,EAAAA,IAACC,GAAA,EAAQ,WAAU,SAAS,GAAGF,GAAW,IAG/CD,EAAM,OAAO,iBACRE,gBAAAA,EAAAA,IAACC,GAAA,EAAQ,WAAU,QAAQ,GAAGF,GAAW,IAG9CD,EAAM,OAAO,eACRE,gBAAAA,EAAAA,IAACC,GAAA,EAAQ,WAAU,MAAM,GAAGF,GAAW,IAG5CD,EAAM,OAAO,iBACRE,gBAAAA,EAAAA,IAACC,GAAA,EAAQ,WAAU,QAAQ,GAAGF,GAAW,IAIhDC,gBAAAA,EAAAA,IAAC,OAAA,EAAI,OAAOD,GAAY,GAAGD,GACzB,UAAAE,gBAAAA,MAAC,OAAA,EAAI,MAAM,GAAGE,CAAO,IAAIJ,EAAM,EAAE,IAAI,GACvC;AAEJ;AAEA,SAASG,EAAQ;AAAA,EACf,WAAAE;AAAA,EACA,GAAGL;AACL,GAE6B;AAC3B,QAAMM,IAAY;AAAA,IAChB,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,IAAI;AAAA,EAAA;AAGN,SACEJ,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,OAAO;AAAA,QACL,WAAW,UAAUI,EAAUD,CAAS,CAAC;AAAA,MAAA;AAAA,MAE1C,GAAGL;AAAA,MAGJ,UAAAE,gBAAAA,EAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,GAAE;AAAA,QAAA;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA;AAGN;"}

package/dist/components/ImageBackground/ImageBackground.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageBackground.cjs.js","sources":["../../../src/components/ImageBackground/ImageBackground.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport \"../ScreenOverlay/ScreenOverlay.css\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\nimport { parseToRgba } from \"color2k\";\r\n\r\ninterface ImageBackgroundProps {\r\n  /**\r\n   * Manually display a background image. Useful for server-side rendering.\r\n   * @important When using this prop, you must style your own image component appropriately.\r\n   * The component will be placed directly in the background without additional styling.\r\n   */\r\n  image?: React.ReactNode;\r\n  /**\r\n   * The URL of the image to display in the background.\r\n   * @important Client-side only. Cannot be used in Server Components.\r\n   * When using this prop, the image will be automatically styled with the background effect.\r\n   */\r\n  imageUrl?: string;\r\n  /**\r\n   * Callback function to handle the image load event.\r\n   * @important Client-side only. Cannot be used in Server Components.\r\n   */\r\n  onLoad?: (image: HTMLImageElement) => void;\r\n}\r\n\r\n/**\r\n * Calculates a background color with appropriate opacity based on the brightness of the base color.\r\n * For dark colors (sum of RGB values < 65), returns a white overlay with variable opacity.\r\n * For brighter colors, returns an empty string (no overlay needed).\r\n */\r\nconst getBgWhiteOverlayColor = (color: [number, number, number, number]) => {\r\n  const [r, g, b] = color;\r\n  const brightness = r + g + b;\r\n\r\n  // Only apply white overlay for dark backgrounds\r\n  if (brightness < 65) {\r\n    // Calculate opacity inversely proportional to brightness\r\n    // Brighter colors get less opacity, with a minimum of 0.1\r\n    const brightnessPercentage = brightness / 100;\r\n    const opacity = Math.max(0.14, 0.36 - brightnessPercentage);\r\n\r\n    return `rgba(255, 255, 255, ${opacity})`;\r\n  }\r\n\r\n  return \"\";\r\n};\r\n\r\n/**\r\n * ImageOverlay component for displaying an image with a blur effect.\r\n *\r\n * API:\r\n *  - {@link ImageBackgroundProps}\r\n */\r\nexport function ImageBackground({\r\n  image,\r\n  imageUrl = \"\",\r\n  onLoad,\r\n}: ImageBackgroundProps) {\r\n  const { palette } = useTheme();\r\n  const baseColor = parseToRgba(palette.BASE_COLOR);\r\n  const backgroundColor = getBgWhiteOverlayColor(baseColor);\r\n\r\n  return (\r\n    <div\r\n      id=\"image-background\"\r\n      aria-label=\"Background overlay\"\r\n      role=\"dialog\"\r\n      aria-modal=\"true\"\r\n      className=\"proton-ScreenOverlay__background\"\r\n    >\r\n      {image ? (\r\n        <div aria-hidden=\"true\">{image}</div>\r\n      ) : (\r\n        <img\r\n          alt=\"\" // Decorative image\r\n          src={imageUrl}\r\n          className=\"proton-ScreenOverlay__image\"\r\n          onLoad={(event) => onLoad?.(event.currentTarget)}\r\n          aria-hidden=\"true\"\r\n        />\r\n      )}\r\n      <div\r\n        className=\"proton-ScreenOverlay__blur\"\r\n        aria-hidden=\"true\"\r\n        style={{\r\n          background: backgroundColor,\r\n        }}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n"],"names":["getBgWhiteOverlayColor","color","r","g","b","brightness","brightnessPercentage","ImageBackground","image","imageUrl","onLoad","palette","useTheme","baseColor","parseToRgba","backgroundColor","jsxs","jsx","event"],"mappings":"2TA+BMA,EAA0BC,GAA4C,CAC1E,KAAM,CAACC,EAAGC,EAAGC,CAAC,EAAIH,EACZI,EAAaH,EAAIC,EAAIC,EAG3B,GAAIC,EAAa,GAAI,CAGnB,MAAMC,EAAuBD,EAAa,IAG1C,MAAO,uBAFS,KAAK,IAAI,IAAM,IAAOC,CAAoB,CAErB,GACvC,CAEO,MAAA,EACT,EAQO,SAASC,EAAgB,CAC9B,MAAAC,EACA,SAAAC,EAAW,GACX,OAAAC,CACF,EAAyB,CACjB,KAAA,CAAE,QAAAC,GAAYC,EAAAA,WACdC,EAAYC,EAAAA,YAAYH,EAAQ,UAAU,EAC1CI,EAAkBf,EAAuBa,CAAS,EAGtD,OAAAG,EAAA,kBAAA,KAAC,MAAA,CACC,GAAG,mBACH,aAAW,qBACX,KAAK,SACL,aAAW,OACX,UAAU,mCAET,SAAA,CAAAR,EACES,EAAAA,kBAAAA,IAAA,MAAA,CAAI,cAAY,OAAQ,UAAM,CAAA,EAE/BA,EAAA,kBAAA,IAAC,MAAA,CACC,IAAI,GACJ,IAAKR,EACL,UAAU,8BACV,OAASS,GAAUR,GAAA,YAAAA,EAASQ,EAAM,eAClC,cAAY,MAAA,CACd,EAEFD,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,6BACV,cAAY,OACZ,MAAO,CACL,WAAYF,CACd,CAAA,CACF,CAAA,CAAA,CAAA,CAGN"}
+{"version":3,"file":"ImageBackground.cjs.js","sources":["../../../src/components/ImageBackground/ImageBackground.tsx"],"sourcesContent":["\"use client\";\n\nimport \"../ScreenOverlay/ScreenOverlay.css\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { parseToRgba } from \"color2k\";\n\ninterface ImageBackgroundProps {\n  /**\n   * Manually display a background image. Useful for server-side rendering.\n   * @important When using this prop, you must style your own image component appropriately.\n   * The component will be placed directly in the background without additional styling.\n   */\n  image?: React.ReactNode;\n  /**\n   * The URL of the image to display in the background.\n   * @important Client-side only. Cannot be used in Server Components.\n   * When using this prop, the image will be automatically styled with the background effect.\n   */\n  imageUrl?: string;\n  /**\n   * Callback function to handle the image load event.\n   * @important Client-side only. Cannot be used in Server Components.\n   */\n  onLoad?: (image: HTMLImageElement) => void;\n}\n\n/**\n * Calculates a background color with appropriate opacity based on the brightness of the base color.\n * For dark colors (sum of RGB values < 65), returns a white overlay with variable opacity.\n * For brighter colors, returns an empty string (no overlay needed).\n */\nconst getBgWhiteOverlayColor = (color: [number, number, number, number]) => {\n  const [r, g, b] = color;\n  const brightness = r + g + b;\n\n  // Only apply white overlay for dark backgrounds\n  if (brightness < 65) {\n    // Calculate opacity inversely proportional to brightness\n    // Brighter colors get less opacity, with a minimum of 0.1\n    const brightnessPercentage = brightness / 100;\n    const opacity = Math.max(0.14, 0.36 - brightnessPercentage);\n\n    return `rgba(255, 255, 255, ${opacity})`;\n  }\n\n  return \"\";\n};\n\n/**\n * ImageOverlay component for displaying an image with a blur effect.\n *\n * API:\n *  - {@link ImageBackgroundProps}\n */\nexport function ImageBackground({\n  image,\n  imageUrl = \"\",\n  onLoad,\n}: ImageBackgroundProps) {\n  const { palette } = useTheme();\n  const baseColor = parseToRgba(palette.BASE_COLOR);\n  const backgroundColor = getBgWhiteOverlayColor(baseColor);\n\n  return (\n    <div\n      id=\"image-background\"\n      aria-label=\"Background overlay\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      className=\"proton-ScreenOverlay__background\"\n    >\n      {image ? (\n        <div aria-hidden=\"true\">{image}</div>\n      ) : (\n        <img\n          alt=\"\" // Decorative image\n          src={imageUrl}\n          className=\"proton-ScreenOverlay__image\"\n          onLoad={(event) => onLoad?.(event.currentTarget)}\n          aria-hidden=\"true\"\n        />\n      )}\n      <div\n        className=\"proton-ScreenOverlay__blur\"\n        aria-hidden=\"true\"\n        style={{\n          background: backgroundColor,\n        }}\n      />\n    </div>\n  );\n}\n"],"names":["getBgWhiteOverlayColor","color","r","g","b","brightness","brightnessPercentage","ImageBackground","image","imageUrl","onLoad","palette","useTheme","baseColor","parseToRgba","backgroundColor","jsxs","jsx","event"],"mappings":"2TA+BMA,EAA0BC,GAA4C,CAC1E,KAAM,CAACC,EAAGC,EAAGC,CAAC,EAAIH,EACZI,EAAaH,EAAIC,EAAIC,EAG3B,GAAIC,EAAa,GAAI,CAGnB,MAAMC,EAAuBD,EAAa,IAG1C,MAAO,uBAFS,KAAK,IAAI,IAAM,IAAOC,CAAoB,CAErB,GACvC,CAEA,MAAO,EACT,EAQO,SAASC,EAAgB,CAC9B,MAAAC,EACA,SAAAC,EAAW,GACX,OAAAC,CACF,EAAyB,CACvB,KAAM,CAAE,QAAAC,CAAA,EAAYC,WAAA,EACdC,EAAYC,EAAAA,YAAYH,EAAQ,UAAU,EAC1CI,EAAkBf,EAAuBa,CAAS,EAExD,OACEG,EAAAA,kBAAAA,KAAC,MAAA,CACC,GAAG,mBACH,aAAW,qBACX,KAAK,SACL,aAAW,OACX,UAAU,mCAET,SAAA,CAAAR,EACCS,EAAAA,kBAAAA,IAAC,MAAA,CAAI,cAAY,OAAQ,WAAM,EAE/BA,EAAAA,kBAAAA,IAAC,MAAA,CACC,IAAI,GACJ,IAAKR,EACL,UAAU,8BACV,OAASS,GAAUR,GAAA,YAAAA,EAASQ,EAAM,eAClC,cAAY,MAAA,CAAA,EAGhBD,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAU,6BACV,cAAY,OACZ,MAAO,CACL,WAAYF,CAAA,CACd,CAAA,CACF,CAAA,CAAA,CAGN"}

package/dist/components/ImageBackground/ImageBackground.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageBackground.es.js","sources":["../../../src/components/ImageBackground/ImageBackground.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport \"../ScreenOverlay/ScreenOverlay.css\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\nimport { parseToRgba } from \"color2k\";\r\n\r\ninterface ImageBackgroundProps {\r\n  /**\r\n   * Manually display a background image. Useful for server-side rendering.\r\n   * @important When using this prop, you must style your own image component appropriately.\r\n   * The component will be placed directly in the background without additional styling.\r\n   */\r\n  image?: React.ReactNode;\r\n  /**\r\n   * The URL of the image to display in the background.\r\n   * @important Client-side only. Cannot be used in Server Components.\r\n   * When using this prop, the image will be automatically styled with the background effect.\r\n   */\r\n  imageUrl?: string;\r\n  /**\r\n   * Callback function to handle the image load event.\r\n   * @important Client-side only. Cannot be used in Server Components.\r\n   */\r\n  onLoad?: (image: HTMLImageElement) => void;\r\n}\r\n\r\n/**\r\n * Calculates a background color with appropriate opacity based on the brightness of the base color.\r\n * For dark colors (sum of RGB values < 65), returns a white overlay with variable opacity.\r\n * For brighter colors, returns an empty string (no overlay needed).\r\n */\r\nconst getBgWhiteOverlayColor = (color: [number, number, number, number]) => {\r\n  const [r, g, b] = color;\r\n  const brightness = r + g + b;\r\n\r\n  // Only apply white overlay for dark backgrounds\r\n  if (brightness < 65) {\r\n    // Calculate opacity inversely proportional to brightness\r\n    // Brighter colors get less opacity, with a minimum of 0.1\r\n    const brightnessPercentage = brightness / 100;\r\n    const opacity = Math.max(0.14, 0.36 - brightnessPercentage);\r\n\r\n    return `rgba(255, 255, 255, ${opacity})`;\r\n  }\r\n\r\n  return \"\";\r\n};\r\n\r\n/**\r\n * ImageOverlay component for displaying an image with a blur effect.\r\n *\r\n * API:\r\n *  - {@link ImageBackgroundProps}\r\n */\r\nexport function ImageBackground({\r\n  image,\r\n  imageUrl = \"\",\r\n  onLoad,\r\n}: ImageBackgroundProps) {\r\n  const { palette } = useTheme();\r\n  const baseColor = parseToRgba(palette.BASE_COLOR);\r\n  const backgroundColor = getBgWhiteOverlayColor(baseColor);\r\n\r\n  return (\r\n    <div\r\n      id=\"image-background\"\r\n      aria-label=\"Background overlay\"\r\n      role=\"dialog\"\r\n      aria-modal=\"true\"\r\n      className=\"proton-ScreenOverlay__background\"\r\n    >\r\n      {image ? (\r\n        <div aria-hidden=\"true\">{image}</div>\r\n      ) : (\r\n        <img\r\n          alt=\"\" // Decorative image\r\n          src={imageUrl}\r\n          className=\"proton-ScreenOverlay__image\"\r\n          onLoad={(event) => onLoad?.(event.currentTarget)}\r\n          aria-hidden=\"true\"\r\n        />\r\n      )}\r\n      <div\r\n        className=\"proton-ScreenOverlay__blur\"\r\n        aria-hidden=\"true\"\r\n        style={{\r\n          background: backgroundColor,\r\n        }}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n"],"names":["getBgWhiteOverlayColor","color","r","g","b","brightness","brightnessPercentage","ImageBackground","image","imageUrl","onLoad","palette","useTheme","baseColor","parseToRgba","backgroundColor","jsxs","jsx","event"],"mappings":";;;;AA+BA,MAAMA,IAAyB,CAACC,MAA4C;AAC1E,QAAM,CAACC,GAAGC,GAAGC,CAAC,IAAIH,GACZI,IAAaH,IAAIC,IAAIC;AAG3B,MAAIC,IAAa,IAAI;AAGnB,UAAMC,IAAuBD,IAAa;AAG1C,WAAO,uBAFS,KAAK,IAAI,MAAM,OAAOC,CAAoB,CAErB;AAAA,EACvC;AAEO,SAAA;AACT;AAQO,SAASC,EAAgB;AAAA,EAC9B,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,QAAAC;AACF,GAAyB;AACjB,QAAA,EAAE,SAAAC,MAAYC,KACdC,IAAYC,EAAYH,EAAQ,UAAU,GAC1CI,IAAkBf,EAAuBa,CAAS;AAGtD,SAAAG,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,cAAW;AAAA,MACX,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAU;AAAA,MAET,UAAA;AAAA,QAAAR,IACES,gBAAAA,EAAAA,IAAA,OAAA,EAAI,eAAY,QAAQ,YAAM,CAAA,IAE/BA,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAI;AAAA,YACJ,KAAKR;AAAA,YACL,WAAU;AAAA,YACV,QAAQ,CAACS,MAAUR,KAAA,gBAAAA,EAASQ,EAAM;AAAA,YAClC,eAAY;AAAA,UAAA;AAAA,QACd;AAAA,QAEFD,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YACZ,OAAO;AAAA,cACL,YAAYF;AAAA,YACd;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"ImageBackground.es.js","sources":["../../../src/components/ImageBackground/ImageBackground.tsx"],"sourcesContent":["\"use client\";\n\nimport \"../ScreenOverlay/ScreenOverlay.css\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { parseToRgba } from \"color2k\";\n\ninterface ImageBackgroundProps {\n  /**\n   * Manually display a background image. Useful for server-side rendering.\n   * @important When using this prop, you must style your own image component appropriately.\n   * The component will be placed directly in the background without additional styling.\n   */\n  image?: React.ReactNode;\n  /**\n   * The URL of the image to display in the background.\n   * @important Client-side only. Cannot be used in Server Components.\n   * When using this prop, the image will be automatically styled with the background effect.\n   */\n  imageUrl?: string;\n  /**\n   * Callback function to handle the image load event.\n   * @important Client-side only. Cannot be used in Server Components.\n   */\n  onLoad?: (image: HTMLImageElement) => void;\n}\n\n/**\n * Calculates a background color with appropriate opacity based on the brightness of the base color.\n * For dark colors (sum of RGB values < 65), returns a white overlay with variable opacity.\n * For brighter colors, returns an empty string (no overlay needed).\n */\nconst getBgWhiteOverlayColor = (color: [number, number, number, number]) => {\n  const [r, g, b] = color;\n  const brightness = r + g + b;\n\n  // Only apply white overlay for dark backgrounds\n  if (brightness < 65) {\n    // Calculate opacity inversely proportional to brightness\n    // Brighter colors get less opacity, with a minimum of 0.1\n    const brightnessPercentage = brightness / 100;\n    const opacity = Math.max(0.14, 0.36 - brightnessPercentage);\n\n    return `rgba(255, 255, 255, ${opacity})`;\n  }\n\n  return \"\";\n};\n\n/**\n * ImageOverlay component for displaying an image with a blur effect.\n *\n * API:\n *  - {@link ImageBackgroundProps}\n */\nexport function ImageBackground({\n  image,\n  imageUrl = \"\",\n  onLoad,\n}: ImageBackgroundProps) {\n  const { palette } = useTheme();\n  const baseColor = parseToRgba(palette.BASE_COLOR);\n  const backgroundColor = getBgWhiteOverlayColor(baseColor);\n\n  return (\n    <div\n      id=\"image-background\"\n      aria-label=\"Background overlay\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      className=\"proton-ScreenOverlay__background\"\n    >\n      {image ? (\n        <div aria-hidden=\"true\">{image}</div>\n      ) : (\n        <img\n          alt=\"\" // Decorative image\n          src={imageUrl}\n          className=\"proton-ScreenOverlay__image\"\n          onLoad={(event) => onLoad?.(event.currentTarget)}\n          aria-hidden=\"true\"\n        />\n      )}\n      <div\n        className=\"proton-ScreenOverlay__blur\"\n        aria-hidden=\"true\"\n        style={{\n          background: backgroundColor,\n        }}\n      />\n    </div>\n  );\n}\n"],"names":["getBgWhiteOverlayColor","color","r","g","b","brightness","brightnessPercentage","ImageBackground","image","imageUrl","onLoad","palette","useTheme","baseColor","parseToRgba","backgroundColor","jsxs","jsx","event"],"mappings":";;;;AA+BA,MAAMA,IAAyB,CAACC,MAA4C;AAC1E,QAAM,CAACC,GAAGC,GAAGC,CAAC,IAAIH,GACZI,IAAaH,IAAIC,IAAIC;AAG3B,MAAIC,IAAa,IAAI;AAGnB,UAAMC,IAAuBD,IAAa;AAG1C,WAAO,uBAFS,KAAK,IAAI,MAAM,OAAOC,CAAoB,CAErB;AAAA,EACvC;AAEA,SAAO;AACT;AAQO,SAASC,EAAgB;AAAA,EAC9B,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,QAAAC;AACF,GAAyB;AACvB,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAA,GACdC,IAAYC,EAAYH,EAAQ,UAAU,GAC1CI,IAAkBf,EAAuBa,CAAS;AAExD,SACEG,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,cAAW;AAAA,MACX,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAU;AAAA,MAET,UAAA;AAAA,QAAAR,IACCS,gBAAAA,EAAAA,IAAC,OAAA,EAAI,eAAY,QAAQ,aAAM,IAE/BA,gBAAAA,EAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAI;AAAA,YACJ,KAAKR;AAAA,YACL,WAAU;AAAA,YACV,QAAQ,CAACS,MAAUR,KAAA,gBAAAA,EAASQ,EAAM;AAAA,YAClC,eAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAGhBD,gBAAAA,EAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YACZ,OAAO;AAAA,cACL,YAAYF;AAAA,YAAA;AAAA,UACd;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Input/BaseInput/Input.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.cjs.js","sources":["../../../../src/components/Input/BaseInput/Input.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { forwardRef, useEffect, useRef } from \"react\";\r\n\r\nimport { useTheme } from \"../../ThemeProvider\";\r\nimport { csx } from \"../../../utils\";\r\nimport \"./Input.css\";\r\nimport { copyTextToClipboard } from \"../../../utils/copy\";\r\n\r\nexport interface BaseInputProps {\r\n  /**\r\n   * onChange handler for the input\r\n   */\r\n  onChange?: (value: string) => void;\r\n\r\n  /** Whether the input is disabled. */\r\n  isDisabled?: boolean;\r\n\r\n  /** Description text shown above the input. */\r\n  description?: React.ReactNode | string;\r\n\r\n  /**\r\n   * The position of the description text.\r\n   * @default \"top\"\r\n   */\r\n  descriptionPosition?: \"top\" | \"bottom\";\r\n\r\n  /** Error state that changes the input's visual style and displays an error message. */\r\n  error?: React.ReactNode | string;\r\n\r\n  /**\r\n   * Label for the input element.\r\n   * @note When a label is provided, the input will have extra padding, and the label will float above the text input when focused or filled.\r\n   */\r\n  label?: string;\r\n\r\n  /** Test ID for the component. */\r\n  \"data-testid\"?: string;\r\n\r\n  /** Content to display before the input. Typically used for icons. */\r\n  prefix?: React.ReactNode;\r\n\r\n  /** Content to display after the input. Typically used for icons. */\r\n  suffix?: React.ReactNode;\r\n\r\n  /**\r\n   * Should the browser's autocomplete be enabled?\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\r\n   */\r\n  autoComplete?: boolean;\r\n\r\n  /**\r\n   * Should the input be autofocused?\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autofocus\r\n   */\r\n  autoFocus?: boolean;\r\n\r\n  /**\r\n   * The name attribute of the input element.\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/name\r\n   */\r\n  name: string;\r\n\r\n  /**\r\n   * The placeholder text to display when the input is empty.\r\n   * @note label takes precedence over placeholder, if both are provided.\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder\r\n   */\r\n  placeholder?: string;\r\n\r\n  /**\r\n   * The type attribute of the input element.\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/type\r\n   * @default \"text\"\r\n   */\r\n  type?: string;\r\n\r\n  /**\r\n   * The value of the input.\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value\r\n   */\r\n  value?: string;\r\n\r\n  /**\r\n   * Whether the input is required.\r\n   * @default false\r\n   */\r\n  isRequired?: boolean;\r\n\r\n  /**\r\n   * Whether the input is read-only.\r\n   * @default false\r\n   */\r\n  isReadOnly?: boolean;\r\n\r\n  /**\r\n   * Called when the input is submitted (e.g. by pressing Enter).\r\n   */\r\n  onSubmit?: React.FormEventHandler<HTMLInputElement>;\r\n\r\n  /**\r\n   * Called when the input is cleared (e.g. by pressing Escape).\r\n   */\r\n  onClear?: () => void;\r\n}\r\n\r\n/**\r\n * A controlled and customizable input component with support for labels, prefixes, suffixes, and error states.\r\n *\r\n * API:\r\n *  - {@link BaseInputProps}\r\n */\r\nexport const Input = forwardRef<HTMLInputElement, BaseInputProps>(\r\n  (\r\n    {\r\n      prefix,\r\n      suffix,\r\n      description,\r\n      descriptionPosition = \"top\",\r\n      isDisabled,\r\n      error,\r\n      onChange,\r\n      label,\r\n      name,\r\n      placeholder,\r\n      type = \"text\",\r\n      value,\r\n      autoFocus,\r\n      autoComplete,\r\n      isRequired = false,\r\n      isReadOnly = false,\r\n      onSubmit,\r\n      onClear,\r\n      \"data-testid\": testId,\r\n    },\r\n    forwardedRef: React.RefObject<HTMLInputElement>\r\n  ) => {\r\n    const inputRef = useRef<HTMLInputElement>(null);\r\n    const prefixRef = useRef<HTMLDivElement>(null);\r\n    const suffixRef = useRef<HTMLDivElement>(null);\r\n    const containerRef = useRef<HTMLDivElement>(null);\r\n    const { className } = useTheme();\r\n    const ref = forwardedRef || inputRef;\r\n\r\n    // Control dynamic prefix and suffix widths using ResizeObserver\r\n    useEffect(() => {\r\n      if (!containerRef.current) return;\r\n\r\n      const updateSizes = () => {\r\n        if (containerRef.current) {\r\n          const containerWidth = containerRef.current.offsetWidth || 200;\r\n          containerRef.current.style.setProperty(\r\n            \"--container-width\",\r\n            `${containerWidth}px`\r\n          );\r\n        }\r\n\r\n        if (prefixRef.current) {\r\n          const prefixWidth = prefixRef.current.offsetWidth || 32;\r\n          containerRef.current?.style.setProperty(\r\n            \"--prefix-width\",\r\n            `${prefixWidth}px`\r\n          );\r\n        }\r\n\r\n        if (suffixRef.current) {\r\n          const suffixWidth = suffixRef.current.offsetWidth || 32;\r\n          containerRef.current?.style.setProperty(\r\n            \"--suffix-width\",\r\n            `${suffixWidth}px`\r\n          );\r\n        }\r\n      };\r\n\r\n      updateSizes();\r\n\r\n      const resizeObserver = new ResizeObserver(updateSizes);\r\n\r\n      if (containerRef.current) {\r\n        resizeObserver.observe(containerRef.current);\r\n      }\r\n      if (prefixRef.current) {\r\n        resizeObserver.observe(prefixRef.current);\r\n      }\r\n      if (suffixRef.current) {\r\n        resizeObserver.observe(suffixRef.current);\r\n      }\r\n\r\n      return () => {\r\n        resizeObserver.disconnect();\r\n      };\r\n    }, [prefix, suffix]);\r\n\r\n    const inputId = `${name}-input`;\r\n    const errorId = `${name}-error`;\r\n    const descriptionId = `${name}-description`;\r\n\r\n    return (\r\n      <div ref={containerRef}>\r\n        {description && descriptionPosition === \"top\" && (\r\n          <div\r\n            id={descriptionId}\r\n            className=\"proton-Input__text\"\r\n            aria-live=\"polite\"\r\n          >\r\n            {description}\r\n          </div>\r\n        )}\r\n        <div className={csx(\r\n          \"proton-Input__container-inner\",\r\n          prefix && \"proton-Input__has-prefix\",\r\n          suffix && \"proton-Input__has-suffix\"\r\n        )}>\r\n          {prefix && (\r\n            <div\r\n              ref={prefixRef}\r\n              className={csx(\r\n                \"proton-Input__descriptor\",\r\n                \"proton-Input__prefix\"\r\n              )}\r\n            >\r\n              {prefix}\r\n            </div>\r\n          )}\r\n\r\n          <input\r\n            id={inputId}\r\n            name={name}\r\n            type={type}\r\n            value={value}\r\n            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\r\n              onChange?.(e.target.value);\r\n            }}\r\n            onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\r\n              switch (e.key) {\r\n                case \"Enter\":\r\n                  if (onSubmit) {\r\n                    e.preventDefault();\r\n                    onSubmit(e);\r\n                  }\r\n                  break;\r\n                case \"Escape\":\r\n                  if (onClear) {\r\n                    e.preventDefault();\r\n                    onClear();\r\n                  }\r\n                  break;\r\n              }\r\n            }}\r\n            onCopy={async () =>\r\n              await copyTextToClipboard(inputRef.current?.value)\r\n            }\r\n            disabled={isDisabled}\r\n            readOnly={isReadOnly}\r\n            required={isRequired}\r\n            autoFocus={autoFocus}\r\n            autoComplete={autoComplete ? \"on\" : \"off\"}\r\n            placeholder={label ? undefined : placeholder}\r\n            aria-label={label || name}\r\n            aria-invalid={Boolean(error)}\r\n            aria-errormessage={typeof error === \"string\" ? error : errorId}\r\n            aria-required={isRequired}\r\n            aria-readonly={isReadOnly}\r\n            aria-describedby={\r\n              error ? errorId : description ? descriptionId : undefined\r\n            }\r\n            aria-disabled={isDisabled}\r\n            data-testid={testId}\r\n            ref={ref}\r\n            className={csx(\r\n              \"proton-Input\",\r\n              error && \"proton-Input--error\",\r\n              label && \"proton-Input__label-top\",\r\n              className\r\n            )}\r\n          />\r\n\r\n          <label\r\n            htmlFor={inputId}\r\n            className={csx(\r\n              \"proton-Input__label\",\r\n              value && \"proton-Input__label--filled\"\r\n            )}\r\n          >\r\n            {label}\r\n            {isRequired && <span aria-hidden=\"true\"> *</span>}\r\n          </label>\r\n\r\n          {suffix && (\r\n            <div\r\n              ref={suffixRef}\r\n              className={csx(\r\n                \"proton-Input__descriptor\",\r\n                \"proton-Input__suffix\"\r\n              )}\r\n            >\r\n              {suffix}\r\n            </div>\r\n          )}\r\n        </div>\r\n\r\n        {error ? (\r\n          <div\r\n            role=\"alert\"\r\n            className={csx(\"proton-Input__error\", \"proton-Input__text\")}\r\n            id={errorId}\r\n          >\r\n            {error}\r\n          </div>\r\n        ) : description && descriptionPosition === \"bottom\" ? (\r\n          <div\r\n            id={descriptionId}\r\n            className=\"proton-Input__text\"\r\n            aria-live=\"polite\"\r\n          >\r\n            {description}\r\n          </div>\r\n        ) : null}\r\n      </div>\r\n    );\r\n  }\r\n);\r\n\r\nInput.displayName = \"ProtonUIInput\";\r\n"],"names":["Input","forwardRef","prefix","suffix","description","descriptionPosition","isDisabled","error","onChange","label","name","placeholder","type","value","autoFocus","autoComplete","isRequired","isReadOnly","onSubmit","onClear","testId","forwardedRef","inputRef","useRef","prefixRef","suffixRef","containerRef","className","useTheme","ref","useEffect","updateSizes","containerWidth","prefixWidth","_a","suffixWidth","_b","resizeObserver","inputId","errorId","descriptionId","jsxs","jsx","csx","e","copyTextToClipboard"],"mappings":"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"}
+{"version":3,"file":"Input.cjs.js","sources":["../../../../src/components/Input/BaseInput/Input.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { forwardRef, useEffect, useRef } from \"react\";\n\nimport { useTheme } from \"../../ThemeProvider\";\nimport { csx } from \"../../../utils\";\nimport \"./Input.css\";\nimport { copyTextToClipboard } from \"../../../utils/copy\";\n\nexport interface BaseInputProps {\n  /**\n   * onChange handler for the input\n   */\n  onChange?: (value: string) => void;\n\n  /** Whether the input is disabled. */\n  isDisabled?: boolean;\n\n  /** Description text shown above the input. */\n  description?: React.ReactNode | string;\n\n  /**\n   * The position of the description text.\n   * @default \"top\"\n   */\n  descriptionPosition?: \"top\" | \"bottom\";\n\n  /** Error state that changes the input's visual style and displays an error message. */\n  error?: React.ReactNode | string;\n\n  /**\n   * Label for the input element.\n   * @note When a label is provided, the input will have extra padding, and the label will float above the text input when focused or filled.\n   */\n  label?: string;\n\n  /** Test ID for the component. */\n  \"data-testid\"?: string;\n\n  /** Content to display before the input. Typically used for icons. */\n  prefix?: React.ReactNode;\n\n  /** Content to display after the input. Typically used for icons. */\n  suffix?: React.ReactNode;\n\n  /**\n   * Should the browser's autocomplete be enabled?\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n   */\n  autoComplete?: boolean;\n\n  /**\n   * Should the input be autofocused?\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autofocus\n   */\n  autoFocus?: boolean;\n\n  /**\n   * The name attribute of the input element.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/name\n   */\n  name: string;\n\n  /**\n   * The placeholder text to display when the input is empty.\n   * @note label takes precedence over placeholder, if both are provided.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder\n   */\n  placeholder?: string;\n\n  /**\n   * The type attribute of the input element.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/type\n   * @default \"text\"\n   */\n  type?: string;\n\n  /**\n   * The value of the input.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value\n   */\n  value?: string;\n\n  /**\n   * Whether the input is required.\n   * @default false\n   */\n  isRequired?: boolean;\n\n  /**\n   * Whether the input is read-only.\n   * @default false\n   */\n  isReadOnly?: boolean;\n\n  /**\n   * Called when the input is submitted (e.g. by pressing Enter).\n   */\n  onSubmit?: React.FormEventHandler<HTMLInputElement>;\n\n  /**\n   * Called when the input is cleared (e.g. by pressing Escape).\n   */\n  onClear?: () => void;\n}\n\n/**\n * A controlled and customizable input component with support for labels, prefixes, suffixes, and error states.\n *\n * API:\n *  - {@link BaseInputProps}\n */\nexport const Input = forwardRef<HTMLInputElement, BaseInputProps>(\n  (\n    {\n      prefix,\n      suffix,\n      description,\n      descriptionPosition = \"top\",\n      isDisabled,\n      error,\n      onChange,\n      label,\n      name,\n      placeholder,\n      type = \"text\",\n      value,\n      autoFocus,\n      autoComplete,\n      isRequired = false,\n      isReadOnly = false,\n      onSubmit,\n      onClear,\n      \"data-testid\": testId,\n    },\n    forwardedRef: React.RefObject<HTMLInputElement>\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const prefixRef = useRef<HTMLDivElement>(null);\n    const suffixRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const { className } = useTheme();\n    const ref = forwardedRef || inputRef;\n\n    // Control dynamic prefix and suffix widths using ResizeObserver\n    useEffect(() => {\n      if (!containerRef.current) return;\n\n      const updateSizes = () => {\n        if (containerRef.current) {\n          const containerWidth = containerRef.current.offsetWidth || 200;\n          containerRef.current.style.setProperty(\n            \"--container-width\",\n            `${containerWidth}px`\n          );\n        }\n\n        if (prefixRef.current) {\n          const prefixWidth = prefixRef.current.offsetWidth || 32;\n          containerRef.current?.style.setProperty(\n            \"--prefix-width\",\n            `${prefixWidth}px`\n          );\n        }\n\n        if (suffixRef.current) {\n          const suffixWidth = suffixRef.current.offsetWidth || 32;\n          containerRef.current?.style.setProperty(\n            \"--suffix-width\",\n            `${suffixWidth}px`\n          );\n        }\n      };\n\n      updateSizes();\n\n      const resizeObserver = new ResizeObserver(updateSizes);\n\n      if (containerRef.current) {\n        resizeObserver.observe(containerRef.current);\n      }\n      if (prefixRef.current) {\n        resizeObserver.observe(prefixRef.current);\n      }\n      if (suffixRef.current) {\n        resizeObserver.observe(suffixRef.current);\n      }\n\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }, [prefix, suffix]);\n\n    const inputId = `${name}-input`;\n    const errorId = `${name}-error`;\n    const descriptionId = `${name}-description`;\n\n    return (\n      <div ref={containerRef}>\n        {description && descriptionPosition === \"top\" && (\n          <div\n            id={descriptionId}\n            className=\"proton-Input__text\"\n            aria-live=\"polite\"\n          >\n            {description}\n          </div>\n        )}\n        <div className={csx(\n          \"proton-Input__container-inner\",\n          prefix && \"proton-Input__has-prefix\",\n          suffix && \"proton-Input__has-suffix\"\n        )}>\n          {prefix && (\n            <div\n              ref={prefixRef}\n              className={csx(\n                \"proton-Input__descriptor\",\n                \"proton-Input__prefix\"\n              )}\n            >\n              {prefix}\n            </div>\n          )}\n\n          <input\n            id={inputId}\n            name={name}\n            type={type}\n            value={value}\n            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n              onChange?.(e.target.value);\n            }}\n            onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\n              switch (e.key) {\n                case \"Enter\":\n                  if (onSubmit) {\n                    e.preventDefault();\n                    onSubmit(e);\n                  }\n                  break;\n                case \"Escape\":\n                  if (onClear) {\n                    e.preventDefault();\n                    onClear();\n                  }\n                  break;\n              }\n            }}\n            onCopy={async () =>\n              await copyTextToClipboard(inputRef.current?.value)\n            }\n            disabled={isDisabled}\n            readOnly={isReadOnly}\n            required={isRequired}\n            autoFocus={autoFocus}\n            autoComplete={autoComplete ? \"on\" : \"off\"}\n            placeholder={label ? undefined : placeholder}\n            aria-label={label || name}\n            aria-invalid={Boolean(error)}\n            aria-errormessage={typeof error === \"string\" ? error : errorId}\n            aria-required={isRequired}\n            aria-readonly={isReadOnly}\n            aria-describedby={\n              error ? errorId : description ? descriptionId : undefined\n            }\n            aria-disabled={isDisabled}\n            data-testid={testId}\n            ref={ref}\n            className={csx(\n              \"proton-Input\",\n              error && \"proton-Input--error\",\n              label && \"proton-Input__label-top\",\n              className\n            )}\n          />\n\n          <label\n            htmlFor={inputId}\n            className={csx(\n              \"proton-Input__label\",\n              value && \"proton-Input__label--filled\"\n            )}\n          >\n            {label}\n            {isRequired && <span aria-hidden=\"true\"> *</span>}\n          </label>\n\n          {suffix && (\n            <div\n              ref={suffixRef}\n              className={csx(\n                \"proton-Input__descriptor\",\n                \"proton-Input__suffix\"\n              )}\n            >\n              {suffix}\n            </div>\n          )}\n        </div>\n\n        {error ? (\n          <div\n            role=\"alert\"\n            className={csx(\"proton-Input__error\", \"proton-Input__text\")}\n            id={errorId}\n          >\n            {error}\n          </div>\n        ) : description && descriptionPosition === \"bottom\" ? (\n          <div\n            id={descriptionId}\n            className=\"proton-Input__text\"\n            aria-live=\"polite\"\n          >\n            {description}\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n);\n\nInput.displayName = \"ProtonUIInput\";\n"],"names":["Input","forwardRef","prefix","suffix","description","descriptionPosition","isDisabled","error","onChange","label","name","placeholder","type","value","autoFocus","autoComplete","isRequired","isReadOnly","onSubmit","onClear","testId","forwardedRef","inputRef","useRef","prefixRef","suffixRef","containerRef","className","useTheme","ref","useEffect","updateSizes","containerWidth","prefixWidth","_a","suffixWidth","_b","resizeObserver","inputId","errorId","descriptionId","jsxs","jsx","csx","e","copyTextToClipboard"],"mappings":"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"}

package/dist/components/Input/BaseInput/Input.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.es.js","sources":["../../../../src/components/Input/BaseInput/Input.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { forwardRef, useEffect, useRef } from \"react\";\r\n\r\nimport { useTheme } from \"../../ThemeProvider\";\r\nimport { csx } from \"../../../utils\";\r\nimport \"./Input.css\";\r\nimport { copyTextToClipboard } from \"../../../utils/copy\";\r\n\r\nexport interface BaseInputProps {\r\n  /**\r\n   * onChange handler for the input\r\n   */\r\n  onChange?: (value: string) => void;\r\n\r\n  /** Whether the input is disabled. */\r\n  isDisabled?: boolean;\r\n\r\n  /** Description text shown above the input. */\r\n  description?: React.ReactNode | string;\r\n\r\n  /**\r\n   * The position of the description text.\r\n   * @default \"top\"\r\n   */\r\n  descriptionPosition?: \"top\" | \"bottom\";\r\n\r\n  /** Error state that changes the input's visual style and displays an error message. */\r\n  error?: React.ReactNode | string;\r\n\r\n  /**\r\n   * Label for the input element.\r\n   * @note When a label is provided, the input will have extra padding, and the label will float above the text input when focused or filled.\r\n   */\r\n  label?: string;\r\n\r\n  /** Test ID for the component. */\r\n  \"data-testid\"?: string;\r\n\r\n  /** Content to display before the input. Typically used for icons. */\r\n  prefix?: React.ReactNode;\r\n\r\n  /** Content to display after the input. Typically used for icons. */\r\n  suffix?: React.ReactNode;\r\n\r\n  /**\r\n   * Should the browser's autocomplete be enabled?\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\r\n   */\r\n  autoComplete?: boolean;\r\n\r\n  /**\r\n   * Should the input be autofocused?\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autofocus\r\n   */\r\n  autoFocus?: boolean;\r\n\r\n  /**\r\n   * The name attribute of the input element.\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/name\r\n   */\r\n  name: string;\r\n\r\n  /**\r\n   * The placeholder text to display when the input is empty.\r\n   * @note label takes precedence over placeholder, if both are provided.\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder\r\n   */\r\n  placeholder?: string;\r\n\r\n  /**\r\n   * The type attribute of the input element.\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/type\r\n   * @default \"text\"\r\n   */\r\n  type?: string;\r\n\r\n  /**\r\n   * The value of the input.\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value\r\n   */\r\n  value?: string;\r\n\r\n  /**\r\n   * Whether the input is required.\r\n   * @default false\r\n   */\r\n  isRequired?: boolean;\r\n\r\n  /**\r\n   * Whether the input is read-only.\r\n   * @default false\r\n   */\r\n  isReadOnly?: boolean;\r\n\r\n  /**\r\n   * Called when the input is submitted (e.g. by pressing Enter).\r\n   */\r\n  onSubmit?: React.FormEventHandler<HTMLInputElement>;\r\n\r\n  /**\r\n   * Called when the input is cleared (e.g. by pressing Escape).\r\n   */\r\n  onClear?: () => void;\r\n}\r\n\r\n/**\r\n * A controlled and customizable input component with support for labels, prefixes, suffixes, and error states.\r\n *\r\n * API:\r\n *  - {@link BaseInputProps}\r\n */\r\nexport const Input = forwardRef<HTMLInputElement, BaseInputProps>(\r\n  (\r\n    {\r\n      prefix,\r\n      suffix,\r\n      description,\r\n      descriptionPosition = \"top\",\r\n      isDisabled,\r\n      error,\r\n      onChange,\r\n      label,\r\n      name,\r\n      placeholder,\r\n      type = \"text\",\r\n      value,\r\n      autoFocus,\r\n      autoComplete,\r\n      isRequired = false,\r\n      isReadOnly = false,\r\n      onSubmit,\r\n      onClear,\r\n      \"data-testid\": testId,\r\n    },\r\n    forwardedRef: React.RefObject<HTMLInputElement>\r\n  ) => {\r\n    const inputRef = useRef<HTMLInputElement>(null);\r\n    const prefixRef = useRef<HTMLDivElement>(null);\r\n    const suffixRef = useRef<HTMLDivElement>(null);\r\n    const containerRef = useRef<HTMLDivElement>(null);\r\n    const { className } = useTheme();\r\n    const ref = forwardedRef || inputRef;\r\n\r\n    // Control dynamic prefix and suffix widths using ResizeObserver\r\n    useEffect(() => {\r\n      if (!containerRef.current) return;\r\n\r\n      const updateSizes = () => {\r\n        if (containerRef.current) {\r\n          const containerWidth = containerRef.current.offsetWidth || 200;\r\n          containerRef.current.style.setProperty(\r\n            \"--container-width\",\r\n            `${containerWidth}px`\r\n          );\r\n        }\r\n\r\n        if (prefixRef.current) {\r\n          const prefixWidth = prefixRef.current.offsetWidth || 32;\r\n          containerRef.current?.style.setProperty(\r\n            \"--prefix-width\",\r\n            `${prefixWidth}px`\r\n          );\r\n        }\r\n\r\n        if (suffixRef.current) {\r\n          const suffixWidth = suffixRef.current.offsetWidth || 32;\r\n          containerRef.current?.style.setProperty(\r\n            \"--suffix-width\",\r\n            `${suffixWidth}px`\r\n          );\r\n        }\r\n      };\r\n\r\n      updateSizes();\r\n\r\n      const resizeObserver = new ResizeObserver(updateSizes);\r\n\r\n      if (containerRef.current) {\r\n        resizeObserver.observe(containerRef.current);\r\n      }\r\n      if (prefixRef.current) {\r\n        resizeObserver.observe(prefixRef.current);\r\n      }\r\n      if (suffixRef.current) {\r\n        resizeObserver.observe(suffixRef.current);\r\n      }\r\n\r\n      return () => {\r\n        resizeObserver.disconnect();\r\n      };\r\n    }, [prefix, suffix]);\r\n\r\n    const inputId = `${name}-input`;\r\n    const errorId = `${name}-error`;\r\n    const descriptionId = `${name}-description`;\r\n\r\n    return (\r\n      <div ref={containerRef}>\r\n        {description && descriptionPosition === \"top\" && (\r\n          <div\r\n            id={descriptionId}\r\n            className=\"proton-Input__text\"\r\n            aria-live=\"polite\"\r\n          >\r\n            {description}\r\n          </div>\r\n        )}\r\n        <div className={csx(\r\n          \"proton-Input__container-inner\",\r\n          prefix && \"proton-Input__has-prefix\",\r\n          suffix && \"proton-Input__has-suffix\"\r\n        )}>\r\n          {prefix && (\r\n            <div\r\n              ref={prefixRef}\r\n              className={csx(\r\n                \"proton-Input__descriptor\",\r\n                \"proton-Input__prefix\"\r\n              )}\r\n            >\r\n              {prefix}\r\n            </div>\r\n          )}\r\n\r\n          <input\r\n            id={inputId}\r\n            name={name}\r\n            type={type}\r\n            value={value}\r\n            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\r\n              onChange?.(e.target.value);\r\n            }}\r\n            onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\r\n              switch (e.key) {\r\n                case \"Enter\":\r\n                  if (onSubmit) {\r\n                    e.preventDefault();\r\n                    onSubmit(e);\r\n                  }\r\n                  break;\r\n                case \"Escape\":\r\n                  if (onClear) {\r\n                    e.preventDefault();\r\n                    onClear();\r\n                  }\r\n                  break;\r\n              }\r\n            }}\r\n            onCopy={async () =>\r\n              await copyTextToClipboard(inputRef.current?.value)\r\n            }\r\n            disabled={isDisabled}\r\n            readOnly={isReadOnly}\r\n            required={isRequired}\r\n            autoFocus={autoFocus}\r\n            autoComplete={autoComplete ? \"on\" : \"off\"}\r\n            placeholder={label ? undefined : placeholder}\r\n            aria-label={label || name}\r\n            aria-invalid={Boolean(error)}\r\n            aria-errormessage={typeof error === \"string\" ? error : errorId}\r\n            aria-required={isRequired}\r\n            aria-readonly={isReadOnly}\r\n            aria-describedby={\r\n              error ? errorId : description ? descriptionId : undefined\r\n            }\r\n            aria-disabled={isDisabled}\r\n            data-testid={testId}\r\n            ref={ref}\r\n            className={csx(\r\n              \"proton-Input\",\r\n              error && \"proton-Input--error\",\r\n              label && \"proton-Input__label-top\",\r\n              className\r\n            )}\r\n          />\r\n\r\n          <label\r\n            htmlFor={inputId}\r\n            className={csx(\r\n              \"proton-Input__label\",\r\n              value && \"proton-Input__label--filled\"\r\n            )}\r\n          >\r\n            {label}\r\n            {isRequired && <span aria-hidden=\"true\"> *</span>}\r\n          </label>\r\n\r\n          {suffix && (\r\n            <div\r\n              ref={suffixRef}\r\n              className={csx(\r\n                \"proton-Input__descriptor\",\r\n                \"proton-Input__suffix\"\r\n              )}\r\n            >\r\n              {suffix}\r\n            </div>\r\n          )}\r\n        </div>\r\n\r\n        {error ? (\r\n          <div\r\n            role=\"alert\"\r\n            className={csx(\"proton-Input__error\", \"proton-Input__text\")}\r\n            id={errorId}\r\n          >\r\n            {error}\r\n          </div>\r\n        ) : description && descriptionPosition === \"bottom\" ? (\r\n          <div\r\n            id={descriptionId}\r\n            className=\"proton-Input__text\"\r\n            aria-live=\"polite\"\r\n          >\r\n            {description}\r\n          </div>\r\n        ) : null}\r\n      </div>\r\n    );\r\n  }\r\n);\r\n\r\nInput.displayName = \"ProtonUIInput\";\r\n"],"names":["Input","forwardRef","prefix","suffix","description","descriptionPosition","isDisabled","error","onChange","label","name","placeholder","type","value","autoFocus","autoComplete","isRequired","isReadOnly","onSubmit","onClear","testId","forwardedRef","inputRef","useRef","prefixRef","suffixRef","containerRef","className","useTheme","ref","useEffect","updateSizes","containerWidth","prefixWidth","_a","suffixWidth","_b","resizeObserver","inputId","errorId","descriptionId","jsxs","jsx","csx","e","copyTextToClipboard"],"mappings":";;;;;;AAgHO,MAAMA,IAAQC;AAAA,EACnB,CACE;AAAA,IACE,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,aAAAC;AAAA,IACA,qBAAAC,IAAsB;AAAA,IACtB,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,aAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,YAAAC,IAAa;AAAA,IACb,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,eAAeC;AAAA,KAEjBC,MACG;AACG,UAAAC,IAAWC,EAAyB,IAAI,GACxCC,IAAYD,EAAuB,IAAI,GACvCE,IAAYF,EAAuB,IAAI,GACvCG,IAAeH,EAAuB,IAAI,GAC1C,EAAE,WAAAI,MAAcC,KAChBC,IAAMR,KAAgBC;AAG5B,IAAAQ,EAAU,MAAM;AACV,UAAA,CAACJ,EAAa,QAAS;AAE3B,YAAMK,IAAc,MAAM;;AACxB,YAAIL,EAAa,SAAS;AAClB,gBAAAM,IAAiBN,EAAa,QAAQ,eAAe;AAC3D,UAAAA,EAAa,QAAQ,MAAM;AAAA,YACzB;AAAA,YACA,GAAGM,CAAc;AAAA,UAAA;AAAA,QAErB;AAEA,YAAIR,EAAU,SAAS;AACf,gBAAAS,IAAcT,EAAU,QAAQ,eAAe;AACrD,WAAAU,IAAAR,EAAa,YAAb,QAAAQ,EAAsB,MAAM;AAAA,YAC1B;AAAA,YACA,GAAGD,CAAW;AAAA;AAAA,QAElB;AAEA,YAAIR,EAAU,SAAS;AACf,gBAAAU,IAAcV,EAAU,QAAQ,eAAe;AACrD,WAAAW,IAAAV,EAAa,YAAb,QAAAU,EAAsB,MAAM;AAAA,YAC1B;AAAA,YACA,GAAGD,CAAW;AAAA;AAAA,QAElB;AAAA,MAAA;AAGU,MAAAJ;AAEN,YAAAM,IAAiB,IAAI,eAAeN,CAAW;AAErD,aAAIL,EAAa,WACAW,EAAA,QAAQX,EAAa,OAAO,GAEzCF,EAAU,WACGa,EAAA,QAAQb,EAAU,OAAO,GAEtCC,EAAU,WACGY,EAAA,QAAQZ,EAAU,OAAO,GAGnC,MAAM;AACX,QAAAY,EAAe,WAAW;AAAA,MAAA;AAAA,IAC5B,GACC,CAACnC,GAAQC,CAAM,CAAC;AAEb,UAAAmC,IAAU,GAAG5B,CAAI,UACjB6B,IAAU,GAAG7B,CAAI,UACjB8B,IAAgB,GAAG9B,CAAI;AAG3B,WAAA+B,gBAAAA,EAAA,KAAC,OAAI,EAAA,KAAKf,GACP,UAAA;AAAA,MAAAtB,KAAeC,MAAwB,SACtCqC,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIF;AAAA,UACJ,WAAU;AAAA,UACV,aAAU;AAAA,UAET,UAAApC;AAAA,QAAA;AAAA,MACH;AAAA,MAEFqC,gBAAAA,OAAC,SAAI,WAAWE;AAAA,QACd;AAAA,QACAzC,KAAU;AAAA,QACVC,KAAU;AAAA,MAET,GAAA,UAAA;AAAA,QACCD,KAAAwC,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKlB;AAAA,YACL,WAAWmB;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YAEC,UAAAzC;AAAA,UAAA;AAAA,QACH;AAAA,QAGFwC,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAIJ;AAAA,YACJ,MAAA5B;AAAA,YACA,MAAAE;AAAA,YACA,OAAAC;AAAA,YACA,UAAU,CAAC+B,MAA2C;AACzC,cAAApC,KAAA,QAAAA,EAAAoC,EAAE,OAAO;AAAA,YACtB;AAAA,YACA,WAAW,CAACA,MAA6C;AACvD,sBAAQA,EAAE,KAAK;AAAA,gBACb,KAAK;AACH,kBAAI1B,MACF0B,EAAE,eAAe,GACjB1B,EAAS0B,CAAC;AAEZ;AAAA,gBACF,KAAK;AACH,kBAAIzB,MACFyB,EAAE,eAAe,GACTzB;AAEV;AAAA,cACJ;AAAA,YACF;AAAA,YACA,QAAQ,YAAA;;AACN,2BAAM0B,GAAoBX,IAAAZ,EAAS,YAAT,gBAAAY,EAAkB,KAAK;AAAA;AAAA,YAEnD,UAAU5B;AAAA,YACV,UAAUW;AAAA,YACV,UAAUD;AAAA,YACV,WAAAF;AAAA,YACA,cAAcC,IAAe,OAAO;AAAA,YACpC,aAAaN,IAAQ,SAAYE;AAAA,YACjC,cAAYF,KAASC;AAAA,YACrB,gBAAc,EAAQH;AAAA,YACtB,qBAAmB,OAAOA,KAAU,WAAWA,IAAQgC;AAAA,YACvD,iBAAevB;AAAA,YACf,iBAAeC;AAAA,YACf,oBACEV,IAAQgC,IAAUnC,IAAcoC,IAAgB;AAAA,YAElD,iBAAelC;AAAA,YACf,eAAac;AAAA,YACb,KAAAS;AAAA,YACA,WAAWc;AAAA,cACT;AAAA,cACApC,KAAS;AAAA,cACTE,KAAS;AAAA,cACTkB;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,QAEAc,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAASH;AAAA,YACT,WAAWK;AAAA,cACT;AAAA,cACA9B,KAAS;AAAA,YACX;AAAA,YAEC,UAAA;AAAA,cAAAJ;AAAA,cACAO,KAAc0B,gBAAAA,EAAA,IAAC,QAAK,EAAA,eAAY,QAAO,UAAE,MAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAC5C;AAAA,QAECvC,KACCuC,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKjB;AAAA,YACL,WAAWkB;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YAEC,UAAAxC;AAAA,UAAA;AAAA,QACH;AAAA,MAAA,GAEJ;AAAA,MAECI,IACCmC,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWC,EAAI,uBAAuB,oBAAoB;AAAA,UAC1D,IAAIJ;AAAA,UAEH,UAAAhC;AAAA,QAAA;AAAA,MAAA,IAEDH,KAAeC,MAAwB,WACzCqC,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIF;AAAA,UACJ,WAAU;AAAA,UACV,aAAU;AAAA,UAET,UAAApC;AAAA,QAAA;AAAA,MAAA,IAED;AAAA,IACN,EAAA,CAAA;AAAA,EAEJ;AACF;AAEAJ,EAAM,cAAc;"}
+{"version":3,"file":"Input.es.js","sources":["../../../../src/components/Input/BaseInput/Input.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { forwardRef, useEffect, useRef } from \"react\";\n\nimport { useTheme } from \"../../ThemeProvider\";\nimport { csx } from \"../../../utils\";\nimport \"./Input.css\";\nimport { copyTextToClipboard } from \"../../../utils/copy\";\n\nexport interface BaseInputProps {\n  /**\n   * onChange handler for the input\n   */\n  onChange?: (value: string) => void;\n\n  /** Whether the input is disabled. */\n  isDisabled?: boolean;\n\n  /** Description text shown above the input. */\n  description?: React.ReactNode | string;\n\n  /**\n   * The position of the description text.\n   * @default \"top\"\n   */\n  descriptionPosition?: \"top\" | \"bottom\";\n\n  /** Error state that changes the input's visual style and displays an error message. */\n  error?: React.ReactNode | string;\n\n  /**\n   * Label for the input element.\n   * @note When a label is provided, the input will have extra padding, and the label will float above the text input when focused or filled.\n   */\n  label?: string;\n\n  /** Test ID for the component. */\n  \"data-testid\"?: string;\n\n  /** Content to display before the input. Typically used for icons. */\n  prefix?: React.ReactNode;\n\n  /** Content to display after the input. Typically used for icons. */\n  suffix?: React.ReactNode;\n\n  /**\n   * Should the browser's autocomplete be enabled?\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n   */\n  autoComplete?: boolean;\n\n  /**\n   * Should the input be autofocused?\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autofocus\n   */\n  autoFocus?: boolean;\n\n  /**\n   * The name attribute of the input element.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/name\n   */\n  name: string;\n\n  /**\n   * The placeholder text to display when the input is empty.\n   * @note label takes precedence over placeholder, if both are provided.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder\n   */\n  placeholder?: string;\n\n  /**\n   * The type attribute of the input element.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/type\n   * @default \"text\"\n   */\n  type?: string;\n\n  /**\n   * The value of the input.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value\n   */\n  value?: string;\n\n  /**\n   * Whether the input is required.\n   * @default false\n   */\n  isRequired?: boolean;\n\n  /**\n   * Whether the input is read-only.\n   * @default false\n   */\n  isReadOnly?: boolean;\n\n  /**\n   * Called when the input is submitted (e.g. by pressing Enter).\n   */\n  onSubmit?: React.FormEventHandler<HTMLInputElement>;\n\n  /**\n   * Called when the input is cleared (e.g. by pressing Escape).\n   */\n  onClear?: () => void;\n}\n\n/**\n * A controlled and customizable input component with support for labels, prefixes, suffixes, and error states.\n *\n * API:\n *  - {@link BaseInputProps}\n */\nexport const Input = forwardRef<HTMLInputElement, BaseInputProps>(\n  (\n    {\n      prefix,\n      suffix,\n      description,\n      descriptionPosition = \"top\",\n      isDisabled,\n      error,\n      onChange,\n      label,\n      name,\n      placeholder,\n      type = \"text\",\n      value,\n      autoFocus,\n      autoComplete,\n      isRequired = false,\n      isReadOnly = false,\n      onSubmit,\n      onClear,\n      \"data-testid\": testId,\n    },\n    forwardedRef: React.RefObject<HTMLInputElement>\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const prefixRef = useRef<HTMLDivElement>(null);\n    const suffixRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const { className } = useTheme();\n    const ref = forwardedRef || inputRef;\n\n    // Control dynamic prefix and suffix widths using ResizeObserver\n    useEffect(() => {\n      if (!containerRef.current) return;\n\n      const updateSizes = () => {\n        if (containerRef.current) {\n          const containerWidth = containerRef.current.offsetWidth || 200;\n          containerRef.current.style.setProperty(\n            \"--container-width\",\n            `${containerWidth}px`\n          );\n        }\n\n        if (prefixRef.current) {\n          const prefixWidth = prefixRef.current.offsetWidth || 32;\n          containerRef.current?.style.setProperty(\n            \"--prefix-width\",\n            `${prefixWidth}px`\n          );\n        }\n\n        if (suffixRef.current) {\n          const suffixWidth = suffixRef.current.offsetWidth || 32;\n          containerRef.current?.style.setProperty(\n            \"--suffix-width\",\n            `${suffixWidth}px`\n          );\n        }\n      };\n\n      updateSizes();\n\n      const resizeObserver = new ResizeObserver(updateSizes);\n\n      if (containerRef.current) {\n        resizeObserver.observe(containerRef.current);\n      }\n      if (prefixRef.current) {\n        resizeObserver.observe(prefixRef.current);\n      }\n      if (suffixRef.current) {\n        resizeObserver.observe(suffixRef.current);\n      }\n\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }, [prefix, suffix]);\n\n    const inputId = `${name}-input`;\n    const errorId = `${name}-error`;\n    const descriptionId = `${name}-description`;\n\n    return (\n      <div ref={containerRef}>\n        {description && descriptionPosition === \"top\" && (\n          <div\n            id={descriptionId}\n            className=\"proton-Input__text\"\n            aria-live=\"polite\"\n          >\n            {description}\n          </div>\n        )}\n        <div className={csx(\n          \"proton-Input__container-inner\",\n          prefix && \"proton-Input__has-prefix\",\n          suffix && \"proton-Input__has-suffix\"\n        )}>\n          {prefix && (\n            <div\n              ref={prefixRef}\n              className={csx(\n                \"proton-Input__descriptor\",\n                \"proton-Input__prefix\"\n              )}\n            >\n              {prefix}\n            </div>\n          )}\n\n          <input\n            id={inputId}\n            name={name}\n            type={type}\n            value={value}\n            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n              onChange?.(e.target.value);\n            }}\n            onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\n              switch (e.key) {\n                case \"Enter\":\n                  if (onSubmit) {\n                    e.preventDefault();\n                    onSubmit(e);\n                  }\n                  break;\n                case \"Escape\":\n                  if (onClear) {\n                    e.preventDefault();\n                    onClear();\n                  }\n                  break;\n              }\n            }}\n            onCopy={async () =>\n              await copyTextToClipboard(inputRef.current?.value)\n            }\n            disabled={isDisabled}\n            readOnly={isReadOnly}\n            required={isRequired}\n            autoFocus={autoFocus}\n            autoComplete={autoComplete ? \"on\" : \"off\"}\n            placeholder={label ? undefined : placeholder}\n            aria-label={label || name}\n            aria-invalid={Boolean(error)}\n            aria-errormessage={typeof error === \"string\" ? error : errorId}\n            aria-required={isRequired}\n            aria-readonly={isReadOnly}\n            aria-describedby={\n              error ? errorId : description ? descriptionId : undefined\n            }\n            aria-disabled={isDisabled}\n            data-testid={testId}\n            ref={ref}\n            className={csx(\n              \"proton-Input\",\n              error && \"proton-Input--error\",\n              label && \"proton-Input__label-top\",\n              className\n            )}\n          />\n\n          <label\n            htmlFor={inputId}\n            className={csx(\n              \"proton-Input__label\",\n              value && \"proton-Input__label--filled\"\n            )}\n          >\n            {label}\n            {isRequired && <span aria-hidden=\"true\"> *</span>}\n          </label>\n\n          {suffix && (\n            <div\n              ref={suffixRef}\n              className={csx(\n                \"proton-Input__descriptor\",\n                \"proton-Input__suffix\"\n              )}\n            >\n              {suffix}\n            </div>\n          )}\n        </div>\n\n        {error ? (\n          <div\n            role=\"alert\"\n            className={csx(\"proton-Input__error\", \"proton-Input__text\")}\n            id={errorId}\n          >\n            {error}\n          </div>\n        ) : description && descriptionPosition === \"bottom\" ? (\n          <div\n            id={descriptionId}\n            className=\"proton-Input__text\"\n            aria-live=\"polite\"\n          >\n            {description}\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n);\n\nInput.displayName = \"ProtonUIInput\";\n"],"names":["Input","forwardRef","prefix","suffix","description","descriptionPosition","isDisabled","error","onChange","label","name","placeholder","type","value","autoFocus","autoComplete","isRequired","isReadOnly","onSubmit","onClear","testId","forwardedRef","inputRef","useRef","prefixRef","suffixRef","containerRef","className","useTheme","ref","useEffect","updateSizes","containerWidth","prefixWidth","_a","suffixWidth","_b","resizeObserver","inputId","errorId","descriptionId","jsxs","jsx","csx","e","copyTextToClipboard"],"mappings":"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"}

package/dist/components/Input/CopyInput/CopyInput.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyInput.cjs.js","sources":["../../../../src/components/Input/CopyInput/CopyInput.tsx"],"sourcesContent":["import { useState } from \"react\";\r\nimport { csx } from \"../../../utils\";\r\nimport { copyTextToClipboard } from \"../../../utils/copy\";\r\nimport { Input } from \"../BaseInput/Input\";\r\nimport \"./CopyInput.css\";\r\n\r\nexport interface CopyInputProps {\r\n  /** The name of the input field */\r\n  name: string;\r\n\r\n  /** The value to display in the input and copy to clipboard */\r\n  value: string;\r\n\r\n  /** Whether the input is disabled */\r\n  isDisabled?: boolean;\r\n\r\n  /** Optional callback when copy fails, receives the error object */\r\n  onError?: (error: Error) => void;\r\n\r\n  /** Optional callback when copy succeeds */\r\n  onSuccess?: () => void;\r\n}\r\n\r\n/**\r\n * Input with a button to copy value to the clipboard.\r\n *\r\n * API:\r\n *  - {@link CopyInputProps}\r\n */\r\nexport function CopyInput({\r\n  name,\r\n  value,\r\n  isDisabled,\r\n  onError,\r\n  onSuccess,\r\n}: CopyInputProps) {\r\n  const [isCopied, setCopied] = useState(false);\r\n\r\n  return (\r\n    <Input\r\n      name={name}\r\n      value={value}\r\n      isDisabled={isDisabled}\r\n      suffix={\r\n        <CopyButton\r\n          isCopied={isCopied}\r\n          onClick={async () => {\r\n            const copySuccess = await copyTextToClipboard(value, onError);\r\n            if (!copySuccess) return;\r\n\r\n            setCopied(true);\r\n            onSuccess?.();\r\n            setTimeout(() => setCopied(false), 5000);\r\n          }}\r\n        />\r\n      }\r\n    />\r\n  );\r\n}\r\n\r\nconst CopyButton = ({ isCopied, onClick }) => {\r\n  return (\r\n    <div className=\"proton-CopyInput-button-container\" onClick={onClick}>\r\n      <button\r\n        data-testid=\"COPY_BUTTON\"\r\n        className={csx(\r\n          \"proton-CopyInput-button\",\r\n          isCopied && \"proton-CopyInput-button--copied\"\r\n        )}\r\n      >\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"12\"\r\n          height=\"12\"\r\n          viewBox=\"0 0 512 512\"\r\n        >\r\n          <path\r\n            fill=\"currentColor\"\r\n            d=\"M408 480H184a72 72 0 0 1-72-72V184a72 72 0 0 1 72-72h224a72 72 0 0 1 72 72v224a72 72 0 0 1-72 72\"\r\n          />\r\n          <path\r\n            fill=\"currentColor\"\r\n            d=\"M160 80h235.88A72.12 72.12 0 0 0 328 32H104a72 72 0 0 0-72 72v224a72.12 72.12 0 0 0 48 67.88V160a80 80 0 0 1 80-80\"\r\n          />\r\n        </svg>\r\n        <span\r\n          className={csx(\r\n            \"proton-CopyInput-button-text\",\r\n            isCopied && \"proton-CopyInput-button-text--copied\"\r\n          )}\r\n        >\r\n          {isCopied ? \"Copied!\" : \"Copy\"}\r\n        </span>\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n"],"names":["CopyInput","name","value","isDisabled","onError","onSuccess","isCopied","setCopied","useState","jsx","Input","CopyButton","copyTextToClipboard","onClick","jsxs","csx"],"mappings":"sUA6BO,SAASA,EAAU,CACxB,KAAAC,EACA,MAAAC,EACA,WAAAC,EACA,QAAAC,EACA,UAAAC,CACF,EAAmB,CACjB,KAAM,CAACC,EAAUC,CAAS,EAAIC,WAAS,EAAK,EAG1C,OAAAC,EAAA,kBAAA,IAACC,EAAA,MAAA,CACC,KAAAT,EACA,MAAAC,EACA,WAAAC,EACA,OACEM,EAAA,kBAAA,IAACE,EAAA,CACC,SAAAL,EACA,QAAS,SAAY,CACC,MAAMM,EAAAA,oBAAoBV,EAAOE,CAAO,IAG5DG,EAAU,EAAI,EACFF,GAAA,MAAAA,IACZ,WAAW,IAAME,EAAU,EAAK,EAAG,GAAI,EACzC,CAAA,CACF,CAAA,CAAA,CAIR,CAEA,MAAMI,EAAa,CAAC,CAAE,SAAAL,EAAU,QAAAO,KAE3BJ,EAAAA,kBAAAA,IAAA,MAAA,CAAI,UAAU,oCAAoC,QAAAI,EACjD,SAAAC,EAAA,kBAAA,KAAC,SAAA,CACC,cAAY,cACZ,UAAWC,EAAA,IACT,0BACAT,GAAY,iCACd,EAEA,SAAA,CAAAQ,EAAA,kBAAA,KAAC,MAAA,CACC,MAAM,6BACN,MAAM,KACN,OAAO,KACP,QAAQ,cAER,SAAA,CAAAL,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,kGAAA,CACJ,EACAA,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,oHAAA,CACJ,CAAA,CAAA,CACF,EACAA,EAAA,kBAAA,IAAC,OAAA,CACC,UAAWM,EAAA,IACT,+BACAT,GAAY,sCACd,EAEC,WAAW,UAAY,MAAA,CAC1B,CAAA,CAAA,CAEJ,CAAA,CAAA"}
+{"version":3,"file":"CopyInput.cjs.js","sources":["../../../../src/components/Input/CopyInput/CopyInput.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { csx } from \"../../../utils\";\nimport { copyTextToClipboard } from \"../../../utils/copy\";\nimport { Input } from \"../BaseInput/Input\";\nimport \"./CopyInput.css\";\n\nexport interface CopyInputProps {\n  /** The name of the input field */\n  name: string;\n\n  /** The value to display in the input and copy to clipboard */\n  value: string;\n\n  /** Whether the input is disabled */\n  isDisabled?: boolean;\n\n  /** Optional callback when copy fails, receives the error object */\n  onError?: (error: Error) => void;\n\n  /** Optional callback when copy succeeds */\n  onSuccess?: () => void;\n}\n\n/**\n * Input with a button to copy value to the clipboard.\n *\n * API:\n *  - {@link CopyInputProps}\n */\nexport function CopyInput({\n  name,\n  value,\n  isDisabled,\n  onError,\n  onSuccess,\n}: CopyInputProps) {\n  const [isCopied, setCopied] = useState(false);\n\n  return (\n    <Input\n      name={name}\n      value={value}\n      isDisabled={isDisabled}\n      suffix={\n        <CopyButton\n          isCopied={isCopied}\n          onClick={async () => {\n            const copySuccess = await copyTextToClipboard(value, onError);\n            if (!copySuccess) return;\n\n            setCopied(true);\n            onSuccess?.();\n            setTimeout(() => setCopied(false), 5000);\n          }}\n        />\n      }\n    />\n  );\n}\n\nconst CopyButton = ({ isCopied, onClick }) => {\n  return (\n    <div className=\"proton-CopyInput-button-container\" onClick={onClick}>\n      <button\n        data-testid=\"COPY_BUTTON\"\n        className={csx(\n          \"proton-CopyInput-button\",\n          isCopied && \"proton-CopyInput-button--copied\"\n        )}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 512 512\"\n        >\n          <path\n            fill=\"currentColor\"\n            d=\"M408 480H184a72 72 0 0 1-72-72V184a72 72 0 0 1 72-72h224a72 72 0 0 1 72 72v224a72 72 0 0 1-72 72\"\n          />\n          <path\n            fill=\"currentColor\"\n            d=\"M160 80h235.88A72.12 72.12 0 0 0 328 32H104a72 72 0 0 0-72 72v224a72.12 72.12 0 0 0 48 67.88V160a80 80 0 0 1 80-80\"\n          />\n        </svg>\n        <span\n          className={csx(\n            \"proton-CopyInput-button-text\",\n            isCopied && \"proton-CopyInput-button-text--copied\"\n          )}\n        >\n          {isCopied ? \"Copied!\" : \"Copy\"}\n        </span>\n      </button>\n    </div>\n  );\n};\n"],"names":["CopyInput","name","value","isDisabled","onError","onSuccess","isCopied","setCopied","useState","jsx","Input","CopyButton","copyTextToClipboard","onClick","jsxs","csx"],"mappings":"sUA6BO,SAASA,EAAU,CACxB,KAAAC,EACA,MAAAC,EACA,WAAAC,EACA,QAAAC,EACA,UAAAC,CACF,EAAmB,CACjB,KAAM,CAACC,EAAUC,CAAS,EAAIC,EAAAA,SAAS,EAAK,EAE5C,OACEC,EAAAA,kBAAAA,IAACC,EAAAA,MAAA,CACC,KAAAT,EACA,MAAAC,EACA,WAAAC,EACA,OACEM,EAAAA,kBAAAA,IAACE,EAAA,CACC,SAAAL,EACA,QAAS,SAAY,CACC,MAAMM,sBAAoBV,EAAOE,CAAO,IAG5DG,EAAU,EAAI,EACdF,GAAA,MAAAA,IACA,WAAW,IAAME,EAAU,EAAK,EAAG,GAAI,EACzC,CAAA,CAAA,CACF,CAAA,CAIR,CAEA,MAAMI,EAAa,CAAC,CAAE,SAAAL,EAAU,QAAAO,KAE5BJ,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,oCAAoC,QAAAI,EACjD,SAAAC,EAAAA,kBAAAA,KAAC,SAAA,CACC,cAAY,cACZ,UAAWC,EAAAA,IACT,0BACAT,GAAY,iCAAA,EAGd,SAAA,CAAAQ,EAAAA,kBAAAA,KAAC,MAAA,CACC,MAAM,6BACN,MAAM,KACN,OAAO,KACP,QAAQ,cAER,SAAA,CAAAL,EAAAA,kBAAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,kGAAA,CAAA,EAEJA,EAAAA,kBAAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,oHAAA,CAAA,CACJ,CAAA,CAAA,EAEFA,EAAAA,kBAAAA,IAAC,OAAA,CACC,UAAWM,EAAAA,IACT,+BACAT,GAAY,sCAAA,EAGb,WAAW,UAAY,MAAA,CAAA,CAC1B,CAAA,CAAA,EAEJ"}

package/dist/components/Input/CopyInput/CopyInput.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyInput.es.js","sources":["../../../../src/components/Input/CopyInput/CopyInput.tsx"],"sourcesContent":["import { useState } from \"react\";\r\nimport { csx } from \"../../../utils\";\r\nimport { copyTextToClipboard } from \"../../../utils/copy\";\r\nimport { Input } from \"../BaseInput/Input\";\r\nimport \"./CopyInput.css\";\r\n\r\nexport interface CopyInputProps {\r\n  /** The name of the input field */\r\n  name: string;\r\n\r\n  /** The value to display in the input and copy to clipboard */\r\n  value: string;\r\n\r\n  /** Whether the input is disabled */\r\n  isDisabled?: boolean;\r\n\r\n  /** Optional callback when copy fails, receives the error object */\r\n  onError?: (error: Error) => void;\r\n\r\n  /** Optional callback when copy succeeds */\r\n  onSuccess?: () => void;\r\n}\r\n\r\n/**\r\n * Input with a button to copy value to the clipboard.\r\n *\r\n * API:\r\n *  - {@link CopyInputProps}\r\n */\r\nexport function CopyInput({\r\n  name,\r\n  value,\r\n  isDisabled,\r\n  onError,\r\n  onSuccess,\r\n}: CopyInputProps) {\r\n  const [isCopied, setCopied] = useState(false);\r\n\r\n  return (\r\n    <Input\r\n      name={name}\r\n      value={value}\r\n      isDisabled={isDisabled}\r\n      suffix={\r\n        <CopyButton\r\n          isCopied={isCopied}\r\n          onClick={async () => {\r\n            const copySuccess = await copyTextToClipboard(value, onError);\r\n            if (!copySuccess) return;\r\n\r\n            setCopied(true);\r\n            onSuccess?.();\r\n            setTimeout(() => setCopied(false), 5000);\r\n          }}\r\n        />\r\n      }\r\n    />\r\n  );\r\n}\r\n\r\nconst CopyButton = ({ isCopied, onClick }) => {\r\n  return (\r\n    <div className=\"proton-CopyInput-button-container\" onClick={onClick}>\r\n      <button\r\n        data-testid=\"COPY_BUTTON\"\r\n        className={csx(\r\n          \"proton-CopyInput-button\",\r\n          isCopied && \"proton-CopyInput-button--copied\"\r\n        )}\r\n      >\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"12\"\r\n          height=\"12\"\r\n          viewBox=\"0 0 512 512\"\r\n        >\r\n          <path\r\n            fill=\"currentColor\"\r\n            d=\"M408 480H184a72 72 0 0 1-72-72V184a72 72 0 0 1 72-72h224a72 72 0 0 1 72 72v224a72 72 0 0 1-72 72\"\r\n          />\r\n          <path\r\n            fill=\"currentColor\"\r\n            d=\"M160 80h235.88A72.12 72.12 0 0 0 328 32H104a72 72 0 0 0-72 72v224a72.12 72.12 0 0 0 48 67.88V160a80 80 0 0 1 80-80\"\r\n          />\r\n        </svg>\r\n        <span\r\n          className={csx(\r\n            \"proton-CopyInput-button-text\",\r\n            isCopied && \"proton-CopyInput-button-text--copied\"\r\n          )}\r\n        >\r\n          {isCopied ? \"Copied!\" : \"Copy\"}\r\n        </span>\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n"],"names":["CopyInput","name","value","isDisabled","onError","onSuccess","isCopied","setCopied","useState","jsx","Input","CopyButton","copyTextToClipboard","onClick","jsxs","csx"],"mappings":";;;;;;AA6BO,SAASA,EAAU;AAAA,EACxB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AACF,GAAmB;AACjB,QAAM,CAACC,GAAUC,CAAS,IAAIC,EAAS,EAAK;AAG1C,SAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAT;AAAA,MACA,OAAAC;AAAA,MACA,YAAAC;AAAA,MACA,QACEM,gBAAAA,EAAA;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,UAAAL;AAAA,UACA,SAAS,YAAY;AAEnB,YADoB,MAAMM,EAAoBV,GAAOE,CAAO,MAG5DG,EAAU,EAAI,GACFF,KAAA,QAAAA,KACZ,WAAW,MAAME,EAAU,EAAK,GAAG,GAAI;AAAA,UACzC;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;AAEA,MAAMI,IAAa,CAAC,EAAE,UAAAL,GAAU,SAAAO,QAE3BJ,gBAAAA,EAAAA,IAAA,OAAA,EAAI,WAAU,qCAAoC,SAAAI,GACjD,UAAAC,gBAAAA,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAY;AAAA,IACZ,WAAWC;AAAA,MACT;AAAA,MACAT,KAAY;AAAA,IACd;AAAA,IAEA,UAAA;AAAA,MAAAQ,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAM;AAAA,UACN,QAAO;AAAA,UACP,SAAQ;AAAA,UAER,UAAA;AAAA,YAAAL,gBAAAA,EAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,GAAE;AAAA,cAAA;AAAA,YACJ;AAAA,YACAA,gBAAAA,EAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,GAAE;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,MACAA,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWM;AAAA,YACT;AAAA,YACAT,KAAY;AAAA,UACd;AAAA,UAEC,cAAW,YAAY;AAAA,QAAA;AAAA,MAC1B;AAAA,IAAA;AAAA,EAAA;AAEJ,EAAA,CAAA;"}
+{"version":3,"file":"CopyInput.es.js","sources":["../../../../src/components/Input/CopyInput/CopyInput.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { csx } from \"../../../utils\";\nimport { copyTextToClipboard } from \"../../../utils/copy\";\nimport { Input } from \"../BaseInput/Input\";\nimport \"./CopyInput.css\";\n\nexport interface CopyInputProps {\n  /** The name of the input field */\n  name: string;\n\n  /** The value to display in the input and copy to clipboard */\n  value: string;\n\n  /** Whether the input is disabled */\n  isDisabled?: boolean;\n\n  /** Optional callback when copy fails, receives the error object */\n  onError?: (error: Error) => void;\n\n  /** Optional callback when copy succeeds */\n  onSuccess?: () => void;\n}\n\n/**\n * Input with a button to copy value to the clipboard.\n *\n * API:\n *  - {@link CopyInputProps}\n */\nexport function CopyInput({\n  name,\n  value,\n  isDisabled,\n  onError,\n  onSuccess,\n}: CopyInputProps) {\n  const [isCopied, setCopied] = useState(false);\n\n  return (\n    <Input\n      name={name}\n      value={value}\n      isDisabled={isDisabled}\n      suffix={\n        <CopyButton\n          isCopied={isCopied}\n          onClick={async () => {\n            const copySuccess = await copyTextToClipboard(value, onError);\n            if (!copySuccess) return;\n\n            setCopied(true);\n            onSuccess?.();\n            setTimeout(() => setCopied(false), 5000);\n          }}\n        />\n      }\n    />\n  );\n}\n\nconst CopyButton = ({ isCopied, onClick }) => {\n  return (\n    <div className=\"proton-CopyInput-button-container\" onClick={onClick}>\n      <button\n        data-testid=\"COPY_BUTTON\"\n        className={csx(\n          \"proton-CopyInput-button\",\n          isCopied && \"proton-CopyInput-button--copied\"\n        )}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 512 512\"\n        >\n          <path\n            fill=\"currentColor\"\n            d=\"M408 480H184a72 72 0 0 1-72-72V184a72 72 0 0 1 72-72h224a72 72 0 0 1 72 72v224a72 72 0 0 1-72 72\"\n          />\n          <path\n            fill=\"currentColor\"\n            d=\"M160 80h235.88A72.12 72.12 0 0 0 328 32H104a72 72 0 0 0-72 72v224a72.12 72.12 0 0 0 48 67.88V160a80 80 0 0 1 80-80\"\n          />\n        </svg>\n        <span\n          className={csx(\n            \"proton-CopyInput-button-text\",\n            isCopied && \"proton-CopyInput-button-text--copied\"\n          )}\n        >\n          {isCopied ? \"Copied!\" : \"Copy\"}\n        </span>\n      </button>\n    </div>\n  );\n};\n"],"names":["CopyInput","name","value","isDisabled","onError","onSuccess","isCopied","setCopied","useState","jsx","Input","CopyButton","copyTextToClipboard","onClick","jsxs","csx"],"mappings":";;;;;;AA6BO,SAASA,EAAU;AAAA,EACxB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AACF,GAAmB;AACjB,QAAM,CAACC,GAAUC,CAAS,IAAIC,EAAS,EAAK;AAE5C,SACEC,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAT;AAAA,MACA,OAAAC;AAAA,MACA,YAAAC;AAAA,MACA,QACEM,gBAAAA,EAAAA;AAAAA,QAACE;AAAA,QAAA;AAAA,UACC,UAAAL;AAAA,UACA,SAAS,YAAY;AAEnB,YADoB,MAAMM,EAAoBV,GAAOE,CAAO,MAG5DG,EAAU,EAAI,GACdF,KAAA,QAAAA,KACA,WAAW,MAAME,EAAU,EAAK,GAAG,GAAI;AAAA,UACzC;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAIR;AAEA,MAAMI,IAAa,CAAC,EAAE,UAAAL,GAAU,SAAAO,QAE5BJ,gBAAAA,EAAAA,IAAC,OAAA,EAAI,WAAU,qCAAoC,SAAAI,GACjD,UAAAC,gBAAAA,EAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAY;AAAA,IACZ,WAAWC;AAAA,MACT;AAAA,MACAT,KAAY;AAAA,IAAA;AAAA,IAGd,UAAA;AAAA,MAAAQ,gBAAAA,EAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAM;AAAA,UACN,QAAO;AAAA,UACP,SAAQ;AAAA,UAER,UAAA;AAAA,YAAAL,gBAAAA,EAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,GAAE;AAAA,cAAA;AAAA,YAAA;AAAA,YAEJA,gBAAAA,EAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,GAAE;AAAA,cAAA;AAAA,YAAA;AAAA,UACJ;AAAA,QAAA;AAAA,MAAA;AAAA,MAEFA,gBAAAA,EAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWM;AAAA,YACT;AAAA,YACAT,KAAY;AAAA,UAAA;AAAA,UAGb,cAAW,YAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1B;AAAA,EAAA;AAAA,GAEJ;"}

package/dist/components/Input/SearchInput/SearchInput.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.cjs.js","sources":["../../../../src/components/Input/SearchInput/SearchInput.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { useEffect, useRef, useState } from \"react\";\r\nimport \"./SearchInput.css\";\r\nimport { csx } from \"../../../utils\";\r\nimport { Input, type BaseInputProps } from \"../BaseInput/Input\";\r\n\r\nexport interface SearchInputProps\r\n  extends Omit<\r\n    BaseInputProps,\r\n    | \"prefix\"\r\n    | \"suffix\"\r\n    | \"value\"\r\n    | \"onChange\"\r\n    | \"description\"\r\n    | \"descriptionPosition\"\r\n    | \"label\"\r\n  > {\r\n  /** The initial value of the input. */\r\n  defaultValue?: string;\r\n\r\n  /** Should the clear button be shown when there is text? */\r\n  isClearable?: boolean;\r\n\r\n  /** Called when the input value changes. */\r\n  onChange?: (value: string) => void;\r\n\r\n  /** Called when the clear button is clicked. */\r\n  onClear?: () => void;\r\n\r\n  /** The current value of the input (for controlled usage) */\r\n  value?: string;\r\n}\r\n\r\n/**\r\n * A search input component with optional clear functionality and URL parameter sync.\r\n *\r\n * API:\r\n *  - {@link SearchInputProps}\r\n *  - extends {@link BaseInputProps}\r\n */\r\nexport const SearchInput = ({\r\n  name = \"search\",\r\n  placeholder = \"Search...\",\r\n  autoComplete,\r\n  isClearable = true,\r\n  isDisabled = false,\r\n  error,\r\n  defaultValue,\r\n  value: controlledValue,\r\n  \"data-testid\": testId = \"proton-SearchInput\",\r\n  onChange,\r\n  onClear,\r\n}: SearchInputProps) => {\r\n  const inputRef = useRef<HTMLInputElement>(null);\r\n  const [value, setValue] = useState(controlledValue ?? defaultValue ?? \"\");\r\n\r\n  // Sync with controlled value if provided\r\n  useEffect(() => {\r\n    if (controlledValue !== undefined) {\r\n      setValue(controlledValue);\r\n    }\r\n  }, [controlledValue]);\r\n\r\n  const handleChange = (newValue: string) => {\r\n    setValue(newValue);\r\n    onChange?.(newValue);\r\n  };\r\n\r\n  const handleClear = () => {\r\n    setValue(\"\");\r\n    onChange?.(\"\");\r\n    onClear?.();\r\n    inputRef.current?.focus();\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className=\"proton-SearchInput__wrapper\"\r\n      data-testid={testId}\r\n      role=\"search\"\r\n    >\r\n      <Input\r\n        type=\"search\"\r\n        onChange={handleChange}\r\n        value={value}\r\n        name={name}\r\n        placeholder={placeholder}\r\n        autoComplete={autoComplete}\r\n        error={error}\r\n        ref={inputRef}\r\n        isDisabled={isDisabled}\r\n        prefix={\r\n          <svg\r\n            aria-hidden=\"true\"\r\n            width=\"2.8em\"\r\n            height=\"1.6em\"\r\n            viewBox=\"0 0 24 24\"\r\n            onClick={() => inputRef.current?.focus()}\r\n          >\r\n            <title>Magnifying Glass</title>\r\n            <path\r\n              fill=\"currentColor\"\r\n              d=\"M10.5 18.5a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm0-1a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm5.25-.75 4.5 4.5-1.25 1.25-4.5-4.5 1.25-1.25Z\"\r\n            />\r\n          </svg>\r\n        }\r\n        suffix={\r\n          isClearable && value.length > 0 ? (\r\n            <button\r\n              type=\"button\"\r\n              className={csx(\r\n                \"proton-SearchInput__button\",\r\n                \"proton-Input__descriptor\",\r\n                \"proton-Input__suffix\"\r\n              )}\r\n              data-testid={`${testId}-clear`}\r\n              onClick={handleClear}\r\n              aria-label=\"Clear search\"\r\n            >\r\n              <svg\r\n                aria-hidden=\"true\"\r\n                viewBox=\"0 0 50 50\"\r\n                width=\"2.2em\"\r\n                height=\"1.2em\"\r\n              >\r\n                <title>Clear</title>\r\n                <path\r\n                  fill=\"currentColor\"\r\n                  d=\"m37.304 11.282l1.414 1.414l-26.022 26.02l-1.414-1.413z\"\r\n                />\r\n                <path\r\n                  fill=\"currentColor\"\r\n                  d=\"m12.696 11.282l26.022 26.02l-1.414 1.415l-26.022-26.02z\"\r\n                />\r\n              </svg>\r\n            </button>\r\n          ) : null\r\n        }\r\n      />\r\n    </div>\r\n  );\r\n};\r\n"],"names":["SearchInput","name","placeholder","autoComplete","isClearable","isDisabled","error","defaultValue","controlledValue","testId","onChange","onClear","inputRef","useRef","value","setValue","useState","useEffect","handleChange","newValue","handleClear","_a","jsx","Input","jsxs","csx"],"mappings":"gSAyCaA,EAAc,CAAC,CAC1B,KAAAC,EAAO,SACP,YAAAC,EAAc,YACd,aAAAC,EACA,YAAAC,EAAc,GACd,WAAAC,EAAa,GACb,MAAAC,EACA,aAAAC,EACA,MAAOC,EACP,cAAeC,EAAS,qBACxB,SAAAC,EACA,QAAAC,CACF,IAAwB,CAChB,MAAAC,EAAWC,SAAyB,IAAI,EACxC,CAACC,EAAOC,CAAQ,EAAIC,EAAS,SAAAR,GAAmBD,GAAgB,EAAE,EAGxEU,EAAAA,UAAU,IAAM,CACVT,IAAoB,QACtBO,EAASP,CAAe,CAC1B,EACC,CAACA,CAAe,CAAC,EAEd,MAAAU,EAAgBC,GAAqB,CACzCJ,EAASI,CAAQ,EACjBT,GAAA,MAAAA,EAAWS,EAAQ,EAGfC,EAAc,IAAM,OACxBL,EAAS,EAAE,EACXL,GAAA,MAAAA,EAAW,IACDC,GAAA,MAAAA,KACVU,EAAAT,EAAS,UAAT,MAAAS,EAAkB,OAAM,EAIxB,OAAAC,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,8BACV,cAAab,EACb,KAAK,SAEL,SAAAa,EAAA,kBAAA,IAACC,EAAA,MAAA,CACC,KAAK,SACL,SAAUL,EACV,MAAAJ,EACA,KAAAb,EACA,YAAAC,EACA,aAAAC,EACA,MAAAG,EACA,IAAKM,EACL,WAAAP,EACA,OACEmB,EAAA,kBAAA,KAAC,MAAA,CACC,cAAY,OACZ,MAAM,QACN,OAAO,QACP,QAAQ,YACR,QAAS,IAAM,OAAA,OAAAH,EAAAT,EAAS,UAAT,YAAAS,EAAkB,SAEjC,SAAA,CAAAC,EAAAA,kBAAAA,IAAC,SAAM,SAAgB,kBAAA,CAAA,EACvBA,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,4HAAA,CACJ,CAAA,CAAA,CACF,EAEF,OACElB,GAAeU,EAAM,OAAS,EAC5BQ,EAAA,kBAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAWG,EAAA,IACT,6BACA,2BACA,sBACF,EACA,cAAa,GAAGhB,CAAM,SACtB,QAASW,EACT,aAAW,eAEX,SAAAI,EAAA,kBAAA,KAAC,MAAA,CACC,cAAY,OACZ,QAAQ,YACR,MAAM,QACN,OAAO,QAEP,SAAA,CAAAF,EAAAA,kBAAAA,IAAC,SAAM,SAAK,OAAA,CAAA,EACZA,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,wDAAA,CACJ,EACAA,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,yDAAA,CACJ,CAAA,CAAA,CACF,CAAA,CAAA,EAEA,IAAA,CAER,CAAA,CAAA,CAGN"}
+{"version":3,"file":"SearchInput.cjs.js","sources":["../../../../src/components/Input/SearchInput/SearchInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport \"./SearchInput.css\";\nimport { csx } from \"../../../utils\";\nimport { Input, type BaseInputProps } from \"../BaseInput/Input\";\n\nexport interface SearchInputProps\n  extends Omit<\n    BaseInputProps,\n    | \"prefix\"\n    | \"suffix\"\n    | \"value\"\n    | \"onChange\"\n    | \"description\"\n    | \"descriptionPosition\"\n    | \"label\"\n  > {\n  /** The initial value of the input. */\n  defaultValue?: string;\n\n  /** Should the clear button be shown when there is text? */\n  isClearable?: boolean;\n\n  /** Called when the input value changes. */\n  onChange?: (value: string) => void;\n\n  /** Called when the clear button is clicked. */\n  onClear?: () => void;\n\n  /** The current value of the input (for controlled usage) */\n  value?: string;\n}\n\n/**\n * A search input component with optional clear functionality and URL parameter sync.\n *\n * API:\n *  - {@link SearchInputProps}\n *  - extends {@link BaseInputProps}\n */\nexport const SearchInput = ({\n  name = \"search\",\n  placeholder = \"Search...\",\n  autoComplete,\n  isClearable = true,\n  isDisabled = false,\n  error,\n  defaultValue,\n  value: controlledValue,\n  \"data-testid\": testId = \"proton-SearchInput\",\n  onChange,\n  onClear,\n}: SearchInputProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [value, setValue] = useState(controlledValue ?? defaultValue ?? \"\");\n\n  // Sync with controlled value if provided\n  useEffect(() => {\n    if (controlledValue !== undefined) {\n      setValue(controlledValue);\n    }\n  }, [controlledValue]);\n\n  const handleChange = (newValue: string) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  const handleClear = () => {\n    setValue(\"\");\n    onChange?.(\"\");\n    onClear?.();\n    inputRef.current?.focus();\n  };\n\n  return (\n    <div\n      className=\"proton-SearchInput__wrapper\"\n      data-testid={testId}\n      role=\"search\"\n    >\n      <Input\n        type=\"search\"\n        onChange={handleChange}\n        value={value}\n        name={name}\n        placeholder={placeholder}\n        autoComplete={autoComplete}\n        error={error}\n        ref={inputRef}\n        isDisabled={isDisabled}\n        prefix={\n          <svg\n            aria-hidden=\"true\"\n            width=\"2.8em\"\n            height=\"1.6em\"\n            viewBox=\"0 0 24 24\"\n            onClick={() => inputRef.current?.focus()}\n          >\n            <title>Magnifying Glass</title>\n            <path\n              fill=\"currentColor\"\n              d=\"M10.5 18.5a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm0-1a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm5.25-.75 4.5 4.5-1.25 1.25-4.5-4.5 1.25-1.25Z\"\n            />\n          </svg>\n        }\n        suffix={\n          isClearable && value.length > 0 ? (\n            <button\n              type=\"button\"\n              className={csx(\n                \"proton-SearchInput__button\",\n                \"proton-Input__descriptor\",\n                \"proton-Input__suffix\"\n              )}\n              data-testid={`${testId}-clear`}\n              onClick={handleClear}\n              aria-label=\"Clear search\"\n            >\n              <svg\n                aria-hidden=\"true\"\n                viewBox=\"0 0 50 50\"\n                width=\"2.2em\"\n                height=\"1.2em\"\n              >\n                <title>Clear</title>\n                <path\n                  fill=\"currentColor\"\n                  d=\"m37.304 11.282l1.414 1.414l-26.022 26.02l-1.414-1.413z\"\n                />\n                <path\n                  fill=\"currentColor\"\n                  d=\"m12.696 11.282l26.022 26.02l-1.414 1.415l-26.022-26.02z\"\n                />\n              </svg>\n            </button>\n          ) : null\n        }\n      />\n    </div>\n  );\n};\n"],"names":["SearchInput","name","placeholder","autoComplete","isClearable","isDisabled","error","defaultValue","controlledValue","testId","onChange","onClear","inputRef","useRef","value","setValue","useState","useEffect","handleChange","newValue","handleClear","_a","jsx","Input","jsxs","csx"],"mappings":"gSAyCaA,EAAc,CAAC,CAC1B,KAAAC,EAAO,SACP,YAAAC,EAAc,YACd,aAAAC,EACA,YAAAC,EAAc,GACd,WAAAC,EAAa,GACb,MAAAC,EACA,aAAAC,EACA,MAAOC,EACP,cAAeC,EAAS,qBACxB,SAAAC,EACA,QAAAC,CACF,IAAwB,CACtB,MAAMC,EAAWC,EAAAA,OAAyB,IAAI,EACxC,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAASR,GAAmBD,GAAgB,EAAE,EAGxEU,EAAAA,UAAU,IAAM,CACVT,IAAoB,QACtBO,EAASP,CAAe,CAE5B,EAAG,CAACA,CAAe,CAAC,EAEpB,MAAMU,EAAgBC,GAAqB,CACzCJ,EAASI,CAAQ,EACjBT,GAAA,MAAAA,EAAWS,EACb,EAEMC,EAAc,IAAM,OACxBL,EAAS,EAAE,EACXL,GAAA,MAAAA,EAAW,IACXC,GAAA,MAAAA,KACAU,EAAAT,EAAS,UAAT,MAAAS,EAAkB,OACpB,EAEA,OACEC,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAU,8BACV,cAAab,EACb,KAAK,SAEL,SAAAa,EAAAA,kBAAAA,IAACC,EAAAA,MAAA,CACC,KAAK,SACL,SAAUL,EACV,MAAAJ,EACA,KAAAb,EACA,YAAAC,EACA,aAAAC,EACA,MAAAG,EACA,IAAKM,EACL,WAAAP,EACA,OACEmB,EAAAA,kBAAAA,KAAC,MAAA,CACC,cAAY,OACZ,MAAM,QACN,OAAO,QACP,QAAQ,YACR,QAAS,IAAA,OAAM,OAAAH,EAAAT,EAAS,UAAT,YAAAS,EAAkB,SAEjC,SAAA,CAAAC,EAAAA,kBAAAA,IAAC,SAAM,SAAA,kBAAA,CAAgB,EACvBA,EAAAA,kBAAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,4HAAA,CAAA,CACJ,CAAA,CAAA,EAGJ,OACElB,GAAeU,EAAM,OAAS,EAC5BQ,EAAAA,kBAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAWG,EAAAA,IACT,6BACA,2BACA,sBAAA,EAEF,cAAa,GAAGhB,CAAM,SACtB,QAASW,EACT,aAAW,eAEX,SAAAI,EAAAA,kBAAAA,KAAC,MAAA,CACC,cAAY,OACZ,QAAQ,YACR,MAAM,QACN,OAAO,QAEP,SAAA,CAAAF,EAAAA,kBAAAA,IAAC,SAAM,SAAA,OAAA,CAAK,EACZA,EAAAA,kBAAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,wDAAA,CAAA,EAEJA,EAAAA,kBAAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,yDAAA,CAAA,CACJ,CAAA,CAAA,CACF,CAAA,EAEA,IAAA,CAAA,CAER,CAAA,CAGN"}

package/dist/components/Input/SearchInput/SearchInput.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.es.js","sources":["../../../../src/components/Input/SearchInput/SearchInput.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { useEffect, useRef, useState } from \"react\";\r\nimport \"./SearchInput.css\";\r\nimport { csx } from \"../../../utils\";\r\nimport { Input, type BaseInputProps } from \"../BaseInput/Input\";\r\n\r\nexport interface SearchInputProps\r\n  extends Omit<\r\n    BaseInputProps,\r\n    | \"prefix\"\r\n    | \"suffix\"\r\n    | \"value\"\r\n    | \"onChange\"\r\n    | \"description\"\r\n    | \"descriptionPosition\"\r\n    | \"label\"\r\n  > {\r\n  /** The initial value of the input. */\r\n  defaultValue?: string;\r\n\r\n  /** Should the clear button be shown when there is text? */\r\n  isClearable?: boolean;\r\n\r\n  /** Called when the input value changes. */\r\n  onChange?: (value: string) => void;\r\n\r\n  /** Called when the clear button is clicked. */\r\n  onClear?: () => void;\r\n\r\n  /** The current value of the input (for controlled usage) */\r\n  value?: string;\r\n}\r\n\r\n/**\r\n * A search input component with optional clear functionality and URL parameter sync.\r\n *\r\n * API:\r\n *  - {@link SearchInputProps}\r\n *  - extends {@link BaseInputProps}\r\n */\r\nexport const SearchInput = ({\r\n  name = \"search\",\r\n  placeholder = \"Search...\",\r\n  autoComplete,\r\n  isClearable = true,\r\n  isDisabled = false,\r\n  error,\r\n  defaultValue,\r\n  value: controlledValue,\r\n  \"data-testid\": testId = \"proton-SearchInput\",\r\n  onChange,\r\n  onClear,\r\n}: SearchInputProps) => {\r\n  const inputRef = useRef<HTMLInputElement>(null);\r\n  const [value, setValue] = useState(controlledValue ?? defaultValue ?? \"\");\r\n\r\n  // Sync with controlled value if provided\r\n  useEffect(() => {\r\n    if (controlledValue !== undefined) {\r\n      setValue(controlledValue);\r\n    }\r\n  }, [controlledValue]);\r\n\r\n  const handleChange = (newValue: string) => {\r\n    setValue(newValue);\r\n    onChange?.(newValue);\r\n  };\r\n\r\n  const handleClear = () => {\r\n    setValue(\"\");\r\n    onChange?.(\"\");\r\n    onClear?.();\r\n    inputRef.current?.focus();\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className=\"proton-SearchInput__wrapper\"\r\n      data-testid={testId}\r\n      role=\"search\"\r\n    >\r\n      <Input\r\n        type=\"search\"\r\n        onChange={handleChange}\r\n        value={value}\r\n        name={name}\r\n        placeholder={placeholder}\r\n        autoComplete={autoComplete}\r\n        error={error}\r\n        ref={inputRef}\r\n        isDisabled={isDisabled}\r\n        prefix={\r\n          <svg\r\n            aria-hidden=\"true\"\r\n            width=\"2.8em\"\r\n            height=\"1.6em\"\r\n            viewBox=\"0 0 24 24\"\r\n            onClick={() => inputRef.current?.focus()}\r\n          >\r\n            <title>Magnifying Glass</title>\r\n            <path\r\n              fill=\"currentColor\"\r\n              d=\"M10.5 18.5a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm0-1a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm5.25-.75 4.5 4.5-1.25 1.25-4.5-4.5 1.25-1.25Z\"\r\n            />\r\n          </svg>\r\n        }\r\n        suffix={\r\n          isClearable && value.length > 0 ? (\r\n            <button\r\n              type=\"button\"\r\n              className={csx(\r\n                \"proton-SearchInput__button\",\r\n                \"proton-Input__descriptor\",\r\n                \"proton-Input__suffix\"\r\n              )}\r\n              data-testid={`${testId}-clear`}\r\n              onClick={handleClear}\r\n              aria-label=\"Clear search\"\r\n            >\r\n              <svg\r\n                aria-hidden=\"true\"\r\n                viewBox=\"0 0 50 50\"\r\n                width=\"2.2em\"\r\n                height=\"1.2em\"\r\n              >\r\n                <title>Clear</title>\r\n                <path\r\n                  fill=\"currentColor\"\r\n                  d=\"m37.304 11.282l1.414 1.414l-26.022 26.02l-1.414-1.413z\"\r\n                />\r\n                <path\r\n                  fill=\"currentColor\"\r\n                  d=\"m12.696 11.282l26.022 26.02l-1.414 1.415l-26.022-26.02z\"\r\n                />\r\n              </svg>\r\n            </button>\r\n          ) : null\r\n        }\r\n      />\r\n    </div>\r\n  );\r\n};\r\n"],"names":["SearchInput","name","placeholder","autoComplete","isClearable","isDisabled","error","defaultValue","controlledValue","testId","onChange","onClear","inputRef","useRef","value","setValue","useState","useEffect","handleChange","newValue","handleClear","_a","jsx","Input","jsxs","csx"],"mappings":";;;;;AAyCO,MAAMA,IAAc,CAAC;AAAA,EAC1B,MAAAC,IAAO;AAAA,EACP,aAAAC,IAAc;AAAA,EACd,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,YAAAC,IAAa;AAAA,EACb,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAOC;AAAA,EACP,eAAeC,IAAS;AAAA,EACxB,UAAAC;AAAA,EACA,SAAAC;AACF,MAAwB;AAChB,QAAAC,IAAWC,EAAyB,IAAI,GACxC,CAACC,GAAOC,CAAQ,IAAIC,EAASR,KAAmBD,KAAgB,EAAE;AAGxE,EAAAU,EAAU,MAAM;AACd,IAAIT,MAAoB,UACtBO,EAASP,CAAe;AAAA,EAC1B,GACC,CAACA,CAAe,CAAC;AAEd,QAAAU,IAAe,CAACC,MAAqB;AACzC,IAAAJ,EAASI,CAAQ,GACjBT,KAAA,QAAAA,EAAWS;AAAA,EAAQ,GAGfC,IAAc,MAAM;;AACxB,IAAAL,EAAS,EAAE,GACXL,KAAA,QAAAA,EAAW,KACDC,KAAA,QAAAA,MACVU,IAAAT,EAAS,YAAT,QAAAS,EAAkB;AAAA,EAAM;AAIxB,SAAAC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAab;AAAA,MACb,MAAK;AAAA,MAEL,UAAAa,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAUL;AAAA,UACV,OAAAJ;AAAA,UACA,MAAAb;AAAA,UACA,aAAAC;AAAA,UACA,cAAAC;AAAA,UACA,OAAAG;AAAA,UACA,KAAKM;AAAA,UACL,YAAAP;AAAA,UACA,QACEmB,gBAAAA,EAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAY;AAAA,cACZ,OAAM;AAAA,cACN,QAAO;AAAA,cACP,SAAQ;AAAA,cACR,SAAS,MAAM;;AAAA,wBAAAH,IAAAT,EAAS,YAAT,gBAAAS,EAAkB;AAAA;AAAA,cAEjC,UAAA;AAAA,gBAAAC,gBAAAA,EAAAA,IAAC,WAAM,UAAgB,mBAAA,CAAA;AAAA,gBACvBA,gBAAAA,EAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,GAAE;AAAA,kBAAA;AAAA,gBACJ;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,UAEF,QACElB,KAAeU,EAAM,SAAS,IAC5BQ,gBAAAA,EAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAWG;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA,cACA,eAAa,GAAGhB,CAAM;AAAA,cACtB,SAASW;AAAA,cACT,cAAW;AAAA,cAEX,UAAAI,gBAAAA,EAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,eAAY;AAAA,kBACZ,SAAQ;AAAA,kBACR,OAAM;AAAA,kBACN,QAAO;AAAA,kBAEP,UAAA;AAAA,oBAAAF,gBAAAA,EAAAA,IAAC,WAAM,UAAK,QAAA,CAAA;AAAA,oBACZA,gBAAAA,EAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,GAAE;AAAA,sBAAA;AAAA,oBACJ;AAAA,oBACAA,gBAAAA,EAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,GAAE;AAAA,sBAAA;AAAA,oBACJ;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UAAA,IAEA;AAAA,QAAA;AAAA,MAER;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"SearchInput.es.js","sources":["../../../../src/components/Input/SearchInput/SearchInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport \"./SearchInput.css\";\nimport { csx } from \"../../../utils\";\nimport { Input, type BaseInputProps } from \"../BaseInput/Input\";\n\nexport interface SearchInputProps\n  extends Omit<\n    BaseInputProps,\n    | \"prefix\"\n    | \"suffix\"\n    | \"value\"\n    | \"onChange\"\n    | \"description\"\n    | \"descriptionPosition\"\n    | \"label\"\n  > {\n  /** The initial value of the input. */\n  defaultValue?: string;\n\n  /** Should the clear button be shown when there is text? */\n  isClearable?: boolean;\n\n  /** Called when the input value changes. */\n  onChange?: (value: string) => void;\n\n  /** Called when the clear button is clicked. */\n  onClear?: () => void;\n\n  /** The current value of the input (for controlled usage) */\n  value?: string;\n}\n\n/**\n * A search input component with optional clear functionality and URL parameter sync.\n *\n * API:\n *  - {@link SearchInputProps}\n *  - extends {@link BaseInputProps}\n */\nexport const SearchInput = ({\n  name = \"search\",\n  placeholder = \"Search...\",\n  autoComplete,\n  isClearable = true,\n  isDisabled = false,\n  error,\n  defaultValue,\n  value: controlledValue,\n  \"data-testid\": testId = \"proton-SearchInput\",\n  onChange,\n  onClear,\n}: SearchInputProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [value, setValue] = useState(controlledValue ?? defaultValue ?? \"\");\n\n  // Sync with controlled value if provided\n  useEffect(() => {\n    if (controlledValue !== undefined) {\n      setValue(controlledValue);\n    }\n  }, [controlledValue]);\n\n  const handleChange = (newValue: string) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  const handleClear = () => {\n    setValue(\"\");\n    onChange?.(\"\");\n    onClear?.();\n    inputRef.current?.focus();\n  };\n\n  return (\n    <div\n      className=\"proton-SearchInput__wrapper\"\n      data-testid={testId}\n      role=\"search\"\n    >\n      <Input\n        type=\"search\"\n        onChange={handleChange}\n        value={value}\n        name={name}\n        placeholder={placeholder}\n        autoComplete={autoComplete}\n        error={error}\n        ref={inputRef}\n        isDisabled={isDisabled}\n        prefix={\n          <svg\n            aria-hidden=\"true\"\n            width=\"2.8em\"\n            height=\"1.6em\"\n            viewBox=\"0 0 24 24\"\n            onClick={() => inputRef.current?.focus()}\n          >\n            <title>Magnifying Glass</title>\n            <path\n              fill=\"currentColor\"\n              d=\"M10.5 18.5a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm0-1a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm5.25-.75 4.5 4.5-1.25 1.25-4.5-4.5 1.25-1.25Z\"\n            />\n          </svg>\n        }\n        suffix={\n          isClearable && value.length > 0 ? (\n            <button\n              type=\"button\"\n              className={csx(\n                \"proton-SearchInput__button\",\n                \"proton-Input__descriptor\",\n                \"proton-Input__suffix\"\n              )}\n              data-testid={`${testId}-clear`}\n              onClick={handleClear}\n              aria-label=\"Clear search\"\n            >\n              <svg\n                aria-hidden=\"true\"\n                viewBox=\"0 0 50 50\"\n                width=\"2.2em\"\n                height=\"1.2em\"\n              >\n                <title>Clear</title>\n                <path\n                  fill=\"currentColor\"\n                  d=\"m37.304 11.282l1.414 1.414l-26.022 26.02l-1.414-1.413z\"\n                />\n                <path\n                  fill=\"currentColor\"\n                  d=\"m12.696 11.282l26.022 26.02l-1.414 1.415l-26.022-26.02z\"\n                />\n              </svg>\n            </button>\n          ) : null\n        }\n      />\n    </div>\n  );\n};\n"],"names":["SearchInput","name","placeholder","autoComplete","isClearable","isDisabled","error","defaultValue","controlledValue","testId","onChange","onClear","inputRef","useRef","value","setValue","useState","useEffect","handleChange","newValue","handleClear","_a","jsx","Input","jsxs","csx"],"mappings":";;;;;AAyCO,MAAMA,IAAc,CAAC;AAAA,EAC1B,MAAAC,IAAO;AAAA,EACP,aAAAC,IAAc;AAAA,EACd,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,YAAAC,IAAa;AAAA,EACb,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAOC;AAAA,EACP,eAAeC,IAAS;AAAA,EACxB,UAAAC;AAAA,EACA,SAAAC;AACF,MAAwB;AACtB,QAAMC,IAAWC,EAAyB,IAAI,GACxC,CAACC,GAAOC,CAAQ,IAAIC,EAASR,KAAmBD,KAAgB,EAAE;AAGxE,EAAAU,EAAU,MAAM;AACd,IAAIT,MAAoB,UACtBO,EAASP,CAAe;AAAA,EAE5B,GAAG,CAACA,CAAe,CAAC;AAEpB,QAAMU,IAAe,CAACC,MAAqB;AACzC,IAAAJ,EAASI,CAAQ,GACjBT,KAAA,QAAAA,EAAWS;AAAA,EACb,GAEMC,IAAc,MAAM;;AACxB,IAAAL,EAAS,EAAE,GACXL,KAAA,QAAAA,EAAW,KACXC,KAAA,QAAAA,MACAU,IAAAT,EAAS,YAAT,QAAAS,EAAkB;AAAA,EACpB;AAEA,SACEC,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAab;AAAA,MACb,MAAK;AAAA,MAEL,UAAAa,gBAAAA,EAAAA;AAAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAUL;AAAA,UACV,OAAAJ;AAAA,UACA,MAAAb;AAAA,UACA,aAAAC;AAAA,UACA,cAAAC;AAAA,UACA,OAAAG;AAAA,UACA,KAAKM;AAAA,UACL,YAAAP;AAAA,UACA,QACEmB,gBAAAA,EAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAY;AAAA,cACZ,OAAM;AAAA,cACN,QAAO;AAAA,cACP,SAAQ;AAAA,cACR,SAAS,MAAA;;AAAM,wBAAAH,IAAAT,EAAS,YAAT,gBAAAS,EAAkB;AAAA;AAAA,cAEjC,UAAA;AAAA,gBAAAC,gBAAAA,EAAAA,IAAC,WAAM,UAAA,mBAAA,CAAgB;AAAA,gBACvBA,gBAAAA,EAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,GAAE;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACJ;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJ,QACElB,KAAeU,EAAM,SAAS,IAC5BQ,gBAAAA,EAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAWG;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,cAEF,eAAa,GAAGhB,CAAM;AAAA,cACtB,SAASW;AAAA,cACT,cAAW;AAAA,cAEX,UAAAI,gBAAAA,EAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,eAAY;AAAA,kBACZ,SAAQ;AAAA,kBACR,OAAM;AAAA,kBACN,QAAO;AAAA,kBAEP,UAAA;AAAA,oBAAAF,gBAAAA,EAAAA,IAAC,WAAM,UAAA,QAAA,CAAK;AAAA,oBACZA,gBAAAA,EAAAA;AAAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,GAAE;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAEJA,gBAAAA,EAAAA;AAAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,GAAE;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACJ;AAAA,gBAAA;AAAA,cAAA;AAAA,YACF;AAAA,UAAA,IAEA;AAAA,QAAA;AAAA,MAAA;AAAA,IAER;AAAA,EAAA;AAGN;"}