@pedidopago/ui 1.1.5 → 1.2.0

package/dist/components/ColorPicker/utils/parsers.d.ts

@@ -1,28 +1,28 @@
-import { IHsvaObject, IOutputColorMode } from './../types';
-/**
- * This function converts a string color to a hsva color object
- * @param color : Color to convert to hsva;
- * @returns : hsva color object
- */
-export declare const colorToHsva: (color: string) => IHsvaObject;
-/**
- * This function gets the color mode from the color string
- * @param color : Color to check your output mode
- * @returns : Color mode
- */
-export declare const colorMode: (color: string) => IOutputColorMode;
-/**
- * This function converts a hsva color object to a string color
- * @param hsva : hsva color object
- * @param colorMode : Color output mode
- * @returns : Color string
- */
-export declare const colorFromHsva: (hsva: IHsvaObject, colorMode: IOutputColorMode | 'unknown') => string;
-/**
- * This function converts a color string to output color mode
- * @param color : Color string;
- * @param outputMode : Color output mode;
- * @returns : Color string
- */
-export declare const colorToOutputMode: (color: string, outputMode: IOutputColorMode) => string;
+import { IHsvaObject, IOutputColorMode } from './../types';
+/**
+ * This function converts a string color to a hsva color object
+ * @param color : Color to convert to hsva;
+ * @returns : hsva color object
+ */
+export declare const colorToHsva: (color: string) => IHsvaObject;
+/**
+ * This function gets the color mode from the color string
+ * @param color : Color to check your output mode
+ * @returns : Color mode
+ */
+export declare const colorMode: (color: string) => IOutputColorMode;
+/**
+ * This function converts a hsva color object to a string color
+ * @param hsva : hsva color object
+ * @param colorMode : Color output mode
+ * @returns : Color string
+ */
+export declare const colorFromHsva: (hsva: IHsvaObject, colorMode: IOutputColorMode | 'unknown') => string;
+/**
+ * This function converts a color string to output color mode
+ * @param color : Color string;
+ * @param outputMode : Color output mode;
+ * @returns : Color string
+ */
+export declare const colorToOutputMode: (color: string, outputMode: IOutputColorMode) => string;
 //# sourceMappingURL=parsers.d.ts.map

package/dist/components/DateInput/DateInput-example.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { IDateInputProps } from './types';
+export default function DateInputExample({ ...rest }: {
+    [x: string]: any;
+}, props: IDateInputProps): JSX.Element;
+//# sourceMappingURL=DateInput-example.d.ts.map

package/dist/components/DateInput/DateInput-example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput-example.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/DateInput-example.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,GAAG,IAAI,EAAE;;CAAA,EAAE,KAAK,EAAE,eAAe,eAuB3E"}

package/dist/components/DateInput/DateInput-example.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DateInputExample;
+
+var _react = require("react");
+
+var _ = require(".");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function DateInputExample(_ref, props) {
+  var rest = _extends({}, _ref);
+
+  var _useState = (0, _react.useState)(props.selectedPeriod),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedPeriod = _useState2[0],
+      setSelectedPeriod = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(props.type),
+      _useState4 = _slicedToArray(_useState3, 2),
+      type = _useState4[0],
+      setType = _useState4[1];
+
+  (0, _react.useEffect)(function () {
+    setSelectedPeriod(props.selectedPeriod);
+  }, [props.selectedPeriod]);
+  (0, _react.useEffect)(function () {
+    setType(props.type);
+  }, [props.type]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.DateInput, _objectSpread(_objectSpread({
+    type: type
+  }, rest), {}, {
+    selectedPeriod: selectedPeriod,
+    setSelectedPeriod: setSelectedPeriod
+  }));
+}

package/dist/components/DateInput/components/SelectButton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SelectButtonProps } from './types';
+export declare function SelectButton({ leftIconColor, span, children, backgroundColor, borderColor, label, onClick, }: SelectButtonProps): JSX.Element;
+//# sourceMappingURL=SelectButton.d.ts.map

package/dist/components/DateInput/components/SelectButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectButton.d.ts","sourceRoot":"","sources":["../../../../src/components/DateInput/components/SelectButton.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,wBAAgB,YAAY,CAAC,EAC3B,aAAa,EACb,IAAI,EACJ,QAAQ,EACR,eAAe,EACf,WAAW,EACX,KAAK,EACL,OAAO,GACR,EAAE,iBAAiB,eAiCnB"}

package/dist/components/DateInput/components/SelectButton.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectButton = SelectButton;
+
+var _Icon = _interopRequireDefault(require("src/components/Icon"));
+
+var _theme = require("src/shared/theme");
+
+var _styles = require("./styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function SelectButton(_ref) {
+  var leftIconColor = _ref.leftIconColor,
+      span = _ref.span,
+      children = _ref.children,
+      backgroundColor = _ref.backgroundColor,
+      borderColor = _ref.borderColor,
+      label = _ref.label,
+      onClick = _ref.onClick;
+
+  var _useTheme = (0, _theme.useTheme)(),
+      theme = _useTheme.theme;
+
+  var _useColorMode = (0, _theme.useColorMode)(),
+      colorMode = _useColorMode.colorMode;
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.SelectButtonContainer, {
+    children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ButtonLabel, {
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledSelectButton, {
+      onClick: onClick,
+      backgroundColor: backgroundColor,
+      borderColor: borderColor,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.OptionContainer, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ContentContainer, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.LeftIconContainer, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+              name: 'calendar',
+              color: leftIconColor !== null && leftIconColor !== void 0 ? leftIconColor : {
+                light: theme.colors.neutral.neutral3,
+                dark: theme.colors.neutral.neutral4
+              }[colorMode]
+            })
+          }), children !== null && children !== void 0 ? children : span]
+        })
+      })
+    })]
+  });
+}

package/dist/components/DateInput/components/styles.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { StyledSelectButtonProps } from './types';
+export declare const StyledSelectButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & StyledSelectButtonProps, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const LeftIconContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SelectButtonContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const OptionContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContentContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ButtonLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/DateInput/components/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/DateInput/components/styles.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAElD,eAAO,MAAM,kBAAkB;;;+IA8B9B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;yGAE7B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;yGAIjC,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAK3B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAK5B,CAAC;AAEF,eAAO,MAAM,WAAW;;;2GAiBvB,CAAC"}

package/dist/components/DateInput/components/styles.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSelectButton = exports.SelectButtonContainer = exports.OptionContainer = exports.LeftIconContainer = exports.ContentContainer = exports.ButtonLabel = void 0;
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var StyledSelectButton = _styled.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-family: inherit;\n  font-size: 0.875rem;\n  color: ", ";\n  border: ", "\n    solid 2px;\n  border-radius: 8px;\n  padding: 10px;\n  background-color: ", ";\n  width: 100%;\n  cursor: pointer;\n\n  b {\n    color: ", ";\n  }\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return {
+    light: theme.colors.neutral.neutral5,
+    dark: theme.colors.neutral.neutral2
+  }[theme.colorMode];
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      borderColor = _ref2.borderColor;
+  if (borderColor) return borderColor;
+  return {
+    light: theme.colors.neutral.neutral1,
+    dark: theme.colors.neutral.neutral6
+  }[theme.colorMode];
+}, function (_ref3) {
+  var backgroundColor = _ref3.backgroundColor;
+  return backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : 'transparent';
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    light: theme.colors.neutral.black,
+    dark: theme.colors.neutral.white
+  }[theme.colorMode];
+});
+
+exports.StyledSelectButton = StyledSelectButton;
+
+var LeftIconContainer = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n"])));
+
+exports.LeftIconContainer = LeftIconContainer;
+
+var SelectButtonContainer = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n  position: relative;\n"])));
+
+exports.SelectButtonContainer = SelectButtonContainer;
+
+var OptionContainer = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n"])));
+
+exports.OptionContainer = OptionContainer;
+
+var ContentContainer = _styled.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  flex: 1;\n  flex-direction: row;\n"])));
+
+exports.ContentContainer = ContentContainer;
+
+var ButtonLabel = _styled.default.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  position: absolute;\n  left: 10px;\n  transform: translateY(-50%);\n  padding: 0 0.25em;\n  color: ", ";\n  background-color: ", ";\n  font-weight: 500;\n"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.fontSizes.xxs;
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return {
+    light: theme.colors.neutral.neutral3,
+    dark: theme.colors.neutral.neutral3
+  }[theme.colorMode];
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return {
+    light: theme.colors.neutral.white,
+    dark: theme.colors.neutral.black
+  }[theme.colorMode];
+});
+
+exports.ButtonLabel = ButtonLabel;

package/dist/components/DateInput/components/types.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { IconName } from '../../Icon/types';
+export declare type SelectButtonProps = {
+    leftIcon?: IconName;
+    rightIcon?: IconName;
+    leftIconColor?: string;
+    rightIconColor?: string;
+    span?: React.ReactNode;
+    onClick?: () => void;
+    children?: React.ReactNode;
+    backgroundColor?: string;
+    borderColor?: string;
+    label?: string;
+    ratio?: number;
+};
+export declare type StyledSelectButtonProps = {
+    backgroundColor?: string;
+    borderColor?: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/DateInput/components/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/DateInput/components/types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,oBAAY,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,oBAAY,uBAAuB,GAAG;IACpC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}

package/dist/components/DateInput/dateInput.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=dateInput.test.d.ts.map

package/dist/components/DateInput/dateInput.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dateInput.test.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/dateInput.test.tsx"],"names":[],"mappings":"AAEA,OAAO,2BAA2B,CAAC"}

package/dist/components/DateInput/dateInput.test.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _testUtils = require("../../shared/tests/test-utils");
+
+require("@testing-library/jest-dom");
+
+var _DateInputExample = _interopRequireDefault(require("./DateInput-example"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var setup = function setup(props) {
+  return (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateInputExample.default, _objectSpread({}, props)));
+};
+
+describe('DateInput', function () {
+  it('should it render the datepicker component', function () {
+    var _setup = setup(),
+        container = _setup.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should set a value in DateInput', function () {
+    var _setup2 = setup({
+      valueDate: ['01/01/2022'],
+      onChangeDate: jest.fn(),
+      selectedPeriod: ['01/01/2022'],
+      setSelectedPeriod: jest.fn()
+    }),
+        container = _setup2.container;
+
+    expect(container).toBeInTheDocument();
+  });
+});

package/dist/components/DateInput/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IDateInputProps } from './types';
+export declare const DateInput: import("react").MemoExoticComponent<({ label, type, selectedPeriod, setSelectedPeriod, isLoading, fullWidth, position, onChangeDate, valueDate: valueDateProp, ...rest }: IDateInputProps) => JSX.Element>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/DateInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAY,eAAe,EAAE,MAAM,SAAS,CAAC;AAqHpD,eAAO,MAAM,SAAS,4KAxGnB,eAAe,iBAwG4B,CAAC"}

package/dist/components/DateInput/index.js

@@ -0,0 +1,189 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DateInput = void 0;
+
+var _react = require("react");
+
+var _useOnClickOutside = require("src/shared/hooks/useOnClickOutside");
+
+var _theme = require("src/shared/theme");
+
+var _getColorValue = require("src/utils/getColorValue");
+
+var _DatePicker = _interopRequireDefault(require("../DatePicker"));
+
+var _Skeleton = _interopRequireDefault(require("../Skeleton"));
+
+var _SelectButton = require("./components/SelectButton");
+
+var _styles = require("./styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _excluded = ["label", "type", "selectedPeriod", "setSelectedPeriod", "isLoading", "fullWidth", "position", "onChangeDate", "valueDate"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var DateInputLayout = function DateInputLayout(_ref) {
+  var _ref$label = _ref.label,
+      label = _ref$label === void 0 ? 'Definir Período' : _ref$label,
+      type = _ref.type,
+      selectedPeriod = _ref.selectedPeriod,
+      setSelectedPeriod = _ref.setSelectedPeriod,
+      isLoading = _ref.isLoading,
+      fullWidth = _ref.fullWidth,
+      position = _ref.position,
+      onChangeDate = _ref.onChangeDate,
+      valueDateProp = _ref.valueDate,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isDatePickerOpen = _useState2[0],
+      setIsDatePickerOpen = _useState2[1];
+
+  var datePickerRef = (0, _react.useRef)(null);
+
+  var _useTheme = (0, _theme.useTheme)(),
+      theme = _useTheme.theme;
+
+  var _useColorMode = (0, _theme.useColorMode)(),
+      colorMode = _useColorMode.colorMode;
+
+  var removeYearFromDate = (0, _react.useCallback)(function (date) {
+    var dateArray = date.split('/');
+    return "".concat(dateArray[0], "/").concat(dateArray[1]);
+  }, []);
+  var placeholder = type === 'range' ? 'DD/MM - DD/MM' : 'DD/MM/AAAA';
+  var hasRangePeriodSelected = Array.isArray(selectedPeriod);
+  var formattedDate = (0, _react.useCallback)(function () {
+    if (type === 'range') {
+      if (Array.isArray(selectedPeriod)) {
+        var startDate = removeYearFromDate(selectedPeriod[0]);
+        var endDate = removeYearFromDate(selectedPeriod[1]);
+        var rangeDate = [startDate, endDate];
+        return rangeDate.join(' - ');
+      }
+    }
+
+    return selectedPeriod || valueDateProp && valueDateProp[0];
+  }, [type, selectedPeriod]);
+  var datePickerContainerAnimationVariant = {
+    fadeIn: {
+      opacity: 1,
+      y: 0
+    },
+    fadeOut: {
+      opacity: 0,
+      y: -20
+    }
+  };
+  (0, _useOnClickOutside.useOnClickOutside)(datePickerRef, function () {
+    setIsDatePickerOpen(false);
+  });
+
+  var handleValueDate = function handleValueDate(value) {
+    type === 'date' ? setIsDatePickerOpen(false) : Array.isArray(value) && setIsDatePickerOpen(false);
+    setSelectedPeriod(value);
+    onChangeDate && onChangeDate(value);
+  };
+
+  var textColor = (0, _getColorValue.getColorValue)(colorMode === 'dark' ? 'neutral.neutral2' : 'neutral.neutral5', theme);
+
+  var valueDate = function valueDate() {
+    if (selectedPeriod) {
+      switch (type) {
+        case 'date':
+          {
+            var _selectedPeriod$toStr = selectedPeriod.toString().split('/'),
+                _selectedPeriod$toStr2 = _slicedToArray(_selectedPeriod$toStr, 3),
+                day = _selectedPeriod$toStr2[0],
+                month = _selectedPeriod$toStr2[1],
+                year = _selectedPeriod$toStr2[2];
+
+            return [new Date("".concat(month, "/").concat(day, "/").concat(year))];
+          }
+
+        case 'range':
+          {
+            if (hasRangePeriodSelected) {
+              var _selectedPeriod$0$toS = selectedPeriod[0].toString().split('/'),
+                  _selectedPeriod$0$toS2 = _slicedToArray(_selectedPeriod$0$toS, 3),
+                  startDay = _selectedPeriod$0$toS2[0],
+                  startMonth = _selectedPeriod$0$toS2[1],
+                  startYear = _selectedPeriod$0$toS2[2];
+
+              var _selectedPeriod$1$toS = selectedPeriod[1].toString().split('/'),
+                  _selectedPeriod$1$toS2 = _slicedToArray(_selectedPeriod$1$toS, 3),
+                  endDay = _selectedPeriod$1$toS2[0],
+                  endMonth = _selectedPeriod$1$toS2[1],
+                  endYear = _selectedPeriod$1$toS2[2];
+
+              var startDate = "".concat(startMonth, "/").concat(startDay, "/").concat(startYear);
+              var endDate = "".concat(endMonth, "/").concat(endDay, "/").concat(endYear);
+              return [startDate, endDate];
+            } else {
+              return [new Date(), new Date()];
+            }
+          }
+      }
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.DateInputContainer, {
+    fullWidth: fullWidth,
+    children: [isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+      height: 50
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectButton.SelectButton, {
+      onClick: function onClick() {
+        return setIsDatePickerOpen(true);
+      },
+      label: label,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.CalendarText, {
+        textColor: textColor,
+        children: formattedDate() || placeholder
+      })
+    }), isDatePickerOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DatePickerContainer, {
+      position: position,
+      variants: datePickerContainerAnimationVariant,
+      initial: "fadeOut",
+      animate: "fadeIn",
+      ref: datePickerRef,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker.default, _objectSpread(_objectSpread({}, rest), {}, {
+        value: valueDateProp || valueDate(),
+        onChange: function onChange(value) {
+          return handleValueDate(value);
+        },
+        type: type
+      }))
+    })]
+  });
+};
+
+var DateInput = /*#__PURE__*/(0, _react.memo)(DateInputLayout);
+exports.DateInput = DateInput;