@hazelcast/ui 3.0.1-canary.0 → 3.0.1-canary.2

package/lib/components/Slider.module.scss

@@ -0,0 +1,277 @@
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
+
+// thumb width without a white border, let's make it the height of the slider
+$thumbWidth: c.$slideTrackHeight;
+$currentValueIndicatorHeight: c.$grid * 6;
+
+// We've double checked that everything works in IE11
+/* doiuse-disable calc */
+/* doiuse-disable multicolumn */
+/* doiuse-disable css-appearance */
+
+@mixin track() {
+  background: none; // get rid of track background
+  appearance: none;
+
+  // it's important for these values to be 0 in order to be consistent across (Firefox/IE11) & Chrome
+  margin: 0;
+  padding: 0;
+  border: 0;
+  box-sizing: border-box;
+}
+
+@mixin thumb() {
+  box-shadow: 0 c.$sliderThumbShadowSize c.$sliderThumbShadowBlur c.$colorShadow;
+  background: c.$colorSuccess; // background will represent the dot inside
+  border: c.$sliderThumbBorderSize solid c.$colorNeutralWhite; // the white part will be done by the border
+  box-sizing: content-box; /* and because of all of this, we need content-box */
+  border-radius: 50%;
+  pointer-events: auto; /* catch clicks */
+  width: $thumbWidth;
+  height: $thumbWidth;
+}
+
+/**
+  We can't combine these selectors with a comma, because they're invalid in different browsers.
+  This helper will save us some code blocks.
+ */
+@mixin styleThumb {
+  &::-webkit-slider-thumb {
+    @content;
+  }
+
+  &::-moz-range-thumb {
+    @content;
+  }
+
+  &::-ms-thumb {
+    @content;
+  }
+}
+
+ul.markDescriptions {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  height: c.$grid * 8;
+  position: relative;
+  font-size: c.$fontSizeBodySmall;
+  color: c.$colorTextSecondary;
+
+  > li {
+    position: absolute;
+    bottom: c.$grid;
+    transform: translateX(-50%);
+    white-space: nowrap;
+
+    &.activeMarkDescription {
+      font-weight: c.$fontWeightTextBold;
+      color: black;
+    }
+  }
+}
+
+.valueIndicators {
+  padding: 0;
+  height: $currentValueIndicatorHeight;
+  position: relative;
+  width: calc(100% - #{c.$sliderThumbBorderSize} - #{c.$sliderThumbShadowSize});
+  margin: 0 auto;
+
+  > span {
+    position: absolute;
+    top: c.$grid;
+    transform: translateX(-50%);
+    font-size: c.$fontSizeBodyNormal;
+    font-weight: c.$fontWeightTextBold;
+    white-space: nowrap;
+  }
+}
+
+@include h.withError;
+
+.wrapper {
+  display: flex;
+
+  & * {
+    box-sizing: border-box;
+  }
+
+  .innerWrapper {
+    flex: 1;
+  }
+
+  .inputWrapper {
+    @include c.typographyBodySmall;
+
+    position: relative;
+    height: c.$slideTrackHeight;
+    flex: 1;
+    margin: $thumbWidth 0;
+
+    input[type='range'] {
+      z-index: c.$zIndex100;
+      outline: none;
+      background: none;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: c.$sliderThumbBorderSize * -1;
+      width: calc(100% + #{c.$sliderThumbBorderSize * 2});
+      height: 100%;
+      pointer-events: none; // ignore clicks on the actual inputs and let them pass to the handles
+      min-height: c.$slideTrackHeight;
+      padding: 0;
+      margin: 0;
+      justify-self: center;
+
+      &::-webkit-slider-runnable-track,
+      &::-webkit-slider-thumb,
+      & {
+        appearance: none;
+      }
+
+      // Style the track
+      &::-webkit-slider-runnable-track {
+        @include track;
+      }
+
+      &::-moz-range-track {
+        @include track;
+      }
+
+      &::-ms-track {
+        @include track;
+
+        visibility: hidden; // IE11 specific rule to hide the default tick marks
+      }
+
+      @include styleThumb {
+        @include thumb;
+      }
+
+      /**
+        Hover
+       */
+      &:hover,
+      &.hover {
+        @include styleThumb {
+          box-shadow: 0 0 0 c.$sliderThumbHoverBorderSize c.$colorPrimary;
+        }
+      }
+
+      &.focus,
+      &:focus-visible {
+        @include styleThumb {
+          box-shadow: 0 0 0 c.$outlineWidth c.$colorAccessibilityOutline;
+        }
+      }
+
+      // don't show IE11's lower fill
+      &::-ms-fill-lower {
+        display: none;
+      }
+    }
+
+    // see the javascript code for an explanation of this class
+    input[type='range'].atTheBorder {
+      @include styleThumb {
+        pointer-events: none;
+      }
+    }
+
+    .fillPlaceholder {
+      pointer-events: none;
+      height: c.$slideTrackHeight;
+
+      // highlighted part covers the border
+      box-sizing: border-box;
+      background: c.$colorNeutral;
+      border: c.$sliderFillBorderSize solid c.$colorNeutralLight;
+      width: 100%;
+      position: relative;
+
+      // if the actual fill is very small the border is rounded, it can reach out of the wrapper
+      overflow: hidden;
+
+      // we ned to reserve space like this manually mostly because of IE11
+      border-radius: c.$sliderTrackBorderRadius;
+
+      .fill {
+        pointer-events: none;
+        height: 100%;
+        background: c.$colorPrimaryLight;
+
+        // width & marginLeft will be set by a Javascript
+      }
+
+      ul.marks {
+        $markWidth: 2px;
+
+        width: calc(100% - #{$markWidth}); // so that 0% & 100% marks are visible
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        position: absolute;
+        top: 0;
+        pointer-events: none;
+
+        > li {
+          position: absolute;
+          width: $markWidth;
+          height: 100%;
+          background-color: c.$colorTextSecondary;
+
+          &.active {
+            background-color: c.$colorNeutralWhite;
+          }
+        }
+      }
+    }
+  }
+
+  .helperText {
+    margin-left: c.$sliderThumbBorderSize;
+    align-self: flex-end;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+
+    .valueIndicators {
+      color: c.$colorNeutralLight;
+    }
+
+    ul.markDescriptions {
+      color: c.$colorNeutralLight;
+    }
+
+    .fillPlaceholder {
+      background-color: c.$colorNeutral;
+
+      .fill {
+        background-color: c.$colorNeutralLight;
+      }
+
+      ul.marks {
+        > li {
+          background-color: c.$colorNeutralLight;
+        }
+      }
+    }
+
+    input[type='range']:disabled {
+      @include styleThumb {
+        box-shadow: 0 0 0 c.$sliderThumbHoverBorderSize c.$colorNeutral;
+        background: c.$colorNeutralLight;
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+
+/* doiuse-enable calc */
+/* doiuse-enable multicolumn */
+/* doiuse-enable css-appearance */

package/lib/components/SliderFormik.js

@@ -1,31 +1,14 @@
-'use strict';
-
-var React = require('react');
-var formik = require('formik');
-var components_Slider = require('./Slider.js');
-var utils_formik = require('../utils/formik.js');
-
-const SliderFormik = ({
-  name,
-  validate,
-  ...props
-}) => {
-  const [field, meta, {
-    setValue,
-    setTouched
-  }] = formik.useField({
-    name,
-    validate
-  });
-  const onChange = React.useMemo(() => utils_formik.formikTouchAndUpdate(setValue, setTouched), [setValue, setTouched]);
-  return /*#__PURE__*/React.createElement(components_Slider.Slider, {
-    ...props,
-    name: name,
-    value: field.value,
-    onChange: onChange,
-    error: utils_formik.getFieldError(meta)
-  });
+import React from 'react';
+import { useField } from 'formik';
+import { useMemo } from 'react';
+import { Slider } from './Slider';
+import { formikTouchAndUpdate, getFieldError } from '../utils/formik';
+export const SliderFormik = ({ name, validate, ...props }) => {
+    const [field, meta, { setValue, setTouched }] = useField({
+        name,
+        validate,
+    });
+    const onChange = useMemo(() => formikTouchAndUpdate(setValue, setTouched), [setValue, setTouched]);
+    return React.createElement(Slider, { ...props, name: name, value: field.value, onChange: onChange, error: getFieldError(meta) });
 };
-
-exports.SliderFormik = SliderFormik;
-//# sourceMappingURL=SliderFormik.js.map
+//# sourceMappingURL=SliderFormik.js.map

package/lib/components/SliderFormik.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderFormik.js","sources":["../../src/components/SliderFormik.tsx"],"sourcesContent":[null],"names":["SliderFormik","name","validate","props","field","meta","setValue","setTouched","useField","onChange","useMemo","formikTouchAndUpdate","React","createElement","Slider","value","error","getFieldError"],"mappings":";;;;;;;AAcO,MAAMA,YAAY,GAAGA,CAAmB;EAAEC,IAAI;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAwB,KAAkB;AACjH,EAAA,MAAM,CAACC,KAAK,EAAEC,IAAI,EAAE;IAAEC,QAAQ;AAAEC,IAAAA;GAAY,CAAC,GAAGC,eAAQ,CAA4B;IAClFP,IAAI;AACJC,IAAAA;AACD,GAAA,CAAC;AAEF,EAAA,MAAMO,QAAQ,GAAGC,aAAO,CAAC,MAAMC,iCAAoB,CAACL,QAAQ,EAAEC,UAAU,CAAC,EAAE,CAACD,QAAQ,EAAEC,UAAU,CAAC,CAAC;AAElG,EAAA,oBAAOK,KAAA,CAAAC,aAAA,CAACC,wBAAM,EAAA;AAAA,IAAA,GAAKX,KAAK;AAAEF,IAAAA,IAAI,EAAEA,IAAI;IAAEc,KAAK,EAAEX,KAAK,CAACW,KAAK;AAAEN,IAAAA,QAAQ,EAAEA,QAAQ;IAAEO,KAAK,EAAEC,0BAAa,CAACZ,IAAI;AAAC,GAAA,CAAI;AAC9G;;;;"}
+{"version":3,"file":"SliderFormik.js","sourceRoot":"","sources":["../../src/components/SliderFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAkB,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,MAAM,EAAiC,MAAM,UAAU,CAAA;AAChE,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AASrE,MAAM,CAAC,MAAM,YAAY,GAAG,CAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAwB,EAAgB,EAAE;IACjH,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,GAAG,QAAQ,CAA4B;QAClF,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,oBAAoB,CAAC,QAAQ,EAAE,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAA;IAElG,OAAO,oBAAC,MAAM,OAAK,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAAI,CAAA;AAC9G,CAAC,CAAA"}

package/lib/components/Table/Cell.js

@@ -1,113 +1,60 @@
-'use strict';
-
-var React = require('react');
-var reactFeather = require('react-feather');
-var reactUid = require('react-uid');
-var cn = require('classnames');
-var components_Icon = require('../Icon.js');
-var components_Tooltip = require('../Tooltip.js');
-var components_Table_features_columnsSelection_CellCopyablePopover = require('./features/columnsSelection/CellCopyablePopover.js');
-var Cell_module = require('./Cell.module.scss.js');
-var hooks_useOpenCloseState = require('../../hooks/useOpenCloseState.js');
-
-const CellWarning = ({
-  align,
-  warning
-}) => {
-  const id = reactUid.useUID();
-  const dataTest = 'cell-warning-content';
-  return /*#__PURE__*/React.createElement(components_Tooltip.Tooltip, {
-    id: id,
-    content: warning
-  }, tooltipRef => (/*#__PURE__*/React.createElement("div", {
-    "data-test": dataTest,
-    ref: tooltipRef,
-    className: cn(Cell_module.default.warningIcon, {
-      [Cell_module.default.left]: align === 'left',
-      [Cell_module.default.right]: align === 'right'
-    })
-  }, /*#__PURE__*/React.createElement(components_Icon.Icon, {
-    "data-test": `${dataTest}-icon`,
-    icon: reactFeather.AlertTriangle,
-    ariaLabelledBy: id,
-    size: "small"
-  }))));
+import React, { useEffect, useRef } from 'react';
+import { AlertTriangle } from 'react-feather';
+import { useUID } from 'react-uid';
+import cn from 'classnames';
+import { Icon } from '../Icon';
+import { Tooltip } from '../Tooltip';
+import { useOpenCloseState } from '../../hooks';
+import { CellCopyablePopover } from './features/columnsSelection';
+import styles from './Cell.module.scss';
+export const CellWarning = ({ align, warning }) => {
+    const id = useUID();
+    const dataTest = 'cell-warning-content';
+    return (React.createElement(Tooltip, { id: id, content: warning }, (tooltipRef) => (React.createElement("div", { "data-test": dataTest, ref: tooltipRef, className: cn(styles.warningIcon, {
+            [styles.left]: align === 'left',
+            [styles.right]: align === 'right',
+        }) },
+        React.createElement(Icon, { "data-test": `${dataTest}-icon`, icon: AlertTriangle, ariaLabelledBy: id, size: "small" })))));
 };
-const Cell = ({
-  align = 'left',
-  warning,
-  colSpan,
-  children,
-  style,
-  className,
-  role = 'cell',
-  cellId,
-  onClickSelection,
-  selected,
-  onMouseEnterSelection,
-  selectionStartedRef
-}) => {
-  const rootRef = React.useRef(null);
-  const {
-    isOpen,
-    open,
-    close
-  } = hooks_useOpenCloseState.useOpenCloseState();
-  const handleClick = e => {
-    if (onClickSelection && cellId) {
-      if (e.button === 2 && selected) {
-        return;
-      }
-      onClickSelection(cellId, {
-        shift: e.shiftKey,
-        ctrl: e.ctrlKey || e.metaKey
-      });
-    }
-  };
-  const handleMouseEnter = () => {
-    if (cellId && onMouseEnterSelection && (selectionStartedRef === null || selectionStartedRef === void 0 ? void 0 : selectionStartedRef.current)) {
-      onMouseEnterSelection(cellId);
-    }
-  };
-  React.useEffect(() => {
-    if (!selected) {
-      close();
-    }
-  }, [close, selected]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    ref: rootRef,
-    "data-test": "table-cell",
-    className: cn(Cell_module.default.td, {
-      [Cell_module.default.alignLeft]: align === 'left',
-      [Cell_module.default.alignRight]: align === 'right',
-      [Cell_module.default.alignCenter]: align === 'center',
-      [Cell_module.default.selectable]: onClickSelection,
-      [Cell_module.default.selected]: selected
-    }, className),
-    "aria-colspan": colSpan,
-    style: style,
-    role: role,
-    onDoubleClick: selected ? open : undefined,
-    onMouseEnter: onClickSelection ? handleMouseEnter : undefined,
-    onMouseDown: onClickSelection ? handleClick : undefined
-  }, warning && align === 'right' && /*#__PURE__*/React.createElement(CellWarning, {
-    warning: warning,
-    align: "right"
-  }), children, warning && (align === 'left' || align === 'center') && /*#__PURE__*/React.createElement(CellWarning, {
-    warning: warning,
-    align: "left"
-  })), selected && (/*#__PURE__*/React.createElement(components_Table_features_columnsSelection_CellCopyablePopover.CellCopyablePopover, {
-    anchorElement: rootRef.current,
-    isOpen: isOpen,
-    onClose: close,
-    contentClassName: cn(Cell_module.default.td, {
-      [Cell_module.default.alignLeft]: align === 'left',
-      [Cell_module.default.alignRight]: align === 'right',
-      [Cell_module.default.alignCenter]: align === 'center'
-    })
-  }, children)));
+export const Cell = ({ align = 'left', warning, colSpan, children, style, className, role = 'cell', cellId, onClickSelection, selected, onMouseEnterSelection, selectionStartedRef, }) => {
+    const rootRef = useRef(null);
+    const { isOpen, open, close } = useOpenCloseState();
+    const handleClick = (e) => {
+        if (onClickSelection && cellId) {
+            if (e.button === 2 && selected) {
+                return;
+            }
+            onClickSelection(cellId, {
+                shift: e.shiftKey,
+                ctrl: e.ctrlKey || e.metaKey,
+            });
+        }
+    };
+    const handleMouseEnter = () => {
+        if (cellId && onMouseEnterSelection && (selectionStartedRef === null || selectionStartedRef === void 0 ? void 0 : selectionStartedRef.current)) {
+            onMouseEnterSelection(cellId);
+        }
+    };
+    useEffect(() => {
+        if (!selected) {
+            close();
+        }
+    }, [close, selected]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: rootRef, "data-test": "table-cell", className: cn(styles.td, {
+                [styles.alignLeft]: align === 'left',
+                [styles.alignRight]: align === 'right',
+                [styles.alignCenter]: align === 'center',
+                [styles.selectable]: onClickSelection,
+                [styles.selected]: selected,
+            }, className), "aria-colspan": colSpan, style: style, role: role, onDoubleClick: selected ? open : undefined, onMouseEnter: onClickSelection ? handleMouseEnter : undefined, onMouseDown: onClickSelection ? handleClick : undefined },
+            warning && align === 'right' && React.createElement(CellWarning, { warning: warning, align: "right" }),
+            children,
+            warning && (align === 'left' || align === 'center') && React.createElement(CellWarning, { warning: warning, align: "left" })),
+        selected && (React.createElement(CellCopyablePopover, { anchorElement: rootRef.current, isOpen: isOpen, onClose: close, contentClassName: cn(styles.td, {
+                [styles.alignLeft]: align === 'left',
+                [styles.alignRight]: align === 'right',
+                [styles.alignCenter]: align === 'center',
+            }) }, children))));
 };
-
-exports.Cell = Cell;
-exports.CellWarning = CellWarning;
-//# sourceMappingURL=Cell.js.map
+//# sourceMappingURL=Cell.js.map

package/lib/components/Table/Cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cell.js","sources":["../../../src/components/Table/Cell.tsx"],"sourcesContent":[null],"names":["CellWarning","align","warning","id","useUID","dataTest","React","createElement","Tooltip","content","tooltipRef","ref","className","cn","styles","warningIcon","left","right","Icon","icon","AlertTriangle","ariaLabelledBy","size","Cell","colSpan","children","style","role","cellId","onClickSelection","selected","onMouseEnterSelection","selectionStartedRef","rootRef","useRef","isOpen","open","close","useOpenCloseState","handleClick","e","button","shift","shiftKey","ctrl","ctrlKey","metaKey","handleMouseEnter","current","useEffect","Fragment","td","alignLeft","alignRight","alignCenter","selectable","onDoubleClick","undefined","onMouseEnter","onMouseDown","CellCopyablePopover","anchorElement","onClose","contentClassName"],"mappings":"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"}
+{"version":3,"file":"Cell.js","sourceRoot":"","sources":["../../../src/components/Table/Cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA+D,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAC7G,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAEjE,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAOvC,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IACtE,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;IACnB,MAAM,QAAQ,GAAG,sBAAsB,CAAA;IAEvC,OAAO,CACL,oBAAC,OAAO,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,IAC9B,CAAC,UAAU,EAAE,EAAE,CAAC,CACf,0CACa,QAAQ,EACnB,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE;YAChC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,KAAK,MAAM;YAC/B,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,OAAO;SAClC,CAAC;QAEF,oBAAC,IAAI,iBAAY,GAAG,QAAQ,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,cAAc,EAAE,EAAE,EAAE,IAAI,EAAC,OAAO,GAAG,CACzF,CACP,CACO,CACX,CAAA;AACH,CAAC,CAAA;AAoBD,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,KAAK,GAAG,MAAM,EACd,OAAO,EACP,OAAO,EACP,QAAQ,EACR,KAAK,EACL,SAAS,EACT,IAAI,GAAG,MAAM,EACb,MAAM,EACN,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,mBAAmB,GACU,EAAE,EAAE;IACjC,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAC5B,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,iBAAiB,EAAE,CAAA;IACnD,MAAM,WAAW,GAAG,CAAC,CAAa,EAAE,EAAE;QACpC,IAAI,gBAAgB,IAAI,MAAM,EAAE,CAAC;YAC/B,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,QAAQ,EAAE,CAAC;gBAC/B,OAAM;YACR,CAAC;YACD,gBAAgB,CAAC,MAAM,EAAE;gBACvB,KAAK,EAAE,CAAC,CAAC,QAAQ;gBACjB,IAAI,EAAE,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO;aAC7B,CAAC,CAAA;QACJ,CAAC;IACH,CAAC,CAAA;IACD,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,IAAI,MAAM,IAAI,qBAAqB,KAAI,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,OAAO,CAAA,EAAE,CAAC;YACpE,qBAAqB,CAAC,MAAM,CAAC,CAAA;QAC/B,CAAC;IACH,CAAC,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,KAAK,EAAE,CAAA;QACT,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAA;IAErB,OAAO,CACL;QACE,6BACE,GAAG,EAAE,OAAO,eACF,YAAY,EACtB,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,EAAE,EACT;gBACE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,KAAK,KAAK,MAAM;gBACpC,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,KAAK,KAAK,OAAO;gBACtC,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,KAAK,KAAK,QAAQ;gBACxC,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,gBAAgB;gBACrC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;aAC5B,EACD,SAAS,CACV,kBACa,OAAO,EACrB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC1C,YAAY,EAAE,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,EAC7D,WAAW,EAAE,gBAAgB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS;YAEtD,OAAO,IAAI,KAAK,KAAK,OAAO,IAAI,oBAAC,WAAW,IAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAC,OAAO,GAAG;YAC/E,QAAQ;YACR,OAAO,IAAI,CAAC,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,QAAQ,CAAC,IAAI,oBAAC,WAAW,IAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAC,MAAM,GAAG,CAClG;QACL,QAAQ,IAAI,CACX,oBAAC,mBAAmB,IAClB,aAAa,EAAE,OAAO,CAAC,OAAO,EAC9B,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,KAAK,EACd,gBAAgB,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,EAAE;gBAC9B,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,KAAK,KAAK,MAAM;gBACpC,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,KAAK,KAAK,OAAO;gBACtC,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,KAAK,KAAK,QAAQ;aACzC,CAAC,IAED,QAAQ,CACW,CACvB,CACA,CACJ,CAAA;AACH,CAAC,CAAA"}

package/lib/components/Table/Cell.module.scss

@@ -0,0 +1,61 @@
+@use 'sass:color';
+@use '../../../styles/constants' as c;
+@use '../../../styles/helpers' as h;
+
+.td {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  height: c.$grid * 6;
+  padding-right: c.$grid * 5;
+  padding-left: c.$grid * 5;
+  color: c.$colorText;
+  background-color: inherit;
+  flex-grow: 1;
+  flex-basis: auto;
+  flex-shrink: 0;
+  font-family: 'Ubuntu Mono', monospace;
+
+  @include h.overflowEllipsis;
+
+  &.alignLeft {
+    justify-content: flex-start;
+  }
+
+  &.alignRight {
+    justify-content: flex-end;
+  }
+
+  &.alignCenter {
+    justify-content: center;
+  }
+
+  &.selected {
+    background: color.adjust(c.$colorPrimary, $lightness: 30%) !important;
+  }
+
+  &:not(:last-of-type) {
+    border-right: c.$borderWidth solid c.$colorNeutralWhite;
+  }
+}
+
+.warningIcon {
+  color: c.$colorWarningDark;
+
+  &.left {
+    margin-left: c.$grid * 2;
+  }
+
+  &.right {
+    margin-right: c.$grid * 2;
+  }
+}
+
+.selectable {
+  user-select: none;
+}
+
+.truncated {
+  font-family: 'Ubuntu Mono', monospace;
+}