@sheinx/shineout-style 3.0.0-alpha.2 → 3.0.0-alpha.21

package/cjs/alert/alert.d.ts

@@ -2,3 +2,4 @@ import { JsStyles } from '../jss-style';
 export declare type AlertClass = 'alert' | 'noBordered' | 'content' | 'widthTitle' | 'title' | 'close' | 'info' | 'success' | 'warning' | 'confirmwarning' | 'danger' | 'infoIcon' | 'successIcon' | 'warningIcon' | 'confirmwarningIcon' | 'confirmIcon' | 'dangerIcon' | 'icon' | 'text' | 'pending';
 declare const alertStyle: JsStyles<AlertClass>;
 export default alertStyle;
+//# sourceMappingURL=alert.d.ts.map

package/cjs/alert/alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["alert.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,oBAAY,UAAU,GAClB,OAAO,GACP,YAAY,GACZ,SAAS,GACT,YAAY,GACZ,OAAO,GACP,OAAO,GACP,MAAM,GACN,SAAS,GACT,SAAS,GACT,gBAAgB,GAChB,QAAQ,GACR,UAAU,GACV,aAAa,GACb,aAAa,GACb,oBAAoB,GACpB,aAAa,GACb,YAAY,GACZ,MAAM,GACN,MAAM,GACN,SAAS,CAAC;AAEd,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,UAAU,CAkJpC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/cjs/alert/alert.js

@@ -36,6 +36,30 @@ var alertStyle = {
       fontSize: _theme.default.alertFontSize,
       lineHeight: _theme.default.lineHeightDynamic
     },
+    '&[data-soui-type="message"]': {
+      '& $close': {
+        position: 'relative',
+        zIndex: 0,
+        '& svg': {
+          zIndex: 1,
+          position: 'relative'
+        },
+        '&:hover': {
+          '&:after': {
+            content: '""',
+            position: 'absolute',
+            top: -2,
+            right: 0,
+            bottom: 0,
+            left: -5,
+            width: 24,
+            height: 24,
+            borderRadius: '50%',
+            background: _theme.default.alertMessageHoverColor
+          }
+        }
+      }
+    },
     '&$widthTitle': {},
     '& $icon': {}
   },
@@ -49,7 +73,8 @@ var alertStyle = {
       lineHeight: '24px'
     },
     '& $close': {
-      marginBottom: _theme.default.alertNearlyMargin
+      marginBottom: _theme.default.alertNearlyMargin,
+      marginTop: 2
     }
   },
   title: {
@@ -61,17 +86,23 @@ var alertStyle = {
   },
   text: {
     overflowWrap: 'anywhere',
-    fontSize: _theme.default.alertFontSize
+    fontSize: _theme.default.alertFontSize,
+    lineHeight: _theme.default.lineHeightDynamic
   },
   close: {
     cursor: 'pointer',
     width: _theme.default.alertFontSize,
     color: _theme.default.alertCloseFontColor,
+    fontSize: _theme.default.alertFontSize,
+    height: _theme.default.lineHeightDynamic,
     flex: '0 0 auto',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    marginLeft: _theme.default.alertNearlyMargin
+    marginLeft: _theme.default.alertNearlyMargin,
+    '&:hover': {
+      color: _theme.default.alertCloseHoverColor
+    }
   },
   content: {
     flex: '1 1 0'
@@ -125,7 +156,9 @@ var alertStyle = {
   },
   icon: {
     width: 16,
-    display: 'flex',
+    display: 'inline-flex',
+    fontSize: _theme.default.alertFontSize,
+    height: _theme.default.lineHeightDynamic,
     flex: '0 0 auto',
     alignItems: 'center',
     marginRight: _theme.default.alertNearlyMargin

package/cjs/alert/index.d.ts

@@ -2,3 +2,4 @@ import alertStyle from './alert';
 declare const useAlertStyle: (data?: undefined) => import("jss").Classes<import("./alert").AlertClass>;
 export { alertStyle, useAlertStyle };
 export default useAlertStyle;
+//# sourceMappingURL=index.d.ts.map

package/cjs/alert/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,UAAU,MAAM,SAAS,CAAC;AAEjC,QAAA,MAAM,aAAa,2EAA8B,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC;AACrC,eAAe,aAAa,CAAC"}

package/cjs/alert/index.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {

package/cjs/breadcrumb/breadcrumb.d.ts

@@ -2,6 +2,7 @@ import { JsStyles } from '../jss-style';
 export declare type BreadcrumbClasses = {
     wrapper: string;
     content: string;
+    itemWrapper: string;
     item: string;
     itemWithDrop: string;
     down: string;
@@ -14,3 +15,4 @@ export declare type BreadcrumbClasses = {
 export declare type BreadcrumbClassType = keyof BreadcrumbClasses;
 declare const breadcrumbStyle: JsStyles<BreadcrumbClassType>;
 export default breadcrumbStyle;
+//# sourceMappingURL=breadcrumb.d.ts.map

package/cjs/breadcrumb/breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["breadcrumb.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,oBAAY,iBAAiB,GAAG;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AACF,oBAAY,mBAAmB,GAAG,MAAM,iBAAiB,CAAC;AAE1D,QAAA,MAAM,eAAe,EAAE,QAAQ,CAAC,mBAAmB,CAwFlD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/cjs/breadcrumb/breadcrumb.js

@@ -34,13 +34,30 @@ var breadcrumbStyle = {
     position: 'relative',
     top: '-3px'
   },
+  itemWrapper: {
+    padding: "0 ".concat(_theme.default.breadcrumbListItemWrapperPaddingX)
+  },
   item: {
     display: 'flex',
     alignItems: 'center'
+    // '&:not(a) svg': {
+    //   color: token.breadcrumbIconBackgroundColor,
+    // },
+    // '& a svg': {
+    //   color: 'inherit',
+    // },
   },
+
   itemWithDrop: {
     display: 'flex',
-    alignItems: 'center'
+    alignItems: 'center',
+    color: _theme.default.breadcrumbLinkColor,
+    '&:hover': {
+      '&>a': {
+        color: _theme.default.breadcrumbLinkHoverColor
+      },
+      color: _theme.default.breadcrumbLinkHoverColor
+    }
   },
   down: {
     width: 14,
@@ -63,6 +80,7 @@ var breadcrumbStyle = {
     fontSize: _theme.default.breadcrumbFontSize,
     cursor: 'pointer',
     color: _theme.default.breadcrumbFontColor,
+    borderRadius: _theme.default.breadcrumbListItemBorderRadius,
     '&:hover': {
       backgroundColor: _theme.default.breadcrumbListItemHoverBackgroundColor
     },

package/cjs/breadcrumb/index.d.ts

@@ -2,3 +2,4 @@ import breadcrumbStyle from './breadcrumb';
 declare const useBreadcrumbStyle: (data?: undefined) => import("jss").Classes<keyof import("./breadcrumb").BreadcrumbClasses>;
 export { breadcrumbStyle, useBreadcrumbStyle };
 export default useBreadcrumbStyle;
+//# sourceMappingURL=index.d.ts.map

package/cjs/breadcrumb/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,eAAe,MAAM,cAAc,CAAC;AAE3C,QAAA,MAAM,kBAAkB,6FAAwC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,CAAC;AAC/C,eAAe,kBAAkB,CAAC"}

package/cjs/breadcrumb/index.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {

package/cjs/button/button.d.ts

@@ -1,4 +1,5 @@
 import { JsStyles } from '../jss-style';
-declare type ButtonClass = 'button' | 'default' | 'disabled' | 'loading' | 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'text' | 'outline' | 'dashed' | 'round' | 'circle' | 'square' | 'link' | 'href' | 'small' | 'large' | 'group' | 'groupItem' | 'spin';
+declare type ButtonClass = 'button' | 'default' | 'disabled' | 'loading' | 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'text' | 'outline' | 'dashed' | 'round' | 'circle' | 'square' | 'link' | 'href' | 'small' | 'large' | 'group' | 'groupItem' | 'spaceWrapper' | 'spin';
 declare const ButtonStyle: JsStyles<ButtonClass>;
 export default ButtonStyle;
+//# sourceMappingURL=button.d.ts.map

package/cjs/button/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,aAAK,WAAW,GACZ,QAAQ,GACR,SAAS,GACT,UAAU,GACV,SAAS,GACT,SAAS,GACT,WAAW,GACX,QAAQ,GACR,SAAS,GACT,SAAS,GACT,MAAM,GACN,SAAS,GACT,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,MAAM,GACN,OAAO,GACP,OAAO,GACP,OAAO,GACP,WAAW,GACX,cAAc,GACd,MAAM,CAAC;AAoKX,QAAA,MAAM,WAAW,EAAE,QAAQ,CAAC,WAAW,CA2UtC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/cjs/button/button.js

@@ -48,11 +48,11 @@ var beforeLine = function beforeLine() {
     '&::before': {
       position: 'absolute',
       content: '" "',
-      height: '50%',
+      height: 'calc(50% - 2px)',
       top: 'calc(25% + 1px)',
       left: -1,
       width: 1,
-      background: '#FFF'
+      background: _theme.default.buttonSplitlineFullBackgroundColor
     },
     '&:not($disabled):hover': {
       '&::before': {
@@ -71,7 +71,7 @@ var outlineBeforeLine = function outlineBeforeLine(type, styles) {
     '&::before': {
       position: 'absolute',
       content: '" "',
-      height: '50%',
+      height: 'calc(50% - 2px)',
       top: 'calc(25% + 1px)',
       left: -1,
       width: 1,
@@ -80,20 +80,18 @@ var outlineBeforeLine = function outlineBeforeLine(type, styles) {
     '&:not(:disabled):hover': {
       // before
       '&::before': {
-        height: 'calc(100% + 2px)',
-        top: -1,
+        height: 'calc(100% + 1.8px)',
+        top: -0.8,
         left: -1,
         width: 1,
-        bottom: -1,
         background: _theme.default["button".concat(type).concat(styles, "HoverBorderColor")]
       },
       '& + $button,& + * $button': {
         '&::before': {
-          height: 'calc(100% + 2px)',
-          top: -1,
+          height: 'calc(100% + 1.8px)',
+          top: -0.8,
           left: -1,
           width: 1,
-          bottom: -1,
           background: _theme.default["button".concat(type).concat(styles, "HoverBorderColor")]
         }
       },
@@ -147,11 +145,11 @@ var textBeforeLine = function textBeforeLine() {
       transition: 'all 0.3s',
       position: 'absolute',
       content: '" "',
-      height: '50%',
+      height: 'calc(50% - 2px)',
       top: 'calc(25% + 1px)',
       left: -1,
       width: 1,
-      background: '#E8EBF0'
+      background: _theme.default.buttonSplitlineOutlineBackgroundColor
     },
     '&:not($disabled):hover': {
       '&::before': {
@@ -177,7 +175,6 @@ var ButtonStyle = {
     fontWeight: 400,
     cursor: 'pointer',
     userSelect: 'none',
-    // textAlign: 'center',
     whiteSpace: 'nowrap',
     display: 'inline-flex',
     alignItems: 'center',
@@ -189,9 +186,10 @@ var ButtonStyle = {
     borderRadius: _theme.default.buttonBorderRadius,
     lineHeight: _theme.default.lineHeightDynamic,
     padding: "".concat(_theme.default.buttonPaddingY, " ").concat(_theme.default.buttonPaddingX),
-    transition: 'all 0.15s ease-in-out',
+    transition: 'all .1s linear',
     fontFamily: 'inherit',
     height: _theme.default.buttonHeight,
+    '& $spaceWrapper': {},
     '& + &': {
       marginLeft: _theme.default.buttonNearlyMargin
     },
@@ -199,23 +197,17 @@ var ButtonStyle = {
       margin: 0
     },
     '&:active': {
-      animationDelay: '0s',
-      backgroundImage: 'none',
-      animationDuration: '0.4s',
-      animationFillMode: 'none',
-      animationIterationCount: '1',
-      animationDirection: 'normal',
-      animationPlayState: 'running',
-      animationTimingFunction: 'ease-out'
+      transition: 'none'
     }
   },
+  spaceWrapper: {},
   small: {
     height: _theme.default.buttonSmallHeight,
     fontSize: _theme.default.buttonSmallFontSize,
     padding: "".concat(_theme.default.buttonSmallPaddingY, " ").concat(_theme.default.buttonSmallPaddingX),
     '&$circle,&$square': {
-      width: "28px",
-      height: "28px"
+      width: 24,
+      height: 24
     }
   },
   large: {
@@ -223,8 +215,8 @@ var ButtonStyle = {
     fontSize: _theme.default.buttonLargeFontSize,
     padding: "".concat(_theme.default.buttonLargePaddingY, " ").concat(_theme.default.buttonLargePaddingX),
     '&$circle,&$square': {
-      width: "40px",
-      height: "40px"
+      width: 40,
+      height: 40
     }
   },
   default: _objectSpread({}, button('Secondary', '')),
@@ -336,11 +328,11 @@ var ButtonStyle = {
         '&::before': {
           position: 'absolute',
           content: '" "',
-          height: '50%',
+          height: 'calc(50% - 2px)',
           top: 'calc(25% + 1px)',
           left: -1,
           width: 1,
-          background: '#E8EBF0'
+          background: _theme.default.buttonSplitlineOutlineBackgroundColor
         },
         '& + :not(&),& + * $button:not(&)': {
           '&::before': {
@@ -380,11 +372,11 @@ var ButtonStyle = {
         '&::before': {
           position: 'absolute',
           content: '" "',
-          height: '50%',
+          height: 'calc(50% - 2px)',
           top: 'calc(25% + 1px)',
           left: -1,
           width: 1,
-          background: '#E8EBF0' // Neutral-border-1
+          background: _theme.default.buttonSplitlineOutlineBackgroundColor // Neutral-border-1
         }
       }),
 

package/cjs/button/index.d.ts

@@ -1,4 +1,5 @@
 import buttonStyle from './button';
-declare const useButtonStyle: (data?: undefined) => import("jss").Classes<"button" | "link" | "small" | "outline" | "circle" | "text" | "round" | "dashed" | "default" | "large" | "disabled" | "square" | "success" | "warning" | "danger" | "loading" | "primary" | "secondary" | "href" | "group" | "groupItem" | "spin">;
+declare const useButtonStyle: (data?: undefined) => import("jss").Classes<"button" | "link" | "small" | "outline" | "round" | "dashed" | "default" | "text" | "large" | "circle" | "disabled" | "square" | "success" | "warning" | "danger" | "loading" | "primary" | "secondary" | "href" | "group" | "groupItem" | "spaceWrapper" | "spin">;
 export { buttonStyle, useButtonStyle };
 export default useButtonStyle;
+//# sourceMappingURL=index.d.ts.map

package/cjs/button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,WAAW,MAAM,UAAU,CAAC;AAEnC,QAAA,MAAM,cAAc,iTAAgC,CAAC;AAErD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC;AACvC,eAAe,cAAc,CAAC"}

package/cjs/button/index.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {

package/cjs/card/card.d.ts

@@ -0,0 +1,30 @@
+import { JsStyles } from '../jss-style';
+export declare type CardClasses = {
+    wrapper: string;
+    wrapperShadow: string;
+    wrapperHover: string;
+    wrapperSplit: string;
+    wrapperCollapsible: string;
+    wrapperCollapsed: string;
+    wrapperResizable: string;
+    wrapperMoveable: string;
+    wrapperInAccordion: string;
+    header: string;
+    headerContent: string;
+    headerExtra: string;
+    indicator: string;
+    indicatorIcon: string;
+    body: string;
+    footer: string;
+    accordion: string;
+    resizeX: string;
+    resizeY: string;
+    resizeXY: string;
+    bodyCollapse: string;
+    center: string;
+    right: string;
+};
+export declare type CardClassType = keyof CardClasses;
+declare const cardStyle: JsStyles<CardClassType>;
+export default cardStyle;
+//# sourceMappingURL=card.d.ts.map

package/cjs/card/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["card.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,oBAAY,WAAW,GAAG;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AACF,oBAAY,aAAa,GAAG,MAAM,WAAW,CAAC;AAE9C,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,aAAa,CAuItC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/cjs/card/card.js

@@ -0,0 +1,147 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.concat.js");
+var _theme = _interopRequireDefault(require("@sheinx/theme"));
+var cardStyle = {
+  wrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    border: "1px solid ".concat(_theme.default.cardBorderColor),
+    borderRadius: _theme.default.cardBorderRadius,
+    fontSize: _theme.default.cardFontSize,
+    lineHeight: _theme.default.lineHeightDynamic,
+    color: _theme.default.cardFontColor,
+    backgroundColor: _theme.default.cardBackgroundColor,
+    boxSizing: 'border-box'
+  },
+  wrapperSplit: {},
+  wrapperCollapsible: {},
+  wrapperCollapsed: {},
+  wrapperInAccordion: {
+    border: 'none',
+    '& + &': {
+      borderTop: "1px solid ".concat(_theme.default.cardBorderColor),
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0
+    }
+  },
+  wrapperShadow: {
+    boxShadow: _theme.default.cardShadow
+  },
+  wrapperHover: {
+    transition: 'box-shadow .2s linear',
+    '&:hover': {
+      boxShadow: _theme.default.cardShadow
+    }
+  },
+  wrapperResizable: {
+    position: 'relative'
+  },
+  wrapperMoveable: {},
+  accordion: {
+    border: "1px solid ".concat(_theme.default.cardBorderColor),
+    borderRadius: _theme.default.cardBorderRadius
+  },
+  header: {
+    padding: "".concat(_theme.default.cardPaddingY, " ").concat(_theme.default.cardPaddingX),
+    '$wrapperMoveable &': {
+      cursor: 'move'
+    },
+    display: 'flex',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    '$wrapperCollapsible &': {
+      cursor: 'pointer'
+    }
+  },
+  headerContent: {
+    fontSize: _theme.default.cardTitleFontSize,
+    lineHeight: _theme.default.lineHeightDynamic,
+    fontWeight: 'bold',
+    flex: 1,
+    minWidth: 0
+  },
+  center: {
+    textAlign: 'center'
+  },
+  right: {
+    textAlign: 'right'
+  },
+  headerExtra: {
+    marginLeft: _theme.default.cardHeaderExtraMarginX
+  },
+  indicator: {
+    display: 'flex',
+    alignItems: 'center',
+    lineHeight: 1
+  },
+  indicatorIcon: {
+    color: _theme.default.cardIndicatorColor,
+    width: _theme.default.cardIndicatorSize,
+    height: _theme.default.cardIndicatorSize,
+    marginRight: _theme.default.cardHeaderGap,
+    transition: 'transform 240ms linear',
+    transform: 'rotate(90deg)',
+    '$wrapperCollapsed &': {
+      transform: 'rotate(0deg)'
+    }
+  },
+  body: {
+    '$wrapperSplit $header+&, $wrapperSplit $header+$bodyCollapse>&': {
+      borderTop: "1px solid ".concat(_theme.default.cardBorderColor)
+    },
+    padding: "".concat(_theme.default.cardPaddingY, " ").concat(_theme.default.cardPaddingX),
+    flex: 1,
+    minHeight: 0,
+    minWidth: 0,
+    boxSizing: 'border-box'
+  },
+  bodyCollapse: {},
+  footer: {
+    '$wrapperSplit $body+&, $wrapperSplit $bodyCollapse+&': {
+      borderTop: "1px solid ".concat(_theme.default.cardBorderColor)
+    },
+    padding: "".concat(_theme.default.cardPaddingY, " ").concat(_theme.default.cardPaddingX),
+    boxSizing: 'border-box'
+  },
+  resizeX: {
+    cursor: 'e-resize',
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    width: '6px',
+    right: '-4px',
+    zIndex: 11,
+    background: 'transparent',
+    touchAction: 'none'
+  },
+  resizeY: {
+    cursor: 's-resize',
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    height: '6px',
+    bottom: '-4px',
+    zIndex: 11,
+    background: 'transparent',
+    touchAction: 'none'
+  },
+  resizeXY: {
+    cursor: 'se-resize',
+    position: 'absolute',
+    right: '0',
+    bottom: '0',
+    width: '10px',
+    height: '10px',
+    zIndex: 12,
+    background: 'transparent',
+    touchAction: 'none'
+  }
+};
+var _default = cardStyle;
+exports.default = _default;

package/cjs/card/index.d.ts

@@ -0,0 +1,5 @@
+import cardStyle from './card';
+declare const useCardStyle: (data?: undefined) => import("jss").Classes<keyof import("./card").CardClasses>;
+export { cardStyle, useCardStyle };
+export default useCardStyle;
+//# sourceMappingURL=index.d.ts.map

package/cjs/card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,SAAS,MAAM,QAAQ,CAAC;AAE/B,QAAA,MAAM,YAAY,iFAA4B,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;AACnC,eAAe,YAAY,CAAC"}

package/cjs/card/index.js

@@ -0,0 +1,20 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "cardStyle", {
+  enumerable: true,
+  get: function get() {
+    return _card.default;
+  }
+});
+exports.useCardStyle = exports.default = void 0;
+var _jssStyle = require("../jss-style");
+var _card = _interopRequireDefault(require("./card"));
+var useCardStyle = (0, _jssStyle.styled)(_card.default, 'card');
+exports.useCardStyle = useCardStyle;
+var _default = useCardStyle;
+exports.default = _default;

package/cjs/card-group/card-group.d.ts

@@ -0,0 +1,12 @@
+import { JsStyles } from '../jss-style';
+export declare type CardGroupClasses = {
+    wrapper: string;
+    item: string;
+    checkbox: string;
+    scroller: string;
+    grid: string;
+};
+export declare type CardGroupClassType = keyof CardGroupClasses;
+declare const cardGroupStyle: JsStyles<CardGroupClassType>;
+export default cardGroupStyle;
+//# sourceMappingURL=card-group.d.ts.map

package/cjs/card-group/card-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-group.d.ts","sourceRoot":"","sources":["card-group.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,oBAAY,gBAAgB,GAAG;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AACF,oBAAY,kBAAkB,GAAG,MAAM,gBAAgB,CAAC;AAMxD,QAAA,MAAM,cAAc,EAAE,QAAQ,CAAC,kBAAkB,CAgChD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/cjs/card-group/card-group.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// import token from '@sheinx/theme';
+
+var cardGroupPadding = 0;
+var cardGroupItemBorderRadius = 8;
+var cardGroupStyle = {
+  wrapper: {
+    display: 'block'
+  },
+  item: {
+    borderRadius: cardGroupItemBorderRadius,
+    background: 'rgba(255,255,255,1)',
+    boxShadow: '0 4px 8px 0 rgba(20,23,55,0.05)',
+    overflow: 'hidden',
+    border: '1px solid #eee',
+    transition: 'all .2s ease',
+    position: 'relative',
+    '&:hover': {
+      boxShadow: '0 4px 12px 0 rgba(20,23,55,0.15)'
+    }
+  },
+  checkbox: {
+    '$wrapper &': {
+      position: 'absolute',
+      right: 12,
+      top: 12,
+      margin: 0
+    }
+  },
+  scroller: {
+    height: '100%',
+    overflow: 'auto'
+  },
+  grid: {
+    padding: cardGroupPadding,
+    display: 'grid'
+  }
+};
+var _default = cardGroupStyle;
+exports.default = _default;

package/cjs/card-group/index.d.ts

@@ -0,0 +1,5 @@
+import cardGroupStyle from './card-group';
+declare const useCardGroupStyle: (data?: undefined) => import("jss").Classes<keyof import("./card-group").CardGroupClasses>;
+export { cardGroupStyle, useCardGroupStyle };
+export default useCardGroupStyle;
+//# sourceMappingURL=index.d.ts.map

package/cjs/card-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,cAAc,MAAM,cAAc,CAAC;AAE1C,QAAA,MAAM,iBAAiB,4FAAsC,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,CAAC;AAC7C,eAAe,iBAAiB,CAAC"}

package/cjs/card-group/index.js

@@ -0,0 +1,20 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "cardGroupStyle", {
+  enumerable: true,
+  get: function get() {
+    return _cardGroup.default;
+  }
+});
+exports.useCardGroupStyle = exports.default = void 0;
+var _jssStyle = require("../jss-style");
+var _cardGroup = _interopRequireDefault(require("./card-group"));
+var useCardGroupStyle = (0, _jssStyle.styled)(_cardGroup.default, 'cardGroup');
+exports.useCardGroupStyle = useCardGroupStyle;
+var _default = useCardGroupStyle;
+exports.default = _default;