@payloadcms/ui 3.0.0-beta.59 → 3.0.0-beta.60
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.
- package/dist/elements/DocumentDrawer/DrawerContent.js +1 -1
- package/dist/elements/DocumentDrawer/DrawerContent.js.map +1 -1
- package/dist/elements/SortComplex/index.js +1 -1
- package/dist/elements/SortComplex/index.js.map +1 -1
- package/dist/elements/Table/RelationshipProvider/index.js.map +1 -1
- package/dist/elements/Upload/index.d.ts.map +1 -1
- package/dist/elements/Upload/index.js +1 -2
- package/dist/elements/Upload/index.js.map +1 -1
- package/dist/elements/WhereBuilder/Condition/Relationship/index.js +1 -1
- package/dist/elements/WhereBuilder/Condition/Relationship/index.js.map +1 -1
- package/dist/elements/WhereBuilder/reduceFieldMap.d.ts.map +1 -1
- package/dist/elements/WhereBuilder/reduceFieldMap.js.map +1 -1
- package/dist/exports/client/{DatePicker-BN5AOAME.js → DatePicker-SFJJWFZ5.js} +2 -2
- package/dist/exports/client/chunk-IF2WZON3.js +30 -0
- package/dist/exports/client/{chunk-3X2D2TP2.js.map → chunk-IF2WZON3.js.map} +2 -2
- package/dist/exports/client/index.js +19 -33
- package/dist/exports/client/index.js.map +4 -4
- package/dist/exports/shared/index.d.ts +0 -1
- package/dist/exports/shared/index.d.ts.map +1 -1
- package/dist/exports/shared/index.js +2 -12
- package/dist/exports/shared/index.js.map +4 -4
- package/dist/fields/Relationship/index.js +1 -1
- package/dist/fields/Relationship/index.js.map +1 -1
- package/dist/forms/Form/index.d.ts.map +1 -1
- package/dist/forms/Form/index.js +2 -5
- package/dist/forms/Form/index.js.map +1 -1
- package/dist/forms/RenderFields/index.scss +7 -4
- package/dist/hooks/usePayloadAPI.js +1 -1
- package/dist/hooks/usePayloadAPI.js.map +1 -1
- package/dist/providers/Auth/index.js +1 -1
- package/dist/providers/Auth/index.js.map +1 -1
- package/dist/providers/DocumentInfo/index.d.ts.map +1 -1
- package/dist/providers/DocumentInfo/index.js +2 -2
- package/dist/providers/DocumentInfo/index.js.map +1 -1
- package/dist/providers/ListQuery/index.js +1 -1
- package/dist/providers/ListQuery/index.js.map +1 -1
- package/dist/providers/SearchParams/index.d.ts +1 -1
- package/dist/providers/SearchParams/index.d.ts.map +1 -1
- package/dist/providers/SearchParams/index.js +1 -1
- package/dist/providers/SearchParams/index.js.map +1 -1
- package/dist/providers/Selection/index.js +1 -1
- package/dist/providers/Selection/index.js.map +1 -1
- package/dist/providers/ToastContainer/icons/Error.js +2 -2
- package/dist/providers/ToastContainer/icons/Error.js.map +1 -1
- package/dist/providers/ToastContainer/icons/Info.js +2 -2
- package/dist/providers/ToastContainer/icons/Info.js.map +1 -1
- package/dist/providers/ToastContainer/icons/Success.js +2 -2
- package/dist/providers/ToastContainer/icons/Success.js.map +1 -1
- package/dist/providers/ToastContainer/icons/Warning.js +2 -2
- package/dist/providers/ToastContainer/icons/Warning.js.map +1 -1
- package/dist/providers/ToastContainer/index.d.ts.map +1 -1
- package/dist/providers/ToastContainer/index.js +3 -1
- package/dist/providers/ToastContainer/index.js.map +1 -1
- package/dist/scss/app.scss +2 -2
- package/dist/scss/colors.scss +76 -76
- package/dist/scss/toasts.scss +67 -44
- package/dist/styles.css +1 -1
- package/dist/utilities/api.js +1 -1
- package/dist/utilities/api.js.map +1 -1
- package/dist/utilities/buildFormState.d.ts.map +1 -1
- package/dist/utilities/buildFormState.js +2 -2
- package/dist/utilities/buildFormState.js.map +1 -1
- package/dist/utilities/reduceFieldsToValuesWithValidation.js +1 -1
- package/dist/utilities/reduceFieldsToValuesWithValidation.js.map +1 -1
- package/package.json +7 -9
- package/dist/exports/client/chunk-3X2D2TP2.js +0 -30
- package/dist/forms/Form/getDataByPath.d.ts +0 -3
- package/dist/forms/Form/getDataByPath.d.ts.map +0 -1
- package/dist/forms/Form/getDataByPath.js +0 -18
- package/dist/forms/Form/getDataByPath.js.map +0 -1
- package/dist/forms/Form/getSiblingData.d.ts +0 -3
- package/dist/forms/Form/getSiblingData.d.ts.map +0 -1
- package/dist/forms/Form/getSiblingData.js +0 -33
- package/dist/forms/Form/getSiblingData.js.map +0 -1
- package/dist/utilities/reduceFieldsToValues.d.ts +0 -10
- package/dist/utilities/reduceFieldsToValues.d.ts.map +0 -1
- package/dist/utilities/reduceFieldsToValues.js +0 -22
- package/dist/utilities/reduceFieldsToValues.js.map +0 -1
- package/dist/utilities/unflatten.d.ts +0 -9
- package/dist/utilities/unflatten.d.ts.map +0 -1
- package/dist/utilities/unflatten.js +0 -58
- package/dist/utilities/unflatten.js.map +0 -1
- /package/dist/exports/client/{DatePicker-BN5AOAME.js.map → DatePicker-SFJJWFZ5.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/providers/SearchParams/index.tsx"],"sourcesContent":["'use client'\nimport { useSearchParams as useNextSearchParams } from 'next/navigation.js'\nimport qs from 'qs'\nimport React, { createContext, useContext } from 'react'\n\nexport type SearchParamsContext = {\n searchParams: qs.ParsedQs\n stringifyParams: ({ params, replace }: { params: State; replace?: boolean }) => string\n}\n\nexport type State = qs.ParsedQs\n\nconst initialContext: SearchParamsContext = {\n searchParams: {},\n stringifyParams: () => '',\n}\n\nconst Context = createContext(initialContext)\n\nfunction createParams(search: string) {\n return qs.parse(search, {\n depth: 10,\n ignoreQueryPrefix: true,\n })\n}\n\n// TODO: abstract the `next/navigation` dependency out from this provider so that it can be used in other contexts\nexport const SearchParamsProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) => {\n const nextSearchParams = useNextSearchParams()\n const searchString = nextSearchParams.toString()\n const initialParams = createParams(searchString)\n\n const [searchParams, setSearchParams] = React.useState(initialParams)\n\n const stringifyParams = React.useCallback(\n ({ params, replace = false }: { params: State; replace?: boolean }) => {\n return qs.stringify(\n {\n ...(replace ? {} : searchParams),\n ...params,\n },\n { addQueryPrefix: true },\n )\n },\n [searchParams],\n )\n\n React.useEffect(() => {\n setSearchParams(createParams(searchString))\n }, [searchString])\n\n return <Context.Provider value={{ searchParams, stringifyParams }}>{children}</Context.Provider>\n}\n\nexport const useSearchParams = (): SearchParamsContext => useContext(Context)\n"],"names":["useSearchParams","useNextSearchParams","qs","React","createContext","useContext","initialContext","searchParams","stringifyParams","Context","createParams","search","parse","depth","ignoreQueryPrefix","SearchParamsProvider","children","nextSearchParams","searchString","toString","initialParams","setSearchParams","useState","useCallback","params","replace","stringify","addQueryPrefix","useEffect","Provider","value"],"mappings":"AAAA;;AACA,SAASA,mBAAmBC,mBAAmB,QAAQ,qBAAoB;AAC3E,
|
|
1
|
+
{"version":3,"sources":["../../../src/providers/SearchParams/index.tsx"],"sourcesContent":["'use client'\nimport { useSearchParams as useNextSearchParams } from 'next/navigation.js'\nimport * as qs from 'qs-esm'\nimport React, { createContext, useContext } from 'react'\n\nexport type SearchParamsContext = {\n searchParams: qs.ParsedQs\n stringifyParams: ({ params, replace }: { params: State; replace?: boolean }) => string\n}\n\nexport type State = qs.ParsedQs\n\nconst initialContext: SearchParamsContext = {\n searchParams: {},\n stringifyParams: () => '',\n}\n\nconst Context = createContext(initialContext)\n\nfunction createParams(search: string) {\n return qs.parse(search, {\n depth: 10,\n ignoreQueryPrefix: true,\n })\n}\n\n// TODO: abstract the `next/navigation` dependency out from this provider so that it can be used in other contexts\nexport const SearchParamsProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) => {\n const nextSearchParams = useNextSearchParams()\n const searchString = nextSearchParams.toString()\n const initialParams = createParams(searchString)\n\n const [searchParams, setSearchParams] = React.useState(initialParams)\n\n const stringifyParams = React.useCallback(\n ({ params, replace = false }: { params: State; replace?: boolean }) => {\n return qs.stringify(\n {\n ...(replace ? {} : searchParams),\n ...params,\n },\n { addQueryPrefix: true },\n )\n },\n [searchParams],\n )\n\n React.useEffect(() => {\n setSearchParams(createParams(searchString))\n }, [searchString])\n\n return <Context.Provider value={{ searchParams, stringifyParams }}>{children}</Context.Provider>\n}\n\nexport const useSearchParams = (): SearchParamsContext => useContext(Context)\n"],"names":["useSearchParams","useNextSearchParams","qs","React","createContext","useContext","initialContext","searchParams","stringifyParams","Context","createParams","search","parse","depth","ignoreQueryPrefix","SearchParamsProvider","children","nextSearchParams","searchString","toString","initialParams","setSearchParams","useState","useCallback","params","replace","stringify","addQueryPrefix","useEffect","Provider","value"],"mappings":"AAAA;;AACA,SAASA,mBAAmBC,mBAAmB,QAAQ,qBAAoB;AAC3E,YAAYC,QAAQ,SAAQ;AAC5B,OAAOC,SAASC,aAAa,EAAEC,UAAU,QAAQ,QAAO;AASxD,MAAMC,iBAAsC;IAC1CC,cAAc,CAAC;IACfC,iBAAiB,IAAM;AACzB;AAEA,MAAMC,wBAAUL,cAAcE;AAE9B,SAASI,aAAaC,MAAc;IAClC,OAAOT,GAAGU,KAAK,CAACD,QAAQ;QACtBE,OAAO;QACPC,mBAAmB;IACrB;AACF;AAEA,kHAAkH;AAClH,OAAO,MAAMC,uBAAiE,CAAC,EAAEC,QAAQ,EAAE;IACzF,MAAMC,mBAAmBhB;IACzB,MAAMiB,eAAeD,iBAAiBE,QAAQ;IAC9C,MAAMC,gBAAgBV,aAAaQ;IAEnC,MAAM,CAACX,cAAcc,gBAAgB,GAAGlB,MAAMmB,QAAQ,CAACF;IAEvD,MAAMZ,kBAAkBL,MAAMoB,WAAW,CACvC,CAAC,EAAEC,MAAM,EAAEC,UAAU,KAAK,EAAwC;QAChE,OAAOvB,GAAGwB,SAAS,CACjB;YACE,GAAID,UAAU,CAAC,IAAIlB,YAAY;YAC/B,GAAGiB,MAAM;QACX,GACA;YAAEG,gBAAgB;QAAK;IAE3B,GACA;QAACpB;KAAa;IAGhBJ,MAAMyB,SAAS,CAAC;QACdP,gBAAgBX,aAAaQ;IAC/B,GAAG;QAACA;KAAa;IAEjB,qBAAO,KAACT,QAAQoB,QAAQ;QAACC,OAAO;YAAEvB;YAAcC;QAAgB;kBAAIQ;;AACtE,EAAC;AAED,OAAO,MAAMhB,kBAAkB,IAA2BK,WAAWI,SAAQ"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import qs from 'qs';
|
|
3
|
+
import * as qs from 'qs-esm';
|
|
4
4
|
import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
|
|
5
5
|
import { useLocale } from '../Locale/index.js';
|
|
6
6
|
import { useSearchParams } from '../SearchParams/index.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/providers/Selection/index.tsx"],"sourcesContent":["'use client'\nimport type { Where } from 'payload'\n\nimport qs from 'qs'\nimport React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react'\n\nimport { useLocale } from '../Locale/index.js'\nimport { useSearchParams } from '../SearchParams/index.js'\n\nexport enum SelectAllStatus {\n AllAvailable = 'allAvailable',\n AllInPage = 'allInPage',\n None = 'none',\n Some = 'some',\n}\n\ntype SelectionContext = {\n count: number\n getQueryParams: (additionalParams?: Where) => string\n selectAll: SelectAllStatus\n selected: Record<number | string, boolean>\n setSelection: (id: number | string) => void\n toggleAll: (allAvailable?: boolean) => void\n totalDocs: number\n}\n\nconst Context = createContext({} as SelectionContext)\n\ntype Props = {\n children: React.ReactNode\n docs: any[]\n totalDocs: number\n}\nexport const SelectionProvider: React.FC<Props> = ({ children, docs = [], totalDocs }) => {\n const contextRef = useRef({} as SelectionContext)\n\n const { code: locale } = useLocale()\n const [selected, setSelected] = useState<SelectionContext['selected']>(() => {\n const rows = {}\n docs.forEach(({ id }) => {\n rows[id] = false\n })\n return rows\n })\n const [selectAll, setSelectAll] = useState<SelectAllStatus>(SelectAllStatus.None)\n const [count, setCount] = useState(0)\n const { searchParams } = useSearchParams()\n\n const toggleAll = useCallback(\n (allAvailable = false) => {\n const rows = {}\n if (allAvailable) {\n setSelectAll(SelectAllStatus.AllAvailable)\n docs.forEach(({ id }) => {\n rows[id] = true\n })\n } else if (\n selectAll === SelectAllStatus.AllAvailable ||\n selectAll === SelectAllStatus.AllInPage\n ) {\n setSelectAll(SelectAllStatus.None)\n docs.forEach(({ id }) => {\n rows[id] = false\n })\n } else {\n docs.forEach(({ id }) => {\n rows[id] = selectAll !== SelectAllStatus.Some\n })\n }\n setSelected(rows)\n },\n [docs, selectAll],\n )\n\n const setSelection = useCallback(\n (id) => {\n const isSelected = !selected[id]\n const newSelected = {\n ...selected,\n [id]: isSelected,\n }\n if (!isSelected) {\n setSelectAll(SelectAllStatus.Some)\n }\n setSelected(newSelected)\n },\n [selected],\n )\n\n const getQueryParams = useCallback(\n (additionalParams?: Where): string => {\n let where: Where\n if (selectAll === SelectAllStatus.AllAvailable) {\n const params = searchParams?.where as Where\n where = params || {\n id: { not_equals: '' },\n }\n } else {\n where = {\n id: {\n in: Object.keys(selected)\n .filter((id) => selected[id])\n .map((id) => id),\n },\n }\n }\n if (additionalParams) {\n where = {\n and: [{ ...additionalParams }, where],\n }\n }\n return qs.stringify(\n {\n locale,\n where,\n },\n { addQueryPrefix: true },\n )\n },\n [selectAll, selected, locale, searchParams],\n )\n\n useEffect(() => {\n if (selectAll === SelectAllStatus.AllAvailable) {\n return\n }\n let some = false\n let all = true\n Object.values(selected).forEach((val) => {\n all = all && val\n some = some || val\n })\n\n if (all) {\n setSelectAll(SelectAllStatus.AllInPage)\n } else if (some) {\n setSelectAll(SelectAllStatus.Some)\n } else {\n setSelectAll(SelectAllStatus.None)\n }\n }, [selectAll, selected])\n\n useEffect(() => {\n const newCount =\n selectAll === SelectAllStatus.AllAvailable\n ? totalDocs\n : Object.keys(selected).filter((id) => selected[id]).length\n setCount(newCount)\n }, [selectAll, selected, totalDocs])\n\n contextRef.current = {\n count,\n getQueryParams,\n selectAll,\n selected,\n setSelection,\n toggleAll,\n totalDocs,\n }\n\n return <Context.Provider value={contextRef.current}>{children}</Context.Provider>\n}\n\nexport const useSelection = (): SelectionContext => useContext(Context)\n"],"names":["qs","React","createContext","useCallback","useContext","useEffect","useRef","useState","useLocale","useSearchParams","SelectAllStatus","Context","SelectionProvider","children","docs","totalDocs","contextRef","code","locale","selected","setSelected","rows","forEach","id","selectAll","setSelectAll","count","setCount","searchParams","toggleAll","allAvailable","setSelection","isSelected","newSelected","getQueryParams","additionalParams","where","params","not_equals","in","Object","keys","filter","map","and","stringify","addQueryPrefix","some","all","values","val","newCount","length","current","Provider","value","useSelection"],"mappings":"AAAA;;AAGA,
|
|
1
|
+
{"version":3,"sources":["../../../src/providers/Selection/index.tsx"],"sourcesContent":["'use client'\nimport type { Where } from 'payload'\n\nimport * as qs from 'qs-esm'\nimport React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react'\n\nimport { useLocale } from '../Locale/index.js'\nimport { useSearchParams } from '../SearchParams/index.js'\n\nexport enum SelectAllStatus {\n AllAvailable = 'allAvailable',\n AllInPage = 'allInPage',\n None = 'none',\n Some = 'some',\n}\n\ntype SelectionContext = {\n count: number\n getQueryParams: (additionalParams?: Where) => string\n selectAll: SelectAllStatus\n selected: Record<number | string, boolean>\n setSelection: (id: number | string) => void\n toggleAll: (allAvailable?: boolean) => void\n totalDocs: number\n}\n\nconst Context = createContext({} as SelectionContext)\n\ntype Props = {\n children: React.ReactNode\n docs: any[]\n totalDocs: number\n}\nexport const SelectionProvider: React.FC<Props> = ({ children, docs = [], totalDocs }) => {\n const contextRef = useRef({} as SelectionContext)\n\n const { code: locale } = useLocale()\n const [selected, setSelected] = useState<SelectionContext['selected']>(() => {\n const rows = {}\n docs.forEach(({ id }) => {\n rows[id] = false\n })\n return rows\n })\n const [selectAll, setSelectAll] = useState<SelectAllStatus>(SelectAllStatus.None)\n const [count, setCount] = useState(0)\n const { searchParams } = useSearchParams()\n\n const toggleAll = useCallback(\n (allAvailable = false) => {\n const rows = {}\n if (allAvailable) {\n setSelectAll(SelectAllStatus.AllAvailable)\n docs.forEach(({ id }) => {\n rows[id] = true\n })\n } else if (\n selectAll === SelectAllStatus.AllAvailable ||\n selectAll === SelectAllStatus.AllInPage\n ) {\n setSelectAll(SelectAllStatus.None)\n docs.forEach(({ id }) => {\n rows[id] = false\n })\n } else {\n docs.forEach(({ id }) => {\n rows[id] = selectAll !== SelectAllStatus.Some\n })\n }\n setSelected(rows)\n },\n [docs, selectAll],\n )\n\n const setSelection = useCallback(\n (id) => {\n const isSelected = !selected[id]\n const newSelected = {\n ...selected,\n [id]: isSelected,\n }\n if (!isSelected) {\n setSelectAll(SelectAllStatus.Some)\n }\n setSelected(newSelected)\n },\n [selected],\n )\n\n const getQueryParams = useCallback(\n (additionalParams?: Where): string => {\n let where: Where\n if (selectAll === SelectAllStatus.AllAvailable) {\n const params = searchParams?.where as Where\n where = params || {\n id: { not_equals: '' },\n }\n } else {\n where = {\n id: {\n in: Object.keys(selected)\n .filter((id) => selected[id])\n .map((id) => id),\n },\n }\n }\n if (additionalParams) {\n where = {\n and: [{ ...additionalParams }, where],\n }\n }\n return qs.stringify(\n {\n locale,\n where,\n },\n { addQueryPrefix: true },\n )\n },\n [selectAll, selected, locale, searchParams],\n )\n\n useEffect(() => {\n if (selectAll === SelectAllStatus.AllAvailable) {\n return\n }\n let some = false\n let all = true\n Object.values(selected).forEach((val) => {\n all = all && val\n some = some || val\n })\n\n if (all) {\n setSelectAll(SelectAllStatus.AllInPage)\n } else if (some) {\n setSelectAll(SelectAllStatus.Some)\n } else {\n setSelectAll(SelectAllStatus.None)\n }\n }, [selectAll, selected])\n\n useEffect(() => {\n const newCount =\n selectAll === SelectAllStatus.AllAvailable\n ? totalDocs\n : Object.keys(selected).filter((id) => selected[id]).length\n setCount(newCount)\n }, [selectAll, selected, totalDocs])\n\n contextRef.current = {\n count,\n getQueryParams,\n selectAll,\n selected,\n setSelection,\n toggleAll,\n totalDocs,\n }\n\n return <Context.Provider value={contextRef.current}>{children}</Context.Provider>\n}\n\nexport const useSelection = (): SelectionContext => useContext(Context)\n"],"names":["qs","React","createContext","useCallback","useContext","useEffect","useRef","useState","useLocale","useSearchParams","SelectAllStatus","Context","SelectionProvider","children","docs","totalDocs","contextRef","code","locale","selected","setSelected","rows","forEach","id","selectAll","setSelectAll","count","setCount","searchParams","toggleAll","allAvailable","setSelection","isSelected","newSelected","getQueryParams","additionalParams","where","params","not_equals","in","Object","keys","filter","map","and","stringify","addQueryPrefix","some","all","values","val","newCount","length","current","Provider","value","useSelection"],"mappings":"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"}
|
|
@@ -10,11 +10,11 @@ export const Error = ()=>{
|
|
|
10
10
|
children: [
|
|
11
11
|
/*#__PURE__*/ _jsx("path", {
|
|
12
12
|
d: "M13 21C17.4183 21 21 17.4183 21 13C21 8.58172 17.4183 5 13 5C8.58172 5 5 8.58172 5 13C5 17.4183 8.58172 21 13 21Z",
|
|
13
|
-
fill: "
|
|
13
|
+
fill: "var(--theme-error-500)"
|
|
14
14
|
}),
|
|
15
15
|
/*#__PURE__*/ _jsx("path", {
|
|
16
16
|
d: "M15.4001 10.5996L10.6001 15.3996M10.6001 10.5996L15.4001 15.3996",
|
|
17
|
-
stroke: "
|
|
17
|
+
stroke: "var(--theme-error-50)",
|
|
18
18
|
strokeLinecap: "round",
|
|
19
19
|
strokeLinejoin: "round"
|
|
20
20
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/providers/ToastContainer/icons/Error.tsx"],"sourcesContent":["import React from 'react'\n\nexport const Error: React.FC = () => {\n return (\n <svg fill=\"none\" height=\"26\" viewBox=\"0 0 26 26\" width=\"26\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13 21C17.4183 21 21 17.4183 21 13C21 8.58172 17.4183 5 13 5C8.58172 5 5 8.58172 5 13C5 17.4183 8.58172 21 13 21Z\"\n fill=\"
|
|
1
|
+
{"version":3,"sources":["../../../../src/providers/ToastContainer/icons/Error.tsx"],"sourcesContent":["import React from 'react'\n\nexport const Error: React.FC = () => {\n return (\n <svg fill=\"none\" height=\"26\" viewBox=\"0 0 26 26\" width=\"26\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13 21C17.4183 21 21 17.4183 21 13C21 8.58172 17.4183 5 13 5C8.58172 5 5 8.58172 5 13C5 17.4183 8.58172 21 13 21Z\"\n fill=\"var(--theme-error-500)\"\n />\n <path\n d=\"M15.4001 10.5996L10.6001 15.3996M10.6001 10.5996L15.4001 15.3996\"\n stroke=\"var(--theme-error-50)\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n"],"names":["React","Error","svg","fill","height","viewBox","width","xmlns","path","d","stroke","strokeLinecap","strokeLinejoin"],"mappings":";AAAA,OAAOA,WAAW,QAAO;AAEzB,OAAO,MAAMC,QAAkB;IAC7B,qBACE,MAACC;QAAIC,MAAK;QAAOC,QAAO;QAAKC,SAAQ;QAAYC,OAAM;QAAKC,OAAM;;0BAChE,KAACC;gBACCC,GAAE;gBACFN,MAAK;;0BAEP,KAACK;gBACCC,GAAE;gBACFC,QAAO;gBACPC,eAAc;gBACdC,gBAAe;;;;AAIvB,EAAC"}
|
|
@@ -10,11 +10,11 @@ export const Info = ()=>{
|
|
|
10
10
|
children: [
|
|
11
11
|
/*#__PURE__*/ _jsx("path", {
|
|
12
12
|
d: "M13 21C17.4183 21 21 17.4183 21 13C21 8.58172 17.4183 5 13 5C8.58172 5 5 8.58172 5 13C5 17.4183 8.58172 21 13 21Z",
|
|
13
|
-
fill: "
|
|
13
|
+
fill: "var(--theme-elevation-500)"
|
|
14
14
|
}),
|
|
15
15
|
/*#__PURE__*/ _jsx("path", {
|
|
16
16
|
d: "M13 16.1998V12.9998M13 9.7998H13.0077",
|
|
17
|
-
stroke: "
|
|
17
|
+
stroke: "var(--theme-elevation-50)",
|
|
18
18
|
strokeLinecap: "round",
|
|
19
19
|
strokeLinejoin: "round"
|
|
20
20
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/providers/ToastContainer/icons/Info.tsx"],"sourcesContent":["import React from 'react'\n\nexport const Info: React.FC = () => {\n return (\n <svg fill=\"none\" height=\"26\" viewBox=\"0 0 26 26\" width=\"26\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13 21C17.4183 21 21 17.4183 21 13C21 8.58172 17.4183 5 13 5C8.58172 5 5 8.58172 5 13C5 17.4183 8.58172 21 13 21Z\"\n fill=\"
|
|
1
|
+
{"version":3,"sources":["../../../../src/providers/ToastContainer/icons/Info.tsx"],"sourcesContent":["import React from 'react'\n\nexport const Info: React.FC = () => {\n return (\n <svg fill=\"none\" height=\"26\" viewBox=\"0 0 26 26\" width=\"26\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13 21C17.4183 21 21 17.4183 21 13C21 8.58172 17.4183 5 13 5C8.58172 5 5 8.58172 5 13C5 17.4183 8.58172 21 13 21Z\"\n fill=\"var(--theme-elevation-500)\"\n />\n <path\n d=\"M13 16.1998V12.9998M13 9.7998H13.0077\"\n stroke=\"var(--theme-elevation-50)\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n"],"names":["React","Info","svg","fill","height","viewBox","width","xmlns","path","d","stroke","strokeLinecap","strokeLinejoin"],"mappings":";AAAA,OAAOA,WAAW,QAAO;AAEzB,OAAO,MAAMC,OAAiB;IAC5B,qBACE,MAACC;QAAIC,MAAK;QAAOC,QAAO;QAAKC,SAAQ;QAAYC,OAAM;QAAKC,OAAM;;0BAChE,KAACC;gBACCC,GAAE;gBACFN,MAAK;;0BAEP,KAACK;gBACCC,GAAE;gBACFC,QAAO;gBACPC,eAAc;gBACdC,gBAAe;;;;AAIvB,EAAC"}
|
|
@@ -10,11 +10,11 @@ export const Success = ()=>{
|
|
|
10
10
|
children: [
|
|
11
11
|
/*#__PURE__*/ _jsx("path", {
|
|
12
12
|
d: "M13 21C17.4183 21 21 17.4183 21 13C21 8.58172 17.4183 5 13 5C8.58172 5 5 8.58172 5 13C5 17.4183 8.58172 21 13 21Z",
|
|
13
|
-
fill: "
|
|
13
|
+
fill: "var(--theme-success-500)"
|
|
14
14
|
}),
|
|
15
15
|
/*#__PURE__*/ _jsx("path", {
|
|
16
16
|
d: "M10.6001 13.0004L12.2001 14.6004L15.4001 11.4004",
|
|
17
|
-
stroke: "
|
|
17
|
+
stroke: "var(--theme-success-50)",
|
|
18
18
|
strokeLinecap: "round",
|
|
19
19
|
strokeLinejoin: "round"
|
|
20
20
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/providers/ToastContainer/icons/Success.tsx"],"sourcesContent":["import React from 'react'\n\nexport const Success: React.FC = () => {\n return (\n <svg fill=\"none\" height=\"26\" viewBox=\"0 0 26 26\" width=\"26\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13 21C17.4183 21 21 17.4183 21 13C21 8.58172 17.4183 5 13 5C8.58172 5 5 8.58172 5 13C5 17.4183 8.58172 21 13 21Z\"\n fill=\"
|
|
1
|
+
{"version":3,"sources":["../../../../src/providers/ToastContainer/icons/Success.tsx"],"sourcesContent":["import React from 'react'\n\nexport const Success: React.FC = () => {\n return (\n <svg fill=\"none\" height=\"26\" viewBox=\"0 0 26 26\" width=\"26\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13 21C17.4183 21 21 17.4183 21 13C21 8.58172 17.4183 5 13 5C8.58172 5 5 8.58172 5 13C5 17.4183 8.58172 21 13 21Z\"\n fill=\"var(--theme-success-500)\"\n />\n <path\n d=\"M10.6001 13.0004L12.2001 14.6004L15.4001 11.4004\"\n stroke=\"var(--theme-success-50)\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n"],"names":["React","Success","svg","fill","height","viewBox","width","xmlns","path","d","stroke","strokeLinecap","strokeLinejoin"],"mappings":";AAAA,OAAOA,WAAW,QAAO;AAEzB,OAAO,MAAMC,UAAoB;IAC/B,qBACE,MAACC;QAAIC,MAAK;QAAOC,QAAO;QAAKC,SAAQ;QAAYC,OAAM;QAAKC,OAAM;;0BAChE,KAACC;gBACCC,GAAE;gBACFN,MAAK;;0BAEP,KAACK;gBACCC,GAAE;gBACFC,QAAO;gBACPC,eAAc;gBACdC,gBAAe;;;;AAIvB,EAAC"}
|
|
@@ -10,11 +10,11 @@ export const Warning = ()=>{
|
|
|
10
10
|
children: [
|
|
11
11
|
/*#__PURE__*/ _jsx("path", {
|
|
12
12
|
d: "M13 21C17.4183 21 21 17.4183 21 13C21 8.58172 17.4183 5 13 5C8.58172 5 5 8.58172 5 13C5 17.4183 8.58172 21 13 21Z",
|
|
13
|
-
fill: "
|
|
13
|
+
fill: "var(--theme-warning-500)"
|
|
14
14
|
}),
|
|
15
15
|
/*#__PURE__*/ _jsx("path", {
|
|
16
16
|
d: "M13 10V13.2M13 16.4H13.008",
|
|
17
|
-
stroke: "
|
|
17
|
+
stroke: "var(--theme-warning-50)",
|
|
18
18
|
strokeLinecap: "round",
|
|
19
19
|
strokeLinejoin: "round"
|
|
20
20
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/providers/ToastContainer/icons/Warning.tsx"],"sourcesContent":["import React from 'react'\n\nexport const Warning: React.FC = () => {\n return (\n <svg fill=\"none\" height=\"26\" viewBox=\"0 0 26 26\" width=\"26\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13 21C17.4183 21 21 17.4183 21 13C21 8.58172 17.4183 5 13 5C8.58172 5 5 8.58172 5 13C5 17.4183 8.58172 21 13 21Z\"\n fill=\"
|
|
1
|
+
{"version":3,"sources":["../../../../src/providers/ToastContainer/icons/Warning.tsx"],"sourcesContent":["import React from 'react'\n\nexport const Warning: React.FC = () => {\n return (\n <svg fill=\"none\" height=\"26\" viewBox=\"0 0 26 26\" width=\"26\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13 21C17.4183 21 21 17.4183 21 13C21 8.58172 17.4183 5 13 5C8.58172 5 5 8.58172 5 13C5 17.4183 8.58172 21 13 21Z\"\n fill=\"var(--theme-warning-500)\"\n />\n <path\n d=\"M13 10V13.2M13 16.4H13.008\"\n stroke=\"var(--theme-warning-50)\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n"],"names":["React","Warning","svg","fill","height","viewBox","width","xmlns","path","d","stroke","strokeLinecap","strokeLinejoin"],"mappings":";AAAA,OAAOA,WAAW,QAAO;AAEzB,OAAO,MAAMC,UAAoB;IAC/B,qBACE,MAACC;QAAIC,MAAK;QAAOC,QAAO;QAAKC,SAAQ;QAAYC,OAAM;QAAKC,OAAM;;0BAChE,KAACC;gBACCC,GAAE;gBACFN,MAAK;;0BAEP,KAACK;gBACCC,GAAE;gBACFC,QAAO;gBACPC,eAAc;gBACdC,gBAAe;;;;AAIvB,EAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/ToastContainer/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/ToastContainer/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAgClC,CAAA"}
|
|
@@ -12,13 +12,14 @@ export const ToastContainer = ()=>{
|
|
|
12
12
|
closeButton: true,
|
|
13
13
|
// @ts-expect-error
|
|
14
14
|
dir: "undefined",
|
|
15
|
+
gap: 8,
|
|
15
16
|
icons: {
|
|
16
17
|
error: /*#__PURE__*/ _jsx(Error, {}),
|
|
17
18
|
info: /*#__PURE__*/ _jsx(Info, {}),
|
|
18
19
|
success: /*#__PURE__*/ _jsx(Success, {}),
|
|
19
20
|
warning: /*#__PURE__*/ _jsx(Warning, {})
|
|
20
21
|
},
|
|
21
|
-
offset: "
|
|
22
|
+
offset: "calc(var(--gutter-h) / 2)",
|
|
22
23
|
toastOptions: {
|
|
23
24
|
classNames: {
|
|
24
25
|
closeButton: 'payload-toast-close-button',
|
|
@@ -27,6 +28,7 @@ export const ToastContainer = ()=>{
|
|
|
27
28
|
icon: 'toast-icon',
|
|
28
29
|
info: 'toast-info',
|
|
29
30
|
success: 'toast-success',
|
|
31
|
+
title: 'toast-title',
|
|
30
32
|
toast: 'payload-toast-item',
|
|
31
33
|
warning: 'toast-warning'
|
|
32
34
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/providers/ToastContainer/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\nimport { Toaster } from 'sonner'\n\nimport { Error } from './icons/Error.js'\nimport { Info } from './icons/Info.js'\nimport { Success } from './icons/Success.js'\nimport { Warning } from './icons/Warning.js'\n\nexport const ToastContainer: React.FC = () => {\n return (\n <Toaster\n className=\"payload-toast-container\"\n closeButton\n // @ts-expect-error\n dir=\"undefined\"\n icons={{\n error: <Error />,\n info: <Info />,\n success: <Success />,\n warning: <Warning />,\n }}\n offset=\"
|
|
1
|
+
{"version":3,"sources":["../../../src/providers/ToastContainer/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\nimport { Toaster } from 'sonner'\n\nimport { Error } from './icons/Error.js'\nimport { Info } from './icons/Info.js'\nimport { Success } from './icons/Success.js'\nimport { Warning } from './icons/Warning.js'\n\nexport const ToastContainer: React.FC = () => {\n return (\n <Toaster\n className=\"payload-toast-container\"\n closeButton\n // @ts-expect-error\n dir=\"undefined\"\n gap={8}\n icons={{\n error: <Error />,\n info: <Info />,\n success: <Success />,\n warning: <Warning />,\n }}\n offset=\"calc(var(--gutter-h) / 2)\"\n toastOptions={{\n classNames: {\n closeButton: 'payload-toast-close-button',\n content: 'toast-content',\n error: 'toast-error',\n icon: 'toast-icon',\n info: 'toast-info',\n success: 'toast-success',\n title: 'toast-title',\n toast: 'payload-toast-item',\n warning: 'toast-warning',\n },\n unstyled: true,\n }}\n visibleToasts={5}\n />\n )\n}\n"],"names":["React","Toaster","Error","Info","Success","Warning","ToastContainer","className","closeButton","dir","gap","icons","error","info","success","warning","offset","toastOptions","classNames","content","icon","title","toast","unstyled","visibleToasts"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AACzB,SAASC,OAAO,QAAQ,SAAQ;AAEhC,SAASC,KAAK,QAAQ,mBAAkB;AACxC,SAASC,IAAI,QAAQ,kBAAiB;AACtC,SAASC,OAAO,QAAQ,qBAAoB;AAC5C,SAASC,OAAO,QAAQ,qBAAoB;AAE5C,OAAO,MAAMC,iBAA2B;IACtC,qBACE,KAACL;QACCM,WAAU;QACVC,WAAW;QACX,mBAAmB;QACnBC,KAAI;QACJC,KAAK;QACLC,OAAO;YACLC,qBAAO,KAACV;YACRW,oBAAM,KAACV;YACPW,uBAAS,KAACV;YACVW,uBAAS,KAACV;QACZ;QACAW,QAAO;QACPC,cAAc;YACZC,YAAY;gBACVV,aAAa;gBACbW,SAAS;gBACTP,OAAO;gBACPQ,MAAM;gBACNP,MAAM;gBACNC,SAAS;gBACTO,OAAO;gBACPC,OAAO;gBACPP,SAAS;YACX;YACAQ,UAAU;QACZ;QACAC,eAAe;;AAGrB,EAAC"}
|
package/dist/scss/app.scss
CHANGED
|
@@ -105,12 +105,12 @@ body {
|
|
|
105
105
|
}
|
|
106
106
|
|
|
107
107
|
::selection {
|
|
108
|
-
background: var(--
|
|
108
|
+
background: var(--color-success-250);
|
|
109
109
|
color: var(--theme-base-800);
|
|
110
110
|
}
|
|
111
111
|
|
|
112
112
|
::-moz-selection {
|
|
113
|
-
background: var(--
|
|
113
|
+
background: var(--color-success-250);
|
|
114
114
|
color: var(--theme-base-800);
|
|
115
115
|
}
|
|
116
116
|
|
package/dist/scss/colors.scss
CHANGED
|
@@ -21,85 +21,85 @@
|
|
|
21
21
|
--color-base-950: rgb(7, 7, 7);
|
|
22
22
|
--color-base-1000: rgb(0, 0, 0);
|
|
23
23
|
|
|
24
|
-
--color-success-50: rgb(
|
|
25
|
-
--color-success-100: rgb(
|
|
26
|
-
--color-success-150: rgb(
|
|
27
|
-
--color-success-200: rgb(
|
|
28
|
-
--color-success-250: rgb(
|
|
29
|
-
--color-success-300: rgb(
|
|
30
|
-
--color-success-350: rgb(
|
|
31
|
-
--color-success-400: rgb(
|
|
32
|
-
--color-success-450: rgb(
|
|
33
|
-
--color-success-500: rgb(
|
|
34
|
-
--color-success-550: rgb(
|
|
35
|
-
--color-success-600: rgb(
|
|
36
|
-
--color-success-650: rgb(
|
|
37
|
-
--color-success-700: rgb(
|
|
38
|
-
--color-success-750: rgb(
|
|
39
|
-
--color-success-800: rgb(
|
|
40
|
-
--color-success-850: rgb(
|
|
41
|
-
--color-success-900: rgb(
|
|
42
|
-
--color-success-950: rgb(
|
|
24
|
+
--color-success-50: rgb(237, 245, 249);
|
|
25
|
+
--color-success-100: rgb(218, 237, 248);
|
|
26
|
+
--color-success-150: rgb(188, 225, 248);
|
|
27
|
+
--color-success-200: rgb(156, 216, 253);
|
|
28
|
+
--color-success-250: rgb(125, 204, 248);
|
|
29
|
+
--color-success-300: rgb(97, 190, 241);
|
|
30
|
+
--color-success-350: rgb(65, 178, 236);
|
|
31
|
+
--color-success-400: rgb(36, 164, 223);
|
|
32
|
+
--color-success-450: rgb(18, 148, 204);
|
|
33
|
+
--color-success-500: rgb(21, 135, 186);
|
|
34
|
+
--color-success-550: rgb(12, 121, 168);
|
|
35
|
+
--color-success-600: rgb(11, 110, 153);
|
|
36
|
+
--color-success-650: rgb(11, 97, 135);
|
|
37
|
+
--color-success-700: rgb(17, 88, 121);
|
|
38
|
+
--color-success-750: rgb(17, 76, 105);
|
|
39
|
+
--color-success-800: rgb(18, 66, 90);
|
|
40
|
+
--color-success-850: rgb(18, 56, 76);
|
|
41
|
+
--color-success-900: rgb(19, 44, 58);
|
|
42
|
+
--color-success-950: rgb(22, 33, 39);
|
|
43
43
|
|
|
44
|
-
--color-
|
|
45
|
-
--color-
|
|
46
|
-
--color-
|
|
47
|
-
--color-
|
|
48
|
-
--color-
|
|
49
|
-
--color-
|
|
50
|
-
--color-
|
|
51
|
-
--color-
|
|
52
|
-
--color-
|
|
53
|
-
--color-
|
|
54
|
-
--color-
|
|
55
|
-
--color-
|
|
56
|
-
--color-
|
|
57
|
-
--color-
|
|
58
|
-
--color-
|
|
59
|
-
--color-
|
|
60
|
-
--color-
|
|
61
|
-
--color-
|
|
62
|
-
--color-
|
|
44
|
+
--color-error-50: rgb(250, 241, 240);
|
|
45
|
+
--color-error-100: rgb(252, 229, 227);
|
|
46
|
+
--color-error-150: rgb(247, 208, 204);
|
|
47
|
+
--color-error-200: rgb(254, 193, 188);
|
|
48
|
+
--color-error-250: rgb(253, 177, 170);
|
|
49
|
+
--color-error-300: rgb(253, 154, 146);
|
|
50
|
+
--color-error-350: rgb(253, 131, 123);
|
|
51
|
+
--color-error-400: rgb(246, 109, 103);
|
|
52
|
+
--color-error-450: rgb(234, 90, 86);
|
|
53
|
+
--color-error-500: rgb(218, 75, 72);
|
|
54
|
+
--color-error-550: rgb(200, 62, 61);
|
|
55
|
+
--color-error-600: rgb(182, 54, 54);
|
|
56
|
+
--color-error-650: rgb(161, 47, 47);
|
|
57
|
+
--color-error-700: rgb(144, 44, 43);
|
|
58
|
+
--color-error-750: rgb(123, 41, 39);
|
|
59
|
+
--color-error-800: rgb(105, 39, 37);
|
|
60
|
+
--color-error-850: rgb(86, 36, 33);
|
|
61
|
+
--color-error-900: rgb(64, 32, 29);
|
|
62
|
+
--color-error-950: rgb(44, 26, 24);
|
|
63
63
|
|
|
64
|
-
--color-
|
|
65
|
-
--color-
|
|
66
|
-
--color-
|
|
67
|
-
--color-
|
|
68
|
-
--color-
|
|
69
|
-
--color-
|
|
70
|
-
--color-
|
|
71
|
-
--color-
|
|
72
|
-
--color-
|
|
73
|
-
--color-
|
|
74
|
-
--color-
|
|
75
|
-
--color-
|
|
76
|
-
--color-
|
|
77
|
-
--color-
|
|
78
|
-
--color-
|
|
79
|
-
--color-
|
|
80
|
-
--color-
|
|
81
|
-
--color-
|
|
82
|
-
--color-
|
|
64
|
+
--color-warning-50: rgb(249, 242, 237);
|
|
65
|
+
--color-warning-100: rgb(248, 232, 219);
|
|
66
|
+
--color-warning-150: rgb(243, 212, 186);
|
|
67
|
+
--color-warning-200: rgb(243, 200, 162);
|
|
68
|
+
--color-warning-250: rgb(240, 185, 136);
|
|
69
|
+
--color-warning-300: rgb(238, 166, 98);
|
|
70
|
+
--color-warning-350: rgb(234, 148, 58);
|
|
71
|
+
--color-warning-400: rgb(223, 132, 17);
|
|
72
|
+
--color-warning-450: rgb(204, 120, 15);
|
|
73
|
+
--color-warning-500: rgb(185, 108, 13);
|
|
74
|
+
--color-warning-550: rgb(167, 97, 10);
|
|
75
|
+
--color-warning-600: rgb(150, 87, 11);
|
|
76
|
+
--color-warning-650: rgb(134, 78, 11);
|
|
77
|
+
--color-warning-700: rgb(120, 70, 13);
|
|
78
|
+
--color-warning-750: rgb(105, 61, 13);
|
|
79
|
+
--color-warning-800: rgb(90, 55, 19);
|
|
80
|
+
--color-warning-850: rgb(73, 47, 21);
|
|
81
|
+
--color-warning-900: rgb(56, 38, 20);
|
|
82
|
+
--color-warning-950: rgb(38, 29, 21);
|
|
83
83
|
|
|
84
|
-
--color-blue-50: rgb(
|
|
85
|
-
--color-blue-100: rgb(
|
|
86
|
-
--color-blue-150: rgb(
|
|
87
|
-
--color-blue-200: rgb(
|
|
88
|
-
--color-blue-250: rgb(
|
|
89
|
-
--color-blue-300: rgb(
|
|
90
|
-
--color-blue-350: rgb(
|
|
91
|
-
--color-blue-400: rgb(
|
|
92
|
-
--color-blue-450: rgb(
|
|
93
|
-
--color-blue-500: rgb(
|
|
94
|
-
--color-blue-550: rgb(
|
|
95
|
-
--color-blue-600: rgb(
|
|
96
|
-
--color-blue-650: rgb(
|
|
97
|
-
--color-blue-700: rgb(
|
|
98
|
-
--color-blue-750: rgb(
|
|
99
|
-
--color-blue-800: rgb(
|
|
100
|
-
--color-blue-850: rgb(
|
|
101
|
-
--color-blue-900: rgb(
|
|
102
|
-
--color-blue-950: rgb(
|
|
84
|
+
--color-blue-50: rgb(237, 245, 249);
|
|
85
|
+
--color-blue-100: rgb(218, 237, 248);
|
|
86
|
+
--color-blue-150: rgb(188, 225, 248);
|
|
87
|
+
--color-blue-200: rgb(156, 216, 253);
|
|
88
|
+
--color-blue-250: rgb(125, 204, 248);
|
|
89
|
+
--color-blue-300: rgb(97, 190, 241);
|
|
90
|
+
--color-blue-350: rgb(65, 178, 236);
|
|
91
|
+
--color-blue-400: rgb(36, 164, 223);
|
|
92
|
+
--color-blue-450: rgb(18, 148, 204);
|
|
93
|
+
--color-blue-500: rgb(21, 135, 186);
|
|
94
|
+
--color-blue-550: rgb(12, 121, 168);
|
|
95
|
+
--color-blue-600: rgb(11, 110, 153);
|
|
96
|
+
--color-blue-650: rgb(11, 97, 135);
|
|
97
|
+
--color-blue-700: rgb(17, 88, 121);
|
|
98
|
+
--color-blue-750: rgb(17, 76, 105);
|
|
99
|
+
--color-blue-800: rgb(18, 66, 90);
|
|
100
|
+
--color-blue-850: rgb(18, 56, 76);
|
|
101
|
+
--color-blue-900: rgb(19, 44, 58);
|
|
102
|
+
--color-blue-950: rgb(22, 33, 39);
|
|
103
103
|
|
|
104
104
|
--theme-border-color: var(--theme-elevation-150);
|
|
105
105
|
|
package/dist/scss/toasts.scss
CHANGED
|
@@ -1,24 +1,28 @@
|
|
|
1
|
+
@import './styles.scss';
|
|
2
|
+
|
|
1
3
|
.payload-toast-container {
|
|
4
|
+
padding: 0;
|
|
5
|
+
margin: 0;
|
|
6
|
+
|
|
2
7
|
.payload-toast-close-button {
|
|
8
|
+
position: absolute;
|
|
9
|
+
order: 3;
|
|
3
10
|
left: unset;
|
|
4
|
-
|
|
5
|
-
top:
|
|
6
|
-
|
|
11
|
+
inset-inline-end: base(0.5);
|
|
12
|
+
top: 50%;
|
|
13
|
+
transform: translateY(-50%);
|
|
14
|
+
color: var(--theme-elevation-600);
|
|
7
15
|
background: unset;
|
|
8
16
|
border: none;
|
|
9
|
-
display: flex;
|
|
10
|
-
width: 1.25rem;
|
|
11
|
-
height: 1.25rem;
|
|
12
|
-
justify-content: center;
|
|
13
|
-
align-items: center;
|
|
14
17
|
|
|
15
|
-
|
|
16
|
-
|
|
18
|
+
svg {
|
|
19
|
+
width: base(0.75);
|
|
20
|
+
height: base(0.75);
|
|
17
21
|
}
|
|
18
22
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
23
|
+
&:hover {
|
|
24
|
+
color: var(--theme-elevation-250);
|
|
25
|
+
background: none;
|
|
22
26
|
}
|
|
23
27
|
|
|
24
28
|
[dir='RTL'] & {
|
|
@@ -27,16 +31,20 @@
|
|
|
27
31
|
}
|
|
28
32
|
}
|
|
29
33
|
|
|
34
|
+
.toast-title {
|
|
35
|
+
line-height: base(1);
|
|
36
|
+
}
|
|
37
|
+
|
|
30
38
|
.payload-toast-item {
|
|
31
|
-
padding:
|
|
32
|
-
color: var(--theme-
|
|
39
|
+
padding: base(0.5);
|
|
40
|
+
color: var(--theme-elevation-800);
|
|
33
41
|
font-style: normal;
|
|
34
42
|
font-weight: 600;
|
|
35
43
|
display: flex;
|
|
36
44
|
gap: 1rem;
|
|
37
45
|
align-items: center;
|
|
38
46
|
width: 100%;
|
|
39
|
-
border-radius:
|
|
47
|
+
border-radius: 4px;
|
|
40
48
|
border: 1px solid var(--theme-border-color);
|
|
41
49
|
background: var(--theme-input-bg);
|
|
42
50
|
box-shadow:
|
|
@@ -45,6 +53,7 @@
|
|
|
45
53
|
|
|
46
54
|
.toast-content {
|
|
47
55
|
transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
56
|
+
width: 100%;
|
|
48
57
|
}
|
|
49
58
|
|
|
50
59
|
&[data-front='false'] {
|
|
@@ -61,50 +70,64 @@
|
|
|
61
70
|
|
|
62
71
|
.toast-icon {
|
|
63
72
|
svg {
|
|
64
|
-
width:
|
|
65
|
-
height:
|
|
73
|
+
width: base(1);
|
|
74
|
+
height: base(1);
|
|
66
75
|
}
|
|
67
76
|
}
|
|
68
77
|
|
|
69
78
|
&.toast-warning {
|
|
70
|
-
|
|
71
|
-
|
|
79
|
+
color: var(--theme-warning-800);
|
|
80
|
+
border-color: var(--theme-warning-150);
|
|
81
|
+
background-color: var(--theme-warning-50);
|
|
82
|
+
|
|
83
|
+
.payload-toast-close-button {
|
|
84
|
+
color: var(--theme-warning-600);
|
|
85
|
+
|
|
86
|
+
&:hover {
|
|
87
|
+
color: var(--theme-warning-250);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
72
90
|
}
|
|
73
91
|
|
|
74
92
|
&.toast-error {
|
|
75
|
-
|
|
76
|
-
|
|
93
|
+
color: var(--theme-error-800);
|
|
94
|
+
border-color: var(--theme-error-150);
|
|
95
|
+
background-color: var(--theme-error-50);
|
|
96
|
+
|
|
97
|
+
.payload-toast-close-button {
|
|
98
|
+
color: var(--theme-error-600);
|
|
99
|
+
|
|
100
|
+
&:hover {
|
|
101
|
+
color: var(--theme-error-250);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
77
104
|
}
|
|
78
105
|
|
|
79
106
|
&.toast-success {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
107
|
+
color: var(--theme-success-800);
|
|
108
|
+
border-color: var(--theme-success-150);
|
|
109
|
+
background-color: var(--theme-success-50);
|
|
83
110
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
background-color: var(--theme-elevation-100);
|
|
87
|
-
}
|
|
111
|
+
.payload-toast-close-button {
|
|
112
|
+
color: var(--theme-success-600);
|
|
88
113
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
background-color: var(--theme-warning-100);
|
|
114
|
+
&:hover {
|
|
115
|
+
color: var(--theme-success-250);
|
|
116
|
+
}
|
|
93
117
|
}
|
|
118
|
+
}
|
|
94
119
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
120
|
+
&.toast-info {
|
|
121
|
+
color: var(--theme-elevation-800);
|
|
122
|
+
border-color: var(--theme-elevation-150);
|
|
123
|
+
background-color: var(--theme-elevation-50);
|
|
99
124
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
background-color: var(--theme-success-50);
|
|
103
|
-
}
|
|
125
|
+
.payload-toast-close-button {
|
|
126
|
+
color: var(--theme-elevation-600);
|
|
104
127
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
128
|
+
&:hover {
|
|
129
|
+
color: var(--theme-elevation-250);
|
|
130
|
+
}
|
|
108
131
|
}
|
|
109
132
|
}
|
|
110
133
|
}
|