@tecsinapse/react-web-kit 3.0.0 → 3.3.0

package/dist/cjs/components/atoms/Button/styled.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var nativeStyled = require('@emotion/native');
+var styled = require('@emotion/native');
 var reactCore = require('@tecsinapse/react-core');
 
 const webStyles = () => {
-  return nativeStyled.css`
+  return styled.css`
     & * {
       user-select: none;
     }
@@ -21,11 +21,11 @@ const hoverStyles = ({
   const variantColorGradation = reactCore.colorGradationVC[variant];
   const variantBorderColor = reactCore.borderColorVC[variant];
   const variantBorderColorGradation = reactCore.borderColorGradationVC[variant];
-  return mouseOver && !disabled && !pressed && nativeStyled.css`
+  return mouseOver && !disabled && !pressed && styled.css`
       background-color: ${theme?.color[variantColor][variantColorGradation]};
       border-color: ${theme?.color[variantBorderColor][variantBorderColorGradation]};
     `;
 };
-const StyledWebButton = nativeStyled(reactCore.Button)(webStyles, hoverStyles);
+const StyledWebButton = styled(reactCore.Button)(webStyles, hoverStyles);
 
 exports.StyledWebButton = StyledWebButton;

package/dist/cjs/components/atoms/Input/styled.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var nativeStyled = require('@emotion/native');
+var styled = require('@emotion/native');
 var reactCore = require('@tecsinapse/react-core');
 
-const StyledWebTextInput = nativeStyled(reactCore.InputElement)`
+const StyledWebTextInput = styled(reactCore.InputElement)`
   &:focus-visible {
     outline-width: 0;
   }

package/dist/cjs/components/atoms/InputMask/styled.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var nativeStyled = require('@emotion/native');
+var styled = require('@emotion/native');
 var reactCore = require('@tecsinapse/react-core');
 
-const StyledWebTextInputMask = nativeStyled(reactCore.InputMaskElement)`
+const StyledWebTextInputMask = styled(reactCore.InputMaskElement)`
   &:focus-visible {
     outline-width: 0;
   }

package/dist/cjs/components/atoms/Tooltip/styled.js

@@ -71,7 +71,10 @@ const TooltipSpan = styled("span")(
       border-radius: ${theme.borderRadius.mili};
       opacity: 0;
       visibility: hidden;
-      transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
+      transition:
+        opacity 0.3s,
+        visibility 0.3s,
+        transform 0.3s;
       background-color: ${theme.color.secondary.xdark};
       z-index: ${theme.zIndex.absolute};
 

package/dist/cjs/components/molecules/DateTimePicker/DateTimePicker.js

@@ -3,6 +3,7 @@
 var reactCore = require('@tecsinapse/react-core');
 var React = require('react');
 var index = require('../../atoms/Dropdown/index.js');
+var DateTimePickerSelector = require('../DateTimePickerSelector/DateTimePickerSelector.js');
 
 const DateTimePicker = ({ ...rest }) => {
   const [visible, setVisible] = React.useState(false);
@@ -12,6 +13,13 @@ const DateTimePicker = ({ ...rest }) => {
     reactCore.DateTimePicker,
     {
       ...rest,
+      DateTimeSelectorComponent: (props) => /* @__PURE__ */ React.createElement(
+        reactCore.ControlledDateTimeSelector,
+        {
+          SelectorComponent: DateTimePickerSelector,
+          ...props
+        }
+      ),
       requestShowSelector: show,
       requestCloseSelector: close,
       renderSelector: (selector) => /* @__PURE__ */ React.createElement(index.Dropdown, { visible, setVisible }, selector)

package/dist/cjs/components/molecules/DateTimePickerSelector/DateTimePickerSelector.js

@@ -0,0 +1,98 @@
+'use strict';
+
+var React = require('react');
+var Button = require('../../atoms/Button/Button.js');
+var reactCore = require('@tecsinapse/react-core');
+var styled = require('./styled.js');
+var ScrollableTimePicker = require('../ScrollableTimePicker/ScrollableTimePicker.js');
+var ScrollableMonthYearPicker = require('../ScrollableMonthYearPicker/ScrollableMonthYearPicker.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const DateTimePickerSelector = ({
+  TextComponent = reactCore.Text,
+  currentMode,
+  handlePressBack,
+  modalTitle,
+  isDate,
+  date,
+  handleCalendarChange,
+  isMonth,
+  setDate,
+  handlePressConfirm,
+  confirmButtonText,
+  locale,
+  yearLabel,
+  monthLabel,
+  hourLabel,
+  minuteLabel,
+  ...rest
+}) => {
+  return /* @__PURE__ */ React__namespace.createElement(styled.Root, { ...rest }, /* @__PURE__ */ React__namespace.createElement(styled.Header, null, currentMode === 1 && /* @__PURE__ */ React__namespace.createElement(styled.BackButton, { onPress: handlePressBack }, /* @__PURE__ */ React__namespace.createElement(
+    reactCore.Icon,
+    {
+      type: "material-community",
+      name: "chevron-left",
+      size: "mega",
+      colorVariant: "secondary"
+    }
+  )), /* @__PURE__ */ React__namespace.createElement(TextComponent, { typography: "base", colorVariant: "secondary" }, modalTitle)), isDate ? /* @__PURE__ */ React__namespace.createElement(
+    reactCore.Calendar,
+    {
+      type: "day",
+      value: date,
+      onChange: handleCalendarChange,
+      year: date.getFullYear(),
+      month: date.getMonth()
+    }
+  ) : isMonth ? /* @__PURE__ */ React__namespace.createElement(styled.Content, { style: { flexDirection: "column" } }, /* @__PURE__ */ React__namespace.createElement(
+    styled.Content,
+    {
+      style: { width: "100%", flexDirection: "row", display: "flex" }
+    },
+    /* @__PURE__ */ React__namespace.createElement(
+      ScrollableMonthYearPicker,
+      {
+        setDate,
+        date,
+        locale,
+        yearLabel,
+        monthLabel
+      }
+    )
+  )) : /* @__PURE__ */ React__namespace.createElement(styled.Content, { style: { flexDirection: "column" } }, /* @__PURE__ */ React__namespace.createElement(
+    styled.Content,
+    {
+      style: { width: "100%", flexDirection: "row", display: "flex" }
+    },
+    /* @__PURE__ */ React__namespace.createElement(
+      ScrollableTimePicker,
+      {
+        setDate,
+        date,
+        locale,
+        hourLabel,
+        minuteLabel
+      }
+    )
+  )), /* @__PURE__ */ React__namespace.createElement(Button, { color: "primary", onPress: handlePressConfirm }, /* @__PURE__ */ React__namespace.createElement(TextComponent, { fontWeight: "bold", fontColor: "light" }, confirmButtonText || "OK")));
+};
+
+module.exports = DateTimePickerSelector;

package/dist/cjs/components/molecules/DateTimePickerSelector/components/MemoizedTimeCard.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var React = require('react');
+var styled = require('../styled.js');
+
+const MemoizedTimeCard = React.memo(
+  ({
+    time,
+    isSelected,
+    onPress,
+    TextComponent
+  }) => /* @__PURE__ */ React.createElement(styled.TimeCard, { id: time, key: time, isSelected, onPress }, /* @__PURE__ */ React.createElement(
+    TextComponent,
+    {
+      colorVariant: isSelected ? "primary" : "secondary",
+      colorTone: "xdark"
+    },
+    time
+  ))
+);
+
+module.exports = MemoizedTimeCard;

package/dist/cjs/components/molecules/DateTimePickerSelector/components/ScrollableDigit.js

@@ -0,0 +1,84 @@
+'use strict';
+
+var React = require('react');
+var Text = require('@tecsinapse/react-core/src/components/atoms/Text');
+var reactCore = require('@tecsinapse/react-core');
+var ResponsiveFontSize = require('@tecsinapse/react-core/src/utils/ResponsiveFontSize');
+var styled = require('../styled.js');
+var MemoizedTimeCard = require('./MemoizedTimeCard.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const ScrollableDigit = ({
+  TextComponent = Text.Text,
+  data,
+  currentTime,
+  updateType,
+  timeLabel,
+  handleTimeChange,
+  initialScrollIndex
+}) => {
+  const theme = reactCore.useTheme();
+  const digitCardHeight = ResponsiveFontSize.RFValue(Number(theme.typography.base.fontSize.slice(0, -2))) + 2 * ResponsiveFontSize.RFValue(Number(theme.spacing.deca.slice(0, -2)));
+  const getDisplayedValue = (value) => {
+    const isNumericValue = parseInt(value, 10);
+    if (!isNaN(isNumericValue)) {
+      return value.padStart(2, "0");
+    } else {
+      return value;
+    }
+  };
+  const timeCardsBuilder = React__namespace.useCallback(
+    ({ item }) => /* @__PURE__ */ React__namespace.createElement(
+      MemoizedTimeCard,
+      {
+        time: getDisplayedValue(item),
+        isSelected: currentTime === item,
+        onPress: () => {
+          handleTimeChange(item, updateType);
+        },
+        TextComponent
+      }
+    ),
+    [handleTimeChange, TextComponent]
+  );
+  return /* @__PURE__ */ React__namespace.createElement("div", { style: { display: "flex", flexDirection: "column" } }, /* @__PURE__ */ React__namespace.createElement(styled.StyledTextLabel, null, timeLabel), /* @__PURE__ */ React__namespace.createElement(
+    styled.TimeDigitContainer,
+    {
+      showsHorizontalScrollIndicator: true,
+      data,
+      renderItem: timeCardsBuilder,
+      keyExtractor: (item) => item,
+      contentContainerStyle: {
+        alignItems: "center"
+      },
+      numColumns: 1,
+      initialScrollIndex,
+      getItemLayout: (_, index) => ({
+        length: digitCardHeight,
+        offset: digitCardHeight * index,
+        index
+      }),
+      fadingEdgeLength: 200
+    }
+  ));
+};
+
+module.exports = ScrollableDigit;

package/dist/cjs/components/molecules/DateTimePickerSelector/styled.js

@@ -0,0 +1,54 @@
+'use strict';
+
+var styled = require('@emotion/native');
+var reactCore = require('@tecsinapse/react-core');
+var reactNativeWeb = require('react-native-web');
+
+const StyledTextLabel = styled(reactCore.Text)`
+  text-align: center;
+  font-size: 12px;
+  font-weight: bold;
+`;
+const TimeDigitContainer = styled(reactNativeWeb.FlatList)`
+  max-height: 150px;
+  overflow-y: scroll;
+`;
+const TimeCard = styled(reactCore.PressableSurface)(
+  (props) => styled.css`
+    background-color: ${props.isSelected ? props.theme?.color.primary.light : void 0};
+    padding: ${props.theme?.spacing.centi};
+    border-radius: ${props.theme?.borderRadius.mili};
+    margin: ${props.theme?.spacing.mili};
+    padding: ${props.theme?.spacing.mili} ${props.theme?.spacing.deca};
+  `
+);
+const Root = styled.View`
+  position: relative;
+  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
+`;
+const Content = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: ${({ theme }) => theme.spacing.deca};
+  margin-bottom: ${({ theme }) => theme.spacing.deca};
+`;
+const BackButton = styled(reactCore.PressableSurface)`
+  border-radius: ${({ theme }) => theme.borderRadius.mili};
+  padding: ${({ theme }) => theme.spacing.micro};
+  margin-right: ${({ theme }) => theme.spacing.mili};
+  aspect-ratio: 1;
+`;
+const Header = styled.View`
+  flex-direction: row;
+  align-items: center;
+  margin-top: ${({ theme }) => theme.spacing.mili};
+  margin-bottom: ${({ theme }) => theme.spacing.mili};
+`;
+
+exports.BackButton = BackButton;
+exports.Content = Content;
+exports.Header = Header;
+exports.Root = Root;
+exports.StyledTextLabel = StyledTextLabel;
+exports.TimeCard = TimeCard;
+exports.TimeDigitContainer = TimeDigitContainer;

package/dist/cjs/components/molecules/IconTextButton/styled.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var nativeStyled = require('@emotion/native');
+var styled = require('@emotion/native');
 var Button = require('../../atoms/Button/Button.js');
 require('react');
 
@@ -8,7 +8,7 @@ const boxedStyle = ({ theme }) => `
     padding: ${theme?.spacing.centi};
     aspect-ratio: 1;
   `;
-const StyledIconTextButton = nativeStyled(Button)`
+const StyledIconTextButton = styled(Button)`
   gap: ${({ theme }) => theme?.spacing.mili};
   ${({ boxed, theme }) => boxed && boxedStyle({ theme })};
 `;

package/dist/cjs/components/molecules/LabeledSwitch/styled.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var nativeStyled = require('@emotion/native');
+var styled$1 = require('@emotion/native');
 var styled = require('@emotion/styled');
 var reactCore = require('@tecsinapse/react-core');
 
@@ -9,14 +9,14 @@ const StyledDiv = styled("div")`
   flex-direction: row;
   align-items: center;
 `;
-const StyledLabel = nativeStyled(reactCore.Text)`
+const StyledLabel = styled$1(reactCore.Text)`
   ${({ theme, labelPosition }) => {
   if (labelPosition === "right")
-    return nativeStyled.css`
+    return styled$1.css`
         margin-left: ${theme?.spacing.centi};
       `;
   else if (labelPosition === "left")
-    return nativeStyled.css`
+    return styled$1.css`
         margin-right: ${theme?.spacing.centi};
       `;
 }}

package/dist/cjs/components/molecules/Menubar/MostUsed/styled.js

@@ -2,7 +2,7 @@
 
 var styled = require('@emotion/styled');
 var reactCore = require('@tecsinapse/react-core');
-var nativeStyled = require('@emotion/native');
+var styled$1 = require('@emotion/native');
 
 const StyledCardContainer = styled("div")`
     display: grid;
@@ -11,7 +11,7 @@ const StyledCardContainer = styled("div")`
     margin-bottom: ${({ theme }) => theme.spacing.kilo};
     margin-top: ${({ theme }) => theme.spacing.centi};
 `;
-const StyledCard = nativeStyled(reactCore.Card)`
+const StyledCard = styled$1(reactCore.Card)`
     padding-top: ${({ theme }) => theme.spacing.mili};
     padding-bottom: ${({ theme }) => theme.spacing.mili};
     padding-left: ${({ theme }) => theme.spacing.deca};

package/dist/cjs/components/molecules/Menubar/SearchResultItem/styled.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var styled = require('@emotion/styled');
-var nativeStyled = require('@emotion/native');
+var styled$1 = require('@emotion/native');
 var reactCore = require('@tecsinapse/react-core');
 
 const StyledSearchItemContainer = styled("div")`
@@ -13,7 +13,7 @@ const StyledSearchItemContainer = styled("div")`
   0.05
 )}`};
 `;
-const HighlightText = nativeStyled(reactCore.Text)`
+const HighlightText = styled$1(reactCore.Text)`
   text-decoration: underline;
   text-decoration-color: ${({ theme }) => theme.font.color.orange};
 `;

package/dist/cjs/components/molecules/Menubar/styled.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var styled = require('@emotion/styled');
-var nativeStyled = require('@emotion/native');
+var styled$1 = require('@emotion/native');
 var reactCore = require('@tecsinapse/react-core');
 var Button = require('../../atoms/Button/Button.js');
 require('react');
@@ -22,7 +22,7 @@ const StyledMenuBar = styled("div")`
     padding: ${({ theme }) => `${theme.spacing.deca} ${theme.spacing.kilo}`};
     box-shadow: 0px 2px 8px ${({ theme }) => reactCore.hex2rgba(theme.miscellaneous.shadow, 0.05)};
 `;
-const StyledMenuButton = nativeStyled(Button)`
+const StyledMenuButton = styled$1(Button)`
     padding-top: calc(${({ theme }) => theme.spacing.centi} + 2px);
     padding-right: calc(${({ theme }) => theme.spacing.centi} + 2px);
     padding-bottom: calc(${({ theme }) => theme.spacing.centi} + 2px);
@@ -50,7 +50,7 @@ const StyledContainerOpenMenu = styled("div")`
     width: -webkit-fill-available;
     width: -moz-available;
 `;
-const StyledInput = nativeStyled(Input)`
+const StyledInput = styled$1(Input)`
      width: 100%;
 `;
 const StyledInputContainer = styled("div")`

package/dist/cjs/components/molecules/ScrollableMonthYearPicker/ScrollableMonthYearPicker.js

@@ -0,0 +1,86 @@
+'use strict';
+
+var React = require('react');
+var styled = require('./styled.js');
+var ScrollableDigit = require('../DateTimePickerSelector/components/ScrollableDigit.js');
+require('../DateTimePickerSelector/components/MemoizedTimeCard.js');
+var dateFns = require('date-fns');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const ScrollableMonthYearPicker = ({
+  setDate,
+  date,
+  locale,
+  monthLabel,
+  yearLabel
+}) => {
+  const handleMonthYearChange = (newTime, updateType) => {
+    const newDate = new Date(date);
+    if (updateType === "year") {
+      newDate.setFullYear(Number(newTime));
+    } else if (updateType === "month") {
+      newDate.setMonth(months.indexOf(newTime));
+    }
+    setDate(newDate);
+  };
+  const yearsToShow = 20;
+  const firstYear = (/* @__PURE__ */ new Date()).getFullYear() - 10;
+  const years = React__namespace.useMemo(
+    () => Array.from({ length: yearsToShow }, (_, i) => String(i + firstYear)),
+    [yearsToShow, firstYear]
+  );
+  const months = [...Array(12)].map(
+    (_, index) => dateFns.format((/* @__PURE__ */ new Date()).setMonth(index), "MMM", { locale }).slice(
+      0,
+      3
+    )
+  );
+  const getInitialScrollIndex = (value, data) => {
+    const selectedIndex = data.findIndex((item) => item === value);
+    return selectedIndex >= 0 ? selectedIndex : 0;
+  };
+  return /* @__PURE__ */ React__namespace.createElement(styled.DivStyledColumn, null, /* @__PURE__ */ React__namespace.createElement(styled.DivStyledRow, null, /* @__PURE__ */ React__namespace.createElement(
+    ScrollableDigit,
+    {
+      data: months,
+      timeLabel: monthLabel ?? "Month",
+      handleTimeChange: handleMonthYearChange,
+      initialScrollIndex: getInitialScrollIndex(
+        months[date.getMonth()],
+        months
+      ),
+      updateType: "month",
+      currentTime: months[date.getMonth()]
+    }
+  ), /* @__PURE__ */ React__namespace.createElement(
+    ScrollableDigit,
+    {
+      data: years,
+      timeLabel: yearLabel ?? "Year",
+      handleTimeChange: handleMonthYearChange,
+      initialScrollIndex: getInitialScrollIndex(date.getFullYear(), years),
+      updateType: "year",
+      currentTime: date?.getFullYear().toString()
+    }
+  )));
+};
+
+module.exports = ScrollableMonthYearPicker;

package/dist/cjs/components/molecules/ScrollableMonthYearPicker/styled.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var styled = require('@emotion/styled');
+
+const DivStyledColumn = styled("div")`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+const DivStyledRow = styled("div")`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+`;
+
+exports.DivStyledColumn = DivStyledColumn;
+exports.DivStyledRow = DivStyledRow;

package/dist/cjs/components/molecules/ScrollableTimePicker/ScrollableTimePicker.js

@@ -0,0 +1,77 @@
+'use strict';
+
+var React = require('react');
+var ScrollableDigit = require('../DateTimePickerSelector/components/ScrollableDigit.js');
+require('../DateTimePickerSelector/components/MemoizedTimeCard.js');
+var styled = require('./styled.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const ScrollableTimePicker = ({
+  date,
+  setDate,
+  minuteLabel,
+  hourLabel
+}) => {
+  const handleTimeChange = (newTime, updateType) => {
+    const newDate = new Date(date);
+    if (updateType === "hour") {
+      newDate.setHours(Number(newTime));
+    } else if (updateType === "minute") {
+      newDate.setMinutes(Number(newTime));
+    }
+    setDate(newDate);
+  };
+  const minutes = Array.from({ length: 60 }, (_, i) => String(i));
+  const hours = Array.from({ length: 24 }, (_, i) => String(i));
+  const getInitialScrollIndex = (value, data) => {
+    const selectedIndex = data.findIndex((item) => item === value);
+    return selectedIndex >= 0 ? selectedIndex : 0;
+  };
+  return /* @__PURE__ */ React__namespace.createElement(styled.DivStyledColumn, null, /* @__PURE__ */ React__namespace.createElement(styled.DivStyledRow, null, /* @__PURE__ */ React__namespace.createElement(
+    ScrollableDigit,
+    {
+      data: hours,
+      timeLabel: hourLabel ?? "Hour",
+      handleTimeChange,
+      currentTime: date?.getHours().toString(),
+      updateType: "hour",
+      initialScrollIndex: getInitialScrollIndex(
+        date.getHours().toString(),
+        hours
+      )
+    }
+  ), /* @__PURE__ */ React__namespace.createElement(
+    ScrollableDigit,
+    {
+      data: minutes,
+      timeLabel: minuteLabel ?? "Minute",
+      updateType: "minute",
+      currentTime: date?.getMinutes().toString(),
+      handleTimeChange,
+      initialScrollIndex: getInitialScrollIndex(
+        date.getMinutes().toString(),
+        minutes
+      )
+    }
+  )));
+};
+
+module.exports = ScrollableTimePicker;

package/dist/cjs/components/molecules/ScrollableTimePicker/styled.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var styled = require('@emotion/styled');
+
+const DivStyledColumn = styled("div")`
+  width: '100%';
+  display: flex;
+  flex-direction: column;
+`;
+const DivStyledRow = styled("div")`
+  width: '100%';
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+`;
+
+exports.DivStyledColumn = DivStyledColumn;
+exports.DivStyledRow = DivStyledRow;