@typeolymp/ui-components 1.20.0 → 1.20.1

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 (6) hide show
  1. package/build/components/molecules/Popup/index.d.ts +1 -0
  2. package/build/index.es.js +8 -4
  3. package/build/index.es.js.map +1 -1
  4. package/build/index.js +8 -4
  5. package/build/index.js.map +1 -1
  6. package/package.json +1 -1
package/build/components/molecules/Popup/index.d.ts CHANGED
@@ -3,6 +3,7 @@ export declare type PropsType = {
3
3
  title?: string;
4
4
  content: string | string[] | JSX.Element;
5
5
  contrast?: boolean;
6
+ noStyle?: boolean;
6
7
  children: ReactNode;
7
8
  };
8
9
  declare const Popup: FC<PropsType>;
package/build/index.es.js CHANGED
@@ -17780,7 +17780,7 @@ var PasswordInputField = function (props) {
17780
17780
  return (jsxs(Container$d, { children: [jsx$1(Label$7, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Input.Password, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, helperLocale: props.helperLocale, id: props.name, onChange: onChange, onKeyPress: onKeyPress, onBlur: onBlur })] }));
17781
17781
  };
17782
17782
 
17783
- var PopupContainer = styled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject$1(["\n width: fit-content;\n max-width: 25vw;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n padding: 15px;\n margin-top: 10px;\n border-radius: 6px;\n border: ", ";\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n pointer-events: none;\n z-index: 9;\n"], ["\n width: fit-content;\n max-width: 25vw;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n padding: 15px;\n margin-top: 10px;\n border-radius: 6px;\n border: ", ";\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n pointer-events: none;\n z-index: 9;\n"])), function (_a) {
17783
+ var PopupContainer = styled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject$1(["\n width: fit-content;\n max-width: 25vw;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n padding: 15px;\n margin-top: 10px;\n border-radius: 6px;\n border: 1px solid ", ";\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n pointer-events: none;\n z-index: 9;\n\n ", ";\n"], ["\n width: fit-content;\n max-width: 25vw;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n padding: 15px;\n margin-top: 10px;\n border-radius: 6px;\n border: 1px solid ", ";\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n pointer-events: none;\n z-index: 9;\n\n ", ";\n"])), function (_a) {
17784
17784
  var isVisible = _a.isVisible;
17785
17785
  return (isVisible ? "100%" : "0%");
17786
17786
  }, function (_a) {
@@ -17789,9 +17789,13 @@ var PopupContainer = styled.div(templateObject_1$l || (templateObject_1$l = __ma
17789
17789
  }, function (_a) {
17790
17790
  var x = _a.x;
17791
17791
  return (x ? "".concat(x, "px") : "");
17792
- }, "1px solid ".concat(theme.colors.lightGray.dark), function (_a) {
17792
+ }, theme.colors.lightGray.dark, function (_a) {
17793
17793
  var contrast = _a.contrast;
17794
17794
  return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
17795
+ }, function (_a) {
17796
+ var noStyle = _a.noStyle;
17797
+ return noStyle &&
17798
+ "\n max-width: 100%;\n padding: 0;\n border-radius: 0;\n border: none;\n background-color: transparent;\n box-shadow: none;\n ";
17795
17799
  });
17796
17800
  var templateObject_1$l;
17797
17801
 
@@ -17826,7 +17830,7 @@ var Popup = function (props) {
17826
17830
  });
17827
17831
  }
17828
17832
  });
17829
- return (jsxs(Fragment$1, { children: [children, jsxs(PopupContainer, __assign$2({}, position, { isVisible: isVisible, ref: popupRef, contrast: props.contrast }, { children: [props.title && (jsxs(Fragment$1, { children: [jsx$1(Heading, __assign$2({ type: "h6" }, { children: props.title })), jsx$1(Spacer, { vertical: 10 })] })), typeof props.content === "string" && (jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: props.content }))), Array.isArray(props.content) &&
17833
+ return (jsxs(Fragment$1, { children: [children, jsxs(PopupContainer, __assign$2({}, position, { isVisible: isVisible, noStyle: props.noStyle, ref: popupRef, contrast: props.contrast }, { children: [props.title && (jsxs(Fragment$1, { children: [jsx$1(Heading, __assign$2({ type: "h6" }, { children: props.title })), jsx$1(Spacer, { vertical: 10 })] })), typeof props.content === "string" && (jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: props.content }))), Array.isArray(props.content) &&
17830
17834
  props.content.length > 0 &&
17831
17835
  props.content.map(function (item, index) { return (jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: item }), "".concat(item, "-").concat(index))); }), typeof props.content === "object" && props.content] }))] }));
17832
17836
  };
@@ -48333,7 +48337,7 @@ var Keyboard$1 = function (props) {
48333
48337
  keys[76].character === props.activeKey }), jsx$1(Key$1, { characters: ["Shift"], color: keys[31].color, active: shiftKeys.left.includes(props.activeKey) })] }), jsxs(SpacebarRow, { children: [jsx$1(Key$1, {}), jsx$1(Key$1, {}), jsx$1(Key$1, {}), jsx$1(Key$1, {}), jsx$1(Key$1, { color: keys[1].color, active: keys[1].character === props.activeKey }), jsx$1(Key$1, {}), jsx$1(Key$1, {}), jsx$1(Key$1, {}), jsx$1(Key$1, {})] })] }));
48334
48338
  };
48335
48339
 
48336
- var Container$3 = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject$1(["\n min-width: 670px;\n width: 100%;\n border-radius: 10px;\n padding: 15px;\n border: 1px solid ", ";\n background-color: ", ";\n box-shadow: 0 4px 0 ", ";\n\n display: flex;\n flex-direction: column;\n gap: 10px;\n"], ["\n min-width: 670px;\n width: 100%;\n border-radius: 10px;\n padding: 15px;\n border: 1px solid ", ";\n background-color: ", ";\n box-shadow: 0 4px 0 ", ";\n\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.base, theme.colors.lightGray.darker);
48340
+ var Container$3 = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject$1(["\n min-width: 720px;\n width: 100%;\n border-radius: 10px;\n padding: 15px;\n box-sizing: border-box;\n border: 1px solid ", ";\n background-color: ", ";\n box-shadow: 0 4px 0 ", ";\n\n display: flex;\n flex-direction: column;\n gap: 10px;\n"], ["\n min-width: 720px;\n width: 100%;\n border-radius: 10px;\n padding: 15px;\n box-sizing: border-box;\n border: 1px solid ", ";\n background-color: ", ";\n box-shadow: 0 4px 0 ", ";\n\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.base, theme.colors.lightGray.darker);
48337
48341
  var Row = styled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject$1(["\n min-height: 40px;\n height: 100%;\n display: grid;\n gap: 7px;\n"], ["\n min-height: 40px;\n height: 100%;\n display: grid;\n gap: 7px;\n"])));
48338
48342
  var Row1 = styled(Row)(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject$1(["\n grid-template-columns: repeat(13, 1fr) 1.5fr;\n"], ["\n grid-template-columns: repeat(13, 1fr) 1.5fr;\n"])));
48339
48343
  var Row2 = styled(Row)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject$1(["\n grid-template-columns: 1.5fr repeat(13, 1fr);\n"], ["\n grid-template-columns: 1.5fr repeat(13, 1fr);\n"])));