ods-component-lib 1.13.0 → 1.13.2

package/dist/index.modern.js

@@ -37,13 +37,6 @@ function _taggedTemplateLiteralLoose(strings, raw) {
 var _templateObject;
 var StyledAutoComplete = styled(AutoComplete)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n //\n"])));
 
-function OdsAutoComplete(props) {
-  return React.createElement(React.Fragment, null, React.createElement(StyledAutoComplete, Object.assign({}, props), props.children));
-}
-
-var _templateObject$1;
-var StyledButton = styled(Button)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  box-shadow: none;\n"])));
-
 var lightTheme = {
   token: {
     blue1: "#e6f4ff",
@@ -326,31 +319,31 @@ var lightTheme = {
     marginXl: "48px",
     controlPaddingHorizontal: "12px",
     controlPaddingHorizontalSm: "8px",
-    baseBaseNormal: "400 14px/22px 'SF Pro Text'",
-    baseBaseStrong: "600 14px/22px 'SF Pro Text'",
-    baseBaseUnderline: "400 14px/22px 'SF Pro Text'",
-    baseBaseDelete: "400 14px/22px 'SF Pro Text'",
-    baseBaseItalic: "Regular Italic 14px/22px 'SF Pro Text'",
-    smSmNormal: "400 12px/20px 'SF Pro Text'",
-    smSmStrong: "600 12px/20px 'SF Pro Text'",
-    smSmUnderline: "400 12px/20px 'SF Pro Text'",
-    smSmDelete: "400 12px/20px 'SF Pro Text'",
-    smSmItalic: "Regular Italic 12px/20px 'SF Pro Text'",
-    lgLgNormal: "400 16px/24px 'SF Pro Text'",
-    lgLgStrong: "600 16px/24px 'SF Pro Text'",
-    lgLgUnderline: "400 16px/24px 'SF Pro Text'",
-    lgLgDelete: "400 16px/24px 'SF Pro Text'",
-    lgLgItalic: "Regular Italic 16px/24px 'SF Pro Text'",
-    xlXlNormal: "400 20px/28px 'SF Pro Text'",
-    xlXlStrong: "600 20px/28px 'SF Pro Text'",
-    xlXlUnderline: "400 20px/28px 'SF Pro Text'",
-    xlXlDelete: "400 20px/28px 'SF Pro Text'",
-    xlXlItalic: "Regular Italic 20px/28px 'SF Pro Text'",
-    headingHeading1: "600 38px/46px 'SF Pro Text'",
-    headingHeading2: "600 30px/38px 'SF Pro Text'",
-    headingHeading3: "600 24px/32px 'SF Pro Text'",
-    headingHeading4: "600 20px/28px 'SF Pro Text'",
-    headingHeading5: "600 16px/24px 'SF Pro Text'",
+    baseBaseNormal: "400 14px/22px 'Manrope'",
+    baseBaseStrong: "600 14px/22px 'Manrope'",
+    baseBaseUnderline: "400 14px/22px 'Manrope'",
+    baseBaseDelete: "400 14px/22px 'Manrope'",
+    baseBaseItalic: "Regular Italic 14px/22px 'Manrope'",
+    smSmNormal: "400 12px/20px 'Manrope'",
+    smSmStrong: "600 12px/20px 'Manrope'",
+    smSmUnderline: "400 12px/20px 'Manrope'",
+    smSmDelete: "400 12px/20px 'Manrope'",
+    smSmItalic: "Regular Italic 12px/20px 'Manrope'",
+    lgLgNormal: "400 16px/24px 'Manrope'",
+    lgLgStrong: "600 16px/24px 'Manrope'",
+    lgLgUnderline: "400 16px/24px 'Manrope'",
+    lgLgDelete: "400 16px/24px 'Manrope'",
+    lgLgItalic: "Regular Italic 16px/24px 'Manrope'",
+    xlXlNormal: "400 20px/28px 'Manrope'",
+    xlXlStrong: "600 20px/28px 'Manrope'",
+    xlXlUnderline: "400 20px/28px 'Manrope'",
+    xlXlDelete: "400 20px/28px 'Manrope'",
+    xlXlItalic: "Regular Italic 20px/28px 'Manrope'",
+    headingHeading1: "600 38px/46px 'Manrope'",
+    headingHeading2: "600 30px/38px 'Manrope'",
+    headingHeading3: "600 24px/32px 'Manrope'",
+    headingHeading4: "600 20px/28px 'Manrope'",
+    headingHeading5: "600 16px/24px 'Manrope'",
     fontWeightItalic: "Regular Italic",
     paddingContentHorizontalLg: "24px",
     paddingContentVerticalLg: "16px",
@@ -376,6 +369,15 @@ var lightTheme = {
   }
 };
 
+function OdsAutoComplete(props) {
+  return React.createElement(React.Fragment, null, React.createElement(ThemeProvider, {
+    theme: lightTheme
+  }, React.createElement(StyledAutoComplete, Object.assign({}, props), props.children)));
+}
+
+var _templateObject$1;
+var StyledButton = styled(Button)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  box-shadow: none;\n"])));
+
 function OdsButton(props) {
   return React.createElement(React.Fragment, null, React.createElement(ThemeProvider, {
     theme: lightTheme
@@ -396,19 +398,23 @@ var items = [{
   label: '3rd item'
 }];
 function OdsDropdownButton(props) {
-  return React.createElement(React.Fragment, null, React.createElement(Dropdown.Button, {
+  return React.createElement(React.Fragment, null, React.createElement(ThemeProvider, {
+    theme: lightTheme
+  }, React.createElement(Dropdown.Button, {
     menu: {
       items: items,
       onClick: onMenuClick
     }
-  }, props.children));
+  }, props.children)));
 }
 
 var _templateObject$2;
 var StyledCalendar = styled(Calendar)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  width:100%;\n"])));
 
 function OdsCalendar(props) {
-  return React.createElement(React.Fragment, null, React.createElement(StyledCalendar, Object.assign({}, props)));
+  return React.createElement(React.Fragment, null, React.createElement(ThemeProvider, {
+    theme: lightTheme
+  }, React.createElement(StyledCalendar, Object.assign({}, props))));
 }
 
 var _templateObject$3;
@@ -416,34 +422,42 @@ var StyledCard = styled(Card)(_templateObject$3 || (_templateObject$3 = _taggedT
 
 var Meta = Card$1.Meta;
 function OdsCard(props) {
-  return React.createElement(React.Fragment, null, React.createElement(StyledCard, Object.assign({}, props)), props.isEnableMeta && React.createElement(Meta, {
+  return React.createElement(React.Fragment, null, React.createElement(ThemeProvider, {
+    theme: lightTheme
+  }, React.createElement(StyledCard, Object.assign({}, props)), props.isEnableMeta && React.createElement(Meta, {
     title: props.metaTitle,
     description: props.metaDescription
-  }));
+  })));
 }
 
 var _templateObject$4;
 var StyledCheckbox = styled(Checkbox)(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  box-shadow: none;\n"])));
 
 function OdsCheckbox(props) {
-  return React.createElement(React.Fragment, null, React.createElement(StyledCheckbox, Object.assign({}, props)));
+  return React.createElement(React.Fragment, null, React.createElement(ThemeProvider, {
+    theme: lightTheme
+  }, React.createElement(StyledCheckbox, Object.assign({}, props))));
 }
 
 function OdsCheckboxGroup(props) {
-  return React.createElement(React.Fragment, null, React.createElement(Checkbox.Group, {
+  return React.createElement(React.Fragment, null, React.createElement(ThemeProvider, {
+    theme: lightTheme
+  }, React.createElement(Checkbox.Group, {
     options: props.options
-  }, props.children));
+  }, props.children)));
 }
 
 var _templateObject$5;
 var StyledDatepicker = styled(DatePicker)(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  width:100%;\n"])));
 
 function OdsDateRangePicker(props) {
-  return React.createElement(React.Fragment, null, React.createElement(StyledDatepicker.RangePicker, Object.assign({}, props, {
+  return React.createElement(React.Fragment, null, React.createElement(ThemeProvider, {
+    theme: lightTheme
+  }, React.createElement(StyledDatepicker.RangePicker, Object.assign({}, props, {
     style: {
       width: '100%'
     }
-  })));
+  }))));
 }
 
 var _templateObject$6;
@@ -464,16 +478,20 @@ function OdsCollapse(props) {
     items: props.menuItems,
     onClick: handleMenuClick
   };
-  return React.createElement(React.Fragment, null, React.createElement(StyledDropdown, {
+  return React.createElement(React.Fragment, null, React.createElement(ThemeProvider, {
+    theme: lightTheme
+  }, React.createElement(StyledDropdown, {
     menu: menuProps
-  }, props.children));
+  }, props.children)));
 }
 
 var _templateObject$8;
 var StyledInput = styled(Input)(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 function OdsInput(props) {
-  return React.createElement(React.Fragment, null, React.createElement(StyledInput, Object.assign({}, props), props === null || props === void 0 ? void 0 : props.children));
+  return React.createElement(React.Fragment, null, React.createElement(ThemeProvider, {
+    theme: lightTheme
+  }, React.createElement(StyledInput, Object.assign({}, props), props === null || props === void 0 ? void 0 : props.children)));
 }
 
 var layout = {
@@ -555,11 +573,13 @@ function OdsImage(props) {
 }
 
 function OdsPassword(props) {
-  return React.createElement(React.Fragment, null, React.createElement(StyledInput.Password, Object.assign({}, props, {
+  return React.createElement(React.Fragment, null, React.createElement(ThemeProvider, {
+    theme: lightTheme
+  }, React.createElement(StyledInput.Password, Object.assign({}, props, {
     iconRender: function iconRender(visible) {
       return visible ? React.createElement(EyeTwoTone, null) : React.createElement(EyeInvisibleOutlined, null);
     }
-  })));
+  }))));
 }
 
 function OdsPhoneInput(props) {
@@ -575,18 +595,24 @@ function OdsPhoneInput(props) {
 }
 
 function OdsSearch(props) {
-  return React.createElement(React.Fragment, null, React.createElement(StyledInput.Search, Object.assign({}, props), props === null || props === void 0 ? void 0 : props.children));
+  return React.createElement(React.Fragment, null, React.createElement(ThemeProvider, {
+    theme: lightTheme
+  }, React.createElement(StyledInput.Search, Object.assign({}, props), props === null || props === void 0 ? void 0 : props.children)));
 }
 
 function OdsTextArea(props) {
-  return React.createElement(React.Fragment, null, React.createElement(StyledInput.TextArea, Object.assign({}, props), props === null || props === void 0 ? void 0 : props.children));
+  return React.createElement(React.Fragment, null, React.createElement(ThemeProvider, {
+    theme: lightTheme
+  }, React.createElement(StyledInput.TextArea, Object.assign({}, props), props === null || props === void 0 ? void 0 : props.children)));
 }
 
 var _templateObject$9;
 var StyledInputNumber = styled(InputNumber)(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 function OdsInputNumber(props) {
-  return React.createElement(React.Fragment, null, React.createElement(StyledInputNumber, Object.assign({}, props)));
+  return React.createElement(React.Fragment, null, React.createElement(ThemeProvider, {
+    theme: lightTheme
+  }, React.createElement(StyledInputNumber, Object.assign({}, props))));
 }
 
 var _templateObject$a;
@@ -691,8 +717,244 @@ var OdsNotification = function OdsNotification(props) {
 var _templateObject$b;
 var StyledRadio = styled(Radio)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n //\n"])));
 
+var darkTheme = {
+  token: {
+    blue1: "#111a2c",
+    blue2: "#112545",
+    blue3: "#15325b",
+    blue4: "#15417e",
+    blue5: "#1554ad",
+    blue6: "#1668dc",
+    blue7: "#3c89e8",
+    blue8: "#65a9f3",
+    blue9: "#8dc5f8",
+    blue10: "#b7dcfa",
+    purple1: "#1a1325",
+    purple2: "#24163a",
+    purple3: "#301c4d",
+    purple4: "#3e2069",
+    purple5: "#51258f",
+    purple6: "#642ab5",
+    purple7: "#854eca",
+    purple8: "#ab7ae0",
+    purple9: "#cda8f0",
+    purple10: "#ebd7fa",
+    cyan1: "#112123",
+    cyan2: "#113536",
+    cyan3: "#144848",
+    cyan4: "#146262",
+    cyan5: "#138585",
+    cyan6: "#13a8a8",
+    cyan7: "#33bcb7",
+    cyan8: "#58d1c9",
+    cyan9: "#84e2d8",
+    cyan10: "#b2f1e8",
+    green1: "#162312",
+    green2: "#1d3712",
+    green3: "#274916",
+    green4: "#306317",
+    green5: "#3c8618",
+    green6: "#49aa19",
+    green7: "#6abe39",
+    green8: "#8fd460",
+    green9: "#b2e58b",
+    green10: "#d5f2bb",
+    magenta1: "#291321",
+    magenta2: "#40162f",
+    magenta3: "#551c3b",
+    magenta4: "#75204f",
+    magenta5: "#a02669",
+    magenta6: "#cb2b83",
+    magenta7: "#e0529c",
+    magenta8: "#f37fb7",
+    magenta9: "#f8a8cc",
+    magenta10: "#fad2e3",
+    red1: "#2a1215",
+    red2: "#431418",
+    red3: "#58181c",
+    red4: "#791a1f",
+    red5: "#a61d24",
+    red6: "#d32029",
+    red7: "#e84749",
+    red8: "#f37370",
+    red9: "#f89f9a",
+    red10: "#fac8c3",
+    orange1: "#2b1d11",
+    orange2: "#442a11",
+    orange3: "#593815",
+    orange4: "#7c4a15",
+    orange5: "#aa6215",
+    orange6: "#d87a16",
+    orange7: "#e89a3c",
+    orange8: "#f3b765",
+    orange9: "#f8cf8d",
+    orange10: "#fae3b7",
+    yellow1: "#2b2611",
+    yellow2: "#443b11",
+    yellow3: "#595014",
+    yellow4: "#7c6e14",
+    yellow5: "#aa9514",
+    yellow6: "#d8bd14",
+    yellow7: "#e8d639",
+    yellow8: "#f3ea62",
+    yellow9: "#f8f48b",
+    yellow10: "#fafab5",
+    volcano1: "#2b1611",
+    volcano2: "#441d12",
+    volcano3: "#592716",
+    volcano4: "#7c3118",
+    volcano5: "#aa3e19",
+    volcano6: "#d84a1b",
+    volcano7: "#e87040",
+    volcano8: "#f3956a",
+    volcano9: "#f8b692",
+    volcano10: "#fad4bc",
+    geekblue1: "#131629",
+    geekblue2: "#161d40",
+    geekblue3: "#1c2755",
+    geekblue4: "#203175",
+    geekblue5: "#263ea0",
+    geekblue6: "#2b4acb",
+    geekblue7: "#5273e0",
+    geekblue8: "#7f9ef3",
+    geekblue9: "#a8c1f8",
+    geekblue10: "#d2e0fa",
+    lime1: "#1f2611",
+    lime2: "#2e3c10",
+    lime3: "#3e4f13",
+    lime4: "#536d13",
+    lime5: "#6f9412",
+    lime6: "#8bbb11",
+    lime7: "#a9d134",
+    lime8: "#c9e75d",
+    lime9: "#e4f88b",
+    lime10: "#f0fab5",
+    gold1: "#2b2111",
+    gold2: "#443111",
+    gold3: "#594214",
+    gold4: "#7c5914",
+    gold5: "#aa7714",
+    gold6: "#d89614",
+    gold7: "#e8b339",
+    gold8: "#f3cc62",
+    gold9: "#f8df8b",
+    gold10: "#faedb5",
+    colorTextBase: "#ffffff",
+    colorBgBase: "#000",
+    colorTextLightSolid: "#ffffff",
+    colorError: "#e84749",
+    colorWarning: "#d89614",
+    colorSuccess: "#49aa19",
+    colorInfo: "#1668dc",
+    colorText: "rgba(255, 255, 255, 0.85)",
+    colorTextSecondary: "rgba(255, 255, 255, 0.65)",
+    colorTextTertiary: "rgba(255, 255, 255, 0.45)",
+    colorTextQuaternary: "rgba(255, 255, 255, 0.25)",
+    colorFill: "rgba(255, 255, 255, 0.18)",
+    colorFillSecondary: "rgba(255, 255, 255, 0.12)",
+    colorFillTertiary: "rgba(255, 255, 255, 0.08)",
+    colorBgContainer: "#141414",
+    colorFillQuaternary: "rgba(255, 255, 255, 0.04)",
+    colorBgLayout: "#000",
+    colorBgElevated: "#1F1F1F",
+    colorBgSpotlight: "#424242",
+    colorBorder: "#424242",
+    colorBorderSecondary: "#303030",
+    colorSplit: "rgba(255, 255, 255, 0.06)",
+    colorPrimary: "red",
+    colorPrimaryBg: "red",
+    colorPrimaryBgHover: "#112545",
+    colorPrimaryBorder: "#15325b",
+    colorPrimaryBorderHover: "#15417e",
+    colorPrimaryHover: "#3c89e8",
+    colorPrimaryBase: "#1668dc",
+    colorPrimaryActive: "#1554ad",
+    colorPrimaryTextHover: "#65a9f3",
+    colorPrimaryText: "#8dc5f8",
+    colorPrimaryTextActive: "#b7dcfa",
+    colorSuccessBg: "#162312",
+    colorSuccessBgHover: "#1d3712",
+    colorSuccessBorder: "#274916",
+    colorSuccessBorderHover: "#306317",
+    colorSuccessHover: "#6abe39",
+    colorSuccessBase: "#49aa19",
+    colorSuccessActive: "#3c8618",
+    colorSuccessTextHover: "#8fd460",
+    colorSuccessText: "#b2e58b",
+    colorSuccessTextActive: "#d5f2bb",
+    colorWarningBg: "#2b2111",
+    colorWarningBgHover: "#443111",
+    colorWarningBorder: "#594214",
+    colorWarningBorderHover: "#7c5914",
+    colorWarningHover: "#e8b339",
+    colorWarningBase: "#d89614",
+    colorWarningActive: "#aa7714",
+    colorWarningTextHover: "#f3cc62",
+    colorWarningText: "#f8df8b",
+    colorWarningTextActive: "#faedb5",
+    colorErrorBg: "#2a1215",
+    colorErrorBgHover: "#431418",
+    colorErrorBorder: "#58181c",
+    colorErrorBorderHover: "#791a1f",
+    colorErrorHover: "#f37370",
+    colorErrorBase: "#e84749",
+    colorErrorActive: "#791a1f",
+    colorErrorTextHover: "#f37370",
+    colorErrorText: "#f89f9a",
+    colorErrorTextActive: "#fac8c3",
+    colorInfoBg: "#111a2c",
+    colorInfoBgHover: "#112545",
+    colorInfoBorder: "#15325b",
+    colorInfoBorderHover: "#15417e",
+    colorInfoHover: "#3c89e8",
+    colorInfoBase: "#1668dc",
+    colorInfoActive: "#1554ad",
+    colorInfoTextHover: "#65a9f3",
+    colorInfoText: "#8dc5f8",
+    colorInfoTextActive: "#b7dcfa",
+    colorBgMask: "rgba(0, 0, 0, 0.45)",
+    colorFillContent: "rgba(255, 255, 255, 0.12)",
+    colorFillContentHover: "rgba(255, 255, 255, 0.18)",
+    colorFillAlter: "rgba(255, 255, 255, 0.04)",
+    colorBgContainerDisabled: "rgba(255, 255, 255, 0.08)",
+    colorBorderBg: "#141414",
+    colorTextPlaceholder: "rgba(255, 255, 255, 0.25)",
+    colorTextDisabled: "rgba(255, 255, 255, 0.25)",
+    colorTextHeading: "rgba(255, 255, 255, 0.85)",
+    colorTextLabel: "rgba(255, 255, 255, 0.65)",
+    colorTextDescription: "rgba(255, 255, 255, 0.45)",
+    colorBgTextHover: "rgba(255, 255, 255, 0.12)",
+    colorBgTextActive: "rgba(255, 255, 255, 0.18)",
+    colorIcon: "rgba(255, 255, 255, 0.45)",
+    colorIconHover: "rgba(255, 255, 255, 0.85)",
+    colorLink: "#1668dc",
+    colorLinkHover: "#3c89e8",
+    colorLinkActive: "#1554ad",
+    colorHighlight: "#f37370",
+    controlOutline: "#111a2c",
+    colorWarningOutline: "#2b2111",
+    colorErrorOutline: "#2a1215",
+    controlItemBgHover: "rgba(255, 255, 255, 0.08)",
+    controlItemBgActive: "#111a2c",
+    controlItemBgActiveHover: "#112545",
+    controlItemBgActiveDisabled: "rgba(255, 255, 255, 0.18)",
+    controlTmpOutline: "rgba(255, 255, 255, 0.04)",
+    colorItemText: "rgba(255, 255, 255, 0.65)",
+    colorItemTextDisabled: "rgba(255, 255, 255, 0.25)",
+    tooltipBg: "#424242",
+    segmentedBgColorSelected: "#1f1f1f",
+    segmentedGroupBg: "#000000"
+  }
+};
+
 function OdsRadio(props) {
-  return React.createElement(React.Fragment, null, React.createElement(StyledRadio, Object.assign({}, props), props.children));
+  var providerThemeName = lightTheme;
+  if (props.theme) {
+    providerThemeName = props.theme === "dark" ? darkTheme : lightTheme;
+  }
+  return React.createElement(React.Fragment, null, React.createElement(ThemeProvider, {
+    theme: providerThemeName
+  }, React.createElement(StyledRadio, Object.assign({}, props), props.children)));
 }
 
 function OdsRadioGroup(props) {
@@ -851,15 +1113,21 @@ function OdsLink(props) {
 }
 
 function OdsParagraph(props) {
-  return React.createElement(React.Fragment, null, React.createElement(StyledtTypography.Paragraph, Object.assign({}, props), props));
+  return React.createElement(React.Fragment, null, React.createElement(ThemeProvider, {
+    theme: lightTheme
+  }, React.createElement(StyledtTypography.Paragraph, Object.assign({}, props), props)));
 }
 
 function OdsText(props) {
-  return React.createElement(React.Fragment, null, React.createElement(StyledtTypography.Text, Object.assign({}, props), props === null || props === void 0 ? void 0 : props.children));
+  return React.createElement(React.Fragment, null, React.createElement(ThemeProvider, {
+    theme: lightTheme
+  }, React.createElement(StyledtTypography.Text, Object.assign({}, props), props === null || props === void 0 ? void 0 : props.children)));
 }
 
 function OdsTitle(props) {
-  return React.createElement(React.Fragment, null, React.createElement(StyledtTypography.Title, Object.assign({}, props), props === null || props === void 0 ? void 0 : props.children));
+  return React.createElement(React.Fragment, null, React.createElement(ThemeProvider, {
+    theme: lightTheme
+  }, React.createElement(StyledtTypography.Title, Object.assign({}, props), props === null || props === void 0 ? void 0 : props.children)));
 }
 
 function OdsLogin(props) {
@@ -930,7 +1198,7 @@ function grid(props) {
   return React.createElement(React.Fragment, null, React.createElement(DataGrid, {
     dataSource: props.dataSource,
     keyExpr: props.keyExpr,
-    allowColumnResizing: props.allowColumnResizing !== undefined ? props.allowColumnResizing : false,
+    allowColumnResizing: true,
     columnResizingMode: "widget",
     onRowInserted: props.onRowInserted,
     onRowUpdated: props.onRowUpdated,
@@ -940,6 +1208,7 @@ function grid(props) {
     showRowLines: true,
     showBorders: true,
     columnAutoWidth: true,
+    width: "100%",
     onEditCanceling: props.onEditCanceling
   }, React.createElement(Paging, {
     enabled: true,