@frontify/guideline-blocks-settings 0.28.1 → 0.28.3

package/src/components/RichTextEditor/plugins/styles.ts

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import { LINK_PLUGIN } from './LinkPlugin/id';
 import { BlockButtonStyles } from './ButtonPlugin';
 

package/src/components/RichTextEditor/serializer/nodes/button.ts

@@ -1,8 +1,9 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
+import type { CSSProperties } from 'react';
 import { TElement } from '@udecode/plate';
+
 import { reactCssPropsToCss } from '../utlis/reactCssPropsToCss';
-import { CSSProperties } from 'react';
 import { BUTTON_PLUGIN } from '../../plugins';
 
 export type ButtonStylesType = Record<string, Record<string, CSSProperties & { hover?: CSSProperties }>>;

package/src/components/RichTextEditor/serializer/nodes/checkItemNode.ts

@@ -1,15 +1,16 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
+import type { CSSProperties } from 'react';
 import { merge } from '@frontify/fondue';
 import { TElement } from '@udecode/plate';
-import { CSSProperties } from 'react';
+
 import { reactCssPropsToCss } from '../utlis/reactCssPropsToCss';
 
 export const checkItemNode = (
     node: TElement,
     children: string,
     defaultClassNames: string,
-    styles: Record<string, CSSProperties & { hover?: CSSProperties }>
+    styles: Record<string, CSSProperties & { hover?: CSSProperties }>,
 ) => {
     return `<div disabled class="tw-flex tw-flex-row tw-pb-2 first-of-type:tw-ml-0 ${defaultClassNames}" style="margin-left:${
         ((node.indent as number) ?? 0) * 24

package/src/components/RichTextEditor/serializer/nodes/default.ts

@@ -1,10 +1,11 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
+import type { CSSProperties } from 'react';
+import { merge } from '@frontify/fondue';
 import { TElement } from '@udecode/plate';
-import { CSSProperties } from 'react';
+
 import { TextStyles } from '../../plugins';
 import { reactCssPropsToCss } from '../utlis/reactCssPropsToCss';
-import { merge } from '@frontify/fondue';
 
 export const defaultNode = (node: TElement, children: string, styles: CSSProperties, defaultClassNames: string) => {
     const defaultStyles = reactCssPropsToCss(styles);
@@ -36,13 +37,13 @@ export const defaultNode = (node: TElement, children: string, styles: CSSPropert
     if (node.type === TextStyles.imageTitle) {
         return `<p class="${merge([defaultClassNames, 'a-image-title'])}">${getStyledChild(
             children,
-            defaultStyles
+            defaultStyles,
         )}</p>`;
     }
     if (node.type === TextStyles.imageCaption) {
         return `<p class="${merge([defaultClassNames, 'a-image-caption'])}">${getStyledChild(
             children,
-            defaultStyles
+            defaultStyles,
         )}</p>`;
     }
 

package/src/components/RichTextEditor/serializer/nodes/link.ts

@@ -1,17 +1,18 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
+import type { CSSProperties } from 'react';
+import escapeHtml from 'escape-html';
 import { TElement } from '@udecode/plate';
+
 import { LINK_PLUGIN } from '../../plugins/LinkPlugin/id';
 import { TLinkElement } from '../../plugins/LinkPlugin/types';
 import { reactCssPropsToCss } from '../utlis/reactCssPropsToCss';
-import escapeHtml from 'escape-html';
-import { CSSProperties } from 'react';
 
 export const linkNode = (
     node: TElement,
     children: string,
     defaultClassNames: string,
-    styles: Record<string, CSSProperties & { hover?: CSSProperties }>
+    styles: Record<string, CSSProperties & { hover?: CSSProperties }>,
 ) => {
     if (node.chosenLink) {
         const { chosenLink } = node as TLinkElement;

package/src/components/RichTextEditor/serializer/serializeNodesToHtmlRecursive.ts

@@ -25,7 +25,7 @@ import {
 } from '@udecode/plate';
 import { serializeLeafToHtml } from './utlis/serializeLeafToHtml';
 import { reactCssPropsToCss } from './utlis/reactCssPropsToCss';
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import { ButtonStylesType, buttonNode } from './nodes/button';
 import { linkNode } from './nodes/link';
 import { defaultNode } from './nodes/default';
@@ -57,7 +57,7 @@ type SerializeNodeToHtmlRecursiveOptions = {
 export const serializeNodeToHtmlRecursive = (
     node: TDescendant,
     styles: Record<string, CSSProperties & { hover?: CSSProperties }> | ButtonStylesType,
-    { mappedMentionable, nestingCount = {} }: SerializeNodeToHtmlRecursiveOptions
+    { mappedMentionable, nestingCount = {} }: SerializeNodeToHtmlRecursiveOptions,
 ): string => {
     if (isText(node)) {
         return serializeLeafToHtml(node);
@@ -90,7 +90,7 @@ export const serializeNodeToHtmlRecursive = (
             node,
             children,
             styles[node.type],
-            getClassNames(node.breakAfterColumn as string | undefined, node.align as string | undefined)
+            getClassNames(node.breakAfterColumn as string | undefined, node.align as string | undefined),
         );
     }
 };
@@ -109,12 +109,12 @@ const MapNodeTypesToHtml: { [key: string]: ({ ...args }: Arguments) => string }
     [ELEMENT_OL]: ({ classNames, children, node, rootNestingCount }) => {
         const nestingLevel = Math.max(rootNestingCount - countNodesOfType([node], ELEMENT_OL), 0);
         return `<ol class="${getOrderedListClasses(nestingLevel)} ${classNames}" style="${reactCssPropsToCss(
-            OL_STYLES
+            OL_STYLES,
         )}">${children}</ol>`;
     },
     [ELEMENT_LI]: ({ classNames, children, node, styles }) =>
         `<li class="${classNames} ${LI_CLASSNAMES}" style="${reactCssPropsToCss(
-            getLiStyles(node, styles)
+            getLiStyles(node, styles),
         )}">${children}</li>`,
     [ELEMENT_LIC]: ({ classNames, children, node }) =>
         `<p class="${classNames} ${getLicElementClassNames(node)}"><span>${children}</span></p>`,

package/src/components/RichTextEditor/serializer/serializeToHtml.ts

@@ -9,7 +9,7 @@ export const serializeRawToHtmlAsync = async (
     raw: string,
     columns: SerializeNodesToHtmlOptions['columns'] = 1,
     columnGap: SerializeNodesToHtmlOptions['columnGap'] = 'normal',
-    plugins: PluginComposer = new PluginComposer()
+    plugins: PluginComposer = new PluginComposer(),
 ): Promise<string> => {
     const nodes = parseRawValue({ raw, plugins });
     const styles = plugins.getStyles;
@@ -18,7 +18,7 @@ export const serializeRawToHtmlAsync = async (
 
 export const serializeNodesToHtml = (
     nodes: TDescendant[],
-    { mentionable, columns = 1, columnGap = 'normal', styles = BlockStyles }: SerializeNodesToHtmlOptions = {}
+    { mentionable, columns = 1, columnGap = 'normal', styles = BlockStyles }: SerializeNodesToHtmlOptions = {},
 ): string => {
     const mappedMentionable = mentionable ? mapMentionable(mentionable) : new Map();
 

package/src/components/RichTextEditor/serializer/utlis/reactCssPropsToCss.ts

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
 export const reactCssPropsToCss = (props?: CSSProperties): string => {
     if (!props) {

package/src/hooks/useAttachments.ts

@@ -24,7 +24,7 @@ export const useAttachments = (appBridge: AppBridgeBlock, assetId: string) => {
 
     const onAttachmentReplace = async (attachmentToReplace: Asset, newAsset: Asset) => {
         const newAssetIds = attachments.map((attachment) =>
-            attachment.id === attachmentToReplace.id ? newAsset.id : attachment.id
+            attachment.id === attachmentToReplace.id ? newAsset.id : attachment.id,
         );
 
         await updateAssetIdsFromKey(assetId, newAssetIds);

package/src/hooks/useDndSensors.ts

@@ -16,7 +16,7 @@ export const useDndSensors = (columnGap = 0, rowGap = 0) => {
         useSensor(KeyboardSensor, {
             coordinateGetter: customCoordinatesGetter,
             keyboardCodes,
-        })
+        }),
     );
 
     return sensors;

package/src/index.ts

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import 'tailwindcss/tailwind.css';
+import './styles.css';
 
 import type { FC } from 'react';
 import type { AppBridgeBlock } from '@frontify/app-bridge';
@@ -124,9 +124,9 @@ export const defineSettings = <
     T extends
         | BlockSettingsStructureExport
         | (() => Promise<BlockSettingsStructureExport>)
-        | (() => BlockSettingsStructureExport)
+        | (() => BlockSettingsStructureExport),
 >(
-    settingsStructure: T
+    settingsStructure: T,
 ): T => settingsStructure;
 
 export * from './components';

package/src/settings/background.spec.ts

@@ -94,7 +94,7 @@ describe('getBackgroundSettings', () => {
                 id: 'Test',
                 defaultValue: true,
                 defaultColor: { red: 0, green: 0, blue: 0, alpha: 1 },
-            })
+            }),
         ).toEqual({
             id: 'hasBackgroundTest',
             label: 'Background',

package/src/settings/border.spec.ts

@@ -41,7 +41,7 @@ describe('getBorderSettings', () => {
         });
         expect((borderSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[1]).toHaveProperty(
             'id',
-            'borderWidth'
+            'borderWidth',
         );
         expect((borderSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[1]).toHaveProperty('type', 'input');
         expect((borderSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[2]).toEqual({

package/src/settings/borderRadiusExtended.spec.ts

@@ -20,19 +20,19 @@ describe('getBorderRadiusExtendedSettings', () => {
 
         expect((extendedBorderRadiusSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[0]).toHaveProperty(
             'id',
-            'extendedRadiusTopLeft'
+            'extendedRadiusTopLeft',
         );
         expect((extendedBorderRadiusSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[1]).toHaveProperty(
             'id',
-            'extendedRadiusTopRight'
+            'extendedRadiusTopRight',
         );
         expect((extendedBorderRadiusSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[2]).toHaveProperty(
             'id',
-            'extendedRadiusBottomLeft'
+            'extendedRadiusBottomLeft',
         );
         expect((extendedBorderRadiusSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[3]).toHaveProperty(
             'id',
-            'extendedRadiusBottomRight'
+            'extendedRadiusBottomRight',
         );
         expect(extendedBorderRadiusSettings.off?.[0]).toHaveProperty('id', 'extendedRadiusChoice');
         expect(extendedBorderRadiusSettings.off?.[0]).toHaveProperty('type', 'segmentedControls');

package/src/settings/marginExtended.spec.ts

@@ -20,19 +20,19 @@ describe('getMarginExtendedSettings', () => {
 
         expect((extendedMarginSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[0]).toHaveProperty(
             'id',
-            'extendedMarginTop'
+            'extendedMarginTop',
         );
         expect((extendedMarginSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[1]).toHaveProperty(
             'id',
-            'extendedMarginLeft'
+            'extendedMarginLeft',
         );
         expect((extendedMarginSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[2]).toHaveProperty(
             'id',
-            'extendedMarginRight'
+            'extendedMarginRight',
         );
         expect((extendedMarginSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[3]).toHaveProperty(
             'id',
-            'extendedMarginBottom'
+            'extendedMarginBottom',
         );
         expect(extendedMarginSettings.off?.[0]).toHaveProperty('id', 'extendedMarginChoice');
         expect(extendedMarginSettings.off?.[0]).toHaveProperty('type', 'segmentedControls');

package/src/settings/paddingExtended.spec.ts

@@ -20,19 +20,19 @@ describe('getPaddingExtendedSettings', () => {
 
         expect((extendedPaddingSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[0]).toHaveProperty(
             'id',
-            'extendedPaddingTop'
+            'extendedPaddingTop',
         );
         expect((extendedPaddingSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[1]).toHaveProperty(
             'id',
-            'extendedPaddingLeft'
+            'extendedPaddingLeft',
         );
         expect((extendedPaddingSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[2]).toHaveProperty(
             'id',
-            'extendedPaddingRight'
+            'extendedPaddingRight',
         );
         expect((extendedPaddingSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[3]).toHaveProperty(
             'id',
-            'extendedPaddingBottom'
+            'extendedPaddingBottom',
         );
         expect(extendedPaddingSettings.off?.[0]).toHaveProperty('id', 'extendedPaddingChoice');
         expect(extendedPaddingSettings.off?.[0]).toHaveProperty('type', 'segmentedControls');

package/src/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/utilities/react/getBackgroundColorStyles.ts

@@ -1,8 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { CSSProperties } from 'react';
-
-import { Color } from '@frontify/fondue';
+import type { CSSProperties } from 'react';
+import type { Color } from '@frontify/fondue';
 
 import { toRgbaString } from '../color';
 

package/src/utilities/react/getBorderStyles.ts

@@ -1,8 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { CSSProperties } from 'react';
-
-import { Color } from '@frontify/fondue';
+import type { CSSProperties } from 'react';
+import type { Color } from '@frontify/fondue';
 
 import { BorderStyle, borderStyleMap } from '../../settings/types';
 import { BORDER_COLOR_DEFAULT_VALUE } from '../../settings/defaultValues';
@@ -11,7 +10,7 @@ import { toRgbaString } from '../color';
 export const getBorderStyles = (
     style = BorderStyle.Solid,
     borderWidth = '1px',
-    color = BORDER_COLOR_DEFAULT_VALUE as Color
+    color = BORDER_COLOR_DEFAULT_VALUE as Color,
 ): CSSProperties => {
     return {
         borderStyle: borderStyleMap[style],

package/src/utilities/react/getRadiusStyles.ts

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import { Radius, radiusStyleMap } from '../../settings/types';
 
 export const getRadiusStyles = (radiusChoice: Radius, hasRadius = false, radiusValue?: number): CSSProperties => ({

package/vite.config.ts

@@ -1,14 +1,30 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { defineConfig } from 'vitest/config';
-import { dependencies as dependenciesMap } from './package.json';
+import react from '@vitejs/plugin-react';
+import { PreRenderedAsset } from 'rollup';
+import { dependencies as dependenciesMap, peerDependencies as peerDependenciesMap } from './package.json';
 import { resolve } from 'path';
 import dts from 'vite-plugin-dts';
 
 const dependencies = Object.keys(dependenciesMap);
+const peerDependencies = Object.keys(peerDependenciesMap);
+
+export const globals = {
+    react: 'React',
+    'react-dom': 'ReactDOM',
+    'react-dom/client': 'ReactDOM',
+};
+
+const assetFileNames = (chunkInfo: PreRenderedAsset): string => {
+    if (chunkInfo.name === 'style.css') {
+        return 'styles.css';
+    }
+    return chunkInfo.name ?? 'UnknownFileName';
+};
 
 export default defineConfig({
-    plugins: [dts({ insertTypesEntry: true, rollupTypes: true })],
+    plugins: [dts({ insertTypesEntry: true, rollupTypes: true }), react()],
     resolve: {
         mainFields: ['module', 'main'],
     },
@@ -27,21 +43,27 @@ export default defineConfig({
         sourcemap: true,
         minify: true,
         rollupOptions: {
-            external: [...dependencies],
+            external: [...dependencies, ...peerDependencies, 'react-dom/client', 'react/jsx-runtime'],
             output: [
                 {
                     name: 'GuidelineBlocksSettings',
                     format: 'es',
                     preserveModules: true,
                     preserveModulesRoot: 'src',
+                    assetFileNames,
+                    globals,
                 },
                 {
                     name: 'GuidelineBlocksSettings',
                     format: 'umd',
+                    assetFileNames,
+                    globals,
                 },
                 {
                     name: 'GuidelineBlocksSettings',
                     format: 'cjs',
+                    assetFileNames,
+                    globals,
                 },
             ],
         },

package/dist/_virtual/_commonjsHelpers.es.js

@@ -1,7 +0,0 @@
-function e(t) {
-  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
-}
-export {
-  e as getDefaultExportFromCjs
-};
-//# sourceMappingURL=_commonjsHelpers.es.js.map

package/dist/_virtual/_commonjsHelpers.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_commonjsHelpers.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/_virtual/index.es.js

@@ -1,5 +0,0 @@
-var e = { exports: {} };
-export {
-  e as __module
-};
-//# sourceMappingURL=index.es.js.map

package/dist/_virtual/index.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/index.es2.js

@@ -1,5 +0,0 @@
-var e = { exports: {} };
-export {
-  e as __module
-};
-//# sourceMappingURL=index.es2.js.map

package/dist/_virtual/index.es2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.es2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/index.es3.js

@@ -1,5 +0,0 @@
-var e = { exports: {} };
-export {
-  e as __module
-};
-//# sourceMappingURL=index.es3.js.map

package/dist/_virtual/index.es3.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.es3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/jsx-runtime.es.js

@@ -1,5 +0,0 @@
-var e = { exports: {} };
-export {
-  e as __module
-};
-//# sourceMappingURL=jsx-runtime.es.js.map

package/dist/_virtual/jsx-runtime.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"jsx-runtime.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/react-dom.development.es.js

@@ -1,5 +0,0 @@
-var e = {};
-export {
-  e as __exports
-};
-//# sourceMappingURL=react-dom.development.es.js.map

package/dist/_virtual/react-dom.development.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"react-dom.development.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/react-dom.production.min.es.js

@@ -1,5 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};
-//# sourceMappingURL=react-dom.production.min.es.js.map

package/dist/_virtual/react-dom.production.min.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"react-dom.production.min.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/react-jsx-runtime.development.es.js

@@ -1,5 +0,0 @@
-var e = {};
-export {
-  e as __exports
-};
-//# sourceMappingURL=react-jsx-runtime.development.es.js.map

package/dist/_virtual/react-jsx-runtime.development.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"react-jsx-runtime.development.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/react-jsx-runtime.production.min.es.js

@@ -1,5 +0,0 @@
-var r = {};
-export {
-  r as __exports
-};
-//# sourceMappingURL=react-jsx-runtime.production.min.es.js.map

package/dist/_virtual/react-jsx-runtime.production.min.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"react-jsx-runtime.production.min.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/react.development.es.js

@@ -1,5 +0,0 @@
-var e = { exports: {} };
-export {
-  e as __module
-};
-//# sourceMappingURL=react.development.es.js.map

package/dist/_virtual/react.development.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"react.development.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/react.production.min.es.js

@@ -1,5 +0,0 @@
-var r = {};
-export {
-  r as __exports
-};
-//# sourceMappingURL=react.production.min.es.js.map

package/dist/_virtual/react.production.min.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"react.production.min.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/scheduler.development.es.js

@@ -1,5 +0,0 @@
-var e = {};
-export {
-  e as __exports
-};
-//# sourceMappingURL=scheduler.development.es.js.map

package/dist/_virtual/scheduler.development.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"scheduler.development.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/scheduler.production.min.es.js

@@ -1,5 +0,0 @@
-var r = {};
-export {
-  r as __exports
-};
-//# sourceMappingURL=scheduler.production.min.es.js.map

package/dist/_virtual/scheduler.production.min.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"scheduler.production.min.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/style.css

@@ -1 +0,0 @@
-*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(147 197 253 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(147 197 253 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.tw-pointer-events-none{pointer-events:none}.tw-pointer-events-auto{pointer-events:auto}.tw-absolute{position:absolute}.tw-relative{position:relative}.tw-bottom-\[calc\(100\%-4px\)\]{bottom:calc(100% - 4px)}.tw-left-0{left:0px}.tw-right-\[-3px\]{right:-3px}.tw-top-full{top:100%}.tw-z-10{z-index:10}.tw-z-20{z-index:20}.tw-z-\[2\]{z-index:2}.tw-m-0{margin:0}.tw-my-4{margin-top:1rem;margin-bottom:1rem}.tw-mr-1{margin-right:.25rem}.tw-mr-1\.5{margin-right:.375rem}.tw-mr-2{margin-right:.5rem}.tw-mt-3{margin-top:.75rem}.tw-mt-8{margin-top:2rem}.tw-flex{display:flex}.tw-inline-flex{display:inline-flex}.tw-h-0{height:0px}.tw-h-4{height:1rem}.tw-h-6{height:1.5rem}.tw-h-7{height:1.75rem}.tw-h-8{height:2rem}.tw-h-9{height:2.25rem}.tw-h-\[72px\]{height:72px}.tw-h-full{height:100%}.tw-min-h-\[10px\]{min-height:10px}.tw-w-0{width:0px}.tw-w-4{width:1rem}.tw-w-6{width:1.5rem}.tw-w-8{width:2rem}.tw-w-9{width:2.25rem}.tw-w-\[300px\]{width:300px}.tw-w-fit{width:-moz-fit-content;width:fit-content}.tw-w-full{width:100%}.tw-min-w-0{min-width:0px}.tw-min-w-\[400px\]{min-width:400px}.tw-flex-1{flex:1 1 0%}.tw-flex-auto{flex:1 1 auto}.tw-flex-shrink-0{flex-shrink:0}.tw-rotate-90{--tw-rotate: 90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes tw-pulse{50%{opacity:.5}}.tw-animate-pulse{animation:tw-pulse 2s cubic-bezier(.4,0,.6,1) infinite}.\!tw-cursor-not-allowed{cursor:not-allowed!important}.tw-cursor-grab{cursor:grab}.tw-cursor-grabbing{cursor:grabbing}.tw-cursor-pointer{cursor:pointer}.tw-select-none{-webkit-user-select:none;user-select:none}.tw-break-inside-avoid-column{break-inside:avoid-column}.tw-break-after-column{break-after:column}.tw-flex-row{flex-direction:row}.tw-flex-col{flex-direction:column}.tw-items-start{align-items:flex-start}.tw-items-center{align-items:center}.tw-justify-end{justify-content:flex-end}.tw-justify-center{justify-content:center}.tw-justify-between{justify-content:space-between}.tw-gap-0{gap:0px}.tw-gap-0\.5{gap:.125rem}.tw-gap-1{gap:.25rem}.tw-gap-2{gap:.5rem}.tw-gap-3{gap:.75rem}.tw-gap-\[2px\]{gap:2px}.tw-gap-x-3{column-gap:.75rem}.tw-space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.25rem * var(--tw-space-x-reverse));margin-left:calc(.25rem * calc(1 - var(--tw-space-x-reverse)))}.tw-space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.tw-self-start{align-self:flex-start}.tw-overflow-hidden{overflow:hidden}.tw-overflow-y-auto{overflow-y:auto}.tw-text-ellipsis{text-overflow:ellipsis}.tw-whitespace-nowrap{white-space:nowrap}.tw-break-words{overflow-wrap:break-word}.tw-rounded{border-radius:var(--radius)}.tw-rounded-full{border-radius:9999px}.tw-rounded-sm{border-radius:.125rem}.tw-border{border-width:var(--line-width)}.tw-border-b{border-bottom-width:var(--line-width)}.tw-border-b-4{border-bottom-width:4px}.tw-border-l-4{border-left-width:4px}.tw-border-t{border-top-width:var(--line-width)}.tw-border-t-4{border-top-width:4px}.tw-border-solid{border-style:solid}.tw-border-dashed{border-style:dashed}.\!tw-border-red-50{--tw-border-opacity: 1 !important;border-color:rgb(255 128 102 / var(--tw-border-opacity))!important}.tw-border-blank-state-line{--tw-border-opacity: 1;border-color:rgb(163 165 165 / var(--tw-border-opacity))}.tw-border-blank-state-line-hover{--tw-border-opacity: 1;border-color:rgb(26 28 28 / var(--tw-border-opacity))}.tw-border-box-selected-inverse{border-color:var(--box-selected-inverse-color)}.tw-border-button-border{border-color:var(--button-border-color)}.tw-border-b-line{border-bottom-color:var(--line-color)}.tw-border-b-transparent{border-bottom-color:transparent}.tw-border-t-black-10{--tw-border-opacity: 1;border-top-color:rgb(234 235 235 / var(--tw-border-opacity))}.tw-border-t-transparent{border-top-color:transparent}.tw-bg-base{background-color:var(--base-color)}.tw-bg-base-alt{background-color:var(--base-color-alt)}.tw-bg-blank-state-pressed-inverse{--tw-bg-opacity: 1;background-color:rgb(241 241 241 / var(--tw-bg-opacity))}.tw-bg-blank-state-shaded-inverse{--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity))}.tw-bg-blank-state-weak-inverse{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.tw-bg-box-neutral-hover{background-color:var(--box-neutral-color-hover)}.tw-bg-box-neutral-strong-inverse{background-color:var(--box-neutral-strong-inverse-color)}.tw-bg-box-selected-pressed{background-color:var(--box-selected-color-pressed)}.tw-bg-box-selected-strong{background-color:var(--box-selected-strong-color)}.tw-bg-button-background{background-color:var(--button-background-color)}.tw-bg-button-background-pressed{background-color:var(--button-background-color-pressed)}.tw-bg-red-50{--tw-bg-opacity: 1;background-color:rgb(255 128 102 / var(--tw-bg-opacity))}.tw-bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.tw-p-1{padding:.25rem}.tw-p-1\.5{padding:.375rem}.tw-p-2{padding:.5rem}.tw-p-4{padding:1rem}.tw-p-7{padding:1.75rem}.tw-p-\[6px\]{padding:6px}.tw-px-0{padding-left:0;padding-right:0}.tw-px-2{padding-left:.5rem;padding-right:.5rem}.tw-px-2\.5{padding-left:.625rem;padding-right:.625rem}.tw-px-5{padding-left:1.25rem;padding-right:1.25rem}.tw-px-\[1px\]{padding-left:1px;padding-right:1px}.tw-py-0{padding-top:0;padding-bottom:0}.tw-py-2{padding-top:.5rem;padding-bottom:.5rem}.tw-py-3{padding-top:.75rem;padding-bottom:.75rem}.tw-pb-2{padding-bottom:.5rem}.tw-pl-12{padding-left:3rem}.tw-pl-14{padding-left:3.5rem}.tw-pl-7{padding-left:1.75rem}.tw-pt-5{padding-top:1.25rem}.tw-text-left{text-align:left}.tw-text-right{text-align:right}.tw-font-body{font-family:var(--body-family)}.tw-font-sans{font-family:Space Grotesk Frontify,Arial,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol}.tw-text-\[13px\]{font-size:13px}.tw-text-s{font-size:.875rem;line-height:1rem}.tw-text-sm{font-size:.875rem;line-height:1.25rem}.tw-text-xs{font-size:.813rem;line-height:1rem}.tw-font-bold{font-weight:700}.tw-font-medium{font-weight:500}.tw-font-normal{font-weight:400}.tw-leading-4{line-height:1rem}.tw-leading-5{line-height:1.25rem}.tw-text-blank-state-shaded{--tw-text-opacity: 1;color:rgb(114 116 116 / var(--tw-text-opacity))}.tw-text-box-neutral-strong{color:var(--box-neutral-strong-color)}.tw-text-box-selected-inverse{color:var(--box-selected-inverse-color)}.tw-text-box-selected-strong-inverse{color:var(--box-selected-strong-inverse-color)}.tw-text-red-60{--tw-text-opacity: 1;color:rgb(255 55 90 / var(--tw-text-opacity))}.tw-text-red-65{--tw-text-opacity: 1;color:rgb(229 33 68 / var(--tw-text-opacity))}.tw-text-text{color:var(--text-color)}.tw-text-text-weak{color:var(--text-color-weak)}.\!tw-line-through{text-decoration-line:line-through!important}.tw-opacity-0{opacity:0}.tw-opacity-100{opacity:1}.tw-shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.tw-outline-none{outline:2px solid transparent;outline-offset:2px}.tw-outline{outline-style:solid}.tw-outline-1{outline-width:1px}.tw-outline-offset-1{outline-offset:1px}.tw-outline-offset-2{outline-offset:2px}.tw-outline-offset-\[1px\]{outline-offset:1px}.tw-outline-box-selected-inverse{outline-color:var(--box-selected-inverse-color)}.tw-outline-line{outline-color:var(--line-color)}.tw-outline-violet-60{outline-color:#825fff}.tw-transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.tw-transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.first\:tw-rounded-bl:first-child{border-bottom-left-radius:var(--radius)}.first\:tw-rounded-tl:first-child{border-top-left-radius:var(--radius)}.first\:tw-rounded-tr:first-child{border-top-right-radius:var(--radius)}.last\:tw-rounded-bl:last-child{border-bottom-left-radius:var(--radius)}.last\:tw-rounded-br:last-child{border-bottom-right-radius:var(--radius)}.last\:tw-rounded-tr:last-child{border-top-right-radius:var(--radius)}.first-of-type\:tw-ml-0:first-of-type{margin-left:0}.focus-within\:tw-opacity-100:focus-within{opacity:1}.focus-within\:tw-outline:focus-within{outline-style:solid}.hover\:tw-border-blank-state-line-hover:hover{--tw-border-opacity: 1;border-color:rgb(26 28 28 / var(--tw-border-opacity))}.hover\:tw-bg-black-10:hover{--tw-bg-opacity: 1;background-color:rgb(234 235 235 / var(--tw-bg-opacity))}.hover\:tw-bg-blank-state-hover-inverse:hover{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.hover\:tw-bg-box-neutral-hover:hover{background-color:var(--box-neutral-color-hover)}.hover\:tw-bg-box-neutral-strong-inverse-hover:hover{background-color:var(--box-neutral-strong-inverse-color-hover)}.hover\:tw-bg-box-selected-hover:hover{background-color:var(--box-selected-color-hover)}.hover\:tw-bg-button-background-hover:hover{background-color:var(--button-background-color-hover)}.hover\:tw-bg-button-background-pressed:hover{background-color:var(--button-background-color-pressed)}.hover\:tw-text-blank-state-hover:hover{--tw-text-opacity: 1;color:rgb(26 28 28 / var(--tw-text-opacity))}.hover\:tw-text-box-neutral-inverse-hover:hover{color:var(--box-neutral-inverse-color-hover)}.hover\:tw-outline:hover{outline-style:solid}.focus-visible\:tw-opacity-100:focus-visible{opacity:1}.focus-visible\:tw-ring-blue:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(94 158 214 / var(--tw-ring-opacity)) }.active\:tw-border-blank-state-line-hover:active{--tw-border-opacity: 1;border-color:rgb(26 28 28 / var(--tw-border-opacity))}.active\:tw-bg-blank-state-pressed-inverse:active{--tw-bg-opacity: 1;background-color:rgb(241 241 241 / var(--tw-bg-opacity))}.active\:tw-bg-box-neutral-strong-inverse-pressed:active{background-color:var(--box-neutral-strong-inverse-color-pressed)}.active\:tw-bg-box-selected-pressed:active{background-color:var(--box-selected-color-pressed)}.active\:tw-bg-button-background-pressed:active{background-color:var(--button-background-color-pressed)}.active\:tw-text-blank-state-pressed:active{--tw-text-opacity: 1;color:rgb(8 8 8 / var(--tw-text-opacity))}.tw-group:hover .group-hover\:tw-text-box-neutral-inverse-hover{color:var(--box-neutral-inverse-color-hover)}.tw-group:hover .group-hover\:tw-opacity-100{opacity:1}.tw-group:focus .group-focus\:tw-opacity-100{opacity:1}.\[\&\:not\(\:first-child\)\]\:tw-border-l-0:not(:first-child){border-left-width:0px}.\[\&\:not\(\:first-child\)\]\:tw-border-t-0:not(:first-child){border-top-width:0px}.\[\&\>\*\]\:tw-pointer-events-none>*{pointer-events:none}