@skbkontur/react-ui 0.0.0-edbe8cfc5c → 0.0.0-ee57da3e1e

package/components/CurrencyLabel/CurrencyLabel/CurrencyLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CurrencyLabel.tsx"],"names":["React","MAX_SAFE_DIGITS","CurrencyHelper","CommonWrapper","FRACTION_DIGITS_DEFAULT","CurrencyLabelDataTids","root","CurrencyLabel","value","fractionDigits","currencySymbol","hideTrailingZeros","rest","format","String","fromCharCode","__KONTUR_REACT_UI__","propTypes","Error","destructString","fraction","length","Number","isInteger"],"mappings":"uLAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,eAAT,QAAgC,4BAAhC;AACA,SAASC,cAAT,QAA+B,iCAA/B;AACA,SAASC,aAAT,QAA2C,8BAA3C;;;;;;;;;;;;;;AAcA,IAAMC,uBAAuB,GAAG,CAAhC;;AAEA,OAAO,IAAMC,qBAAqB,GAAG;AACnCC,EAAAA,IAAI,EAAE,qBAD6B,EAA9B;;;AAIP,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB;;;;;;AAMU,KALrCC,KAKqC,QALrCA,KAKqC,4BAJrCC,cAIqC,CAJrCA,cAIqC,oCAJpBL,uBAIoB,uBAHrCM,cAGqC,QAHrCA,cAGqC,8BAFrCC,iBAEqC,CAFrCA,iBAEqC,sCAFjB,KAEiB,yBADlCC,IACkC;AACrC;AACE,wBAAC,aAAD,EAAmBA,IAAnB;AACE,kCAAM,YAAUP,qBAAqB,CAACC,IAAtC;AACGJ,IAAAA,cAAc,CAACW,MAAf,CAAsBL,KAAtB,EAA6B,EAAEC,cAAc,EAAdA,cAAF,EAAkBE,iBAAiB,EAAjBA,iBAAlB,EAA7B,CADH;AAEGD,IAAAA,cAAc,IAAII,MAAM,CAACC,YAAP,CAAoB,IAApB,CAFrB,CAE+C,YAF/C;AAGGL,IAAAA,cAHH,CADF,CADF;;;;AASD,CAhBM;;AAkBPH,aAAa,CAACS,mBAAd,GAAoC,eAApC;;AAEAT,aAAa,CAACU,SAAd,GAA0B;AACxBR,EAAAA,cAAc,EAAE,+BAA6E,kCAA1EA,cAA0E,CAA1EA,eAA0E,qCAAzDL,uBAAyD,wBAAhCI,KAAgC,SAAhCA,KAAgC;AAC3F,QAAIC,eAAc,GAAGR,eAArB,EAAsC;AACpC,aAAO,IAAIiB,KAAJ;AACL,0DAAkDjB,eAAlD,4EADK,CAAP;;;AAID;;AAED,gBAAqBC,cAAc,CAACiB,cAAf,CAA8BL,MAAM,CAACN,KAAD,CAApC,KAAgD,EAAEY,QAAQ,EAAE,EAAZ,EAArE,CAAQA,QAAR,SAAQA,QAAR;AACA,QAAIA,QAAQ,CAACC,MAAT,GAAkBZ,eAAtB,EAAsC;AACpC,aAAO,IAAIS,KAAJ;AACL,gIADK,CAAP;;;AAID;;AAED,QAAI,CAACI,MAAM,CAACC,SAAP,CAAiBd,eAAjB,CAAL,EAAuC;AACrC,aAAO,IAAIS,KAAJ,2GAAP;;;AAGD;;AAED,WAAO,IAAP;AACD,GAxBuB,EAA1B","sourcesContent":["import React from 'react';\n\nimport { MAX_SAFE_DIGITS } from '../CurrencyInput/constants';\nimport { CurrencyHelper } from '../CurrencyInput/CurrencyHelper';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\n\nexport interface CurrencyLabelProps extends CommonProps {\n  /**\n   * Минимальное количество отображаемых знаков после запятой\n   * @default 2\n   */\n  fractionDigits?: number;\n  value: number;\n  currencySymbol?: React.ReactNode;\n  /** Убрать лишние нули после запятой */\n  hideTrailingZeros?: boolean;\n}\n\nconst FRACTION_DIGITS_DEFAULT = 2;\n\nexport const CurrencyLabelDataTids = {\n  root: 'CurrencyLabel__root',\n} as const;\n\nexport const CurrencyLabel = ({\n  value,\n  fractionDigits = FRACTION_DIGITS_DEFAULT,\n  currencySymbol,\n  hideTrailingZeros = false,\n  ...rest\n}: CurrencyLabelProps): JSX.Element => {\n  return (\n    <CommonWrapper {...rest}>\n      <span data-tid={CurrencyLabelDataTids.root}>\n        {CurrencyHelper.format(value, { fractionDigits, hideTrailingZeros })}\n        {currencySymbol && String.fromCharCode(0xa0) /* &nbsp; */}\n        {currencySymbol}\n      </span>\n    </CommonWrapper>\n  );\n};\n\nCurrencyLabel.__KONTUR_REACT_UI__ = 'CurrencyLabel';\n\nCurrencyLabel.propTypes = {\n  fractionDigits: ({ fractionDigits = FRACTION_DIGITS_DEFAULT, value }: CurrencyLabelProps) => {\n    if (fractionDigits > MAX_SAFE_DIGITS) {\n      return new Error(\n        `[CurrencyLabel]: Prop 'fractionDigits' exceeds ${MAX_SAFE_DIGITS}.` +\n          `\\nSee https://tech.skbkontur.ru/react-ui/#/CurrencyInput?id=why15`,\n      );\n    }\n\n    const { fraction } = CurrencyHelper.destructString(String(value)) || { fraction: '' };\n    if (fraction.length > fractionDigits) {\n      return new Error(\n        `[CurrencyLabel]: Prop 'fractionDigits' less than fractional part of the 'value' property,` +\n          `'value' will not be cutted`,\n      );\n    }\n\n    if (!Number.isInteger(fractionDigits)) {\n      return new Error(\n        `[CurrencyLabel]: Prop 'fractionDigits' is not integer, fraction part of these property will not be used`,\n      );\n    }\n\n    return null;\n  },\n};\n"]}

package/components/CurrencyLabel/CurrencyLabel/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/CurrencyLabel/CurrencyLabel.js",
+  "module": "CurrencyLabel",
+  "types": "../CurrencyLabel.d.ts",
+  "sideEffects": false
+}

package/components/CurrencyLabel/CurrencyLabel.d.ts

@@ -1,24 +1,23 @@
-import * as React from 'react';
-export declare type CurrencyLabelProps = {
+import React from 'react';
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface CurrencyLabelProps extends CommonProps {
     /**
-     * Количество отображаемых знаков после запятой
+     * Минимальное количество отображаемых знаков после запятой
      * @default 2
      */
-    fractionDigits: number;
+    fractionDigits?: number;
     value: number;
     currencySymbol?: React.ReactNode;
-} & typeof defaultProps;
-export declare const defaultProps: {
-    fractionDigits: number;
+    /** Убрать лишние нули после запятой */
+    hideTrailingZeros?: boolean;
+}
+export declare const CurrencyLabelDataTids: {
+    readonly root: "CurrencyLabel__root";
 };
 export declare const CurrencyLabel: {
-    ({ value, fractionDigits, currencySymbol }: CurrencyLabelProps): JSX.Element;
+    ({ value, fractionDigits, currencySymbol, hideTrailingZeros, ...rest }: CurrencyLabelProps): JSX.Element;
     __KONTUR_REACT_UI__: string;
-    defaultProps: {
-        fractionDigits: number;
-    };
     propTypes: {
-        fractionDigits: (props: CurrencyLabelProps) => Error | null;
+        fractionDigits: ({ fractionDigits, value }: CurrencyLabelProps) => Error | null;
     };
 };
-export default CurrencyLabel;

package/components/CurrencyLabel/CurrencyLabel.md

@@ -0,0 +1,29 @@
+To render rubles
+
+```jsx
+<CurrencyLabel value={12356.1} currencySymbol={'₽'} />
+```
+
+...or dollars
+
+```jsx
+<CurrencyLabel value={12356.1} currencySymbol={'$'} />
+```
+
+...or nothing
+
+```jsx
+<CurrencyLabel value={12356.1} />
+```
+
+Count of fraction digits can be changed
+
+```jsx
+<CurrencyLabel value={3562001.1} fractionDigits={3} currencySymbol={'₽'} />
+```
+
+Can hide trailing zeros
+
+```jsx
+<CurrencyLabel value={356.167} fractionDigits={5} hideTrailingZeros />
+```

package/components/CurrencyLabel/index/index.js

@@ -0,0 +1 @@
+export * from "../CurrencyLabel";

package/components/CurrencyLabel/index/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAd","sourcesContent":["export * from './CurrencyLabel';\n"]}

package/components/CurrencyLabel/index/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/CurrencyLabel/index.js",
+  "module": "index",
+  "types": "../index.d.ts",
+  "sideEffects": false
+}

package/components/CurrencyLabel/index.d.ts

@@ -1 +1 @@
-export { default, CurrencyLabelProps } from './CurrencyLabel';
+export * from './CurrencyLabel';

package/components/CurrencyLabel/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../cjs/components/CurrencyLabel/index.js",
+  "module": "index",
+  "types": "index.d.ts",
+  "sideEffects": false
+}

package/components/DateInput/CalendarIcon/CalendarIcon.js

@@ -0,0 +1,17 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import { CalendarIcon16Light } from "../../../internal/icons2022/CalendarIcon/CalendarIcon16Light";
+import { CalendarIcon20Light } from "../../../internal/icons2022/CalendarIcon/CalendarIcon20Light";
+import { CalendarIcon24Regular } from "../../../internal/icons2022/CalendarIcon/CalendarIcon24Regular";
+import { iconSizer } from "../../../internal/icons2022/iconSizer";
+export var CalendarIcon = iconSizer({
+  small: function small() {
+    return /*#__PURE__*/React.createElement(CalendarIcon16Light, null);
+  },
+  medium: function medium() {
+    return /*#__PURE__*/React.createElement(CalendarIcon20Light, null);
+  },
+  large: function large() {
+    return /*#__PURE__*/React.createElement(CalendarIcon24Regular, null);
+  }
+}, 'CalendarIcon');

package/components/DateInput/CalendarIcon/CalendarIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CalendarIcon.tsx"],"names":["React","CalendarIcon16Light","CalendarIcon20Light","CalendarIcon24Regular","iconSizer","CalendarIcon","small","medium","large"],"mappings":"AAAA;AACA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,mBAAT,QAAoC,2DAApC;AACA,SAASC,mBAAT,QAAoC,2DAApC;AACA,SAASC,qBAAT,QAAsC,6DAAtC;AACA,SAASC,SAAT,QAA0B,oCAA1B;;AAEA,OAAO,IAAMC,YAAY,GAAGD,SAAS;AACnC;AACEE,EAAAA,KAAK,EAAE,sCAAM,oBAAC,mBAAD,OAAN,EADT;AAEEC,EAAAA,MAAM,EAAE,uCAAM,oBAAC,mBAAD,OAAN,EAFV;AAGEC,EAAAA,KAAK,EAAE,sCAAM,oBAAC,qBAAD,OAAN,EAHT,EADmC;;AAMnC,cANmC,CAA9B","sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\n\nimport { CalendarIcon16Light } from '../../internal/icons2022/CalendarIcon/CalendarIcon16Light';\nimport { CalendarIcon20Light } from '../../internal/icons2022/CalendarIcon/CalendarIcon20Light';\nimport { CalendarIcon24Regular } from '../../internal/icons2022/CalendarIcon/CalendarIcon24Regular';\nimport { iconSizer } from '../../internal/icons2022/iconSizer';\n\nexport const CalendarIcon = iconSizer(\n  {\n    small: () => <CalendarIcon16Light />,\n    medium: () => <CalendarIcon20Light />,\n    large: () => <CalendarIcon24Regular />,\n  },\n  'CalendarIcon',\n);\n"]}

package/components/DateInput/CalendarIcon/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/DateInput/CalendarIcon.js",
+  "module": "CalendarIcon",
+  "types": "../CalendarIcon.d.ts",
+  "sideEffects": false
+}

package/components/DateInput/CalendarIcon.d.ts

@@ -0,0 +1,3 @@
+export declare const CalendarIcon: import("../../lib/forwardRefAndName").ReactUIIconWithRef<SVGSVGElement, Omit<import("../../internal/icons2022/BaseIcon").IconProps, "size"> & {
+    size?: number | "small" | "medium" | "large" | undefined;
+}>;

package/components/DateInput/DateFragmentsView/DateFragmentsView.js

@@ -0,0 +1,119 @@
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import React from 'react';
+import { MaskCharLowLine } from "../../../internal/MaskCharLowLine";
+import { InternalDateValidator } from "../../../lib/date/InternalDateValidator";
+import { InternalDateComponentType } from "../../../lib/date/types";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { cx } from "../../../lib/theming/Emotion";
+import { styles } from "../DateFragmentsView.styles";
+export var DateFragmentsView = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(DateFragmentsView, _React$Component);
+
+  function DateFragmentsView() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.rootNode = null;
+
+    _this.isFragment = function (el) {
+      if (_this.rootNode) {
+        // NOTE: NodeList doesn't support method 'forEach' in IE11
+        var fragments = Array.from(_this.rootNode.querySelectorAll('[data-fragment]'));
+        return fragments.some(function (fragment) {
+          return fragment === el || fragment.contains(el);
+        });
+      }
+
+      return false;
+    };
+
+    _this.getRootNode = function () {
+      return _this.rootNode;
+    };
+
+    _this.rootRef = function (el) {
+      _this.rootNode = el;
+    };
+
+    return _this;
+  }
+
+  var _proto = DateFragmentsView.prototype;
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return _this2.renderMain();
+    });
+  };
+
+  _proto.renderMain = function renderMain() {
+    var _this3 = this;
+
+    return /*#__PURE__*/React.createElement("span", {
+      ref: this.rootRef,
+      className: styles.root(this.theme)
+    }, this.props.fragments.map(function (fragment, index) {
+      return fragment.type === InternalDateComponentType.Separator ? _this3.renderSeparator(fragment, index) : _this3.renderDateComponent(fragment, index);
+    }));
+  };
+
+  _proto.renderSeparator = function renderSeparator(fragment, index) {
+    var _cx;
+
+    var separatorClassName = cx((_cx = {}, _cx[styles.mask(this.theme)] = true, _cx[styles.delimiterFilled()] = this.props.fragments[index + 1].value !== null, _cx));
+    return /*#__PURE__*/React.createElement("span", {
+      key: index,
+      className: separatorClassName
+    }, fragment.value);
+  };
+
+  _proto.renderDateComponent = function renderDateComponent(fragment, index) {
+    var _this$props = this.props,
+        inputMode = _this$props.inputMode,
+        onSelectDateComponent = _this$props.onSelectDateComponent,
+        selected = _this$props.selected;
+    var type = fragment.type,
+        value = fragment.value,
+        length = fragment.length,
+        valueWithPad = fragment.valueWithPad;
+
+    var getValueMask = function getValueMask() {
+      if (value === null || selected === type && inputMode) {
+        return value;
+      }
+
+      return valueWithPad || value;
+    };
+
+    var valueMask = getValueMask();
+    var lengthMask = InternalDateValidator.testParseToNumber(valueMask) ? Math.max(length - valueMask.toString().length, 0) : length;
+
+    var handleMouseUp = function handleMouseUp(e) {
+      if (document.activeElement && document.activeElement.contains(e.currentTarget)) {
+        onSelectDateComponent(type, e);
+      }
+    };
+
+    return /*#__PURE__*/React.createElement("span", {
+      key: index,
+      "data-fragment": "",
+      onMouseUp: handleMouseUp
+    }, valueMask, /*#__PURE__*/React.createElement("span", {
+      "data-tid": "DateFragmentsView__placeholder",
+      className: styles.mask(this.theme)
+    }, Array(lengthMask).fill('').map(function (_, i) {
+      return /*#__PURE__*/React.createElement(MaskCharLowLine, {
+        key: i
+      });
+    })));
+  };
+
+  return DateFragmentsView;
+}(React.Component);

package/components/DateInput/DateFragmentsView/DateFragmentsView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DateFragmentsView.tsx"],"names":["React","MaskCharLowLine","InternalDateValidator","InternalDateComponentType","ThemeContext","cx","styles","DateFragmentsView","rootNode","isFragment","el","fragments","Array","from","querySelectorAll","some","fragment","contains","getRootNode","rootRef","render","theme","renderMain","root","props","map","index","type","Separator","renderSeparator","renderDateComponent","separatorClassName","mask","delimiterFilled","value","inputMode","onSelectDateComponent","selected","length","valueWithPad","getValueMask","valueMask","lengthMask","testParseToNumber","Math","max","toString","handleMouseUp","e","document","activeElement","currentTarget","fill","_","i","Component"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { MaskCharLowLine } from '../../internal/MaskCharLowLine';\nimport { InternalDateValidator } from '../../lib/date/InternalDateValidator';\nimport { InternalDateComponentType, InternalDateFragment } from '../../lib/date/types';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './DateFragmentsView.styles';\n\ninterface DateFragmentViewProps {\n  selected: InternalDateComponentType | null;\n  fragments: InternalDateFragment[];\n  inputMode: boolean;\n  onSelectDateComponent: (type: InternalDateComponentType, e: React.MouseEvent<HTMLSpanElement>) => void;\n}\n\nexport class DateFragmentsView extends React.Component<DateFragmentViewProps> {\n  private theme!: Theme;\n  private rootNode: HTMLSpanElement | null = null;\n\n  public isFragment = (el: HTMLElement | EventTarget): boolean => {\n    if (this.rootNode) {\n      // NOTE: NodeList doesn't support method 'forEach' in IE11\n      const fragments: HTMLSpanElement[] = Array.from(this.rootNode.querySelectorAll('[data-fragment]'));\n      return fragments.some((fragment) => fragment === el || fragment.contains(el as HTMLSpanElement));\n    }\n    return false;\n  };\n\n  public getRootNode = () => this.rootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    return (\n      <span ref={this.rootRef} className={styles.root(this.theme)}>\n        {this.props.fragments.map((fragment, index) =>\n          fragment.type === InternalDateComponentType.Separator\n            ? this.renderSeparator(fragment, index)\n            : this.renderDateComponent(fragment, index),\n        )}\n      </span>\n    );\n  }\n\n  private renderSeparator(fragment: InternalDateFragment, index: number): JSX.Element {\n    const separatorClassName = cx({\n      [styles.mask(this.theme)]: true,\n      [styles.delimiterFilled()]: this.props.fragments[index + 1].value !== null,\n    });\n\n    return (\n      <span key={index} className={separatorClassName}>\n        {fragment.value}\n      </span>\n    );\n  }\n\n  private renderDateComponent(fragment: InternalDateFragment, index: number): JSX.Element {\n    const { inputMode, onSelectDateComponent, selected } = this.props;\n    const { type, value, length, valueWithPad } = fragment;\n\n    const getValueMask = () => {\n      if (value === null || (selected === type && inputMode)) {\n        return value;\n      }\n\n      return valueWithPad || value;\n    };\n\n    const valueMask = getValueMask();\n\n    const lengthMask = InternalDateValidator.testParseToNumber(valueMask)\n      ? Math.max(length - valueMask.toString().length, 0)\n      : length;\n\n    const handleMouseUp = (e: React.MouseEvent<HTMLSpanElement>) => {\n      if (document.activeElement && document.activeElement.contains(e.currentTarget)) {\n        onSelectDateComponent(type, e);\n      }\n    };\n\n    return (\n      <span key={index} data-fragment=\"\" onMouseUp={handleMouseUp}>\n        {valueMask}\n        <span data-tid=\"DateFragmentsView__placeholder\" className={styles.mask(this.theme)}>\n          {Array(lengthMask)\n            .fill('')\n            .map((_, i) => (\n              <MaskCharLowLine key={i} />\n            ))}\n        </span>\n      </span>\n    );\n  }\n\n  private rootRef = (el: HTMLSpanElement | null) => {\n    this.rootNode = el;\n  };\n}\n"]}

package/components/DateInput/DateFragmentsView/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/DateInput/DateFragmentsView.js",
+  "module": "DateFragmentsView",
+  "types": "../DateFragmentsView.d.ts",
+  "sideEffects": false
+}

package/components/DateInput/DateFragmentsView.d.ts

@@ -1,17 +1,20 @@
-import * as React from 'react';
+import React from 'react';
 import { InternalDateComponentType, InternalDateFragment } from '../../lib/date/types';
 interface DateFragmentViewProps {
-    nodeRef: (el: HTMLDivElement | null) => void;
     selected: InternalDateComponentType | null;
     fragments: InternalDateFragment[];
     inputMode: boolean;
-    onSelectDateComponent: (type: InternalDateComponentType, e: React.MouseEvent<HTMLElement>) => void;
+    onSelectDateComponent: (type: InternalDateComponentType, e: React.MouseEvent<HTMLSpanElement>) => void;
 }
-export declare class DateFragmentsView extends React.Component<DateFragmentViewProps, {}> {
+export declare class DateFragmentsView extends React.Component<DateFragmentViewProps> {
     private theme;
+    private rootNode;
+    isFragment: (el: HTMLElement | EventTarget) => boolean;
+    getRootNode: () => HTMLSpanElement | null;
     render(): JSX.Element;
     private renderMain;
     private renderSeparator;
     private renderDateComponent;
+    private rootRef;
 }
 export {};

package/components/DateInput/DateFragmentsView.styles/DateFragmentsView.styles.js

@@ -0,0 +1,19 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  root: function root(t) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      cursor: text;\n\n      & ::selection {\n        background: ", ";\n      }\n      & ::-moz-selection {\n        background: ", ";\n      }\n    "])), t.dateInputComponentSelectedBgColor, t.dateInputComponentSelectedBgColor);
+  },
+  selected: function selected(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      border-color: ", ";\n      background-color: ", ";\n    "])), t.dateInputComponentSelectedBgColor, t.dateInputComponentSelectedBgColor);
+  },
+  mask: function mask(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.dateInputMaskColor);
+  },
+  delimiterFilled: function delimiterFilled() {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      color: inherit;\n    "])));
+  }
+});

package/components/DateInput/DateFragmentsView.styles/DateFragmentsView.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DateFragmentsView.styles.ts"],"names":["css","memoizeStyle","styles","root","t","dateInputComponentSelectedBgColor","selected","mask","dateInputMaskColor","delimiterFilled"],"mappings":"0KAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,WAAOJ,GAAP;;;;AAIkBI,IAAAA,CAAC,CAACC,iCAJpB;;;AAOkBD,IAAAA,CAAC,CAACC,iCAPpB;;;AAUD,GAZgC;;AAcjCC,EAAAA,QAdiC,oBAcxBF,CAdwB,EAcd;AACjB,WAAOJ,GAAP;AACkBI,IAAAA,CAAC,CAACC,iCADpB;AAEsBD,IAAAA,CAAC,CAACC,iCAFxB;;AAID,GAnBgC;;AAqBjCE,EAAAA,IArBiC,gBAqB5BH,CArB4B,EAqBlB;AACb,WAAOJ,GAAP;AACWI,IAAAA,CAAC,CAACI,kBADb;;AAGD,GAzBgC;;AA2BjCC,EAAAA,eA3BiC,6BA2Bf;AAChB,WAAOT,GAAP;;;AAGD,GA/BgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      cursor: text;\n\n      & ::selection {\n        background: ${t.dateInputComponentSelectedBgColor};\n      }\n      & ::-moz-selection {\n        background: ${t.dateInputComponentSelectedBgColor};\n      }\n    `;\n  },\n\n  selected(t: Theme) {\n    return css`\n      border-color: ${t.dateInputComponentSelectedBgColor};\n      background-color: ${t.dateInputComponentSelectedBgColor};\n    `;\n  },\n\n  mask(t: Theme) {\n    return css`\n      color: ${t.dateInputMaskColor};\n    `;\n  },\n\n  delimiterFilled() {\n    return css`\n      color: inherit;\n    `;\n  },\n});\n"]}

package/components/DateInput/DateFragmentsView.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/DateInput/DateFragmentsView.styles.js",
+  "module": "DateFragmentsView.styles",
+  "types": "../DateFragmentsView.styles.d.ts",
+  "sideEffects": false
+}

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

@@ -1,7 +1,7 @@
-import { ITheme } from '../../lib/theming/Theme';
-declare const jsStyles: {
-    root(t: ITheme): string;
-    mask(t: ITheme): string;
-    delimiter(t: ITheme): string;
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    root(t: Theme): string;
+    selected(t: Theme): string;
+    mask(t: Theme): string;
+    delimiterFilled(): string;
 };
-export default jsStyles;