@deephaven/components 0.43.0 → 0.44.1-beta.0

package/dist/SocketedButton.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import classNames from 'classnames';
+import { dhExclamation, vsLink } from '@deephaven/icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import "./SocketedButton.css";
+var SocketedButton = /*#__PURE__*/React.forwardRef((props, ref) => {
+  var {
+    children,
+    className,
+    disabled,
+    id,
+    isLinked,
+    isLinkedSource,
+    isInvalid,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    style,
+    'data-testid': dataTestId
+  } = props;
+  return /*#__PURE__*/React.createElement("button", {
+    ref: ref,
+    type: "button",
+    className: classNames('btn-socketed', {
+      'btn-socketed-linked': isLinked !== undefined && isLinked || isLinkedSource
+    }, {
+      'btn-socketed-linked-source': isLinkedSource
+    }, {
+      'is-invalid': isInvalid
+    }, className),
+    id: id,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    style: style,
+    disabled: disabled,
+    "data-testid": dataTestId
+  }, children, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: vsLink,
+    className: "linked btn-socketed-icon",
+    transform: "down-1"
+  }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: dhExclamation,
+    className: "is-invalid btn-socketed-icon"
+  }));
+});
+SocketedButton.displayName = 'SocketedButton';
+SocketedButton.defaultProps = {
+  children: undefined,
+  className: '',
+  disabled: false,
+  id: undefined,
+  isLinked: false,
+  isLinkedSource: false,
+  isInvalid: false,
+  onClick: undefined,
+  onMouseEnter: undefined,
+  onMouseLeave: undefined,
+  style: undefined,
+  'data-testid': undefined
+};
+export default SocketedButton;
+//# sourceMappingURL=SocketedButton.js.map

package/dist/SocketedButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SocketedButton.js","names":["React","classNames","dhExclamation","vsLink","FontAwesomeIcon","SocketedButton","forwardRef","props","ref","children","className","disabled","id","isLinked","isLinkedSource","isInvalid","onClick","onMouseEnter","onMouseLeave","style","dataTestId","undefined","displayName","defaultProps"],"sources":["../src/SocketedButton.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { dhExclamation, vsLink } from '@deephaven/icons';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport './SocketedButton.scss';\n\ntype SocketedButtonProps = {\n  children?: React.ReactNode;\n  className?: string;\n  disabled?: boolean;\n  id?: string;\n  isLinked?: boolean;\n  isLinkedSource?: boolean;\n  isInvalid?: boolean;\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;\n  onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;\n  style?: React.CSSProperties;\n  'data-testid'?: string;\n};\n\nconst SocketedButton = React.forwardRef<HTMLButtonElement, SocketedButtonProps>(\n  (props: SocketedButtonProps, ref) => {\n    const {\n      children,\n      className,\n      disabled,\n      id,\n      isLinked,\n      isLinkedSource,\n      isInvalid,\n      onClick,\n      onMouseEnter,\n      onMouseLeave,\n      style,\n      'data-testid': dataTestId,\n    } = props;\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        className={classNames(\n          'btn-socketed',\n          {\n            'btn-socketed-linked':\n              (isLinked !== undefined && isLinked) || isLinkedSource,\n          },\n          { 'btn-socketed-linked-source': isLinkedSource },\n          { 'is-invalid': isInvalid },\n          className\n        )}\n        id={id}\n        onClick={onClick}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        style={style}\n        disabled={disabled}\n        data-testid={dataTestId}\n      >\n        {children}\n        <FontAwesomeIcon\n          icon={vsLink}\n          className=\"linked btn-socketed-icon\"\n          transform=\"down-1\"\n        />\n        <FontAwesomeIcon\n          icon={dhExclamation}\n          className=\"is-invalid btn-socketed-icon\"\n        />\n      </button>\n    );\n  }\n);\n\nSocketedButton.displayName = 'SocketedButton';\n\nSocketedButton.defaultProps = {\n  children: undefined,\n  className: '',\n  disabled: false,\n  id: undefined,\n  isLinked: false,\n  isLinkedSource: false,\n  isInvalid: false,\n  onClick: undefined,\n  onMouseEnter: undefined,\n  onMouseLeave: undefined,\n  style: undefined,\n  'data-testid': undefined,\n};\n\nexport default SocketedButton;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,aAAa,EAAEC,MAAM,QAAQ,kBAAkB;AACxD,SAASC,eAAe,QAAQ,gCAAgC;AAAC;AAmBjE,IAAMC,cAAc,gBAAGL,KAAK,CAACM,UAAU,CACrC,CAACC,KAA0B,EAAEC,GAAG,KAAK;EACnC,IAAM;IACJC,QAAQ;IACRC,SAAS;IACTC,QAAQ;IACRC,EAAE;IACFC,QAAQ;IACRC,cAAc;IACdC,SAAS;IACTC,OAAO;IACPC,YAAY;IACZC,YAAY;IACZC,KAAK;IACL,aAAa,EAAEC;EACjB,CAAC,GAAGb,KAAK;EACT,oBACE;IACE,GAAG,EAAEC,GAAI;IACT,IAAI,EAAC,QAAQ;IACb,SAAS,EAAEP,UAAU,CACnB,cAAc,EACd;MACE,qBAAqB,EAClBY,QAAQ,KAAKQ,SAAS,IAAIR,QAAQ,IAAKC;IAC5C,CAAC,EACD;MAAE,4BAA4B,EAAEA;IAAe,CAAC,EAChD;MAAE,YAAY,EAAEC;IAAU,CAAC,EAC3BL,SAAS,CACT;IACF,EAAE,EAAEE,EAAG;IACP,OAAO,EAAEI,OAAQ;IACjB,YAAY,EAAEC,YAAa;IAC3B,YAAY,EAAEC,YAAa;IAC3B,KAAK,EAAEC,KAAM;IACb,QAAQ,EAAER,QAAS;IACnB,eAAaS;EAAW,GAEvBX,QAAQ,eACT,oBAAC,eAAe;IACd,IAAI,EAAEN,MAAO;IACb,SAAS,EAAC,0BAA0B;IACpC,SAAS,EAAC;EAAQ,EAClB,eACF,oBAAC,eAAe;IACd,IAAI,EAAED,aAAc;IACpB,SAAS,EAAC;EAA8B,EACxC,CACK;AAEb,CAAC,CACF;AAEDG,cAAc,CAACiB,WAAW,GAAG,gBAAgB;AAE7CjB,cAAc,CAACkB,YAAY,GAAG;EAC5Bd,QAAQ,EAAEY,SAAS;EACnBX,SAAS,EAAE,EAAE;EACbC,QAAQ,EAAE,KAAK;EACfC,EAAE,EAAES,SAAS;EACbR,QAAQ,EAAE,KAAK;EACfC,cAAc,EAAE,KAAK;EACrBC,SAAS,EAAE,KAAK;EAChBC,OAAO,EAAEK,SAAS;EAClBJ,YAAY,EAAEI,SAAS;EACvBH,YAAY,EAAEG,SAAS;EACvBF,KAAK,EAAEE,SAAS;EAChB,aAAa,EAAEA;AACjB,CAAC;AAED,eAAehB,cAAc"}

package/dist/SpectrumThemeDark.module.css

@@ -0,0 +1,9 @@
+/**
+  This module contains overrides of React Spectrum css variables for the default
+  `dark` Deephaven theme.
+*/
+.dh-spectrum-theme--dark.dh-spectrum-theme--dark {
+  --spectrum-alias-background-color-default: #1a171a;
+}
+
+/*# sourceMappingURL=SpectrumThemeDark.module.css.map */

package/dist/SpectrumThemeDark.module.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../src/SpectrumThemeDark.module.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AASA;EACE","file":"SpectrumThemeDark.module.css","sourcesContent":["/**\n  This module contains overrides of React Spectrum css variables for the default\n  `dark` Deephaven theme.\n*/\n@use '../scss/bootstrap_overrides' as bootstrap;\n@use '../scss/util' as *;\n\n// Doubling specificity to ensure this takes precedence over default Spectrum\n// styles.\n#{multiply-specificity-n('.dh-spectrum-theme--dark', 2)} {\n  --spectrum-alias-background-color-default: #{bootstrap.$interfaceblack};\n}\n"]}

package/dist/SpectrumThemeLight.module.css

@@ -0,0 +1,9 @@
+/**
+  This module contains overrides of React Spectrum css variables for the default
+  `light` Deephaven theme.
+*/
+.dh-spectrum-theme--light.dh-spectrum-theme--light {
+  --spectrum-alias-background-color-default: #f0f0ee;
+}
+
+/*# sourceMappingURL=SpectrumThemeLight.module.css.map */

package/dist/SpectrumThemeLight.module.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../src/SpectrumThemeLight.module.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AASA;EACE","file":"SpectrumThemeLight.module.css","sourcesContent":["/**\n  This module contains overrides of React Spectrum css variables for the default\n  `light` Deephaven theme.\n*/\n@use '../scss/bootstrap_overrides' as bootstrap;\n@use '../scss/util' as *;\n\n// Doubling specificity to ensure this takes precedence over default Spectrum\n// styles.\n#{multiply-specificity-n('.dh-spectrum-theme--light', 2)} {\n  --spectrum-alias-background-color-default: #{bootstrap.$interfacewhite};\n}\n"]}

package/dist/SpectrumUtils.js

@@ -0,0 +1,59 @@
+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) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { theme } from '@react-spectrum/theme-default';
+import darkDH from "./SpectrumThemeDark.module.css";
+import lightDH from "./SpectrumThemeLight.module.css";
+var {
+  global,
+  light,
+  dark,
+  medium,
+  large
+} = theme;
+
+/**
+ * Extend light + dark theme variables with DH defaults.
+ *
+ * A theme is just a mapped collection of css class names that are generated
+ * from a collection of css modules.
+ *
+ * e.g.
+ * {
+ *   global: {
+ *     spectrum: 'spectrum_9e130c',
+ *     'spectrum--medium': 'spectrum--medium_9e130c',
+ *     'spectrum--large': 'spectrum--large_9e130c',
+ *     'spectrum--darkest': 'spectrum--darkest_9e130c',
+ *     'spectrum--dark': 'spectrum--dark_9e130c',
+ *     'spectrum--light': 'spectrum--light_9e130c',
+ *     'spectrum--lightest': 'spectrum--lightest_9e130c',
+ *   },
+ *   light: {
+ *     'spectrum--light': 'spectrum--light_a40724',
+ *     'dh-spectrum-theme--light': '_dh-spectrum-theme--light_1hblg_22',
+ *   },
+ *   dark: {
+ *     'spectrum--darkest': 'spectrum--darkest_256eeb',
+ *     'dh-spectrum-theme--dark': '_dh-spectrum-theme--dark_f7kge_22',
+ *   },
+ *   medium: {
+ *     'spectrum--medium': 'spectrum--medium_4b172c',
+ *   },
+ *   large: {
+ *     'spectrum--large': 'spectrum--large_c40598',
+ *   },
+ * }
+ */
+/* eslint-disable import/prefer-default-export */
+export var themeDHDefault = {
+  global,
+  light: _objectSpread(_objectSpread({}, light), lightDH),
+  dark: _objectSpread(_objectSpread({}, dark), darkDH),
+  // scales
+  medium,
+  large
+};
+//# sourceMappingURL=SpectrumUtils.js.map

package/dist/SpectrumUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpectrumUtils.js","names":["theme","darkDH","lightDH","global","light","dark","medium","large","themeDHDefault"],"sources":["../src/SpectrumUtils.ts"],"sourcesContent":["import { theme } from '@react-spectrum/theme-default';\nimport darkDH from './SpectrumThemeDark.module.scss';\nimport lightDH from './SpectrumThemeLight.module.scss';\n\nconst { global, light, dark, medium, large } = theme;\n\n/**\n * Extend light + dark theme variables with DH defaults.\n *\n * A theme is just a mapped collection of css class names that are generated\n * from a collection of css modules.\n *\n * e.g.\n * {\n *   global: {\n *     spectrum: 'spectrum_9e130c',\n *     'spectrum--medium': 'spectrum--medium_9e130c',\n *     'spectrum--large': 'spectrum--large_9e130c',\n *     'spectrum--darkest': 'spectrum--darkest_9e130c',\n *     'spectrum--dark': 'spectrum--dark_9e130c',\n *     'spectrum--light': 'spectrum--light_9e130c',\n *     'spectrum--lightest': 'spectrum--lightest_9e130c',\n *   },\n *   light: {\n *     'spectrum--light': 'spectrum--light_a40724',\n *     'dh-spectrum-theme--light': '_dh-spectrum-theme--light_1hblg_22',\n *   },\n *   dark: {\n *     'spectrum--darkest': 'spectrum--darkest_256eeb',\n *     'dh-spectrum-theme--dark': '_dh-spectrum-theme--dark_f7kge_22',\n *   },\n *   medium: {\n *     'spectrum--medium': 'spectrum--medium_4b172c',\n *   },\n *   large: {\n *     'spectrum--large': 'spectrum--large_c40598',\n *   },\n * }\n */\n/* eslint-disable import/prefer-default-export */\nexport const themeDHDefault = {\n  global,\n  light: {\n    ...light,\n    ...lightDH,\n  },\n  dark: {\n    ...dark,\n    ...darkDH,\n  },\n  // scales\n  medium,\n  large,\n};\n"],"mappings":";;;;;AAAA,SAASA,KAAK,QAAQ,+BAA+B;AAAC,OAC/CC,MAAM;AAAA,OACNC,OAAO;AAEd,IAAM;EAAEC,MAAM;EAAEC,KAAK;EAAEC,IAAI;EAAEC,MAAM;EAAEC;AAAM,CAAC,GAAGP,KAAK;;AAEpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMQ,cAAc,GAAG;EAC5BL,MAAM;EACNC,KAAK,kCACAA,KAAK,GACLF,OAAO,CACX;EACDG,IAAI,kCACCA,IAAI,GACJJ,MAAM,CACV;EACD;EACAK,MAAM;EACNC;AACF,CAAC"}

package/dist/ThemeExport.js

@@ -0,0 +1,15 @@
+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) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import ThemeExport from "./ThemeExport.module.css"; // Note that TypeScript does not know what keys exist on ThemeExport.module.scss
+// It only knows it's an object with strings for keys and values
+var transitions = {
+  transitionMs: 150,
+  transitionMidMs: 200,
+  transitionLongMs: 300,
+  transitionSlowMs: 1000
+};
+export default Object.freeze(_objectSpread(_objectSpread({}, transitions), ThemeExport));
+//# sourceMappingURL=ThemeExport.js.map

package/dist/ThemeExport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeExport.js","names":["ThemeExport","transitions","transitionMs","transitionMidMs","transitionLongMs","transitionSlowMs","Object","freeze"],"sources":["../src/ThemeExport.ts"],"sourcesContent":["import ThemeExport from './ThemeExport.module.scss';\n\n// Note that TypeScript does not know what keys exist on ThemeExport.module.scss\n// It only knows it's an object with strings for keys and values\n\nconst transitions = {\n  transitionMs: 150,\n  transitionMidMs: 200,\n  transitionLongMs: 300,\n  transitionSlowMs: 1000,\n} as const;\n\ntype Theme = {\n  [Property in keyof typeof transitions]: typeof transitions[Property];\n} & { [key: string]: string };\n\nexport default Object.freeze({\n  ...transitions,\n  ...ThemeExport,\n}) as Theme;\n"],"mappings":";;;;;OAAOA,WAAW,kCAElB;AACA;AAEA,IAAMC,WAAW,GAAG;EAClBC,YAAY,EAAE,GAAG;EACjBC,eAAe,EAAE,GAAG;EACpBC,gBAAgB,EAAE,GAAG;EACrBC,gBAAgB,EAAE;AACpB,CAAU;AAMV,eAAeC,MAAM,CAACC,MAAM,iCACvBN,WAAW,GACXD,WAAW,EACd"}

package/dist/ThemeExport.module.css

@@ -0,0 +1,40 @@
+/* stylelint-disable */
+/* stylelint-disable scss/at-import-no-partial-leading-underscore */
+:export {
+  gray-100: #fcfcfa;
+  gray-200: #f0f0ee;
+  gray-300: #c0bfbf;
+  gray-400: #929192;
+  gray-500: #5b5a5c;
+  gray-600: #555356;
+  gray-700: #403e41;
+  gray-800: #373438;
+  gray-850: #322f33;
+  gray-900: #211f22;
+  black: #1a171a;
+  white: #f0f0ee;
+  yellow: #fcd65b;
+  green: #9edc6f;
+  blue: #76d9e4;
+  purple: #aa9af4;
+  orange: #f37e3f;
+  red: #f95d84;
+  primary: #4878ea;
+  primary-hover: #235de6;
+  primary-dark: #343e5d;
+  secondary: #5b5a5c;
+  success: #9edc6f;
+  info: #fcd65b;
+  warning: #f37e3f;
+  danger: #f95d84;
+  light: #fcfcfa;
+  mid: #929192;
+  dark: #373438;
+  text-muted: #929192;
+  content-bg: #2d2a2e;
+  background: #1a171a;
+  foreground: #f0f0ee;
+  transition: 0.15s;
+}
+
+/*# sourceMappingURL=ThemeExport.module.css.map */

package/dist/ThemeExport.module.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../src/ThemeExport.module.scss","../scss/custom.scss","../scss/bootstrap_overrides.scss"],"names":[],"mappings":"AAAA;ACAA;ADGA;EACE,UEcS;EFbT,UEQe;EFPf,UEcS;EFbT,UEcS;EFbT,UEcS;EFbT,UEcS;EFbT,UEcS;EFbT,UEcS;EFbT,UEcS;EFbT,UEcS;EFbT;EACA,OEFe;EFGf,QEXO;EFYP,OEXM;EFYN,MEXK;EFYL,QEXO;EFYP,QEhBO;EFiBP,KElBI;EFmBJ,SEVc;EFWd,eEgCc;EF/Bd,cEgCa;EF/Bb,WEHS;EFIT,SEpBM;EFqBN,MEtBO;EFuBP,SExBO;EFyBP,QE1BI;EF2BJ,OEZS;EFaT,KEVS;EFWT,MEPS;EFQT,YEZS;EFaT,YEvBc;EFwBd,YErBe;EFsBf,YEvBe;EFwBf,YE4KW","file":"ThemeExport.module.css","sourcesContent":["/* stylelint-disable */\n@import '../scss/custom.scss';\n\n:export {\n  gray-100: $gray-100;\n  gray-200: $gray-200;\n  gray-300: $gray-300;\n  gray-400: $gray-400;\n  gray-500: $gray-500;\n  gray-600: $gray-600;\n  gray-700: $gray-700;\n  gray-800: $gray-800;\n  gray-850: $gray-850;\n  gray-900: $gray-900;\n  black: $black;\n  white: $white;\n  yellow: $yellow;\n  green: $green;\n  blue: $blue;\n  purple: $purple;\n  orange: $orange;\n  red: $red;\n  primary: $primary;\n  primary-hover: $primary-hover;\n  primary-dark: $primary-dark;\n  secondary: $secondary;\n  success: $success;\n  info: $info;\n  warning: $warning;\n  danger: $danger;\n  light: $light;\n  mid: $mid;\n  dark: $dark;\n  text-muted: $text-muted;\n  content-bg: $content-bg;\n  background: $background;\n  foreground: $foreground;\n  transition: $transition;\n}\n","/* stylelint-disable scss/at-import-no-partial-leading-underscore */\n// Consumers should be able to resolve bootstrap/ to node_modules/bootstrap\n\n//Make bootstrap functions available for use in overrides\n@import 'bootstrap/scss/_functions.scss';\n@import './bootstrap_overrides.scss';\n\n//_variable imports come after bootstrap default overrides,\n// makes all other variables and mixins from bootstrap available\n/// with just importing customer.scss\n@import 'bootstrap/scss/_variables.scss';\n@import 'bootstrap/scss/_mixins.scss';\n\n//New variables come after imports\n@import './new_variables.scss';\n","// Styling overrides for bootstrap\n\n// Override / set color variables\n$red: #f95d84;\n$orange: #f37e3f;\n$yellow: #fcd65b;\n$green: #9edc6f;\n$blue: #76d9e4;\n$purple: #aa9af4;\n\n//Define some UI colors\n$interfacegray: #2d2a2e;\n$interfaceblue: #4878ea;\n$interfacewhite: #f0f0ee; //same as gray-200\n$interfaceblack: #1a171a;\n\n//Define our Gray scale\n$white: $interfacewhite;\n$gray-100: #fcfcfa;\n$gray-200: $interfacewhite;\n$gray-300: #c0bfbf;\n$gray-400: #929192;\n$gray-500: #5b5a5c;\n$gray-600: #555356;\n$gray-700: #403e41;\n$gray-800: #373438;\n$gray-850: #322f33;\n$gray-900: #211f22;\n$black: $interfaceblack;\n$content-bg: $interfacegray;\n$background: $interfaceblack;\n$foreground: $interfacewhite;\n\n//Load colors into map\n$colors: ();\n$colors: map-merge(\n  (\n    'red': $red,\n    'orange': $orange,\n    'yellow': $yellow,\n    'green': $green,\n    'blue': $blue,\n    'purple': $purple,\n    'white': $white,\n    'black': $black,\n  ),\n  $colors\n);\n\n//Set default colors\n$body-bg: $black;\n$body-color: $interfacewhite;\n\n// Set brand colors\n$primary: $interfaceblue;\n$primary-hover: darken($primary, 8%);\n$primary-dark: mix($primary, $content-bg, 25%);\n$primary-light: scale-color($primary, $lightness: -25%);\n$secondary: $gray-500;\n$secondary-hover: darken($secondary, 8%);\n$success: $green;\n$info: $yellow;\n$warning: $orange;\n$danger: $red;\n$danger-hover: darken($danger, 8%);\n$light: $gray-100;\n$mid: $gray-400; //Added a mid color, useful for input styling\n$dark: $gray-800;\n$green-dark: scale-color($green, $lightness: -45%, $saturation: -10%);\n\n$theme-colors: () !default;\n$theme-colors: map-merge(\n  (\n    'primary': $primary,\n    'primary-hover': $primary-hover,\n    'primary-light': $primary-light,\n    'primary-dark': $primary-dark,\n    'secondary': $secondary,\n    'success': $success,\n    'info': $info,\n    'warning': $warning,\n    'danger': $danger,\n    'light': $light,\n    'dark': $dark,\n    'mid': $mid,\n    'content-bg': $interfacegray,\n    'background': $interfaceblack,\n    'foreground': $interfacewhite,\n  ),\n  $theme-colors\n);\n\n$component-active-bg: $primary;\n$theme-color-interval: 9%;\n$yiq-contrasted-threshold: 180;\n\n// Override fonts\n$font-family-sans-serif: 'Fira Sans', -apple-system, blinkmacsystemfont,\n  'Segoe UI', 'Roboto', 'Helvetica Neue', arial, sans-serif; //fira sans then native system ui fallbacks\n$font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',\n  'Courier New', monospace;\n$font-family-base: $font-family-sans-serif;\n\n$headings-font-weight: 400;\n\n//Text overides\n$text-muted: $gray-400;\n\n//Style Selection highlight color\n//so browsers add alpha to your color by default, ignoring opacity 1\n//by setting rgba with 0.99 it tricks browser into thinking there is alpha applied\n$text-select-color: $primary-hover;\n$text-select-color-editor: lighten(\n  $gray-700,\n  15%\n); //we lighten it abit to account for that 0.01 loss, and because it needs some anyways.\n\n//Grid variables, same value as default just making easily accessible\n$grid-gutter-width: 30px;\n\n//Visual Overrides\n$border-radius: 4px;\n$box-shadow: 0 0.1rem 1rem rgba($black, 45%); //because our UI is so dark, we need darker default shadows\n$box-shadow-900: 0 0.1rem 1rem rgba(0, 0, 0, 45%); //darkest shadow for $black popups over $black UI\n\n//Override Btn\n$btn-border-radius: 4rem;\n$btn-padding-x: 1.5rem;\n$btn-transition: color 0.12s ease-in-out, background-color 0.12s ease-in-out,\n  border-color 0.12s ease-in-out, box-shadow 0.12s ease-in-out; //default 0.15 is too long\n$btn-border-width: 2px;\n\n//Override Inputs\n$input-bg: $gray-600;\n$input-disabled-bg: $gray-800;\n$input-color: $foreground;\n$input-border-color: $gray-400;\n$input-placeholder-color: $gray-400;\n$input-focus-border-color: rgba($primary, 85%);\n\n$input-btn-focus-width: 0.2rem;\n$input-btn-focus-color: rgba($component-active-bg, 35%);\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;\n\n//checkbox\n$custom-control-indicator-bg: $gray-600;\n$custom-control-indicator-bg-size: 75% 75%;\n$custom-control-indicator-disabled-bg: $gray-800;\n$custom-control-indicator-checked-disabled-bg: $gray-800;\n$custom-control-label-disabled-color: $gray-400;\n\n//Custom Select\n$custom-select-indicator-color: $gray-400;\n$custom-select-bg-size: 16px 16px;\n//dhSort icon encoded\n$custom-select-indicator: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E\"),\n  '#',\n  '%23'\n);\n$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;\n$custom-select-disabled-color: darken($gray-400, 5%);\n$custom-select-disabled-bg: $gray-800;\n\n//modal\n$modal-content-bg: $gray-200;\n$modal-content-border-width: 0;\n$modal-md: 550px;\n\n// Toast notification\n$toast-bg: $primary-dark;\n$toast-color: $foreground;\n$toast-error-bg: mix($danger, $content-bg, 15%);\n$toast-error-color: $foreground;\n\n//tooltips\n$tooltip-bg: $gray-700;\n$tooltip-color: $foreground;\n$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem rgba($black, 80%);\n\n//drowdowns\n$dropdown-bg: $gray-600;\n$dropdown-link-color: $foreground;\n$dropdown-link-hover-color: $foreground;\n$dropdown-link-hover-bg: $primary;\n$dropdown-divider-bg: $gray-700;\n\n//context menus\n$contextmenu-bg: $gray-600;\n$contextmenu-color: $foreground;\n$contextmenu-disabled-color: $text-muted;\n$contextmenu-keyboard-selected-bg: rgba($primary, 50%);\n$contextmenu-selected-bg: $primary;\n$contextmenu-selected-color: $foreground;\n\n//links\n$link-color: $gray-400;\n$link-hover-color: $foreground;\n\n//progress-bar\n$progress-bg: $gray-600;\n$progress-border-radius: 1rem;\n\n// Set global options\n$enable-shadows: false;\n$enable-gradients: false;\n$enable-print-styles: false; //I don't think anyone should expect to \"print\" this app.\n\n// Transition times\n$transition: 0.15s;\n$transition-mid: 0.2s;\n$transition-long: 0.3s;\n$transition-slow: 0.6s;\n\n//form-validation icon, uses vsWarning icon encoded here as svg\n$form-feedback-icon-invalid-color: theme-color('danger');\n$form-feedback-icon-invalid: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E \"),\n  '#',\n  '%23'\n);\n"]}

package/dist/TimeInput.js

@@ -0,0 +1,101 @@
+import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import Log from '@deephaven/log';
+import { TimeUtils } from '@deephaven/utils';
+import MaskedInput from "./MaskedInput.js";
+import { DEFAULT_GET_PREFERRED_REPLACEMENT_STRING } from "./MaskedInputUtils.js";
+var log = Log.module('TimeInput');
+var TIME_PATTERN = '([01][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]';
+var EXAMPLES = ['00:00:00', '12:34:56', '23:59:59'];
+// Forward ref causes a false positive for display-name in eslint:
+// https://github.com/yannickcr/eslint-plugin-react/issues/2269
+// eslint-disable-next-line react/display-name
+var TimeInput = /*#__PURE__*/React.forwardRef((props, ref) => {
+  var {
+    allowValueWrapping = true,
+    className = '',
+    onChange = () => false,
+    value: propsValue = 0,
+    onFocus = () => false,
+    onBlur = () => false,
+    onSelect = () => false,
+    'data-testid': dataTestId
+  } = props;
+  var [value, setValue] = useState(TimeUtils.formatTime(propsValue));
+  var [selection, _setSelection] = useState();
+  var inputRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      var _inputRef$current;
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    },
+    setSelection: newSelection => {
+      var _inputRef$current2;
+      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
+      _setSelection(newSelection);
+    }
+  }), []);
+  useEffect(function setFormattedTime() {
+    setValue(TimeUtils.formatTime(propsValue));
+  }, [propsValue]);
+  function getNextSegmentValue(range, delta, segmentValue) {
+    // Delta is backward because negative Y is up
+    var maxValue = range.selectionStart === 0 ? 24 : 60;
+    var newSegmentValue = parseInt(segmentValue, 10) - delta;
+    if (Number.isNaN(newSegmentValue)) {
+      newSegmentValue = 0;
+    } else if (allowValueWrapping) {
+      // Add max value and re-mod so we don't get negative values after mod
+      newSegmentValue = (newSegmentValue % maxValue + maxValue) % maxValue;
+    } else {
+      newSegmentValue = Math.min(Math.max(0, newSegmentValue), maxValue - 1);
+    }
+    return "".concat(newSegmentValue).padStart(2, '0');
+  }
+  function getPreferredReplacementString(replaceValue, replaceIndex, newChar, selectionStart, selectionEnd) {
+    if (selectionStart === 0 && selectionEnd === 2 && replaceIndex === 1 && parseInt(newChar, 10) > 1) {
+      // DH-10082 Special case for when typing `3` when it's already 12
+      return "0".concat(newChar).concat(replaceValue.substring(2));
+    }
+    return DEFAULT_GET_PREFERRED_REPLACEMENT_STRING(replaceValue, replaceIndex, newChar);
+  }
+  function handleChange(newValue) {
+    log.debug('handleChange', newValue);
+    setValue(newValue);
+
+    // Only send a change if the value is actually valid
+    if (TimeUtils.isTimeString(newValue)) {
+      onChange(TimeUtils.parseTime(newValue));
+    }
+  }
+  var handleSelect = useCallback(newSelection => {
+    _setSelection(newSelection);
+    onSelect(newSelection);
+  }, [onSelect]);
+  return /*#__PURE__*/React.createElement(MaskedInput, {
+    ref: inputRef,
+    className: className,
+    example: EXAMPLES,
+    getNextSegmentValue: getNextSegmentValue,
+    getPreferredReplacementString: getPreferredReplacementString,
+    onChange: handleChange,
+    onSelect: handleSelect,
+    pattern: TIME_PATTERN,
+    selection: selection,
+    value: value,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    "data-testid": dataTestId
+  });
+});
+TimeInput.defaultProps = {
+  allowValueWrapping: true,
+  className: '',
+  onChange: () => false,
+  onSelect: () => false,
+  value: 0,
+  onFocus: () => false,
+  onBlur: () => false,
+  'data-testid': undefined
+};
+export default TimeInput;
+//# sourceMappingURL=TimeInput.js.map

package/dist/TimeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeInput.js","names":["React","useCallback","useEffect","useImperativeHandle","useRef","useState","Log","TimeUtils","MaskedInput","DEFAULT_GET_PREFERRED_REPLACEMENT_STRING","log","module","TIME_PATTERN","EXAMPLES","TimeInput","forwardRef","props","ref","allowValueWrapping","className","onChange","value","propsValue","onFocus","onBlur","onSelect","dataTestId","setValue","formatTime","selection","setSelection","inputRef","focus","current","newSelection","setFormattedTime","getNextSegmentValue","range","delta","segmentValue","maxValue","selectionStart","newSegmentValue","parseInt","Number","isNaN","Math","min","max","padStart","getPreferredReplacementString","replaceValue","replaceIndex","newChar","selectionEnd","substring","handleChange","newValue","debug","isTimeString","parseTime","handleSelect","defaultProps","undefined"],"sources":["../src/TimeInput.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\nimport Log from '@deephaven/log';\nimport { TimeUtils } from '@deephaven/utils';\nimport MaskedInput, { SelectionSegment } from './MaskedInput';\nimport { DEFAULT_GET_PREFERRED_REPLACEMENT_STRING } from './MaskedInputUtils';\n\nexport type { SelectionSegment } from './MaskedInput';\n\nconst log = Log.module('TimeInput');\n\nconst TIME_PATTERN = '([01][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]';\nconst EXAMPLES = ['00:00:00', '12:34:56', '23:59:59'];\n\ntype TimeInputProps = {\n  allowValueWrapping?: boolean;\n  className?: string;\n  onChange?(timeInSec: number): void;\n  onSelect?(selection: SelectionSegment): void;\n  value?: number;\n  onFocus?(): void;\n  onBlur?(): void;\n  'data-testid'?: string;\n};\n\nexport type TimeInputElement = {\n  focus: () => void;\n  setSelection: (newSelection: SelectionSegment) => void;\n};\n\n// Forward ref causes a false positive for display-name in eslint:\n// https://github.com/yannickcr/eslint-plugin-react/issues/2269\n// eslint-disable-next-line react/display-name\nconst TimeInput = React.forwardRef<TimeInputElement, TimeInputProps>(\n  (props: TimeInputProps, ref) => {\n    const {\n      allowValueWrapping = true,\n      className = '',\n      onChange = () => false,\n      value: propsValue = 0,\n      onFocus = () => false,\n      onBlur = () => false,\n      onSelect = () => false,\n      'data-testid': dataTestId,\n    } = props;\n    const [value, setValue] = useState(TimeUtils.formatTime(propsValue));\n    const [selection, setSelection] = useState<SelectionSegment>();\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        focus: () => {\n          inputRef.current?.focus();\n        },\n        setSelection: newSelection => {\n          inputRef.current?.focus();\n          setSelection(newSelection);\n        },\n      }),\n      []\n    );\n\n    useEffect(\n      function setFormattedTime() {\n        setValue(TimeUtils.formatTime(propsValue));\n      },\n      [propsValue]\n    );\n\n    function getNextSegmentValue(\n      range: SelectionSegment,\n      delta: number,\n      segmentValue: string\n    ): string {\n      // Delta is backward because negative Y is up\n      const maxValue = range.selectionStart === 0 ? 24 : 60;\n      let newSegmentValue = parseInt(segmentValue, 10) - delta;\n      if (Number.isNaN(newSegmentValue)) {\n        newSegmentValue = 0;\n      } else if (allowValueWrapping) {\n        // Add max value and re-mod so we don't get negative values after mod\n        newSegmentValue = ((newSegmentValue % maxValue) + maxValue) % maxValue;\n      } else {\n        newSegmentValue = Math.min(Math.max(0, newSegmentValue), maxValue - 1);\n      }\n      return `${newSegmentValue}`.padStart(2, '0');\n    }\n\n    function getPreferredReplacementString(\n      replaceValue: string,\n      replaceIndex: number,\n      newChar: string,\n      selectionStart: number,\n      selectionEnd: number\n    ) {\n      if (\n        selectionStart === 0 &&\n        selectionEnd === 2 &&\n        replaceIndex === 1 &&\n        parseInt(newChar, 10) > 1\n      ) {\n        // DH-10082 Special case for when typing `3` when it's already 12\n        return `0${newChar}${replaceValue.substring(2)}`;\n      }\n      return DEFAULT_GET_PREFERRED_REPLACEMENT_STRING(\n        replaceValue,\n        replaceIndex,\n        newChar\n      );\n    }\n\n    function handleChange(newValue: string): void {\n      log.debug('handleChange', newValue);\n      setValue(newValue);\n\n      // Only send a change if the value is actually valid\n      if (TimeUtils.isTimeString(newValue)) {\n        onChange(TimeUtils.parseTime(newValue));\n      }\n    }\n\n    const handleSelect = useCallback(\n      (newSelection: SelectionSegment) => {\n        setSelection(newSelection);\n        onSelect(newSelection);\n      },\n      [onSelect]\n    );\n\n    return (\n      <MaskedInput\n        ref={inputRef}\n        className={className}\n        example={EXAMPLES}\n        getNextSegmentValue={getNextSegmentValue}\n        getPreferredReplacementString={getPreferredReplacementString}\n        onChange={handleChange}\n        onSelect={handleSelect}\n        pattern={TIME_PATTERN}\n        selection={selection}\n        value={value}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        data-testid={dataTestId}\n      />\n    );\n  }\n);\n\nTimeInput.defaultProps = {\n  allowValueWrapping: true,\n  className: '',\n  onChange: () => false,\n  onSelect: () => false,\n  value: 0,\n  onFocus: () => false,\n  onBlur: () => false,\n  'data-testid': undefined,\n};\n\nexport default TimeInput;\n"],"mappings":"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"}

package/dist/TimeSlider.css

@@ -0,0 +1,178 @@
+/* stylelint-disable scss/at-import-no-partial-leading-underscore */
+.time-slider {
+  width: 100%;
+  padding-bottom: 1rem;
+  overflow: hidden;
+}
+.time-slider .time-slider-popovers {
+  display: flex;
+  flex-direction: row;
+  margin: 0 4px;
+}
+.time-slider .time-slider-popovers .handle-popper {
+  padding: 0.5rem;
+  width: 90px;
+  border-radius: 4px;
+  background: #403e41;
+  flex-shrink: 0;
+  text-align: center;
+  margin: 0 1px;
+}
+.time-slider .time-slider-popovers .handle-popper input {
+  padding: 0.375rem 0;
+  text-align: center;
+}
+.time-slider .time-slider-popovers .flex-spacer {
+  margin-left: auto;
+  margin-right: auto;
+}
+.time-slider .track {
+  margin: 4px;
+  height: 15px;
+  background: #5b5a5c;
+  border-radius: 7.5px;
+  position: relative;
+}
+.time-slider .track .track-fills {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 7.5px;
+  overflow: hidden;
+}
+.time-slider .track .track-fills .track-fill {
+  border-radius: 7.5px;
+  background: #343e5d;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.time-slider .track .track-fills .track-fill-start,
+.time-slider .track .track-fills .track-fill-middle {
+  transform-origin: 0 0;
+}
+.time-slider .track .track-fills .track-fill-end {
+  transform-origin: 100% 0;
+}
+.time-slider .track .handle-track {
+  position: absolute;
+  width: 100%;
+  height: 15px;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+.time-slider .track .handle-track:focus-within {
+  z-index: 2;
+}
+.time-slider .track .handle-track .handle {
+  display: block;
+  height: 15px;
+  width: 15px;
+  border-radius: 50%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 0;
+  background: #c0bfbf;
+  border: 1px solid transparent;
+  transition: color 0.12s ease-in-out, background-color 0.12s ease-in-out, border-color 0.12s ease-in-out, box-shadow 0.12s ease-in-out;
+  cursor: grab;
+  pointer-events: all;
+}
+.time-slider .track .handle-track .handle:hover {
+  background: #fcfcfa;
+}
+.time-slider .track .handle-track .handle:focus {
+  background: #fcfcfa;
+  outline: 0;
+  border: 1px solid rgba(72, 120, 234, 0.85);
+  box-shadow: 0 0 0 0.2rem rgba(72, 120, 234, 0.35);
+  transform: scale(1.15);
+}
+.time-slider .track .ticks {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: row;
+}
+.time-slider .track .ticks div {
+  display: block;
+  width: 4.1666666667%;
+  height: 15px;
+  border-right: 1px solid #211f22;
+}
+.time-slider .track .ticks div:last-child {
+  border-right: none;
+}
+.time-slider .tick-labels {
+  position: relative;
+  width: 100%;
+  user-select: none;
+  color: #c0bfbf;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  height: 1.5rem;
+  overflow: hidden;
+}
+.time-slider .tick-labels .tick-label {
+  width: 4.1666666667%;
+  text-align: left;
+  font-size: 0.9rem;
+}
+.time-slider .tick-labels .tick-label-wrapper {
+  width: 95.8333333333%;
+  min-width: 300px;
+  margin-left: -2.0833333333%;
+  display: flex;
+}
+.time-slider .tick-labels .tick-label-wrapper .tick-label {
+  text-align: center;
+  visibility: hidden;
+  width: 4.347826087%;
+}
+.time-slider .tick-labels .tick-label-wrapper .tick-label::before {
+  content: "";
+  margin-left: -100%;
+}
+.time-slider .tick-labels .tick-label-wrapper .tick-label::after {
+  content: "";
+  margin-right: -100%;
+}
+.time-slider .tick-labels .tick-label-wrapper .tick-label:nth-child(4),
+.time-slider .tick-labels .tick-label-wrapper .tick-label:nth-child(8),
+.time-slider .tick-labels .tick-label-wrapper .tick-label:nth-child(12),
+.time-slider .tick-labels .tick-label-wrapper .tick-label:nth-child(16),
+.time-slider .tick-labels .tick-label-wrapper .tick-label:nth-child(20),
+.time-slider .tick-labels .tick-label-wrapper .tick-label:nth-child(24) {
+  visibility: visible;
+}
+.time-slider .tick-labels .tick-label-wrapper div:nth-child(12) {
+  position: absolute;
+  top: 0;
+  left: 47.8260869565%;
+}
+.time-slider .tick-labels .tick-label-wrapper div:nth-child(13) {
+  margin-left: 4.1666666667%;
+}
+.time-slider .tick-labels .tick-label-wrapper div:nth-child(24) {
+  position: absolute;
+  direction: rtl;
+  top: 0;
+  right: 0;
+  text-align: right;
+}
+.time-slider .tick-labels .tick-label-wrapper div:nth-child(24)::before, .time-slider .tick-labels .tick-label-wrapper div:nth-child(24)::after {
+  content: unset;
+  margin: unset;
+}
+
+/*# sourceMappingURL=TimeSlider.css.map */