@xsolla/xui-core 0.141.1 → 0.147.1

package/index.mjs

@@ -2354,6 +2354,91 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
         };
         return configs[size];
       },
+      imageUploader: (size) => {
+        const configs = {
+          xl: {
+            box: 200,
+            wideWidth: 440,
+            padding: 14,
+            gap: 10,
+            iconSize: 32,
+            labelFontSize: 20,
+            labelLineHeight: 22,
+            descriptionFontSize: 20,
+            descriptionLineHeight: 22,
+            errorFontSize: 16,
+            errorLineHeight: 18,
+            errorGap: 8,
+            radius: 8,
+            borderWidth: 1
+          },
+          lg: {
+            box: 168,
+            wideWidth: 440,
+            padding: 14,
+            gap: 10,
+            iconSize: 24,
+            labelFontSize: 18,
+            labelLineHeight: 24,
+            descriptionFontSize: 18,
+            descriptionLineHeight: 20,
+            errorFontSize: 16,
+            errorLineHeight: 18,
+            errorGap: 8,
+            radius: 8,
+            borderWidth: 1
+          },
+          md: {
+            box: 136,
+            wideWidth: 400,
+            padding: 12,
+            gap: 8,
+            iconSize: 24,
+            labelFontSize: 16,
+            labelLineHeight: 20,
+            descriptionFontSize: 14,
+            descriptionLineHeight: 16,
+            errorFontSize: 14,
+            errorLineHeight: 16,
+            errorGap: 6,
+            radius: 8,
+            borderWidth: 1
+          },
+          sm: {
+            box: 104,
+            wideWidth: 320,
+            padding: 10,
+            gap: 6,
+            iconSize: 18,
+            labelFontSize: 14,
+            labelLineHeight: 18,
+            descriptionFontSize: 14,
+            descriptionLineHeight: 18,
+            errorFontSize: 12,
+            errorLineHeight: 14,
+            errorGap: 6,
+            radius: 8,
+            borderWidth: 1
+          },
+          xs: {
+            box: 72,
+            wideWidth: 240,
+            padding: 8,
+            gap: 4,
+            iconSize: 18,
+            labelFontSize: 12,
+            labelLineHeight: 16,
+            descriptionFontSize: 12,
+            descriptionLineHeight: 16,
+            errorFontSize: 11,
+            errorLineHeight: 13,
+            errorGap: 4,
+            radius: 8,
+            borderWidth: 1
+          }
+        };
+        return configs[size];
+      },
       inputPin: (size) => {
         const configs = {
           xl: {
@@ -2896,7 +2981,10 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
           md: { height: 6, labelSize: 12, helperSize: 12, gap: 6 },
           sm: { height: 4, labelSize: 12, helperSize: 12, gap: 4 },
           xs: { height: 2, labelSize: 10, helperSize: 10, gap: 2 },
-          xxs: { height: 2, labelSize: 10, helperSize: 10, gap: 2 }
+          xxs: { height: 2, labelSize: 10, helperSize: 10, gap: 2 },
+          l: { height: 8, labelSize: 16, helperSize: 14, gap: 10 },
+          m: { height: 6, labelSize: 14, helperSize: 12, gap: 8 },
+          s: { height: 4, labelSize: 12, helperSize: 12, gap: 6 }
         };
         return configs[size];
       },
@@ -3037,6 +3125,126 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
           zIndex: 1e3
         };
       },
+      drawer: () => ({
+        // Sizing values from Figma design: B2B Components Library node-id=8291-103845
+        widthSm: 480,
+        widthMd: 620,
+        widthLg: 1056,
+        headerHeight: 80,
+        headerPaddingX: 32,
+        headerPaddingY: 24,
+        headerGap: 24,
+        titleFontSize: 18,
+        titleLineHeight: 24,
+        contentPaddingX: 32,
+        footerPadding: 16,
+        outerPadding: 8,
+        containerRadius: 4,
+        contentRadius: 8,
+        stepperPadding: 16,
+        stepperRadius: 8,
+        stepperContentGap: 8,
+        scrimColor: "rgba(0, 0, 0, 0.75)",
+        animationDuration: 300,
+        zIndex: 1e3
+      }),
+      sidebar: () => ({
+        // Sizing values from Figma design: B2B Components Library
+        widthExpanded: 280,
+        widthCollapsed: 48,
+        radius: 4,
+        itemHeight: 32,
+        iconSize: 18,
+        padding: 8,
+        sectionLabelHeight: 20,
+        // Aligns nested item text with parent label (padding 8 + icon 18 + gap 8 = 34)
+        // and centers the rail under the parent icon (padding 8 + iconSize/2 = 17).
+        nestedItemPaddingLeft: 34,
+        nestedItemRailLeft: 17,
+        chevronSize: 14,
+        externalIconSize: 18,
+        chatBadgeSize: 6,
+        itemBadgeSize: 4,
+        focusOutlineWidth: 2,
+        scrollbarWidth: 4,
+        popoverGap: 12,
+        popoverViewportPadding: 8,
+        popoverMinWidth: 180,
+        popoverMaxWidth: 240,
+        popoverShadow: "0 2px 25px rgba(7, 7, 8, 0.15)",
+        popoverZIndex: 1e3,
+        transitionWidth: "0.25s ease-in-out",
+        transitionFadeIn: "opacity 0.15s ease-in-out 0.1s",
+        transitionFadeOut: "opacity 0.1s ease-in-out",
+        transitionItem: "background-color 0.15s ease-in-out, color 0.15s ease-in-out",
+        transitionRows: "grid-template-rows 0.25s ease-in-out"
+      }),
+      stepperB2b: () => ({
+        // Sizing values from Figma design: B2B Components Library
+        // variant grid node-id=10999-17988, state grid node-id=10259-5501
+        chipSize: 32,
+        chipRadius: 2,
+        chipPaddingTop: 5,
+        chipPaddingBottom: 4,
+        chipPaddingX: 4,
+        chipIconSize: 16,
+        numberFontSize: 18,
+        numberLineHeight: 24,
+        titleFontSize: 16,
+        titleLineHeight: 20,
+        descriptionFontSize: 14,
+        descriptionLineHeight: 20,
+        captionFontSize: 12,
+        captionLineHeight: 16,
+        itemGap: 12,
+        contentGap: 4,
+        contentMinHeight: 32,
+        contentWidth: 128,
+        activeCardRadiusVertical: 4,
+        activeCardRadiusHorizontal: 6,
+        activeCardPaddingTop: 24,
+        activeCardPaddingX: 24,
+        activeCardPaddingYHorizontal: 12,
+        activeCardPaddingLeftHorizontal: 12,
+        activeCardGapHorizontal: 8,
+        innerConnectorLength: 48,
+        connectorSegment: 24,
+        connectorCellHeight: 24,
+        connectorCellWidth: 80,
+        surfaceRadius: 8,
+        surfacePaddingVertical: 16,
+        surfacePaddingHorizontal: 8,
+        horizontalItemGap: 16,
+        horizontalFirstItemWidth: 220,
+        horizontalItemWidth: 236,
+        horizontalConnectorSegment: 32,
+        horizontalConnectorGap: 12,
+        simpleCardPadding: 12,
+        simpleCardRadius: 4,
+        simpleCardGap: 4,
+        simpleItemGap: 4,
+        simpleHorizontalCellWidth: 56,
+        simpleHorizontalStubLength: 8
+      }),
+      collapsibleB2b: () => ({
+        // Sizing values from Figma design: B2B Components Library node-id=10469-6509
+        triggerPadding: 16,
+        triggerGap: 12,
+        triggerMinHeight: 56,
+        surfaceRadius: 8,
+        cellRadius: 4,
+        iconSlotSize: 32,
+        iconSlotRadius: 4,
+        chevronSize: 24,
+        trailingGap: 8,
+        textGap: 2,
+        titleFontSize: 16,
+        titleLineHeight: 20,
+        captionFontSize: 12,
+        captionLineHeight: 18,
+        panelPadding: 16,
+        accordionItemGap: 8
+      }),
       toast: () => {
         return {
           minHeight: 64,