@sendoutcards/quantum-design-ui 1.8.39-alpha.6 → 1.8.39

package/dist/src/theme/tokens/borders.d.ts

@@ -1,7 +1,7 @@
-export declare const borders: {
-    xSmall: number;
-    small: number;
-    medium: number;
-    large: number;
-    xLarge: number;
-};
+export declare const borders: {
+    xSmall: number;
+    small: number;
+    medium: number;
+    large: number;
+    xLarge: number;
+};

package/dist/src/theme/tokens/colors.d.ts

@@ -1,12 +1,12 @@
-export declare const colors: {
-    pinkSwatch: import("src/helpers/theme-functions/computeColorSwatch").ColorSwatch;
-    brightBlueSwatch: import("src/helpers/theme-functions/computeColorSwatch").ColorSwatch;
-    greenSwatch: import("src/helpers/theme-functions/computeColorSwatch").ColorSwatch;
-    redSwatch: import("src/helpers/theme-functions/computeColorSwatch").ColorSwatch;
-    yellowSwatch: import("src/helpers/theme-functions/computeColorSwatch").ColorSwatch;
-    accentSwatch: import("src/helpers/theme-functions/computeColorSwatch").ColorSwatch;
-    WHITE: string;
-    blueSwatch: import("src/helpers/theme-functions/computeColorSwatch").ColorSwatch;
-    purpleSwatch: import("src/helpers/theme-functions/computeColorSwatch").ColorSwatch;
-    lightGray: string;
-};
+export declare const colors: {
+    pinkSwatch: import("../../helpers/theme-functions/computeColorSwatch").ColorSwatch;
+    brightBlueSwatch: import("../../helpers/theme-functions/computeColorSwatch").ColorSwatch;
+    greenSwatch: import("../../helpers/theme-functions/computeColorSwatch").ColorSwatch;
+    redSwatch: import("../../helpers/theme-functions/computeColorSwatch").ColorSwatch;
+    yellowSwatch: import("../../helpers/theme-functions/computeColorSwatch").ColorSwatch;
+    accentSwatch: import("../../helpers/theme-functions/computeColorSwatch").ColorSwatch;
+    WHITE: string;
+    blueSwatch: import("../../helpers/theme-functions/computeColorSwatch").ColorSwatch;
+    purpleSwatch: import("../../helpers/theme-functions/computeColorSwatch").ColorSwatch;
+    lightGray: string;
+};

package/dist/src/theme/tokens/mediaQueries.d.ts

@@ -1,8 +1,8 @@
-type MediaQuerySizes = {
-    small: number;
-    medium: number;
-    large: number;
-    xLarge: number;
-};
-export declare const mediaQuerySizes: MediaQuerySizes;
-export {};
+declare type MediaQuerySizes = {
+    small: number;
+    medium: number;
+    large: number;
+    xLarge: number;
+};
+export declare const mediaQuerySizes: MediaQuerySizes;
+export {};

package/dist/src/theme/tokens/radius.d.ts

@@ -1,9 +1,9 @@
-export declare const radius: {
-    none: string;
-    small: string;
-    smallMedium: string;
-    medium: string;
-    mediumLarge: string;
-    large: string;
-    circle: string;
-};
+export declare const radius: {
+    none: string;
+    small: string;
+    smallMedium: string;
+    medium: string;
+    mediumLarge: string;
+    large: string;
+    circle: string;
+};

package/dist/src/theme/tokens/shadows.d.ts

@@ -1,8 +1,8 @@
-export declare const SHADOW_DEFAULT_COLOR = "#000000";
-export declare const shadows: {
-    dark: number[];
-    mediumDark: number[];
-    mediumLight: number[];
-    light: number[];
-    xLight: number[];
-};
+export declare const SHADOW_DEFAULT_COLOR = "#000000";
+export declare const shadows: {
+    dark: number[];
+    mediumDark: number[];
+    mediumLight: number[];
+    light: number[];
+    xLight: number[];
+};

package/dist/src/theme/tokens/sizing.d.ts

@@ -1,14 +1,14 @@
-export declare const icons: {
-    xSmall: number;
-    small: number;
-    medium: number;
-    large: number;
-    xLarge: number;
-};
-export declare const sphere: {
-    xSmall: number;
-    small: number;
-    medium: number;
-    large: number;
-    xLarge: number;
-};
+export declare const icons: {
+    xSmall: number;
+    small: number;
+    medium: number;
+    large: number;
+    xLarge: number;
+};
+export declare const sphere: {
+    xSmall: number;
+    small: number;
+    medium: number;
+    large: number;
+    xLarge: number;
+};

package/dist/src/theme/tokens/spacing.d.ts

@@ -1,2 +1,2 @@
-export declare const BASE_VALUE = 0.5;
-export declare const BASE_UNITS = "rem";
+export declare const BASE_VALUE = 0.5;
+export declare const BASE_UNITS = "rem";

package/dist/src/theme/tokens/typography.d.ts

@@ -1,22 +1,22 @@
-export declare const XSMALL_FONT: string;
-export declare const SMALL_FONT: string;
-export declare const MEDIUM_FONT: string;
-export declare const MEDIUM_PLUS_FONT: string;
-export declare const LARGE_FONT: string;
-export declare const XLARGE_FONT: string;
-export declare const XXLARGE_FONT: string;
-export declare const XSMALL_LINE_HEIGHT: string;
-export declare const SMALL_LINE_HEIGHT: string;
-export declare const MEDIUM_LINE_HEIGHT: string;
-export declare const LARGE_LINE_HEIGHT: string;
-export declare const XLARGE_LINE_HEIGHT: string;
-export declare const XXLARGE_LINE_HEIGHT: string;
-export declare const HEADING_FONT_FAMILY = "'Montserrat', sans-serif";
-export declare const BODY_FONT_FAMILY = "'Montserrat', sans-serif";
-export declare const HEADING_FONT_IMPORT = "https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap";
-export declare const BODY_FONT_IMPORT = "https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap";
-export declare const WEIGHT_THIN = 300;
-export declare const WEIGHT_REGULAR = 400;
-export declare const WEIGHT_SEMI_BOLD = 500;
-export declare const WEIGHT_BOLD = 600;
-export declare const WEIGHT_EXTRA_BOLD = 800;
+export declare const XSMALL_FONT: string;
+export declare const SMALL_FONT: string;
+export declare const MEDIUM_FONT: string;
+export declare const MEDIUM_PLUS_FONT: string;
+export declare const LARGE_FONT: string;
+export declare const XLARGE_FONT: string;
+export declare const XXLARGE_FONT: string;
+export declare const XSMALL_LINE_HEIGHT: string;
+export declare const SMALL_LINE_HEIGHT: string;
+export declare const MEDIUM_LINE_HEIGHT: string;
+export declare const LARGE_LINE_HEIGHT: string;
+export declare const XLARGE_LINE_HEIGHT: string;
+export declare const XXLARGE_LINE_HEIGHT: string;
+export declare const HEADING_FONT_FAMILY = "'Montserrat', sans-serif";
+export declare const BODY_FONT_FAMILY = "'Montserrat', sans-serif";
+export declare const HEADING_FONT_IMPORT = "https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap";
+export declare const BODY_FONT_IMPORT = "https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap";
+export declare const WEIGHT_THIN = 300;
+export declare const WEIGHT_REGULAR = 400;
+export declare const WEIGHT_SEMI_BOLD = 500;
+export declare const WEIGHT_BOLD = 600;
+export declare const WEIGHT_EXTRA_BOLD = 800;

package/dist/src/theme/types.d.ts

@@ -1,13 +1,13 @@
-import { TextType, TextColor } from 'src/exports/atoms';
-import { SizeProperties, ThemeModeProperies } from '../types/global';
-type SphereProperties = {
-    circumference: number;
-    textType: TextType;
-};
-export type Sphere = SizeProperties<SphereProperties>;
-type WidgetProperties = {
-    backgroundColor: string;
-    fontColor: TextColor;
-};
-export type Widget = ThemeModeProperies<WidgetProperties>;
-export {};
+import { TextType, TextColor } from "../exports/atoms";
+import { SizeProperties, ThemeModeProperies } from '../types/global';
+declare type SphereProperties = {
+    circumference: number;
+    textType: TextType;
+};
+export declare type Sphere = SizeProperties<SphereProperties>;
+declare type WidgetProperties = {
+    backgroundColor: string;
+    fontColor: TextColor;
+};
+export declare type Widget = ThemeModeProperies<WidgetProperties>;
+export {};

package/dist/src/types/global.d.ts

@@ -1,34 +1,34 @@
-import React from 'react';
-import { HOCSwatchColorKeys, LiteralUnion } from 'src/helpers/hoc-types/entityValueTypes';
-import { entities } from 'src/theme/theming/entities';
-export type SizeProperties<T> = {
-    xSmall: T;
-    small: T;
-    medium: T;
-    large: T;
-    xLarge: T;
-};
-export type SizeType = keyof SizeProperties<never>;
-export type ColorModeType = 'light' | 'dark';
-export type BaseColorType = keyof typeof entities.hocs.colors.swatches;
-export type ColorStop = {
-    color: LiteralUnion<HOCSwatchColorKeys>;
-    percentage: number;
-};
-export type OnMouseEvent = (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-export type ThemeModeProperies<T> = {
-    primary: T;
-    secondary: T;
-    success: T;
-    warning: T;
-    danger: T;
-    shadow: T;
-    accent: T;
-};
-export type ThemeMode = keyof ThemeModeProperies<never>;
-export type Char = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';
-export type Country = {
-    isoCode: string;
-    callingCode: number;
-    hasSeparator?: boolean;
-};
+import React from 'react';
+import { HOCSwatchColorKeys, LiteralUnion } from "../helpers/hoc-types/entityValueTypes";
+import { entities } from "../theme/theming/entities";
+export declare type SizeProperties<T> = {
+    xSmall: T;
+    small: T;
+    medium: T;
+    large: T;
+    xLarge: T;
+};
+export declare type SizeType = keyof SizeProperties<never>;
+export declare type ColorModeType = 'light' | 'dark';
+export declare type BaseColorType = keyof typeof entities.hocs.colors.swatches;
+export declare type ColorStop = {
+    color: LiteralUnion<HOCSwatchColorKeys>;
+    percentage: number;
+};
+export declare type OnMouseEvent = (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+export declare type ThemeModeProperies<T> = {
+    primary: T;
+    secondary: T;
+    success: T;
+    warning: T;
+    danger: T;
+    shadow: T;
+    accent: T;
+};
+export declare type ThemeMode = keyof ThemeModeProperies<never>;
+export declare type Char = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';
+export declare type Country = {
+    isoCode: string;
+    callingCode: number;
+    hasSeparator?: boolean;
+};

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@sendoutcards/quantum-design-ui",
-  "version": "1.8.39-alpha.6",
+  "version": "1.8.39",
   "description": "UI component library for Quantum Design System",
-  "module": "dist/index.mjs",
-  "jsnext:main": "dist/index.mjs",
+  "module": "dist/index.es.js",
+  "jsnext:main": "dist/index.es.js",
   "typings": "dist/index.d.ts",
   "author": "nickqweaver",
   "license": "MIT",
@@ -24,7 +24,7 @@
     ]
   },
   "scripts": {
-    "build": "vite build && tsc --project tsconfig.build.json --noEmitOnError false || true",
+    "build": "rm -rf ./dist/* & rollup -c",
     "test": "jest",
     "lint": "eslint src",
     "lint-staged": "lint-staged",
@@ -34,6 +34,7 @@
     "prettier": "prettier --write src"
   },
   "peerDependencies": {
+    "@emotion/types": "0.7.0",
     "@types/react": "<18",
     "react": "<18",
     "react-dom": "<18"
@@ -43,6 +44,7 @@
   ],
   "dependencies": {
     "@babel/preset-react": "^7.10.4",
+    "@emotion/react": "^11.14.0",
     "@types/color": "^3.0.1",
     "@types/react-color": "^3.0.4",
     "@types/react-infinite-scroller": "^1.2.1",
@@ -65,24 +67,30 @@
     "use-resize-observer": "^7.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.11.6",
+    "@emotion/babel-preset-css-prop": "^11.12.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^15.0.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
     "@sendoutcards/prettier-config": "*",
     "@storybook/addon-actions": "^8.6.4",
     "@storybook/addon-essentials": "^8.6.4",
     "@storybook/addon-knobs": "8.0.1",
     "@storybook/addon-links": "^8.6.4",
+    "@storybook/addon-storyshots": "^7.6.17",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
     "@storybook/react": "^8.6.4",
-    "@storybook/react-vite": "^8.6.14",
+    "@storybook/react-webpack5": "^8.6.4",
     "@types/jest": "^26.0.13",
-    "@types/node": "^22.10.5",
-    "@vitejs/plugin-react": "^4.3.4",
     "jest": "^26.4.2",
+    "paths.macro": "^3.0.1",
     "react": "^17.0.2",
     "react-is": "^16.13.1",
+    "rollup": "3.29.4",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-typescript2": "^0.36.0",
     "storybook": "^8.6.4",
-    "ts-jest": "^26.3.0",
-    "typescript": "^5.7.3",
-    "vite": "^6.0.7",
-    "vite-plugin-dts": "^4.5.4"
+    "ts-jest": "^26.3.0"
   },
   "lint-staged": {
     "*.{ts,tsx}": [

package/README.md

@@ -1,77 +0,0 @@
-# Quantum Design System UI Package
-
-A comprehensive React component library built with TypeScript, providing atoms, molecules, and organisms for consistent UI development.
-
-## Build Process
-
-This package uses a hybrid build approach combining Vite and TypeScript compiler for optimal output:
-
-### Build Command
-```bash
-yarn build
-```
-
-### What happens during build:
-
-1. **Vite Build** (`vite build`)
-   - Bundles source code into optimized ES modules
-   - Processes and bundles CSS
-   - Handles tree-shaking and code splitting
-   - Outputs: `dist/index.mjs` and `dist/index.css`
-
-2. **TypeScript Declaration Generation** (`tsc --project tsconfig.build.json`)
-   - Generates TypeScript declaration files (`.d.ts`)
-   - Uses specialized `tsconfig.build.json` config
-   - Excludes stories, tests, and spec files
-   - Outputs: `dist/index.d.ts` + `dist/src/**/*.d.ts` (417+ files)
-
-### Build Outputs
-- `dist/index.mjs` - ES module bundle (~813KB)
-- `dist/index.css` - Compiled styles (~14KB)
-- `dist/index.d.ts` - Main TypeScript declarations entry point
-- `dist/src/**/*.d.ts` - Individual component type definitions
-
-### Configuration Files
-- `vite.config.ts` - Vite bundling configuration
-- `tsconfig.build.json` - TypeScript declaration generation config
-- `package.json` - Points to `dist/index.d.ts` via `typings` field
-
-This approach ensures consumers get both optimized runtime code and complete TypeScript support.
-
-## Development Commands
-
-- `yarn build` - Build the library using Vite + generate TypeScript declarations
-- `yarn test` - Run Jest tests
-- `yarn test --testNamePattern="ComponentName"` - Run specific test
-- `yarn lint` - ESLint src directory
-- `yarn prettier` - Format code with Prettier
-- `yarn storybook` - Start Storybook dev server
-
-## Package Structure
-
-```
-src/
-├── atoms/          # Basic building blocks (Button, Input, etc.)
-├── molecules/      # Composed components (Card, Dialog, etc.)
-├── organisms/      # Complex components (Accordion, Navigation, etc.)
-├── hooks/          # Custom React hooks
-├── theme/          # Theme configuration and tokens
-├── helpers/        # Utility functions and HOCs
-└── exports/        # Barrel files for clean imports
-```
-
-## Usage
-
-```typescript
-import { Button, Card, Dialog } from '@sendoutcards/quantum-design-ui'
-import '@sendoutcards/quantum-design-ui/dist/index.css'
-
-// Components come with full TypeScript support
-<Button variant="primary" size="large">
-  Click me
-</Button>
-```
-
-## TypeScript Support
-
-This package provides comprehensive TypeScript definitions for all components, hooks, and utilities. The build process generates over 400 declaration files to ensure complete type safety and IntelliSense support in your IDE.

package/dist/index.css

@@ -1 +0,0 @@
-body{font-family:var(--qds-font-body, "Inter", sans-serif);font-size:16px;line-height:1.65}*{box-sizing:border-box}h1,h2,h3,h4,h5,h6{font-family:var(--qds-font-heading, "Inter", sans-serif)}button{font-family:var(--qds-font-body, "Inter", sans-serif)}.quantum-theme-root{font-size:16px}.quantum-theme-root>div{font-size:inherit}.avatar-container{position:relative;border-radius:15%;background-color:var(--avatar-background-color);background-position:center;background-size:cover;border:var(--avatar-border-width) solid var(--avatar-border-color);box-shadow:var(--avatar-box-shadow);display:flex;justify-content:center;align-items:center}.avatar-container.size-xSmall{height:var(--avatar-size-xSmall);width:var(--avatar-size-xSmall);min-width:var(--avatar-size-xSmall)}.avatar-container.size-small{height:var(--avatar-size-small);width:var(--avatar-size-small);min-width:var(--avatar-size-small)}.avatar-container.size-medium{height:var(--avatar-size-medium);width:var(--avatar-size-medium);min-width:var(--avatar-size-medium)}.avatar-container.size-large{height:var(--avatar-size-large);width:var(--avatar-size-large);min-width:var(--avatar-size-large)}.avatar-container.size-xLarge{height:var(--avatar-size-xLarge);width:var(--avatar-size-xLarge);min-width:var(--avatar-size-xLarge)}.avatar-container.has-image{background-image:var(--avatar-image-url)}.avatar-container.no-image{background-image:linear-gradient(var(--avatar-default-accent),var(--avatar-default-accent))}.active-bubble{position:absolute;bottom:0;background:var(--avatar-bubble-background);border-radius:50%;z-index:1;box-shadow:var(--avatar-box-shadow)}.active-bubble.size-xSmall{width:var(--avatar-bubble-size-xSmall);height:var(--avatar-bubble-size-xSmall);left:var(--avatar-bubble-left-xSmall)}.active-bubble.size-small{width:var(--avatar-bubble-size-small);height:var(--avatar-bubble-size-small);left:var(--avatar-bubble-left-small)}.active-bubble.size-medium{width:var(--avatar-bubble-size-medium);height:var(--avatar-bubble-size-medium);left:var(--avatar-bubble-left-medium)}.active-bubble.size-large{width:var(--avatar-bubble-size-large);height:var(--avatar-bubble-size-large);left:var(--avatar-bubble-left-large)}.active-bubble.size-xLarge{width:var(--avatar-bubble-size-xLarge);height:var(--avatar-bubble-size-xLarge);left:var(--avatar-bubble-left-xLarge)}.checkmark-container{position:absolute;bottom:0}.checkmark-container.size-xSmall{left:var(--avatar-bubble-left-xSmall)}.checkmark-container.size-small{left:var(--avatar-bubble-left-small)}.checkmark-container.size-medium{left:var(--avatar-bubble-left-medium)}.checkmark-container.size-large{left:var(--avatar-bubble-left-large)}.checkmark-container.size-xLarge{left:var(--avatar-bubble-left-xLarge)}.tooltip{position:relative;left:0;background:var(--tooltip-background);transform:var(--tooltip-transform)}.tooltip:after,.tooltip:before{border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.tooltip:after{border-color:#fefefe00;border-width:8px}.tooltip:before{border-color:#e3e6e800;border-width:9px}.tooltip.direction-left:after,.tooltip.direction-left:before{right:100%;top:50%}.tooltip.direction-left:after{border-right-color:var(--tooltip-background);margin-top:-8px}.tooltip.direction-left:before{border-right-color:var(--tooltip-background);margin-top:-9px}.tooltip.direction-right:after,.tooltip.direction-right:before{left:100%;top:50%}.tooltip.direction-right:after{border-left-color:var(--tooltip-background);margin-top:-8px}.tooltip.direction-right:before{border-left-color:var(--tooltip-background);margin-top:-9px}.tooltip.direction-top:after,.tooltip.direction-top:before{bottom:100%;left:50%}.tooltip.direction-top:after{border-bottom-color:var(--tooltip-background);margin-left:-8px}.tooltip.direction-top:before{border-bottom-color:var(--tooltip-background);margin-left:-9px}.tooltip.direction-bottom:after,.tooltip.direction-bottom:before{top:100%;left:50%}.tooltip.direction-bottom:after{border-top-color:var(--tooltip-background);margin-left:-8px}.tooltip.direction-bottom:before{border-top-color:var(--tooltip-background);margin-left:-9px}.tooltip.reposition{transform:translateY(-125%)}.button-base:disabled{opacity:.35;cursor:not-allowed}.button-base:disabled:hover{box-shadow:none!important;transform:translateY(0)!important}.button-hover:hover{transform:translateY(3px);box-shadow:none;transition:transform .2s,box-shadow .2s ease-out}.info-block-container{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;white-space:nowrap}.info-block-container span{display:block}.info-block-caption-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;white-space:nowrap}.info-block-caption-container span{display:block}.icon-link-container{width:100%}.icon-link-icon-container{display:flex;justify-content:center;align-items:center}.icon-link-title-container{white-space:nowrap}.icon-link-container.disabled,.icon-link-container.disabled .icon-link-icon-container,.icon-link-container.disabled .icon-link-title-container{cursor:not-allowed}.grid{display:grid;width:100%;grid-gap:var(--grid-gap);grid-template-columns:repeat(auto-fit,minmax(var(--grid-column-size),1fr));grid-auto-rows:minmax(var(--grid-row-size),auto);grid-auto-flow:var(--grid-auto-flow);max-width:var(--grid-max-width);height:var(--grid-height);overflow:var(--grid-overflow)}.grid-item{width:100%;height:100%;display:flex;align-items:flex-end;grid-column-end:span var(--grid-item-col-span);grid-row-end:span var(--grid-item-row-span);grid-column-start:var(--grid-item-col-start);grid-row-start:var(--grid-item-row-start);aspect-ratio:var(--grid-item-aspect-ratio)}.progress-container{display:flex;align-items:center;width:100%}.progress-bar{height:8px;position:relative;width:100%;margin-right:8px}.progress-fill{background:var(--progress-background);width:var(--progress-width);height:100%;position:relative;border-radius:inherit}.progress-bar.complete .progress-fill{background:#4cd964}.progress-bar.incomplete .progress-fill{background:linear-gradient(to right,#4cd964,#5ac8fa,#007aff,#34aadc)}.navigation-link:hover~.navigation-tooltip{opacity:1}.sheet-wrapper{position:var(--sheet-wrapper-position);bottom:0;left:0;z-index:var(--sheet-wrapper-z-index)}.sheet{width:var(--sheet-width-base);display:flex;background-color:var(--sheet-background-color);place-items:start center;place-content:start center;flex-direction:column;border-radius:var(--sheet-border-radius-base);box-shadow:var(--sheet-box-shadow);position:var(--sheet-position);bottom:var(--sheet-bottom);z-index:3;order:var(--sheet-order-base)}@media screen and (min-width: 768px){.sheet{border-radius:var(--sheet-border-radius-small)}}@media screen and (min-width: 1024px){.sheet{width:var(--sheet-width-medium);order:var(--sheet-order-medium);border-radius:var(--sheet-border-radius-medium)}}.sheet-drag-bar{transform:translate(-50%)}.sheet-child-wrapper::-webkit-scrollbar{width:0px;background:transparent}.menu-container{max-width:246px;overflow:hidden}.input-container input::placeholder{color:#6f8394;transition:color .3s ease-in;font-family:inherit}.input-container input:invalid{box-shadow:none}.input-container input[type=number]{-moz-appearance:textfield}.input-container input::-webkit-outer-spin-button,.input-container input::-webkit-inner-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}.input-container:focus-within input::placeholder{color:transparent;transition:color .3s}.input-container:focus-within span{transform:scale(1.1);transition:transform .3s}.input-container .number-input-buttons svg{opacity:var(--button-opacity, 1)}.dialogContainer{min-width:308px;display:flex;justify-content:flex-start;flex-direction:column;position:relative}.select-container{display:flex;justify-content:center;flex-direction:column;width:100%;position:relative}.select-body{cursor:pointer;display:flex;align-items:center;justify-content:space-between;height:var(--select-height);width:var(--select-width);padding:0 8px;border:none;outline:none;overflow:hidden}.select-body:focus{border:solid 1.5px var(--focus-color)!important}.select-dropdown-contents{max-height:var(--dropdown-max-height);overflow-y:auto;position:absolute;left:var(--dropdown-left);transform:var(--dropdown-transform);scrollbar-width:var(--scrollbar-width)}.active-option{width:100%;height:100%;display:flex;align-items:center;justify-content:var(--active-option-justify)}.active-option .hide-on-active{display:none}.option{width:100%;padding:12px;border:none;display:flex;justify-content:var(--option-justify);outline:none;align-items:center;cursor:pointer;font-size:inherit}.transitionContainer{width:100%}.checkbox-container input[type=checkbox]{opacity:0}.checkbox-container label{display:flex;align-items:center;cursor:pointer}.checkbox-box:hover{background:var(--checkbox-unchecked-bg)}.checkbox-container input[type=checkbox]:checked+label .checkbox-box{border:var(--checkbox-border-width) solid var(--checkbox-checked-color);transition:box-shadow .3s .05s,border .3s .14s}.checkbox-container input[type=checkbox]:checked+label .checkbox-box .checkbox-inner{background:var(--checkbox-checked-color);transform:scale(1.1);transition:all .3s}.hideScrollbar::-webkit-scrollbar{display:none}.showScrollbar::-webkit-scrollbar{display:auto}.image-container p{position:relative;z-index:100}.image-css>div{position:absolute;width:100%;height:100%;margin:0;padding:0;border-radius:inherit}.image-background:before{content:"";background:inherit;width:100%;height:100%;display:block;z-index:1;position:absolute;top:16px;transform:scale(.9);filter:blur(10px);opacity:.88;border-radius:inherit}.image-background:after{content:"";background:inherit;width:100%;height:100%;display:block;z-index:2;position:absolute;border-radius:inherit}.filter-overlay:before{content:"";border-radius:inherit;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none;mix-blend-mode:var(--filter-mix-blend-mode, initial);opacity:var(--filter-opacity, initial);background:var(--filter-background, initial)}.close-button-container:hover{transform:translate(-2px,2px)!important;transition:transform .25s ease}@media screen and (max-width: var(--small-breakpoint, 768px)){.close-button-container{border-radius:11px!important;top:var(--small-top, 7px)!important;right:var(--small-right, 7px)!important}}.slider-bar{width:100%;height:6px;border-radius:var(--slider-border-radius);background:var(--slider-background-color);overflow:hidden}.slider-progress{height:100%;width:100%}.slider-progress.disabled{opacity:.5}.slider-progress.enabled{opacity:1}.slider-handle{width:var(--slider-handle-size);height:var(--slider-handle-size);background:var(--slider-handle-color);border-radius:var(--slider-handle-radius);box-shadow:var(--slider-handle-shadow);position:absolute;left:0}.slider-handle.enabled{cursor:pointer}.slider-handle.disabled{cursor:not-allowed}.table-container{display:grid}.table-row{display:grid;grid-template-columns:repeat(1,1fr)}.table-row.responsive{grid-template-columns:repeat(var(--table-columns),1fr)}.row-item{display:grid;align-items:center;width:100%;height:100%}.row-item.align-left{justify-items:start;padding:0 0 0 8px}.row-item.align-center{justify-items:center;padding:initial}.row-item.align-right{justify-items:end;padding:0 8px 0 0}@media (min-width: var(--breakpoint-small)){.table-row{grid-template-columns:repeat(var(--table-columns),1fr)}}.userCardContainer{display:flex;justify-content:flex-start;align-items:center}.userInfoContainer{padding-left:16px}.navigation-pill-cutout:before,.navigation-pill-cutout:after{content:" ";position:absolute;width:100vw;height:100%;background-color:#fff;top:30%;border-top:solid 2px #fff}.navigation-pill-cutout:before{right:100%;border-top-right-radius:24px}.navigation-pill-cutout:after{left:100%;border-top-left-radius:24px}.navigation-pill-item>div{height:100%}.expandedButtonContainer{margin-bottom:65px}@media (min-height: 600px){.expandedButtonContainer{margin-bottom:initial}}.awardCardContainer:hover>div:first-of-type{transform:scale(1.06);transition:transform .2s ease-in-out}.incremental{white-space:nowrap}.pin-form input[type=tel]::-webkit-inner-spin-button,.pin-form input[type=tel]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.phoneInputWrapper{width:100%;display:flex;flex-direction:column}.phoneInputContainer{display:flex;justify-content:center;align-items:center;width:100%;height:50px}.video-player{transition:all .5s cubic-bezier(0,.99,.67,1)}.video-player>iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;border-radius:inherit}.play-button{cursor:pointer;transition:all .5s cubic-bezier(0,.99,.67,1)}.play-button>div{transition:all .5s cubic-bezier(0,.99,.67,1)}.play-button:hover>div{transform:scale(1.28);transition:all .5s cubic-bezier(0,.99,.67,1)}.play-button:hover svg path{transition:all .5s cubic-bezier(0,.99,.67,1)}.iconContainer:hover{background:var(--icon-hover-bg)}.thumbnailContainer{scrollbar-width:none}.thumbnailContainer::-webkit-scrollbar{width:0;background:transparent}.ribbon{clip-path:inset(0);transform:rotate(45deg);right:-33px;top:12px;line-height:initial;text-align:center}.ribbon p{line-height:initial}.fillRuleWrapper{position:relative;background:#d4d4d4;cursor:pointer}.fillRuleWrapper:before{content:"";position:absolute;width:50%;height:50%;background:#a1a1a1;top:0;left:0;border-radius:50px 0 0}.fillRuleWrapper:after{content:"";position:absolute;width:50%;height:50%;background:#a1a1a1;bottom:0;right:0;border-radius:0 0 50px}.stickersContainer::-webkit-scrollbar{width:0;background:transparent}.wrapper{position:relative;height:100%;width:100%;overflow:hidden;cursor:pointer;display:flex}.container{position:absolute;left:0;height:100%;width:100%;border-radius:8px;display:flex;justify-content:space-between;align-items:center;padding:0 2rem;overflow:hidden}.upload{background:transparent;color:#eb417b;z-index:1;top:0;padding:0 2rem}.loading{background:#ff059f;color:#fff;z-index:2;top:-100%;position:relative;padding:0 2rem 0 3rem}.loadingBar{position:absolute;bottom:0;left:0;width:0%;height:3px;background:#fff}.done{background:#2abb8b;color:#fff;z-index:3;top:-100%;padding:0 2rem 0 3.5rem}.paperTypeCardContainer ::-webkit-scrollbar{width:0px;background:transparent}