ods-component-lib 1.12.2 → 1.13.0

package/dist/index.js

@@ -3,7 +3,8 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 var React = require('react');
 var React__default = _interopDefault(React);
 var antd = require('antd');
-var styled = _interopDefault(require('styled-components'));
+var styled = require('styled-components');
+var styled__default = _interopDefault(styled);
 var Card = _interopDefault(require('antd/es/card/Card'));
 var icons = require('@ant-design/icons');
 require('react-phone-input-2/lib/style.css');
@@ -38,17 +39,351 @@ function _taggedTemplateLiteralLoose(strings, raw) {
 }
 
 var _templateObject;
-var StyledAutoComplete = styled(antd.AutoComplete)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n //\n"])));
+var StyledAutoComplete = styled__default(antd.AutoComplete)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 function OdsAutoComplete(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledAutoComplete, Object.assign({}, props), props.children));
 }
 
 var _templateObject$1;
-var StyledButton = styled(antd.Button)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  box-shadow: none;\n"])));
+var StyledButton = styled__default(antd.Button)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  box-shadow: none;\n"])));
+
+var lightTheme = {
+  token: {
+    blue1: "#e6f4ff",
+    blue2: "#bae0ff",
+    blue3: "#91caff",
+    blue4: "#69b1ff",
+    blue5: "#4096ff",
+    blue6: "#1677ff",
+    blue7: "#0958d9",
+    blue8: "#003eb3",
+    blue9: "#002c8c",
+    blue10: "#001d66",
+    purple1: "#f9f0ff",
+    purple2: "#efdbff",
+    purple3: "#d3adf7",
+    purple4: "#b37feb",
+    purple5: "#9254de",
+    purple6: "#722ed1",
+    purple7: "#531dab",
+    purple8: "#391085",
+    purple9: "#22075e",
+    purple10: "#120338",
+    cyan1: "#e6fffb",
+    cyan2: "#b5f5ec",
+    cyan3: "#87e8de",
+    cyan4: "#5cdbd3",
+    cyan5: "#36cfc9",
+    cyan6: "#13c2c2",
+    cyan7: "#08979c",
+    cyan8: "#006d75",
+    cyan9: "#00474f",
+    cyan10: "#002329",
+    green1: "#f6ffed",
+    green2: "#d9f7be",
+    green3: "#b7eb8f",
+    green4: "#95de64",
+    green5: "#73d13d",
+    green6: "#52c41a",
+    green7: "#389e0d",
+    green8: "#237804",
+    green9: "#135200",
+    green10: "#092b00",
+    magenta1: "#fff0f6",
+    magenta2: "#ffd6e7",
+    magenta3: "#ffadd2",
+    magenta4: "#ff85c0",
+    magenta5: "#f759ab",
+    magenta6: "#eb2f96",
+    magenta7: "#c41d7f",
+    magenta8: "#9e1068",
+    magenta9: "#780650",
+    magenta10: "#520339",
+    red1: "#fff1f0",
+    red2: "#ffccc7",
+    red3: "#ffa39e",
+    red4: "#ff7875",
+    red5: "#ff4d4f",
+    red6: "#f5222d",
+    red7: "#cf1322",
+    red8: "#a8071a",
+    red9: "#820014",
+    red10: "#5c0011",
+    orange1: "#fff7e6",
+    orange2: "#ffe7ba",
+    orange3: "#ffd591",
+    orange4: "#ffc069",
+    orange5: "#ffa940",
+    orange6: "#fa8c16",
+    orange7: "#d46b08",
+    orange8: "#ad4e00",
+    orange9: "#873800",
+    orange10: "#612500",
+    yellow1: "#feffe6",
+    yellow2: "#ffffb8",
+    yellow3: "#fffb8f",
+    yellow4: "#fff566",
+    yellow5: "#ffec3d",
+    yellow6: "#fadb14",
+    yellow7: "#d4b106",
+    yellow8: "#ad8b00",
+    yellow9: "#876800",
+    yellow10: "#614700",
+    volcano1: "#fff2e8",
+    volcano2: "#ffd8bf",
+    volcano3: "#ffbb96",
+    volcano4: "#ff9c6e",
+    volcano5: "#ff7a45",
+    volcano6: "#fa541c",
+    volcano7: "#d4380d",
+    volcano8: "#ad2102",
+    volcano9: "#871400",
+    volcano10: "#610b00",
+    geekblue1: "#f0f5ff",
+    geekblue2: "#d6e4ff",
+    geekblue3: "#adc6ff",
+    geekblue4: "#85a5ff",
+    geekblue5: "#597ef7",
+    geekblue6: "#2f54eb",
+    geekblue7: "#1d39c4",
+    geekblue8: "#10239e",
+    geekblue9: "#061178",
+    geekblue10: "#030852",
+    lime1: "#fcffe6",
+    lime2: "#f4ffb8",
+    lime3: "#eaff8f",
+    lime4: "#d3f261",
+    lime5: "#bae637",
+    lime6: "#a0d911",
+    lime7: "#7cb305",
+    lime8: "#5b8c00",
+    lime9: "#3f6600",
+    lime10: "#254000",
+    gold1: "#fffbe6",
+    gold2: "#fff1b8",
+    gold3: "#ffe58f",
+    gold4: "#ffd666",
+    gold5: "#ffc53d",
+    gold6: "#faad14",
+    gold7: "#d48806",
+    gold8: "#ad6800",
+    gold9: "#874d00",
+    gold10: "#613400",
+    colorTextBase: "#000",
+    colorTextLightSolid: "#ffffff",
+    colorBgBase: "#ffffff",
+    fontFamily: "Manrope",
+    fontSize: "14px",
+    lineWidth: "1px",
+    borderRadius: "6px",
+    sizeUnit: "4px",
+    sizePopupArrow: "16px",
+    controlHeight: "32px",
+    opacityImage: "1",
+    sizeStep: "4px",
+    colorPrimary: "#1677ff",
+    colorError: "#ff4d4f",
+    colorWarning: "#faad14",
+    colorSuccess: "#52c41a",
+    colorInfo: "#1677ff",
+    colorSecondary: "#F9B515",
+    sizeXxl: "48px",
+    sizeXl: "32px",
+    sizeLg: "24px",
+    sizeMd: "20px",
+    sizeMs: "16px",
+    size: "16px",
+    sizeSm: "12px",
+    sizeXs: "8px",
+    sizeXxs: "4px",
+    controlHeightSm: "24px",
+    controlHeightXs: "16px",
+    controlHeightLg: "40px",
+    borderRadiusXs: "2px",
+    borderRadiusSm: "4px",
+    borderRadiusLg: "8px",
+    borderRadiusOuter: "4px",
+    colorText: "rgba(0, 0, 0, 0.88)",
+    colorTextSecondary: "rgba(0, 0, 0, 0.65)",
+    colorTextTertiary: "rgba(0, 0, 0, 0.45)",
+    colorTextQuaternary: "rgba(0, 0, 0, 0.25)",
+    colorFill: "rgba(0, 0, 0, 0.15)",
+    colorFillSecondary: "rgba(0, 0, 0, 0.06)",
+    colorFillTertiary: "rgba(0, 0, 0, 0.04)",
+    colorBgContainer: "#ffffff",
+    colorFillQuaternary: "rgba(0, 0, 0, 0.02)",
+    colorBgLayout: "#f5f5f5",
+    colorBgElevated: "#ffffff",
+    colorBgSpotlight: "rgba(0, 0, 0, 0.85)",
+    colorBorder: "rgba(0, 0, 0, 0.15)",
+    colorBorderSecondary: "rgba(0, 0, 0, 0.06)",
+    colorSplit: "rgba(0, 0, 0, 0.06)",
+    colorPrimaryBg: "#e6f4ff",
+    colorPrimaryBgHover: "#bae0ff",
+    colorPrimaryBorder: "#91caff",
+    colorPrimaryBorderHover: "#69b1ff",
+    colorPrimaryHover: "#4096ff",
+    colorPrimaryBase: "#1677ff",
+    colorPrimaryActive: "#0958d9",
+    colorPrimaryTextHover: "#003eb3",
+    colorPrimaryText: "#002c8c",
+    colorPrimaryTextActive: "#001d66",
+    colorSuccessBg: "#f6ffed",
+    colorSuccessBgHover: "#d9f7be",
+    colorSuccessBorder: "#b7eb8f",
+    colorSuccessBorderHover: "#95de64",
+    colorSuccessHover: "#73d13d",
+    colorSuccessBase: "#52c41a",
+    colorSuccessActive: "#389e0d",
+    colorSuccessTextHover: "#237804",
+    colorSuccessText: "#135200",
+    colorSuccessTextActive: "#092b00",
+    colorWarningBg: "#fffbe6",
+    colorWarningBgHover: "#fff1b8",
+    colorWarningBorder: "#ffe58f",
+    colorWarningBorderHover: "#ffd666",
+    colorWarningHover: "#ffc53d",
+    colorWarningBase: "#faad14",
+    colorWarningActive: "#d48806",
+    colorWarningTextHover: "#ad6800",
+    colorWarningText: "#874d00",
+    colorWarningTextActive: "#613400",
+    colorErrorBg: "#fff1f0",
+    colorErrorBgHover: "#ffccc7",
+    colorErrorBorder: "#ffa39e",
+    colorErrorBorderHover: "#ff7875",
+    colorErrorHover: "#ff7875",
+    colorErrorBase: "#ff4d4f",
+    colorErrorActive: "#cf1322",
+    colorErrorTextHover: "#a8071a",
+    colorErrorText: "#820014",
+    colorErrorTextActive: "#5c0011",
+    colorInfoBg: "#e6f4ff",
+    colorInfoBgHover: "#bae0ff",
+    colorInfoBorder: "#91caff",
+    colorInfoBorderHover: "#69b1ff",
+    colorInfoHover: "#4096ff",
+    colorInfoBase: "#1677ff",
+    colorInfoActive: "#0958d9",
+    colorInfoTextHover: "#003eb3",
+    colorInfoText: "#002c8c",
+    colorInfoTextActive: "#001d66",
+    colorBgMask: "rgba(0, 0, 0, 0.45)",
+    stepsDotSize: "8px",
+    stepsCurrentDotSize: "10px",
+    rateStarSize: "20px",
+    colorFillContent: "rgba(0, 0, 0, 0.06)",
+    colorFillContentHover: "rgba(0, 0, 0, 0.15)",
+    colorFillAlter: "rgba(0, 0, 0, 0.02)",
+    colorBgContainerDisabled: "rgba(0, 0, 0, 0.04)",
+    colorBorderBg: "#ffffff",
+    colorTextPlaceholder: "rgba(0, 0, 0, 0.25)",
+    colorTextDisabled: "rgba(0, 0, 0, 0.25)",
+    colorTextHeading: "rgba(0, 0, 0, 0.88)",
+    colorTextLabel: "rgba(0, 0, 0, 0.65)",
+    colorTextDescription: "rgba(0, 0, 0, 0.45)",
+    colorBgTextHover: "rgba(0, 0, 0, 0.06)",
+    colorBgTextActive: "rgba(0, 0, 0, 0.15)",
+    colorIcon: "rgba(0, 0, 0, 0.45)",
+    colorIconHover: "rgba(0, 0, 0, 0.88)",
+    colorLink: "#1677ff",
+    colorLinkHover: "#4096ff",
+    colorLinkActive: "#0958d9",
+    colorHighlight: "#ff7875",
+    controlOutline: "#e6f4ff",
+    colorWarningOutline: "#fffbe6",
+    colorErrorOutline: "#fff1f0",
+    fontSizeSm: "12px",
+    fontSizeLg: "16px",
+    fontSizeXl: "20px",
+    fontSizeIcon: "12px",
+    fontSizeHeading1: "38px",
+    fontSizeHeading2: "30px",
+    fontSizeHeading3: "24px",
+    fontSizeHeading4: "20px",
+    fontSizeHeading5: "16px",
+    fontWeightNormal: "400",
+    fontWeightStrong: "600",
+    controlLineWidth: "1px",
+    controlOutlineWidth: "2px",
+    controlItemBgHover: "rgba(0, 0, 0, 0.04)",
+    controlItemBgActive: "#e6f4ff",
+    controlItemBgActiveHover: "#bae0ff",
+    controlInteractiveSize: "16px",
+    controlItemBgActiveDisabled: "rgba(0, 0, 0, 0.15)",
+    controlTmpOutline: "rgba(0, 0, 0, 0.02)",
+    opacityLoading: "0.65",
+    padding: "16px",
+    paddingMd: "20px",
+    paddingSm: "12px",
+    paddingXs: "8px",
+    paddingXxs: "4px",
+    paddingLg: "24px",
+    paddingXl: "32px",
+    paddingXxl: "48px",
+    margin: "16px",
+    marginSm: "12px",
+    marginXs: "8px",
+    marginXxs: "4px",
+    marginLg: "24px",
+    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'",
+    fontWeightItalic: "Regular Italic",
+    paddingContentHorizontalLg: "24px",
+    paddingContentVerticalLg: "16px",
+    paddingContentHorizontal: "16px",
+    paddingContentVertical: "12px",
+    paddingContentHorizontalSm: "16px",
+    paddingContentVerticalSm: "8px",
+    boxShadow: "0 1px 2px 0 rgba(0,0,0,0.03), 0 1px 6px -1px rgba(0,0,0,0.02), 0 2px 4px 0 rgba(0,0,0,0.02)",
+    boxShadowSecondary: "0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05)",
+    boxShadowCard: "0 1px 2px -2px rgba(0,0,0,0.16), 0 3px 6px 0 rgba(0,0,0,0.12), 0 5px 12px 4px rgba(0,0,0,0.09)",
+    colorItemText: "rgba(255, 255, 255, 0.65)",
+    colorItemTextDisabled: "rgba(255, 255, 255, 0.25)",
+    focusPrimary: "0 0 0 2px #e6f4ff",
+    focusError: "0 0 0 2px #fff1f0",
+    focusWarning: "0 0 0 2px #fffbe6",
+    tooltipBg: "rgba(0, 0, 0, 0.88)",
+    segmentedBgColorSelected: "#ffffff",
+    segmentedGroupBg: "rgba(0, 0, 0, 0.04)",
+    colorMenuDarkBg: "#001529",
+    colorMenuSubItemBg: "#000c17",
+    boxShadowButtonSolid: "0 2px 0 0 rgba(0, 0, 0, 0.02)",
+    paddingTooltipContentVertical: "6px"
+  }
+};
 
 function OdsButton(props) {
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledButton, Object.assign({}, props), props.children));
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(styled.ThemeProvider, {
+    theme: lightTheme
+  }, React__default.createElement(StyledButton, Object.assign({}, props), props.children)));
 }
 
 var onMenuClick = function onMenuClick(e) {
@@ -74,14 +409,14 @@ function OdsDropdownButton(props) {
 }
 
 var _templateObject$2;
-var StyledCalendar = styled(antd.Calendar)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  width:100%;\n"])));
+var StyledCalendar = styled__default(antd.Calendar)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  width:100%;\n"])));
 
 function OdsCalendar(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledCalendar, Object.assign({}, props)));
 }
 
 var _templateObject$3;
-var StyledCard = styled(Card)(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n //\n"])));
+var StyledCard = styled__default(Card)(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 var Meta = antd.Card.Meta;
 function OdsCard(props) {
@@ -92,7 +427,7 @@ function OdsCard(props) {
 }
 
 var _templateObject$4;
-var StyledCheckbox = styled(antd.Checkbox)(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  box-shadow: none;\n"])));
+var StyledCheckbox = styled__default(antd.Checkbox)(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  box-shadow: none;\n"])));
 
 function OdsCheckbox(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledCheckbox, Object.assign({}, props)));
@@ -105,7 +440,7 @@ function OdsCheckboxGroup(props) {
 }
 
 var _templateObject$5;
-var StyledDatepicker = styled(antd.DatePicker)(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  width:100%;\n"])));
+var StyledDatepicker = styled__default(antd.DatePicker)(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  width:100%;\n"])));
 
 function OdsDateRangePicker(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledDatepicker.RangePicker, Object.assign({}, props, {
@@ -116,14 +451,14 @@ function OdsDateRangePicker(props) {
 }
 
 var _templateObject$6;
-var StyledDivider = styled(antd.Divider)(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n //\n"])));
+var StyledDivider = styled__default(antd.Divider)(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 function OdsDivider(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledDivider, Object.assign({}, props)));
 }
 
 var _templateObject$7;
-var StyledDropdown = styled(antd.Dropdown)(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n //\n"])));
+var StyledDropdown = styled__default(antd.Dropdown)(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 var handleMenuClick = function handleMenuClick(e) {
   console.log('click', e);
@@ -139,7 +474,7 @@ function OdsCollapse(props) {
 }
 
 var _templateObject$8;
-var StyledInput = styled(antd.Input)(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n //\n"])));
+var StyledInput = styled__default(antd.Input)(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 function OdsInput(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledInput, Object.assign({}, props), props === null || props === void 0 ? void 0 : props.children));
@@ -252,14 +587,14 @@ function OdsTextArea(props) {
 }
 
 var _templateObject$9;
-var StyledInputNumber = styled(antd.InputNumber)(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n //\n"])));
+var StyledInputNumber = styled__default(antd.InputNumber)(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 function OdsInputNumber(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledInputNumber, Object.assign({}, props)));
 }
 
 var _templateObject$a;
-var StyledList = styled(antd.List)(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n //\n"])));
+var StyledList = styled__default(antd.List)(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 function OdsList(props) {
   props.size = "default";
@@ -358,7 +693,7 @@ var OdsNotification = function OdsNotification(props) {
 };
 
 var _templateObject$b;
-var StyledRadio = styled(antd.Radio)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n //\n"])));
+var StyledRadio = styled__default(antd.Radio)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 function OdsRadio(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledRadio, Object.assign({}, props), props.children));
@@ -372,7 +707,7 @@ function OdsRadioGroup(props) {
 }
 
 var _templateObject$c;
-var StyledRate = styled(antd.Rate)(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n //\n"])));
+var StyledRate = styled__default(antd.Rate)(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 var customIcons = {
   1: React__default.createElement(icons.FrownOutlined, null),
@@ -387,14 +722,14 @@ function OdsRate(props) {
 }
 
 var _templateObject$d;
-var StyledSelect = styled(antd.Select)(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n  width:100%;\n"])));
+var StyledSelect = styled__default(antd.Select)(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n  width:100%;\n"])));
 
 function OdsSelect(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledSelect, Object.assign({}, props)));
 }
 
 var _templateObject$e;
-var StyledSpin = styled(antd.Spin)(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n //\n"])));
+var StyledSpin = styled__default(antd.Spin)(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 function OdsSpin(props) {
   var _useState = React.useState(true),
@@ -406,14 +741,14 @@ function OdsSpin(props) {
 }
 
 var _templateObject$f;
-var StyledSwitch = styled(antd.Switch)(_templateObject$f || (_templateObject$f = _taggedTemplateLiteralLoose(["\n //\n"])));
+var StyledSwitch = styled__default(antd.Switch)(_templateObject$f || (_templateObject$f = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 function OdsSwitch(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledSwitch, Object.assign({}, props)));
 }
 
 var _templateObject$g;
-var StyledTabs = styled(antd.Tabs)(_templateObject$g || (_templateObject$g = _taggedTemplateLiteralLoose(["\n //\n"])));
+var StyledTabs = styled__default(antd.Tabs)(_templateObject$g || (_templateObject$g = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 var onChange = function onChange(key) {
   console.log(key);
@@ -451,7 +786,7 @@ function OdsTab(props) {
 }
 
 var _templateObject$h;
-var StyledTable = styled(antd.Table)(_templateObject$h || (_templateObject$h = _taggedTemplateLiteralLoose(["\n //\n"])));
+var StyledTable = styled__default(antd.Table)(_templateObject$h || (_templateObject$h = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 function OdsBasicTable(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledTable, Object.assign({}, props)));
@@ -475,21 +810,21 @@ function OdsSelectableTable(props) {
 }
 
 var _templateObject$i;
-var StyledTag = styled(antd.Tag)(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose(["\n //\n"])));
+var StyledTag = styled__default(antd.Tag)(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 function OdsTag(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledTag, Object.assign({}, props), props.children));
 }
 
 var _templateObject$j;
-var StyledtTimeline = styled(antd.Timeline)(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n //\n"])));
+var StyledtTimeline = styled__default(antd.Timeline)(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 function OdsTimeline(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledtTimeline, Object.assign({}, props), props.children));
 }
 
 var _templateObject$k;
-var StyledTimepicker = styled(antd.TimePicker)(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n  width:100%;\n"])));
+var StyledTimepicker = styled__default(antd.TimePicker)(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n  width:100%;\n"])));
 
 function OdsRangeTimepicker(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledTimepicker.RangePicker, Object.assign({}, props)));
@@ -513,7 +848,7 @@ function OdsTimepicker(props) {
 }
 
 var _templateObject$l;
-var StyledtTypography = styled(antd.Typography)(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n //\n"])));
+var StyledtTypography = styled__default(antd.Typography)(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 function OdsLink(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledtTypography, Object.assign({}, props), props === null || props === void 0 ? void 0 : props.Link));
@@ -598,7 +933,6 @@ function grid(props) {
   };
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(dataGrid.DataGrid, {
     dataSource: props.dataSource,
-    columnAutoWidth: props.columnAutoWidth,
     keyExpr: props.keyExpr,
     allowColumnResizing: props.allowColumnResizing !== undefined ? props.allowColumnResizing : false,
     columnResizingMode: "widget",
@@ -609,7 +943,7 @@ function grid(props) {
     allowColumnReordering: true,
     showRowLines: true,
     showBorders: true,
-    width: "100%",
+    columnAutoWidth: true,
     onEditCanceling: props.onEditCanceling
   }, React__default.createElement(dataGrid.Paging, {
     enabled: true,