@vitality-ds/components 4.0.3 → 4.0.4

package/dist/components/src/Input/DateRangePicker/styles/BaseDateRangePickerLabel.styles.d.ts

@@ -0,0 +1,235 @@
+declare const _default: import("@stitches/react/types/styled-component").CssComponent<never, {}, {
+    bp1: "(min-width: 48rem)";
+    bp2: "(min-width: 69rem)";
+    bp3: "(min-width: 85rem)";
+}, import("@stitches/react/types/css-util").CSS<{
+    bp1: "(min-width: 48rem)";
+    bp2: "(min-width: 69rem)";
+    bp3: "(min-width: 85rem)";
+}, {
+    colors: {
+        neutral1: string;
+        neutralA1: string;
+        primary1: string;
+        accent1: string;
+        success1: string;
+        info1: string;
+        warning1: string;
+        critical1: string;
+        neutral2: string;
+        neutralA2: string;
+        primary2: string;
+        accent2: string;
+        success2: string;
+        info2: string;
+        warning2: string;
+        critical2: string;
+        neutral3: string;
+        neutralA3: string;
+        primary3: string;
+        accent3: string;
+        success3: string;
+        info3: string;
+        warning3: string;
+        critical3: string;
+        neutral4: string;
+        neutralA4: string;
+        primary4: string;
+        accent4: string;
+        success4: string;
+        info4: string;
+        warning4: string;
+        critical4: string;
+        neutral5: string;
+        neutralA5: string;
+        primary5: string;
+        accent5: string;
+        success5: string;
+        info5: string;
+        warning5: string;
+        critical5: string;
+        neutral6: string;
+        neutralA6: string;
+        primary6: string;
+        accent6: string;
+        success6: string;
+        info6: string;
+        warning6: string;
+        critical6: string;
+        neutral7: string;
+        neutralA7: string;
+        primary7: string;
+        accent7: string;
+        success7: string;
+        info7: string;
+        warning7: string;
+        critical7: string;
+        neutral8: string;
+        neutralA8: string;
+        primary8: string;
+        accent8: string;
+        success8: string;
+        info8: string;
+        warning8: string;
+        critical8: string;
+        neutral9: string;
+        neutralA9: string;
+        primary9: string;
+        accent9: string;
+        success9: string;
+        info9: string;
+        warning9: string;
+        critical9: string;
+        neutral10: string;
+        neutralA10: string;
+        primary10: string;
+        accent10: string;
+        success10: string;
+        info10: string;
+        warning10: string;
+        critical10: string;
+        neutral11: string;
+        neutralA11: string;
+        primary11: string;
+        accent11: string;
+        success11: string;
+        info11: string;
+        warning11: string;
+        critical11: string;
+        neutral12: string;
+        neutralA12: string;
+        primary12: string;
+        accent12: string;
+        success12: string;
+        info12: string;
+        warning12: string;
+        critical12: string;
+        neutral13: string;
+        neutralA13: string;
+        primary13: string;
+        accent13: string;
+        success13: string;
+        info13: string;
+        warning13: string;
+        critical13: string;
+    };
+    fonts: {
+        display100: any;
+        display200: any;
+        display300: any;
+        display400: any;
+        display500: any;
+        display600: any;
+        display700: any;
+        display800: any;
+        display900: any;
+        body: any;
+        caption: any;
+        pageTitle: any;
+        sectionTitle: any;
+        sectionSubtitle: any;
+        button: any;
+        textInput: any;
+        default: any;
+    };
+    fontSizes: {
+        display100: any;
+        display200: any;
+        display300: any;
+        display400: any;
+        display500: any;
+        display600: any;
+        display700: any;
+        display800: any;
+        display900: any;
+        body: any;
+        caption: any;
+        pageTitle: any;
+        sectionTitle: any;
+        sectionSubtitle: any;
+        button: any;
+        textInput: any;
+    };
+    fontWeights: {
+        display100: any;
+        display200: any;
+        display300: any;
+        display400: any;
+        display500: any;
+        display600: any;
+        display700: any;
+        display800: any;
+        display900: any;
+        body: any;
+        caption: any;
+        pageTitle: any;
+        sectionTitle: any;
+        sectionSubtitle: any;
+        button: any;
+        textInput: any;
+    };
+    letterSpacings: {
+        display100: any;
+        display200: any;
+        display300: any;
+        display400: any;
+        display500: any;
+        display600: any;
+        display700: any;
+        display800: any;
+        display900: any;
+        body: any;
+        caption: any;
+        pageTitle: any;
+        sectionTitle: any;
+        sectionSubtitle: any;
+        button: any;
+        textInput: any;
+    };
+    lineHeights: {
+        display100: any;
+        display200: any;
+        display300: any;
+        display400: any;
+        display500: any;
+        display600: any;
+        display700: any;
+        display800: any;
+        display900: any;
+        body: any;
+        caption: any;
+        pageTitle: any;
+        sectionTitle: any;
+        sectionSubtitle: any;
+        button: any;
+        textInput: any;
+    };
+    radii: {
+        default: any;
+        large: any;
+        rounded: any;
+    };
+    shadows: {
+        sm: any;
+        md: any;
+        lg: any;
+    };
+    space: {
+        sm: any;
+        md: any;
+        lg: any;
+        xs: any;
+        xl: any;
+        xxl: any;
+    };
+    zIndices: {
+        floatingElements: number;
+        blanket: number;
+        dialog: number;
+        toast: number;
+        tooltip: number;
+        portalElement: number;
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {}>>;
+export default _default;
+//# sourceMappingURL=BaseDateRangePickerLabel.styles.d.ts.map

package/dist/components/src/Input/DateRangePicker/styles/BaseDateRangePickerLabel.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseDateRangePickerLabel.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/Input/DateRangePicker/styles/BaseDateRangePickerLabel.styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,wBAEG"}

package/dist/components/src/Input/DateRangePicker/styles/BaseDateRangePickerLabel.styles.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var system_1 = require("@vitality-ds/system");
+exports.default = (0, system_1.css)({
+    flexShrink: 0,
+});
+//# sourceMappingURL=BaseDateRangePickerLabel.styles.js.map

package/dist/components/src/Input/DateRangePicker/styles/BaseDateRangePickerLabel.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseDateRangePickerLabel.styles.js","sourceRoot":"","sources":["../../../../../../src/Input/DateRangePicker/styles/BaseDateRangePickerLabel.styles.ts"],"names":[],"mappings":";;AAAA,8CAA0C;AAE1C,kBAAe,IAAA,YAAG,EAAC;IACjB,UAAU,EAAE,CAAC;CACd,CAAC,CAAC"}

package/dist/components/src/Input/DateRangePicker/styles/DateContainer.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateContainer.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/Input/DateRangePicker/styles/DateContainer.styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,wBAIG"}
+{"version":3,"file":"DateContainer.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/Input/DateRangePicker/styles/DateContainer.styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,wBAYG"}

package/dist/components/src/Input/DateRangePicker/styles/DateContainer.styles.js

@@ -1,9 +1,20 @@
 "use strict";
+var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 var system_1 = require("@vitality-ds/system");
-exports.default = (0, system_1.css)({
-    display: "flex",
-    gap: "$xs",
-    flexDirection: "column",
-});
+var styled_1 = require("../../TextInput/styled");
+exports.default = (0, system_1.css)((_a = {
+        display: "flex",
+        gap: "$sm",
+        alignItems: "center",
+        overflow: "visible"
+    },
+    // minWidth: 300,
+    _a["" + styled_1.BaseInputWrapper] = {
+        borderColor: "transparent",
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0,
+        paddingLeft: 0,
+    },
+    _a));
 //# sourceMappingURL=DateContainer.styles.js.map

package/dist/components/src/Input/DateRangePicker/styles/DateContainer.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateContainer.styles.js","sourceRoot":"","sources":["../../../../../../src/Input/DateRangePicker/styles/DateContainer.styles.ts"],"names":[],"mappings":";;AAAA,8CAA0C;AAE1C,kBAAe,IAAA,YAAG,EAAC;IACjB,OAAO,EAAE,MAAM;IACf,GAAG,EAAE,KAAK;IACV,aAAa,EAAE,QAAQ;CACxB,CAAC,CAAC"}
+{"version":3,"file":"DateContainer.styles.js","sourceRoot":"","sources":["../../../../../../src/Input/DateRangePicker/styles/DateContainer.styles.ts"],"names":[],"mappings":";;;AAAA,8CAA0C;AAE1C,iDAA0D;AAE1D,kBAAe,IAAA,YAAG;QAChB,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,KAAK;QACV,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,SAAS;;IACnB,iBAAiB;IACjB,GAAC,KAAG,yBAAkB,IAAG;QACvB,WAAW,EAAE,aAAa;QAC1B,mBAAmB,EAAE,CAAC;QACtB,sBAAsB,EAAE,CAAC;QACzB,WAAW,EAAE,CAAC;KACf;QACD,CAAC"}

package/dist/components/src/Input/DateRangePicker/styles/DatePickerContainer.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerContainer.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/Input/DateRangePicker/styles/DatePickerContainer.styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,wBAGG"}
+{"version":3,"file":"DatePickerContainer.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/Input/DateRangePicker/styles/DatePickerContainer.styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,wBAWG"}

package/dist/components/src/Input/DateRangePicker/styles/DatePickerContainer.styles.js

@@ -3,6 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var system_1 = require("@vitality-ds/system");
 exports.default = (0, system_1.css)({
     display: "flex",
-    gap: "$lg",
+    gap: "$sm",
+    paddingLeft: "$md",
+    paddingRight: "$sm",
+    border: "1px solid $neutral5",
+    borderRadius: "$default",
+    backgroundColor: "$neutral1",
+    "&:hover": {
+        borderColor: "$neutral8",
+    },
 });
 //# sourceMappingURL=DatePickerContainer.styles.js.map

package/dist/components/src/Input/DateRangePicker/styles/DatePickerContainer.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerContainer.styles.js","sourceRoot":"","sources":["../../../../../../src/Input/DateRangePicker/styles/DatePickerContainer.styles.ts"],"names":[],"mappings":";;AAAA,8CAA0C;AAE1C,kBAAe,IAAA,YAAG,EAAC;IACjB,OAAO,EAAE,MAAM;IACf,GAAG,EAAE,KAAK;CACX,CAAC,CAAC"}
+{"version":3,"file":"DatePickerContainer.styles.js","sourceRoot":"","sources":["../../../../../../src/Input/DateRangePicker/styles/DatePickerContainer.styles.ts"],"names":[],"mappings":";;AAAA,8CAA0C;AAE1C,kBAAe,IAAA,YAAG,EAAC;IACjB,OAAO,EAAE,MAAM;IACf,GAAG,EAAE,KAAK;IACV,WAAW,EAAE,KAAK;IAClB,YAAY,EAAE,KAAK;IACnB,MAAM,EAAE,qBAAqB;IAC7B,YAAY,EAAE,UAAU;IACxB,eAAe,EAAE,WAAW;IAC5B,SAAS,EAAE;QACT,WAAW,EAAE,WAAW;KACzB;CACF,CAAC,CAAC"}

package/dist/esm/Input/DateRangePicker/index.js

@@ -1,12 +1,12 @@
-import { MenuMoreVertical } from "@vitality-ds/icons";
+import { Close, MenuMoreVertical } from "@vitality-ds/icons";
 import React from "react";
-import Button from "../../Button";
 import Dropdown from "../../DropdownMenu";
-import FormFieldLabel from "../../Form/FormField/components/FormFieldLabel";
+import Flex from "../../Flex";
+import IconButton from "../../IconButton";
 import DatePicker from "../DatePicker";
 import PRESET_OPTIONS from "./constants";
 import useDateRangePicker from "./hooks/useDateRangePicker";
-import { BaseDateRangePicker, DateContainer, DatePickerContainer, ExtrasContainer } from "./styled";
+import { BaseDateRangePicker, BaseDateRangePickerLabel, DateContainer, DatePickerContainer, ExtrasContainer } from "./styled";
 var DateRangePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var value = _ref.value,
     _ref$toLabel = _ref.toLabel,
@@ -47,11 +47,12 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
   });
   return /*#__PURE__*/React.createElement(BaseDateRangePicker, {
     ref: forwardedRef
-  }, /*#__PURE__*/React.createElement(DatePickerContainer, null, /*#__PURE__*/React.createElement(DateContainer, null, /*#__PURE__*/React.createElement(FormFieldLabel, {
-    id: "".concat(id, "_start_date"),
-    fieldType: "text",
-    content: fromLabel
-  }), /*#__PURE__*/React.createElement(DatePicker, {
+  }, /*#__PURE__*/React.createElement(DatePickerContainer, null, /*#__PURE__*/React.createElement(Flex, {
+    direction: "row",
+    wrap: "wrap"
+  }, /*#__PURE__*/React.createElement(DateContainer, null, /*#__PURE__*/React.createElement(BaseDateRangePickerLabel, {
+    id: "".concat(id, "_start_date")
+  }, fromLabel), /*#__PURE__*/React.createElement(DatePicker, {
     disabled: disabled,
     hasError: hasError,
     showFirstDateInRangeOnOpen: true,
@@ -65,11 +66,9 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
       return inputRef.current.children[0].children[0].children[0].focus();
     },
     name: "".concat(name, "_start_date")
-  })), /*#__PURE__*/React.createElement(DateContainer, null, /*#__PURE__*/React.createElement(FormFieldLabel, {
-    id: "".concat(id, "_end_date"),
-    fieldType: "text",
-    content: toLabel
-  }), /*#__PURE__*/React.createElement(DatePicker, {
+  })), /*#__PURE__*/React.createElement(DateContainer, null, /*#__PURE__*/React.createElement(BaseDateRangePickerLabel, {
+    id: "".concat(id, "_end_date")
+  }, toLabel), /*#__PURE__*/React.createElement(DatePicker, {
     ref: inputRef,
     disabled: disabled,
     hasError: hasError,
@@ -80,13 +79,15 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
     calendarValue: calendarValue,
     id: "".concat(id, "_end_date"),
     name: "".concat(name, "_end_date")
-  }))), /*#__PURE__*/React.createElement(ExtrasContainer, null, /*#__PURE__*/React.createElement(Button, {
+  }))), /*#__PURE__*/React.createElement(ExtrasContainer, null, /*#__PURE__*/React.createElement(IconButton, {
+    tooltipContent: "Clear",
     disabled: disabled,
     onClick: function onClick() {
       return handleClearButtonClick();
     },
-    appearance: "ghost"
-  }, "Clear"), showPresets && /*#__PURE__*/React.createElement(Dropdown, {
+    icon: /*#__PURE__*/React.createElement(Close, null),
+    size: "compact"
+  }), showPresets && /*#__PURE__*/React.createElement(Dropdown, {
     disabled: disabled,
     trigger: {
       type: "iconButton",
@@ -98,7 +99,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
     },
     items: itemsArray,
     preferredAlignment: "center"
-  })));
+  }))));
 });
 DateRangePicker.displayName = "DateRangePicker";
 export default DateRangePicker;

package/dist/esm/Input/DateRangePicker/styled.js

@@ -1,10 +1,11 @@
 import { styled } from "@vitality-ds/system";
+import { BaseLabel } from "../../Form/Label/styled";
 import BaseDateRangePickerStyles from "./styles/BaseDateRangePicker.styles";
+import BaseDateRangePickerLabelStyles from "./styles/BaseDateRangePickerLabel.styles";
 import DateContainerStyles from "./styles/DateContainer.styles";
 import DatePickerContainerStyles from "./styles/DatePickerContainer.styles";
 import ExtrasContainerStyles from "./styles/ExtrasContainers";
-
-// eslint-disable-next-line import/prefer-default-export
+export var BaseDateRangePickerLabel = styled(BaseLabel, BaseDateRangePickerLabelStyles);
 export var BaseDateRangePicker = styled("div", BaseDateRangePickerStyles);
 export var DateContainer = styled("div", DateContainerStyles);
 export var DatePickerContainer = styled("div", DatePickerContainerStyles);

package/dist/esm/Input/DateRangePicker/styles/BaseDateRangePicker.styles.js

@@ -4,4 +4,5 @@ export default css({
   flexDirection: "row",
   alignItems: "flex-end",
   gap: "$sm"
+  // border: "1px solid blue",
 });

package/dist/esm/Input/DateRangePicker/styles/BaseDateRangePickerLabel.styles.js

@@ -0,0 +1,4 @@
+import { css } from "@vitality-ds/system";
+export default css({
+  flexShrink: 0
+});

package/dist/esm/Input/DateRangePicker/styles/DateContainer.styles.js

@@ -1,6 +1,14 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { css } from "@vitality-ds/system";
-export default css({
+import { BaseInputWrapper } from "../../TextInput/styled";
+export default css(_defineProperty({
   display: "flex",
-  gap: "$xs",
-  flexDirection: "column"
-});
+  gap: "$sm",
+  alignItems: "center",
+  overflow: "visible"
+}, "".concat(BaseInputWrapper), {
+  borderColor: "transparent",
+  borderTopLeftRadius: 0,
+  borderBottomLeftRadius: 0,
+  paddingLeft: 0
+}));

package/dist/esm/Input/DateRangePicker/styles/DatePickerContainer.styles.js

@@ -1,5 +1,13 @@
 import { css } from "@vitality-ds/system";
 export default css({
   display: "flex",
-  gap: "$lg"
+  gap: "$sm",
+  paddingLeft: "$md",
+  paddingRight: "$sm",
+  border: "1px solid $neutral5",
+  borderRadius: "$default",
+  backgroundColor: "$neutral1",
+  "&:hover": {
+    borderColor: "$neutral8"
+  }
 });