npm - @plumile/ui - Versions diffs - 0.1.130 → 0.1.132 - Mend

@plumile/ui 0.1.130 → 0.1.132

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

Files changed (126) hide show

package/lib/esm/components/data-table/DataTable.css.js CHANGED Viewed

@@ -11,97 +11,97 @@ var t = e({
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
 }), n = "ysn8466 txvbqbi1f txvbqbs9r txvbqbusr", r = e({
-	defaultClassName: "ysn8469",
+	defaultClassName: "ysn846a",
 	variantClassNames: { kind: {
-		default: "ysn846a ysn8467 txvbqb1g5 txvbqb2et txvbqb8oi txvbqb577 txvbqb196f",
-		brandTable: "ysn846b ysn8468 txvbqb1933 txvbqb1g5 txvbqb2et txvbqb8oi txvbqb5dc"
+		default: "ysn846b ysn8468 ysn8467 txvbqb1g5 txvbqb2et txvbqb8oi txvbqb577 txvbqb196f",
+		brandTable: "ysn846c ysn8469 txvbqb1933 txvbqb1g5 txvbqb2et txvbqb8oi txvbqb5dc"
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
-}), i = "ysn846c txvbqbdrl txvbqb17w0 txvbqbe8", a = "var(--ysn846d)", o = "var(--ysn846e)", s = "var(--ysn846f)", c = "var(--ysn846g)", l = e({
-	defaultClassName: "ysn846h",
+}), i = "ysn846d txvbqbdrl txvbqb17w0 txvbqbe8", a = "var(--ysn846e)", o = "var(--ysn846f)", s = "var(--ysn846g)", c = "var(--ysn846h)", l = e({
+	defaultClassName: "ysn846i",
 	variantClassNames: { density: {
-		compact: "ysn846i",
-		default: "ysn846j",
-		comfortable: "ysn846k"
+		compact: "ysn846j",
+		default: "ysn846k",
+		comfortable: "ysn846l"
 	} },
 	defaultVariants: { density: "default" },
 	compoundVariants: []
 }), u = e({
-	defaultClassName: "ysn846p ysn846l txvbqbey txvbqbdr8 txvbqbf7y txvbqbff6 txvbqbusr txvbqb16g0 txvbqb18xk",
+	defaultClassName: "ysn846q ysn846m txvbqbey txvbqbdr8 txvbqbf7y txvbqbff6 txvbqbusr txvbqb16g0 txvbqb18xk",
 	variantClassNames: { kind: {
-		default: "ysn846q ysn846n ysn846m txvbqb19cb txvbqbfd0 txvbqbky5 txvbqb6a",
-		brandTable: "ysn846r ysn846o txvbqbynf txvbqbzl0 txvbqb10k1 txvbqbvw4 txvbqb19b9 txvbqbfdd txvbqb96 txvbqbkxf txvbqb6a txvbqb7br"
+		default: "ysn846r ysn846o ysn846n txvbqb19cb txvbqbfd0 txvbqbky5 txvbqb6a",
+		brandTable: "ysn846s ysn846p txvbqbynf txvbqbzl0 txvbqb10k1 txvbqbvw4 txvbqb19b9 txvbqbfdd txvbqb96 txvbqbkxf txvbqb6a txvbqb7br"
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
 }), d = e({
-	defaultClassName: "ysn846u ysn846s txvbqbdr8 txvbqbf6i",
+	defaultClassName: "ysn846v ysn846t txvbqbdr8 txvbqbf6i",
 	variantClassNames: { kind: {
-		default: "ysn846v",
-		brandTable: "ysn846w ysn846t txvbqb1933"
+		default: "ysn846w",
+		brandTable: "ysn846x ysn846u txvbqb1933"
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
-}), f = "ysn846y ysn846x txvbqbdxd txvbqbs9r", p = e({
-	defaultClassName: "ysn84614 ysn846z txvbqbe8 txvbqb2et txvbqb1g5 txvbqbdrl txvbqb7h txvbqb76 txvbqb7t",
+}), f = "ysn846z ysn846y txvbqbdxd txvbqbs9r", p = e({
+	defaultClassName: "ysn84615 ysn84610 txvbqbe8 txvbqb2et txvbqb1g5 txvbqbdrl txvbqb7h txvbqb76 txvbqb7t",
 	variantClassNames: { kind: {
-		default: "ysn84615 ysn84611 ysn84610 txvbqb196b txvbqb57x txvbqb8oi",
-		brandTable: "ysn84616 ysn84613 ysn84612 txvbqb1933 txvbqb5dc txvbqb8oi"
+		default: "ysn84616 ysn84612 ysn84611 txvbqb196b txvbqb57x txvbqb8oi",
+		brandTable: "ysn84617 ysn84614 ysn84613 txvbqb1933 txvbqb5dc txvbqb8oi"
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
 }), m = e({
-	defaultClassName: "ysn84619",
+	defaultClassName: "ysn8461a",
 	variantClassNames: { kind: {
-		default: "ysn8461a ysn84617 txvbqb196d",
-		brandTable: "ysn8461b ysn84618 txvbqb1933"
+		default: "ysn8461b ysn84618 txvbqb196d",
+		brandTable: "ysn8461c ysn84619 txvbqb1933"
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
 }), h = e({
-	defaultClassName: "ysn8461e",
+	defaultClassName: "ysn8461f",
 	variantClassNames: { kind: {
-		default: "ysn8461f ysn8461c txvbqb196b",
-		brandTable: "ysn8461g ysn8461d txvbqb1933"
+		default: "ysn8461g ysn8461d txvbqb196b",
+		brandTable: "ysn8461h ysn8461e txvbqb1933"
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
 }), g = e({
-	defaultClassName: "ysn8461l ysn8461h txvbqbey txvbqbdr8 txvbqbff6 txvbqbt9i txvbqbusr",
+	defaultClassName: "ysn8461m ysn8461i txvbqbey txvbqbdr8 txvbqbff6 txvbqbt9i txvbqbusr",
 	variantClassNames: { kind: {
-		default: "ysn8461m ysn8461j ysn8461i txvbqb19cb",
-		brandTable: "ysn8461n ysn8461k txvbqbynf txvbqbzl0 txvbqb10k1 txvbqbvw4 txvbqb19c9 txvbqbfd0 txvbqb9j txvbqb7br"
+		default: "ysn8461n ysn8461k ysn8461j txvbqb19cb",
+		brandTable: "ysn8461o ysn8461l txvbqbynf txvbqbzl0 txvbqb10k1 txvbqbvw4 txvbqb19c9 txvbqbfd0 txvbqb9j txvbqb7br"
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
-}), _ = "ysn8461o txvbqbfd0 txvbqb19c9", v = "ysn8461p txvbqb19c9", y = "ysn8461q", b = e({
-	defaultClassName: "ysn8461u",
+}), _ = "ysn8461p txvbqbfd0 txvbqb19c9", v = "ysn8461q txvbqb19c9", y = "ysn8461r", b = e({
+	defaultClassName: "ysn8461v",
 	variantClassNames: { align: {
-		left: "ysn8461v ysn8461r txvbqbjuf txvbqb16ex",
-		center: "ysn8461w ysn8461s txvbqbjtp txvbqb16fa",
-		right: "ysn8461x ysn8461t txvbqbju2 txvbqb16fn"
+		left: "ysn8461w ysn8461s txvbqbjuf txvbqb16ex",
+		center: "ysn8461x ysn8461t txvbqbjtp txvbqb16fa",
+		right: "ysn8461y ysn8461u txvbqbju2 txvbqb16fn"
 	} },
 	defaultVariants: {},
 	compoundVariants: []
 }), x = e({
-	defaultClassName: "ysn8461y",
+	defaultClassName: "ysn8461z",
 	variantClassNames: { state: {
-		default: "ysn8461z",
-		selected: "ysn84620",
-		muted: "ysn84621",
-		danger: "ysn84622"
+		default: "ysn84620",
+		selected: "ysn84621",
+		muted: "ysn84622",
+		danger: "ysn84623"
 	} },
 	defaultVariants: {},
 	compoundVariants: []
-}), S = "ysn84623", C = "ysn84624 txvbqb9w txvbqb19cb txvbqb16fa", w = e({
-	defaultClassName: "ysn84625",
+}), S = "ysn84624", C = "ysn84625 txvbqb9w txvbqb19cb txvbqb16fa", w = e({
+	defaultClassName: "ysn84626",
 	variantClassNames: { minVisibleAt: {
-		sm: "ysn84626",
-		md: "ysn84627",
-		lg: "ysn84628",
-		xl: "ysn84629",
-		xxl: "ysn8462a"
+		sm: "ysn84627",
+		md: "ysn84628",
+		lg: "ysn84629",
+		xl: "ysn8462a",
+		xxl: "ysn8462b"
 	} },
 	defaultVariants: {},
 	compoundVariants: []

package/lib/esm/components/data-table/DataTable.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTable.css.js","names":[],"sources":["../../../../src/components/data-table/DataTable.css.ts"],"sourcesContent":["import {\n style,\n createVar,\n fallbackVar,\n type StyleRule,\n} from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { vars } from '../../theme/themeContract.js';\n\nimport {\n DATA_TABLE_BREAKPOINT_ENTRIES,\n type DataTableBreakpoint,\n} from './tableBreakpoints.js';\nimport { sprinkles } from '../../theme/sprinkles.css.js';\n\nexport const container = recipe({\n base: sprinkles({\n display: 'flex',\n flexDirection: 'column',\n width: 'full',\n containerType: 'inline-size',\n }),\n variants: {\n kind: {\n default: sprinkles({\n backgroundColor: 'surface',\n borderColor: 'border',\n borderRadius: 'lg',\n borderStyle: 'solid',\n borderWidth: 'default',\n overflowX: 'auto',\n overflowY: 'hidden',\n }),\n brandTable: sprinkles({\n backgroundColor: 'transparent',\n borderRadius: 'none',\n borderStyle: 'none',\n borderWidth: 0,\n overflow: 'visible',\n }),\n },\n },\n defaultVariants: {\n kind: 'default',\n },\n});\n\nexport const containerWithContainedBody = sprinkles({\n height: 'full',\n minHeight: 0,\n overflow: 'hidden',\n});\n\nexport const header = recipe({\n variants: {\n kind: {\n default: sprinkles({\n borderWidth: 0,\n borderStyle: 'solid',\n borderBottomWidth: 'default',\n borderBottomColor: 'borderSubtle',\n backgroundColor: 'surfaceMuted',\n }),\n brandTable: sprinkles({\n backgroundColor: 'transparent',\n borderWidth: 0,\n borderStyle: 'solid',\n borderBottomWidth: 'default',\n borderBottomColor: 'brandSecondaryOrange-20',\n }),\n },\n },\n defaultVariants: {\n kind: 'default',\n },\n});\n\nexport const headerRow = sprinkles({\n display: 'grid',\n width: 'full',\n alignItems: 'stretch',\n});\n\nexport const tableCellPaddingVar = createVar();\nexport const tableCellFontSizeVar = createVar();\nexport const tableEmptyRowPaddingVar = createVar();\nexport const tableRowMinHeightVar = createVar();\n\nexport const densityRecipe = recipe({\n variants: {\n density: {\n compact: {\n vars: {\n [tableCellPaddingVar]: `${vars.spacing[2]} ${vars.spacing[3]}`,\n [tableCellFontSizeVar]: vars.fontSize.sm,\n [tableEmptyRowPaddingVar]: `${vars.spacing[4]} ${vars.spacing[3]}`,\n [tableRowMinHeightVar]: vars.spacing[9],\n },\n },\n default: {\n vars: {\n [tableCellPaddingVar]: `${vars.spacing[3]} ${vars.spacing[4]}`,\n [tableCellFontSizeVar]: vars.fontSize.sm,\n [tableEmptyRowPaddingVar]: `${vars.spacing[6]} ${vars.spacing[4]}`,\n [tableRowMinHeightVar]: vars.spacing[10],\n },\n },\n comfortable: {\n vars: {\n [tableCellPaddingVar]: `${vars.spacing[3]} ${vars.spacing[5]}`,\n [tableCellFontSizeVar]: vars.fontSize.base,\n [tableEmptyRowPaddingVar]: `${vars.spacing[7]} ${vars.spacing[5]}`,\n [tableRowMinHeightVar]: vars.spacing[12],\n },\n },\n },\n },\n defaultVariants: {\n density: 'default',\n },\n});\n\nexport const headerCell = recipe({\n base: sprinkles({\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n gap: 2,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }),\n variants: {\n kind: {\n default: style([\n sprinkles({\n color: 'textSecondary',\n fontWeight: 'semibold',\n letterSpacing: 'capsNarrow',\n textTransform: 'uppercase',\n }),\n {\n padding: fallbackVar(\n tableCellPaddingVar,\n `${vars.spacing[3]} ${vars.spacing[4]}`,\n ),\n fontSize: fallbackVar(tableCellFontSizeVar, vars.fontSize.sm),\n minHeight: fallbackVar(tableRowMinHeightVar, vars.spacing[10]),\n selectors: {\n '&:last-child': {\n borderRight: 'none',\n },\n },\n },\n ]),\n brandTable: sprinkles({\n color: 'black-300',\n fontWeight: 'bold',\n fontSize: 'xs',\n letterSpacing: 'caps',\n textTransform: 'uppercase',\n paddingY: 4,\n paddingX: 0,\n borderRightWidth: 0,\n }),\n },\n },\n defaultVariants: {\n kind: 'default',\n },\n});\n\nexport const body = recipe({\n base: sprinkles({\n display: 'flex',\n flexDirection: 'column',\n }),\n variants: {\n kind: {\n default: {},\n brandTable: sprinkles({\n backgroundColor: 'transparent',\n }),\n },\n },\n defaultVariants: {\n kind: 'default',\n },\n});\n\nexport const bodyContained = style([\n sprinkles({\n flex: 1,\n minHeight: 0,\n }),\n {\n overflowY: 'auto',\n scrollbarWidth: 'thin',\n scrollbarColor: `${vars.colors.border} transparent`,\n },\n]);\n\nexport const row = recipe({\n base: sprinkles({\n alignItems: 'stretch',\n borderStyle: 'solid',\n borderWidth: 0,\n display: 'grid',\n transitionProperty: 'colors',\n transitionDuration: 150,\n transitionTimingFunction: 'ease',\n }),\n variants: {\n kind: {\n default: style([\n sprinkles({\n backgroundColor: 'surface',\n borderBottomColor: 'borderLight',\n borderBottomWidth: 'default',\n }),\n {\n selectors: {\n '&:last-child': {\n borderBottomWidth: 0,\n },\n '&:hover': {\n backgroundColor: vars.colors.surfaceMuted,\n },\n },\n },\n ]),\n brandTable: style([\n sprinkles({\n backgroundColor: 'transparent',\n borderBottomColor: 'brandSecondaryOrange-20',\n borderBottomWidth: 'default',\n }),\n {\n selectors: {\n '&:last-child': {\n borderBottomWidth: 0,\n },\n '&:hover': {\n backgroundColor: 'transparent',\n },\n },\n },\n ]),\n },\n },\n defaultVariants: {\n kind: 'default',\n },\n});\n\nexport const rowEven = recipe({\n variants: {\n kind: {\n default: sprinkles({\n backgroundColor: 'surfaceSecondary',\n }),\n brandTable: sprinkles({\n backgroundColor: 'transparent',\n }),\n },\n },\n defaultVariants: {\n kind: 'default',\n },\n});\n\nexport const rowOdd = recipe({\n variants: {\n kind: {\n default: sprinkles({\n backgroundColor: 'surface',\n }),\n brandTable: sprinkles({\n backgroundColor: 'transparent',\n }),\n },\n },\n defaultVariants: {\n kind: 'default',\n },\n});\n\nexport const cell = recipe({\n base: sprinkles({\n alignItems: 'center',\n display: 'flex',\n gap: 2,\n minWidth: 0,\n overflow: 'hidden',\n }),\n variants: {\n kind: {\n default: style([\n sprinkles({\n color: 'textSecondary',\n }),\n {\n padding: fallbackVar(\n tableCellPaddingVar,\n `${vars.spacing[3]} ${vars.spacing[4]}`,\n ),\n fontSize: fallbackVar(tableCellFontSizeVar, vars.fontSize.sm),\n minHeight: fallbackVar(tableRowMinHeightVar, vars.spacing[10]),\n selectors: {\n '&:last-child': {\n borderRight: 'none',\n },\n },\n },\n ]),\n brandTable: sprinkles({\n color: 'text',\n fontWeight: 'semibold',\n fontSize: 'sm',\n paddingY: 4,\n paddingX: 0,\n borderRightWidth: 0,\n }),\n },\n },\n defaultVariants: {\n kind: 'default',\n },\n});\n\nexport const primaryCell = sprinkles({\n fontWeight: 'semibold',\n color: 'text',\n});\n\nexport const primaryHeaderCell = sprinkles({\n color: 'text',\n});\n\nexport const stickyHeader = style({\n position: 'sticky',\n top: 0,\n zIndex: vars.zIndex[10],\n});\n\nexport const alignRecipe = recipe({\n variants: {\n align: {\n left: sprinkles({\n justifyContent: 'flex-start',\n textAlign: 'left',\n }),\n center: sprinkles({\n justifyContent: 'center',\n textAlign: 'center',\n }),\n right: sprinkles({\n justifyContent: 'flex-end',\n textAlign: 'end',\n }),\n },\n },\n});\n\nexport const rowStateRecipe = recipe({\n variants: {\n state: {\n default: {},\n selected: {\n backgroundColor: vars.colors.primaryLight,\n },\n muted: {\n opacity: 0.72,\n },\n danger: {\n backgroundColor: vars.colors['red-50'],\n },\n },\n },\n});\n\nexport const emptyRow = style({\n padding: fallbackVar(\n tableEmptyRowPaddingVar,\n `${vars.spacing[6]} ${vars.spacing[4]}`,\n ),\n});\n\nexport const emptyCell = sprinkles({\n fontSize: 'base',\n color: 'textSecondary',\n textAlign: 'center',\n});\n\nconst hideBelowMap: Record<DataTableBreakpoint, StyleRule> = {} as Record<\n DataTableBreakpoint,\n StyleRule\n>;\n\nDATA_TABLE_BREAKPOINT_ENTRIES.forEach(([breakpoint, width]) => {\n hideBelowMap[breakpoint] = {\n '@container': {\n [`(max-width: ${width - 0.5}px)`]: {\n visibility: 'hidden',\n opacity: 0,\n pointerEvents: 'none',\n paddingInline: 0,\n paddingBlock: 0,\n borderRight: 'none',\n overflow: 'hidden',\n },\n },\n };\n});\n\nexport const hideBelowRecipe = recipe({\n variants: {\n minVisibleAt: hideBelowMap,\n },\n});\n"],"mappings":""}
1	+ {"version":3,"file":"DataTable.css.js","names":[],"sources":["../../../../src/components/data-table/DataTable.css.ts"],"sourcesContent":["import {\n style,\n createVar,\n fallbackVar,\n type StyleRule,\n} from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { vars } from '../../theme/themeContract.css.js';\n\nimport {\n DATA_TABLE_BREAKPOINT_ENTRIES,\n type DataTableBreakpoint,\n} from './tableBreakpoints.js';\nimport { sprinkles } from '../../theme/sprinkles.css.js';\n\nexport const container = recipe({\n base: sprinkles({\n display: 'flex',\n flexDirection: 'column',\n width: 'full',\n containerType: 'inline-size',\n }),\n variants: {\n kind: {\n default: sprinkles({\n backgroundColor: 'surface',\n borderColor: 'border',\n borderRadius: 'lg',\n borderStyle: 'solid',\n borderWidth: 'default',\n overflowX: 'auto',\n overflowY: 'hidden',\n }),\n brandTable: sprinkles({\n backgroundColor: 'transparent',\n borderRadius: 'none',\n borderStyle: 'none',\n borderWidth: 0,\n overflow: 'visible',\n }),\n },\n },\n defaultVariants: {\n kind: 'default',\n },\n});\n\nexport const containerWithContainedBody = sprinkles({\n height: 'full',\n minHeight: 0,\n overflow: 'hidden',\n});\n\nexport const header = recipe({\n variants: {\n kind: {\n default: style([\n sprinkles({\n borderWidth: 0,\n borderStyle: 'solid',\n borderBottomWidth: 'default',\n borderBottomColor: 'borderSubtle',\n backgroundColor: 'surfaceMuted',\n }),\n {\n backgroundImage: `linear-gradient(90deg, color-mix(in srgb, ${vars.colors.primaryLight} 55%, transparent), transparent 64%)`,\n },\n ]),\n brandTable: sprinkles({\n backgroundColor: 'transparent',\n borderWidth: 0,\n borderStyle: 'solid',\n borderBottomWidth: 'default',\n borderBottomColor: 'brandSecondaryOrange-20',\n }),\n },\n },\n defaultVariants: {\n kind: 'default',\n },\n});\n\nexport const headerRow = sprinkles({\n display: 'grid',\n width: 'full',\n alignItems: 'stretch',\n});\n\nexport const tableCellPaddingVar = createVar();\nexport const tableCellFontSizeVar = createVar();\nexport const tableEmptyRowPaddingVar = createVar();\nexport const tableRowMinHeightVar = createVar();\n\nexport const densityRecipe = recipe({\n variants: {\n density: {\n compact: {\n vars: {\n [tableCellPaddingVar]: `${vars.spacing[2]} ${vars.spacing[3]}`,\n [tableCellFontSizeVar]: vars.fontSize.sm,\n [tableEmptyRowPaddingVar]: `${vars.spacing[4]} ${vars.spacing[3]}`,\n [tableRowMinHeightVar]: vars.spacing[9],\n },\n },\n default: {\n vars: {\n [tableCellPaddingVar]: `${vars.spacing[3]} ${vars.spacing[4]}`,\n [tableCellFontSizeVar]: vars.fontSize.sm,\n [tableEmptyRowPaddingVar]: `${vars.spacing[6]} ${vars.spacing[4]}`,\n [tableRowMinHeightVar]: vars.spacing[10],\n },\n },\n comfortable: {\n vars: {\n [tableCellPaddingVar]: `${vars.spacing[3]} ${vars.spacing[5]}`,\n [tableCellFontSizeVar]: vars.fontSize.base,\n [tableEmptyRowPaddingVar]: `${vars.spacing[7]} ${vars.spacing[5]}`,\n [tableRowMinHeightVar]: vars.spacing[12],\n },\n },\n },\n },\n defaultVariants: {\n density: 'default',\n },\n});\n\nexport const headerCell = recipe({\n base: sprinkles({\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n gap: 2,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }),\n variants: {\n kind: {\n default: style([\n sprinkles({\n color: 'textSecondary',\n fontWeight: 'semibold',\n letterSpacing: 'capsNarrow',\n textTransform: 'uppercase',\n }),\n {\n padding: fallbackVar(\n tableCellPaddingVar,\n `${vars.spacing[3]} ${vars.spacing[4]}`,\n ),\n fontSize: fallbackVar(tableCellFontSizeVar, vars.fontSize.sm),\n minHeight: fallbackVar(tableRowMinHeightVar, vars.spacing[10]),\n selectors: {\n '&:last-child': {\n borderRight: 'none',\n },\n },\n },\n ]),\n brandTable: sprinkles({\n color: 'black-300',\n fontWeight: 'bold',\n fontSize: 'xs',\n letterSpacing: 'caps',\n textTransform: 'uppercase',\n paddingY: 4,\n paddingX: 0,\n borderRightWidth: 0,\n }),\n },\n },\n defaultVariants: {\n kind: 'default',\n },\n});\n\nexport const body = recipe({\n base: sprinkles({\n display: 'flex',\n flexDirection: 'column',\n }),\n variants: {\n kind: {\n default: {},\n brandTable: sprinkles({\n backgroundColor: 'transparent',\n }),\n },\n },\n defaultVariants: {\n kind: 'default',\n },\n});\n\nexport const bodyContained = style([\n sprinkles({\n flex: 1,\n minHeight: 0,\n }),\n {\n overflowY: 'auto',\n scrollbarWidth: 'thin',\n scrollbarColor: `${vars.colors.border} transparent`,\n },\n]);\n\nexport const row = recipe({\n base: sprinkles({\n alignItems: 'stretch',\n borderStyle: 'solid',\n borderWidth: 0,\n display: 'grid',\n transitionProperty: 'colors',\n transitionDuration: 150,\n transitionTimingFunction: 'ease',\n }),\n variants: {\n kind: {\n default: style([\n sprinkles({\n backgroundColor: 'surface',\n borderBottomColor: 'borderLight',\n borderBottomWidth: 'default',\n }),\n {\n selectors: {\n '&:last-child': {\n borderBottomWidth: 0,\n },\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${vars.colors.surfaceMuted} 84%, ${vars.colors.primaryLight})`,\n },\n },\n },\n ]),\n brandTable: style([\n sprinkles({\n backgroundColor: 'transparent',\n borderBottomColor: 'brandSecondaryOrange-20',\n borderBottomWidth: 'default',\n }),\n {\n selectors: {\n '&:last-child': {\n borderBottomWidth: 0,\n },\n '&:hover': {\n backgroundColor: 'transparent',\n },\n },\n },\n ]),\n },\n },\n defaultVariants: {\n kind: 'default',\n },\n});\n\nexport const rowEven = recipe({\n variants: {\n kind: {\n default: sprinkles({\n backgroundColor: 'surfaceSecondary',\n }),\n brandTable: sprinkles({\n backgroundColor: 'transparent',\n }),\n },\n },\n defaultVariants: {\n kind: 'default',\n },\n});\n\nexport const rowOdd = recipe({\n variants: {\n kind: {\n default: sprinkles({\n backgroundColor: 'surface',\n }),\n brandTable: sprinkles({\n backgroundColor: 'transparent',\n }),\n },\n },\n defaultVariants: {\n kind: 'default',\n },\n});\n\nexport const cell = recipe({\n base: sprinkles({\n alignItems: 'center',\n display: 'flex',\n gap: 2,\n minWidth: 0,\n overflow: 'hidden',\n }),\n variants: {\n kind: {\n default: style([\n sprinkles({\n color: 'textSecondary',\n }),\n {\n padding: fallbackVar(\n tableCellPaddingVar,\n `${vars.spacing[3]} ${vars.spacing[4]}`,\n ),\n fontSize: fallbackVar(tableCellFontSizeVar, vars.fontSize.sm),\n minHeight: fallbackVar(tableRowMinHeightVar, vars.spacing[10]),\n selectors: {\n '&:last-child': {\n borderRight: 'none',\n },\n },\n },\n ]),\n brandTable: sprinkles({\n color: 'text',\n fontWeight: 'semibold',\n fontSize: 'sm',\n paddingY: 4,\n paddingX: 0,\n borderRightWidth: 0,\n }),\n },\n },\n defaultVariants: {\n kind: 'default',\n },\n});\n\nexport const primaryCell = sprinkles({\n fontWeight: 'semibold',\n color: 'text',\n});\n\nexport const primaryHeaderCell = sprinkles({\n color: 'text',\n});\n\nexport const stickyHeader = style({\n position: 'sticky',\n top: 0,\n zIndex: vars.zIndex[10],\n});\n\nexport const alignRecipe = recipe({\n variants: {\n align: {\n left: sprinkles({\n justifyContent: 'flex-start',\n textAlign: 'left',\n }),\n center: sprinkles({\n justifyContent: 'center',\n textAlign: 'center',\n }),\n right: sprinkles({\n justifyContent: 'flex-end',\n textAlign: 'end',\n }),\n },\n },\n});\n\nexport const rowStateRecipe = recipe({\n variants: {\n state: {\n default: {},\n selected: {\n backgroundColor: vars.colors.primaryLight,\n },\n muted: {\n opacity: 0.72,\n },\n danger: {\n backgroundColor: vars.colors['red-50'],\n },\n },\n },\n});\n\nexport const emptyRow = style({\n padding: fallbackVar(\n tableEmptyRowPaddingVar,\n `${vars.spacing[6]} ${vars.spacing[4]}`,\n ),\n});\n\nexport const emptyCell = sprinkles({\n fontSize: 'base',\n color: 'textSecondary',\n textAlign: 'center',\n});\n\nconst hideBelowMap: Record<DataTableBreakpoint, StyleRule> = {} as Record<\n DataTableBreakpoint,\n StyleRule\n>;\n\nDATA_TABLE_BREAKPOINT_ENTRIES.forEach(([breakpoint, width]) => {\n hideBelowMap[breakpoint] = {\n '@container': {\n [`(max-width: ${width - 0.5}px)`]: {\n visibility: 'hidden',\n opacity: 0,\n pointerEvents: 'none',\n paddingInline: 0,\n paddingBlock: 0,\n borderRight: 'none',\n overflow: 'hidden',\n },\n },\n };\n});\n\nexport const hideBelowRecipe = recipe({\n variants: {\n minVisibleAt: hideBelowMap,\n },\n});\n"],"mappings":""}

package/lib/esm/components/data-table/ResponsiveRecordList.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 /* empty css                                       */
 /* empty css                                */
 /* empty css                                     */
-/* empty css                                    */
+/* empty css                                         */
 /* empty css                               */
 /* empty css                                            */
 /* empty css                                            */

package/lib/esm/components/data-table/ResponsiveRecordList.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ResponsiveRecordList.css.js","names":[],"sources":["../../../../src/components/data-table/ResponsiveRecordList.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { adminSurfaceRecipe } from '../../admin/theme/adminSurface.css.js';\nimport { sprinkles } from '../../theme/sprinkles.css.js';\nimport { vars } from '../../theme/themeContract.js';\n\nconst TABLET_MEDIA_QUERY = 'screen and (max-width: 767px)';\n\nexport const tableOnly = style({\n '@media': {\n [TABLET_MEDIA_QUERY]: {\n display: 'none',\n },\n },\n});\n\nexport const cardsOnly = style([\n sprinkles({\n display: 'none',\n }),\n {\n '@media': {\n [TABLET_MEDIA_QUERY]: {\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n },\n },\n },\n]);\n\nexport const containedRoot = sprinkles({\n display: 'flex',\n flexDirection: 'column',\n height: 'full',\n minHeight: 0,\n});\n\nexport const cardsViewport = style([\n sprinkles({\n flex: 1,\n minHeight: 0,\n width: 'full',\n }),\n {\n overflowY: 'auto',\n scrollbarWidth: 'thin',\n scrollbarColor: `${vars.colors.border} transparent`,\n },\n]);\n\nexport const forceHidden = sprinkles({\n display: 'none',\n});\n\nexport const cards = sprinkles({\n display: 'flex',\n flexDirection: 'column',\n gap: 2,\n width: 'full',\n});\n\nexport const card = recipe({\n base: style([\n sprinkles({\n display: 'flex',\n flexDirection: 'column',\n gap: 3,\n minWidth: 0,\n }),\n adminSurfaceRecipe({\n level: 'panel',\n radius: 'md',\n border: 'subtle',\n elevation: 'subtle',\n padding: 'md',\n }),\n {\n selectors: {\n '&:hover': {\n borderColor: vars.colors.border,\n boxShadow: vars.boxShadow.md,\n },\n },\n },\n ]),\n variants: {\n density: {\n compact: sprinkles({\n gap: 2,\n padding: 3,\n }),\n default: sprinkles({\n gap: 3,\n padding: 4,\n }),\n comfortable: sprinkles({\n gap: 3,\n padding: 4,\n }),\n },\n },\n defaultVariants: {\n density: 'compact',\n },\n});\n\nexport const cardHeader = sprinkles({\n alignItems: 'flex-start',\n display: 'flex',\n gap: 3,\n justifyContent: 'space-between',\n minWidth: 0,\n});\n\nexport const cardTitleGroup = sprinkles({\n display: 'flex',\n flexDirection: 'column',\n gap: 1,\n minWidth: 0,\n});\n\nexport const cardTitle = sprinkles({\n color: 'text',\n fontSize: 'sm',\n fontWeight: 'semibold',\n lineHeight: 'tight',\n minWidth: 0,\n overflowWrap: 'anywhere',\n});\n\nexport const cardSubtitle = sprinkles({\n color: 'textSecondary',\n fontSize: 'xs',\n lineHeight: 'tight',\n minWidth: 0,\n overflowWrap: 'anywhere',\n});\n\nexport const cardMetaGrid = sprinkles({\n display: 'grid',\n gap: 2,\n gridTemplateColumns: {\n base: 2,\n sm: 1,\n },\n});\n\nexport const cardMetaItem = sprinkles({\n display: 'flex',\n flexDirection: 'column',\n gap: 0.5,\n minWidth: 0,\n});\n\nexport const cardMetaLabel = sprinkles({\n color: 'textMuted',\n fontSize: 'xs',\n fontWeight: 'semibold',\n letterSpacing: 'caps',\n textTransform: 'uppercase',\n});\n\nexport const cardMetaValue = sprinkles({\n color: 'text',\n fontSize: 'sm',\n minWidth: 0,\n overflowWrap: 'anywhere',\n});\n\nexport const cardBadges = sprinkles({\n alignItems: 'center',\n display: 'flex',\n flexWrap: 'wrap',\n gap: 2,\n});\n\nexport const cardActions = sprinkles({\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n justifyContent: 'flex-end',\n});\n"],"mappings":""}
1	+ {"version":3,"file":"ResponsiveRecordList.css.js","names":[],"sources":["../../../../src/components/data-table/ResponsiveRecordList.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { adminSurfaceRecipe } from '../../admin/theme/adminSurface.css.js';\nimport { sprinkles } from '../../theme/sprinkles.css.js';\nimport { vars } from '../../theme/themeContract.css.js';\n\nconst TABLET_MEDIA_QUERY = 'screen and (max-width: 767px)';\n\nexport const tableOnly = style({\n '@media': {\n [TABLET_MEDIA_QUERY]: {\n display: 'none',\n },\n },\n});\n\nexport const cardsOnly = style([\n sprinkles({\n display: 'none',\n }),\n {\n '@media': {\n [TABLET_MEDIA_QUERY]: {\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n },\n },\n },\n]);\n\nexport const containedRoot = sprinkles({\n display: 'flex',\n flexDirection: 'column',\n height: 'full',\n minHeight: 0,\n});\n\nexport const cardsViewport = style([\n sprinkles({\n flex: 1,\n minHeight: 0,\n width: 'full',\n }),\n {\n overflowY: 'auto',\n scrollbarWidth: 'thin',\n scrollbarColor: `${vars.colors.border} transparent`,\n },\n]);\n\nexport const forceHidden = sprinkles({\n display: 'none',\n});\n\nexport const cards = sprinkles({\n display: 'flex',\n flexDirection: 'column',\n gap: 2,\n width: 'full',\n});\n\nexport const card = recipe({\n base: style([\n sprinkles({\n display: 'flex',\n flexDirection: 'column',\n gap: 3,\n minWidth: 0,\n }),\n adminSurfaceRecipe({\n level: 'panel',\n radius: 'md',\n border: 'subtle',\n elevation: 'subtle',\n padding: 'md',\n }),\n {\n selectors: {\n '&:hover': {\n borderColor: vars.colors.border,\n boxShadow: vars.boxShadow.md,\n },\n },\n },\n ]),\n variants: {\n density: {\n compact: sprinkles({\n gap: 2,\n padding: 3,\n }),\n default: sprinkles({\n gap: 3,\n padding: 4,\n }),\n comfortable: sprinkles({\n gap: 3,\n padding: 4,\n }),\n },\n },\n defaultVariants: {\n density: 'compact',\n },\n});\n\nexport const cardHeader = sprinkles({\n alignItems: 'flex-start',\n display: 'flex',\n gap: 3,\n justifyContent: 'space-between',\n minWidth: 0,\n});\n\nexport const cardTitleGroup = sprinkles({\n display: 'flex',\n flexDirection: 'column',\n gap: 1,\n minWidth: 0,\n});\n\nexport const cardTitle = sprinkles({\n color: 'text',\n fontSize: 'sm',\n fontWeight: 'semibold',\n lineHeight: 'tight',\n minWidth: 0,\n overflowWrap: 'anywhere',\n});\n\nexport const cardSubtitle = sprinkles({\n color: 'textSecondary',\n fontSize: 'xs',\n lineHeight: 'tight',\n minWidth: 0,\n overflowWrap: 'anywhere',\n});\n\nexport const cardMetaGrid = sprinkles({\n display: 'grid',\n gap: 2,\n gridTemplateColumns: {\n base: 2,\n sm: 1,\n },\n});\n\nexport const cardMetaItem = sprinkles({\n display: 'flex',\n flexDirection: 'column',\n gap: 0.5,\n minWidth: 0,\n});\n\nexport const cardMetaLabel = sprinkles({\n color: 'textMuted',\n fontSize: 'xs',\n fontWeight: 'semibold',\n letterSpacing: 'caps',\n textTransform: 'uppercase',\n});\n\nexport const cardMetaValue = sprinkles({\n color: 'text',\n fontSize: 'sm',\n minWidth: 0,\n overflowWrap: 'anywhere',\n});\n\nexport const cardBadges = sprinkles({\n alignItems: 'center',\n display: 'flex',\n flexWrap: 'wrap',\n gap: 2,\n});\n\nexport const cardActions = sprinkles({\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n justifyContent: 'flex-end',\n});\n"],"mappings":""}

package/lib/esm/components/data-table/VirtualizedConnectionTable.js CHANGED Viewed

@@ -175,7 +175,7 @@ var x = (e) => e == null ? null : d({ minVisibleAt: e }), S = (e) => {
 		children: /* @__PURE__ */ y("div", {
 			role: "cell",
 			children: me ?? /* @__PURE__ */ y("div", {
-				className: e("ysn84624 txvbqb9w txvbqb19cb txvbqb16fa", w?.emptyCell),
+				className: e("ysn84625 txvbqb9w txvbqb19cb txvbqb16fa", w?.emptyCell),
 				children: A("common.table.empty")
 			})
 		})

package/lib/esm/components/layout/PageShell.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PageShell.css.js","names":[],"sources":["../../../../src/components/layout/PageShell.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../theme/sprinkles.css.js';\nimport { vars } from '../../theme/themeContract.js';\n\nconst MOBILE_MEDIA_QUERY = 'screen and (max-width: 1023px)';\n\nexport const shell = sprinkles({\n display: 'flex',\n width: 'full',\n backgroundColor: 'background',\n backgroundImage: 'pageShellSurface',\n});\n\nexport const page = sprinkles({\n paddingLeft: 2,\n paddingRight: 2,\n paddingTop: 2,\n paddingBottom: 2,\n height: {\n base: 'screen',\n max1023: 'auto',\n },\n flex: 1,\n minWidth: 0,\n});\n\nexport const pageContained = sprinkles({\n height: 'screen',\n minHeight: 0,\n overflow: 'hidden',\n});\n\nexport const pageWithSidePanel = sprinkles({\n display: 'flex',\n alignItems: 'stretch',\n gap: {\n base: 0,\n max1023: 3,\n },\n minWidth: 0,\n flexDirection: {\n base: 'row',\n max1023: 'column',\n },\n height: {\n base: 'full',\n max1023: 'auto',\n },\n});\n\nexport const sidebarColumn = sprinkles({\n position: 'sticky',\n top: 0,\n height: 'screen',\n flexShrink: 0,\n display: 'flex',\n overflow: 'hidden',\n});\n\nexport const sidebarColumnMobile = style({\n '@media': {\n [MOBILE_MEDIA_QUERY]: {\n position: 'fixed',\n top: 0,\n left: 0,\n bottom: 0,\n width: '20rem',\n maxWidth: '85vw',\n transform: 'translateX(-100%)',\n transitionProperty: 'transform',\n transitionDuration: vars.transitionDuration[200],\n transitionTimingFunction: vars.transitionTimingFunction.ease,\n zIndex: vars.zIndex[30],\n backgroundColor: vars.colors.surface,\n borderRight: `1px solid ${vars.colors.borderSubtle}`,\n },\n },\n});\n\nexport const sidebarColumnMobileOpen = style({\n '@media': {\n [MOBILE_MEDIA_QUERY]: {\n transform: 'translateX(0)',\n },\n },\n});\n\nexport const sidebarInner = style([\n sprinkles({\n display: 'flex',\n height: 'full',\n }),\n {\n '@media': {\n [MOBILE_MEDIA_QUERY]: {\n paddingTop: '3.75rem',\n },\n },\n },\n]);\n\nexport const mobileSidebarBackdrop = style({\n display: 'none',\n '@media': {\n [MOBILE_MEDIA_QUERY]: {\n display: 'block',\n position: 'fixed',\n inset: 0,\n backgroundColor: 'rgba(15, 23, 42, 0.32)',\n opacity: 0,\n pointerEvents: 'none',\n transitionProperty: 'opacity',\n transitionDuration: vars.transitionDuration[200],\n transitionTimingFunction: vars.transitionTimingFunction.ease,\n zIndex: vars.zIndex[20],\n },\n },\n});\n\nexport const mobileSidebarBackdropOpen = style({\n '@media': {\n [MOBILE_MEDIA_QUERY]: {\n opacity: 1,\n pointerEvents: 'auto',\n },\n },\n});\n\nexport const mobileSidebarToggle = sprinkles({\n display: {\n base: 'none',\n max1023: 'inline-flex',\n },\n alignItems: 'center',\n justifyContent: 'center',\n width: 10,\n height: 10,\n borderRadius: 'lg',\n borderStyle: 'solid',\n borderWidth: 'default',\n borderColor: 'border',\n backgroundColor: 'surface',\n color: 'text',\n cursor: 'pointer',\n flexShrink: 0,\n});\n\nexport const desktopSidebarToggle = style([\n sprinkles({\n display: {\n base: 'inline-flex',\n max1023: 'none',\n },\n alignItems: 'center',\n justifyContent: 'center',\n width: 10,\n height: 10,\n borderRadius: 'lg',\n borderStyle: 'solid',\n borderWidth: 'default',\n borderColor: 'border',\n backgroundColor: 'surface',\n color: 'text',\n cursor: 'pointer',\n flexShrink: 0,\n transitionProperty: 'default',\n transitionDuration: 150,\n transitionTimingFunction: 'ease',\n }),\n {\n selectors: {\n '&:hover': {\n borderColor: vars.colors.primaryLight,\n backgroundColor: vars.colors.surfaceMuted,\n color: vars.colors.primary,\n },\n '&:focus-visible': {\n outline: `2px solid ${vars.colors.primary}`,\n outlineOffset: '2px',\n },\n },\n },\n]);\n\nexport const mobileSidebarClose = sprinkles({\n display: {\n base: 'none',\n max1023: 'inline-flex',\n },\n position: {\n base: 'static',\n max1023: 'absolute',\n },\n right: {\n base: 0,\n max1023: 3,\n },\n top: {\n base: 0,\n max1023: 3,\n },\n zIndex: 40,\n alignItems: 'center',\n justifyContent: 'center',\n width: 10,\n height: 10,\n borderRadius: 'lg',\n borderStyle: 'solid',\n borderWidth: 'default',\n borderColor: 'border',\n backgroundColor: 'surface',\n color: 'text',\n cursor: 'pointer',\n});\n\nexport const mainColumn = sprinkles({\n flex: 1,\n height: 'full',\n minWidth: 0,\n minHeight: 0,\n display: 'flex',\n flexDirection: 'column',\n backgroundColor: 'surface',\n overflow: 'hidden',\n borderRadius: 'lg',\n borderWidth: 'default',\n borderStyle: 'solid',\n borderColor: 'borderSubtle',\n boxShadow: 'inkSoft',\n});\n\nexport const mainColumnContained = sprinkles({\n minHeight: 0,\n overflow: 'hidden',\n});\n\nexport const mainColumnWithSidePanel = sprinkles({\n height: {\n base: 'full',\n max1023: 'auto',\n },\n});\n\nexport const sidePanel = sprinkles({\n display: 'flex',\n flexDirection: 'column',\n minHeight: 0,\n height: {\n base: 'full',\n max1023: 'auto',\n },\n});\n\nexport const sidePanelSurface = sprinkles({\n flex: 'none',\n backgroundColor: 'surface',\n borderRadius: 'xl',\n borderWidth: 'default',\n borderStyle: 'solid',\n borderColor: 'borderSubtle',\n});\n\nexport const sidePanelResizable = style({\n minWidth: '360px',\n maxWidth: '50vw',\n});\n\nexport const sidePanelResizer = style([\n sprinkles({\n alignSelf: 'stretch',\n backgroundColor: 'transparent',\n cursor: 'col-resize',\n flex: 'none',\n minWidth: 4,\n position: 'relative',\n width: 4,\n }),\n {\n selectors: {\n '&::after': {\n content: '',\n position: 'absolute',\n top: '50%',\n left: '50%',\n width: '4px',\n height: '96px',\n transform: 'translate(-50%, -50%)',\n borderRadius: vars.borderRadius.full,\n backgroundColor: vars.colors.border,\n boxShadow: vars.boxShadow.sm,\n transitionProperty: 'default',\n transitionDuration: vars.transitionDuration[120],\n transitionTimingFunction: vars.transitionTimingFunction.ease,\n },\n '&:hover::after, &[data-active=\"true\"]::after': {\n backgroundColor: vars.colors.primary,\n boxShadow: `0 0 0 1px ${vars.colors.primaryLight}`,\n },\n '&:focus-visible': {\n outline: `2px solid ${vars.colors.primary}`,\n outlineOffset: '2px',\n },\n },\n },\n]);\n\nexport const sidePanelResizerHiddenOnMobile = sprinkles({\n display: {\n base: 'block',\n max1023: 'none',\n },\n});\n\nexport const header = sprinkles({\n position: 'sticky',\n top: 0,\n zIndex: 10,\n display: 'flex',\n flexDirection: 'column',\n gap: 3,\n backgroundColor: 'surface',\n borderWidth: 0,\n borderStyle: 'solid',\n borderBottomWidth: 'default',\n borderBottomColor: 'borderSubtle',\n paddingLeft: 5,\n paddingRight: 5,\n paddingBottom: 2,\n paddingTop: 3,\n});\n\nexport const headerRow = sprinkles({\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'flex-start',\n justifyContent: 'space-between',\n gap: 4,\n width: 'full',\n});\n\nexport const headerLeading = sprinkles({\n display: 'flex',\n alignItems: 'center',\n gap: 3,\n flex: 1,\n minWidth: 0,\n});\n\nexport const breadcrumbNav = sprinkles({\n display: 'flex',\n flexDirection: 'column',\n gap: 2,\n minWidth: 0,\n});\n\nexport const breadcrumbList = sprinkles({\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n columnGap: 2,\n rowGap: 1,\n listStyleType: 'none',\n margin: 0,\n padding: 0,\n color: 'textSecondary',\n fontSize: 'xs',\n});\n\nexport const breadcrumbItem = sprinkles({\n display: 'flex',\n alignItems: 'center',\n gap: 1,\n maxWidth: '12rem',\n});\n\nexport const breadcrumbLink = style([\n sprinkles({\n color: 'text',\n textDecoration: 'none',\n fontWeight: 'medium',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }),\n {\n selectors: {\n '&:hover': {\n color: vars.colors['blue-600'],\n },\n },\n },\n]);\n\nexport const breadcrumbCurrent = sprinkles({\n color: 'text',\n fontWeight: 'semibold',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n});\n\nexport const breadcrumbSeparator = sprinkles({\n color: 'borderLight',\n fontSize: 'xs',\n});\n\nexport const actionGroup = sprinkles({\n display: 'flex',\n flexWrap: 'wrap',\n gap: 2,\n justifyContent: 'flex-end',\n});\n\nexport const secondaryAction = sprinkles({\n display: 'inline-flex',\n});\n\nexport const tabsRow = sprinkles({\n width: 'full',\n display: 'flex',\n flexWrap: 'wrap',\n gap: 2,\n});\n\nconst tabBase = style([\n sprinkles({\n alignItems: 'center',\n backgroundColor: 'surfaceMuted',\n borderRadius: 'lg',\n color: 'textSecondary',\n display: 'inline-flex',\n fontSize: 'sm',\n fontWeight: 'medium',\n paddingBlock: 1.5,\n paddingInline: 3,\n textDecoration: 'none',\n transitionProperty: 'default',\n transitionDuration: 150,\n transitionTimingFunction: 'ease',\n }),\n {\n selectors: {\n '&:hover': {\n color: vars.colors.text,\n },\n },\n },\n]);\n\nexport const tabRecipe = recipe({\n base: tabBase,\n variants: {\n state: {\n default: {},\n active: sprinkles({\n backgroundColor: 'blue-500',\n color: 'white',\n boxShadow: 'sm',\n }),\n },\n mode: {\n link: {},\n static: sprinkles({\n cursor: 'default',\n }),\n },\n },\n defaultVariants: {\n state: 'default',\n mode: 'link',\n },\n});\n\nexport const content = sprinkles({\n flex: 1,\n minHeight: 0,\n display: 'flex',\n flexDirection: 'column',\n overflow: 'auto',\n padding: {\n base: 4,\n max1023: 3,\n },\n});\n\nexport const contentContained = sprinkles({\n overflow: 'hidden',\n minHeight: 0,\n});\n"],"mappings":""}
1	+ {"version":3,"file":"PageShell.css.js","names":[],"sources":["../../../../src/components/layout/PageShell.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../theme/sprinkles.css.js';\nimport { vars } from '../../theme/themeContract.css.js';\n\nconst MOBILE_MEDIA_QUERY = 'screen and (max-width: 1023px)';\n\nexport const shell = sprinkles({\n display: 'flex',\n width: 'full',\n backgroundColor: 'background',\n backgroundImage: 'pageShellSurface',\n});\n\nexport const page = sprinkles({\n paddingLeft: 2,\n paddingRight: 2,\n paddingTop: 2,\n paddingBottom: 2,\n height: {\n base: 'screen',\n max1023: 'auto',\n },\n flex: 1,\n minWidth: 0,\n});\n\nexport const pageContained = sprinkles({\n height: 'screen',\n minHeight: 0,\n overflow: 'hidden',\n});\n\nexport const pageWithSidePanel = sprinkles({\n display: 'flex',\n alignItems: 'stretch',\n gap: {\n base: 0,\n max1023: 3,\n },\n minWidth: 0,\n flexDirection: {\n base: 'row',\n max1023: 'column',\n },\n height: {\n base: 'full',\n max1023: 'auto',\n },\n});\n\nexport const sidebarColumn = sprinkles({\n position: 'sticky',\n top: 0,\n height: 'screen',\n flexShrink: 0,\n display: 'flex',\n overflow: 'hidden',\n});\n\nexport const sidebarColumnMobile = style({\n '@media': {\n [MOBILE_MEDIA_QUERY]: {\n position: 'fixed',\n top: 0,\n left: 0,\n bottom: 0,\n width: '20rem',\n maxWidth: '85vw',\n transform: 'translateX(-100%)',\n transitionProperty: 'transform',\n transitionDuration: vars.transitionDuration[200],\n transitionTimingFunction: vars.transitionTimingFunction.ease,\n zIndex: vars.zIndex[30],\n backgroundColor: vars.colors.surface,\n borderRight: `1px solid ${vars.colors.borderSubtle}`,\n },\n },\n});\n\nexport const sidebarColumnMobileOpen = style({\n '@media': {\n [MOBILE_MEDIA_QUERY]: {\n transform: 'translateX(0)',\n },\n },\n});\n\nexport const sidebarInner = style([\n sprinkles({\n display: 'flex',\n height: 'full',\n }),\n {\n '@media': {\n [MOBILE_MEDIA_QUERY]: {\n paddingTop: '3.75rem',\n },\n },\n },\n]);\n\nexport const mobileSidebarBackdrop = style({\n display: 'none',\n '@media': {\n [MOBILE_MEDIA_QUERY]: {\n display: 'block',\n position: 'fixed',\n inset: 0,\n backgroundColor: 'rgba(15, 23, 42, 0.32)',\n opacity: 0,\n pointerEvents: 'none',\n transitionProperty: 'opacity',\n transitionDuration: vars.transitionDuration[200],\n transitionTimingFunction: vars.transitionTimingFunction.ease,\n zIndex: vars.zIndex[20],\n },\n },\n});\n\nexport const mobileSidebarBackdropOpen = style({\n '@media': {\n [MOBILE_MEDIA_QUERY]: {\n opacity: 1,\n pointerEvents: 'auto',\n },\n },\n});\n\nexport const mobileSidebarToggle = sprinkles({\n display: {\n base: 'none',\n max1023: 'inline-flex',\n },\n alignItems: 'center',\n justifyContent: 'center',\n width: 10,\n height: 10,\n borderRadius: 'lg',\n borderStyle: 'solid',\n borderWidth: 'default',\n borderColor: 'border',\n backgroundColor: 'surface',\n color: 'text',\n cursor: 'pointer',\n flexShrink: 0,\n});\n\nexport const desktopSidebarToggle = style([\n sprinkles({\n display: {\n base: 'inline-flex',\n max1023: 'none',\n },\n alignItems: 'center',\n justifyContent: 'center',\n width: 10,\n height: 10,\n borderRadius: 'lg',\n borderStyle: 'solid',\n borderWidth: 'default',\n borderColor: 'border',\n backgroundColor: 'surface',\n color: 'text',\n cursor: 'pointer',\n flexShrink: 0,\n transitionProperty: 'default',\n transitionDuration: 150,\n transitionTimingFunction: 'ease',\n }),\n {\n selectors: {\n '&:hover': {\n borderColor: vars.colors.primaryLight,\n backgroundColor: vars.colors.surfaceMuted,\n color: vars.colors.primary,\n },\n '&:focus-visible': {\n outline: `2px solid ${vars.colors.primary}`,\n outlineOffset: '2px',\n },\n },\n },\n]);\n\nexport const mobileSidebarClose = sprinkles({\n display: {\n base: 'none',\n max1023: 'inline-flex',\n },\n position: {\n base: 'static',\n max1023: 'absolute',\n },\n right: {\n base: 0,\n max1023: 3,\n },\n top: {\n base: 0,\n max1023: 3,\n },\n zIndex: 40,\n alignItems: 'center',\n justifyContent: 'center',\n width: 10,\n height: 10,\n borderRadius: 'lg',\n borderStyle: 'solid',\n borderWidth: 'default',\n borderColor: 'border',\n backgroundColor: 'surface',\n color: 'text',\n cursor: 'pointer',\n});\n\nexport const mainColumn = sprinkles({\n flex: 1,\n height: 'full',\n minWidth: 0,\n minHeight: 0,\n display: 'flex',\n flexDirection: 'column',\n backgroundColor: 'surface',\n overflow: 'hidden',\n borderRadius: 'lg',\n borderWidth: 'default',\n borderStyle: 'solid',\n borderColor: 'borderSubtle',\n boxShadow: 'inkSoft',\n});\n\nexport const mainColumnContained = sprinkles({\n minHeight: 0,\n overflow: 'hidden',\n});\n\nexport const mainColumnWithSidePanel = sprinkles({\n height: {\n base: 'full',\n max1023: 'auto',\n },\n});\n\nexport const sidePanel = sprinkles({\n display: 'flex',\n flexDirection: 'column',\n minHeight: 0,\n height: {\n base: 'full',\n max1023: 'auto',\n },\n});\n\nexport const sidePanelSurface = sprinkles({\n flex: 'none',\n backgroundColor: 'surface',\n borderRadius: 'xl',\n borderWidth: 'default',\n borderStyle: 'solid',\n borderColor: 'borderSubtle',\n});\n\nexport const sidePanelResizable = style({\n minWidth: '360px',\n maxWidth: '50vw',\n});\n\nexport const sidePanelResizer = style([\n sprinkles({\n alignSelf: 'stretch',\n backgroundColor: 'transparent',\n cursor: 'col-resize',\n flex: 'none',\n minWidth: 4,\n position: 'relative',\n width: 4,\n }),\n {\n selectors: {\n '&::after': {\n content: '',\n position: 'absolute',\n top: '50%',\n left: '50%',\n width: '4px',\n height: '96px',\n transform: 'translate(-50%, -50%)',\n borderRadius: vars.borderRadius.full,\n backgroundColor: vars.colors.border,\n boxShadow: vars.boxShadow.sm,\n transitionProperty: 'default',\n transitionDuration: vars.transitionDuration[120],\n transitionTimingFunction: vars.transitionTimingFunction.ease,\n },\n '&:hover::after, &[data-active=\"true\"]::after': {\n backgroundColor: vars.colors.primary,\n boxShadow: `0 0 0 1px ${vars.colors.primaryLight}`,\n },\n '&:focus-visible': {\n outline: `2px solid ${vars.colors.primary}`,\n outlineOffset: '2px',\n },\n },\n },\n]);\n\nexport const sidePanelResizerHiddenOnMobile = sprinkles({\n display: {\n base: 'block',\n max1023: 'none',\n },\n});\n\nexport const header = sprinkles({\n position: 'sticky',\n top: 0,\n zIndex: 10,\n display: 'flex',\n flexDirection: 'column',\n gap: 3,\n backgroundColor: 'surface',\n borderWidth: 0,\n borderStyle: 'solid',\n borderBottomWidth: 'default',\n borderBottomColor: 'borderSubtle',\n paddingLeft: 5,\n paddingRight: 5,\n paddingBottom: 2,\n paddingTop: 3,\n});\n\nexport const headerRow = sprinkles({\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'flex-start',\n justifyContent: 'space-between',\n gap: 4,\n width: 'full',\n});\n\nexport const headerLeading = sprinkles({\n display: 'flex',\n alignItems: 'center',\n gap: 3,\n flex: 1,\n minWidth: 0,\n});\n\nexport const breadcrumbNav = sprinkles({\n display: 'flex',\n flexDirection: 'column',\n gap: 2,\n minWidth: 0,\n});\n\nexport const breadcrumbList = sprinkles({\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n columnGap: 2,\n rowGap: 1,\n listStyleType: 'none',\n margin: 0,\n padding: 0,\n color: 'textSecondary',\n fontSize: 'xs',\n});\n\nexport const breadcrumbItem = sprinkles({\n display: 'flex',\n alignItems: 'center',\n gap: 1,\n maxWidth: '12rem',\n});\n\nexport const breadcrumbLink = style([\n sprinkles({\n color: 'text',\n textDecoration: 'none',\n fontWeight: 'medium',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }),\n {\n selectors: {\n '&:hover': {\n color: vars.colors['blue-600'],\n },\n },\n },\n]);\n\nexport const breadcrumbCurrent = sprinkles({\n color: 'text',\n fontWeight: 'semibold',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n});\n\nexport const breadcrumbSeparator = sprinkles({\n color: 'borderLight',\n fontSize: 'xs',\n});\n\nexport const actionGroup = sprinkles({\n display: 'flex',\n flexWrap: 'wrap',\n gap: 2,\n justifyContent: 'flex-end',\n});\n\nexport const secondaryAction = sprinkles({\n display: 'inline-flex',\n});\n\nexport const tabsRow = sprinkles({\n width: 'full',\n display: 'flex',\n flexWrap: 'wrap',\n gap: 2,\n});\n\nconst tabBase = style([\n sprinkles({\n alignItems: 'center',\n backgroundColor: 'surfaceMuted',\n borderRadius: 'lg',\n color: 'textSecondary',\n display: 'inline-flex',\n fontSize: 'sm',\n fontWeight: 'medium',\n paddingBlock: 1.5,\n paddingInline: 3,\n textDecoration: 'none',\n transitionProperty: 'default',\n transitionDuration: 150,\n transitionTimingFunction: 'ease',\n }),\n {\n selectors: {\n '&:hover': {\n color: vars.colors.text,\n },\n },\n },\n]);\n\nexport const tabRecipe = recipe({\n base: tabBase,\n variants: {\n state: {\n default: {},\n active: sprinkles({\n backgroundColor: 'blue-500',\n color: 'white',\n boxShadow: 'sm',\n }),\n },\n mode: {\n link: {},\n static: sprinkles({\n cursor: 'default',\n }),\n },\n },\n defaultVariants: {\n state: 'default',\n mode: 'link',\n },\n});\n\nexport const content = sprinkles({\n flex: 1,\n minHeight: 0,\n display: 'flex',\n flexDirection: 'column',\n overflow: 'auto',\n padding: {\n base: 4,\n max1023: 3,\n },\n});\n\nexport const contentContained = sprinkles({\n overflow: 'hidden',\n minHeight: 0,\n});\n"],"mappings":""}

package/lib/esm/components/media/imagePreviewModal.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"imagePreviewModal.css.js","names":[],"sources":["../../../../src/components/media/imagePreviewModal.css.ts"],"sourcesContent":["import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../theme/sprinkles.css.js';\nimport { vars } from '../../theme/themeContract.js';\n\nexport const previewButton = recipe({\n base: [\n sprinkles({\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: 'lg',\n overflow: 'hidden',\n borderWidth: 'default',\n borderStyle: 'solid',\n borderColor: 'border',\n backgroundColor: 'white',\n cursor: 'pointer',\n padding: 0,\n }),\n {\n selectors: {\n '&:focus-visible': {\n outline: 'none',\n boxShadow: `0 0 0 2px ${vars.colors.primaryLight}`,\n },\n },\n },\n ],\n variants: {\n size: {\n sm: sprinkles({ width: 24, height: 24 }),\n md: sprinkles({ width: 32, height: 32 }),\n lg: sprinkles({ width: 40, height: 40 }),\n },\n },\n defaultVariants: {\n size: 'md',\n },\n});\n\nexport type PreviewButtonVariants = RecipeVariants<typeof previewButton>;\nexport type PreviewSize = 'sm' \| 'md' \| 'lg';\n\nexport const previewImage = sprinkles({\n display: 'block',\n width: 'full',\n height: 'full',\n objectFit: 'cover',\n});\n\nexport const modalBody = sprinkles({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n});\n\nexport const modalImage = sprinkles({\n display: 'block',\n maxWidth: 'full',\n maxHeight: '70vh',\n objectFit: 'contain',\n});\n"],"mappings":""}
1	+ {"version":3,"file":"imagePreviewModal.css.js","names":[],"sources":["../../../../src/components/media/imagePreviewModal.css.ts"],"sourcesContent":["import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../theme/sprinkles.css.js';\nimport { vars } from '../../theme/themeContract.css.js';\n\nexport const previewButton = recipe({\n base: [\n sprinkles({\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: 'lg',\n overflow: 'hidden',\n borderWidth: 'default',\n borderStyle: 'solid',\n borderColor: 'border',\n backgroundColor: 'white',\n cursor: 'pointer',\n padding: 0,\n }),\n {\n selectors: {\n '&:focus-visible': {\n outline: 'none',\n boxShadow: `0 0 0 2px ${vars.colors.primaryLight}`,\n },\n },\n },\n ],\n variants: {\n size: {\n sm: sprinkles({ width: 24, height: 24 }),\n md: sprinkles({ width: 32, height: 32 }),\n lg: sprinkles({ width: 40, height: 40 }),\n },\n },\n defaultVariants: {\n size: 'md',\n },\n});\n\nexport type PreviewButtonVariants = RecipeVariants<typeof previewButton>;\nexport type PreviewSize = 'sm' \| 'md' \| 'lg';\n\nexport const previewImage = sprinkles({\n display: 'block',\n width: 'full',\n height: 'full',\n objectFit: 'cover',\n});\n\nexport const modalBody = sprinkles({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n});\n\nexport const modalImage = sprinkles({\n display: 'block',\n maxWidth: 'full',\n maxHeight: '70vh',\n objectFit: 'contain',\n});\n"],"mappings":""}

package/lib/esm/components/routing/routePendingBar.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"routePendingBar.css.js","names":[],"sources":["../../../../src/components/routing/routePendingBar.css.ts"],"sourcesContent":["import { style, keyframes } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../theme/sprinkles.css.js';\nimport { vars } from '../../theme/themeContract.js';\n\nconst slide = keyframes({\n '0%': { transform: 'translateX(-120%)' },\n '60%': { transform: 'translateX(30%)' },\n '100%': { transform: 'translateX(120%)' },\n});\n\nexport const root = style([\n sprinkles({\n backgroundColor: 'surfaceMuted',\n position: 'fixed',\n top: 0,\n left: 0,\n overflow: 'hidden',\n pointerEvents: 'none',\n width: 'full',\n zIndex: 50,\n }),\n {\n height: '3px',\n },\n]);\n\nexport const bar = style([\n sprinkles({\n height: 'full',\n width: '2/5',\n }),\n {\n background: `linear-gradient(90deg, ${vars.colors.primaryLight} 0%, ${vars.colors.primary} 60%, ${vars.colors.primaryLight} 100%)`,\n animation: `${slide} 1.1s ease-in-out infinite`,\n },\n]);\n"],"mappings":""}
1	+ {"version":3,"file":"routePendingBar.css.js","names":[],"sources":["../../../../src/components/routing/routePendingBar.css.ts"],"sourcesContent":["import { style, keyframes } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../theme/sprinkles.css.js';\nimport { vars } from '../../theme/themeContract.css.js';\n\nconst slide = keyframes({\n '0%': { transform: 'translateX(-120%)' },\n '60%': { transform: 'translateX(30%)' },\n '100%': { transform: 'translateX(120%)' },\n});\n\nexport const root = style([\n sprinkles({\n backgroundColor: 'surfaceMuted',\n position: 'fixed',\n top: 0,\n left: 0,\n overflow: 'hidden',\n pointerEvents: 'none',\n width: 'full',\n zIndex: 50,\n }),\n {\n height: '3px',\n },\n]);\n\nexport const bar = style([\n sprinkles({\n height: 'full',\n width: '2/5',\n }),\n {\n background: `linear-gradient(90deg, ${vars.colors.primaryLight} 0%, ${vars.colors.primary} 60%, ${vars.colors.primaryLight} 100%)`,\n animation: `${slide} 1.1s ease-in-out infinite`,\n },\n]);\n"],"mappings":""}

package/lib/esm/components/select/SimpleSelect.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SimpleSelect.css.js","names":[],"sources":["../../../../src/components/select/SimpleSelect.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles, stateSprinkles } from '../../theme/sprinkles.css.js';\nimport {\n brandFocusRing,\n controlFocusRing,\n disabledControl,\n errorControlFocusRing,\n} from '../../theme/styleRecipes.css.js';\nimport { vars } from '../../theme/themeContract.js';\n\nexport const container = recipe({\n base: sprinkles({\n position: 'relative',\n }),\n variants: {\n fullWidth: {\n true: sprinkles({ width: 'full' }),\n false: sprinkles({ width: 'auto' }),\n },\n },\n defaultVariants: {\n fullWidth: true,\n },\n});\n\nexport const label = sprinkles({\n display: 'block',\n marginBottom: 2,\n fontSize: 'xs',\n fontWeight: 'semibold',\n letterSpacing: 'wider',\n textTransform: 'uppercase',\n color: 'textMuted',\n});\n\nconst triggerBase = style([\n sprinkles({\n width: 'full',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n gap: 2,\n paddingY: 2,\n paddingX: 3,\n borderRadius: 'xl',\n fontSize: 'sm',\n fontWeight: 'semibold',\n textAlign: 'left',\n cursor: 'pointer',\n transitionProperty: 'colors',\n transitionDuration: 150,\n transitionTimingFunction: 'ease',\n }),\n disabledControl,\n]);\n\nconst defaultTrigger = style([\n sprinkles({\n borderWidth: 'px',\n borderStyle: 'solid',\n borderColor: 'border',\n backgroundColor: 'white',\n color: 'text',\n }),\n stateSprinkles({ outline: { focusVisible: 'none' } }),\n controlFocusRing,\n]);\n\nconst errorTrigger = style([\n sprinkles({\n borderWidth: 'px',\n borderStyle: 'solid',\n borderColor: 'error',\n backgroundColor: 'white',\n color: 'text',\n }),\n errorControlFocusRing,\n]);\n\nconst brandTrigger = style([\n sprinkles({\n color: 'brandWhite',\n borderWidth: 'default',\n borderStyle: 'solid',\n borderColor: 'brandPrimaryRed',\n backgroundImage: 'brandDiagonal',\n }),\n stateSprinkles({ filter: { hover: 'brightness98' } }),\n brandFocusRing,\n]);\n\nexport const trigger = recipe({\n base: triggerBase,\n variants: {\n variant: {\n default: defaultTrigger,\n brand: brandTrigger,\n },\n state: {\n default: {},\n error: errorTrigger,\n },\n size: {\n small: sprinkles({\n paddingY: 1,\n paddingX: 2,\n fontSize: 'sm',\n }),\n medium: sprinkles({\n paddingY: 2,\n paddingX: 3,\n fontSize: 'sm',\n }),\n large: sprinkles({\n paddingY: 3,\n paddingX: 4,\n fontSize: 'base',\n }),\n },\n },\n defaultVariants: {\n variant: 'default',\n state: 'default',\n size: 'medium',\n },\n compoundVariants: [\n {\n variants: {\n variant: 'brand',\n state: 'error',\n },\n style: brandTrigger,\n },\n ],\n});\n\nexport const triggerOpen = sprinkles({\n borderBottomLeftRadius: 'none',\n borderBottomRightRadius: 'none',\n});\n\nexport const valueText = sprinkles({\n flex: 1,\n minWidth: 0,\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n});\n\nexport const triggerIcon = sprinkles({\n display: 'grid',\n alignItems: 'center',\n justifyContent: 'center',\n width: 4,\n height: 4,\n color: 'textMuted',\n transitionProperty: 'default',\n transitionDuration: 150,\n transitionTimingFunction: 'ease',\n});\n\nexport const triggerIconOpen = sprinkles({\n rotate: 180,\n color: 'text',\n});\n\nexport const triggerIconBrand = sprinkles({\n color: 'brandWhite',\n});\n\nexport const menu = sprinkles({\n position: 'absolute',\n top: 'full',\n left: 0,\n right: 0,\n zIndex: 10,\n display: 'flex',\n flexDirection: 'column',\n gap: 1,\n padding: 1,\n borderRadius: 'xl',\n borderWidth: 'default',\n borderStyle: 'solid',\n borderColor: 'border',\n backgroundColor: 'white',\n boxShadow: 'lg',\n maxHeight: 72,\n overflowY: 'auto',\n});\n\nexport const menuOpen = sprinkles({\n borderTopLeftRadius: 'none',\n borderTopRightRadius: 'none',\n marginTop: '-px',\n});\n\nexport const optionButton = style([\n sprinkles({\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n gap: 1,\n width: 'full',\n borderWidth: 0,\n borderStyle: 'none',\n borderRadius: 'lg',\n backgroundColor: 'transparent',\n paddingY: 2,\n paddingX: 3,\n fontSize: 'sm',\n fontWeight: 'medium',\n color: 'text',\n textAlign: 'left',\n cursor: 'pointer',\n transitionProperty: 'colors',\n transitionDuration: 120,\n transitionTimingFunction: 'ease',\n }),\n {\n selectors: {\n '&:hover': {\n backgroundColor: vars.colors.surfaceSecondary,\n },\n '&:focus-visible': {\n outline: 'none',\n backgroundColor: vars.colors.surfaceSecondary,\n boxShadow: `0 0 0 2px ${vars.colors.primaryLight}`,\n },\n },\n },\n]);\n\nexport const optionSelected = sprinkles({\n color: 'primary',\n backgroundColor: 'primaryLight',\n});\n\nexport const optionDescription = sprinkles({\n fontSize: 'xs',\n color: 'textMuted',\n});\n\nexport const menuSeparator = sprinkles({\n height: 'px',\n marginY: 1,\n marginX: 2,\n backgroundColor: 'border',\n});\n\nexport const actionsContainer = sprinkles({\n paddingY: 1,\n paddingX: 2,\n});\n\nexport type SimpleSelectVariants = RecipeVariants<typeof trigger>;\n"],"mappings":""}
1	+ {"version":3,"file":"SimpleSelect.css.js","names":[],"sources":["../../../../src/components/select/SimpleSelect.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles, stateSprinkles } from '../../theme/sprinkles.css.js';\nimport {\n brandFocusRing,\n controlFocusRing,\n disabledControl,\n errorControlFocusRing,\n} from '../../theme/styleRecipes.css.js';\nimport { vars } from '../../theme/themeContract.css.js';\n\nexport const container = recipe({\n base: sprinkles({\n position: 'relative',\n }),\n variants: {\n fullWidth: {\n true: sprinkles({ width: 'full' }),\n false: sprinkles({ width: 'auto' }),\n },\n },\n defaultVariants: {\n fullWidth: true,\n },\n});\n\nexport const label = sprinkles({\n display: 'block',\n marginBottom: 2,\n fontSize: 'xs',\n fontWeight: 'semibold',\n letterSpacing: 'wider',\n textTransform: 'uppercase',\n color: 'textMuted',\n});\n\nconst triggerBase = style([\n sprinkles({\n width: 'full',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n gap: 2,\n paddingY: 2,\n paddingX: 3,\n borderRadius: 'xl',\n fontSize: 'sm',\n fontWeight: 'semibold',\n textAlign: 'left',\n cursor: 'pointer',\n transitionProperty: 'colors',\n transitionDuration: 150,\n transitionTimingFunction: 'ease',\n }),\n disabledControl,\n]);\n\nconst defaultTrigger = style([\n sprinkles({\n borderWidth: 'px',\n borderStyle: 'solid',\n borderColor: 'border',\n backgroundColor: 'white',\n color: 'text',\n }),\n stateSprinkles({ outline: { focusVisible: 'none' } }),\n controlFocusRing,\n]);\n\nconst errorTrigger = style([\n sprinkles({\n borderWidth: 'px',\n borderStyle: 'solid',\n borderColor: 'error',\n backgroundColor: 'white',\n color: 'text',\n }),\n errorControlFocusRing,\n]);\n\nconst brandTrigger = style([\n sprinkles({\n color: 'brandWhite',\n borderWidth: 'default',\n borderStyle: 'solid',\n borderColor: 'brandPrimaryRed',\n backgroundImage: 'brandDiagonal',\n }),\n stateSprinkles({ filter: { hover: 'brightness98' } }),\n brandFocusRing,\n]);\n\nexport const trigger = recipe({\n base: triggerBase,\n variants: {\n variant: {\n default: defaultTrigger,\n brand: brandTrigger,\n },\n state: {\n default: {},\n error: errorTrigger,\n },\n size: {\n small: sprinkles({\n paddingY: 1,\n paddingX: 2,\n fontSize: 'sm',\n }),\n medium: sprinkles({\n paddingY: 2,\n paddingX: 3,\n fontSize: 'sm',\n }),\n large: sprinkles({\n paddingY: 3,\n paddingX: 4,\n fontSize: 'base',\n }),\n },\n },\n defaultVariants: {\n variant: 'default',\n state: 'default',\n size: 'medium',\n },\n compoundVariants: [\n {\n variants: {\n variant: 'brand',\n state: 'error',\n },\n style: brandTrigger,\n },\n ],\n});\n\nexport const triggerOpen = sprinkles({\n borderBottomLeftRadius: 'none',\n borderBottomRightRadius: 'none',\n});\n\nexport const valueText = sprinkles({\n flex: 1,\n minWidth: 0,\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n});\n\nexport const triggerIcon = sprinkles({\n display: 'grid',\n alignItems: 'center',\n justifyContent: 'center',\n width: 4,\n height: 4,\n color: 'textMuted',\n transitionProperty: 'default',\n transitionDuration: 150,\n transitionTimingFunction: 'ease',\n});\n\nexport const triggerIconOpen = sprinkles({\n rotate: 180,\n color: 'text',\n});\n\nexport const triggerIconBrand = sprinkles({\n color: 'brandWhite',\n});\n\nexport const menu = sprinkles({\n position: 'absolute',\n top: 'full',\n left: 0,\n right: 0,\n zIndex: 10,\n display: 'flex',\n flexDirection: 'column',\n gap: 1,\n padding: 1,\n borderRadius: 'xl',\n borderWidth: 'default',\n borderStyle: 'solid',\n borderColor: 'border',\n backgroundColor: 'white',\n boxShadow: 'lg',\n maxHeight: 72,\n overflowY: 'auto',\n});\n\nexport const menuOpen = sprinkles({\n borderTopLeftRadius: 'none',\n borderTopRightRadius: 'none',\n marginTop: '-px',\n});\n\nexport const optionButton = style([\n sprinkles({\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n gap: 1,\n width: 'full',\n borderWidth: 0,\n borderStyle: 'none',\n borderRadius: 'lg',\n backgroundColor: 'transparent',\n paddingY: 2,\n paddingX: 3,\n fontSize: 'sm',\n fontWeight: 'medium',\n color: 'text',\n textAlign: 'left',\n cursor: 'pointer',\n transitionProperty: 'colors',\n transitionDuration: 120,\n transitionTimingFunction: 'ease',\n }),\n {\n selectors: {\n '&:hover': {\n backgroundColor: vars.colors.surfaceSecondary,\n },\n '&:focus-visible': {\n outline: 'none',\n backgroundColor: vars.colors.surfaceSecondary,\n boxShadow: `0 0 0 2px ${vars.colors.primaryLight}`,\n },\n },\n },\n]);\n\nexport const optionSelected = sprinkles({\n color: 'primary',\n backgroundColor: 'primaryLight',\n});\n\nexport const optionDescription = sprinkles({\n fontSize: 'xs',\n color: 'textMuted',\n});\n\nexport const menuSeparator = sprinkles({\n height: 'px',\n marginY: 1,\n marginX: 2,\n backgroundColor: 'border',\n});\n\nexport const actionsContainer = sprinkles({\n paddingY: 1,\n paddingX: 2,\n});\n\nexport type SimpleSelectVariants = RecipeVariants<typeof trigger>;\n"],"mappings":""}