@hitachivantara/uikit-react-core 5.106.1 → 6.0.0-next.1

package/dist/esm/themes/ds3.js

@@ -1,1227 +0,0 @@
-import { mergeTheme, ds3 as ds3$1, theme } from "@hitachivantara/uikit-styles";
-const ds3 = mergeTheme(ds3$1, {
-  components: {
-    HvActionBar: {
-      classes: {
-        root: {
-          borderTop: `3px solid ${theme.colors.atmo2}`
-        }
-      }
-    },
-    HvBaseCheckBox: {
-      classes: {
-        root: {
-          borderRadius: 0
-        }
-      }
-    },
-    HvCallout: {
-      classes: {
-        root: {
-          borderRadius: 0
-        },
-        messageIcon: {
-          color: "inherit !important",
-          padding: 0
-        }
-      }
-    },
-    HvCheckBoxIcon: {
-      classes: {
-        root: {
-          borderRadius: 0,
-          borderColor: theme.colors.text
-        },
-        checked: {
-          "--bg-color": theme.colors.text,
-          color: theme.colors.atmo1
-        },
-        semantic: {
-          "&[data-variant=indeterminate]": {
-            backgroundColor: theme.colors.textLight,
-            color: theme.colors.textDark
-          }
-        },
-        indeterminate: {
-          color: theme.colors.text
-        }
-      }
-    },
-    HvBaseDropdown: {
-      classes: {
-        header: {
-          borderRadius: 0,
-          border: `1px solid ${theme.colors.atmo4}`,
-          ":hover,:focus-visible": {
-            borderColor: theme.colors.secondary
-          }
-        },
-        headerOpen: {
-          "&,:hover": {
-            borderColor: "transparent",
-            boxShadow: theme.colors.shadow
-          }
-        },
-        headerDisabled: {
-          background: theme.colors.atmo3,
-          "&,:hover": {
-            borderColor: theme.colors.atmo4
-          }
-        },
-        headerReadOnly: {
-          background: theme.colors.atmo1,
-          "&,:focus-visible": {
-            border: "none"
-          }
-        },
-        placeholder: {
-          color: theme.colors.secondary_60
-        },
-        panel: {
-          boxShadow: theme.colors.shadow,
-          border: "1px solid transparent"
-        },
-        inputExtensionOpen: {
-          height: theme.space.xs,
-          borderRight: "1px solid transparent",
-          borderLeft: "1px solid transparent"
-        }
-      }
-    },
-    HvLabelContainer: {
-      classes: {
-        root: {
-          height: "auto"
-        }
-      }
-    },
-    HvBaseInput: {
-      classes: {
-        root: {
-          border: "none",
-          borderRadius: 0,
-          ":not(.HvBaseInput-disabled,.HvBaseInput-invalid,.HvBaseInput-readOnly)": {
-            ":hover,:focus-within": {
-              borderColor: theme.colors.secondary,
-              "::after": {
-                borderBottomColor: theme.colors.secondary
-              }
-            }
-          },
-          "::after": {
-            content: '" "',
-            position: "absolute",
-            inset: "auto 0 0",
-            margin: "0 2px",
-            borderBottom: `1px solid ${theme.colors.atmo4}`
-          }
-        },
-        invalid: {
-          "::after": {
-            borderBottomColor: theme.form.errorColor
-          }
-        },
-        disabled: {
-          backgroundColor: theme.colors.atmo3,
-          "&& .HvBaseInput-input": {
-            color: theme.colors.secondary_60,
-            WebkitTextFillColor: theme.colors.secondary_60
-          }
-        },
-        multiline: {
-          border: `1px solid ${theme.colors.atmo4}`,
-          "&::after": {
-            display: "none"
-          },
-          "&.HvBaseInput-disabled": {
-            borderColor: theme.colors.atmo4
-          }
-        },
-        readOnly: {
-          borderColor: "transparent",
-          backgroundColor: theme.colors.atmo1,
-          "::after": {
-            borderColor: "transparent"
-          }
-        },
-        focused: {
-          "&.HvBaseInput-readOnly": {
-            backgroundColor: theme.colors.atmo1
-          }
-        },
-        input: {
-          "&::placeholder": {
-            color: theme.colors.secondary_60
-          }
-        },
-        inputReadOnly: {
-          color: theme.colors.secondary
-        }
-      }
-    },
-    HvBaseRadio: {
-      classes: {
-        root: {
-          "&:hover": {
-            borderRadius: 0
-          }
-        }
-      }
-    },
-    HvRadioIcon: {
-      classes: {
-        checked: {
-          "--bg-color": theme.colors.text,
-          color: theme.colors.bgPage
-        }
-      }
-    },
-    HvBaseSwitch: {
-      classes: {
-        root: {
-          padding: 0,
-          "&:hover": {
-            backgroundColor: "transparent"
-          },
-          " .HvBaseSwitch-switchBase.HvBaseSwitch-checked:not(.HvBaseSwitch-disabled) + .HvBaseSwitch-track": {
-            backgroundColor: theme.colors.text
-          }
-        },
-        switch: {
-          width: "32px",
-          height: "16px"
-        },
-        switchBase: {
-          width: "32px",
-          height: "16px"
-        },
-        track: {
-          backgroundColor: theme.colors.atmo2
-        },
-        thumb: {
-          width: 12,
-          height: 12,
-          left: -9
-        }
-      }
-    },
-    HvBreadCrumbPage: {
-      classes: {
-        link: {
-          ":hover,:focus": {
-            backgroundColor: theme.colors.atmo3
-          }
-        }
-      }
-    },
-    HvBulkActions: {
-      classes: {
-        root: {
-          border: "none",
-          backgroundColor: theme.colors.atmo1,
-          padding: "0px"
-        },
-        semantic: {
-          backgroundColor: theme.colors.neutral_20,
-          "& .HvBulkActions-selectAll div": {
-            color: theme.colors.base_dark,
-            "& *": {
-              color: theme.colors.base_dark,
-              backgroundColor: "transparent"
-            }
-          }
-        },
-        divider: {
-          display: "none"
-        }
-      }
-    },
-    HvButton: {
-      classes: {
-        root: {
-          padding: theme.spacing(0, "xs"),
-          minWidth: "70px"
-        },
-        icon: {
-          minWidth: "unset"
-        },
-        secondarySubtle: {
-          backgroundColor: theme.colors.atmo1,
-          borderColor: theme.colors.atmo4
-        },
-        secondary: {
-          backgroundColor: theme.colors.atmo1,
-          borderColor: theme.colors.atmo4
-        },
-        ghost: {},
-        disabled: {
-          "&:not(.HvButton-ghost):not(.HvButton-semantic)": {
-            backgroundColor: theme.colors.atmo3
-          },
-          "&.HvButton-subtle": {
-            borderColor: theme.colors.atmo4
-          }
-        }
-      }
-    },
-    HvCalendarHeader: {
-      classes: {
-        root: {
-          marginTop: theme.space.xs,
-          paddingBottom: 32,
-          "& input": {
-            height: "27px",
-            fontSize: "18px",
-            letterSpacing: "0.02em",
-            lineHeight: "28px",
-            fontWeight: theme.fontWeights.semibold
-          }
-        },
-        invalid: {
-          paddingBottom: 0
-        },
-        headerDayOfWeek: {
-          color: theme.colors.secondary
-        }
-      }
-    },
-    HvCard: {
-      classes: {
-        root: {
-          outline: "none",
-          borderRadius: 0
-        },
-        selectable: {
-          "&:hover": {
-            outline: `1px solid ${theme.colors.atmo4}`
-          }
-        },
-        icon: {
-          top: `calc(-24px + ${theme.space.xs})`,
-          right: `calc(-24px + ${theme.space.xs})`
-        }
-      }
-    },
-    HvCardHeader: {
-      classes: {
-        root: {
-          padding: theme.spacing("15px", "sm")
-        },
-        title: {
-          ...theme.typography.title3
-        },
-        titleShort: {
-          ...theme.typography.title3
-        },
-        subheader: {
-          ...theme.typography.body
-        }
-      }
-    },
-    HvCarousel: {
-      classes: {
-        xs: {
-          "& .HvCarousel-controls": {
-            display: "none"
-          }
-        },
-        controls: {
-          justifyContent: "space-between",
-          backgroundColor: "transparent",
-          border: "none"
-        },
-        counterContainer: {
-          display: "block"
-        },
-        thumbnail: {
-          "& img": {
-            borderRadius: 0
-          }
-        },
-        thumbnailSelected: {
-          "& img": {
-            border: `1px solid ${theme.colors.base_dark}`
-          }
-        }
-      }
-    },
-    HvCheckBox: {
-      classes: {
-        container: {
-          "&:hover": {
-            borderRadius: 0
-          }
-        }
-      }
-    },
-    HvColorPicker: {
-      classes: {
-        panel: {
-          minWidth: "240px",
-          padding: "20px 15px 20px 20px"
-        },
-        colorPicker: {
-          width: "205px"
-        },
-        headerColorValue: {
-          ...theme.typography.body
-        },
-        recommendedColorsRoot: {
-          ":not(:only-child)": {
-            paddingBottom: "20px"
-          }
-        }
-      }
-    },
-    HvColorPickerFields: {
-      classes: {
-        fields: {
-          paddingTop: "10px",
-          marginRight: "5px"
-        },
-        single: {
-          maxWidth: "40px",
-          paddingLeft: "5px"
-        },
-        double: {
-          maxWidth: "80px",
-          paddingRight: "20px"
-        }
-      }
-    },
-    HvColorPickerPicker: {
-      classes: {
-        pickers: {
-          flexDirection: "row"
-        },
-        saturation: {
-          width: "180px",
-          height: "180px",
-          marginRight: "5px",
-          "& > div": {
-            borderRadius: 0,
-            "& .saturation-white": {
-              borderRadius: 0,
-              "& .saturation-black": {
-                borderRadius: 0
-              }
-            }
-          }
-        },
-        saturationPointer: {
-          width: "6px",
-          height: "6px"
-        },
-        hue: {
-          height: "180px",
-          width: "15px",
-          marginTop: "0px",
-          "& .hue-horizontal": {
-            borderRadius: 0
-          }
-        },
-        hueSlider: {
-          width: "12px",
-          height: "6px",
-          background: "#fff",
-          marginLeft: "1px",
-          border: "1px solid #fff",
-          borderRadius: "1px"
-        }
-      }
-    },
-    HvColorPickerPresetColors: {
-      classes: {
-        root: { width: "205px" },
-        colors: {
-          width: "calc(100% + 5px)",
-          margin: "-5px -3px"
-        },
-        swatchWrap: {
-          width: "16px",
-          height: "16px",
-          margin: "5px",
-          "& > span > div": {
-            borderRadius: 0
-          }
-        }
-      }
-    },
-    HvColorPickerSavedColors: {
-      classes: {
-        addButton: {
-          margin: "5px",
-          width: "32px",
-          height: "32px"
-        },
-        root: {
-          width: "calc(100% + 5px)",
-          margin: "-5px -3px"
-        },
-        swatchWrap: {
-          width: "32px",
-          height: "32px",
-          margin: "4px",
-          "& > span > div": {
-            borderRadius: theme.radii.base
-          }
-        }
-      }
-    },
-    HvDatePicker: {
-      classes: {
-        inputText: {
-          ...theme.typography.body,
-          color: theme.colors.secondary_60
-        }
-      }
-    },
-    HvDialog: {
-      classes: {
-        paper: {
-          borderRadius: 0
-        }
-      }
-    },
-    HvDialogTitle: {
-      classes: {
-        titleText: {
-          ...theme.typography.xxsTitle
-        },
-        root: {
-          "& .HvStatusIcon-root": {
-            padding: 0
-          },
-          "& .HvIconContainer-root": {
-            color: `${theme.colors.secondary}!important`
-          }
-        }
-      }
-    },
-    HvDialogContent: {
-      classes: {
-        root: {
-          borderTop: "none!important",
-          borderBottom: "none!important"
-        }
-      }
-    },
-    HvDropdown: {
-      classes: {
-        readOnly: {
-          "& .HvDropdown-dropdownHeader": {
-            border: "none",
-            backgroundColor: theme.colors.atmo1
-          }
-        },
-        placeholderClosed: {
-          color: theme.colors.secondary_60
-        }
-      }
-    },
-    HvDropDownMenu: {
-      classes: {
-        iconSelected: {
-          border: "none",
-          "&:hover": {
-            border: "none"
-          }
-        }
-      }
-    },
-    HvEmptyState: {
-      classes: {
-        titleContainer: {
-          marginTop: "2px",
-          ...theme.typography.xxsTitle
-        }
-      }
-    },
-    HvFile: {
-      classes: {
-        root: {
-          border: "none",
-          borderRadius: 0
-        },
-        progressbarContainer: {
-          height: "2px"
-        },
-        previewContainer: {
-          width: "52px",
-          height: "52px",
-          "& img": {
-            width: "100%",
-            height: "100%"
-          }
-        }
-      }
-    },
-    HvFileUploaderPreview: {
-      classes: {
-        previewButton: {
-          width: "52px",
-          height: "52px"
-        },
-        overlay: {
-          backgroundColor: theme.colors.atmo3,
-          opacity: "0.75",
-          borderRadius: 0
-        }
-      }
-    },
-    HvDropZone: {
-      classes: {
-        dropZoneContainer: {
-          border: `1px dotted ${theme.colors.atmo4}`,
-          background: theme.colors.atmo2,
-          borderRadius: 0,
-          ":hover,:focus-within": {
-            borderColor: theme.colors.secondary
-          }
-        },
-        dragAction: {
-          border: `1px dotted ${theme.colors.secondary}`
-        },
-        dropZoneContainerDisabled: {
-          "&,:hover": {
-            borderColor: theme.colors.atmo4
-          }
-        }
-      }
-    },
-    HvFilterGroupCounter: {
-      classes: {
-        partialCounter: {
-          fontWeight: theme.fontWeights.bold
-        }
-      }
-    },
-    HvFilterGroupContent: {
-      classes: {
-        rightSidePanel: {
-          boxShadow: `inset 8px 0 8px -6px ${theme.colors.shad1}`,
-          borderLeft: "none"
-        },
-        applyButton: {
-          marginRight: "0px"
-        }
-      }
-    },
-    HvGlobalActions: {
-      classes: {
-        section: {
-          "& .HvGlobalActions-wrapper": {
-            backgroundColor: "transparent",
-            paddingLeft: "0px"
-          }
-        },
-        wrapper: {
-          "&&": {
-            padding: theme.space.xs,
-            borderWidth: 0,
-            borderRadius: 0
-          }
-        },
-        sectionName: {
-          ...theme.typography.sectionTitle
-        }
-      }
-    },
-    HvHeader: {
-      classes: {
-        root: {
-          backgroundColor: theme.colors.atmo1,
-          borderTop: `4px solid ${theme.colors.brand}`
-        }
-      }
-    },
-    HvHeaderMenuBarBar: {
-      classes: {
-        active: {
-          top: `calc(${theme.header.height} - 4px)`
-        },
-        list: {
-          "& li:hover > .HvHeader-MenuBar-hidden": {
-            top: `calc(${theme.header.height} - 4px)`
-          },
-          "& li:focus-within > .HvHeader-MenuBar-hidden": {
-            top: `calc(${theme.header.height} - 4px)`
-          }
-        }
-      }
-    },
-    HvHeaderMenuItem: {
-      classes: {
-        root: {
-          borderTop: "2px solid transparent",
-          borderBottom: "none",
-          color: theme.colors.secondary
-        },
-        selected: {
-          borderBottom: "none",
-          color: theme.colors.brand,
-          "&.HvHeader-MenuItem-menu": {
-            borderTop: "2px solid transparent"
-          },
-          "&.HvHeader-MenuItem-menubar": {
-            borderTop: "2px solid currentcolor"
-          }
-        }
-      }
-    },
-    HvHorizontalScrollListItem: {
-      classes: {
-        root: {
-          maxWidth: 180
-        },
-        button: {
-          height: "32px",
-          borderBottom: "2px solid transparent",
-          "&:hover": {
-            backgroundColor: theme.colors.atmo3,
-            "& .HvHorizontalScrollListItem-notSelected": {
-              height: "10px",
-              width: "10px",
-              backgroundColor: theme.colors.atmo4
-            }
-          }
-        },
-        text: {
-          height: "32px",
-          borderBottom: "2px solid transparent",
-          padding: "8px 10px",
-          margin: 0
-        },
-        selected: {
-          borderBottom: `2px solid ${theme.colors.secondary}`
-        },
-        bullet: {
-          display: "none"
-        }
-      }
-    },
-    HvSelect: {
-      classes: {
-        select: {
-          ".HvButton-endIcon": {
-            marginRight: theme.spacing(-1)
-          }
-        },
-        panel: {
-          borderColor: theme.colors.atmo4
-        }
-      }
-    },
-    HvVerticalScrollListItem: {
-      classes: {
-        icon: {
-          fontSize: "10px"
-        },
-        notSelected: {
-          color: theme.colors.atmo4,
-          fontSize: "6px"
-        },
-        text: {
-          height: "32px",
-          width: "32px"
-        },
-        button: {
-          height: "32px",
-          width: "32px",
-          borderRadius: 0,
-          cursor: "pointer",
-          "&:hover": {
-            "& .HvVerticalScrollListItem-notSelected": {
-              fontSize: "10px",
-              color: theme.colors.atmo4
-            }
-          }
-        }
-      }
-    },
-    HvInlineEditor: {
-      classes: {
-        button: {
-          "&,:hover": {
-            border: "none",
-            backgroundColor: "transparent"
-          },
-          ":focus,:active": {
-            border: "none"
-          }
-        }
-      }
-    },
-    HvInfoMessage: {
-      classes: {
-        root: {
-          color: theme.colors.secondary
-        }
-      }
-    },
-    HvLabel: {
-      classes: {
-        root: { fontWeight: theme.fontWeights.semibold },
-        childGutter: { paddingBottom: 6 }
-      }
-    },
-    HvList: {
-      classes: {
-        itemSelector: {
-          "&:not(:hover):not(.HvIsFocused):not(:focus-within)": {
-            backgroundColor: "transparent"
-          }
-        }
-      }
-    },
-    HvListItem: {
-      classes: {
-        disabled: {
-          backgroundColor: "transparent"
-        }
-      }
-    },
-    HvPagination: {
-      classes: {
-        root: {
-          [`& .HvPagination-pageSizeInput`]: {
-            ...theme.typography.label,
-            "&:focus": {
-              padding: "unset"
-            }
-          },
-          [`& .HvPagination-pageSizeInputContainer`]: {
-            width: 40,
-            minWidth: 40
-          },
-          [`&& .HvPagination-pageSizeInputRoot`]: {
-            height: 32
-          }
-        },
-        icon: {
-          fontSize: 16
-        },
-        pageSizeOptions: {
-          height: 32
-        },
-        pageSizeHeader: {
-          height: "unset",
-          [`& .HvBaseDropdown-arrowContainer`]: {
-            marginTop: 0
-          }
-        },
-        pageSizeTextContainer: {
-          height: 32,
-          ...theme.typography.body
-        },
-        pageSizeOptionsSelect: {
-          ...theme.typography.body
-        },
-        totalPagesTextContainer: {
-          ...theme.typography.body
-        },
-        pageNavigator: {
-          alignItems: "stretch"
-        }
-      }
-    },
-    HvPaginationSelect: {
-      classes: {
-        header: {
-          borderColor: "transparent",
-          "&:hover": {
-            borderColor: "transparent"
-          }
-        }
-      }
-    },
-    HvQueryBuilder: {
-      classes: {
-        topGroup: {
-          paddingBottom: `calc(${theme.space.sm} * 3)`
-        },
-        subGroup: {
-          "&::before": {
-            left: "-42px"
-          }
-        },
-        subRulesContainer: {
-          left: "-41px"
-        },
-        topActionButtonContainer: {
-          position: "absolute",
-          bottom: `calc(-1 * ${theme.space.md} * 0.5)`,
-          right: `calc(${theme.space.sm} * 1.75)`
-        },
-        createConditionButton: {
-          ...theme.typography.link,
-          textDecoration: "underline"
-        },
-        createGroupButton: {
-          ...theme.typography.link,
-          textDecoration: "underline"
-        }
-      }
-    },
-    HvQueryBuilderRule: {
-      classes: {
-        root: {
-          "&::before": {
-            width: "21px",
-            height: "36px",
-            left: `calc( -1 * 21px)`
-          },
-          ":not(.HvQueryBuilder-topRulesContainer)>&:last-child::after": {
-            width: "21px",
-            left: `calc( -1 * 21px)`
-          }
-        },
-        actionsContainer: {
-          marginTop: "22px"
-        }
-      }
-    },
-    HvRadio: {
-      classes: {
-        container: {
-          "&:hover": {
-            borderRadius: 0
-          }
-        }
-      }
-    },
-    HvScrollToHorizontal: {
-      classes: {
-        root: {
-          backgroundColor: theme.alpha("atmo2", 0.8)
-        }
-      }
-    },
-    HvScrollToVertical: {
-      classes: {
-        root: {
-          backgroundColor: theme.alpha("atmo2", 0.8)
-        }
-      }
-    },
-    HvSlider: {
-      classes: {
-        trackDragging: {
-          "&& .rc-slider-track": {
-            "&::before": {
-              borderTop: `12px solid ${theme.colors.atmo3}`,
-              borderBottom: `12px solid ${theme.colors.atmo3}`
-            }
-          }
-        },
-        trackStandBy: {
-          "&& .rc-slider-track": {
-            "&:hover": {
-              "&::before": {
-                borderTop: `12px solid ${theme.colors.atmo3}`,
-                borderBottom: `12px solid ${theme.colors.atmo3}`
-              }
-            }
-          }
-        },
-        handleContainer: {
-          "&& .rc-slider-handle": {
-            "&:active": {
-              cursor: "grab",
-              "&::before": {
-                border: `9px solid ${theme.colors.secondary}`,
-                opacity: "20%"
-              }
-            },
-            "&:hover": {
-              "&::before": {
-                border: `9px solid ${theme.colors.secondary}`,
-                opacity: "20%"
-              }
-            }
-          }
-        }
-      }
-    },
-    HvSnackbarContent: {
-      classes: {
-        action: {
-          marginLeft: "inherit"
-        }
-      }
-    },
-    HvSwitch: {
-      classes: {
-        invalidSwitch: {
-          paddingBottom: "0px"
-        }
-      }
-    },
-    HvSuggestions: {
-      classes: {
-        list: {
-          borderColor: "transparent",
-          borderRadius: 0
-        }
-      }
-    },
-    HvTab: {
-      classes: {
-        root: {
-          padding: "0 20px",
-          "&:hover": {
-            backgroundColor: "transparent",
-            borderRadius: 0,
-            "&::after": {
-              height: "1px",
-              backgroundColor: theme.colors.secondary_60
-            }
-          }
-        }
-      }
-    },
-    HvTag: {
-      classes: {
-        root: {
-          "--tagColor": theme.colors.neutral_20
-        },
-        categorical: {
-          "--tagColor": theme.alpha("cat1", 0.2)
-        }
-      }
-    },
-    HvTagsInput: {
-      classes: {
-        disabled: {
-          "& .HvTagsInput-tagsList": {
-            backgroundColor: theme.colors.atmo1
-          }
-        },
-        readOnly: {
-          "& .HvTagsInput-tagsList": {
-            backgroundColor: theme.colors.atmo1,
-            borderColor: "transparent",
-            "&:hover": {
-              borderColor: "transparent"
-            }
-          }
-        },
-        tagInputRoot: {
-          "&::after": {
-            display: "none"
-          }
-        },
-        tagsList: {
-          borderColor: theme.colors.atmo4,
-          borderRadius: 0,
-          "&:hover": {
-            borderColor: theme.colors.secondary
-          }
-        }
-      }
-    },
-    HvTableCell: {
-      classes: {
-        root: {
-          padding: `calc(${theme.space.xs} - 2px ) ${theme.space.xs} calc(${theme.space.xs} - 3px ) ${theme.spacing(4)}`
-        },
-        head: {
-          borderTop: `1px solid ${theme.colors.atmo4}`
-        },
-        body: {
-          "&.HvTableCell-sorted": {
-            backgroundImage: `linear-gradient(to right, ${theme.alpha(
-              "atmo1",
-              0.4
-            )}, ${theme.alpha("atmo1", 0.4)})`
-          }
-        },
-        variantListactions: {
-          borderLeft: `solid 2px ${theme.colors.atmo2}`
-        },
-        variantListcheckbox: {
-          borderRight: `solid 2px ${theme.colors.atmo2}`
-        }
-      }
-    },
-    HvTableHeader: {
-      classes: {
-        head: {
-          "&.HvTableHeader-sortable": {
-            "&:hover": {
-              backgroundColor: theme.colors.atmo3,
-              "& .HvTableHeader-sortIcon": {
-                visibility: "visible"
-              }
-            },
-            "&:focus-within": {
-              backgroundColor: theme.colors.atmo3,
-              "& .HvTableHeader-sortIcon": {
-                visibility: "visible"
-              }
-            }
-          },
-          "*:first-of-type > &": {
-            borderTop: `1px solid ${theme.colors.atmo4}`
-          }
-        },
-        sortButton: {
-          ".HvTableHeader-root.HvTableHeader-sortable &": {
-            "&:hover": {
-              backgroundColor: "transparent"
-            }
-          }
-        }
-      }
-    },
-    HvTableRow: {
-      classes: {
-        root: {
-          backgroundColor: "transparent"
-        },
-        selected: {
-          backgroundColor: theme.colors.atmo1
-        },
-        variantList: {
-          borderRadius: 0,
-          "& td": {
-            borderTop: "1px solid transparent",
-            borderBottom: "1px solid transparent"
-          },
-          "& td:first-of-type": {
-            borderLeft: "1px solid transparent",
-            borderRadius: 0
-          },
-          "& td:last-of-type": {
-            borderRight: "1px solid transparent",
-            borderRadius: 0
-          },
-          "&.HvTableRow-selected": {
-            "& td": {
-              borderTop: `1px solid ${theme.colors.secondary}`,
-              borderBottom: `1px solid ${theme.colors.secondary}`
-            },
-            "& td:first-of-type": {
-              borderLeft: `1px solid ${theme.colors.secondary}`,
-              borderRadius: 0
-            },
-            "& td:last-of-type": {
-              borderRight: `1px solid ${theme.colors.secondary}`,
-              borderRadius: 0
-            },
-            "&:hover": {
-              "& td": {
-                borderTop: `1px solid ${theme.colors.atmo4}`,
-                borderBottom: `1px solid ${theme.colors.atmo4}`
-              },
-              "& td:first-of-type": {
-                borderLeft: `1px solid ${theme.colors.atmo4}`,
-                borderRadius: 0
-              },
-              "& td:last-of-type": {
-                borderRight: `1px solid ${theme.colors.atmo4}`,
-                borderRadius: 0
-              }
-            }
-          },
-          "&:hover": {
-            "& td": {
-              borderTop: `1px solid ${theme.colors.atmo4}`,
-              borderBottom: `1px solid ${theme.colors.atmo4}`
-            },
-            "& td:first-of-type": {
-              borderLeft: `1px solid ${theme.colors.atmo4}`,
-              borderRadius: 0
-            },
-            "& td:last-of-type": {
-              borderRight: `1px solid ${theme.colors.atmo4}`,
-              borderRadius: 0
-            }
-          },
-          "&.HvIsFocused": {
-            borderRadius: 0
-          }
-        }
-      }
-    },
-    HvMultiButton: {
-      variant: "secondaryGhost",
-      classes: {
-        root: {
-          "& button&.HvMultiButton-button&.HvMultiButton-selected": {
-            height: 32
-          }
-        }
-      }
-    },
-    HvTooltip: {
-      classes: {
-        popper: {
-          "& .HvTooltip-tooltip": {
-            borderRadius: 0
-          }
-        }
-      }
-    },
-    HvVerticalNavigation: {
-      classes: {
-        root: {
-          justifyContent: "space-between"
-        }
-      }
-    },
-    HvVerticalNavigationActions: {
-      classes: {
-        root: {
-          marginTop: "none"
-        }
-      }
-    },
-    HvVerticalNavigationSlider: {
-      classes: {
-        root: {
-          borderLeft: `2px solid transparent`
-        },
-        listItemSelected: {
-          borderLeft: `2px solid ${theme.colors.brand}`
-        }
-      }
-    },
-    HvVerticalNavigationTreeViewItem: {
-      classes: {
-        content: {
-          borderLeft: `2px solid transparent`,
-          ".HvVerticalNavigationTreeViewItem-selected>&": {
-            borderLeft: `2px solid ${theme.colors.brand}`
-          }
-        }
-      }
-    },
-    HvWarningText: {
-      classes: {
-        warningText: {
-          ...theme.typography.body,
-          color: "inherit"
-        },
-        topGutter: { paddingTop: "8px" },
-        defaultIcon: {
-          fontSize: 16,
-          margin: 8
-        }
-      }
-    },
-    HvWizardContainer: {
-      classes: {
-        paper: {
-          maxHeight: "calc(100% - (2 * 100px))"
-        }
-      }
-    },
-    HvStatusIcon: {
-      type: "simple"
-    }
-  }
-});
-export {
-  ds3
-};