@edvisor/product-language 0.5.5 → 0.5.7

package/index.js

@@ -6096,11 +6096,11 @@ const Stepper = props => {
 const FancyBorder = /*#__PURE__*/styled(SpaceBetween).withConfig({
   displayName: "input-field__FancyBorder",
   componentId: "sc-1yq0rb7-0"
-})(["background:", ";border:1px solid ", ";border-radius:6px;box-sizing:border-box;margin-bottom:", ";padding-left:", ";user-select:none;outline-offset:-2px;", "}"], ({
+})(["background:", ";border:1px solid ", ";border-radius:6px;box-sizing:border-box;padding-left:", ";user-select:none;outline-offset:-2px;", "}"], ({
   invalid
 }) => is(invalid) ? Surface.Critical.Subdued : Surface.Default.Default, ({
   invalid
-}) => is(invalid) ? Borders.Critical.Default : Borders.Default.Default, Margin.xxs, Padding.s, ({
+}) => is(invalid) ? Borders.Critical.Default : Borders.Default.Default, Padding.s, ({
   invalid
 }) => !is(invalid) && css([":focus,:focus-within,:active{outline:2px solid ", "}"], Focused.Default));
 const InputLayout = /*#__PURE__*/styled(Flex).withConfig({
@@ -7692,11 +7692,7 @@ const OptionComponent = /*#__PURE__*/memo(props => {
 const MenuWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "menu-container__MenuWrapper",
   componentId: "dadn7s-0"
-})(["z-index:1;position:relative;background:", ";top:", ";box-sizing:border-box;.menu-list{box-sizing:border-box;box-shadow:", ";border:1px solid ", ";background-color:", ";border-radius:6px;opacity:0;transition:opacity 0.1s ease;padding:", ";&:focus{outline:none;}::-webkit-scrollbar{width:6px;height:8px;}::-webkit-scrollbar-thumb{border-radius:4px;background:", ";min-height:50px;}}"], Surface.Default.Default, ({
-  props
-}) => topPosition(props), ({
-  props
-}) => props.menuPosition === "bottom"
+})(["z-index:1;position:relative;background:", ";top:", ";box-sizing:border-box;.menu-list{box-sizing:border-box;box-shadow:", ";border:1px solid ", ";background-color:", ";border-radius:6px;opacity:0;transition:opacity 0.1s ease;padding:", ";&:focus{outline:none;}::-webkit-scrollbar{width:6px;height:8px;}::-webkit-scrollbar-thumb{border-radius:4px;background:", ";min-height:50px;}}"], Surface.Default.Default, props => topPosition(props), props => props.menuPosition === "bottom"
 /* menuPositionType.BOTTOM */
 ? '0px 2px 10px 0px rgba(0, 0, 0, 0.10)' : '0px -2px 10px 0px rgba(0, 0, 0, 0.10)', Borders.Default.Subdued, Surface.Default.Default, Padding.xxs, Surface.Neutral.Default);
 const MenuContainer = props => {
@@ -7708,9 +7704,8 @@ const MenuContainer = props => {
   return jsx(MenuWrapper, Object.assign({
     "data-role": "menu",
     className: className,
-    props: props,
     onClick: onClick
-  }, {
+  }, props, {
     children: children
   }));
 };
@@ -8615,7 +8610,7 @@ const Button = props => {
 const ValueContainer = /*#__PURE__*/styled(SpaceBetween).withConfig({
   displayName: "value__ValueContainer",
   componentId: "sc-1aps7dx-0"
-})(["pointer-events:", ";padding:", " ", ";background:", ";cursor:default;border:1px solid ", ";z-index:0;border-radius:6px;outline-offset:-2px;", " ", " ", ""], props => is(props.disabled) ? 'none' : 'auto', Padding.xs, Padding.none, props => is(props.invalid) ? Surface.Critical.Subdued : Surface.Default.Default, props => is(props.invalid) ? Borders.Critical.Default : Borders.Default.Default, props => is(props.hasLabel) && css(["& div:first-of-type{align-self:flex-start;}"]), props => is(props.menuIsOpen) && css(["outline:2px solid ", ";"], Focused.Default), props => !is(props.disabled) && !is(props.invalid) && `
+})(["pointer-events:", ";padding:", " ", " ", " ", ";background:", ";cursor:default;border:1px solid ", ";z-index:0;border-radius:6px;outline-offset:-2px;", " ", " ", ""], props => is(props.disabled) ? 'none' : 'auto', Padding.xs, Padding.none, Padding.none, Padding.none, props => is(props.invalid) ? Surface.Critical.Subdued : Surface.Default.Default, props => is(props.invalid) ? Borders.Critical.Default : Borders.Default.Default, props => is(props.hasLabel) && css(["& div:first-of-type{align-self:flex-start;}"]), props => is(props.menuIsOpen) && css(["outline:2px solid ", ";"], Focused.Default), props => !is(props.disabled) && !is(props.invalid) && `
 
     &:focus  {
       outline: 2px solid ${Focused.Default}
@@ -8628,7 +8623,7 @@ const ValueContainer = /*#__PURE__*/styled(SpaceBetween).withConfig({
 const ValueWrapper$1 = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "value__ValueWrapper",
   componentId: "sc-1aps7dx-1"
-})(["width:100%;display:", ";"], ({
+})(["width:100%;padding-bottom:", ";display:", ";"], Padding.xs, ({
   label,
   labelPosition
 }) => isDefined(label) && !isEmpty(label) && labelPosition === "top"
@@ -8637,7 +8632,7 @@ const ValueWrapper$1 = /*#__PURE__*/styled(Flex).withConfig({
 const ValueLabel = /*#__PURE__*/styled(Label).withConfig({
   displayName: "value__ValueLabel",
   componentId: "sc-1aps7dx-2"
-})(["padding-left:", ";width:fit-content;white-space:pre;", ""], Padding.xs, ({
+})(["padding-left:", ";margin-bottom:", ";width:fit-content;white-space:pre;", ""], Padding.xs, Margin.xxs, ({
   labelPosition
 }) => labelPosition === "top"
 /* labelPositionType.TOP */
@@ -8724,6 +8719,7 @@ const Value = props => {
   const renderLabel = () => {
     return maybeRender(label, jsx(ValueLabel, Object.assign({
       labelPosition: labelPosition,
+      subtle: true,
       subdued: true
     }, {
       children: label
@@ -9835,7 +9831,7 @@ const Avatar = props => {
 const Text = /*#__PURE__*/styled(Label).withConfig({
   displayName: "input-checkbox__Text",
   componentId: "sc-4vm2q7-0"
-})(["margin-left:", ";user-select:none;"], Margin.xs);
+})(["margin-left:", ";user-select:none;flex:1;"], Margin.xs);
 const Wrapper = /*#__PURE__*/styled.label.withConfig({
   displayName: "input-checkbox__Wrapper",
   componentId: "sc-4vm2q7-1"
@@ -9874,7 +9870,8 @@ const Group = /*#__PURE__*/styled(Flex).withConfig({
 })(["width:100%;flex-direction:column;gap:18px;"]);
 const MultiChoiceList = props => {
   const {
-    options
+    options,
+    className = ''
   } = props;
 
   if (isEmpty(options)) {
@@ -9882,7 +9879,8 @@ const MultiChoiceList = props => {
   }
 
   return jsx(Group, Object.assign({
-    role: "group"
+    role: "group",
+    className: className
   }, {
     children: options.map(option => jsxs("div", {
       children: [jsx(InputCheckbox, Object.assign({

package/lib/components/organisms/multi-choice-list/multi-choice-list.d.ts

@@ -5,6 +5,7 @@ interface IOption extends IInputCheckboxProps {
 }
 interface IMultiChoiceList {
     options: IOption[];
+    className?: string;
 }
 export declare const MultiChoiceList: FC<IMultiChoiceList>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edvisor/product-language",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "license": "MIT",
   "description": "Edvisor.io product-language components",
   "repository": "https://github.com/edvisor-io/front-end/",