@zonos/amino 4.4.7 → 4.4.9

package/components/graph-matrix/GraphMatrix.d.ts

@@ -2,6 +2,7 @@ import { type ReactNode } from 'react';
 import { GraphQLSchema } from 'graphql';
 import type { ExecutionResultType, GraphiqlExecutionResult, HandleFetchFetcher } from "../../utils/_graphiqlFetcher";
 type GraphMatrixProps = {
+    customToolbar?: ReactNode;
     /**
      * @param fetcher
      * @description Custom fetcher, if not provided, the default fetcher (handleFetch - "src/utils/handleFetch.ts") will be used
@@ -20,10 +21,9 @@ type GraphMatrixProps = {
     schemaName: string;
     url: string;
     variables: string;
-    customToolbar?: ReactNode;
 };
 export declare const GraphMatrix: {
-    ({ fetcher, loadingComponent, onEditQuery, onEditVariables, onResultData, query, schema, schemaName, url, variables, customToolbar, }: GraphMatrixProps): JSX.Element;
+    ({ customToolbar, fetcher, loadingComponent, onEditQuery, onEditVariables, onResultData, query, schema, schemaName, url, variables, }: GraphMatrixProps): JSX.Element;
     ToolbarButton: import("react").ForwardRefExoticComponent<Pick<{
         label: string;
     } & import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement>, "label" | "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & import("react").RefAttributes<HTMLButtonElement>>;

package/components/graph-matrix/GraphMatrix.js

@@ -1 +1 @@
-"use strict";var e=require("../../_tslib-fe391a2e.js"),r=require("react/jsx-runtime"),t=require("react"),i=require("@graphiql/react"),n=require("graphiql");require("graphql");var s=require("../../icons/EyeIcon.js"),a=require("../../icons/EyeOffIcon.js"),o=require("../../styles/constants/theme.js"),l=require("../../utils/hooks/_useGraphiqlExplorer.js"),u=require("../../utils/hooks/_useGraphiqlFetcher.js"),c=require("../../utils/hooks/_useGraphiqlStorage.js"),h=require("styled-components"),p=require("../nested-data-table/NestedDataTable.js"),q=require("../split-panel/SplitPanel.js"),d=require("./_GraphiqlContextWrapper.js"),j=require("./_LoadingIcon.js");function g(e){return e&&e.__esModule?e:{default:e}}require("../../icons/icon-base/_IconBase.js"),require("@graphiql/plugin-explorer"),require("swr"),require("../../utils/_graphiqlFetcher.js"),require("../../utils/handleFetch.js"),require("../../utils/hooks/useSwr.js"),require("lodash/kebabCase"),require("../../utils/hooks/useCurrentShema.js"),require("../../utils/hooks/useStorage.js"),require("../../utils/storage.js"),require("../button/Button.js"),require("../spinner/Spinner.js"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../button/useRipple.js"),require("../rest-state/RestState.js"),require("../text/Text.js"),require("../nested-data-table/_TableData.js"),require("../../icons/ChevronRightCircleIcon.js"),require("../../utils/flattenRow.js"),require("../../utils/setupNestedData.js"),require("../../utils/truncateText.js"),require("../pivot-table/PivotTable.js"),require("react-data-grid"),require("../../icons/ChevronDownIcon.js"),require("../../icons/ChevronUpIcon.js"),require("../../utils/addIndex.js"),require("../tooltip/Tooltip.js"),require("@mui/material/styles"),require("@mui/material/Tooltip"),require("../stack/VStack.js"),require("../stack/Stack.js"),require("../../utils/hooks/useAminoTheme.js"),require("../nested-data-table/_Filter.js"),require("../../icons/FilterIcon.js"),require("../../utils/hooks/useDropdown.js"),require("@floating-ui/react-dom"),require("../select/MultiSelect.js"),require("../checkbox/Checkbox.js"),require("../../icons/CheckmarkIcon.js"),require("../../utils/getTestId.js"),require("../help-text/HelpText.js"),require("../select/_StyledReactSelect.js"),require("react-select"),require("../../icons/CheckCircleIcon.js"),require("../../icons/DoubleChevronIcon.js"),require("../../icons/RemoveCircleIcon.js"),require("../../icons/RemoveIcon.js"),require("react-split-it"),require("../../icons/custom/ZonosLogoIcon.js");var m,b,x,_=g(h),v=_.default.div(m||(m=e.__makeTemplateObject(["\n  height: 100%;\n  .graphiql-tab > .graphiql-tab-button {\n    outline: none;\n  }\n  .docExplorerWrap {\n    /* Built-in plugin height is set to 100% which prevents the plugin bar scrolling */\n    height: auto !important;\n    /* Don't cap explorer width */\n    width: auto !important;\n  }\n  .graphiql-explorer-graphql-arguments {\n    svg {\n      display: inline-block;\n    }\n  }\n\n  .graphiql-explorer-root > div {\n    overflow: auto !important;\n  }\n"],["\n  height: 100%;\n  .graphiql-tab > .graphiql-tab-button {\n    outline: none;\n  }\n  .docExplorerWrap {\n    /* Built-in plugin height is set to 100% which prevents the plugin bar scrolling */\n    height: auto !important;\n    /* Don't cap explorer width */\n    width: auto !important;\n  }\n  .graphiql-explorer-graphql-arguments {\n    svg {\n      display: inline-block;\n    }\n  }\n\n  .graphiql-explorer-root > div {\n    overflow: auto !important;\n  }\n"]))),f=_.default.div(b||(b=e.__makeTemplateObject(["\n  height: 100%;\n"],["\n  height: 100%;\n"]))),S=_.default.div(x||(x=e.__makeTemplateObject(["\n  height: 100vh;\n  overflow: auto;\n  padding: 0 ",";\n  display: flex;\n  flex-direction: column;\n"],["\n  height: 100vh;\n  overflow: auto;\n  padding: 0 ",";\n  display: flex;\n  flex-direction: column;\n"])),o.theme.space12),k=function(o){var h=o.fetcher,g=o.loadingComponent,m=o.onEditQuery,b=o.onEditVariables,x=o.onResultData,_=o.query,k=void 0===_?"":_,y=o.schema,C=o.schemaName,E=o.url,I=o.variables,T=void 0===I?"":I,w=o.customToolbar,F=e.__read(t.useState(null),2),D=F[0],G=F[1],R=e.__read(t.useState(null),2)[1],B=e.__read(t.useState(!1),2),O=B[0],L=B[1],N=e.__read(t.useState("first-time"),1)[0],A=e.__read(t.useState(!1),2),Q=A[0],W=A[1],M=e.__read(t.useState([1,0]),2),P=M[0],V=M[1],z=e.__read(t.useState(""),2),H=z[0],K=z[1],U=u.useGraphiqlFetcher({cachingKey:N,url:E,query:k,customFetcher:h||null,operationName:H}),Z=U.graphiqlFetcher,J=U.resultData,X=U.isLoading,Y=c.useGraphiqlStorage({defaultSchema:C});t.useEffect((function(){L(!!(null==D?void 0:D.isFetching)||X)}),[null==D?void 0:D.isFetching,L,X]),t.useEffect((function(){J&&x&&x(J)}),[x,J]);var $=l.useGraphiqlExplorer({onEdit:m,query:k});if(!y)return r.jsx(r.Fragment,{children:g||r.jsx(j.Loading,{})});var ee,re;return r.jsx(v,{children:r.jsxs(q.SplitPanel,e.__assign({sizes:P,onSetSizes:V,collapseAll:!Q},{children:[r.jsx(f,{children:r.jsx(n.GraphiQL,e.__assign({fetcher:Z,onEditOperationName:K,onEditQuery:m,onEditVariables:b,plugins:[$],query:k,variables:T,schema:y,toolbar:{additionalContent:r.jsxs(r.Fragment,{children:[r.jsx(i.ToolbarButton,e.__assign({label:Q?"Hide table":"Show table",onClick:function(){return W(!Q)}},{children:Q?r.jsx(a.EyeOffIcon,{color:"red600"}):r.jsx(s.EyeIcon,{color:"gray400"})})),w]})},storage:Y},{children:r.jsx(d.GraphiqlContextWrapper,e.__assign({setExecutionContext:G,setResponseEditorContext:R},{children:r.jsx(n.GraphiQL.Footer,{})}))}))}),(ee=null!==J?J.data:J,re=ee?Object.entries(ee):null,re?r.jsx(S,{children:re.map((function(t){var i=e.__read(t,2),n=i[0],s=i[1];return Array.isArray(s)||s?r.jsx(p.NestedDataTable,{isFetching:O,tableData:s,title:n},n):null}))}):null)]}))})};k.ToolbarButton=i.ToolbarButton,exports.GraphMatrix=k;
+"use strict";var e=require("../../_tslib-fe391a2e.js"),r=require("react/jsx-runtime"),t=require("react"),i=require("@graphiql/react"),n=require("graphiql");require("graphql");var s=require("../../icons/EyeIcon.js"),a=require("../../icons/EyeOffIcon.js"),o=require("../../styles/constants/theme.js"),l=require("../../utils/hooks/_useGraphiqlExplorer.js"),u=require("../../utils/hooks/_useGraphiqlFetcher.js"),c=require("../../utils/hooks/_useGraphiqlStorage.js"),h=require("styled-components"),p=require("../nested-data-table/NestedDataTable.js"),q=require("../split-panel/SplitPanel.js"),d=require("./_GraphiqlContextWrapper.js"),j=require("./_LoadingIcon.js");function g(e){return e&&e.__esModule?e:{default:e}}require("../../icons/icon-base/_IconBase.js"),require("@graphiql/plugin-explorer"),require("swr"),require("../../utils/_graphiqlFetcher.js"),require("../../utils/handleFetch.js"),require("../../utils/hooks/useSwr.js"),require("lodash/kebabCase"),require("../../utils/hooks/useCurrentShema.js"),require("../../utils/hooks/useStorage.js"),require("../../utils/storage.js"),require("../button/Button.js"),require("../spinner/Spinner.js"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../button/useRipple.js"),require("../rest-state/RestState.js"),require("../text/Text.js"),require("../nested-data-table/_TableData.js"),require("../../icons/ChevronRightCircleIcon.js"),require("../../utils/flattenRow.js"),require("../../utils/setupNestedData.js"),require("../../utils/truncateText.js"),require("../pivot-table/PivotTable.js"),require("react-data-grid"),require("../../icons/ChevronDownIcon.js"),require("../../icons/ChevronUpIcon.js"),require("../../utils/addIndex.js"),require("../tooltip/Tooltip.js"),require("@mui/material/styles"),require("@mui/material/Tooltip"),require("../stack/VStack.js"),require("../stack/Stack.js"),require("../../utils/hooks/useAminoTheme.js"),require("../nested-data-table/_Filter.js"),require("../../icons/FilterIcon.js"),require("../../utils/hooks/useDropdown.js"),require("@floating-ui/react-dom"),require("../select/MultiSelect.js"),require("../checkbox/Checkbox.js"),require("../../icons/CheckmarkIcon.js"),require("../../utils/getTestId.js"),require("../help-text/HelpText.js"),require("../select/_StyledReactSelect.js"),require("react-select"),require("../../icons/CheckCircleIcon.js"),require("../../icons/DoubleChevronIcon.js"),require("../../icons/RemoveCircleIcon.js"),require("../../icons/RemoveIcon.js"),require("react-split-it"),require("../../icons/custom/ZonosLogoIcon.js");var m,b,x,_=g(h),v=_.default.div(m||(m=e.__makeTemplateObject(["\n  height: 100%;\n  .graphiql-tab > .graphiql-tab-button {\n    outline: none;\n  }\n  .docExplorerWrap {\n    /* Built-in plugin height is set to 100% which prevents the plugin bar scrolling */\n    height: auto !important;\n    /* Don't cap explorer width */\n    width: auto !important;\n  }\n  .graphiql-explorer-graphql-arguments {\n    svg {\n      display: inline-block;\n    }\n  }\n\n  .graphiql-explorer-root > div {\n    overflow: auto !important;\n  }\n"],["\n  height: 100%;\n  .graphiql-tab > .graphiql-tab-button {\n    outline: none;\n  }\n  .docExplorerWrap {\n    /* Built-in plugin height is set to 100% which prevents the plugin bar scrolling */\n    height: auto !important;\n    /* Don't cap explorer width */\n    width: auto !important;\n  }\n  .graphiql-explorer-graphql-arguments {\n    svg {\n      display: inline-block;\n    }\n  }\n\n  .graphiql-explorer-root > div {\n    overflow: auto !important;\n  }\n"]))),f=_.default.div(b||(b=e.__makeTemplateObject(["\n  height: 100%;\n"],["\n  height: 100%;\n"]))),S=_.default.div(x||(x=e.__makeTemplateObject(["\n  height: 100vh;\n  overflow: auto;\n  padding: 0 ",";\n  display: flex;\n  flex-direction: column;\n"],["\n  height: 100vh;\n  overflow: auto;\n  padding: 0 ",";\n  display: flex;\n  flex-direction: column;\n"])),o.theme.space12),k=function(o){var h=o.customToolbar,g=o.fetcher,m=o.loadingComponent,b=o.onEditQuery,x=o.onEditVariables,_=o.onResultData,k=o.query,y=void 0===k?"":k,C=o.schema,E=o.schemaName,I=o.url,T=o.variables,w=void 0===T?"":T,F=e.__read(t.useState(null),2),D=F[0],G=F[1],R=e.__read(t.useState(null),2)[1],B=e.__read(t.useState(!1),2),O=B[0],L=B[1],N=e.__read(t.useState("first-time"),1)[0],A=e.__read(t.useState(!1),2),Q=A[0],W=A[1],M=e.__read(t.useState([1,0]),2),P=M[0],V=M[1],z=e.__read(t.useState(""),2),H=z[0],K=z[1],U=u.useGraphiqlFetcher({cachingKey:N,url:I,query:y,customFetcher:g||null,operationName:H}),Z=U.graphiqlFetcher,J=U.resultData,X=U.isLoading,Y=c.useGraphiqlStorage({defaultSchema:E});t.useEffect((function(){L(!!(null==D?void 0:D.isFetching)||X)}),[null==D?void 0:D.isFetching,L,X]),t.useEffect((function(){J&&_&&_(J)}),[_,J]);var $=l.useGraphiqlExplorer({onEdit:b,query:y});if(!C)return r.jsx(r.Fragment,{children:m||r.jsx(j.Loading,{})});var ee,re;return r.jsx(v,{children:r.jsxs(q.SplitPanel,e.__assign({sizes:P,onSetSizes:V,collapseAll:!Q},{children:[r.jsx(f,{children:r.jsx(n.GraphiQL,e.__assign({fetcher:Z,onEditOperationName:K,onEditQuery:b,onEditVariables:x,plugins:[$],query:y,variables:w,schema:C,toolbar:{additionalContent:r.jsxs(r.Fragment,{children:[r.jsx(i.ToolbarButton,e.__assign({label:Q?"Hide table":"Show table",onClick:function(){return W(!Q)}},{children:Q?r.jsx(a.EyeOffIcon,{color:"red600"}):r.jsx(s.EyeIcon,{color:"gray400"})})),h]})},storage:Y},{children:r.jsx(d.GraphiqlContextWrapper,e.__assign({setExecutionContext:G,setResponseEditorContext:R},{children:r.jsx(n.GraphiQL.Footer,{})}))}))}),(ee=null!==J?J.data:J,re=ee?Object.entries(ee):null,re?r.jsx(S,{children:re.map((function(t){var i=e.__read(t,2),n=i[0],s=i[1];return Array.isArray(s)||s?r.jsx(p.NestedDataTable,{isFetching:O,tableData:s,title:n},n):null}))}):null)]}))})};k.ToolbarButton=i.ToolbarButton,exports.GraphMatrix=k;

package/components/nested-data-table/NestedDataTable.d.ts

@@ -1,25 +1,27 @@
 import { type ReactNode } from 'react';
 import type { Column } from 'react-data-grid';
 import { flattenRow } from "../../utils/flattenRow";
-import type { RowWithIndex } from '../pivot-table/PivotTable';
-type ColumnType = Column<RowWithIndex, Record<string, unknown>>;
-type ColumnFormatter = Parameters<NonNullable<ColumnType['formatter']>>;
-type Props<TRow = Record<string, unknown>> = {
+type ColumnType<TRow> = Column<TRow, Record<string, unknown>>;
+export type ColumnFormatter<TRow extends Record<string, unknown>> = NonNullable<ColumnType<TRow>['formatter']>;
+export type CustomColumnFormatters<TRow extends Record<string, unknown>> = {
+    [key in keyof TRow]?: ColumnFormatter<TRow>;
+};
+type Props<TRow extends Record<string, unknown>> = {
     currentPage?: number;
     /**
      * @param customFlattenRow
      * @description Custom flattenRow function, if not provided, the default flattenRow (flattenRow - "src/utils/flattenRow.ts") will be used
      */
     customFlattenRow?: typeof flattenRow;
-    customColumnFormatters?: {
-        [key in keyof TRow]?: (props: ColumnFormatter[0]) => ReactNode;
-    };
+    customColumnFormatters?: CustomColumnFormatters<TRow>;
     handlePagination?: (page: number) => void;
+    hasNextPage?: boolean;
+    hasPreviousPage?: boolean;
     isFetching: boolean;
     loadingComponent?: ReactNode;
     restState?: ReactNode;
     tableData: TRow[];
     title?: string;
 };
-export declare const NestedDataTable: <TRow extends Record<string, unknown>>({ currentPage, customFlattenRow, customColumnFormatters, handlePagination, isFetching, loadingComponent, restState, tableData, title, }: Props<TRow>) => JSX.Element;
+export declare const NestedDataTable: <TRow extends Record<string, unknown>>({ currentPage, customFlattenRow, customColumnFormatters, handlePagination, hasNextPage, hasPreviousPage, isFetching, loadingComponent, restState, tableData, title, }: Props<TRow>) => JSX.Element;
 export {};

package/components/nested-data-table/NestedDataTable.js

@@ -1 +1 @@
-"use strict";var e=require("../../_tslib-fe391a2e.js"),t=require("react/jsx-runtime"),r=require("react"),i=require("../../styles/constants/theme.js"),s=require("styled-components"),n=require("../button/Button.js"),u=require("../rest-state/RestState.js"),a=require("../text/Text.js"),o=require("./_TableData.js");function l(e){return e&&e.__esModule?e:{default:e}}require("../spinner/Spinner.js"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../button/useRipple.js"),require("../../icons/ChevronRightCircleIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../utils/flattenRow.js"),require("../../utils/setupNestedData.js"),require("../../utils/truncateText.js"),require("../pivot-table/PivotTable.js"),require("react-data-grid"),require("../../icons/ChevronDownIcon.js"),require("../../icons/ChevronUpIcon.js"),require("../../utils/addIndex.js"),require("../tooltip/Tooltip.js"),require("@mui/material/styles"),require("@mui/material/Tooltip"),require("../stack/VStack.js"),require("../stack/Stack.js"),require("../../utils/hooks/useAminoTheme.js"),require("../../utils/hooks/useStorage.js"),require("../../utils/storage.js"),require("swr"),require("../../utils/hooks/useSwr.js"),require("./_Filter.js"),require("../../icons/FilterIcon.js"),require("../../utils/hooks/useDropdown.js"),require("@floating-ui/react-dom"),require("../select/MultiSelect.js"),require("../checkbox/Checkbox.js"),require("../../icons/CheckmarkIcon.js"),require("../../utils/getTestId.js"),require("../help-text/HelpText.js"),require("../select/_StyledReactSelect.js"),require("react-select"),require("../../icons/CheckCircleIcon.js"),require("../../icons/DoubleChevronIcon.js"),require("../../icons/RemoveCircleIcon.js"),require("../../icons/RemoveIcon.js");var c,j,q,d=l(s),m=d.default.div(c||(c=e.__makeTemplateObject(["\n  height: 100%;\n"],["\n  height: 100%;\n"]))),p=d.default.div(j||(j=e.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: ",";\n"],["\n  display: flex;\n  align-items: center;\n  padding: ",";\n"])),i.theme.space8),h=d.default.div(q||(q=e.__makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n  align-items: center;\n  gap: ",";\n"],["\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n  align-items: center;\n  gap: ",";\n"])),i.theme.space8);exports.NestedDataTable=function(i){var s=i.currentPage,l=i.customFlattenRow,c=i.customColumnFormatters,j=i.handlePagination,q=i.isFetching,d=i.loadingComponent,x=i.restState,g=i.tableData,b=i.title,f=r.useMemo((function(){return Array.isArray(g)?g:[g]}),[g]),_=!!j&&!!s&&g.length;return t.jsxs(m,{children:[t.jsxs(p,{children:[!!b&&t.jsx(a.Text,e.__assign({type:"header"},{children:b})),!!_&&t.jsxs(h,{children:[t.jsx(n.Button,e.__assign({intent:"outline",disabled:1===s,onClick:function(){j(s-1)}},{children:"Previous page"})),s,t.jsx(n.Button,e.__assign({onClick:function(){j(s+1)},intent:"outline"},{children:"Next page"}))]})]}),q?d?t.jsx(t.Fragment,{children:d}):t.jsx(u.RestState,{label:"Loading..."}):0===f.length?x?t.jsx(t.Fragment,{children:x}):t.jsx(u.RestState,{label:"No data available."}):t.jsx(o.TableData,{customColumnFormatters:c,tableDataArr:f,customFlattenRow:l})]})};
+"use strict";var e=require("../../_tslib-fe391a2e.js"),t=require("react/jsx-runtime"),r=require("react"),i=require("../../styles/constants/theme.js"),s=require("styled-components"),n=require("../button/Button.js"),a=require("../rest-state/RestState.js"),u=require("../text/Text.js"),o=require("./_TableData.js");function l(e){return e&&e.__esModule?e:{default:e}}require("../spinner/Spinner.js"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../button/useRipple.js"),require("../../icons/ChevronRightCircleIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../utils/flattenRow.js"),require("../../utils/setupNestedData.js"),require("../../utils/truncateText.js"),require("../pivot-table/PivotTable.js"),require("react-data-grid"),require("../../icons/ChevronDownIcon.js"),require("../../icons/ChevronUpIcon.js"),require("../../utils/addIndex.js"),require("../tooltip/Tooltip.js"),require("@mui/material/styles"),require("@mui/material/Tooltip"),require("../stack/VStack.js"),require("../stack/Stack.js"),require("../../utils/hooks/useAminoTheme.js"),require("../../utils/hooks/useStorage.js"),require("../../utils/storage.js"),require("swr"),require("../../utils/hooks/useSwr.js"),require("./_Filter.js"),require("../../icons/FilterIcon.js"),require("../../utils/hooks/useDropdown.js"),require("@floating-ui/react-dom"),require("../select/MultiSelect.js"),require("../checkbox/Checkbox.js"),require("../../icons/CheckmarkIcon.js"),require("../../utils/getTestId.js"),require("../help-text/HelpText.js"),require("../select/_StyledReactSelect.js"),require("react-select"),require("../../icons/CheckCircleIcon.js"),require("../../icons/DoubleChevronIcon.js"),require("../../icons/RemoveCircleIcon.js"),require("../../icons/RemoveIcon.js");var c,j,q,d=l(s),m=d.default.div(c||(c=e.__makeTemplateObject(["\n  height: 100%;\n"],["\n  height: 100%;\n"]))),h=d.default.div(j||(j=e.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: ",";\n"],["\n  display: flex;\n  align-items: center;\n  padding: ",";\n"])),i.theme.space8),p=d.default.div(q||(q=e.__makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n  align-items: center;\n  gap: ",";\n"],["\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n  align-items: center;\n  gap: ",";\n"])),i.theme.space8);exports.NestedDataTable=function(i){var s=i.currentPage,l=i.customFlattenRow,c=i.customColumnFormatters,j=i.handlePagination,q=i.hasNextPage,d=i.hasPreviousPage,g=i.isFetching,x=i.loadingComponent,b=i.restState,f=i.tableData,_=i.title,k=r.useMemo((function(){return Array.isArray(f)?f:[f]}),[f]),v=!!j&&!!s&&f.length;return t.jsxs(m,{children:[t.jsxs(h,{children:[!!_&&t.jsx(u.Text,e.__assign({type:"header"},{children:_})),!!v&&t.jsxs(p,{children:[t.jsx(n.Button,e.__assign({intent:"outline",disabled:1===s||!d,onClick:function(){d&&j(s-1)}},{children:"Previous page"})),s,t.jsx(n.Button,e.__assign({disabled:!q,onClick:function(){q&&j(s+1)},intent:"outline"},{children:"Next page"}))]})]}),g?x?t.jsx(t.Fragment,{children:x}):t.jsx(a.RestState,{label:"Loading..."}):0===k.length?b?t.jsx(t.Fragment,{children:b}):t.jsx(a.RestState,{label:"No data available."}):t.jsx(o.TableData,{customColumnFormatters:c,tableDataArr:k,customFlattenRow:l})]})};

package/components/nested-data-table/_TableData.js

@@ -1 +1 @@
-"use strict";var e=require("../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),t=require("react"),r=require("../../icons/ChevronRightCircleIcon.js"),i=require("../../styles/constants/theme.js"),s=require("../../utils/flattenRow.js"),a=require("../../utils/setupNestedData.js"),o=require("../../utils/truncateText.js"),u=require("styled-components"),l=require("../button/Button.js"),c=require("../pivot-table/PivotTable.js"),d=require("../tooltip/Tooltip.js"),p=require("./_Filter.js");function m(e){return e&&e.__esModule?e:{default:e}}require("../../icons/icon-base/_IconBase.js"),require("../spinner/Spinner.js"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../button/useRipple.js"),require("react-data-grid"),require("../../icons/ChevronDownIcon.js"),require("../../icons/ChevronUpIcon.js"),require("../../utils/addIndex.js"),require("@mui/material/styles"),require("@mui/material/Tooltip"),require("../stack/VStack.js"),require("../stack/Stack.js"),require("../text/Text.js"),require("../../utils/hooks/useAminoTheme.js"),require("../../utils/hooks/useStorage.js"),require("../../utils/storage.js"),require("swr"),require("../../utils/hooks/useSwr.js"),require("../../icons/FilterIcon.js"),require("../../utils/hooks/useDropdown.js"),require("@floating-ui/react-dom"),require("../select/MultiSelect.js"),require("../checkbox/Checkbox.js"),require("../../icons/CheckmarkIcon.js"),require("../../utils/getTestId.js"),require("../help-text/HelpText.js"),require("../select/_StyledReactSelect.js"),require("react-select"),require("../../icons/CheckCircleIcon.js"),require("../../icons/DoubleChevronIcon.js"),require("../../icons/RemoveCircleIcon.js"),require("../../icons/RemoveIcon.js");var j,f,h,g=m(u),q=g.default.div(j||(j=e.__makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  margin-bottom: var(--amino-space-12);\n"],["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  margin-bottom: var(--amino-space-12);\n"]))),x=g.default.div(f||(f=e.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  height: 100%;\n  svg {\n    transition: 0.3s all ease;\n  }\n  .expanding-button {\n    svg {\n      transform: rotate(90deg);\n    }\n  }\n"],["\n  display: flex;\n  align-items: center;\n  height: 100%;\n  svg {\n    transition: 0.3s all ease;\n  }\n  .expanding-button {\n    svg {\n      transform: rotate(90deg);\n    }\n  }\n"]))),_=g.default.div(h||(h=e.__makeTemplateObject(["\n  overflow: auto;\n  height: 100%;\n  .expanding {\n    background-color: ",";\n  }\n  & & {\n    padding: "," "," ",";\n  }\n"],["\n  overflow: auto;\n  height: 100%;\n  .expanding {\n    background-color: ",";\n  }\n  & & {\n    padding: "," "," ",";\n  }\n"])),i.theme.gray50,i.theme.space4,i.theme.space12,i.theme.space24),v=function(i){var u=i.customFlattenRow,m=i.noFilter,j=i.tableDataArr,f=i.customColumnFormatters,h=u||s.flattenRow,g=e.__read(t.useState([]),2),b=g[0],y=g[1],k=t.useCallback((function(){return j.map((function(e){var n=Object.entries(e).reduce((function(e,n){return h({currentVal:n,prev:e})}),{});return a.setupNestedData(n)}))}),[h,j]),C=e.__read(t.useState(k()),2),w=C[0],D=C[1];t.useEffect((function(){j&&D(k())}),[k,j]);var R=t.useCallback((function(t){var i=t.row,s=t.column,a=t.onRowChange,c=i[s.key];if(Array.isArray(c)){var p=0===c.length,m=i._expandedKey===s.key;return n.jsx(x,{children:n.jsx(d.Tooltip,e.__assign({subtitle:"This list has no items.",showTooltip:p},{children:n.jsx(l.Button,{className:m?"expanding-button":"",intent:"subtle",disabled:p,onClick:function(){return a(e.__assign(e.__assign({},i),{_expandedKey:m?"":s.key}))},icon:n.jsx(r.ChevronRightCircleIcon,{})})}))})}return i._expandedData&&i._expandedData.length>0?n.jsx(v,{customFlattenRow:u,noFilter:!0,tableDataArr:i._expandedData,customColumnFormatters:f}):"string"==typeof c?o.truncateText({text:c,length:40,addEllipsis:!0}):c}),[f,u]),T=t.useMemo((function(){return Object.entries(w.find(Boolean)||{}).filter((function(n){var t=e.__read(n,1)[0];return"key"!==t&&!t.startsWith("_")})).flatMap((function(n){var t=e.__read(n,1)[0];return[{key:t,name:t,formatter:(null==f?void 0:f[t])||R}]}))}),[f,R,w]),I=t.useMemo((function(){var n=T.filter((function(e){return!b.includes(e.key)}));return n.map((function(t){return e.__assign(e.__assign({},t),{cellClass:function(e){return e._expandedKey===t.key||e._expandedData.length>0?"expanding":""},colSpan:function(e){return"ROW"===e.type&&e.row._expandedData.length>0?n.filter((function(e){return!e.key.startsWith("_")})).length:void 0}})}))}),[T,b]);return n.jsxs(_,{children:[n.jsx(q,{children:!m&&n.jsx(p.Filter,{columns:T,hiddenColumns:b,setHiddenColumns:y})}),n.jsx(c.PivotTable,{headerRowHeight:40,rowHeight:function(e){var n,t;return"ROW"===e.type&&(null===(t=null===(n=e.row)||void 0===n?void 0:n._expandedData)||void 0===t?void 0:t.length)>0?300:45},tableHeight:"100%",rows:w,onRowsChange:function(e,n){var t=n.indexes[0],r=void 0!==t?e[t]:null;if(r&&void 0!==t){var i=r[r._expandedKey];if(i&&Array.isArray(i)){var s=e[t+1],a=(null==s?void 0:s._expandedData)&&s._expandedData.length>0,o=i[0],u="object"==typeof o&&o?i:i.map((function(e){return{item:e}}));e.splice(t+1,a?1:0,{_expandedData:u,_expandedKey:""})}else e.splice(t+1,1);D(e)}},columns:I,defaultColumnOptions:{sortable:!1,resizable:!0}})]})};exports.TableData=v;
+"use strict";var e=require("../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),t=require("react"),r=require("../../icons/ChevronRightCircleIcon.js"),i=require("../../styles/constants/theme.js"),s=require("../../utils/flattenRow.js"),a=require("../../utils/setupNestedData.js"),o=require("../../utils/truncateText.js"),u=require("styled-components"),l=require("../button/Button.js"),c=require("../pivot-table/PivotTable.js"),d=require("../tooltip/Tooltip.js"),p=require("./_Filter.js");function m(e){return e&&e.__esModule?e:{default:e}}require("../../icons/icon-base/_IconBase.js"),require("../spinner/Spinner.js"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../button/useRipple.js"),require("react-data-grid"),require("../../icons/ChevronDownIcon.js"),require("../../icons/ChevronUpIcon.js"),require("../../utils/addIndex.js"),require("@mui/material/styles"),require("@mui/material/Tooltip"),require("../stack/VStack.js"),require("../stack/Stack.js"),require("../text/Text.js"),require("../../utils/hooks/useAminoTheme.js"),require("../../utils/hooks/useStorage.js"),require("../../utils/storage.js"),require("swr"),require("../../utils/hooks/useSwr.js"),require("../../icons/FilterIcon.js"),require("../../utils/hooks/useDropdown.js"),require("@floating-ui/react-dom"),require("../select/MultiSelect.js"),require("../checkbox/Checkbox.js"),require("../../icons/CheckmarkIcon.js"),require("../../utils/getTestId.js"),require("../help-text/HelpText.js"),require("../select/_StyledReactSelect.js"),require("react-select"),require("../../icons/CheckCircleIcon.js"),require("../../icons/DoubleChevronIcon.js"),require("../../icons/RemoveCircleIcon.js"),require("../../icons/RemoveIcon.js");var j,f,g,h=m(u),q=h.default.div(j||(j=e.__makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  margin-bottom: var(--amino-space-12);\n"],["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  margin-bottom: var(--amino-space-12);\n"]))),x=h.default.div(f||(f=e.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  height: 100%;\n  svg {\n    transition: 0.3s all ease;\n  }\n  .expanding-button {\n    svg {\n      transform: rotate(90deg);\n    }\n  }\n"],["\n  display: flex;\n  align-items: center;\n  height: 100%;\n  svg {\n    transition: 0.3s all ease;\n  }\n  .expanding-button {\n    svg {\n      transform: rotate(90deg);\n    }\n  }\n"]))),_=h.default.div(g||(g=e.__makeTemplateObject(["\n  .expanding {\n    background-color: ",";\n  }\n  & & {\n    padding: "," "," ",";\n  }\n"],["\n  .expanding {\n    background-color: ",";\n  }\n  & & {\n    padding: "," "," ",";\n  }\n"])),i.theme.gray50,i.theme.space4,i.theme.space12,i.theme.space24),v=function(i){var u=i.customFlattenRow,m=i.noFilter,j=i.tableDataArr,f=i.customColumnFormatters,g=u||s.flattenRow,h=e.__read(t.useState([]),2),b=h[0],y=h[1],k=t.useCallback((function(){return j.map((function(e){var n=Object.entries(e).reduce((function(e,n){return g({currentVal:n,prev:e})}),{});return a.setupNestedData(n)}))}),[g,j]),C=e.__read(t.useState(k()),2),w=C[0],D=C[1];t.useEffect((function(){j&&D(k())}),[k,j]);var R=t.useCallback((function(t){var i=t.row,s=t.column,a=t.onRowChange,c=i[s.key];if(Array.isArray(c)){var p=0===c.length,m=i._expandedKey===s.key;return n.jsx(x,{children:n.jsx(d.Tooltip,e.__assign({subtitle:"This list has no items.",showTooltip:p},{children:n.jsx(l.Button,{className:m?"expanding-button":"",intent:"subtle",disabled:p,onClick:function(){return a(e.__assign(e.__assign({},i),{_expandedKey:m?"":s.key}))},icon:n.jsx(r.ChevronRightCircleIcon,{})})}))})}return i._expandedData&&i._expandedData.length>0?n.jsx(v,{customFlattenRow:u,noFilter:!0,tableDataArr:i._expandedData,customColumnFormatters:f}):"string"==typeof c?o.truncateText({text:c,length:40,addEllipsis:!0}):c}),[f,u]),T=t.useMemo((function(){return Object.entries(w.find(Boolean)||{}).filter((function(n){var t=e.__read(n,1)[0];return"key"!==t&&!t.startsWith("_")})).flatMap((function(n){var t=e.__read(n,1)[0];return[{key:t,name:t,formatter:(null==f?void 0:f[t])||R}]}))}),[f,R,w]),I=t.useMemo((function(){var n=T.filter((function(e){return!b.includes(e.key)}));return n.map((function(t){return e.__assign(e.__assign({},t),{cellClass:function(e){return e._expandedKey===t.key||e._expandedData.length>0?"expanding":""},colSpan:function(e){return"ROW"===e.type&&e.row._expandedData.length>0?n.filter((function(e){return!e.key.startsWith("_")})).length:void 0}})}))}),[T,b]);return n.jsxs(_,{children:[n.jsx(q,{children:!m&&n.jsx(p.Filter,{columns:T,hiddenColumns:b,setHiddenColumns:y})}),n.jsx(c.PivotTable,{headerRowHeight:40,rowHeight:function(e){var n,t;return"ROW"===e.type&&(null===(t=null===(n=e.row)||void 0===n?void 0:n._expandedData)||void 0===t?void 0:t.length)>0?300:45},tableHeight:"100%",rows:w,onRowsChange:function(e,n){var t=n.indexes[0],r=void 0!==t?e[t]:null;if(r&&void 0!==t){var i=r[r._expandedKey];if(i&&Array.isArray(i)){var s=e[t+1],a=(null==s?void 0:s._expandedData)&&s._expandedData.length>0,o=i[0],u="object"==typeof o&&o?i:i.map((function(e){return{item:e}}));e.splice(t+1,a?1:0,{_expandedData:u,_expandedKey:""})}else e.splice(t+1,1);D(e)}},columns:I,defaultColumnOptions:{sortable:!1,resizable:!0}})]})};exports.TableData=v;

package/components/pivot-table/PivotTable.d.ts

@@ -20,7 +20,7 @@ export type NestedRowData = {
     _expandedData: Record<string, unknown>[];
     _expandedKey: string;
 };
-export type RowWithIndex = RowData & {
+export type RowWithIndex<Row extends RowData = RowData> = Row & {
     _itemIndex?: number;
 } & NestedRowData;
 type Props<TRow extends RowWithIndex, TSummaryRow extends unknown, TRowKey extends KeyValue> = Omit<DataGridProps<TRow, TSummaryRow, TRowKey>, keyof OverrideProps<TRow, TSummaryRow>> & OverrideProps<TRow, TSummaryRow>;
@@ -30,5 +30,5 @@ type Props<TRow extends RowWithIndex, TSummaryRow extends unknown, TRowKey exten
  * @documentation https://adazzle.github.io/react-data-grid/#/grouping
  * @example https://github.com/adazzle/react-data-grid/tree/main/website
  */
-export declare const PivotTable: <TRow extends RowWithIndex, TSummaryRow = unknown, TRowKey extends KeyValue = KeyValue>({ rows, columns, tableHeight, sortColumns: _sortColumns, onSortColumnsChange, renderers: _renderers, ...rest }: Props<TRow, TSummaryRow, TRowKey>) => JSX.Element;
+export declare const PivotTable: <TRow extends RowWithIndex<RowData>, TSummaryRow = unknown, TRowKey extends KeyValue = KeyValue>({ rows, columns, tableHeight, sortColumns: _sortColumns, onSortColumnsChange, renderers: _renderers, ...rest }: Props<TRow, TSummaryRow, TRowKey>) => JSX.Element;
 export {};

package/components/select/_StyledReactSelect.js

@@ -1 +1 @@
-"use strict";var n=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),s=require("react"),o=require("react-select"),t=require("../checkbox/Checkbox.js"),i=require("../help-text/HelpText.js"),r=require("../../icons/CheckCircleIcon.js"),a=require("../../icons/DoubleChevronIcon.js"),l=require("../../icons/RemoveCircleIcon.js"),c=require("../../icons/RemoveIcon.js"),d=require("../../styles/constants/theme.js"),u=require("../../utils/getTestId.js"),p=require("styled-components");function h(n){return n&&n.__esModule?n:{default:n}}require("framer-motion"),require("../text/Text.js"),require("../../icons/CheckmarkIcon.js"),require("../../icons/icon-base/_IconBase.js");var m,g,_,f,x,b,v,j,y,k,T,z=h(o),C=h(p),w=function(s){return e.jsx(o.components.ClearIndicator,n.__assign({},s,{children:e.jsx(l.RemoveCircleIcon,{size:19})}))},I=function(s){return e.jsx(o.components.DropdownIndicator,n.__assign({},s,{children:e.jsx(a.DoubleChevronIcon,{size:20})}))},O=C.default.div(m||(m=n.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: ",";\n  padding: 10px;\n"],["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: ",";\n  padding: 10px;\n"])),d.theme.gray700),S=C.default.label(b||(b=n.__makeTemplateObject(["\n  position: absolute;\n  transition: ",";\n  font-size: ",";\n  line-height: ",";\n  transform-origin: left top;\n  left: calc("," - 2px);\n  .has-icon & {\n    left: calc("," + 2px);\n  }\n  top: calc(50% - "," / 2);\n  .has-label & {\n    & + div {\n      align-self: flex-end;\n    }\n  }\n  .has-value &,\n  .is-focused & {\n    top: calc("," + 3px);\n    transform: scale(0.8);\n  }\n\n  /* Size modify */\n  ","\n\n  ","\n\n  ","\n\n  ","\n"],["\n  position: absolute;\n  transition: ",";\n  font-size: ",";\n  line-height: ",";\n  transform-origin: left top;\n  left: calc("," - 2px);\n  .has-icon & {\n    left: calc("," + 2px);\n  }\n  top: calc(50% - "," / 2);\n  .has-label & {\n    & + div {\n      align-self: flex-end;\n    }\n  }\n  .has-value &,\n  .is-focused & {\n    top: calc("," + 3px);\n    transform: scale(0.8);\n  }\n\n  /* Size modify */\n  ","\n\n  ","\n\n  ","\n\n  ","\n"])),d.theme.transition,d.theme.fontSizeBase,d.theme.fontSizeBase,d.theme.space16,d.theme.space40,d.theme.fontSizeBase,d.theme.space8,(function(e){var s=e.$size;return"sm"===s&&p.css(g||(g=n.__makeTemplateObject(["\n      .",".has-label & {\n        & + div {\n          margin-bottom: -6px;\n        }\n      }\n      .",".has-value &,\n      .",".is-focused & {\n        top: 2px;\n      }\n    "],["\n      .",".has-label & {\n        & + div {\n          margin-bottom: -6px;\n        }\n      }\n      .",".has-value &,\n      .",".is-focused & {\n        top: 2px;\n      }\n    "])),s,s,s)}),(function(e){var s=e.$size;return"md"===s&&p.css(_||(_=n.__makeTemplateObject(["\n      .",".has-label & {\n        & + div {\n          margin-bottom: -2px;\n        }\n      }\n      .",".has-value &,\n      .",".is-focused & {\n        top: 6px;\n      }\n    "],["\n      .",".has-label & {\n        & + div {\n          margin-bottom: -2px;\n        }\n      }\n      .",".has-value &,\n      .",".is-focused & {\n        top: 6px;\n      }\n    "])),s,s,s)}),(function(e){var s=e.$size;return"lg"===s&&p.css(f||(f=n.__makeTemplateObject(["\n      .",".has-value &,\n      .",".is-focused & {\n        top: 10px;\n      }\n    "],["\n      .",".has-value &,\n      .",".is-focused & {\n        top: 10px;\n      }\n    "])),s,s)}),(function(e){var s=e.$size;return"xl"===s&&p.css(x||(x=n.__makeTemplateObject(["\n      .",".has-label & {\n        & + div {\n          margin-bottom: 3px;\n        }\n      }\n      .",".has-value &,\n      .",".is-focused & {\n        top: 11px;\n      }\n    "],["\n      .",".has-label & {\n        & + div {\n          margin-bottom: 3px;\n        }\n      }\n      .",".has-value &,\n      .",".is-focused & {\n        top: 11px;\n      }\n    "])),s,s,s)})),q=C.default.div(v||(v=n.__makeTemplateObject(["\n  .react-select-control + div {\n    z-index: 20;\n  }\n\n  &.has-error .react-select-control {\n    box-shadow: ",";\n  }\n"],["\n  .react-select-control + div {\n    z-index: 20;\n  }\n\n  &.has-error .react-select-control {\n    box-shadow: ",";\n  }\n"])),d.theme.glowError),R=C.default.strong(j||(j=n.__makeTemplateObject(["\n  font-weight: 600;\n"],["\n  font-weight: 600;\n"]))),L=function(s){var o=s.children,t=s.cx,i=s.getStyles,r=s.className,a=s.hasValue,l=s.isDisabled,c=s.isFocused,d=s.innerRef,u=s.innerProps,p=s.menuIsOpen,h=s.selectProps,m=h.icon,g=h.label,_=h.value,f=h.size;return e.jsxs("div",n.__assign({className:t({control:!0,"control--is-disabled":l,"control--is-focused":c,"control--menu-is-open":p},[r,a?"has-value":"",m?"has-icon":"",c?"is-focused":"",g||Array.isArray(_)&&_.length>1?"has-label":"",f,"react-select-control"].join(" ")),ref:d,style:i("control",s)},u,{children:[m&&e.jsx(O,{children:m}),e.jsxs(S,n.__assign({$size:f},{children:[g," ",Array.isArray(_)&&_.length>1&&e.jsxs(R,{children:["(",_.length," selected)"]})]})),o]}))},M=C.default.div(y||(y=n.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  color: ",";\n  svg {\n    margin-right: 4px;\n    color: ",";\n  }\n"],["\n  display: flex;\n  align-items: center;\n  color: ",";\n  svg {\n    margin-right: 4px;\n    color: ",";\n  }\n"])),(function(n){return n.$color||"inherit"}),d.theme.gray1200),P=C.default.div(k||(k=n.__makeTemplateObject(["\n  &:not(.is-disabled) {\n    &.is-focused,\n    &:hover {\n      /* The styles are inlined on this component from emotion, so we must override */\n      background-color: "," !important;\n    }\n  }\n"],["\n  &:not(.is-disabled) {\n    &.is-focused,\n    &:hover {\n      /* The styles are inlined on this component from emotion, so we must override */\n      background-color: "," !important;\n    }\n  }\n"])),d.theme.gray100),D=C.default.div(T||(T=n.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"],["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"]))),B=function(s){var o=s.children,t=s.color,i=s.icon;return e.jsxs(M,n.__assign({$color:t},{children:[i,o]}))},N=function(s){var t=s.children,i=n.__rest(s,["children"]);return e.jsx(o.components.MultiValueLabel,n.__assign({},i,{children:e.jsx(B,n.__assign({icon:i.data.icon},{children:t}))}))},V=function(s){var o=s.innerProps;return e.jsx("div",n.__assign({},o,{role:"button"},{children:e.jsx(c.RemoveIcon,{size:14})}))},$=function(s){var o=s.children,i=s.data,a=s.getStyles,l=s.innerRef,c=s.innerProps,d=s.isDisabled,u=s.isSelected,p=s.isFocused,h=s.className,m=s.selectProps,g=m.hasGroups,_=a("option",s),f=_.color,x=n.__rest(_,["color"]);return g&&(x.paddingLeft=48),e.jsx("div",n.__assign({ref:l},c,{children:e.jsx(P,n.__assign({style:x,className:[h,p?"is-focused":"",d?"is-disabled":""].join(" ")},{children:m.isMulti?e.jsx(t.Checkbox,{checked:u,disabled:d,icon:i.icon,label:i.label,labelDescription:i.labelDescription,onChange:function(){}}):e.jsxs(D,{children:[e.jsx(B,n.__assign({color:f,icon:i.icon},{children:o})),u&&e.jsx(r.CheckCircleIcon,{color:"blue600",size:16})]})}))}))},W={clearIndicator:function(e){return n.__assign(n.__assign({},e),{color:"".concat(d.theme.gray700),paddingLeft:14,paddingRight:4})},control:function(e,s){var o=s.selectProps.size;return n.__assign(n.__assign({},e),{borderColor:"".concat(d.theme.gray200),borderRadius:6,cursor:"pointer",color:d.theme.gray800,height:"var(--amino-size-".concat(o,")"),flexWrap:"inherit",minHeight:"var(--amino-size-".concat(o,")"),boxShadow:s.isFocused?"".concat(d.theme.glowBlue):"",background:d.theme.gray0})},dropdownIndicator:function(e){return n.__assign(n.__assign({},e),{color:"".concat(d.theme.gray900),paddingLeft:4,paddingRight:10})},group:function(e){return n.__assign(n.__assign({},e),{paddingTop:0,paddingBottom:0})},indicatorSeparator:function(e){return n.__assign(n.__assign({},e),{width:0})},menu:function(e){return n.__assign(n.__assign({},e),{borderRadius:12,boxShadow:d.theme.v3ShadowLarge,marginTop:4,background:d.theme.surfaceColor})},menuList:function(e){return n.__assign(n.__assign({},e),{paddingTop:8,paddingLeft:8,paddingRight:8})},multiValue:function(e){return n.__assign(n.__assign({},e),{background:d.theme.gray200,fontWeight:500,minWidth:"inherit"})},multiValueLabel:function(e){return n.__assign(n.__assign({},e),{color:d.theme.textColor})},option:function(e,s){return n.__assign(n.__assign({},e),{color:s.isSelected?d.theme.blue600:d.theme.textColor,fontWeight:s.isSelected?500:400,backgroundColor:"inherit",paddingTop:7,paddingRight:12,paddingBottom:7,paddingLeft:8,borderRadius:"8px",cursor:"pointer"})},placeholder:function(e){return n.__assign(n.__assign({},e),{opacity:0,".has-label.is-focused &":{opacity:1}})},singleValue:function(e){return n.__assign(n.__assign({},e),{fontWeight:500,color:d.theme.textColor})},valueContainer:function(e){return n.__assign(n.__assign({},e),{flexWrap:"nowrap",padding:"unset",paddingLeft:12,".has-icon &":{paddingLeft:0}})}};exports.CheckboxOptionComponent=$,exports.StyledReactSelect=function(o){var t=o.components,r=o.error,a=o.helpText,l=o.hasGroups,c=o.icon,d=o.label,p=o.size,h=void 0===p?"xl":p,m=o.styles,g=o.placeholder,_=o.menuPosition,f=void 0===_?"fixed":_,x=o.closeOnOutsideScroll,b=void 0!==x&&x,v=n.__rest(o,["components","error","helpText","hasGroups","icon","label","size","styles","placeholder","menuPosition","closeOnOutsideScroll"]),j={hasGroups:l,icon:c,label:d,size:h},y=s.useMemo((function(){return u.getTestId({componentName:"select",name:d})}),[d]),k=s.useRef(null),T=s.useMemo((function(){return!!b&&function(n){var e,s,o;return!(n.target instanceof HTMLElement)||(null===(o=!(null===(s=null===(e=k.current)||void 0===e?void 0:e.menuListRef)||void 0===s?void 0:s.isEqualNode(n.target)))||void 0===o||o)}}),[b]);return e.jsxs(q,n.__assign({"data-testid":y,className:[r?"has-error":""].join(" ")},{children:[e.jsx(z.default,n.__assign({components:n.__assign({ClearIndicator:w,Control:L,DropdownIndicator:I,MultiValueLabel:N,MultiValueRemove:V,Option:$},t),menuPosition:f,placeholder:g||"",styles:n.__assign(n.__assign({},m),W),ref:k,closeMenuOnScroll:T},v,j)),e.jsx(i.HelpText,{error:r,helpText:a})]}))};
+"use strict";var n=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),s=require("react"),o=require("react-select"),t=require("../checkbox/Checkbox.js"),i=require("../help-text/HelpText.js"),r=require("../../icons/CheckCircleIcon.js"),a=require("../../icons/DoubleChevronIcon.js"),l=require("../../icons/RemoveCircleIcon.js"),c=require("../../icons/RemoveIcon.js"),d=require("../../styles/constants/theme.js"),u=require("../../utils/getTestId.js"),p=require("styled-components");function h(n){return n&&n.__esModule?n:{default:n}}require("framer-motion"),require("../text/Text.js"),require("../../icons/CheckmarkIcon.js"),require("../../icons/icon-base/_IconBase.js");var m,g,_,f,x,b,v,j,y,k,T,z=h(o),C=h(p),w=function(s){return e.jsx(o.components.ClearIndicator,n.__assign({},s,{children:e.jsx(l.RemoveCircleIcon,{size:19})}))},I=function(s){return e.jsx(o.components.DropdownIndicator,n.__assign({},s,{children:e.jsx(a.DoubleChevronIcon,{size:20})}))},O=C.default.div(m||(m=n.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: ",";\n  padding: 10px;\n"],["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: ",";\n  padding: 10px;\n"])),d.theme.gray700),S=C.default.label(b||(b=n.__makeTemplateObject(["\n  position: absolute;\n  transition: ",";\n  font-size: ",";\n  line-height: ",";\n  transform-origin: left top;\n  left: calc("," - 2px);\n  .has-icon & {\n    left: calc("," + 2px);\n  }\n  top: calc(50% - "," / 2);\n  .has-label & {\n    & + div {\n      align-self: flex-end;\n    }\n  }\n  .has-value &,\n  .is-focused & {\n    top: calc("," + 3px);\n    transform: scale(0.8);\n  }\n\n  /* Size modify */\n  ","\n\n  ","\n\n  ","\n\n  ","\n"],["\n  position: absolute;\n  transition: ",";\n  font-size: ",";\n  line-height: ",";\n  transform-origin: left top;\n  left: calc("," - 2px);\n  .has-icon & {\n    left: calc("," + 2px);\n  }\n  top: calc(50% - "," / 2);\n  .has-label & {\n    & + div {\n      align-self: flex-end;\n    }\n  }\n  .has-value &,\n  .is-focused & {\n    top: calc("," + 3px);\n    transform: scale(0.8);\n  }\n\n  /* Size modify */\n  ","\n\n  ","\n\n  ","\n\n  ","\n"])),d.theme.transition,d.theme.fontSizeBase,d.theme.fontSizeBase,d.theme.space16,d.theme.space40,d.theme.fontSizeBase,d.theme.space8,(function(e){var s=e.$size;return"sm"===s&&p.css(g||(g=n.__makeTemplateObject(["\n      .",".has-label & {\n        & + div {\n          margin-bottom: -6px;\n        }\n      }\n      .",".has-value &,\n      .",".is-focused & {\n        top: 2px;\n      }\n    "],["\n      .",".has-label & {\n        & + div {\n          margin-bottom: -6px;\n        }\n      }\n      .",".has-value &,\n      .",".is-focused & {\n        top: 2px;\n      }\n    "])),s,s,s)}),(function(e){var s=e.$size;return"md"===s&&p.css(_||(_=n.__makeTemplateObject(["\n      .",".has-label & {\n        & + div {\n          margin-bottom: -2px;\n        }\n      }\n      .",".has-value &,\n      .",".is-focused & {\n        top: 6px;\n      }\n    "],["\n      .",".has-label & {\n        & + div {\n          margin-bottom: -2px;\n        }\n      }\n      .",".has-value &,\n      .",".is-focused & {\n        top: 6px;\n      }\n    "])),s,s,s)}),(function(e){var s=e.$size;return"lg"===s&&p.css(f||(f=n.__makeTemplateObject(["\n      .",".has-value &,\n      .",".is-focused & {\n        top: 10px;\n      }\n    "],["\n      .",".has-value &,\n      .",".is-focused & {\n        top: 10px;\n      }\n    "])),s,s)}),(function(e){var s=e.$size;return"xl"===s&&p.css(x||(x=n.__makeTemplateObject(["\n      .",".has-label & {\n        & + div {\n          margin-bottom: 3px;\n        }\n      }\n      .",".has-value &,\n      .",".is-focused & {\n        top: 11px;\n      }\n    "],["\n      .",".has-label & {\n        & + div {\n          margin-bottom: 3px;\n        }\n      }\n      .",".has-value &,\n      .",".is-focused & {\n        top: 11px;\n      }\n    "])),s,s,s)})),q=C.default.div(v||(v=n.__makeTemplateObject(["\n  .react-select-control + div {\n    z-index: 20;\n  }\n\n  &.has-error .react-select-control {\n    box-shadow: ",";\n  }\n"],["\n  .react-select-control + div {\n    z-index: 20;\n  }\n\n  &.has-error .react-select-control {\n    box-shadow: ",";\n  }\n"])),d.theme.glowError),R=C.default.strong(j||(j=n.__makeTemplateObject(["\n  font-weight: 600;\n"],["\n  font-weight: 600;\n"]))),L=function(s){var o=s.children,t=s.cx,i=s.getStyles,r=s.className,a=s.hasValue,l=s.isDisabled,c=s.isFocused,d=s.innerRef,u=s.innerProps,p=s.menuIsOpen,h=s.selectProps,m=h.icon,g=h.label,_=h.value,f=h.size;return e.jsxs("div",n.__assign({className:t({control:!0,"control--is-disabled":l,"control--is-focused":c,"control--menu-is-open":p},[r,a?"has-value":"",m?"has-icon":"",c?"is-focused":"",g||Array.isArray(_)&&_.length>1?"has-label":"",f,"react-select-control"].join(" ")),ref:d,style:i("control",s)},u,{children:[m&&e.jsx(O,{children:m}),e.jsxs(S,n.__assign({$size:f},{children:[g," ",Array.isArray(_)&&_.length>1&&e.jsxs(R,{children:["(",_.length," selected)"]})]})),o]}))},M=C.default.div(y||(y=n.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  color: ",";\n  svg {\n    margin-right: 4px;\n    color: ",";\n  }\n"],["\n  display: flex;\n  align-items: center;\n  color: ",";\n  svg {\n    margin-right: 4px;\n    color: ",";\n  }\n"])),(function(n){return n.$color||"inherit"}),d.theme.gray1200),P=C.default.div(k||(k=n.__makeTemplateObject(["\n  &:not(.is-disabled) {\n    &.is-focused,\n    &:hover {\n      /* The styles are inlined on this component from emotion, so we must override */\n      background-color: "," !important;\n    }\n  }\n"],["\n  &:not(.is-disabled) {\n    &.is-focused,\n    &:hover {\n      /* The styles are inlined on this component from emotion, so we must override */\n      background-color: "," !important;\n    }\n  }\n"])),d.theme.gray100),B=C.default.div(T||(T=n.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"],["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"]))),D=function(s){var o=s.children,t=s.color,i=s.icon;return e.jsxs(M,n.__assign({$color:t},{children:[i,o]}))},N=function(s){var t=s.children,i=n.__rest(s,["children"]);return e.jsx(o.components.MultiValueLabel,n.__assign({},i,{children:e.jsx(D,n.__assign({icon:i.data.icon},{children:t}))}))},V=function(s){var o=s.innerProps;return e.jsx("div",n.__assign({},o,{role:"button"},{children:e.jsx(c.RemoveIcon,{size:14})}))},$=function(s){var o=s.children,i=s.data,a=s.getStyles,l=s.innerRef,c=s.innerProps,d=s.isDisabled,u=s.isSelected,p=s.isFocused,h=s.className,m=s.selectProps,g=m.hasGroups,_=a("option",s),f=_.color,x=n.__rest(_,["color"]);return g&&(x.paddingLeft=48),e.jsx("div",n.__assign({ref:l},c,{children:e.jsx(P,n.__assign({style:x,className:[h,p?"is-focused":"",d?"is-disabled":""].join(" ")},{children:m.isMulti?e.jsx(t.Checkbox,{checked:u,disabled:d,icon:i.icon,label:i.label,labelDescription:i.labelDescription,onChange:function(){}}):e.jsxs(B,{children:[e.jsx(D,n.__assign({color:f,icon:i.icon},{children:o})),u&&e.jsx(r.CheckCircleIcon,{color:"blue600",size:16})]})}))}))},W={clearIndicator:function(e){return n.__assign(n.__assign({},e),{color:"".concat(d.theme.gray700),paddingLeft:14,paddingRight:4})},control:function(e,s){var o=s.selectProps.size;return n.__assign(n.__assign({},e),{borderColor:"".concat(d.theme.gray200),borderRadius:6,cursor:"pointer",color:d.theme.gray800,height:"var(--amino-size-".concat(o,")"),flexWrap:"inherit",minHeight:"var(--amino-size-".concat(o,")"),boxShadow:s.isFocused?"".concat(d.theme.glowBlue):"",background:d.theme.inputBackground})},dropdownIndicator:function(e){return n.__assign(n.__assign({},e),{color:"".concat(d.theme.gray900),paddingLeft:4,paddingRight:10})},group:function(e){return n.__assign(n.__assign({},e),{paddingTop:0,paddingBottom:0})},indicatorSeparator:function(e){return n.__assign(n.__assign({},e),{width:0})},menu:function(e){return n.__assign(n.__assign({},e),{borderRadius:12,boxShadow:d.theme.v3ShadowLarge,marginTop:4,background:d.theme.surfaceColor})},menuList:function(e){return n.__assign(n.__assign({},e),{paddingTop:8,paddingLeft:8,paddingRight:8})},multiValue:function(e){return n.__assign(n.__assign({},e),{background:d.theme.gray200,fontWeight:500,minWidth:"inherit"})},multiValueLabel:function(e){return n.__assign(n.__assign({},e),{color:d.theme.textColor})},option:function(e,s){return n.__assign(n.__assign({},e),{color:s.isSelected?d.theme.blue600:d.theme.textColor,fontWeight:s.isSelected?500:400,backgroundColor:"inherit",paddingTop:7,paddingRight:12,paddingBottom:7,paddingLeft:8,borderRadius:"8px",cursor:"pointer"})},placeholder:function(e){return n.__assign(n.__assign({},e),{opacity:0,".has-label.is-focused &":{opacity:1}})},singleValue:function(e){return n.__assign(n.__assign({},e),{fontWeight:500,color:d.theme.textColor})},valueContainer:function(e){return n.__assign(n.__assign({},e),{flexWrap:"nowrap",padding:"unset",paddingLeft:12,".has-icon &":{paddingLeft:0}})}};exports.CheckboxOptionComponent=$,exports.StyledReactSelect=function(o){var t=o.components,r=o.error,a=o.helpText,l=o.hasGroups,c=o.icon,d=o.label,p=o.size,h=void 0===p?"xl":p,m=o.styles,g=o.placeholder,_=o.menuPosition,f=void 0===_?"fixed":_,x=o.closeOnOutsideScroll,b=void 0!==x&&x,v=n.__rest(o,["components","error","helpText","hasGroups","icon","label","size","styles","placeholder","menuPosition","closeOnOutsideScroll"]),j={hasGroups:l,icon:c,label:d,size:h},y=s.useMemo((function(){return u.getTestId({componentName:"select",name:d})}),[d]),k=s.useRef(null),T=s.useMemo((function(){return!!b&&function(n){var e,s,o;return!(n.target instanceof HTMLElement)||(null===(o=!(null===(s=null===(e=k.current)||void 0===e?void 0:e.menuListRef)||void 0===s?void 0:s.isEqualNode(n.target)))||void 0===o||o)}}),[b]);return e.jsxs(q,n.__assign({"data-testid":y,className:[r?"has-error":""].join(" ")},{children:[e.jsx(z.default,n.__assign({components:n.__assign({ClearIndicator:w,Control:L,DropdownIndicator:I,MultiValueLabel:N,MultiValueRemove:V,Option:$},t),menuPosition:f,placeholder:g||"",styles:n.__assign(n.__assign({},m),W),ref:k,closeMenuOnScroll:T},v,j)),e.jsx(i.HelpText,{error:r,helpText:a})]}))};

package/components/theme-select/ThemeSelect.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 export type Props = {
+    className?: string;
     disabled?: boolean;
     type?: 'cards' | 'select' | 'toggle';
 };
-export declare const ThemeSelect: ({ disabled, type }: Props) => JSX.Element;
+export declare const ThemeSelect: ({ className, disabled, type, }: Props) => JSX.Element;

package/components/theme-select/ThemeSelect.js

@@ -1 +1 @@
-"use strict";var e=require("../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),t=require("../../icons/custom/theme/ThemeDarkIcon.js"),i=require("../../icons/custom/theme/ThemeLightIcon.js"),r=require("../../icons/NightIcon.js"),s=require("../../icons/SunnyIcon.js"),o=require("../../styles/constants/theme.js"),a=require("../../utils/hooks/useAminoTheme.js"),c=require("styled-components"),l=require("../card/Card.js"),u=require("../select/Select.js"),d=require("../stack/HStack.js"),h=require("../text/Text.js");function m(e){return e&&e.__esModule?e:{default:e}}require("react"),require("../../icons/flag-icon/useStableUniqueId.js"),require("uuid"),require("../../icons/icon-base/_ThemeIconBase.js"),require("../../icons/icon-base/_IconBase.js"),require("../../utils/hooks/useStorage.js"),require("../../utils/storage.js"),require("swr"),require("../../utils/hooks/useSwr.js"),require("../stack/Stack.js"),require("../help-text/HelpText.js"),require("../select/_StyledReactSelect.js"),require("react-select"),require("../checkbox/Checkbox.js"),require("framer-motion"),require("../../icons/CheckmarkIcon.js"),require("../../utils/getTestId.js"),require("../../icons/CheckCircleIcon.js"),require("../../icons/DoubleChevronIcon.js"),require("../../icons/RemoveCircleIcon.js"),require("../../icons/RemoveIcon.js");var p,x,g,b,j,k,f,y=m(c),q=y.default.button(p||(p=e.__makeTemplateObject(["\n  border: ",";\n  color: ",";\n  border-radius: ",";\n\n  &:not([disabled]) {\n    &:active,\n    &:focus {\n      outline: none;\n    }\n  }\n"],["\n  border: ",";\n  color: ",";\n  border-radius: ",";\n\n  &:not([disabled]) {\n    &:active,\n    &:focus {\n      outline: none;\n    }\n  }\n"])),(function(e){return"2px solid ".concat(e.isActive?o.theme.blue400:"transparent")}),(function(e){return e.isActive?o.theme.primary:o.theme.textColor}),o.theme.radius8),v=y.default(l.Card)(x||(x=e.__makeTemplateObject(["\n  background: ",";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: ",";\n\n  svg {\n    height: 64px;\n    width: 110px;\n    box-shadow: ",";\n    margin-bottom: ",";\n  }\n"],["\n  background: ",";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: ",";\n\n  svg {\n    height: 64px;\n    width: 110px;\n    box-shadow: ",";\n    margin-bottom: ",";\n  }\n"])),o.theme.gray0,o.theme.space16,o.theme.v3ShadowLarge,o.theme.space16),_=y.default.div(g||(g=e.__makeTemplateObject(["\n  background: ",";\n  height: 28px;\n  width: 28px;\n  border-radius: 50%;\n  transition: ",";\n  position: absolute;\n  top: 2px;\n  left: ",";\n"],["\n  background: ",";\n  height: 28px;\n  width: 28px;\n  border-radius: 50%;\n  transition: ",";\n  position: absolute;\n  top: 2px;\n  left: ",";\n"])),o.theme.primary,o.theme.transition,(function(e){return e.checked?"calc(100% - 30px)":"2px"})),w=y.default(s.SunnyIcon)(b||(b=e.__makeTemplateObject(["\n  position: absolute;\n  top: 6px;\n  right: 5.8px;\n  color: ",";\n"],["\n  position: absolute;\n  top: 6px;\n  right: 5.8px;\n  color: ",";\n"])),(function(e){return e.isActive?o.theme.gray0:o.theme.gray1200})),T=y.default(r.NightIcon)(j||(j=e.__makeTemplateObject(["\n  position: absolute;\n  top: 6px;\n  left: 6px;\n  color: ",";\n"],["\n  position: absolute;\n  top: 6px;\n  left: 6px;\n  color: ",";\n"])),(function(e){return e.isActive?o.theme.gray0:o.theme.gray1200})),I=y.default.div(k||(k=e.__makeTemplateObject(["\n  margin-right: ",";\n  width: 62px;\n  height: 32px;\n  min-width: 24px;\n  min-height: 16px;\n  line-height: 16px;\n  border-radius: 20px;\n  background: ",";\n  box-shadow: ",";\n  display: block;\n  user-select: none;\n  margin-right: ",";\n  position: relative;\n"],["\n  margin-right: ",";\n  width: 62px;\n  height: 32px;\n  min-width: 24px;\n  min-height: 16px;\n  line-height: 16px;\n  border-radius: 20px;\n  background: ",";\n  box-shadow: ",";\n  display: block;\n  user-select: none;\n  margin-right: ",";\n  position: relative;\n"])),o.theme.space16,o.theme.gray50,o.theme.v3ShadowInset,o.theme.space16),S=y.default.label(f||(f=e.__makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n\n  &.disabled {\n    "," {\n      background: ",";\n    }\n    cursor: not-allowed;\n  }\n"],["\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n\n  &.disabled {\n    "," {\n      background: ",";\n    }\n    cursor: not-allowed;\n  }\n"])),I,(function(e){return e.checked?o.theme.gray300:""})),C=[{label:"Light",value:"day"},{label:"Dark",value:"night"}];exports.ThemeSelect=function(o){var c=o.disabled,l=void 0!==c&&c,m=o.type,p=void 0===m?"select":m,x=a.useAminoTheme(),g=x.aminoTheme,b=x.setAminoTheme,j="day"===g;return n.jsxs(n.Fragment,{children:["cards"===p&&n.jsxs(d.HStack,{children:[n.jsx(q,e.__assign({onClick:function(){return b("day")},type:"button","data-theme":"day",isActive:"day"===g},{children:n.jsxs(v,{children:[n.jsx(i.ThemeLightIcon,{}),n.jsx(h.Text,e.__assign({type:"bold-label"},{children:"Light"}))]})})),n.jsx(q,e.__assign({onClick:function(){return b("night")},type:"button","data-theme":"night",isActive:"night"===g},{children:n.jsxs(v,{children:[n.jsx(t.ThemeDarkIcon,{}),n.jsx(h.Text,e.__assign({type:"bold-label"},{children:"Dark"}))]})}))]}),"select"===p&&n.jsx(u.Select,{value:C.filter((function(e){return e.value===g})),options:C,icon:function(){switch(g){case"day":default:return n.jsx(s.SunnyIcon,{});case"night":return n.jsx(r.NightIcon,{})}}(),onChange:function(e){return b((null==e?void 0:e.value)||"day")},isDisabled:l,isClearable:!1}),"toggle"===p&&n.jsx(S,e.__assign({className:l?"disabled":"",checked:j,onClick:function(){return!l&&b("day"===g?"night":"day")}},{children:n.jsxs(I,e.__assign({checked:j},{children:[n.jsx(_,{checked:j,id:"amino-theme-switch"}),n.jsx(w,{size:20,isActive:"day"===g}),n.jsx(T,{size:20,isActive:"night"===g})]}))}))]})};
+"use strict";var e=require("../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),t=require("../../icons/custom/theme/ThemeDarkIcon.js"),i=require("../../icons/custom/theme/ThemeLightIcon.js"),r=require("../../icons/NightIcon.js"),s=require("../../icons/SunnyIcon.js"),o=require("../../styles/constants/theme.js"),a=require("../../utils/hooks/useAminoTheme.js"),c=require("styled-components"),l=require("../card/Card.js"),u=require("../select/Select.js"),d=require("../stack/HStack.js"),h=require("../text/Text.js");function m(e){return e&&e.__esModule?e:{default:e}}require("react"),require("../../icons/flag-icon/useStableUniqueId.js"),require("uuid"),require("../../icons/icon-base/_ThemeIconBase.js"),require("../../icons/icon-base/_IconBase.js"),require("../../utils/hooks/useStorage.js"),require("../../utils/storage.js"),require("swr"),require("../../utils/hooks/useSwr.js"),require("../stack/Stack.js"),require("../help-text/HelpText.js"),require("../select/_StyledReactSelect.js"),require("react-select"),require("../checkbox/Checkbox.js"),require("framer-motion"),require("../../icons/CheckmarkIcon.js"),require("../../utils/getTestId.js"),require("../../icons/CheckCircleIcon.js"),require("../../icons/DoubleChevronIcon.js"),require("../../icons/RemoveCircleIcon.js"),require("../../icons/RemoveIcon.js");var p,x,g,b,j,k,f,y=m(c),q=y.default.button(p||(p=e.__makeTemplateObject(["\n  border: ",";\n  color: ",";\n  border-radius: ",";\n\n  &:not([disabled]) {\n    &:active,\n    &:focus {\n      outline: none;\n    }\n  }\n"],["\n  border: ",";\n  color: ",";\n  border-radius: ",";\n\n  &:not([disabled]) {\n    &:active,\n    &:focus {\n      outline: none;\n    }\n  }\n"])),(function(e){return"2px solid ".concat(e.isActive?o.theme.blue400:"transparent")}),(function(e){return e.isActive?o.theme.primary:o.theme.textColor}),o.theme.radius8),_=y.default(l.Card)(x||(x=e.__makeTemplateObject(["\n  background: ",";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: ",";\n\n  svg {\n    height: 64px;\n    width: 110px;\n    box-shadow: ",";\n    margin-bottom: ",";\n  }\n"],["\n  background: ",";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: ",";\n\n  svg {\n    height: 64px;\n    width: 110px;\n    box-shadow: ",";\n    margin-bottom: ",";\n  }\n"])),o.theme.gray0,o.theme.space16,o.theme.v3ShadowLarge,o.theme.space16),v=y.default.div(g||(g=e.__makeTemplateObject(["\n  background: ",";\n  height: 28px;\n  width: 28px;\n  border-radius: 50%;\n  transition: ",";\n  position: absolute;\n  top: 2px;\n  left: ",";\n"],["\n  background: ",";\n  height: 28px;\n  width: 28px;\n  border-radius: 50%;\n  transition: ",";\n  position: absolute;\n  top: 2px;\n  left: ",";\n"])),o.theme.primary,o.theme.transition,(function(e){return e.checked?"calc(100% - 30px)":"2px"})),w=y.default(s.SunnyIcon)(b||(b=e.__makeTemplateObject(["\n  position: absolute;\n  top: 6px;\n  right: 5.8px;\n  color: ",";\n"],["\n  position: absolute;\n  top: 6px;\n  right: 5.8px;\n  color: ",";\n"])),(function(e){return e.isActive?o.theme.gray0:o.theme.gray1200})),T=y.default(r.NightIcon)(j||(j=e.__makeTemplateObject(["\n  position: absolute;\n  top: 6px;\n  left: 6px;\n  color: ",";\n"],["\n  position: absolute;\n  top: 6px;\n  left: 6px;\n  color: ",";\n"])),(function(e){return e.isActive?o.theme.gray0:o.theme.gray1200})),I=y.default.div(k||(k=e.__makeTemplateObject(["\n  margin-right: ",";\n  width: 62px;\n  height: 32px;\n  min-width: 24px;\n  min-height: 16px;\n  line-height: 16px;\n  border-radius: 20px;\n  background: ",";\n  box-shadow: ",";\n  display: block;\n  user-select: none;\n  position: relative;\n"],["\n  margin-right: ",";\n  width: 62px;\n  height: 32px;\n  min-width: 24px;\n  min-height: 16px;\n  line-height: 16px;\n  border-radius: 20px;\n  background: ",";\n  box-shadow: ",";\n  display: block;\n  user-select: none;\n  position: relative;\n"])),o.theme.space16,o.theme.gray50,o.theme.v3ShadowInset),S=y.default.label(f||(f=e.__makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n\n  &.disabled {\n    "," {\n      background: ",";\n    }\n    cursor: not-allowed;\n  }\n"],["\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n\n  &.disabled {\n    "," {\n      background: ",";\n    }\n    cursor: not-allowed;\n  }\n"])),I,(function(e){return e.checked?o.theme.gray300:""})),C=[{label:"Light",value:"day"},{label:"Dark",value:"night"}];exports.ThemeSelect=function(o){var c=o.className,l=o.disabled,m=void 0!==l&&l,p=o.type,x=void 0===p?"select":p,g=a.useAminoTheme(),b=g.aminoTheme,j=g.setAminoTheme,k="day"===b;return n.jsxs(n.Fragment,{children:["cards"===x&&n.jsxs(d.HStack,e.__assign({className:c},{children:[n.jsx(q,e.__assign({onClick:function(){return j("day")},type:"button","data-theme":"day",isActive:"day"===b},{children:n.jsxs(_,{children:[n.jsx(i.ThemeLightIcon,{}),n.jsx(h.Text,e.__assign({type:"bold-label"},{children:"Light"}))]})})),n.jsx(q,e.__assign({onClick:function(){return j("night")},type:"button","data-theme":"night",isActive:"night"===b},{children:n.jsxs(_,{children:[n.jsx(t.ThemeDarkIcon,{}),n.jsx(h.Text,e.__assign({type:"bold-label"},{children:"Dark"}))]})}))]})),"select"===x&&n.jsx(u.Select,{className:c,value:C.filter((function(e){return e.value===b})),options:C,icon:function(){switch(b){case"day":default:return n.jsx(s.SunnyIcon,{});case"night":return n.jsx(r.NightIcon,{})}}(),onChange:function(e){return j((null==e?void 0:e.value)||"day")},isDisabled:m,isClearable:!1}),"toggle"===x&&n.jsx(S,e.__assign({className:"".concat(c," ").concat(m?"disabled":""),checked:k,onClick:function(){return!m&&j("day"===b?"night":"day")}},{children:n.jsxs(I,e.__assign({checked:k},{children:[n.jsx(v,{checked:k,id:"amino-theme-switch"}),n.jsx(w,{size:20,isActive:"day"===b}),n.jsx(T,{size:20,isActive:"night"===b})]}))}))]})};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zonos/amino",
-  "version": "4.4.7",
+  "version": "4.4.9",
   "description": "Core UI components for Amino",
   "repository": "git@github.com:Zonos/amino.git",
   "license": "MIT",

package/styles/constants/theme.d.ts

@@ -317,7 +317,7 @@ export declare const theme: {
     readonly surfaceColor: "var(--amino-surface-color)";
     /** @info var(--amino-gray-50) */
     readonly surfaceColorSecondary: "var(--amino-surface-color-secondary)";
-    /** @info var(--amino-gray-1000) */
+    /** @info var(--amino-gray-1200) */
     readonly backdropColor: "var(--amino-backdrop-color)";
     /** @info 55px */
     readonly appbarHeight: "var(--amino-appbar-height)";

package/theme.css

@@ -167,7 +167,7 @@
   --amino-text-color: var(--amino-gray-1000);
   --amino-surface-color: var(--amino-gray-0);
   --amino-surface-color-secondary: var(--amino-gray-50);
-  --amino-backdrop-color: var(--amino-gray-1000);
+  --amino-backdrop-color: var(--amino-gray-1200);
   --amino-appbar-height: 55px;
   --amino-sidebar-width: 264px;
   --amino-elevation-0: 0;
@@ -340,5 +340,5 @@
   --amino-text-color: var(--amino-gray-1000);
   --amino-surface-color: var(--amino-gray-50);
   --amino-surface-color-secondary: var(--amino-gray-100);
-  --amino-backdrop-color: var(--amino-gray-100);
+  --amino-backdrop-color: var(--amino-gray-0);
 }