@sendoutcards/quantum-design-ui 1.8.30 → 1.8.31

package/dist/index.es.js

@@ -22283,9 +22283,9 @@ var FeatureAnnouncement = function (_a) {
   })));
 };
 
-var _emotionSourceMap$5 = process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHcUIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcclxuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XHJcbmV4cG9ydCBkZWZhdWx0IHtcclxuICAgIGZpbGxSdWxlV3JhcHBlcjogY3NzKHRlbXBsYXRlT2JqZWN0XzEgfHwgKHRlbXBsYXRlT2JqZWN0XzEgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChbXCJcXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xcbiAgICBiYWNrZ3JvdW5kOiAjZDRkNGQ0O1xcbiAgICBjdXJzb3I6IHBvaW50ZXI7XFxuICAgIDo6YmVmb3JlIHtcXG4gICAgICBjb250ZW50OiAnJztcXG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XFxuICAgICAgd2lkdGg6IDUwJTtcXG4gICAgICBoZWlnaHQ6IDUwJTtcXG4gICAgICBiYWNrZ3JvdW5kOiAjYTFhMWExO1xcbiAgICAgIHRvcDogMDtcXG4gICAgICBsZWZ0OiAwO1xcbiAgICAgIGJvcmRlci1yYWRpdXM6IDRweCAwIDAgMDtcXG4gICAgfVxcbiAgICA6OmFmdGVyIHtcXG4gICAgICBjb250ZW50OiAnJztcXG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XFxuICAgICAgd2lkdGg6IDUwJTtcXG4gICAgICBoZWlnaHQ6IDUwJTtcXG4gICAgICBiYWNrZ3JvdW5kOiAjYTFhMWExO1xcbiAgICAgIGJvdHRvbTogMDtcXG4gICAgICByaWdodDogMDtcXG4gICAgICBib3JkZXItcmFkaXVzOiAwIDAgNHB4IDA7XFxuICAgIH1cXG4gIFwiXSwgW1wiXFxuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcXG4gICAgYmFja2dyb3VuZDogI2Q0ZDRkNDtcXG4gICAgY3Vyc29yOiBwb2ludGVyO1xcbiAgICA6OmJlZm9yZSB7XFxuICAgICAgY29udGVudDogJyc7XFxuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xcbiAgICAgIHdpZHRoOiA1MCU7XFxuICAgICAgaGVpZ2h0OiA1MCU7XFxuICAgICAgYmFja2dyb3VuZDogI2ExYTFhMTtcXG4gICAgICB0b3A6IDA7XFxuICAgICAgbGVmdDogMDtcXG4gICAgICBib3JkZXItcmFkaXVzOiA0cHggMCAwIDA7XFxuICAgIH1cXG4gICAgOjphZnRlciB7XFxuICAgICAgY29udGVudDogJyc7XFxuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xcbiAgICAgIHdpZHRoOiA1MCU7XFxuICAgICAgaGVpZ2h0OiA1MCU7XFxuICAgICAgYmFja2dyb3VuZDogI2ExYTFhMTtcXG4gICAgICBib3R0b206IDA7XFxuICAgICAgcmlnaHQ6IDA7XFxuICAgICAgYm9yZGVyLXJhZGl1czogMCAwIDRweCAwO1xcbiAgICB9XFxuICBcIl0pKSksXHJcbn07XHJcbnZhciB0ZW1wbGF0ZU9iamVjdF8xO1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1zdHlsZXMuanMubWFwIl19 */";
+var _emotionSourceMap$5 = process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHcUIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcclxuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XHJcbmV4cG9ydCBkZWZhdWx0IHtcclxuICAgIGZpbGxSdWxlV3JhcHBlcjogY3NzKHRlbXBsYXRlT2JqZWN0XzEgfHwgKHRlbXBsYXRlT2JqZWN0XzEgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChbXCJcXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xcbiAgICBiYWNrZ3JvdW5kOiAjZDRkNGQ0O1xcbiAgICBjdXJzb3I6IHBvaW50ZXI7XFxuICAgIDo6YmVmb3JlIHtcXG4gICAgICBjb250ZW50OiAnJztcXG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XFxuICAgICAgd2lkdGg6IDUwJTtcXG4gICAgICBoZWlnaHQ6IDUwJTtcXG4gICAgICBiYWNrZ3JvdW5kOiAjYTFhMWExO1xcbiAgICAgIHRvcDogMDtcXG4gICAgICBsZWZ0OiAwO1xcbiAgICAgIGJvcmRlci1yYWRpdXM6IDUwcHggMCAwIDA7XFxuICAgIH1cXG4gICAgOjphZnRlciB7XFxuICAgICAgY29udGVudDogJyc7XFxuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xcbiAgICAgIHdpZHRoOiA1MCU7XFxuICAgICAgaGVpZ2h0OiA1MCU7XFxuICAgICAgYmFja2dyb3VuZDogI2ExYTFhMTtcXG4gICAgICBib3R0b206IDA7XFxuICAgICAgcmlnaHQ6IDA7XFxuICAgICAgYm9yZGVyLXJhZGl1czogMCAwIDUwcHggMDtcXG4gICAgfVxcbiAgXCJdLCBbXCJcXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xcbiAgICBiYWNrZ3JvdW5kOiAjZDRkNGQ0O1xcbiAgICBjdXJzb3I6IHBvaW50ZXI7XFxuICAgIDo6YmVmb3JlIHtcXG4gICAgICBjb250ZW50OiAnJztcXG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XFxuICAgICAgd2lkdGg6IDUwJTtcXG4gICAgICBoZWlnaHQ6IDUwJTtcXG4gICAgICBiYWNrZ3JvdW5kOiAjYTFhMWExO1xcbiAgICAgIHRvcDogMDtcXG4gICAgICBsZWZ0OiAwO1xcbiAgICAgIGJvcmRlci1yYWRpdXM6IDUwcHggMCAwIDA7XFxuICAgIH1cXG4gICAgOjphZnRlciB7XFxuICAgICAgY29udGVudDogJyc7XFxuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xcbiAgICAgIHdpZHRoOiA1MCU7XFxuICAgICAgaGVpZ2h0OiA1MCU7XFxuICAgICAgYmFja2dyb3VuZDogI2ExYTFhMTtcXG4gICAgICBib3R0b206IDA7XFxuICAgICAgcmlnaHQ6IDA7XFxuICAgICAgYm9yZGVyLXJhZGl1czogMCAwIDUwcHggMDtcXG4gICAgfVxcbiAgXCJdKSkpLFxyXG59O1xyXG52YXIgdGVtcGxhdGVPYmplY3RfMTtcclxuLy8jIHNvdXJjZU1hcHBpbmdVUkw9c3R5bGVzLmpzLm1hcCJdfQ== */";
 var styles$4 = {
-  fillRuleWrapper: /*#__PURE__*/css(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n    position: relative;\n    background: #d4d4d4;\n    cursor: pointer;\n    ::before {\n      content: '';\n      position: absolute;\n      width: 50%;\n      height: 50%;\n      background: #a1a1a1;\n      top: 0;\n      left: 0;\n      border-radius: 4px 0 0 0;\n    }\n    ::after {\n      content: '';\n      position: absolute;\n      width: 50%;\n      height: 50%;\n      background: #a1a1a1;\n      bottom: 0;\n      right: 0;\n      border-radius: 0 0 4px 0;\n    }\n  ;label:fillRuleWrapper;" + _emotionSourceMap$5], ["\n    position: relative;\n    background: #d4d4d4;\n    cursor: pointer;\n    ::before {\n      content: '';\n      position: absolute;\n      width: 50%;\n      height: 50%;\n      background: #a1a1a1;\n      top: 0;\n      left: 0;\n      border-radius: 4px 0 0 0;\n    }\n    ::after {\n      content: '';\n      position: absolute;\n      width: 50%;\n      height: 50%;\n      background: #a1a1a1;\n      bottom: 0;\n      right: 0;\n      border-radius: 0 0 4px 0;\n    }\n  ;label:fillRuleWrapper;" + _emotionSourceMap$5])))
+  fillRuleWrapper: /*#__PURE__*/css(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n    position: relative;\n    background: #d4d4d4;\n    cursor: pointer;\n    ::before {\n      content: '';\n      position: absolute;\n      width: 50%;\n      height: 50%;\n      background: #a1a1a1;\n      top: 0;\n      left: 0;\n      border-radius: 50px 0 0 0;\n    }\n    ::after {\n      content: '';\n      position: absolute;\n      width: 50%;\n      height: 50%;\n      background: #a1a1a1;\n      bottom: 0;\n      right: 0;\n      border-radius: 0 0 50px 0;\n    }\n  ;label:fillRuleWrapper;" + _emotionSourceMap$5], ["\n    position: relative;\n    background: #d4d4d4;\n    cursor: pointer;\n    ::before {\n      content: '';\n      position: absolute;\n      width: 50%;\n      height: 50%;\n      background: #a1a1a1;\n      top: 0;\n      left: 0;\n      border-radius: 50px 0 0 0;\n    }\n    ::after {\n      content: '';\n      position: absolute;\n      width: 50%;\n      height: 50%;\n      background: #a1a1a1;\n      bottom: 0;\n      right: 0;\n      border-radius: 0 0 50px 0;\n    }\n  ;label:fillRuleWrapper;" + _emotionSourceMap$5])))
 };
 var templateObject_1$5;
 
@@ -22301,27 +22301,37 @@ var SettingInput = function (_a) {
   return jsx(Div, {
     minWidth: "230px",
     cursor: "pointer"
-  }, jsx(Text, {
-    type: "caption",
-    content: label
-  }), jsx(Flex, {
+  }, jsx(Flex, {
     justifyContent: "space-between",
     minWidth: "230px",
     onClick: onClick,
     width: "100%",
-    borderRadius: "small",
-    inset: "x1",
-    display: "inline-flex",
-    backgroundColor: "background",
-    borderStyle: "solid",
-    borderColor: "lightgrey",
-    borderWidth: "thin",
-    alignItems: "center"
+    inset: "8px 14px",
+    display: "flex",
+    alignItems: "center",
+    style: {
+      borderRadius: '14px',
+      border: '1px solid #F3F4F6',
+      background: 'rgba(255, 255, 255, 0.60)'
+    }
   }, value ? jsx(Flex, {
+    width: "100%",
+    flexDirection: "column"
+  }, jsx(Text, {
+    type: "body",
+    content: label,
+    style: {
+      fontSize: '10px',
+      fontWeight: 700,
+      fontFamily: 'Montserrat, san serif',
+      color: '#6B7280'
+    }
+  }), jsx(Flex, {
     width: "100%",
     display: "flex",
     flexDirection: "row",
-    justifyContent: "space-between"
+    justifyContent: "space-between",
+    alignItems: "center"
   }, jsx(HStack, {
     gap: "0",
     justify: "start"
@@ -22331,52 +22341,108 @@ var SettingInput = function (_a) {
     backgroundRepeat: "no-repeat",
     backgroundColor: settingsType === 'color' ? value : undefined,
     backgroundImage: settingsType === 'image' ? value : undefined,
-    borderRadius: "4px",
+    borderRadius: "circle",
     width: "24px",
-    height: "24px"
+    height: "24px",
+    style: {
+      boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.12)'
+    }
   }), jsx(Text, {
     alignment: "left",
     outset: {
       left: 'x2'
     },
     type: "body",
-    content: settingsType === 'color' ? value : 'Image'
-  })), jsx(Div, {
-    display: "flex",
-    alignItems: "center",
-    onMouseEvent: function (e) {
-      e.stopPropagation();
-      onRemove();
-    },
-    onClick: onRemove
-  }, jsx(Icon, {
-    name: "closeCircle",
-    size: "xSmall",
-    primaryColor: "danger"
-  }))) : jsx(Flex, {
+    content: settingsType === 'color' ? value : 'Image',
+    style: {
+      color: '#171717',
+      fontSize: '14px',
+      fontFamily: 'Montserrat, san serif'
+    }
+  })))) : jsx(Flex, {
+    flexDirection: "column",
+    rowGap: "x_5"
+  }, jsx(Text, {
+    type: "body",
+    content: label,
+    style: {
+      fontSize: '10px',
+      fontWeight: 700,
+      fontFamily: 'Montserrat, san serif',
+      color: '#6B7280'
+    }
+  }), jsx(Flex, {
     justifyContent: "center",
     alignItems: "center"
   }, settingsType === 'color' ? jsx(Div, {
-    borderRadius: "4px",
     width: size,
     height: size,
     overflow: "visible",
     backgroundColor: {
       swatch: 'grayScale',
       shade: '_900'
+    },
+    borderRadius: "circle",
+    style: {
+      boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.12)'
     }
   }) : jsx(Div, {
     css: styles$4.fillRuleWrapper,
     width: size,
     height: size,
-    borderRadius: "4px"
+    style: {
+      borderRadius: '100%'
+    }
   }), jsx(Text, {
     alignment: "left",
     outset: {
       left: 'x2'
     },
     type: "body",
-    content: inactiveTitle
+    content: inactiveTitle,
+    style: {
+      color: '#E5E7EB',
+      fontSize: '14px',
+      fontFamily: 'Montserrat, san serif'
+    }
+  }))), value ? jsx(Div, {
+    display: "flex",
+    alignItems: "center",
+    onMouseEvent: function (e) {
+      e.stopPropagation();
+      onRemove();
+    },
+    onClick: onRemove
+  }, jsx(Icon, {
+    name: "closeCircle",
+    size: "xSmall",
+    primaryColor: "danger"
+  })) : settingsType === 'color' ? jsx(Div, {
+    cursor: "pointer",
+    borderRadius: "circle",
+    style: {
+      backgroundImage: 'conic-gradient(red, orange, yellow, green, blue, indigo, violet, red)',
+      width: '24px',
+      height: '24px',
+      boxShadow: '0px 4px 16px 0px rgba(0, 0, 0, 0.08)'
+    },
+    onClick: onClick
+  }) : jsx(Flex, {
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: "circle",
+    width: "24px",
+    height: "24px",
+    backgroundColor: "#fff",
+    onClick: onClick,
+    style: {
+      boxShadow: '0px 4px 16px 0px rgba(0, 0, 0, 0.08)',
+      border: '1px solid #fff'
+    }
+  }, jsx(Icon, {
+    size: "xSmall",
+    name: "image",
+    primaryColor: "primaryHeadingText"
   }))));
 };
 

package/dist/src/atoms/companion/companion.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { HOCBaseProps } from "../../helpers/hoc-types/hocBasePropTypes";
+import { HOCMotionProps } from "../../helpers/hoc-types/hocMotionTypes";
+export declare type DivProps = {
+    children?: React.ReactNode;
+    outsideClick?: () => void;
+    clickElementBypass?: string;
+} & HOCBaseProps & HOCMotionProps;
+export declare const Companion: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+    outsideClick?: (() => void) | undefined;
+    clickElementBypass?: string | undefined;
+} & HOCBaseProps & {
+    className?: string | undefined;
+    motionKey?: string | number | undefined;
+    id?: string | undefined;
+} & import("framer-motion").MotionProps & React.RefAttributes<HTMLDivElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendoutcards/quantum-design-ui",
-  "version": "1.8.30",
+  "version": "1.8.31",
   "description": "UI component library for Quantum Design System",
   "module": "dist/index.es.js",
   "jsnext:main": "dist/index.es.js",