npm - @protonradio/proton-ui - Versions diffs - 0.12.0 → 0.12.2 - Mend

@protonradio/proton-ui 0.12.0 → 0.12.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (42) hide show

package/dist/components/Table/DataTable/DataTable.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTable.es.js","sources":["../../../../src/components/Table/DataTable/DataTable.tsx"],"sourcesContent":["\"use client\";\n\nimport { AriaAttributes, ReactNode } from \"react\";\nimport { deepEqual } from \"../../../utils/deepEqual\";\n\nimport { Table, TableRowData } from \"../BaseTable/Table\";\nimport { Elevation } from \"../../Elevation/Elevation\";\nimport { Tombstone } from \"../../Tombstone/Tombstone\";\nimport { ChevronUp } from \"../../Icon/IconComponents/ChevronUp\";\nimport { DataTableRow } from \"./DataTableRow\";\n\nimport \"../BaseTable/Table.css\";\nimport \"./DataTable.css\";\n\nexport type SortDirection = \"ASC\" \| \"DESC\";\n\ntype SortingConfig =\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 isHidden?: boolean;\n}\n\ninterface BaseDataTableProps<T = any> {\n /\n Array of column definitions\n * - {@link DataTableColumn}\n /\n columns: DataTableColumn<T>[];\n /\n Array of data objects to display. Can be empty array for loading/empty states\n * @default []\n * /\n data?: T[] \| null;\n /\n Test ID for testing purposes\n * /\n \"data-testid\"?: string;\n /\n Error state\n * @default false\n /\n error?: boolean \| string;\n /\n Custom empty state message\n * @default \"Data Unavailable\"\n /\n emptyMessage?: string;\n /\n Custom error message\n * @default \"An error occurred\"\n /\n errorMessage?: string;\n /* Callback when a row is clicked /\n onRowClick?: (row: T) => void;\n /* Loading state /\n loading?: boolean;\n /\n Number of skeleton rows to show in loading state\n * @default 5\n /\n loadingRows?: number;\n /\n Enable row-level memoization for performance optimization.\n * Uses deepEqual to compare row data. @see {@link deepEqual}\n * @default true\n /\n memoize?: boolean;\n /\n Table name/caption for accessibility. Provides essential context for screen readers.\n * /\n name: string;\n /* Optional tombstone component to use when loading /\n tombstoneComponent?: ReactNode;\n}\n\nexport type DataTableProps<T = any> = BaseDataTableProps<T> & SortingConfig;\n\n/\n DataTable is a declarative wrapper around the base Table component.\n * API:\n * - {@link DataTableProps}\n * - {@link SortingConfig}\n \n @note Row memoization is enabled by default. Rows only re-render when row data or index changes.\n */\nexport const DataTable = <T,>({\n columns,\n data = [],\n loading = false,\n tombstoneComponent,\n error = false,\n name,\n onRowClick,\n emptyMessage = \"Data Unavailable\",\n errorMessage = \"An error occurred\",\n loadingRows = 5,\n \"data-testid\": testId,\n memoize = true,\n sortableColumns = [],\n sortedBy,\n sortDirection,\n onSort,\n}: DataTableProps<T>) => {\n const visibleColumns = columns.filter((col) => !col.isHidden);\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 return (\n <EmptyState\n columns={visibleColumns}\n message={typeof error === \"string\" ? error : errorMessage}\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\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 <ChevronUp\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 const tableRow = row as TableRowData;\n\n return (\n <DataTableRow\n key={tableRow.key ?? index}\n row={row}\n columns={visibleColumns}\n rowIndex={index}\n onRowClick={onRowClick}\n memoize={memoize}\n dataTestId={tableRow.dataTestId}\n />\n );\n })}\n </Table.Body>\n </Table>\n </div>\n );\n};\n\nconst EmptyState = ({\n columns = [],\n message,\n name = \"Data\",\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\nDataTable.displayName = \"ProtonUIDataTable\";\n"],"names":["DataTable","columns","data","loading","tombstoneComponent","error","name","onRowClick","emptyMessage","errorMessage","loadingRows","testId","memoize","sortableColumns","sortedBy","sortDirection","onSort","visibleColumns","col","handleSortClick","column","newDirection","getSortState","columnId","jsx","EmptyState","jsxs","Table","_","index","Tombstone","isSortable","sortState","ChevronUp","row","tableRow","DataTableRow","message","isError","Elevation"],"mappings":"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"}
1	+ {"version":3,"file":"DataTable.es.js","sources":["../../../../src/components/Table/DataTable/DataTable.tsx"],"sourcesContent":["\"use client\";\n\nimport { AriaAttributes, ReactNode } from \"react\";\nimport { deepEqual } from \"../../../utils/deepEqual\";\n\nimport { Table, TableRowData } from \"../BaseTable/Table\";\nimport { Elevation } from \"../../Elevation/Elevation\";\nimport { Tombstone } from \"../../Tombstone/Tombstone\";\nimport { ChevronUp } from \"../../Icon/IconComponents/ChevronUp\";\nimport { DataTableRow } from \"./DataTableRow\";\n\nimport \"../BaseTable/Table.css\";\nimport \"./DataTable.css\";\n\nexport type SortDirection = \"ASC\" \| \"DESC\";\n\ntype SortingConfig =\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 isHidden?: boolean;\n}\n\ninterface BaseDataTableProps<T = any> {\n /\n Array of column definitions\n * - {@link DataTableColumn}\n /\n columns: DataTableColumn<T>[];\n /\n Array of data objects to display. Can be empty array for loading/empty states\n * @default []\n * /\n data?: T[] \| null;\n /\n Test ID for testing purposes\n * /\n \"data-testid\"?: string;\n /\n Error state\n * @default false\n /\n error?: boolean \| string;\n /\n Custom empty state message\n * @default \"Data Unavailable\"\n /\n emptyMessage?: string;\n /\n Custom error message\n * @default \"An error occurred\"\n /\n errorMessage?: string;\n /* Callback when a row is clicked /\n onRowClick?: (row: T) => void;\n /* Loading state /\n loading?: boolean;\n /\n Number of skeleton rows to show in loading state\n * @default 5\n /\n loadingRows?: number;\n /\n Enable row-level memoization for performance optimization.\n * Uses deepEqual to compare row data. @see {@link deepEqual}\n * @default true\n /\n memoize?: boolean;\n /\n Table name/caption for accessibility. Provides essential context for screen readers.\n * /\n name: string;\n /* Optional tombstone component to use when loading /\n tombstoneComponent?: ReactNode;\n}\n\nexport type DataTableProps<T = any> = BaseDataTableProps<T> & SortingConfig;\n\n/\n DataTable is a declarative wrapper around the base Table component.\n * API:\n * - {@link DataTableProps}\n * - {@link SortingConfig}\n \n @note Row memoization is enabled by default. Rows only re-render when row data or index changes.\n */\nexport const DataTable = <T,>({\n columns,\n data = [],\n loading = false,\n tombstoneComponent,\n error = false,\n name,\n onRowClick,\n emptyMessage = \"Data Unavailable\",\n errorMessage = \"An error occurred\",\n loadingRows = 5,\n \"data-testid\": testId,\n memoize = true,\n sortableColumns = [],\n sortedBy,\n sortDirection,\n onSort,\n}: DataTableProps<T>) => {\n const visibleColumns = columns.filter((col) => !col.isHidden);\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 return (\n <EmptyState\n columns={visibleColumns}\n message={typeof error === \"string\" ? error : errorMessage}\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\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 <ChevronUp\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 const tableRow = row as TableRowData;\n\n return (\n <DataTableRow\n key={tableRow.key ?? index}\n row={row}\n columns={visibleColumns}\n rowIndex={index}\n onRowClick={onRowClick}\n memoize={memoize}\n dataTestId={tableRow.dataTestId}\n />\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}: {\n columns: DataTableColumn<any>[];\n name: string;\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\nDataTable.displayName = \"ProtonUIDataTable\";\n"],"names":["DataTable","columns","data","loading","tombstoneComponent","error","name","onRowClick","emptyMessage","errorMessage","loadingRows","testId","memoize","sortableColumns","sortedBy","sortDirection","onSort","visibleColumns","col","handleSortClick","column","newDirection","getSortState","columnId","jsx","EmptyState","jsxs","Table","_","index","Tombstone","isSortable","sortState","ChevronUp","row","tableRow","DataTableRow","message","isError","Elevation"],"mappings":"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"}

package/dist/components/Tooltip/ResponsiveTooltip.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ResponsiveTooltip.cjs.js","sources":["../../../src/components/Tooltip/ResponsiveTooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tooltip, TooltipProps, TooltipPlacement } from \"./Tooltip\";\nimport { Popover, PopoverProps, ~~PopoverSide~~ } from \"../Popover/Popover\";\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\n\nexport interface ResponsiveTooltipProps\n extends Omit<TooltipProps, \"placement\">,\n Omit<PopoverProps, \"trigger\" \| \"children\" \| \"side\"> {\n /*\n Placement/side of the tooltip/popover.\n * @default \"top\"\n /\n placement?: TooltipPlacement ~~\| PopoverSide~~;\n /\n Force a specific component type.\n * @default \"auto\"\n /\n forceComponent?: \"tooltip\" \| \"popover\" \| \"auto\";\n}\n\n/\n A responsive component that automatically renders as Tooltip on desktop\n * and Popover on mobile devices.\n \n API:\n * - {@link ResponsiveTooltipProps}\n * - @extends {@link TooltipProps} \n * - @extends {@link PopoverProps}\n */\nexport function ResponsiveTooltip({\n children,\n content,\n placement = \"top\",\n align = \"center\",\n arrow,\n delay = 100,\n isDisabled,\n open,\n defaultOpen,\n onOpenChange,\n constrainWidth,\n disableTriggerClick,\n forceComponent = \"auto\",\n \"data-testid\": testId,\n}: ResponsiveTooltipProps) {\n const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\n\n if (content === \"\") return null;\n\n let usePopover: boolean;\n switch (forceComponent) {\n case \"popover\":\n usePopover = true;\n break;\n case \"tooltip\":\n usePopover = false;\n break;\n default:\n usePopover = isMobile;\n break;\n }\n\n if (!usePopover) {\n return (\n <Tooltip\n children={children}\n content={content}\n placement={placement}\n align={align}\n arrow={arrow}\n delay={delay}\n isDisabled={isDisabled}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n disableTriggerClick={disableTriggerClick}\n data-testid={testId}\n />\n );\n }\n\n return (\n <Popover\n trigger={children}\n side={placement}\n align={align}\n arrow={arrow}\n constrainWidth={constrainWidth}\n isDisabled={isDisabled}\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n data-testid={testId}\n >\n {content}\n </Popover>\n );\n}\n\nResponsiveTooltip.displayName = \"ProtonUIResponsiveTooltip\";\n"],"names":["ResponsiveTooltip","children","content","placement","align","arrow","delay","isDisabled","open","defaultOpen","onOpenChange","constrainWidth","disableTriggerClick","forceComponent","testId","isMobile","useBreakpoint","BREAKPOINTS","usePopover","jsx","Popover","Tooltip"],"mappings":"iTA+BO,SAASA,EAAkB,CAChC,SAAAC,EACA,QAAAC,EACA,UAAAC,EAAY,MACZ,MAAAC,EAAQ,SACR,MAAAC,EACA,MAAAC,EAAQ,IACR,WAAAC,EACA,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,eAAAC,EACA,oBAAAC,EACA,eAAAC,EAAiB,OACjB,cAAeC,CACjB,EAA2B,CACzB,MAAMC,EAAWC,EAAAA,cAAcC,EAAAA,YAAY,KAAK,EAEhD,GAAIf,IAAY,GAAI,OAAO,KAE3B,IAAIgB,EACJ,OAAQL,EAAA,CACN,IAAK,UACHK,EAAa,GACb,MACF,IAAK,UACHA,EAAa,GACb,MACF,QACEA,EAAaH,EACb,KAAA,CAGJ,OAAKG,EAmBHC,EAAAA,kBAAAA,IAACC,EAAAA,QAAA,CACC,QAASnB,EACT,KAAME,EACN,MAAAC,EACA,MAAAC,EACA,eAAAM,EACA,WAAAJ,EACA,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,cAAaI,EAEZ,SAAAZ,CAAA,CAAA,EA7BDiB,EAAAA,kBAAAA,IAACE,EAAAA,QAAA,CACC,SAAApB,EACA,QAAAC,EACA,UAAAC,EACA,MAAAC,EACA,MAAAC,EACA,MAAAC,EACA,WAAAC,EACA,YAAAE,EACA,aAAAC,EACA,oBAAAE,EACA,cAAaE,CAAA,CAAA,CAqBrB,CAEAd,EAAkB,YAAc"}
1	+ {"version":3,"file":"ResponsiveTooltip.cjs.js","sources":["../../../src/components/Tooltip/ResponsiveTooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tooltip, TooltipProps, TooltipPlacement } from \"./Tooltip\";\nimport { Popover, PopoverProps } from \"../Popover/Popover\";\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\n\nexport interface ResponsiveTooltipProps\n extends Omit<TooltipProps, \"placement\">,\n Omit<PopoverProps, \"trigger\" \| \"children\" \| \"side\"> {\n /*\n Placement/side of the tooltip/popover.\n * @default \"top\"\n /\n placement?: TooltipPlacement;\n /\n Force a specific component type.\n * @default \"auto\"\n /\n forceComponent?: \"tooltip\" \| \"popover\" \| \"auto\";\n}\n\n/\n A responsive component that automatically renders as Tooltip on desktop\n * and Popover on mobile devices.\n \n API:\n * - {@link ResponsiveTooltipProps}\n * - @extends {@link TooltipProps} \n * - @extends {@link PopoverProps}\n */\nexport function ResponsiveTooltip({\n children,\n content,\n placement = \"top\",\n align = \"center\",\n arrow,\n delay = 100,\n isDisabled,\n open,\n defaultOpen,\n onOpenChange,\n constrainWidth,\n disableTriggerClick,\n forceComponent = \"auto\",\n \"data-testid\": testId,\n}: ResponsiveTooltipProps) {\n const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\n\n if (content === \"\") return null;\n\n let usePopover: boolean;\n switch (forceComponent) {\n case \"popover\":\n usePopover = true;\n break;\n case \"tooltip\":\n usePopover = false;\n break;\n default:\n usePopover = isMobile;\n break;\n }\n\n if (!usePopover) {\n return (\n <Tooltip\n children={children}\n content={content}\n placement={placement}\n align={align}\n arrow={arrow}\n delay={delay}\n isDisabled={isDisabled}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n disableTriggerClick={disableTriggerClick}\n data-testid={testId}\n />\n );\n }\n\n return (\n <Popover\n trigger={children}\n side={placement}\n align={align}\n arrow={arrow}\n constrainWidth={constrainWidth}\n isDisabled={isDisabled}\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n data-testid={testId}\n >\n {content}\n </Popover>\n );\n}\n\nResponsiveTooltip.displayName = \"ProtonUIResponsiveTooltip\";\n"],"names":["ResponsiveTooltip","children","content","placement","align","arrow","delay","isDisabled","open","defaultOpen","onOpenChange","constrainWidth","disableTriggerClick","forceComponent","testId","isMobile","useBreakpoint","BREAKPOINTS","usePopover","jsx","Popover","Tooltip"],"mappings":"iTA+BO,SAASA,EAAkB,CAChC,SAAAC,EACA,QAAAC,EACA,UAAAC,EAAY,MACZ,MAAAC,EAAQ,SACR,MAAAC,EACA,MAAAC,EAAQ,IACR,WAAAC,EACA,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,eAAAC,EACA,oBAAAC,EACA,eAAAC,EAAiB,OACjB,cAAeC,CACjB,EAA2B,CACzB,MAAMC,EAAWC,EAAAA,cAAcC,EAAAA,YAAY,KAAK,EAEhD,GAAIf,IAAY,GAAI,OAAO,KAE3B,IAAIgB,EACJ,OAAQL,EAAA,CACN,IAAK,UACHK,EAAa,GACb,MACF,IAAK,UACHA,EAAa,GACb,MACF,QACEA,EAAaH,EACb,KAAA,CAGJ,OAAKG,EAmBHC,EAAAA,kBAAAA,IAACC,EAAAA,QAAA,CACC,QAASnB,EACT,KAAME,EACN,MAAAC,EACA,MAAAC,EACA,eAAAM,EACA,WAAAJ,EACA,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,cAAaI,EAEZ,SAAAZ,CAAA,CAAA,EA7BDiB,EAAAA,kBAAAA,IAACE,EAAAA,QAAA,CACC,SAAApB,EACA,QAAAC,EACA,UAAAC,EACA,MAAAC,EACA,MAAAC,EACA,MAAAC,EACA,WAAAC,EACA,YAAAE,EACA,aAAAC,EACA,oBAAAE,EACA,cAAaE,CAAA,CAAA,CAqBrB,CAEAd,EAAkB,YAAc"}

package/dist/components/Tooltip/ResponsiveTooltip.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ResponsiveTooltip.es.js","sources":["../../../src/components/Tooltip/ResponsiveTooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tooltip, TooltipProps, TooltipPlacement } from \"./Tooltip\";\nimport { Popover, PopoverProps, ~~PopoverSide~~ } from \"../Popover/Popover\";\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\n\nexport interface ResponsiveTooltipProps\n extends Omit<TooltipProps, \"placement\">,\n Omit<PopoverProps, \"trigger\" \| \"children\" \| \"side\"> {\n /*\n Placement/side of the tooltip/popover.\n * @default \"top\"\n /\n placement?: TooltipPlacement ~~\| PopoverSide~~;\n /\n Force a specific component type.\n * @default \"auto\"\n /\n forceComponent?: \"tooltip\" \| \"popover\" \| \"auto\";\n}\n\n/\n A responsive component that automatically renders as Tooltip on desktop\n * and Popover on mobile devices.\n \n API:\n * - {@link ResponsiveTooltipProps}\n * - @extends {@link TooltipProps} \n * - @extends {@link PopoverProps}\n */\nexport function ResponsiveTooltip({\n children,\n content,\n placement = \"top\",\n align = \"center\",\n arrow,\n delay = 100,\n isDisabled,\n open,\n defaultOpen,\n onOpenChange,\n constrainWidth,\n disableTriggerClick,\n forceComponent = \"auto\",\n \"data-testid\": testId,\n}: ResponsiveTooltipProps) {\n const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\n\n if (content === \"\") return null;\n\n let usePopover: boolean;\n switch (forceComponent) {\n case \"popover\":\n usePopover = true;\n break;\n case \"tooltip\":\n usePopover = false;\n break;\n default:\n usePopover = isMobile;\n break;\n }\n\n if (!usePopover) {\n return (\n <Tooltip\n children={children}\n content={content}\n placement={placement}\n align={align}\n arrow={arrow}\n delay={delay}\n isDisabled={isDisabled}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n disableTriggerClick={disableTriggerClick}\n data-testid={testId}\n />\n );\n }\n\n return (\n <Popover\n trigger={children}\n side={placement}\n align={align}\n arrow={arrow}\n constrainWidth={constrainWidth}\n isDisabled={isDisabled}\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n data-testid={testId}\n >\n {content}\n </Popover>\n );\n}\n\nResponsiveTooltip.displayName = \"ProtonUIResponsiveTooltip\";\n"],"names":["ResponsiveTooltip","children","content","placement","align","arrow","delay","isDisabled","open","defaultOpen","onOpenChange","constrainWidth","disableTriggerClick","forceComponent","testId","isMobile","useBreakpoint","BREAKPOINTS","usePopover","jsx","Popover","Tooltip"],"mappings":";;;;;AA+BO,SAASA,EAAkB;AAAA,EAChC,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,YAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,eAAeC;AACjB,GAA2B;AACzB,QAAMC,IAAWC,EAAcC,EAAY,KAAK;AAEhD,MAAIf,MAAY,GAAI,QAAO;AAE3B,MAAIgB;AACJ,UAAQL,GAAA;AAAA,IACN,KAAK;AACH,MAAAK,IAAa;AACb;AAAA,IACF,KAAK;AACH,MAAAA,IAAa;AACb;AAAA,IACF;AACE,MAAAA,IAAaH;AACb;AAAA,EAAA;AAGJ,SAAKG,IAmBHC,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAASnB;AAAA,MACT,MAAME;AAAA,MACN,OAAAC;AAAA,MACA,OAAAC;AAAA,MACA,gBAAAM;AAAA,MACA,YAAAJ;AAAA,MACA,MAAAC;AAAA,MACA,aAAAC;AAAA,MACA,cAAAC;AAAA,MACA,eAAaI;AAAA,MAEZ,UAAAZ;AAAA,IAAA;AAAA,EAAA,IA7BDiB,gBAAAA,EAAAA;AAAAA,IAACE;AAAA,IAAA;AAAA,MACC,UAAApB;AAAA,MACA,SAAAC;AAAA,MACA,WAAAC;AAAA,MACA,OAAAC;AAAA,MACA,OAAAC;AAAA,MACA,OAAAC;AAAA,MACA,YAAAC;AAAA,MACA,aAAAE;AAAA,MACA,cAAAC;AAAA,MACA,qBAAAE;AAAA,MACA,eAAaE;AAAA,IAAA;AAAA,EAAA;AAqBrB;AAEAd,EAAkB,cAAc;"}
1	+ {"version":3,"file":"ResponsiveTooltip.es.js","sources":["../../../src/components/Tooltip/ResponsiveTooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tooltip, TooltipProps, TooltipPlacement } from \"./Tooltip\";\nimport { Popover, PopoverProps } from \"../Popover/Popover\";\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\n\nexport interface ResponsiveTooltipProps\n extends Omit<TooltipProps, \"placement\">,\n Omit<PopoverProps, \"trigger\" \| \"children\" \| \"side\"> {\n /*\n Placement/side of the tooltip/popover.\n * @default \"top\"\n /\n placement?: TooltipPlacement;\n /\n Force a specific component type.\n * @default \"auto\"\n /\n forceComponent?: \"tooltip\" \| \"popover\" \| \"auto\";\n}\n\n/\n A responsive component that automatically renders as Tooltip on desktop\n * and Popover on mobile devices.\n \n API:\n * - {@link ResponsiveTooltipProps}\n * - @extends {@link TooltipProps} \n * - @extends {@link PopoverProps}\n */\nexport function ResponsiveTooltip({\n children,\n content,\n placement = \"top\",\n align = \"center\",\n arrow,\n delay = 100,\n isDisabled,\n open,\n defaultOpen,\n onOpenChange,\n constrainWidth,\n disableTriggerClick,\n forceComponent = \"auto\",\n \"data-testid\": testId,\n}: ResponsiveTooltipProps) {\n const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\n\n if (content === \"\") return null;\n\n let usePopover: boolean;\n switch (forceComponent) {\n case \"popover\":\n usePopover = true;\n break;\n case \"tooltip\":\n usePopover = false;\n break;\n default:\n usePopover = isMobile;\n break;\n }\n\n if (!usePopover) {\n return (\n <Tooltip\n children={children}\n content={content}\n placement={placement}\n align={align}\n arrow={arrow}\n delay={delay}\n isDisabled={isDisabled}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n disableTriggerClick={disableTriggerClick}\n data-testid={testId}\n />\n );\n }\n\n return (\n <Popover\n trigger={children}\n side={placement}\n align={align}\n arrow={arrow}\n constrainWidth={constrainWidth}\n isDisabled={isDisabled}\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n data-testid={testId}\n >\n {content}\n </Popover>\n );\n}\n\nResponsiveTooltip.displayName = \"ProtonUIResponsiveTooltip\";\n"],"names":["ResponsiveTooltip","children","content","placement","align","arrow","delay","isDisabled","open","defaultOpen","onOpenChange","constrainWidth","disableTriggerClick","forceComponent","testId","isMobile","useBreakpoint","BREAKPOINTS","usePopover","jsx","Popover","Tooltip"],"mappings":";;;;;AA+BO,SAASA,EAAkB;AAAA,EAChC,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,YAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,eAAeC;AACjB,GAA2B;AACzB,QAAMC,IAAWC,EAAcC,EAAY,KAAK;AAEhD,MAAIf,MAAY,GAAI,QAAO;AAE3B,MAAIgB;AACJ,UAAQL,GAAA;AAAA,IACN,KAAK;AACH,MAAAK,IAAa;AACb;AAAA,IACF,KAAK;AACH,MAAAA,IAAa;AACb;AAAA,IACF;AACE,MAAAA,IAAaH;AACb;AAAA,EAAA;AAGJ,SAAKG,IAmBHC,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAASnB;AAAA,MACT,MAAME;AAAA,MACN,OAAAC;AAAA,MACA,OAAAC;AAAA,MACA,gBAAAM;AAAA,MACA,YAAAJ;AAAA,MACA,MAAAC;AAAA,MACA,aAAAC;AAAA,MACA,cAAAC;AAAA,MACA,eAAaI;AAAA,MAEZ,UAAAZ;AAAA,IAAA;AAAA,EAAA,IA7BDiB,gBAAAA,EAAAA;AAAAA,IAACE;AAAA,IAAA;AAAA,MACC,UAAApB;AAAA,MACA,SAAAC;AAAA,MACA,WAAAC;AAAA,MACA,OAAAC;AAAA,MACA,OAAAC;AAAA,MACA,OAAAC;AAAA,MACA,YAAAC;AAAA,MACA,aAAAE;AAAA,MACA,cAAAC;AAAA,MACA,qBAAAE;AAAA,MACA,eAAaE;AAAA,IAAA;AAAA,EAAA;AAqBrB;AAEAd,EAAkB,cAAc;"}

package/dist/components/Tooltip/Tooltip.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.cjs.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { CSSProperties, forwardRef, ReactNode, useRef, useState } from \"react\";\nimport { Tooltip as RadixTooltip } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\n\nimport { Overlay } from \"../Overlay/Overlay\";\nimport \"./Tooltip.css\";\nimport \"../Elevation/Elevation.css\";\n\n/** ~~Radix~~ ~~`Tooltip.Content` `side` /\nexport type TooltipPlacement~~ = \"~~top~~\" \| \"~~right~~\" \| \"~~bottom~~\" \| \"~~left\";\n/* Radix `Tooltip.Content` `~~align~~` /\nexport type TooltipAlign =~~ \"~~start\"~~ \| \"center\" \| \"end\";\n\nexport interface TooltipContentProps {\n /* The content of the tooltip. /\n content: string \| ReactNode;\n /* Whether to show an arrow pointing to the tooltip. /\n arrow?: boolean;\n /* The placement of the tooltip. /\n placement?: TooltipPlacement;\n /* The alignment of the tooltip.\n * @see {@link TooltipAlign}\n * @default \"center\"\n * /\n align?: TooltipAlign;\n /* The test ID for the tooltip. /\n \"data-testid\"~~?: string;\n}~~\n\nconst TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(\n (\n {\n content,\n arrow,\n placement = \"top\",\n align = \"center\",\n \"data-testid\": testId,\n },\n ref,\n ) => {\n const { style, className } = useTheme();\n\n return (\n <RadixTooltip.Content\n ref={ref}\n side={placement}\n align={align}\n className={csx(\"proton__Tooltip\", \"proton-Elevation--glass\", className)}\n style={style as CSSProperties}\n sideOffset={8}\n data-testid={testId}\n >\n <Overlay\n arrow={\n arrow && (\n <RadixTooltip.Arrow width={8} height={8}>\n <svg width={8} height={8} viewBox=\"0 0 8 8\">\n <path d=\"M0 0 L4 4 L8 0\" />\n </svg>\n </RadixTooltip.Arrow>\n )\n }\n >\n {content}\n </Overlay>\n </RadixTooltip.Content>\n );\n },\n);\n\nTooltipContent.displayName = \"ProtonUITooltipContent\";\n\nexport interface TooltipProps {\n /\n Whether to show an arrow pointing to the tooltip.\n * @default true\n /\n arrow?: boolean;\n /\n The children to display in the tooltip.\n /\n children: ReactNode;\n /\n The content to display in the tooltip. Zero-length titles string are never displayed.\n /\n content: string \| ReactNode;\n /\n A test ID.\n /\n \"data-testid\"?: string;\n /\n Side of the trigger to place the tooltip.\n * @see {@link TooltipPlacement}\n * @default \"top\"\n /\n placement?: TooltipPlacement;\n /\n Alignment along the side.\n * @see {@link TooltipAlign}\n * @default \"center\"\n /\n align?: TooltipAlign;\n /\n Whether to disable the trigger click feature.\n * This is useful when using an info only Tooltip that might wrap a clickable element.\n /\n disableTriggerClick?: boolean;\n /\n Whether the tooltip is disabled.\n /\n isDisabled?: boolean;\n /\n Delay before showing the tooltip (in milliseconds).\n * @default 100\n /\n delay?: number;\n /\n Whether the tooltip is open by default.\n * @default false\n /\n defaultOpen?: boolean;\n /\n The callback function to call when the tooltip is opened or closed.\n /\n onOpenChange?: (open: boolean) => void;\n}\n\n/\n A component that displays a tooltip when the user hovers over the trigger.\n * For mobile, use Popover instead.\n * API:\n * - {@link TooltipProps}\n \n @example\n * ```tsx\n <Tooltipcontent={...} placement=\"top\" arrow isDisabled={disabled}>\n {children}\n </Tooltip>\n * ```\n */\nexport function Tooltip({\n arrow = true,\n children,\n content,\n delay = 100,\n placement = \"top\",\n align = \"center\",\n isDisabled,\n defaultOpen = false,\n onOpenChange,\n disableTriggerClick,\n \"data-testid\": testId,\n}: TooltipProps) {\n const [isOpen, setIsOpen] = useState(defaultOpen);\n const triggerClickRef = useRef<boolean>(false);\n const hasHovered = useRef<boolean>(false);\n\n if (content === \"\") return null;\n\n const handleOpenChange = (openState: boolean) => {\n // When opened via hover, we want to disable the trigger click feature as it causes\n // the tooltip state to get out of sync with the trigger state.\n if (openState && !triggerClickRef.current) hasHovered.current = true;\n\n if (onOpenChange) onOpenChange(openState);\n\n // If the tooltip is clicked, it manually calls setIsOpen, so we don't want to call\n // it again here.\n if (!triggerClickRef.current) setIsOpen(openState);\n triggerClickRef.current = false;\n };\n\n return (\n <RadixTooltip.Provider>\n <RadixTooltip.Root\n open={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={handleOpenChange}\n delayDuration={delay}\n >\n <RadixTooltip.Trigger asChild>\n {disableTriggerClick ? (\n <span aria-label=\"Show tooltip\" className=\"proton__Tooltip-trigger\">\n {children}\n </span>\n ) : (\n <div\n role=\"button\"\n aria-label=\"Show tooltip\"\n data-hovered={isOpen}\n onClick={() => {\n if (disableTriggerClick \|\| isDisabled) return;\n\n // Once hovered it's safe to assume the user isn't trying to use via a touch device,\n // so we can safely disable the trigger click feature.\n if (hasHovered.current) return;\n\n triggerClickRef.current = true;\n setIsOpen(!isOpen);\n }}\n className=\"proton__Tooltip-trigger\"\n >\n {children}\n </div>\n )}\n </RadixTooltip.Trigger>\n {!isDisabled && (\n <RadixTooltip.Portal>\n <TooltipContent\n content={content}\n placement={placement}\n align={align}\n arrow={arrow}\n data-testid={testId}\n />\n </RadixTooltip.Portal>\n )}\n </RadixTooltip.Root>\n </RadixTooltip.Provider>\n );\n}\n\nTooltip.displayName = \"ProtonUITooltip\";\n"],"names":["TooltipContent","forwardRef","content","arrow","placement","align","testId","ref","style","className","useTheme","jsx","RadixTooltip","csx","Overlay","Tooltip","children","delay","isDisabled","defaultOpen","onOpenChange","disableTriggerClick","isOpen","setIsOpen","useState","triggerClickRef","useRef","hasHovered","handleOpenChange","openState","jsxs"],"mappings":"~~wXAgCA~~,MAAMA,EAAiBC,EAAAA,WACrB,CACE,CACE,QAAAC,EACA,MAAAC,EACA,UAAAC,EAAY,MACZ,MAAAC,EAAQ,SACR,cAAeC,CAAA,EAEjBC,IACG,CACH,KAAM,CAAE,MAAAC,EAAO,UAAAC,CAAA,EAAcC,WAAA,EAE7B,OACEC,EAAAA,kBAAAA,IAACC,EAAAA,QAAa,QAAb,CACC,IAAAL,EACA,KAAMH,EACN,MAAAC,EACA,UAAWQ,EAAAA,IAAI,kBAAmB,0BAA2BJ,CAAS,EACtE,MAAAD,EACA,WAAY,EACZ,cAAaF,EAEb,SAAAK,EAAAA,kBAAAA,IAACG,EAAAA,QAAA,CACC,MACEX,GACEQ,EAAAA,kBAAAA,IAACC,EAAAA,QAAa,MAAb,CAAmB,MAAO,EAAG,OAAQ,EACpC,SAAAD,EAAAA,kBAAAA,IAAC,OAAI,MAAO,EAAG,OAAQ,EAAG,QAAQ,UAChC,iCAAC,OAAA,CAAK,EAAE,gBAAA,CAAiB,CAAA,CAC3B,CAAA,CACF,EAIH,SAAAT,CAAA,CAAA,CACH,CAAA,CAGN,CACF,EAEAF,EAAe,YAAc,~~yBAsEtB~~,SAASe,EAAQ,CACtB,MAAAZ,EAAQ,GACR,SAAAa,EACA,QAAAd,EACA,MAAAe,EAAQ,IACR,UAAAb,EAAY,MACZ,MAAAC,EAAQ,SACR,WAAAa,EACA,YAAAC,EAAc,GACd,aAAAC,EACA,oBAAAC,EACA,cAAef,CACjB,EAAiB,CACf,KAAM,CAACgB,EAAQC,CAAS,EAAIC,EAAAA,SAASL,CAAW,EAC1CM,EAAkBC,EAAAA,OAAgB,EAAK,EACvCC,EAAaD,EAAAA,OAAgB,EAAK,EAExC,GAAIxB,IAAY,GAAI,OAAO,KAE3B,MAAM0B,EAAoBC,GAAuB,CAG3CA,GAAa,CAACJ,EAAgB,YAAoB,QAAU,IAE5DL,KAA2BS,CAAS,EAInCJ,EAAgB,SAASF,EAAUM,CAAS,EACjDJ,EAAgB,QAAU,EAC5B,EAEA,OACEd,EAAAA,kBAAAA,IAACC,EAAAA,QAAa,SAAb,CACC,SAAAkB,EAAAA,kBAAAA,KAAClB,EAAAA,QAAa,KAAb,CACC,KAAMU,EACN,YAAAH,EACA,aAAcS,EACd,cAAeX,EAEf,SAAA,CAAAN,EAAAA,kBAAAA,IAACC,EAAAA,QAAa,QAAb,CAAqB,QAAO,GAC1B,SAAAS,EACCV,EAAAA,kBAAAA,IAAC,OAAA,CAAK,aAAW,eAAe,UAAU,0BACvC,SAAAK,EACH,EAEAL,EAAAA,kBAAAA,IAAC,MAAA,CACC,KAAK,SACL,aAAW,eACX,eAAcW,EACd,QAAS,IAAM,CACTD,GAAuBH,GAIvBS,EAAW,UAEfF,EAAgB,QAAU,GAC1BF,EAAU,CAACD,CAAM,EACnB,EACA,UAAU,0BAET,SAAAN,CAAA,CAAA,EAGP,EACC,CAACE,GACAP,EAAAA,kBAAAA,IAACC,EAAAA,QAAa,OAAb,CACC,SAAAD,EAAAA,kBAAAA,IAACX,EAAA,CACC,QAAAE,EACA,UAAAE,EACA,MAAAC,EACA,MAAAF,EACA,cAAaG,CAAA,CAAA,CACf,CACF,CAAA,CAAA,CAAA,EAGN,CAEJ,CAEAS,EAAQ,YAAc"}
1	+ {"version":3,"file":"Tooltip.cjs.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { CSSProperties, forwardRef, ReactNode, useRef, useState } from \"react\";\nimport { Tooltip as RadixTooltip } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\nimport type { RadixAlign, RadixSide } from \"../../constants/placement\";\n\nimport { Overlay } from \"../Overlay/Overlay\";\nimport \"./Tooltip.css\";\nimport \"../Elevation/Elevation.css\";\n\ntype TooltipContentProps = Pick<\n TooltipProps,\n \"content\" \| \"arrow\" \| \"placement\" \| \"align\" \| \"data-testid\"\n>;\n\nconst TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(\n (\n {\n content,\n arrow,\n placement = \"top\",\n align = \"center\",\n \"data-testid\": testId,\n },\n ref,\n ) => {\n const { style, className } = useTheme();\n\n return (\n <RadixTooltip.Content\n ref={ref}\n side={placement}\n align={align}\n className={csx(\"proton__Tooltip\", \"proton-Elevation--glass\", className)}\n style={style as CSSProperties}\n sideOffset={8}\n data-testid={testId}\n >\n <Overlay\n arrow={\n arrow && (\n <RadixTooltip.Arrow width={8} height={8}>\n <svg width={8} height={8} viewBox=\"0 0 8 8\">\n <path d=\"M0 0 L4 4 L8 0\" />\n </svg>\n </RadixTooltip.Arrow>\n )\n }\n >\n {content}\n </Overlay>\n </RadixTooltip.Content>\n );\n },\n);\n\nTooltipContent.displayName = \"ProtonUITooltipContent\";\n\n/** Radix `Tooltip.Content` `side` /\nexport type TooltipPlacement = RadixSide;\n/* Radix `Tooltip.Content` `align` /\nexport type TooltipAlign = RadixAlign;\n\nexport interface TooltipProps {\n /\n Whether to show an arrow pointing to the tooltip.\n * @default true\n /\n arrow?: boolean;\n /\n The children to display in the tooltip.\n /\n children: ReactNode;\n /\n The content to display in the tooltip. Zero-length titles string are never displayed.\n /\n content: string \| ReactNode;\n /\n A test ID.\n /\n \"data-testid\"?: string;\n /\n Side of the trigger to place the tooltip.\n * @see {@link TooltipPlacement}\n * @default \"top\"\n /\n placement?: TooltipPlacement;\n /\n Alignment along the side.\n * @see {@link TooltipAlign}\n * @default \"center\"\n /\n align?: TooltipAlign;\n /\n Whether to disable the trigger click feature.\n * This is useful when using an info only Tooltip that might wrap a clickable element.\n /\n disableTriggerClick?: boolean;\n /\n Whether the tooltip is disabled.\n /\n isDisabled?: boolean;\n /\n Delay before showing the tooltip (in milliseconds).\n * @default 100\n /\n delay?: number;\n /\n Whether the tooltip is open by default.\n * @default false\n /\n defaultOpen?: boolean;\n /\n The callback function to call when the tooltip is opened or closed.\n /\n onOpenChange?: (open: boolean) => void;\n}\n\n/\n A component that displays a tooltip when the user hovers over the trigger.\n * For mobile, use Popover instead.\n * API:\n * - {@link TooltipProps}\n \n @example\n * ```tsx\n <Tooltipcontent={...} placement=\"top\" arrow isDisabled={disabled}>\n {children}\n </Tooltip>\n * ```\n */\nexport function Tooltip({\n arrow = true,\n children,\n content,\n delay = 100,\n placement = \"top\",\n align = \"center\",\n isDisabled,\n defaultOpen = false,\n onOpenChange,\n disableTriggerClick,\n \"data-testid\": testId,\n}: TooltipProps) {\n const [isOpen, setIsOpen] = useState(defaultOpen);\n const triggerClickRef = useRef<boolean>(false);\n const hasHovered = useRef<boolean>(false);\n\n if (content === \"\") return null;\n\n const handleOpenChange = (openState: boolean) => {\n // When opened via hover, we want to disable the trigger click feature as it causes\n // the tooltip state to get out of sync with the trigger state.\n if (openState && !triggerClickRef.current) hasHovered.current = true;\n\n if (onOpenChange) onOpenChange(openState);\n\n // If the tooltip is clicked, it manually calls setIsOpen, so we don't want to call\n // it again here.\n if (!triggerClickRef.current) setIsOpen(openState);\n triggerClickRef.current = false;\n };\n\n return (\n <RadixTooltip.Provider>\n <RadixTooltip.Root\n open={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={handleOpenChange}\n delayDuration={delay}\n >\n <RadixTooltip.Trigger asChild>\n {disableTriggerClick ? (\n <span aria-label=\"Show tooltip\" className=\"proton__Tooltip-trigger\">\n {children}\n </span>\n ) : (\n <div\n role=\"button\"\n aria-label=\"Show tooltip\"\n data-hovered={isOpen}\n onClick={() => {\n if (disableTriggerClick \|\| isDisabled) return;\n\n // Once hovered it's safe to assume the user isn't trying to use via a touch device,\n // so we can safely disable the trigger click feature.\n if (hasHovered.current) return;\n\n triggerClickRef.current = true;\n setIsOpen(!isOpen);\n }}\n className=\"proton__Tooltip-trigger\"\n >\n {children}\n </div>\n )}\n </RadixTooltip.Trigger>\n {!isDisabled && (\n <RadixTooltip.Portal>\n <TooltipContent\n content={content}\n placement={placement}\n align={align}\n arrow={arrow}\n data-testid={testId}\n />\n </RadixTooltip.Portal>\n )}\n </RadixTooltip.Root>\n </RadixTooltip.Provider>\n );\n}\n\nTooltip.displayName = \"ProtonUITooltip\";\n"],"names":["TooltipContent","forwardRef","content","arrow","placement","align","testId","ref","style","className","useTheme","jsx","RadixTooltip","csx","Overlay","Tooltip","children","delay","isDisabled","defaultOpen","onOpenChange","disableTriggerClick","isOpen","setIsOpen","useState","triggerClickRef","useRef","hasHovered","handleOpenChange","openState","jsxs"],"mappings":"wXAiBA,MAAMA,EAAiBC,EAAAA,WACrB,CACE,CACE,QAAAC,EACA,MAAAC,EACA,UAAAC,EAAY,MACZ,MAAAC,EAAQ,SACR,cAAeC,CAAA,EAEjBC,IACG,CACH,KAAM,CAAE,MAAAC,EAAO,UAAAC,CAAA,EAAcC,WAAA,EAE7B,OACEC,EAAAA,kBAAAA,IAACC,EAAAA,QAAa,QAAb,CACC,IAAAL,EACA,KAAMH,EACN,MAAAC,EACA,UAAWQ,EAAAA,IAAI,kBAAmB,0BAA2BJ,CAAS,EACtE,MAAAD,EACA,WAAY,EACZ,cAAaF,EAEb,SAAAK,EAAAA,kBAAAA,IAACG,EAAAA,QAAA,CACC,MACEX,GACEQ,EAAAA,kBAAAA,IAACC,EAAAA,QAAa,MAAb,CAAmB,MAAO,EAAG,OAAQ,EACpC,SAAAD,EAAAA,kBAAAA,IAAC,OAAI,MAAO,EAAG,OAAQ,EAAG,QAAQ,UAChC,iCAAC,OAAA,CAAK,EAAE,gBAAA,CAAiB,CAAA,CAC3B,CAAA,CACF,EAIH,SAAAT,CAAA,CAAA,CACH,CAAA,CAGN,CACF,EAEAF,EAAe,YAAc,yBA2EtB,SAASe,EAAQ,CACtB,MAAAZ,EAAQ,GACR,SAAAa,EACA,QAAAd,EACA,MAAAe,EAAQ,IACR,UAAAb,EAAY,MACZ,MAAAC,EAAQ,SACR,WAAAa,EACA,YAAAC,EAAc,GACd,aAAAC,EACA,oBAAAC,EACA,cAAef,CACjB,EAAiB,CACf,KAAM,CAACgB,EAAQC,CAAS,EAAIC,EAAAA,SAASL,CAAW,EAC1CM,EAAkBC,EAAAA,OAAgB,EAAK,EACvCC,EAAaD,EAAAA,OAAgB,EAAK,EAExC,GAAIxB,IAAY,GAAI,OAAO,KAE3B,MAAM0B,EAAoBC,GAAuB,CAG3CA,GAAa,CAACJ,EAAgB,YAAoB,QAAU,IAE5DL,KAA2BS,CAAS,EAInCJ,EAAgB,SAASF,EAAUM,CAAS,EACjDJ,EAAgB,QAAU,EAC5B,EAEA,OACEd,EAAAA,kBAAAA,IAACC,EAAAA,QAAa,SAAb,CACC,SAAAkB,EAAAA,kBAAAA,KAAClB,EAAAA,QAAa,KAAb,CACC,KAAMU,EACN,YAAAH,EACA,aAAcS,EACd,cAAeX,EAEf,SAAA,CAAAN,EAAAA,kBAAAA,IAACC,EAAAA,QAAa,QAAb,CAAqB,QAAO,GAC1B,SAAAS,EACCV,EAAAA,kBAAAA,IAAC,OAAA,CAAK,aAAW,eAAe,UAAU,0BACvC,SAAAK,EACH,EAEAL,EAAAA,kBAAAA,IAAC,MAAA,CACC,KAAK,SACL,aAAW,eACX,eAAcW,EACd,QAAS,IAAM,CACTD,GAAuBH,GAIvBS,EAAW,UAEfF,EAAgB,QAAU,GAC1BF,EAAU,CAACD,CAAM,EACnB,EACA,UAAU,0BAET,SAAAN,CAAA,CAAA,EAGP,EACC,CAACE,GACAP,EAAAA,kBAAAA,IAACC,EAAAA,QAAa,OAAb,CACC,SAAAD,EAAAA,kBAAAA,IAACX,EAAA,CACC,QAAAE,EACA,UAAAE,EACA,MAAAC,EACA,MAAAF,EACA,cAAaG,CAAA,CAAA,CACf,CACF,CAAA,CAAA,CAAA,EAGN,CAEJ,CAEAS,EAAQ,YAAc"}

package/dist/components/Tooltip/Tooltip.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.es.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { CSSProperties, forwardRef, ReactNode, useRef, useState } from \"react\";\nimport { Tooltip as RadixTooltip } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\n\nimport { Overlay } from \"../Overlay/Overlay\";\nimport \"./Tooltip.css\";\nimport \"../Elevation/Elevation.css\";\n\n/** ~~Radix~~ ~~`Tooltip.Content` `side` /\nexport type TooltipPlacement~~ = \"~~top~~\" \| \"~~right~~\" \| \"~~bottom~~\" \| \"~~left\";\n/* Radix `Tooltip.Content` `~~align~~` /\nexport type TooltipAlign =~~ \"~~start\"~~ \| \"center\" \| \"end\";\n\nexport interface TooltipContentProps {\n /* The content of the tooltip. /\n content: string \| ReactNode;\n /* Whether to show an arrow pointing to the tooltip. /\n arrow?: boolean;\n /* The placement of the tooltip. /\n placement?: TooltipPlacement;\n /* The alignment of the tooltip.\n * @see {@link TooltipAlign}\n * @default \"center\"\n * /\n align?: TooltipAlign;\n /* The test ID for the tooltip. /\n \"data-testid\"~~?: string;\n}~~\n\nconst TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(\n (\n {\n content,\n arrow,\n placement = \"top\",\n align = \"center\",\n \"data-testid\": testId,\n },\n ref,\n ) => {\n const { style, className } = useTheme();\n\n return (\n <RadixTooltip.Content\n ref={ref}\n side={placement}\n align={align}\n className={csx(\"proton__Tooltip\", \"proton-Elevation--glass\", className)}\n style={style as CSSProperties}\n sideOffset={8}\n data-testid={testId}\n >\n <Overlay\n arrow={\n arrow && (\n <RadixTooltip.Arrow width={8} height={8}>\n <svg width={8} height={8} viewBox=\"0 0 8 8\">\n <path d=\"M0 0 L4 4 L8 0\" />\n </svg>\n </RadixTooltip.Arrow>\n )\n }\n >\n {content}\n </Overlay>\n </RadixTooltip.Content>\n );\n },\n);\n\nTooltipContent.displayName = \"ProtonUITooltipContent\";\n\nexport interface TooltipProps {\n /\n Whether to show an arrow pointing to the tooltip.\n * @default true\n /\n arrow?: boolean;\n /\n The children to display in the tooltip.\n /\n children: ReactNode;\n /\n The content to display in the tooltip. Zero-length titles string are never displayed.\n /\n content: string \| ReactNode;\n /\n A test ID.\n /\n \"data-testid\"?: string;\n /\n Side of the trigger to place the tooltip.\n * @see {@link TooltipPlacement}\n * @default \"top\"\n /\n placement?: TooltipPlacement;\n /\n Alignment along the side.\n * @see {@link TooltipAlign}\n * @default \"center\"\n /\n align?: TooltipAlign;\n /\n Whether to disable the trigger click feature.\n * This is useful when using an info only Tooltip that might wrap a clickable element.\n /\n disableTriggerClick?: boolean;\n /\n Whether the tooltip is disabled.\n /\n isDisabled?: boolean;\n /\n Delay before showing the tooltip (in milliseconds).\n * @default 100\n /\n delay?: number;\n /\n Whether the tooltip is open by default.\n * @default false\n /\n defaultOpen?: boolean;\n /\n The callback function to call when the tooltip is opened or closed.\n /\n onOpenChange?: (open: boolean) => void;\n}\n\n/\n A component that displays a tooltip when the user hovers over the trigger.\n * For mobile, use Popover instead.\n * API:\n * - {@link TooltipProps}\n \n @example\n * ```tsx\n <Tooltipcontent={...} placement=\"top\" arrow isDisabled={disabled}>\n {children}\n </Tooltip>\n * ```\n */\nexport function Tooltip({\n arrow = true,\n children,\n content,\n delay = 100,\n placement = \"top\",\n align = \"center\",\n isDisabled,\n defaultOpen = false,\n onOpenChange,\n disableTriggerClick,\n \"data-testid\": testId,\n}: TooltipProps) {\n const [isOpen, setIsOpen] = useState(defaultOpen);\n const triggerClickRef = useRef<boolean>(false);\n const hasHovered = useRef<boolean>(false);\n\n if (content === \"\") return null;\n\n const handleOpenChange = (openState: boolean) => {\n // When opened via hover, we want to disable the trigger click feature as it causes\n // the tooltip state to get out of sync with the trigger state.\n if (openState && !triggerClickRef.current) hasHovered.current = true;\n\n if (onOpenChange) onOpenChange(openState);\n\n // If the tooltip is clicked, it manually calls setIsOpen, so we don't want to call\n // it again here.\n if (!triggerClickRef.current) setIsOpen(openState);\n triggerClickRef.current = false;\n };\n\n return (\n <RadixTooltip.Provider>\n <RadixTooltip.Root\n open={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={handleOpenChange}\n delayDuration={delay}\n >\n <RadixTooltip.Trigger asChild>\n {disableTriggerClick ? (\n <span aria-label=\"Show tooltip\" className=\"proton__Tooltip-trigger\">\n {children}\n </span>\n ) : (\n <div\n role=\"button\"\n aria-label=\"Show tooltip\"\n data-hovered={isOpen}\n onClick={() => {\n if (disableTriggerClick \|\| isDisabled) return;\n\n // Once hovered it's safe to assume the user isn't trying to use via a touch device,\n // so we can safely disable the trigger click feature.\n if (hasHovered.current) return;\n\n triggerClickRef.current = true;\n setIsOpen(!isOpen);\n }}\n className=\"proton__Tooltip-trigger\"\n >\n {children}\n </div>\n )}\n </RadixTooltip.Trigger>\n {!isDisabled && (\n <RadixTooltip.Portal>\n <TooltipContent\n content={content}\n placement={placement}\n align={align}\n arrow={arrow}\n data-testid={testId}\n />\n </RadixTooltip.Portal>\n )}\n </RadixTooltip.Root>\n </RadixTooltip.Provider>\n );\n}\n\nTooltip.displayName = \"ProtonUITooltip\";\n"],"names":["TooltipContent","forwardRef","content","arrow","placement","align","testId","ref","style","className","useTheme","jsx","RadixTooltip","csx","Overlay","Tooltip","children","delay","isDisabled","defaultOpen","onOpenChange","disableTriggerClick","isOpen","setIsOpen","useState","triggerClickRef","useRef","hasHovered","handleOpenChange","openState","jsxs"],"mappings":";;;;;;;;~~AAgCA~~,MAAMA,IAAiBC;AAAA,EACrB,CACE;AAAA,IACE,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,OAAAC,IAAQ;AAAA,IACR,eAAeC;AAAA,EAAA,GAEjBC,MACG;AACH,UAAM,EAAE,OAAAC,GAAO,WAAAC,EAAA,IAAcC,EAAA;AAE7B,WACEC,gBAAAA,EAAAA;AAAAA,MAACC,EAAa;AAAA,MAAb;AAAA,QACC,KAAAL;AAAA,QACA,MAAMH;AAAA,QACN,OAAAC;AAAA,QACA,WAAWQ,EAAI,mBAAmB,2BAA2BJ,CAAS;AAAA,QACtE,OAAAD;AAAA,QACA,YAAY;AAAA,QACZ,eAAaF;AAAA,QAEb,UAAAK,gBAAAA,EAAAA;AAAAA,UAACG;AAAA,UAAA;AAAA,YACC,OACEX,KACEQ,gBAAAA,EAAAA,IAACC,EAAa,OAAb,EAAmB,OAAO,GAAG,QAAQ,GACpC,UAAAD,gBAAAA,EAAAA,IAAC,SAAI,OAAO,GAAG,QAAQ,GAAG,SAAQ,WAChC,gCAAC,QAAA,EAAK,GAAE,iBAAA,CAAiB,EAAA,CAC3B,EAAA,CACF;AAAA,YAIH,UAAAT;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AACF;AAEAF,EAAe,cAAc;~~AAsEtB~~,SAASe,EAAQ;AAAA,EACtB,OAAAZ,IAAQ;AAAA,EACR,UAAAa;AAAA,EACA,SAAAd;AAAA,EACA,OAAAe,IAAQ;AAAA,EACR,WAAAb,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,YAAAa;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,cAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,eAAef;AACjB,GAAiB;AACf,QAAM,CAACgB,GAAQC,CAAS,IAAIC,EAASL,CAAW,GAC1CM,IAAkBC,EAAgB,EAAK,GACvCC,IAAaD,EAAgB,EAAK;AAExC,MAAIxB,MAAY,GAAI,QAAO;AAE3B,QAAM0B,IAAmB,CAACC,MAAuB;AAG/C,IAAIA,KAAa,CAACJ,EAAgB,cAAoB,UAAU,KAE5DL,OAA2BS,CAAS,GAInCJ,EAAgB,WAASF,EAAUM,CAAS,GACjDJ,EAAgB,UAAU;AAAA,EAC5B;AAEA,SACEd,gBAAAA,EAAAA,IAACC,EAAa,UAAb,EACC,UAAAkB,gBAAAA,EAAAA;AAAAA,IAAClB,EAAa;AAAA,IAAb;AAAA,MACC,MAAMU;AAAA,MACN,aAAAH;AAAA,MACA,cAAcS;AAAA,MACd,eAAeX;AAAA,MAEf,UAAA;AAAA,QAAAN,gBAAAA,EAAAA,IAACC,EAAa,SAAb,EAAqB,SAAO,IAC1B,UAAAS,IACCV,gBAAAA,EAAAA,IAAC,QAAA,EAAK,cAAW,gBAAe,WAAU,2BACvC,UAAAK,GACH,IAEAL,gBAAAA,EAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,gBAAcW;AAAA,YACd,SAAS,MAAM;AACb,cAAID,KAAuBH,KAIvBS,EAAW,YAEfF,EAAgB,UAAU,IAC1BF,EAAU,CAACD,CAAM;AAAA,YACnB;AAAA,YACA,WAAU;AAAA,YAET,UAAAN;AAAA,UAAA;AAAA,QAAA,GAGP;AAAA,QACC,CAACE,KACAP,gBAAAA,EAAAA,IAACC,EAAa,QAAb,EACC,UAAAD,gBAAAA,EAAAA;AAAAA,UAACX;AAAA,UAAA;AAAA,YACC,SAAAE;AAAA,YACA,WAAAE;AAAA,YACA,OAAAC;AAAA,YACA,OAAAF;AAAA,YACA,eAAaG;AAAA,UAAA;AAAA,QAAA,EACf,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ;AAEAS,EAAQ,cAAc;"}
1	+ {"version":3,"file":"Tooltip.es.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { CSSProperties, forwardRef, ReactNode, useRef, useState } from \"react\";\nimport { Tooltip as RadixTooltip } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\nimport type { RadixAlign, RadixSide } from \"../../constants/placement\";\n\nimport { Overlay } from \"../Overlay/Overlay\";\nimport \"./Tooltip.css\";\nimport \"../Elevation/Elevation.css\";\n\ntype TooltipContentProps = Pick<\n TooltipProps,\n \"content\" \| \"arrow\" \| \"placement\" \| \"align\" \| \"data-testid\"\n>;\n\nconst TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(\n (\n {\n content,\n arrow,\n placement = \"top\",\n align = \"center\",\n \"data-testid\": testId,\n },\n ref,\n ) => {\n const { style, className } = useTheme();\n\n return (\n <RadixTooltip.Content\n ref={ref}\n side={placement}\n align={align}\n className={csx(\"proton__Tooltip\", \"proton-Elevation--glass\", className)}\n style={style as CSSProperties}\n sideOffset={8}\n data-testid={testId}\n >\n <Overlay\n arrow={\n arrow && (\n <RadixTooltip.Arrow width={8} height={8}>\n <svg width={8} height={8} viewBox=\"0 0 8 8\">\n <path d=\"M0 0 L4 4 L8 0\" />\n </svg>\n </RadixTooltip.Arrow>\n )\n }\n >\n {content}\n </Overlay>\n </RadixTooltip.Content>\n );\n },\n);\n\nTooltipContent.displayName = \"ProtonUITooltipContent\";\n\n/** Radix `Tooltip.Content` `side` /\nexport type TooltipPlacement = RadixSide;\n/* Radix `Tooltip.Content` `align` /\nexport type TooltipAlign = RadixAlign;\n\nexport interface TooltipProps {\n /\n Whether to show an arrow pointing to the tooltip.\n * @default true\n /\n arrow?: boolean;\n /\n The children to display in the tooltip.\n /\n children: ReactNode;\n /\n The content to display in the tooltip. Zero-length titles string are never displayed.\n /\n content: string \| ReactNode;\n /\n A test ID.\n /\n \"data-testid\"?: string;\n /\n Side of the trigger to place the tooltip.\n * @see {@link TooltipPlacement}\n * @default \"top\"\n /\n placement?: TooltipPlacement;\n /\n Alignment along the side.\n * @see {@link TooltipAlign}\n * @default \"center\"\n /\n align?: TooltipAlign;\n /\n Whether to disable the trigger click feature.\n * This is useful when using an info only Tooltip that might wrap a clickable element.\n /\n disableTriggerClick?: boolean;\n /\n Whether the tooltip is disabled.\n /\n isDisabled?: boolean;\n /\n Delay before showing the tooltip (in milliseconds).\n * @default 100\n /\n delay?: number;\n /\n Whether the tooltip is open by default.\n * @default false\n /\n defaultOpen?: boolean;\n /\n The callback function to call when the tooltip is opened or closed.\n /\n onOpenChange?: (open: boolean) => void;\n}\n\n/\n A component that displays a tooltip when the user hovers over the trigger.\n * For mobile, use Popover instead.\n * API:\n * - {@link TooltipProps}\n \n @example\n * ```tsx\n <Tooltipcontent={...} placement=\"top\" arrow isDisabled={disabled}>\n {children}\n </Tooltip>\n * ```\n */\nexport function Tooltip({\n arrow = true,\n children,\n content,\n delay = 100,\n placement = \"top\",\n align = \"center\",\n isDisabled,\n defaultOpen = false,\n onOpenChange,\n disableTriggerClick,\n \"data-testid\": testId,\n}: TooltipProps) {\n const [isOpen, setIsOpen] = useState(defaultOpen);\n const triggerClickRef = useRef<boolean>(false);\n const hasHovered = useRef<boolean>(false);\n\n if (content === \"\") return null;\n\n const handleOpenChange = (openState: boolean) => {\n // When opened via hover, we want to disable the trigger click feature as it causes\n // the tooltip state to get out of sync with the trigger state.\n if (openState && !triggerClickRef.current) hasHovered.current = true;\n\n if (onOpenChange) onOpenChange(openState);\n\n // If the tooltip is clicked, it manually calls setIsOpen, so we don't want to call\n // it again here.\n if (!triggerClickRef.current) setIsOpen(openState);\n triggerClickRef.current = false;\n };\n\n return (\n <RadixTooltip.Provider>\n <RadixTooltip.Root\n open={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={handleOpenChange}\n delayDuration={delay}\n >\n <RadixTooltip.Trigger asChild>\n {disableTriggerClick ? (\n <span aria-label=\"Show tooltip\" className=\"proton__Tooltip-trigger\">\n {children}\n </span>\n ) : (\n <div\n role=\"button\"\n aria-label=\"Show tooltip\"\n data-hovered={isOpen}\n onClick={() => {\n if (disableTriggerClick \|\| isDisabled) return;\n\n // Once hovered it's safe to assume the user isn't trying to use via a touch device,\n // so we can safely disable the trigger click feature.\n if (hasHovered.current) return;\n\n triggerClickRef.current = true;\n setIsOpen(!isOpen);\n }}\n className=\"proton__Tooltip-trigger\"\n >\n {children}\n </div>\n )}\n </RadixTooltip.Trigger>\n {!isDisabled && (\n <RadixTooltip.Portal>\n <TooltipContent\n content={content}\n placement={placement}\n align={align}\n arrow={arrow}\n data-testid={testId}\n />\n </RadixTooltip.Portal>\n )}\n </RadixTooltip.Root>\n </RadixTooltip.Provider>\n );\n}\n\nTooltip.displayName = \"ProtonUITooltip\";\n"],"names":["TooltipContent","forwardRef","content","arrow","placement","align","testId","ref","style","className","useTheme","jsx","RadixTooltip","csx","Overlay","Tooltip","children","delay","isDisabled","defaultOpen","onOpenChange","disableTriggerClick","isOpen","setIsOpen","useState","triggerClickRef","useRef","hasHovered","handleOpenChange","openState","jsxs"],"mappings":"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"}

package/dist/constants.d.ts CHANGED Viewed

@@ -7,4 +7,10 @@ export declare const BREAKPOINTS: {
     X_LARGE: number;
 };
+/** Radix `align`*/
+export declare type RadixAlign = "start" | "center" | "end";
+/** Radix `side` */
+export declare type RadixSide = "top" | "right" | "bottom" | "left";
 export { }

package/dist/design/darkTheme/colors.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("../colors.cjs.js"),D="#f7f9fb",T=D,I="rgba(174, 175, 177, 0.21)",A={SUPER_DARK:"#111212",DARK:"#1e1f21",MEDIUM:"#232629",MEDIUM_LIGHT:"#2b2d30",LIGHT:"#43464a",LIGHTEST:"#63676b",SUPER_LIGHT:"#8a8e91",WHITE:"#f7f9fb"},E={SUPER_DARK:"#142736",DARK:"#22445d",MEDIUM:"#306082",MEDIUM_LIGHT:"#3e7ca8",LIGHT:"#5795c1",LIGHTEST:"#a2c4dd",SUPER_LIGHT:"#dae7f1",WHITE:"#f7f9fb"},L={BASE_COLOR:R.BACKGROUNDS.BLACK,BRAND:R.BRAND,GRAYSCALE:A,PRIMARY:R.BRAND_PRIMARY_SCALE,SECONDARY:E};exports.BORDER=T;exports.DARK_GRAYSCALE=A;exports.DARK_PALETTE=L;exports.DARK_SECONDARY=E;exports.ELEVATION=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("../colors.cjs.js"),A="#f7f9fb",L=A,T="rgba(174, 175, 177, 0.21)",E={SUPER_DARK:"#111212",DARK:"#1e1f21",MEDIUM:"#232629",MEDIUM_LIGHT:"#2b2d30",LIGHT:"#43464a",LIGHTEST:"#63676b",SUPER_LIGHT:"#8a8e91",WHITE:A},D={SUPER_DARK:"#142736",DARK:"#22445d",MEDIUM:"#306082",MEDIUM_LIGHT:"#3e7ca8",LIGHT:"#5795c1",LIGHTEST:"#a2c4dd",SUPER_LIGHT:"#dae7f1",WHITE:A},I={BASE_COLOR:R.BACKGROUNDS.BLACK,BRAND:R.BRAND,GRAYSCALE:E,PRIMARY:R.BRAND_PRIMARY_SCALE,SECONDARY:D};exports.BORDER=L;exports.DARK_GRAYSCALE=E;exports.DARK_PALETTE=I;exports.DARK_SECONDARY=D;exports.ELEVATION=T;
 //# sourceMappingURL=colors.cjs.js.map

package/dist/design/darkTheme/colors.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"colors.cjs.js","sources":["../../../src/design/darkTheme/colors.ts"],"sourcesContent":["import { BACKGROUNDS, BRAND, BRAND_PRIMARY_SCALE } from \"../colors\";\nimport type { ProtonColorScale, ProtonPalette } from \"../types\";\n\nconst WHITE = \"#f7f9fb\";\nexport const BORDER = WHITE;\nexport const ELEVATION = \"rgba(174, 175, 177, 0.21)\";\nexport const DARK_GRAYSCALE: ProtonColorScale = {\n SUPER_DARK: \"#111212\",\n DARK: \"#1e1f21\",\n MEDIUM: \"#232629\",\n MEDIUM_LIGHT: \"#2b2d30\",\n LIGHT: \"#43464a\",\n LIGHTEST: \"#63676b\",\n SUPER_LIGHT: \"#8a8e91\",\n WHITE: ~~\"#f7f9fb\"~~,\n};\n\nexport const DARK_SECONDARY = {\n SUPER_DARK: \"#142736\",\n DARK: \"#22445d\",\n MEDIUM: \"#306082\",\n MEDIUM_LIGHT: \"#3e7ca8\",\n LIGHT: \"#5795c1\",\n LIGHTEST: \"#a2c4dd\",\n SUPER_LIGHT: \"#dae7f1\",\n WHITE: ~~\"#f7f9fb\"~~,\n};\n\nexport const DARK_PALETTE: ProtonPalette = {\n BASE_COLOR: BACKGROUNDS.BLACK,\n BRAND,\n GRAYSCALE: DARK_GRAYSCALE,\n PRIMARY: BRAND_PRIMARY_SCALE,\n SECONDARY: DARK_SECONDARY,\n} as const;\n"],"names":["WHITE","BORDER","ELEVATION","DARK_GRAYSCALE","DARK_SECONDARY","DARK_PALETTE","BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE"],"mappings":"oHAGMA,EAAQ,UACDC,EAASD,EACTE,EAAY,4BACZC,EAAmC,CAC9C,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,aAAc,UACd,MAAO,UACP,SAAU,UACV,YAAa,UACb,~~MAAO~~,~~SACT~~,~~EAEaC~~,EAAiB,CAC5B,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,aAAc,UACd,MAAO,UACP,SAAU,UACV,YAAa,UACb,~~MAAO~~,~~SACT~~,~~EAEaC~~,EAA8B,CACzC,WAAYC,EAAAA,YAAY,MAAA,MACxBC,EAAAA,MACA,UAAWJ,EACX,QAASK,EAAAA,oBACT,UAAWJ,CACb"}
1	+ {"version":3,"file":"colors.cjs.js","sources":["../../../src/design/darkTheme/colors.ts"],"sourcesContent":["import { BACKGROUNDS, BRAND, BRAND_PRIMARY_SCALE } from \"../colors\";\nimport type { ProtonColorScale, ProtonPalette } from \"../types\";\n\nconst WHITE = \"#f7f9fb\";\nexport const BORDER = WHITE;\nexport const ELEVATION = \"rgba(174, 175, 177, 0.21)\";\nexport const DARK_GRAYSCALE: ProtonColorScale = {\n SUPER_DARK: \"#111212\",\n DARK: \"#1e1f21\",\n MEDIUM: \"#232629\",\n MEDIUM_LIGHT: \"#2b2d30\",\n LIGHT: \"#43464a\",\n LIGHTEST: \"#63676b\",\n SUPER_LIGHT: \"#8a8e91\",\n WHITE: WHITE,\n};\n\nexport const DARK_SECONDARY = {\n SUPER_DARK: \"#142736\",\n DARK: \"#22445d\",\n MEDIUM: \"#306082\",\n MEDIUM_LIGHT: \"#3e7ca8\",\n LIGHT: \"#5795c1\",\n LIGHTEST: \"#a2c4dd\",\n SUPER_LIGHT: \"#dae7f1\",\n WHITE: WHITE,\n};\n\nexport const DARK_PALETTE: ProtonPalette = {\n BASE_COLOR: BACKGROUNDS.BLACK,\n BRAND,\n GRAYSCALE: DARK_GRAYSCALE,\n PRIMARY: BRAND_PRIMARY_SCALE,\n SECONDARY: DARK_SECONDARY,\n} as const;\n"],"names":["WHITE","BORDER","ELEVATION","DARK_GRAYSCALE","DARK_SECONDARY","DARK_PALETTE","BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE"],"mappings":"oHAGMA,EAAQ,UACDC,EAASD,EACTE,EAAY,4BACZC,EAAmC,CAC9C,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,aAAc,UACd,MAAO,UACP,SAAU,UACV,YAAa,UACb,MAAAH,CACF,EAEaI,EAAiB,CAC5B,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,aAAc,UACd,MAAO,UACP,SAAU,UACV,YAAa,UACb,MAAAJ,CACF,EAEaK,EAA8B,CACzC,WAAYC,EAAAA,YAAY,MAAA,MACxBC,EAAAA,MACA,UAAWJ,EACX,QAASK,EAAAA,oBACT,UAAWJ,CACb"}

package/dist/design/darkTheme/colors.es.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { BRAND_PRIMARY_SCALE as R, BRAND as E, BACKGROUNDS as A } from "../colors.es.js";
-const I = "#f7f9fb", S = I, f = "rgba(174, 175, 177, 0.21)", D = {
+import { BRAND_PRIMARY_SCALE as A, BRAND as E, BACKGROUNDS as D } from "../colors.es.js";
+const R = "#f7f9fb", S = R, _ = "rgba(174, 175, 177, 0.21)", I = {
   SUPER_DARK: "#111212",
   DARK: "#1e1f21",
   MEDIUM: "#232629",
@@ -7,8 +7,8 @@ const I = "#f7f9fb", S = I, f = "rgba(174, 175, 177, 0.21)", D = {
   LIGHT: "#43464a",
   LIGHTEST: "#63676b",
   SUPER_LIGHT: "#8a8e91",
-  WHITE: "#f7f9fb"
-}, T = {
+  WHITE: R
+}, L = {
   SUPER_DARK: "#142736",
   DARK: "#22445d",
   MEDIUM: "#306082",
@@ -16,19 +16,19 @@ const I = "#f7f9fb", S = I, f = "rgba(174, 175, 177, 0.21)", D = {
   LIGHT: "#5795c1",
   LIGHTEST: "#a2c4dd",
   SUPER_LIGHT: "#dae7f1",
-  WHITE: "#f7f9fb"
-}, _ = {
-  BASE_COLOR: A.BLACK,
+  WHITE: R
+}, G = {
+  BASE_COLOR: D.BLACK,
   BRAND: E,
-  GRAYSCALE: D,
-  PRIMARY: R,
-  SECONDARY: T
+  GRAYSCALE: I,
+  PRIMARY: A,
+  SECONDARY: L
 };
 export {
   S as BORDER,
-  D as DARK_GRAYSCALE,
-  _ as DARK_PALETTE,
-  T as DARK_SECONDARY,
-  f as ELEVATION
+  I as DARK_GRAYSCALE,
+  G as DARK_PALETTE,
+  L as DARK_SECONDARY,
+  _ as ELEVATION
 };
 //# sourceMappingURL=colors.es.js.map

package/dist/design/darkTheme/colors.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"colors.es.js","sources":["../../../src/design/darkTheme/colors.ts"],"sourcesContent":["import { BACKGROUNDS, BRAND, BRAND_PRIMARY_SCALE } from \"../colors\";\nimport type { ProtonColorScale, ProtonPalette } from \"../types\";\n\nconst WHITE = \"#f7f9fb\";\nexport const BORDER = WHITE;\nexport const ELEVATION = \"rgba(174, 175, 177, 0.21)\";\nexport const DARK_GRAYSCALE: ProtonColorScale = {\n SUPER_DARK: \"#111212\",\n DARK: \"#1e1f21\",\n MEDIUM: \"#232629\",\n MEDIUM_LIGHT: \"#2b2d30\",\n LIGHT: \"#43464a\",\n LIGHTEST: \"#63676b\",\n SUPER_LIGHT: \"#8a8e91\",\n WHITE: ~~\"#f7f9fb\"~~,\n};\n\nexport const DARK_SECONDARY = {\n SUPER_DARK: \"#142736\",\n DARK: \"#22445d\",\n MEDIUM: \"#306082\",\n MEDIUM_LIGHT: \"#3e7ca8\",\n LIGHT: \"#5795c1\",\n LIGHTEST: \"#a2c4dd\",\n SUPER_LIGHT: \"#dae7f1\",\n WHITE: ~~\"#f7f9fb\"~~,\n};\n\nexport const DARK_PALETTE: ProtonPalette = {\n BASE_COLOR: BACKGROUNDS.BLACK,\n BRAND,\n GRAYSCALE: DARK_GRAYSCALE,\n PRIMARY: BRAND_PRIMARY_SCALE,\n SECONDARY: DARK_SECONDARY,\n} as const;\n"],"names":["WHITE","BORDER","ELEVATION","DARK_GRAYSCALE","DARK_SECONDARY","DARK_PALETTE","BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE"],"mappings":";AAGA,MAAMA,IAAQ,WACDC,IAASD,GACTE,IAAY,6BACZC,IAAmC;AAAA,EAC9C,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,~~OAAO~~;~~AACT~~,~~GAEaC~~,IAAiB;AAAA,EAC5B,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,~~OAAO~~;~~AACT~~,~~GAEaC~~,IAA8B;AAAA,EACzC,YAAYC,EAAY;AAAA,EACxB,OAAAC;AAAA,EACA,WAAWJ;AAAA,EACX,SAASK;AAAA,EACT,WAAWJ;AACb;"}
1	+ {"version":3,"file":"colors.es.js","sources":["../../../src/design/darkTheme/colors.ts"],"sourcesContent":["import { BACKGROUNDS, BRAND, BRAND_PRIMARY_SCALE } from \"../colors\";\nimport type { ProtonColorScale, ProtonPalette } from \"../types\";\n\nconst WHITE = \"#f7f9fb\";\nexport const BORDER = WHITE;\nexport const ELEVATION = \"rgba(174, 175, 177, 0.21)\";\nexport const DARK_GRAYSCALE: ProtonColorScale = {\n SUPER_DARK: \"#111212\",\n DARK: \"#1e1f21\",\n MEDIUM: \"#232629\",\n MEDIUM_LIGHT: \"#2b2d30\",\n LIGHT: \"#43464a\",\n LIGHTEST: \"#63676b\",\n SUPER_LIGHT: \"#8a8e91\",\n WHITE: WHITE,\n};\n\nexport const DARK_SECONDARY = {\n SUPER_DARK: \"#142736\",\n DARK: \"#22445d\",\n MEDIUM: \"#306082\",\n MEDIUM_LIGHT: \"#3e7ca8\",\n LIGHT: \"#5795c1\",\n LIGHTEST: \"#a2c4dd\",\n SUPER_LIGHT: \"#dae7f1\",\n WHITE: WHITE,\n};\n\nexport const DARK_PALETTE: ProtonPalette = {\n BASE_COLOR: BACKGROUNDS.BLACK,\n BRAND,\n GRAYSCALE: DARK_GRAYSCALE,\n PRIMARY: BRAND_PRIMARY_SCALE,\n SECONDARY: DARK_SECONDARY,\n} as const;\n"],"names":["WHITE","BORDER","ELEVATION","DARK_GRAYSCALE","DARK_SECONDARY","DARK_PALETTE","BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE"],"mappings":";AAGA,MAAMA,IAAQ,WACDC,IAASD,GACTE,IAAY,6BACZC,IAAmC;AAAA,EAC9C,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,OAAAH;AACF,GAEaI,IAAiB;AAAA,EAC5B,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,OAAAJ;AACF,GAEaK,IAA8B;AAAA,EACzC,YAAYC,EAAY;AAAA,EACxB,OAAAC;AAAA,EACA,WAAWJ;AAAA,EACX,SAASK;AAAA,EACT,WAAWJ;AACb;"}

package/dist/index.d.ts CHANGED Viewed

@@ -350,29 +350,27 @@ export declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttribut
 /**
  * A radio button group component that allows selection of a single option from multiple choices.
  *
- * Uses Radix `RadioGroup` for roving focus, arrow-key navigation, and `radiogroup` semantics.
- *
  * API:
  *  - {@link ButtonGroupProps}
  */
-export declare function ButtonGroup({ name, value, defaultValue, onChange, children, "data-testid": testId }: ButtonGroupProps): JSX.Element;
+export declare function ButtonGroup({ name, value, defaultValue, onChange, children, "data-testid": testId, }: ButtonGroupProps): JSX.Element;
 export declare namespace ButtonGroup {
     var displayName: string;
-    var Option: ({ value, children, "data-testid": testId }: ButtonGroupOptionProps) => JSX.Element;
+    var Option: ({ value, children, "data-testid": testId, }: ButtonGroupOptionProps) => JSX.Element;
 }
 declare interface ButtonGroupOptionProps {
     /**
      * The value of this option. When this option is selected, this value will
-     * become the ButtonGroup's new `selectedValue`.
+     * become the ButtonGroup's new `value`.
      */
     value: string;
     /**
      * The text or component to be rendered as this option's content.
      */
-    children: React.ReactNode;
-    /** The test ID for the option. */
+    children: ReactNode;
+    /** The test ID for this option. */
     "data-testid"?: string;
 }
@@ -397,8 +395,8 @@ declare interface ButtonGroupProps {
     /**
      * The ButtonGroup.Option elements to be rendered as the selectable values.
      */
-    children?: React.ReactNode;
-    /** The test ID for the button group. */
+    children?: ReactNode;
+    /** The test ID for the component. */
     "data-testid"?: string;
 }
@@ -940,12 +938,13 @@ export declare namespace Popover {
 }
 /** Radix `Popover.Content` `align`*/
-export declare type PopoverAlign = "start" | "center" | "end";
+export declare type PopoverAlign = RadixAlign;
 declare interface PopoverProps {
     /**
      * Popover alignment
      * {@link PopoverAlign}
+     * @default "center"
      */
     align?: PopoverAlign;
     /**
@@ -989,12 +988,13 @@ declare interface PopoverProps {
     /**
      * Popover side placement
      * {@link PopoverSide}
+     * @default "top"
      */
     side?: PopoverSide;
 }
 /** Radix `Popover.Content` `side` */
-export declare type PopoverSide = "top" | "right" | "bottom" | "left";
+export declare type PopoverSide = RadixSide;
 declare type ProtonColorScale = {
     SUPER_DARK: string;
@@ -1063,12 +1063,18 @@ declare interface ProtonStyleSheet {
 declare type ProtonTheme = (typeof THEMES)[keyof typeof THEMES];
+/** Radix `align`*/
+declare type RadixAlign = "start" | "center" | "end";
+/** Radix `side` */
+declare type RadixSide = "top" | "right" | "bottom" | "left";
 declare interface ResponsiveTooltipProps extends Omit<TooltipProps, "placement">, Omit<PopoverProps, "trigger" | "children" | "side"> {
     /**
      * Placement/side of the tooltip/popover.
      * @default "top"
      */
-    placement?: TooltipPlacement | PopoverSide;
+    placement?: TooltipPlacement;
     /**
      * Force a specific component type.
      * @default "auto"
@@ -1699,10 +1705,10 @@ export declare namespace Tooltip {
 }
 /** Radix `Tooltip.Content` `align` */
-export declare type TooltipAlign = "start" | "center" | "end";
+export declare type TooltipAlign = RadixAlign;
 /** Radix `Tooltip.Content` `side` */
-export declare type TooltipPlacement = "top" | "right" | "bottom" | "left";
+export declare type TooltipPlacement = RadixSide;
 declare interface TooltipProps {
     /**

package/dist/style.css CHANGED Viewed

	@@ -1 +1 @@
1	- .proton-Button{--proton-button-edge-padding:1.05em;--proton-button__background-color:var(--proton-color__primary);--proton-button__text-color:var(--proton-color__white);color:var(--proton-button__text-color);border-radius:var(--proton-control__border-radius);padding:.45em var(--proton-button-edge-padding);letter-spacing:.05em;cursor:pointer;box-sizing:border-box;background-color:var(--proton-button__background-color);border:0;align-items:center;transition:filter .2s,background-color .2s,outline .2s;display:inline-flex;position:relative}.proton-Button__icon-decorator{justify-content:center;align-items:center;padding-right:.3em;line-height:1;display:flex;position:relative}.proton-Button__icon-decorator--fullWidth{position:absolute}.proton-Button__text{box-sizing:border-box;text-align:center;white-space:nowrap;text-overflow:ellipsis;margin:auto;line-height:normal;overflow:hidden}.proton-Button:hover{filter:brightness(1.16);cursor:pointer}.proton-Button--primary{--proton-button__background-color:var(--proton-color__primary);--proton-button__text-color:var(--proton-color__white)}.proton-Button--secondary{--proton-button__background-color:var(--proton-color__gray-light);--proton-button__text-color:var(--proton-control__text-color)}.proton-ui__theme--dark .proton-Button--secondary{--proton-button__background-color:var(--proton-control__background-color-light)}.proton-Button--danger{--proton-button__background-color:var(--proton-color__danger-medium)}.proton-Button--success{--proton-button__background-color:var(--proton-color__success-medium)}.proton-Button--translucent{--proton-button__background-color:var(--proton-control__background-color-light);--proton-button__text-color:var(--proton-control__text-color)}.proton-Button--disabled,.proton-Button--disabled:hover{opacity:.5;filter:none;cursor:not-allowed}.proton-Button:focus{outline:2px solid var(--proton-color__primary)}.proton-Button:focus-visible{outline:2px solid var(--proton-color__primary)}.proton-Button:active{filter:brightness(1.3);transition:filter .1s ease-out}.proton-Button--fullWidth{width:100%}.proton-Button--small{padding:.2rem .6rem;font-size:.875rem}.proton-Button--medium{padding:.4rem 1rem;font-size:1rem}.proton-Button--large{padding:.6rem 1.6rem;font-size:1.2rem}.proton-Button--xlarge{padding:1rem 2rem .8rem;font-size:1.3rem}.proton-Button--2xlarge{padding:1rem 2.6rem;font-size:1.6rem}.proton-Button--fullWidth .proton-Button__text{transform:translate(calc(var(--proton-button-text-shift)))}.proton-ScreenOverlay__background{will-change:backdrop-filter;-webkit-backdrop-filter:blur(24px)brightness(75%);backdrop-filter:blur(24px)brightness(75%);background-color:#000c;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.proton-ScreenOverlay__z-index{z-index:10000}.proton-ScreenOverlay__image{object-fit:cover;width:100vw;height:100vh;position:absolute}.proton-ScreenOverlay__blur{-webkit-backdrop-filter:blur(24px)brightness(75%);backdrop-filter:blur(24px)brightness(75%);filter:brightness(46%);position:absolute;top:0;bottom:0;left:0;right:0}@keyframes fadeInBackground{0%{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);background:#0000001a}to{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#000c}}@keyframes fadeOutBackground{0%{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#000c}to{-webkit-backdrop-filter:blur();backdrop-filter:blur();background:0 0}}.proton-ScreenOverlay__fade-in{animation:.2s ease-in-out forwards fadeInBackground}.proton-ScreenOverlay__fade-out{animation:.2s ease-in-out forwards fadeOutBackground}.proton-ActionMenu__wrapper{z-index:10;width:100%;max-height:100vh;position:fixed;bottom:0;left:0}.proton-ActionMenu__background-wrapper{opacity:0;transition:opacity .3s cubic-bezier(.34,1.56,.64,1);overflow-y:scroll}.proton-ActionMenu__card{color:var(--proton-control__text-color);background-color:var(--proton-control__background-color-light);z-index:1;border-radius:.875rem .875rem 0 0;flex-direction:column;height:0;transition:height .3s cubic-bezier(.34,1.56,.64,1);display:flex;position:relative;overflow:hidden;box-shadow:0 0 4px #0000001a,0 0 20px #00000026}.proton-ActionMenu__cancel-button{margin:0 .75rem 1rem}.proton-ActionMenu__content{flex:1;min-width:0;padding:.75rem .75rem 0}.proton-ActionMenu__menu>[data-radix-popper-content-wrapper]{width:100%!important;position:absolute!important;top:0!important;transform:none!important}.proton-ActionMenu__list{flex-direction:column;margin-bottom:.625rem;display:flex}.proton-ActionMenu__item{color:inherit;cursor:pointer;justify-content:space-between;align-items:center;padding:.75rem .5rem .75rem .75rem;transition:filter .2s,background-color .2s,color .2s;display:flex}.proton-ActionMenu__item:hover,.proton-ActionMenu__item:focus{background-color:var(--proton-control__hover-color);border:none;outline:none}.proton-ActionMenu__item[aria-checked=true]:hover,.proton-ActionMenu__item[aria-checked=true]:focus{filter:brightness(1.15)}.proton-ActionMenu__item[aria-checked=true]{background-color:var(--proton-color__primary-light);color:var(--proton-color__primary)}.proton-ui__theme--dark .proton-ActionMenu__item[aria-checked=true]{background-color:var(--proton-color__primary);color:var(--proton-control__text-color)}.proton-ActionMenu__item[aria-disabled=true],.proton-ActionMenu__list[aria-disabled=true],.proton-ActionMenu__item[aria-disabled=true]:hover{opacity:.5;cursor:not-allowed;background-color:#0000}.proton-ActionMenu__list[aria-disabled=true] .proton-ActionMenu__item{pointer-events:none}.proton-ActionMenu__title{text-align:center;width:100%;font-weight:600}.proton-ActionMenu__back-button{cursor:pointer;z-index:1;align-items:center;width:100%;height:100%;padding-left:.35rem;display:flex;position:absolute;left:0}.proton-ActionMenu__back-button:hover,.proton-ActionMenu__cancel-button:focus{background-color:var(--proton-control__hover-color);outline:none}.proton-ActionMenu__back-button:focus-visible{background-color:var(--proton-control__hover-color);outline:none}.proton-ActionMenu__cancel-button:focus-visible{background-color:var(--proton-control__hover-color);outline:none}.proton-ActionMenu__back-button-container{align-items:center;height:3rem;display:flex;position:relative}.proton-ActionMenu__description{color:var(--proton-control__text-color);opacity:.7;font-size:.875rem}.proton-ActionMenu__item-label{font-weight:500}.proton-ui__theme--dark .proton-ActionMenu__cancel-button button{--proton-button__background-color:var(--proton-control__background-color-light)}.proton-Badge{letter-spacing:.2em;text-align:center;text-transform:uppercase;white-space:nowrap;height:1.6rem;color:#666;background-color:#f2f2f2;border-radius:10rem;padding-left:1rem;padding-right:calc(1rem - .2em);font-size:1rem;font-weight:500;line-height:1.65rem;display:inline-block}.proton-ui__theme--dark .proton-Badge:not([class=proton-Badge--]),.proton-ui__theme--dark .proton-Badge--secondary{background-color:var(--proton-control__background-color-light);color:var(--proton-control__text-color)}.proton-Badge--primary{background-color:var(--proton-color__primary);color:var(--proton-color__primary-light)}.proton-Badge--success{background-color:var(--proton-color__success-super-light);color:var(--proton-color__success-dark)}.proton-Badge--warning{background-color:var(--proton-color__warning-super-light);color:var(--proton-color__warning-dark)}.proton-Badge--danger{background-color:var(--proton-color__danger-super-light);color:var(--proton-color__danger-dark)}.proton-Badge--transparent{color:#666;background-color:#0000}.proton-Banner{background-color:var(--banner-bg);-webkit-backdrop-filter:var(--banner-blur);backdrop-filter:var(--banner-blur);--tw-backdrop-blur:var(--banner-blur);--banner-bg:var(--proton-control__background-color-light);--banner-title:var(--proton-color__gray-dark);--banner-content:var(--proton-color__gray-medium);--banner-icon:var(--proton-color__gray-medium-light);--banner-blur:none;margin:0}:where(.proton-ui__theme--dark) .proton-Banner{--banner-bg:var(--proton-control__background-color-light);--banner-blur:blur(15px);--banner-title:var(--proton-control__text-color);--banner-content:var(--proton-control__text-color);--banner-icon:var(--proton-control__text-color)}.proton-Banner--warning{--banner-bg:var(--proton-color__warning-super-light);--banner-title:var(--proton-color__warning-dark);--banner-content:var(--proton-color__warning-medium);--banner-icon:var(--proton-color__warning-light)}.proton-Banner--success{--banner-bg:var(--proton-color__success-super-light);--banner-title:var(--proton-color__success-dark);--banner-content:var(--proton-color__success-medium);--banner-icon:var(--proton-color__success-light)}.proton-Banner--danger{--banner-bg:var(--proton-color__danger-super-light);--banner-title:var(--proton-color__danger-dark);--banner-content:var(--proton-color__danger-medium);--banner-icon:var(--proton-color__danger-light)}.proton-Banner--rounded{border-radius:.375rem}.proton-Banner__wrapper{align-items:flex-start;padding:2rem;display:flex}.proton-Banner__wrapper--compact{padding:1rem}.proton-Banner__content-wrapper{min-width:0;color:var(--banner-content);flex:1}.proton-Banner__container{padding:0 .625rem}.proton-Banner__title{letter-spacing:.01rem;color:var(--banner-title);line-height:1.2rem}.proton-Banner__content{color:var(--banner-content);margin:.375rem 0 0}.proton-Banner__icon{fill:var(--banner-icon);height:20px}.proton-Banner__actions{gap:.5rem;margin:.375rem 0 0;display:flex}@media (min-width:768px){.proton-Banner__container{grid-gap:.5rem;grid-template-columns:1fr auto;display:grid}.proton-Banner__title,.proton-Banner__content{grid-column:1;margin:auto 0}.proton-Banner__container:not(:has(.proton-Banner__content)){grid-gap:0px;grid-template-rows:1fr}.proton-Banner__container>div:last-child{grid-area:1/2/span 2;max-height:32px;margin:auto 0}.proton-Banner__actions{margin:0 0 0 .75rem}.proton-Banner__wrapper:not(:has(.proton-Banner__content)){align-items:center}}.proton-ButtonGroup{border:1px solid var(--proton-color__gray-light);border-radius:.25rem;font-weight:400;display:flex;overflow:hidden}.proton-ButtonGroup__option{background-color:var(--proton-color__gray-super-light);cursor:pointer;border:none;border-left:1px solid var(--proton-color__gray-light);color:var(--proton-color__gray-dark);text-align:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;border-radius:0;flex:1;margin:0;padding:.5em 1em;display:block}.proton-ButtonGroup__option:first-child{border-left:0}.proton-ButtonGroup__option[data-state=checked]{background-color:var(--proton-color__white);color:var(--proton-color__primary);z-index:2;cursor:default;border-radius:inherit;box-shadow:0 0 .375rem #00000026}.proton-ButtonGroup__option[data-state=checked]+.proton-ButtonGroup__option{border-left:1px solid #0000}.proton-MenuTrigger__menu-header{text-transform:uppercase;color:var(--proton-control__text-color);background-color:var(--proton-control__background-color-light);letter-spacing:.1em;padding:.3125rem 1rem .25rem;font-size:.8em;font-weight:700}.proton-MenuTrigger__button{cursor:pointer;color:var(--proton-control__text-color);background:0 0;border:none;border-radius:.25rem;justify-content:center;align-items:center;padding:.25rem;transition:background-color .2s ease-in-out;display:flex}.proton-MenuTrigger__button:disabled{cursor:not-allowed;opacity:.5}.proton-ui__theme--dark .proton-MenuTrigger__button:disabled:hover,.proton-MenuTrigger__button:disabled:hover{background:0 0}.proton-MenuTrigger__button:focus{outline:2px solid var(--proton-color__primary)}.proton-MenuTrigger__button:hover{background-color:var(--proton-control__hover-color)}.proton-MenuTrigger__menu-item .proton-Menu__item,.proton-MenuTrigger__menu-item{color:var(--proton-control__text-color);grid-template:"label kbd""desc kbd"/1fr auto;align-items:center;gap:.1em .5em;padding:.75em 1em;display:grid}.proton-MenuTrigger__menu-item .proton-Menu__item[data-has-submenu=true],.proton-MenuTrigger__menu-item[data-has-submenu=true]{grid-template-columns:unset;grid-template-areas:unset;justify-content:space-between;align-items:center;display:flex}.proton-MenuTrigger__label{grid-area:label}.proton-MenuTrigger__description{opacity:.7;grid-area:desc;font-size:.8em;line-height:1.1}.proton-MenuTrigger__chevron{padding-left:.5rem}[data-radix-popper-content-wrapper]:has(>.proton-Menu){z-index:10000!important}.proton-Menu{--menu-item-bg-color:transparent;letter-spacing:.05em;border-radius:var(--proton-control__border-radius);background-color:var(--proton-control__background-color-light);will-change:backdrop-filter;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--proton-control__border-color);min-width:100px;max-height:420px;color:var(--proton-control__text-color);box-shadow:0 0 3px var(--proton-control__shadow-color);margin:8px 0 0;padding:0;list-style:none;overflow:auto}.proton-Menu__item{background:var(--menu-item-bg-color);cursor:pointer;outline:none;justify-content:space-between;align-items:center;padding:8px 24px 8px 16px;transition:background-color .2s,opacity .2s,color .2s;display:flex}.proton-Menu__item[aria-checked=true]{--menu-item-bg-color:var(--proton-color__primary-super-light);color:var(--proton-color__primary);font-weight:600}.proton-Menu__item[aria-checked=true][data-highlighted=""]{--menu-item-bg-color:var(--proton-color__primary-super-light);opacity:.75}.proton-Menu__item[aria-selected=true]{--menu-item-bg-color:var(--proton-color__primary-super-light);color:var(--proton-color__primary);font-weight:600}.proton-Menu__item[aria-selected=true][data-highlighted=""]{--menu-item-bg-color:var(--proton-color__primary-super-light);opacity:.75}.proton-Menu__item[data-state=checked]{--menu-item-bg-color:var(--proton-color__primary-super-light);color:var(--proton-color__primary);font-weight:600}.proton-Menu__item[data-state=checked][data-highlighted=""]{--menu-item-bg-color:var(--proton-color__primary-super-light);opacity:.75}.proton-Menu__item[data-highlighted=""]{--menu-item-bg-color:var(--proton-control__hover-color)}.proton-Menu__item:hover{--menu-item-bg-color:var(--proton-control__hover-color);box-shadow:none}.proton-Menu__item[aria-disabled=true],.proton-Menu__item[data-disabled=true]{opacity:.5;cursor:not-allowed}.proton-ButtonWithSelect{align-items:stretch;display:flex;position:relative}.proton-ButtonWithSelect button:focus{outline:none}.proton-ButtonWithSelect__button{flex:var(--flex);align-items:stretch;display:flex}.proton-ButtonWithSelect__button button,.proton-ButtonWithSelect__button a{border-top-right-radius:0;border-bottom-right-radius:0;align-items:center;display:flex;position:relative;overflow:hidden}.proton-ButtonWithSelect__button button:after,.proton-ButtonWithSelect__button a:after{content:"";background-color:#00000026;width:1px;position:absolute;top:.3em;bottom:.3em;right:0}.proton-ButtonWithSelect__trigger{flex:0 0 var(--trigger-width);min-width:var(--trigger-width);max-width:var(--trigger-width)}.proton-ButtonWithSelect__trigger .proton-Button{border-top-left-radius:0;border-bottom-left-radius:0;width:100%;height:100%;padding:0}.proton-ButtonWithSelect__trigger-content{flex-direction:column;align-items:center;display:flex}.proton-CheckboxIndicator{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.proton-CheckboxIndicator--checkmark{width:14px;height:100%;color:var(--proton-color__white);left:1px}.proton-CheckboxIndicator__path{stroke-dasharray:1;stroke-dashoffset:1px;transition:stroke-dashoffset .18s ease-out}input:checked~.proton-CheckboxIndicator .proton-CheckboxIndicator__path,[data-state=checked] .proton-CheckboxIndicator__path{stroke-dashoffset:0}.proton-CheckboxIndicator__dot{background-color:var(--proton-color__white);opacity:0;border-radius:50%;width:8px;height:8px;transition:opacity .1s ease-in-out}input:checked~.proton-CheckboxIndicator .proton-CheckboxIndicator__dot,[data-state=checked] .proton-CheckboxIndicator__dot{opacity:1}.proton-CheckboxInput__container{align-items:center;gap:8px;display:flex}.proton-CheckboxInput__box{display:inline-block;position:relative}.proton-CheckboxInput__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;border:2px solid var(--proton-control__border-color);border-radius:var(--proton-control__border-radius);background-color:var(--proton-control__background-color);justify-content:center;align-items:center;width:18px;height:18px;transition:background-color .1s ease-in-out,border .1s ease-in-out,box-shadow .1s ease-in-out;display:flex;position:relative;margin:0!important}.proton-CheckboxInput__input--round{border-radius:50%}.proton-CheckboxInput__input:indeterminate{background-color:var(--proton-color__primary);border-color:var(--proton-color__primary)}.proton-CheckboxInput__input:-webkit-any(:checked,[data-state=checked]){background-color:var(--proton-color__primary);border-color:var(--proton-color__primary)}.proton-CheckboxInput__input:-moz-any(:checked,[data-state=checked]){background-color:var(--proton-color__primary);border-color:var(--proton-color__primary)}.proton-CheckboxInput__input:is(:checked,[data-state=checked]){background-color:var(--proton-color__primary);border-color:var(--proton-color__primary)}.proton-CheckboxInput__input:indeterminate:after{content:"";background-color:var(--proton-control__text-color);width:10px;height:2px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.proton-CheckboxInput__input:-webkit-any(:focus,:focus-visible){box-shadow:0 0 0 2px var(--proton-color__primary);outline:none}.proton-CheckboxInput__input:-moz-any(:focus,:focus-visible){box-shadow:0 0 0 2px var(--proton-color__primary);outline:none}.proton-CheckboxInput__input:is(:focus,:focus-visible){box-shadow:0 0 0 2px var(--proton-color__primary);outline:none}.proton-CheckboxInput__input--error{border-color:var(--proton-color__danger-medium)}.proton-CheckboxInput__input--error:-webkit-any(:focus,:focus-visible){box-shadow:0 0 0 2px var(--proton-color__danger-medium)}.proton-CheckboxInput__input--error:-moz-any(:focus,:focus-visible){box-shadow:0 0 0 2px var(--proton-color__danger-medium)}.proton-CheckboxInput__input--error:is(:focus,:focus-visible){box-shadow:0 0 0 2px var(--proton-color__danger-medium)}.proton-CheckboxInput__input:disabled{opacity:.6;cursor:not-allowed}.proton-CheckboxInput__input:disabled:-webkit-any(:checked,[data-state=checked]){background-color:var(--proton-control__border-color);border-color:var(--proton-control__border-color)}.proton-CheckboxInput__input:disabled:-moz-any(:checked,[data-state=checked]){background-color:var(--proton-control__border-color);border-color:var(--proton-control__border-color)}.proton-CheckboxInput__input:disabled:is(:checked,[data-state=checked]){background-color:var(--proton-control__border-color);border-color:var(--proton-control__border-color)}.proton-CheckboxInput__label{color:var(--proton-control__text-color);cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:400}.proton-CheckboxInput--disabled .proton-CheckboxInput__label{opacity:.6;cursor:not-allowed}.proton-CheckboxInput__error{color:var(--proton-color__danger-medium);opacity:1;margin-top:4px}.proton-CheckboxRadioGroup{gap:12px;display:flex}.proton-CheckboxRadioGroup--vertical{flex-direction:column}.proton-CheckboxRadioGroup--horizontal{flex-flow:wrap}.proton-CheckboxRadioGroup__checkmark{position:absolute;top:0;bottom:0;left:-2px;right:0}.proton-CheckboxRadioGroup__description{color:var(--proton-control__text-color);opacity:.7;margin-left:26px;font-size:.875em}.proton-Table{border-collapse:collapse;color:var(--proton-control__text-color);width:100%;font-weight:300}.proton-Table__caption{display:none}.proton-Table__header{cursor:default;letter-spacing:.1em;text-transform:uppercase;text-align:left;outline:none;padding:.4375rem .625rem;font-size:1rem;font-weight:500;line-height:1rem}.proton-Table__header--center{text-align:center}.proton-Table__header--right{text-align:right}.proton-Table__headerSortIcon{padding:0 .125rem}.proton-Table__row{cursor:default;outline:none}.proton-Table__rowGroup--header{border-bottom:1px solid #ccc}.proton-Table__row--showLines{border-top:1px solid #ccc}.proton-Table--clickable{cursor:pointer}.proton-Table__cell{vertical-align:middle;outline:none;padding:.4375rem .625rem}.proton-Table__cell--center{text-align:center}.proton-Table__cell--right{text-align:right}.proton-Elevation{border-radius:var(--proton-control__border-radius);background-color:var(--proton-control__elevation-color);width:100%;height:100%;transition:background-color .2s ease-in-out,-webkit-backdrop-filter .2s ease-in-out,backdrop-filter .2s ease-in-out}.proton-Elevation--glass{will-change:backdrop-filter;-webkit-backdrop-filter:blur(15px)saturate(104%);backdrop-filter:blur(15px)saturate(104%);box-shadow:inset -.05rem -.05rem 0 .05rem #ffffff03,inset .05rem .05rem 0 .05rem #ffffff03}@keyframes shimmer{0%{background-position:-300px 0}to{background-position:800px 0}}.proton-Tombstone{background-position:-300px 0;background-repeat:no-repeat;background-size:300px 100%;animation:1.5s linear infinite shimmer}.proton-ui__theme--light .proton-Tombstone{background-color:#d1d1d1;background-image:linear-gradient(-90deg,#d1d1d1,#b8b8b8,#d1d1d1)}.proton-ui__theme--dark .proton-Tombstone{background-color:#3c3c3c;background-image:linear-gradient(-90deg,#363636,#292727,#353535)}.proton-Tombstone--custom{background-image:linear-gradient(-90deg,var(--tombstone-custom-primary) 0%,var(--tombstone-custom-secondary) 50%,var(--tombstone-custom-primary) 100%);background-color:var(--tombstone-custom-background)}.proton-DataTable{width:100%}.proton-DataTable__header-content{align-items:center;gap:.5rem;display:flex}.proton-DataTable__message-cell{position:absolute;left:0;right:0}.proton-DataTable__empty-cell{text-align:center;padding:3rem 1.5rem}.proton-DataTable__sort-button{cursor:pointer;border-radius:var(--proton-control__border-radius);border:none;max-height:.8rem;padding-bottom:1px;transition:background-color .15s ease-in-out,opacity .15s ease-in-out,transform .15s ease-in-out;display:inline-flex}.proton-DataTable__sort-button:hover{background-color:var(--proton-control__hover-color)}.proton-DataTable__sort-button[aria-label=ascending]{align-items:flex-end;transform:rotateX(180deg)}.proton-Input{max-width:var(--container-width,100%);border-radius:var(--proton-control__border-radius);box-sizing:border-box;outline:1px solid var(--proton-control__border-color);background:var(--proton-control__background-color-light);width:100%;height:100%;color:var(--proton-control__text-color);border:none;flex:1;padding-left:.75rem;font-weight:400;transition:outline .1s ease-in-out,background-color .1s ease-in-out,color .1s ease-in-out,opacity .1s ease-in-out}.proton-Input:disabled{opacity:.6;cursor:not-allowed}.proton-Input:not(.proton-Input--error):focus{outline:2px solid var(--proton-color__primary)}.proton-Input:not(.proton-Input--error):focus-visible{outline:2px solid var(--proton-color__primary)}.proton-Input.proton-Input--error{outline:2px solid var(--proton-color__danger-medium)}.proton-Input__container{width:100%;height:100%}.proton-Input__container-inner{width:100%;height:100%;position:relative}.proton-Input__descriptor{z-index:1;justify-content:center;height:100%;position:absolute;top:50%;transform:translateY(-50%)}.proton-Input__prefix,.proton-Input__suffix{justify-content:center;align-items:center;min-width:32px;display:flex}.proton-Input__prefix{opacity:.5;cursor:text;left:0}.proton-Input__suffix{outline:none;right:0}.proton-Input__container-inner.proton-Input__has-prefix .proton-Input{padding-left:var(--prefix-width,32px)}.proton-Input__container-inner.proton-Input__has-suffix .proton-Input{padding-right:calc(.75rem + var(--suffix-width,44px))}.proton-Input__text{margin-bottom:4px;padding:.25rem 0}.proton-Input__error{color:var(--proton-color__danger-medium);opacity:1}.proton-Input__label-top{padding-top:1.375rem;padding-bottom:.5rem}.proton-Input__label{opacity:.55;color:var(--proton-control__text-color);pointer-events:none;transition:all .3s cubic-bezier(.4,0,.2,1);position:absolute;top:50%;left:16px;transform:translateY(-50%)}.proton-Input__label--filled,.proton-Input[value]:not([value=""])+.proton-Input__label,.proton-Input:focus+.proton-Input__label{color:var(--proton-color__primary-light);opacity:1;font-size:.75rem;transform:translateY(-100%)}.proton-Input:focus+.proton-Input__label{color:var(--proton-color__primary-light);opacity:1}.proton-CopyInput-button{all:unset;cursor:pointer;color:var(--proton-control__text-color);text-transform:uppercase;letter-spacing:.2em;justify-content:center;align-items:center;width:100%;height:100%;padding:0 .875rem 0 1.4rem;font-size:.75rem;font-weight:600;line-height:1rem;transition:background-color .2s;display:flex}.proton-CopyInput-button svg{margin-bottom:.0625rem;transition:color .2s}.proton-CopyInput-button-text{margin:0 .5rem;transition:color .2s}.proton-CopyInput-button-text--copied,.proton-CopyInput-button--copied svg{color:var(--proton-color__primary)}.proton-Input:not(.proton-Input--error):focus{outline:1px solid var(--proton-control__border-color)}.proton-Input:not(.proton-Input--error):focus-visible{outline:1px solid var(--proton-control__border-color)}.proton-ui__theme--light .proton-CopyInput-button{border-left:1px solid var(--proton-control__border-color);align-items:center;height:100%;transition:background-color .2s;display:flex}.proton-CopyInput-button:hover{background-color:var(--proton-control__hover-color)}.proton-Overlay{background-color:var(--proton-control__background-color-light);border-radius:var(--proton-control__border-radius);box-shadow:0 0 8px 0 var(--proton-control__shadow-color),0 0 4px 0 var(--proton-control__shadow-color);color:var(--proton-control__text-color);outline:none;font-weight:300}.proton-Overlay__content{padding:7px 9px}.proton-Overlay-arrow,.proton-Overlay-arrow svg{fill:var(--proton-control__background-color-light)}.proton-OTPInput__digits{justify-content:center;align-items:center;display:flex}.proton-OTPInput__digit{color:var(--proton-control__text-color);border:1px solid var(--proton-control__border-color);background:var(--proton-control__background-color-light);text-align:center;box-sizing:border-box;border-radius:.625rem;max-width:2.675rem;min-height:3.225rem;margin:0 .25rem;font-size:1.25rem;transition:box-shadow 60ms ease-in-out,border-color .1s ease-in-out}@media (max-width:320px){.proton-OTPInput__digit{max-width:2.8125rem}}.proton-OTPInput__digit:focus{box-shadow:inset 0 0 4px var(--proton-color__primary);outline:none}.proton-OTPInput__digit:disabled{opacity:.8;cursor:not-allowed}.proton-OTPInput__digit--error,.proton-OTPInput__digit--error:focus{border-color:var(--proton-color__danger-medium);box-shadow:inset 0 0 4px var(--proton-color__danger-medium)}.proton-OTPInput__error{color:var(--proton-color__danger-medium);margin-bottom:.25rem;margin-left:.325rem}.proton-OTPInput__separator{color:var(--proton-control__border-color);font-weight:600}.proton-Modal{background-color:var(--proton-control__background-color-light);color:var(--proton-control__text-color);max-width:86vw;max-height:80vh;box-shadow:0 .0625rem .25rem -.0625rem var(--proton-control__shadow-color);opacity:1;border-radius:.5rem;padding:2rem;transition:opacity .2s ease-in-out;position:relative;overflow:visible}html:has([data-disable-document-scroll=true]){overflow:hidden}.proton-Modal__content{margin-top:.5rem}.proton-Modal--closing{opacity:0}@media (max-width:768px){.proton-Modal{border-radius:0;flex-direction:column;justify-content:center;align-items:center;width:100vw;max-width:100vw;height:100vh;max-height:100vh;padding:.25rem .5rem;display:flex}.proton-Modal>div{text-align:center;width:100%}}.proton-Modal__title{color:var(--proton-control__title-color);word-break:break-word;line-height:1.2}.proton-Modal__subtitle{color:var(--proton-control__text-color);line-height:1.5}.proton-Modal__body{word-break:break-word;margin:1rem 0;line-height:1.5}.proton-Modal__actions{justify-content:center;gap:1rem;margin-top:1rem;display:flex}.proton-Modal__close-button{cursor:pointer;color:var(--proton-control__text-color);background:0 0;border:none;border-radius:.25rem;padding:.5rem;font-size:2.2rem;font-weight:800;line-height:1;transition:opacity .15s;position:absolute;top:.375rem;right:.75rem}.proton-Modal__close-button:focus,.proton-Modal__close-button:hover{opacity:.8}.proton-Popover{--slide:translateY(.5rem);transform-origin:var(--radix-popover-content-transform-origin);max-height:var(--radix-popover-content-available-height);animation:.2s cubic-bezier(.16,1,.3,1) popoverSlideAndFade}.proton-Popover__constrained{width:var(--radix-popover-trigger-width)}[data-radix-popper-content-wrapper]:has(>.proton-Popover){z-index:10000!important;outline:none!important;min-width:0!important}.proton-Popover[data-state=closed]{animation:.2s reverse popoverSlideAndFade}@keyframes popoverSlideAndFade{0%{opacity:0;transform:var(--slide)}to{opacity:1;transform:translate(0)}}.proton-Input[type=search]{border-radius:3.125rem}.proton-SearchInput__wrapper{width:100%}.proton-SearchInput__button{color:currentColor;cursor:pointer;opacity:1;background-color:#0000;border:none;transition:opacity .2s ease-in-out}.proton-SearchInput__button--hide{opacity:0}.proton-SearchInput__wrapper input[type=search]::-webkit-search-decoration{display:none}.proton-SearchInput__wrapper input[type=search]::-webkit-search-cancel-button{display:none}.proton-SearchInput__wrapper input[type=search]::-webkit-search-results-button{display:none}.proton-SearchInput__wrapper input[type=search]::-webkit-search-results-decoration{display:none}.proton-Select{flex-direction:column;width:100%;margin:0;display:flex}.proton-Select__label{color:var(--proton-control__text-color);margin-bottom:.125rem}.proton-Select__trigger{color:var(--proton-control__text-color);font-size:inherit;border-radius:var(--proton-control__border-radius);flex:1;justify-content:space-between;align-items:center;width:100%;padding:.2rem .6rem .2rem 1rem;display:flex}.proton-Select__trigger--rounded{border-radius:3.125rem}button.proton-Select__trigger{letter-spacing:.05em;cursor:pointer;background:var(--proton-control__background-color-light);outline:1px solid var(--proton-control__border-color);border:none;font-weight:400;transition:outline .2s ease-in-out;position:relative}button.proton-Select__trigger:focus{outline:solid var(--proton-color__primary) 2px;border:none}button.proton-Select__trigger:focus-visible{outline:solid var(--proton-color__primary) 2px;border:none}.proton-Select__popover{padding-left:.25rem}.proton-Select__trigger_icon{color:var(--proton-control__text-color);width:.75em;height:.75em;margin-left:.8em;transition:transform .2s;position:relative}.proton-Select__trigger_icon svg{width:100%;height:100%;position:absolute;top:50%;left:0;transform:translateY(-50%)}.proton-Select__trigger_icon--flipped{transform:rotateX(180deg)}.proton-Select:hover{cursor:pointer}.proton-Select__trigger--disabled,.proton-Select__trigger--disabled:hover{opacity:.5;filter:none;cursor:not-allowed}.proton-Select__value{white-space:nowrap;text-overflow:ellipsis;pointer-events:none;overflow:hidden}.proton-Switch{flex-flow:column;row-gap:5px;display:flex}.proton-Switch__label{text-transform:uppercase;letter-spacing:.1em;color:var(--proton-control__text-color);font-size:.7em;font-weight:600}.proton-Switch__description{color:var(--proton-control__text-color);align-self:center;font-size:.9em}.proton-Switch__wrapper{column-gap:12px;display:flex}.proton-Switch__toggle{background-color:var(--proton-color__gray-light);cursor:pointer;border-radius:26px;flex-shrink:0;width:50px;height:26px;position:relative}.proton-Switch__slider{background-color:#fff;border-radius:22px;width:22px;height:22px;transition:left .2s;position:absolute;top:2px;left:2px}.proton-Switch--on .proton-Switch__toggle{background-color:var(--proton-color__primary)}.proton-Switch--on .proton-Switch__slider{left:26px}.proton-Switch--disabled{opacity:.4}.proton-Switch--disabled .proton-Switch__toggle{cursor:not-allowed}.proton-TextEllipsis{vertical-align:middle;color:var(--proton-control__text-color,inherit);font-family:inherit;font-size:inherit;line-height:inherit;width:100%;height:100%;display:inline-block;position:relative}.proton-TextEllipsis--single-line{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.proton-TextEllipsis--multi-line{text-overflow:ellipsis;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.proton-TextEmphasis{background-image:linear-gradient(0deg,#0000 0,#0000 15%,#ff713480 15%,#ff713480 35%,#0000 35%,#0000);padding:0 .05rem;font-style:normal;font-weight:700}.proton-TextEmphasis a{color:inherit;transition:color .15s}.proton-TextEmphasis a:hover{color:var(--proton-color__primary)}.proton-TextEmphasis--tooltip{background-image:linear-gradient(0deg,#0000 0,#0000 15%,#ff713480 25%,#ff713480 87%,#0000 80%,#0000);background-position:bottom;background-repeat:no-repeat;background-size:100% 35%;font-style:italic;font-weight:400;transition:background-size .3s,border-radius .3s}.proton-TextEmphasis--tooltip:hover{background-size:100% 100%;border-radius:.125rem}.proton-TextEmphasis--tooltip:not(:hover){transition-delay:.2s}.proton__Tooltip-trigger{display:inherit}.proton__Tooltip{--slide:translateY(.5rem);animation:.2s cubic-bezier(.16,1,.3,1) tooltipSlideAndFade}.proton__Tooltip[data-state=closed]{animation:.2s reverse tooltipSlideAndFade}@keyframes tooltipSlideAndFade{0%{opacity:0;transform:var(--slide)}to{opacity:1;transform:translate(0)}}[data-radix-popper-content-wrapper]:has(>.proton__Tooltip){z-index:10000!important;min-width:0!important}.proton-Waveform{--waveform-bar-color-dark:#ffffffe6;--waveform-bar-color-light:#000000b3;--waveform-disabled-color-dark:#fff3;--waveform-disabled-color-light:#0003;--waveform-animation-curve:cubic-bezier(.34, 1.56, .64, 1);--waveform-animation-duration:.4s;--waveform-bar-delay-multiplier:.7ms;--waveform-timestamp-padding:.25rem;--waveform-timestamp-font-size:.75rem;--waveform-timestamp-border-radius:.125rem;--waveform-hover-line-width:2px;flex-direction:row;align-items:center;width:100%;height:100%;display:flex;position:relative}.proton-Waveform__container{z-index:0;flex:1;align-items:center;width:100%;height:100%;display:flex;position:relative}.proton-Waveform__container[data-disabled=true]{cursor:not-allowed}.proton-Waveform__timestamp{pointer-events:none;border-radius:var(--waveform-timestamp-border-radius);padding:0 var(--waveform-timestamp-padding);font-size:var(--waveform-timestamp-font-size);z-index:1;background-color:#0009;position:absolute}.proton-ui__theme--light .proton-Waveform__timestamp{color:#000c;background-color:#ffffffe6;box-shadow:0 2px 2px #0000004d}.proton-Waveform__timestamp--left{left:1px}.proton-Waveform__timestamp--right{right:3px}.proton-Waveform__hover-line{width:var(--waveform-hover-line-width);background-color:#ffffff80;position:absolute;top:0;bottom:0;transform:translate(-50%)}.proton-ui__theme--light .proton-Waveform__hover-line{background-color:#00000080}.proton-Waveform__bar-wrapper{flex-direction:column;justify-content:center;align-items:center;height:100%;display:flex;position:relative}.proton-Waveform__bar{background-color:var(--waveform-bar-color-dark);transform-origin:50%;width:100%;height:0;transition:height var(--waveform-animation-duration) var(--waveform-animation-curve);position:relative}.proton-Waveform__bar.proton-Waveform__bar--visible{height:var(--target-height);transition-delay:calc(var(--index) * var(--waveform-bar-delay-multiplier))}.proton-Waveform__bar.proton-Waveform__bar--upper{transform-origin:bottom}.proton-Waveform__bar.proton-Waveform__bar--lower{transform-origin:top}.proton-ui__theme--light .proton-Waveform__bar{background-color:var(--waveform-bar-color-light)}.proton-Waveform__bar.proton-Waveform__bar--disabled{background-color:var(--waveform-disabled-color-dark)}.proton-ui__theme--light .proton-Waveform__bar.proton-Waveform__bar--disabled{background-color:var(--waveform-disabled-color-light)}.proton-Waveform__bar.proton-Waveform__bar--disabled.proton-Waveform__bar--played{background-color:var(--waveform-disabled-color-dark)}.proton-ui__theme--light .proton-Waveform__bar.proton-Waveform__bar--disabled.proton-Waveform__bar--played{background-color:var(--waveform-disabled-color-light)}.proton-Waveform__bar.proton-Waveform__bar--played{background-color:var(--proton-color__primary)}.proton-Waveform__bar--hover{height:var(--hover-height);z-index:10;background-color:color-mix(in srgb,var(--proton-color__primary) 50%,transparent);mix-blend-mode:darken;width:100%;position:absolute;top:50%;transform:translateY(-50%)}.proton-ui__theme--light .proton-Waveform__bar--hover{background-color:color-mix(in srgb,var(--proton-color__primary) 50%,white);mix-blend-mode:lighten}.proton-Waveform__bar-unavailable{pointer-events:none;text-align:center;z-index:10;color:#fff;background-color:#000000b3;border-radius:4px;padding:3px 6px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.proton-ui__theme--light .proton-Waveform__bar-unavailable{color:#000;background-color:#fff;box-shadow:0 5px 5px #0000004d}.proton-Waveform__active-region{pointer-events:none;z-index:1;border:1.5px solid #ffffffb3;border-radius:4px;position:absolute;top:0;bottom:0}.proton-ui__theme--light .proton-Waveform__active-region{border-color:#0000004d}
1	+ .proton-Button{--proton-button-edge-padding:1.05em;--proton-button__background-color:var(--proton-color__primary);--proton-button__text-color:var(--proton-color__white);color:var(--proton-button__text-color);border-radius:var(--proton-control__border-radius);padding:.45em var(--proton-button-edge-padding);letter-spacing:.05em;cursor:pointer;box-sizing:border-box;background-color:var(--proton-button__background-color);border:0;align-items:center;transition:filter .2s,background-color .2s,outline .2s;display:inline-flex;position:relative}.proton-Button__icon-decorator{justify-content:center;align-items:center;padding-right:.3em;line-height:1;display:flex;position:relative}.proton-Button__icon-decorator--fullWidth{position:absolute}.proton-Button__text{box-sizing:border-box;text-align:center;white-space:nowrap;text-overflow:ellipsis;margin:auto;line-height:normal;overflow:hidden}.proton-Button:hover{filter:brightness(1.16);cursor:pointer}.proton-Button--primary{--proton-button__background-color:var(--proton-color__primary);--proton-button__text-color:var(--proton-color__white)}.proton-Button--secondary{--proton-button__background-color:var(--proton-color__gray-light);--proton-button__text-color:var(--proton-control__text-color)}.proton-ui__theme--dark .proton-Button--secondary{--proton-button__background-color:var(--proton-control__background-color-light)}.proton-Button--danger{--proton-button__background-color:var(--proton-color__danger-medium)}.proton-Button--success{--proton-button__background-color:var(--proton-color__success-medium)}.proton-Button--translucent{--proton-button__background-color:var(--proton-control__background-color-light);--proton-button__text-color:var(--proton-control__text-color)}.proton-Button--disabled,.proton-Button--disabled:hover{opacity:.5;filter:none;cursor:not-allowed}.proton-Button:focus{outline:2px solid var(--proton-color__primary)}.proton-Button:focus-visible{outline:2px solid var(--proton-color__primary)}.proton-Button:active{filter:brightness(1.3);transition:filter .1s ease-out}.proton-Button--fullWidth{width:100%}.proton-Button--small{padding:.2rem .6rem;font-size:.875rem}.proton-Button--medium{padding:.4rem 1rem;font-size:1rem}.proton-Button--large{padding:.6rem 1.6rem;font-size:1.2rem}.proton-Button--xlarge{padding:1rem 2rem .8rem;font-size:1.3rem}.proton-Button--2xlarge{padding:1rem 2.6rem;font-size:1.6rem}.proton-Button--fullWidth .proton-Button__text{transform:translate(calc(var(--proton-button-text-shift)))}.proton-ScreenOverlay__background{will-change:backdrop-filter;-webkit-backdrop-filter:blur(24px)brightness(75%);backdrop-filter:blur(24px)brightness(75%);background-color:#000c;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.proton-ScreenOverlay__z-index{z-index:10000}.proton-ScreenOverlay__image{object-fit:cover;width:100vw;height:100vh;position:absolute}.proton-ScreenOverlay__blur{-webkit-backdrop-filter:blur(24px)brightness(75%);backdrop-filter:blur(24px)brightness(75%);filter:brightness(46%);position:absolute;top:0;bottom:0;left:0;right:0}@keyframes fadeInBackground{0%{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);background:#0000001a}to{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#000c}}@keyframes fadeOutBackground{0%{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#000c}to{-webkit-backdrop-filter:blur();backdrop-filter:blur();background:0 0}}.proton-ScreenOverlay__fade-in{animation:.2s ease-in-out forwards fadeInBackground}.proton-ScreenOverlay__fade-out{animation:.2s ease-in-out forwards fadeOutBackground}.proton-ActionMenu__wrapper{z-index:10;width:100%;max-height:100vh;position:fixed;bottom:0;left:0}.proton-ActionMenu__background-wrapper{opacity:0;transition:opacity .3s cubic-bezier(.34,1.56,.64,1);overflow-y:scroll}.proton-ActionMenu__card{color:var(--proton-control__text-color);background-color:var(--proton-control__background-color-light);z-index:1;border-radius:.875rem .875rem 0 0;flex-direction:column;height:0;transition:height .3s cubic-bezier(.34,1.56,.64,1);display:flex;position:relative;overflow:hidden;box-shadow:0 0 4px #0000001a,0 0 20px #00000026}.proton-ActionMenu__cancel-button{margin:0 .75rem 1rem}.proton-ActionMenu__content{flex:1;min-width:0;padding:.75rem .75rem 0}.proton-ActionMenu__menu>[data-radix-popper-content-wrapper]{width:100%!important;position:absolute!important;top:0!important;transform:none!important}.proton-ActionMenu__list{flex-direction:column;margin-bottom:.625rem;display:flex}.proton-ActionMenu__item{color:inherit;cursor:pointer;justify-content:space-between;align-items:center;padding:.75rem .5rem .75rem .75rem;transition:filter .2s,background-color .2s,color .2s;display:flex}.proton-ActionMenu__item:hover,.proton-ActionMenu__item:focus{background-color:var(--proton-control__hover-color);border:none;outline:none}.proton-ActionMenu__item[aria-checked=true]:hover,.proton-ActionMenu__item[aria-checked=true]:focus{filter:brightness(1.15)}.proton-ActionMenu__item[aria-checked=true]{background-color:var(--proton-color__primary-light);color:var(--proton-color__primary)}.proton-ui__theme--dark .proton-ActionMenu__item[aria-checked=true]{background-color:var(--proton-color__primary);color:var(--proton-control__text-color)}.proton-ActionMenu__item[aria-disabled=true],.proton-ActionMenu__list[aria-disabled=true],.proton-ActionMenu__item[aria-disabled=true]:hover{opacity:.5;cursor:not-allowed;background-color:#0000}.proton-ActionMenu__list[aria-disabled=true] .proton-ActionMenu__item{pointer-events:none}.proton-ActionMenu__title{text-align:center;width:100%;font-weight:600}.proton-ActionMenu__back-button{cursor:pointer;z-index:1;align-items:center;width:100%;height:100%;padding-left:.35rem;display:flex;position:absolute;left:0}.proton-ActionMenu__back-button:hover,.proton-ActionMenu__cancel-button:focus{background-color:var(--proton-control__hover-color);outline:none}.proton-ActionMenu__back-button:focus-visible{background-color:var(--proton-control__hover-color);outline:none}.proton-ActionMenu__cancel-button:focus-visible{background-color:var(--proton-control__hover-color);outline:none}.proton-ActionMenu__back-button-container{align-items:center;height:3rem;display:flex;position:relative}.proton-ActionMenu__description{color:var(--proton-control__text-color);opacity:.7;font-size:.875rem}.proton-ActionMenu__item-label{font-weight:500}.proton-ui__theme--dark .proton-ActionMenu__cancel-button button{--proton-button__background-color:var(--proton-control__background-color-light)}.proton-Badge{letter-spacing:.2em;text-align:center;text-transform:uppercase;white-space:nowrap;height:1.6rem;color:#666;background-color:#f2f2f2;border-radius:10rem;padding-left:1rem;padding-right:calc(1rem - .2em);font-size:1rem;font-weight:500;line-height:1.65rem;display:inline-block}.proton-ui__theme--dark .proton-Badge:not([class=proton-Badge--]),.proton-ui__theme--dark .proton-Badge--secondary{background-color:var(--proton-control__background-color-light);color:var(--proton-control__text-color)}.proton-Badge--primary{background-color:var(--proton-color__primary);color:var(--proton-color__primary-light)}.proton-Badge--success{background-color:var(--proton-color__success-super-light);color:var(--proton-color__success-dark)}.proton-Badge--warning{background-color:var(--proton-color__warning-super-light);color:var(--proton-color__warning-dark)}.proton-Badge--danger{background-color:var(--proton-color__danger-super-light);color:var(--proton-color__danger-dark)}.proton-Badge--transparent{color:#666;background-color:#0000}.proton-Banner{background-color:var(--banner-bg);-webkit-backdrop-filter:var(--banner-blur);backdrop-filter:var(--banner-blur);--tw-backdrop-blur:var(--banner-blur);--banner-bg:var(--proton-control__background-color-light);--banner-title:var(--proton-color__gray-dark);--banner-content:var(--proton-color__gray-medium);--banner-icon:var(--proton-color__gray-medium-light);--banner-blur:none;margin:0}:where(.proton-ui__theme--dark) .proton-Banner{--banner-bg:var(--proton-control__background-color-light);--banner-blur:blur(15px);--banner-title:var(--proton-control__text-color);--banner-content:var(--proton-control__text-color);--banner-icon:var(--proton-control__text-color)}.proton-Banner--warning{--banner-bg:var(--proton-color__warning-super-light);--banner-title:var(--proton-color__warning-dark);--banner-content:var(--proton-color__warning-medium);--banner-icon:var(--proton-color__warning-light)}.proton-Banner--success{--banner-bg:var(--proton-color__success-super-light);--banner-title:var(--proton-color__success-dark);--banner-content:var(--proton-color__success-medium);--banner-icon:var(--proton-color__success-light)}.proton-Banner--danger{--banner-bg:var(--proton-color__danger-super-light);--banner-title:var(--proton-color__danger-dark);--banner-content:var(--proton-color__danger-medium);--banner-icon:var(--proton-color__danger-light)}.proton-Banner--rounded{border-radius:.375rem}.proton-Banner__wrapper{align-items:flex-start;padding:2rem;display:flex}.proton-Banner__wrapper--compact{padding:1rem}.proton-Banner__content-wrapper{min-width:0;color:var(--banner-content);flex:1}.proton-Banner__container{padding:0 .625rem}.proton-Banner__title{letter-spacing:.01rem;color:var(--banner-title);line-height:1.2rem}.proton-Banner__content{color:var(--banner-content);margin:.375rem 0 0}.proton-Banner__icon{fill:var(--banner-icon);height:20px}.proton-Banner__actions{gap:.5rem;margin:.375rem 0 0;display:flex}@media (min-width:768px){.proton-Banner__container{grid-gap:.5rem;grid-template-columns:1fr auto;display:grid}.proton-Banner__title,.proton-Banner__content{grid-column:1;margin:auto 0}.proton-Banner__container:not(:has(.proton-Banner__content)){grid-gap:0px;grid-template-rows:1fr}.proton-Banner__container>div:last-child{grid-area:1/2/span 2;max-height:32px;margin:auto 0}.proton-Banner__actions{margin:0 0 0 .75rem}.proton-Banner__wrapper:not(:has(.proton-Banner__content)){align-items:center}}.proton-ButtonGroup{border:1px solid var(--proton-color__gray-light);border-radius:.25rem;font-weight:400;display:flex;overflow:hidden}.proton-ButtonGroup__option{background-color:var(--proton-color__gray-super-light);cursor:pointer;border:none;border-left:1px solid var(--proton-color__gray-light);color:var(--proton-color__gray-dark);text-align:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;border-radius:0;flex:1;margin:0;padding:.5em 1em;display:block}.proton-ButtonGroup__option:first-child{border-left:0}.proton-ButtonGroup__option[data-state=checked]{background-color:var(--proton-color__white);color:var(--proton-color__primary);z-index:2;cursor:default;border-radius:inherit;box-shadow:0 0 .375rem #00000026}.proton-ButtonGroup__option[data-state=checked]+.proton-ButtonGroup__option{border-left:1px solid #0000}.proton-ButtonGroup__option:focus-visible{outline:2px solid var(--proton-color__primary)}.proton-MenuTrigger__menu-header{text-transform:uppercase;color:var(--proton-control__text-color);background-color:var(--proton-control__background-color-light);letter-spacing:.1em;padding:.3125rem 1rem .25rem;font-size:.8em;font-weight:700}.proton-MenuTrigger__button{cursor:pointer;color:var(--proton-control__text-color);background:0 0;border:none;border-radius:.25rem;justify-content:center;align-items:center;padding:.25rem;transition:background-color .2s ease-in-out;display:flex}.proton-MenuTrigger__button:disabled{cursor:not-allowed;opacity:.5}.proton-ui__theme--dark .proton-MenuTrigger__button:disabled:hover,.proton-MenuTrigger__button:disabled:hover{background:0 0}.proton-MenuTrigger__button:focus{outline:2px solid var(--proton-color__primary)}.proton-MenuTrigger__button:hover{background-color:var(--proton-control__hover-color)}.proton-MenuTrigger__menu-item .proton-Menu__item,.proton-MenuTrigger__menu-item{color:var(--proton-control__text-color);grid-template:"label kbd""desc kbd"/1fr auto;align-items:center;gap:.1em .5em;padding:.75em 1em;display:grid}.proton-MenuTrigger__menu-item .proton-Menu__item[data-has-submenu=true],.proton-MenuTrigger__menu-item[data-has-submenu=true]{grid-template-columns:unset;grid-template-areas:unset;justify-content:space-between;align-items:center;display:flex}.proton-MenuTrigger__label{grid-area:label}.proton-MenuTrigger__description{opacity:.7;grid-area:desc;font-size:.8em;line-height:1.1}.proton-MenuTrigger__chevron{padding-left:.5rem}[data-radix-popper-content-wrapper]:has(>.proton-Menu){z-index:10000!important}.proton-Menu{--menu-item-bg-color:transparent;letter-spacing:.05em;border-radius:var(--proton-control__border-radius);background-color:var(--proton-control__background-color-light);will-change:backdrop-filter;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--proton-control__border-color);min-width:100px;max-height:420px;color:var(--proton-control__text-color);box-shadow:0 0 3px var(--proton-control__shadow-color);margin:8px 0 0;padding:0;list-style:none;overflow:auto}.proton-Menu__item{background:var(--menu-item-bg-color);cursor:pointer;outline:none;justify-content:space-between;align-items:center;padding:8px 24px 8px 16px;transition:background-color .2s,opacity .2s,color .2s;display:flex}.proton-Menu__item[aria-checked=true]{--menu-item-bg-color:var(--proton-color__primary-super-light);color:var(--proton-color__primary);font-weight:600}.proton-Menu__item[aria-checked=true][data-highlighted=""]{--menu-item-bg-color:var(--proton-color__primary-super-light);opacity:.75}.proton-Menu__item[aria-selected=true]{--menu-item-bg-color:var(--proton-color__primary-super-light);color:var(--proton-color__primary);font-weight:600}.proton-Menu__item[aria-selected=true][data-highlighted=""]{--menu-item-bg-color:var(--proton-color__primary-super-light);opacity:.75}.proton-Menu__item[data-state=checked]{--menu-item-bg-color:var(--proton-color__primary-super-light);color:var(--proton-color__primary);font-weight:600}.proton-Menu__item[data-state=checked][data-highlighted=""]{--menu-item-bg-color:var(--proton-color__primary-super-light);opacity:.75}.proton-Menu__item[data-highlighted=""]{--menu-item-bg-color:var(--proton-control__hover-color)}.proton-Menu__item:hover{--menu-item-bg-color:var(--proton-control__hover-color);box-shadow:none}.proton-Menu__item[aria-disabled=true],.proton-Menu__item[data-disabled=true]{opacity:.5;cursor:not-allowed}.proton-ButtonWithSelect{align-items:stretch;display:flex;position:relative}.proton-ButtonWithSelect button:focus{outline:none}.proton-ButtonWithSelect__button{flex:var(--flex);align-items:stretch;display:flex}.proton-ButtonWithSelect__button button,.proton-ButtonWithSelect__button a{border-top-right-radius:0;border-bottom-right-radius:0;align-items:center;display:flex;position:relative;overflow:hidden}.proton-ButtonWithSelect__button button:after,.proton-ButtonWithSelect__button a:after{content:"";background-color:#00000026;width:1px;position:absolute;top:.3em;bottom:.3em;right:0}.proton-ButtonWithSelect__trigger{flex:0 0 var(--trigger-width);min-width:var(--trigger-width);max-width:var(--trigger-width)}.proton-ButtonWithSelect__trigger .proton-Button{border-top-left-radius:0;border-bottom-left-radius:0;width:100%;height:100%;padding:0}.proton-ButtonWithSelect__trigger-content{flex-direction:column;align-items:center;display:flex}.proton-CheckboxIndicator{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.proton-CheckboxIndicator--checkmark{width:14px;height:100%;color:var(--proton-color__white);left:1px}.proton-CheckboxIndicator__path{stroke-dasharray:1;stroke-dashoffset:1px;transition:stroke-dashoffset .18s ease-out}input:checked~.proton-CheckboxIndicator .proton-CheckboxIndicator__path,[data-state=checked] .proton-CheckboxIndicator__path{stroke-dashoffset:0}.proton-CheckboxIndicator__dot{background-color:var(--proton-color__white);opacity:0;border-radius:50%;width:8px;height:8px;transition:opacity .1s ease-in-out}input:checked~.proton-CheckboxIndicator .proton-CheckboxIndicator__dot,[data-state=checked] .proton-CheckboxIndicator__dot{opacity:1}.proton-CheckboxInput__container{align-items:center;gap:8px;display:flex}.proton-CheckboxInput__box{display:inline-block;position:relative}.proton-CheckboxInput__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;border:2px solid var(--proton-control__border-color);border-radius:var(--proton-control__border-radius);background-color:var(--proton-control__background-color);justify-content:center;align-items:center;width:18px;height:18px;transition:background-color .1s ease-in-out,border .1s ease-in-out,box-shadow .1s ease-in-out;display:flex;position:relative;margin:0!important}.proton-CheckboxInput__input--round{border-radius:50%}.proton-CheckboxInput__input:indeterminate{background-color:var(--proton-color__primary);border-color:var(--proton-color__primary)}.proton-CheckboxInput__input:-webkit-any(:checked,[data-state=checked]){background-color:var(--proton-color__primary);border-color:var(--proton-color__primary)}.proton-CheckboxInput__input:-moz-any(:checked,[data-state=checked]){background-color:var(--proton-color__primary);border-color:var(--proton-color__primary)}.proton-CheckboxInput__input:is(:checked,[data-state=checked]){background-color:var(--proton-color__primary);border-color:var(--proton-color__primary)}.proton-CheckboxInput__input:indeterminate:after{content:"";background-color:var(--proton-control__text-color);width:10px;height:2px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.proton-CheckboxInput__input:-webkit-any(:focus,:focus-visible){box-shadow:0 0 0 2px var(--proton-color__primary);outline:none}.proton-CheckboxInput__input:-moz-any(:focus,:focus-visible){box-shadow:0 0 0 2px var(--proton-color__primary);outline:none}.proton-CheckboxInput__input:is(:focus,:focus-visible){box-shadow:0 0 0 2px var(--proton-color__primary);outline:none}.proton-CheckboxInput__input--error{border-color:var(--proton-color__danger-medium)}.proton-CheckboxInput__input--error:-webkit-any(:focus,:focus-visible){box-shadow:0 0 0 2px var(--proton-color__danger-medium)}.proton-CheckboxInput__input--error:-moz-any(:focus,:focus-visible){box-shadow:0 0 0 2px var(--proton-color__danger-medium)}.proton-CheckboxInput__input--error:is(:focus,:focus-visible){box-shadow:0 0 0 2px var(--proton-color__danger-medium)}.proton-CheckboxInput__input:disabled{opacity:.6;cursor:not-allowed}.proton-CheckboxInput__input:disabled:-webkit-any(:checked,[data-state=checked]){background-color:var(--proton-control__border-color);border-color:var(--proton-control__border-color)}.proton-CheckboxInput__input:disabled:-moz-any(:checked,[data-state=checked]){background-color:var(--proton-control__border-color);border-color:var(--proton-control__border-color)}.proton-CheckboxInput__input:disabled:is(:checked,[data-state=checked]){background-color:var(--proton-control__border-color);border-color:var(--proton-control__border-color)}.proton-CheckboxInput__label{color:var(--proton-control__text-color);cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:400}.proton-CheckboxInput--disabled .proton-CheckboxInput__label{opacity:.6;cursor:not-allowed}.proton-CheckboxInput__error{color:var(--proton-color__danger-medium);opacity:1;margin-top:4px}.proton-CheckboxRadioGroup{gap:12px;display:flex}.proton-CheckboxRadioGroup--vertical{flex-direction:column}.proton-CheckboxRadioGroup--horizontal{flex-flow:wrap}.proton-CheckboxRadioGroup__checkmark{position:absolute;top:0;bottom:0;left:-2px;right:0}.proton-CheckboxRadioGroup__description{color:var(--proton-control__text-color);opacity:.7;margin-left:26px;font-size:.875em}.proton-Table{border-collapse:collapse;color:var(--proton-control__text-color);width:100%;font-weight:300}.proton-Table__caption{display:none}.proton-Table__header{cursor:default;letter-spacing:.1em;text-transform:uppercase;text-align:left;outline:none;padding:.4375rem .625rem;font-size:1rem;font-weight:500;line-height:1rem}.proton-Table__header--center{text-align:center}.proton-Table__header--right{text-align:right}.proton-Table__headerSortIcon{padding:0 .125rem}.proton-Table__row{cursor:default;outline:none}.proton-Table__rowGroup--header{border-bottom:1px solid #ccc}.proton-Table__row--showLines{border-top:1px solid #ccc}.proton-Table--clickable{cursor:pointer}.proton-Table__cell{vertical-align:middle;outline:none;padding:.4375rem .625rem}.proton-Table__cell--center{text-align:center}.proton-Table__cell--right{text-align:right}.proton-Elevation{border-radius:var(--proton-control__border-radius);background-color:var(--proton-control__elevation-color);width:100%;height:100%;transition:background-color .2s ease-in-out,-webkit-backdrop-filter .2s ease-in-out,backdrop-filter .2s ease-in-out}.proton-Elevation--glass{will-change:backdrop-filter;-webkit-backdrop-filter:blur(15px)saturate(104%);backdrop-filter:blur(15px)saturate(104%);box-shadow:inset -.05rem -.05rem 0 .05rem #ffffff03,inset .05rem .05rem 0 .05rem #ffffff03}@keyframes shimmer{0%{background-position:-300px 0}to{background-position:800px 0}}.proton-Tombstone{background-position:-300px 0;background-repeat:no-repeat;background-size:300px 100%;animation:1.5s linear infinite shimmer}.proton-ui__theme--light .proton-Tombstone{background-color:#d1d1d1;background-image:linear-gradient(-90deg,#d1d1d1,#b8b8b8,#d1d1d1)}.proton-ui__theme--dark .proton-Tombstone{background-color:#3c3c3c;background-image:linear-gradient(-90deg,#363636,#292727,#353535)}.proton-Tombstone--custom{background-image:linear-gradient(-90deg,var(--tombstone-custom-primary) 0%,var(--tombstone-custom-secondary) 50%,var(--tombstone-custom-primary) 100%);background-color:var(--tombstone-custom-background)}.proton-DataTable{width:100%}.proton-DataTable__header-content{align-items:center;gap:.5rem;display:flex}.proton-DataTable__message-cell{position:absolute;left:0;right:0}.proton-DataTable__empty-cell{text-align:center;padding:3rem 1.5rem}.proton-DataTable__sort-button{cursor:pointer;border-radius:var(--proton-control__border-radius);border:none;max-height:.8rem;padding-bottom:1px;transition:background-color .15s ease-in-out,opacity .15s ease-in-out,transform .15s ease-in-out;display:inline-flex}.proton-DataTable__sort-button:hover{background-color:var(--proton-control__hover-color)}.proton-DataTable__sort-button[aria-label=ascending]{align-items:flex-end;transform:rotateX(180deg)}.proton-Input{max-width:var(--container-width,100%);border-radius:var(--proton-control__border-radius);box-sizing:border-box;outline:1px solid var(--proton-control__border-color);background:var(--proton-control__background-color-light);width:100%;height:100%;color:var(--proton-control__text-color);border:none;flex:1;padding-left:.75rem;font-weight:400;transition:outline .1s ease-in-out,background-color .1s ease-in-out,color .1s ease-in-out,opacity .1s ease-in-out}.proton-Input:disabled{opacity:.6;cursor:not-allowed}.proton-Input:not(.proton-Input--error):focus{outline:2px solid var(--proton-color__primary)}.proton-Input:not(.proton-Input--error):focus-visible{outline:2px solid var(--proton-color__primary)}.proton-Input.proton-Input--error{outline:2px solid var(--proton-color__danger-medium)}.proton-Input__container{width:100%;height:100%}.proton-Input__container-inner{width:100%;height:100%;position:relative}.proton-Input__descriptor{z-index:1;justify-content:center;height:100%;position:absolute;top:50%;transform:translateY(-50%)}.proton-Input__prefix,.proton-Input__suffix{justify-content:center;align-items:center;min-width:32px;display:flex}.proton-Input__prefix{opacity:.5;cursor:text;left:0}.proton-Input__suffix{outline:none;right:0}.proton-Input__container-inner.proton-Input__has-prefix .proton-Input{padding-left:var(--prefix-width,32px)}.proton-Input__container-inner.proton-Input__has-suffix .proton-Input{padding-right:calc(.75rem + var(--suffix-width,44px))}.proton-Input__text{margin-bottom:4px;padding:.25rem 0}.proton-Input__error{color:var(--proton-color__danger-medium);opacity:1}.proton-Input__label-top{padding-top:1.375rem;padding-bottom:.5rem}.proton-Input__label{opacity:.55;color:var(--proton-control__text-color);pointer-events:none;transition:all .3s cubic-bezier(.4,0,.2,1);position:absolute;top:50%;left:16px;transform:translateY(-50%)}.proton-Input__label--filled,.proton-Input[value]:not([value=""])+.proton-Input__label,.proton-Input:focus+.proton-Input__label{color:var(--proton-color__primary-light);opacity:1;font-size:.75rem;transform:translateY(-100%)}.proton-Input:focus+.proton-Input__label{color:var(--proton-color__primary-light);opacity:1}.proton-CopyInput-button{all:unset;cursor:pointer;color:var(--proton-control__text-color);text-transform:uppercase;letter-spacing:.2em;justify-content:center;align-items:center;width:100%;height:100%;padding:0 .875rem 0 1.4rem;font-size:.75rem;font-weight:600;line-height:1rem;transition:background-color .2s;display:flex}.proton-CopyInput-button svg{margin-bottom:.0625rem;transition:color .2s}.proton-CopyInput-button-text{margin:0 .5rem;transition:color .2s}.proton-CopyInput-button-text--copied,.proton-CopyInput-button--copied svg{color:var(--proton-color__primary)}.proton-Input:not(.proton-Input--error):focus{outline:1px solid var(--proton-control__border-color)}.proton-Input:not(.proton-Input--error):focus-visible{outline:1px solid var(--proton-control__border-color)}.proton-ui__theme--light .proton-CopyInput-button{border-left:1px solid var(--proton-control__border-color);align-items:center;height:100%;transition:background-color .2s;display:flex}.proton-CopyInput-button:hover{background-color:var(--proton-control__hover-color)}.proton-Overlay{background-color:var(--proton-control__background-color-light);border-radius:var(--proton-control__border-radius);box-shadow:0 0 8px 0 var(--proton-control__shadow-color),0 0 4px 0 var(--proton-control__shadow-color);color:var(--proton-control__text-color);outline:none;font-weight:300}.proton-Overlay__content{padding:7px 9px}.proton-Overlay-arrow,.proton-Overlay-arrow svg{fill:var(--proton-control__background-color-light)}.proton-OTPInput__digits{justify-content:center;align-items:center;display:flex}.proton-OTPInput__digit{color:var(--proton-control__text-color);border:1px solid var(--proton-control__border-color);background:var(--proton-control__background-color-light);text-align:center;box-sizing:border-box;border-radius:.625rem;max-width:2.675rem;min-height:3.225rem;margin:0 .25rem;font-size:1.25rem;transition:box-shadow 60ms ease-in-out,border-color .1s ease-in-out}@media (max-width:320px){.proton-OTPInput__digit{max-width:2.8125rem}}.proton-OTPInput__digit:focus{box-shadow:inset 0 0 4px var(--proton-color__primary);outline:none}.proton-OTPInput__digit:disabled{opacity:.8;cursor:not-allowed}.proton-OTPInput__digit--error,.proton-OTPInput__digit--error:focus{border-color:var(--proton-color__danger-medium);box-shadow:inset 0 0 4px var(--proton-color__danger-medium)}.proton-OTPInput__error{color:var(--proton-color__danger-medium);margin-bottom:.25rem;margin-left:.325rem}.proton-OTPInput__separator{color:var(--proton-control__border-color);font-weight:600}.proton-Modal{background-color:var(--proton-control__background-color-light);color:var(--proton-control__text-color);max-width:86vw;max-height:80vh;box-shadow:0 .0625rem .25rem -.0625rem var(--proton-control__shadow-color);opacity:1;border-radius:.5rem;padding:2rem;transition:opacity .2s ease-in-out;position:relative;overflow:visible}html:has([data-disable-document-scroll=true]){overflow:hidden}.proton-Modal__content{margin-top:.5rem}.proton-Modal--closing{opacity:0}@media (max-width:768px){.proton-Modal{border-radius:0;flex-direction:column;justify-content:center;align-items:center;width:100vw;max-width:100vw;height:100vh;max-height:100vh;padding:.25rem .5rem;display:flex}.proton-Modal>div{text-align:center;width:100%}}.proton-Modal__title{color:var(--proton-control__title-color);word-break:break-word;line-height:1.2}.proton-Modal__subtitle{color:var(--proton-control__text-color);line-height:1.5}.proton-Modal__body{word-break:break-word;margin:1rem 0;line-height:1.5}.proton-Modal__actions{justify-content:center;gap:1rem;margin-top:1rem;display:flex}.proton-Modal__close-button{cursor:pointer;color:var(--proton-control__text-color);background:0 0;border:none;border-radius:.25rem;padding:.5rem;font-size:2.2rem;font-weight:800;line-height:1;transition:opacity .15s;position:absolute;top:.375rem;right:.75rem}.proton-Modal__close-button:focus,.proton-Modal__close-button:hover{opacity:.8}.proton-Popover{--slide:translateY(.5rem);transform-origin:var(--radix-popover-content-transform-origin);max-height:var(--radix-popover-content-available-height);animation:.2s cubic-bezier(.16,1,.3,1) popoverSlideAndFade}.proton-Popover__constrained{width:var(--radix-popover-trigger-width)}[data-radix-popper-content-wrapper]:has(>.proton-Popover){z-index:10000!important;outline:none!important;min-width:0!important}.proton-Popover[data-state=closed]{animation:.2s reverse popoverSlideAndFade}@keyframes popoverSlideAndFade{0%{opacity:0;transform:var(--slide)}to{opacity:1;transform:translate(0)}}.proton-Input[type=search]{border-radius:3.125rem}.proton-SearchInput__wrapper{width:100%}.proton-SearchInput__button{color:currentColor;cursor:pointer;opacity:1;background-color:#0000;border:none;transition:opacity .2s ease-in-out}.proton-SearchInput__button--hide{opacity:0}.proton-SearchInput__wrapper input[type=search]::-webkit-search-decoration{display:none}.proton-SearchInput__wrapper input[type=search]::-webkit-search-cancel-button{display:none}.proton-SearchInput__wrapper input[type=search]::-webkit-search-results-button{display:none}.proton-SearchInput__wrapper input[type=search]::-webkit-search-results-decoration{display:none}.proton-Select{flex-direction:column;width:100%;margin:0;display:flex}.proton-Select__label{color:var(--proton-control__text-color);margin-bottom:.125rem}.proton-Select__trigger{color:var(--proton-control__text-color);font-size:inherit;border-radius:var(--proton-control__border-radius);flex:1;justify-content:space-between;align-items:center;width:100%;padding:.2rem .6rem .2rem 1rem;display:flex}.proton-Select__trigger--rounded{border-radius:3.125rem}button.proton-Select__trigger{letter-spacing:.05em;cursor:pointer;background:var(--proton-control__background-color-light);outline:1px solid var(--proton-control__border-color);border:none;font-weight:400;transition:outline .2s ease-in-out;position:relative}button.proton-Select__trigger:focus{outline:solid var(--proton-color__primary) 2px;border:none}button.proton-Select__trigger:focus-visible{outline:solid var(--proton-color__primary) 2px;border:none}.proton-Select__popover{padding-left:.25rem}.proton-Select__trigger_icon{color:var(--proton-control__text-color);width:.75em;height:.75em;margin-left:.8em;transition:transform .2s;position:relative}.proton-Select__trigger_icon svg{width:100%;height:100%;position:absolute;top:50%;left:0;transform:translateY(-50%)}.proton-Select__trigger_icon--flipped{transform:rotateX(180deg)}.proton-Select:hover{cursor:pointer}.proton-Select__trigger--disabled,.proton-Select__trigger--disabled:hover{opacity:.5;filter:none;cursor:not-allowed}.proton-Select__value{white-space:nowrap;text-overflow:ellipsis;pointer-events:none;overflow:hidden}.proton-Switch{flex-flow:column;row-gap:5px;display:flex}.proton-Switch__control{cursor:pointer;flex-flow:column;row-gap:5px;display:flex}.proton-Switch__label{text-transform:uppercase;letter-spacing:.1em;color:var(--proton-control__text-color);font-size:.7em;font-weight:600}.proton-Switch__description{color:var(--proton-control__text-color);align-self:center;font-size:.9em}.proton-Switch__wrapper{column-gap:12px;display:flex}.proton-Switch__toggle{background-color:var(--proton-color__gray-light);cursor:pointer;border-radius:26px;flex-shrink:0;width:50px;height:26px;position:relative}.proton-Switch__slider{background-color:#fff;border-radius:22px;width:22px;height:22px;transition:left .2s;position:absolute;top:2px;left:2px}.proton-Switch--on .proton-Switch__toggle{background-color:var(--proton-color__primary)}.proton-Switch--on .proton-Switch__slider{left:26px}.proton-Switch--disabled{opacity:.4}.proton-Switch--disabled .proton-Switch__toggle{cursor:not-allowed}.proton-Switch__control:has(input:focus-visible) .proton-Switch__toggle{outline:2px solid var(--proton-color__primary);outline-offset:2px}.proton-TextEllipsis{vertical-align:middle;color:var(--proton-control__text-color,inherit);font-family:inherit;font-size:inherit;line-height:inherit;width:100%;height:100%;display:inline-block;position:relative}.proton-TextEllipsis--single-line{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.proton-TextEllipsis--multi-line{text-overflow:ellipsis;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.proton-TextEmphasis{background-image:linear-gradient(0deg,#0000 0,#0000 15%,#ff713480 15%,#ff713480 35%,#0000 35%,#0000);padding:0 .05rem;font-style:normal;font-weight:700}.proton-TextEmphasis a{color:inherit;transition:color .15s}.proton-TextEmphasis a:hover{color:var(--proton-color__primary)}.proton-TextEmphasis--tooltip{background-image:linear-gradient(0deg,#0000 0,#0000 15%,#ff713480 25%,#ff713480 87%,#0000 80%,#0000);background-position:bottom;background-repeat:no-repeat;background-size:100% 35%;font-style:italic;font-weight:400;transition:background-size .3s,border-radius .3s}.proton-TextEmphasis--tooltip:hover{background-size:100% 100%;border-radius:.125rem}.proton-TextEmphasis--tooltip:not(:hover){transition-delay:.2s}.proton__Tooltip-trigger{display:inherit}.proton__Tooltip{--slide:translateY(.5rem);animation:.2s cubic-bezier(.16,1,.3,1) tooltipSlideAndFade}.proton__Tooltip[data-state=closed]{animation:.2s reverse tooltipSlideAndFade}@keyframes tooltipSlideAndFade{0%{opacity:0;transform:var(--slide)}to{opacity:1;transform:translate(0)}}[data-radix-popper-content-wrapper]:has(>.proton__Tooltip){z-index:10000!important;min-width:0!important}.proton-Waveform{--waveform-bar-color-dark:#ffffffe6;--waveform-bar-color-light:#000000b3;--waveform-disabled-color-dark:#fff3;--waveform-disabled-color-light:#0003;--waveform-animation-curve:cubic-bezier(.34, 1.56, .64, 1);--waveform-animation-duration:.4s;--waveform-bar-delay-multiplier:.7ms;--waveform-timestamp-padding:.25rem;--waveform-timestamp-font-size:.75rem;--waveform-timestamp-border-radius:.125rem;--waveform-hover-line-width:2px;flex-direction:row;align-items:center;width:100%;height:100%;display:flex;position:relative}.proton-Waveform__container{z-index:0;flex:1;align-items:center;width:100%;height:100%;display:flex;position:relative}.proton-Waveform__container[data-disabled=true]{cursor:not-allowed}.proton-Waveform__timestamp{pointer-events:none;border-radius:var(--waveform-timestamp-border-radius);padding:0 var(--waveform-timestamp-padding);font-size:var(--waveform-timestamp-font-size);z-index:1;background-color:#0009;position:absolute}.proton-ui__theme--light .proton-Waveform__timestamp{color:#000c;background-color:#ffffffe6;box-shadow:0 2px 2px #0000004d}.proton-Waveform__timestamp--left{left:1px}.proton-Waveform__timestamp--right{right:3px}.proton-Waveform__hover-line{width:var(--waveform-hover-line-width);background-color:#ffffff80;position:absolute;top:0;bottom:0;transform:translate(-50%)}.proton-ui__theme--light .proton-Waveform__hover-line{background-color:#00000080}.proton-Waveform__bar-wrapper{flex-direction:column;justify-content:center;align-items:center;height:100%;display:flex;position:relative}.proton-Waveform__bar{background-color:var(--waveform-bar-color-dark);transform-origin:50%;width:100%;height:0;transition:height var(--waveform-animation-duration) var(--waveform-animation-curve);position:relative}.proton-Waveform__bar.proton-Waveform__bar--visible{height:var(--target-height);transition-delay:calc(var(--index) * var(--waveform-bar-delay-multiplier))}.proton-Waveform__bar.proton-Waveform__bar--upper{transform-origin:bottom}.proton-Waveform__bar.proton-Waveform__bar--lower{transform-origin:top}.proton-ui__theme--light .proton-Waveform__bar{background-color:var(--waveform-bar-color-light)}.proton-Waveform__bar.proton-Waveform__bar--disabled{background-color:var(--waveform-disabled-color-dark)}.proton-ui__theme--light .proton-Waveform__bar.proton-Waveform__bar--disabled{background-color:var(--waveform-disabled-color-light)}.proton-Waveform__bar.proton-Waveform__bar--disabled.proton-Waveform__bar--played{background-color:var(--waveform-disabled-color-dark)}.proton-ui__theme--light .proton-Waveform__bar.proton-Waveform__bar--disabled.proton-Waveform__bar--played{background-color:var(--waveform-disabled-color-light)}.proton-Waveform__bar.proton-Waveform__bar--played{background-color:var(--proton-color__primary)}.proton-Waveform__bar--hover{height:var(--hover-height);z-index:10;background-color:color-mix(in srgb,var(--proton-color__primary) 50%,transparent);mix-blend-mode:darken;width:100%;position:absolute;top:50%;transform:translateY(-50%)}.proton-ui__theme--light .proton-Waveform__bar--hover{background-color:color-mix(in srgb,var(--proton-color__primary) 50%,white);mix-blend-mode:lighten}.proton-Waveform__bar-unavailable{pointer-events:none;text-align:center;z-index:10;color:#fff;background-color:#000000b3;border-radius:4px;padding:3px 6px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.proton-ui__theme--light .proton-Waveform__bar-unavailable{color:#000;background-color:#fff;box-shadow:0 5px 5px #0000004d}.proton-Waveform__active-region{pointer-events:none;z-index:1;border:1.5px solid #ffffffb3;border-radius:4px;position:absolute;top:0;bottom:0}.proton-ui__theme--light .proton-Waveform__active-region{border-color:#0000004d}