@orfium/ictinus 5.43.9 → 5.44.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orfium/ictinus",
-  "version": "5.43.9",
+  "version": "5.44.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "exports": {

package/dist/vanilla/assets/src/actions/ActionsContent.css.ts.vanilla-DnHrsURs.css

@@ -1,22 +0,0 @@
-@layer ictinus._1hfyma1;
-@layer ictinus._1hfyma1 {
-  ._1kfj8ze {
-    transition: opacity 150ms ease;
-  }
-  ._18tj5pd:not(:has(._18tj5pd)):focus-within ._1kfj8ze, ._1kfj8ze:is(:checked, [data-state=open], :has(:checked, [data-state=open], [aria-expanded=true])) {
-    opacity: 1;
-    transition: none;
-  }
-  ._1agowf8 {
-    opacity: 1;
-  }
-  .jr1a7z {
-    opacity: 0;
-  }
-  @media (hover: hover) {
-    ._18tj5pd:not(:has(._18tj5pd)):hover ._1kfj8ze {
-      opacity: 1;
-      transition: none;
-    }
-  }
-}

package/dist/vanilla/assets/src/actions/ActionsRoot.css.ts.vanilla-D9ztPyX7.css

@@ -1,4 +0,0 @@
-@layer ictinus._1hfyma1;
-@layer ictinus._1hfyma1 {
-
-}

package/dist/vanilla/assets/src/data-table/DataTableBody.css.ts.vanilla-D1zKri52.css

@@ -1,70 +0,0 @@
-@property --_1272tho {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: transparent;
-}
-@layer ictinus._1hfyma1;
-@layer ictinus._1hfyma1 {
-  ._1cnxhit {
-    position: relative;
-  }
-  ._1cnxhit[data-scroll-timeline]::after {
-    background-image: linear-gradient(to left, var(--ictinus-color-transparent-4), transparent);
-    right: var(--_1xe0qi1);
-  }
-  ._1cnxhit[data-scroll-timeline]::before {
-    background-image: linear-gradient(to right, var(--ictinus-color-transparent-4), transparent);
-    left: var(--s68dtg);
-  }
-  [data-theme="dark"] ._1cnxhit[data-scroll-timeline]::before {
-    background-image: linear-gradient(to right, var(--ictinus-color-transparent-6), transparent);
-    border-left: 1px solid var(--ictinus-color-border-color-decorative-default);
-  }
-  [data-theme="dark"] ._1cnxhit[data-scroll-timeline]::after {
-    background-image: linear-gradient(to right, var(--ictinus-color-transparent-6), transparent);
-    border-right: 1px solid var(--ictinus-color-border-color-decorative-default);
-  }
-  ._1cnxhit[data-scroll-timeline]::before, ._1cnxhit[data-scroll-timeline]::after {
-    content: "";
-    display: block;
-    height: 100%;
-    opacity: 0;
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-    transition: 0.3s opacity;
-    width: 16px;
-    z-index: 1;
-  }
-  ._1cnxhit[data-has-left-pinned][data-scroll-timeline]:not([data-scroll-timeline="left"])::before {
-    opacity: 1;
-  }
-  ._1cnxhit[data-has-right-pinned][data-scroll-timeline]:not([data-scroll-timeline="right"])::after {
-    opacity: 1;
-  }
-  .hl69gt {
-    width: calc(1px * var(--mv2g5h));
-    background-image: linear-gradient(var(--_1272tho), var(--_1272tho));
-    transition: --_1272tho 150ms ease;
-  }
-  [data-selectable] .a45zcu[data-selected] .hl69gt {
-    --_1272tho: var(--ictinus-color-palette-tertiary-contrast);
-  }
-  .ze5v4q {
-    left: var(--_1ix3ge2);
-  }
-  .st165h {
-    right: var(--_1ix3ge2);
-  }
-  ._1e1zqz2 {
-    flex-grow: calc(var(--mv2g5h) / var(--_1eit1po));
-  }
-  ._1gu3hvp {
-    flex-grow: calc(var(--mv2g5h) / var(--_1eit1po));
-  }
-  @media (hover: hover) {
-    [data-selectable] .a45zcu:hover .hl69gt {
-      --_1272tho: var(--ictinus-color-palette-tertiary-muted);
-    }
-  }
-}

package/dist/vanilla/assets/src/layers/layers.css.ts.vanilla-CVufHmUV.css

@@ -1 +0,0 @@
-@layer ictinus, ictinus.theme, ictinus.reset, ictinus._1hfyma1, ictinus.utilities;

package/dist/vanilla/assets/src/skeleton/Skeleton.css.ts.vanilla-BSsSCHAs.css

@@ -1,6 +0,0 @@
-@layer ictinus._1hfyma1;
-@layer ictinus._1hfyma1 {
-  ._1k38rka:empty:before {
-    content: "\00a0";
-  }
-}

package/dist/vanilla/assets/src/vanilla/Table/TableBody.css.ts.vanilla-BxpDyemc.css

@@ -1,6 +0,0 @@
-@layer ictinus._1hfyma1;
-@layer ictinus._1hfyma1 {
-  .lut1up {
-    position: relative;
-  }
-}

package/dist/vanilla/assets/src/vanilla/Table/TableHeader.css.ts.vanilla-dHaHXhlt.css

@@ -1,8 +0,0 @@
-@layer ictinus._1hfyma1;
-@layer ictinus._1hfyma1 {
-  ._1qhell3 {
-    position: sticky;
-    top: 0;
-    z-index: 20;
-  }
-}

package/dist/vanilla/src/components/Avatar/Avatar.js

@@ -1,34 +0,0 @@
-import { jsx } from '@emotion/react/jsx-runtime';
-import { forwardRef, useMemo } from 'react';
-import { iconStyles, avatarStyle } from './Avatar.style.js';
-import { UserAvatar } from './UserAvatar.js';
-
-const Avatar = forwardRef(
-  ({ src = "", size = 1, color = "blue", className, dataTestPrefixId = "", children }, ref) => {
-    const avatarContent = useMemo(() => {
-      if (src) {
-        return /* @__PURE__ */ jsx("img", { src });
-      }
-      if (!src && children) {
-        return children;
-      }
-      return /* @__PURE__ */ jsx(UserAvatar, { css: iconStyles({ size, color }) });
-    }, [children, color, size, src]);
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className,
-        css: avatarStyle({
-          size,
-          color
-        }),
-        "data-testid": `${dataTestPrefixId}_avatar`,
-        children: avatarContent
-      }
-    );
-  }
-);
-Avatar.displayName = "Avatar";
-
-export { Avatar as default };

package/dist/vanilla/src/components/Avatar/Avatar.style.js

@@ -1,116 +0,0 @@
-import { css } from '@emotion/react';
-import { vars } from '@orfium/tokens';
-import { flex } from '../../theme/functions.js';
-
-const AVATAR_COLOR = {
-  blue: {
-    border: vars.color.palette["primary-alt"].contrast,
-    fill: vars.color.palette["primary-alt"].base,
-    text: vars.color.text.default.active
-  },
-  red: {
-    border: vars.color.palette.error.contrast,
-    fill: vars.color.palette.error.base,
-    text: vars.color.text.default.error
-  },
-  purple: {
-    border: vars.color.palette.upsell.contrast,
-    fill: vars.color.palette.upsell.base,
-    text: vars.color.text.default.visited
-  },
-  teal: {
-    border: vars.color.palette.success.contrast,
-    fill: vars.color.palette.success.base,
-    text: vars.color.text.default.success
-  },
-  orange: {
-    border: vars.color.palette.warning.contrast,
-    fill: vars.color.palette.warning.base,
-    text: vars.color.text.default.warning
-  }
-};
-const AVATAR_SIZE = {
-  "1": vars.sizing["5"],
-  "2": vars.sizing["6"],
-  "3": vars.sizing["8"],
-  "4": vars.sizing["12"],
-  "5": vars.sizing["15"],
-  "6": vars.sizing["18"]
-};
-const AVATAR_TYPOGRAPHY = {
-  "1": {
-    fontSize: vars["font-size"]["1"],
-    lineHeight: vars["line-height"]["1"],
-    letterSpacing: vars["letter-spacing"]["1"]
-  },
-  "2": {
-    fontSize: vars["font-size"]["2"],
-    lineHeight: vars["line-height"]["3"],
-    letterSpacing: vars["letter-spacing"]["2"]
-  },
-  "3": {
-    fontSize: vars["font-size"]["3"],
-    lineHeight: vars["line-height"]["4"],
-    letterSpacing: vars["letter-spacing"]["2"]
-  },
-  "4": {
-    fontSize: vars["font-size"]["4"],
-    lineHeight: vars["line-height"]["5"],
-    letterSpacing: vars["letter-spacing"]["1"]
-  },
-  "5": {
-    fontSize: vars["font-size"]["8"],
-    lineHeight: vars["line-height"]["8"],
-    letterSpacing: vars["letter-spacing"]["0"]
-  },
-  "6": {
-    fontSize: vars["font-size"]["10"],
-    lineHeight: vars["line-height"]["10"],
-    letterSpacing: vars["letter-spacing"]["0"]
-  }
-};
-const iconStyles = ({ size = 1, color = "blue" }) => {
-  return css`
-    width: calc(${AVATAR_SIZE[size]} * 0.8);
-    height: calc(${AVATAR_SIZE[size]} * 0.8);
-    path {
-      fill: ${AVATAR_COLOR[color].text};
-    }
-  `;
-};
-const avatarStyle = ({
-  size,
-  color
-}) => {
-  return css`
-    ${flex};
-    width: ${AVATAR_SIZE[size]};
-    height: ${AVATAR_SIZE[size]};
-    border-radius: ${vars["border-radius"][7]};
-    border: ${vars["border-width"]["1"]} solid;
-    border-color: ${AVATAR_COLOR[color].border};
-    box-sizing: border-box;
-    background-color: ${AVATAR_COLOR[color].fill};
-    color: ${AVATAR_COLOR[color].text};
-    overflow: hidden;
-    position: relative;
-    align-items: center;
-    flex-shrink: 0;
-    user-select: none;
-    justify-content: center;
-
-    // avatar has custom typography styles
-    font-family: ${vars.weight.medium};
-    font-size: ${AVATAR_TYPOGRAPHY[size].fontSize};
-    line-height: ${AVATAR_TYPOGRAPHY[size].lineHeight};
-    letter-spacing: ${AVATAR_TYPOGRAPHY[size].letterSpacing};
-
-    img {
-      border-radius: ${vars["border-radius"][7]};
-      width: 100%;
-      height: 100%;
-    }
-  `;
-};
-
-export { AVATAR_COLOR, AVATAR_SIZE, AVATAR_TYPOGRAPHY, avatarStyle, iconStyles };

package/dist/vanilla/src/components/Avatar/UserAvatar.js

@@ -1,22 +0,0 @@
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-
-function UserAvatar() {
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 14 17", xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M6.96625 6.55647C8.77677 6.55647 10.2445 5.08876 10.2445 3.27824C10.2445 1.46772 8.77677 0 6.96625 0C5.15573 0 3.68801 1.46772 3.68801 3.27824C3.68801 5.08876 5.15573 6.55647 6.96625 6.55647Z",
-        fill: "currentColor"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M0 12.2113C0 12.1401 0.0171683 12.0699 0.0515269 12.0076C1.31285 9.7198 3.95046 8.09435 7 8.09435C10.0495 8.09435 12.6872 9.7198 13.9485 12.0076C13.9828 12.0699 14 12.1401 14 12.2113C14 12.2824 13.9828 12.3528 13.9483 12.4151C12.687 14.6941 10.0518 16.0044 7.00244 16.0044C3.95304 16.0044 1.31314 14.6941 0.0516988 12.4151C0.0172363 12.3528 0 12.2824 0 12.2113Z",
-        fill: "currentColor"
-      }
-    )
-  ] });
-}
-
-export { UserAvatar };

package/dist/vanilla/src/components/Button/Button.js

@@ -1,29 +0,0 @@
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import React__default from 'react';
-import Avatar from '../Avatar/Avatar.js';
-import { BUTTON_COLOR } from '../ButtonBase/constants.js';
-import Icon from '../Icon/Icon.js';
-import ButtonBase from '../ButtonBase/ButtonBase.js';
-
-const Button = React__default.forwardRef((props, ref) => {
-  const {
-    type = "primary",
-    size = "normal",
-    iconLeftName,
-    iconRightName,
-    avatar,
-    children,
-    onClick,
-    isLoading
-  } = props;
-  const hasAvatar = ["primary", "secondary", "tertiary"].includes(type) && avatar;
-  return /* @__PURE__ */ jsxs(ButtonBase, { ...props, ref, isLoading, onClick, children: [
-    hasAvatar && /* @__PURE__ */ jsx(Avatar, { src: avatar?.src, children: avatar?.label }),
-    iconLeftName && !hasAvatar && /* @__PURE__ */ jsx(Icon, { name: iconLeftName, color: BUTTON_COLOR[type].text }),
-    /* @__PURE__ */ jsx("span", { children }),
-    iconRightName && /* @__PURE__ */ jsx(Icon, { name: iconRightName, color: BUTTON_COLOR[type].text })
-  ] });
-});
-Button.displayName = "Button";
-
-export { Button as default };

package/dist/vanilla/src/components/Button/ButtonLoader/ButtonLoader.js

@@ -1,9 +0,0 @@
-import { jsx } from '@emotion/react/jsx-runtime';
-import { loaderWrapperStyle, barWrapperStyle, barStyle } from './ButtonLoader.style.js';
-
-const ButtonLoader = ({ dataTestId }) => {
-  return /* @__PURE__ */ jsx("div", { css: loaderWrapperStyle(), "data-testid": dataTestId, children: /* @__PURE__ */ jsx("div", { css: barWrapperStyle(), children: /* @__PURE__ */ jsx("div", { css: barStyle() }) }) });
-};
-ButtonLoader.displayName = "ButtonLoader";
-
-export { ButtonLoader as default };

package/dist/vanilla/src/components/Button/ButtonLoader/ButtonLoader.style.js

@@ -1,46 +0,0 @@
-import { css, keyframes } from '@emotion/react';
-import { rem, vars } from '@orfium/tokens';
-
-const loaderWrapperStyle = () => {
-  return css({
-    width: "100%",
-    position: "absolute"
-  });
-};
-const barWrapperStyle = () => {
-  return css({
-    width: "100%",
-    height: rem(4),
-    overflow: "hidden",
-    borderTopLeftRadius: vars["border-radius"]["2"],
-    borderTopRightRadius: vars["border-radius"]["2"],
-    position: "relative",
-    ":before": {
-      content: '""',
-      width: "100%",
-      height: rem(2),
-      display: "block"
-    }
-  });
-};
-const barStyle = () => {
-  const barAnimation = keyframes({
-    from: {
-      left: "-50%"
-    },
-    to: {
-      left: "100%"
-    }
-  });
-  return css({
-    width: "50%",
-    background: "linear-gradient(270deg, #F814E1 0.02%, #4945EE 100%)",
-    height: rem(2),
-    position: "absolute",
-    bottom: "0",
-    top: "0",
-    animation: `${barAnimation} 1.5s infinite`
-  });
-};
-
-export { barStyle, barWrapperStyle, loaderWrapperStyle };

package/dist/vanilla/src/components/ButtonBase/ButtonBase.js

@@ -1,62 +0,0 @@
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import { omit } from 'lodash-es';
-import React__default from 'react';
-import { generateTestDataId } from '../../utils/helpers.js';
-import ButtonLoader from '../Button/ButtonLoader/ButtonLoader.js';
-import { useSlotProps } from '../utils/Slots.js';
-import { buttonWrapperStyle, buttonBaseStyle } from './ButtonBase.style.js';
-
-const ButtonBase = React__default.forwardRef((props, ref) => {
-  props = useSlotProps(props, "button");
-  const {
-    type = "primary",
-    size = "normal",
-    isBlock = false,
-    isDisabled = false,
-    isLoading = false,
-    isIconButton = false,
-    shape = "circle",
-    children,
-    dataTestId = "",
-    dataTestPrefixId = "",
-    htmlType = "button",
-    onClick,
-    onBlur,
-    sx,
-    ...rest
-  } = props;
-  const testIdName = `${dataTestPrefixId}button`;
-  return /* @__PURE__ */ jsxs("div", { css: buttonWrapperStyle({ isBlock }), children: [
-    isLoading && !isDisabled && /* @__PURE__ */ jsx(ButtonLoader, { dataTestId: testIdName }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        ...omit(rest, ["avatar", "iconRightName", "iconLeftName", "iconName"]),
-        ref,
-        type: htmlType,
-        "data-testid": generateTestDataId(testIdName, dataTestId),
-        css: buttonBaseStyle({
-          type,
-          size,
-          isLoading,
-          isBlock,
-          isDisabled,
-          isIconButton,
-          shape,
-          sx
-        }),
-        onClick: (event) => {
-          if (onClick) {
-            onClick(event);
-          }
-        },
-        onBlur,
-        disabled: isDisabled,
-        children
-      }
-    )
-  ] });
-});
-ButtonBase.displayName = "ButtonBase";
-
-export { ButtonBase as default };

package/dist/vanilla/src/components/ButtonBase/ButtonBase.style.js

@@ -1,74 +0,0 @@
-import { css } from '@emotion/react';
-import { vars } from '@orfium/tokens';
-import { generateStylesFromTokens } from '../Typography/utils.js';
-import { BUTTON_COLOR, typographySizes } from './constants.js';
-
-const BUTTON_SIZE = {
-  compact: {
-    size: vars.sizing["7"],
-    padding: `${vars.spacing["0"]} ${vars.spacing["4"]} ${vars.spacing["0"]} ${vars.spacing["4"]}`
-  },
-  normal: {
-    size: vars.sizing["9"],
-    padding: `${vars.spacing["0"]} ${vars.spacing["6"]} ${vars.spacing["0"]} ${vars.spacing["6"]}`
-  }
-};
-const buttonWrapperStyle = ({
-  isBlock
-}) => css({ position: "relative", width: isBlock ? "100%" : "fit-content" });
-const buttonBaseStyle = ({
-  type = "primary",
-  size = "normal",
-  isBlock,
-  isLoading,
-  isDisabled,
-  isIconButton,
-  shape,
-  sx
-}) => (theme) => {
-  const getButtonWidth = () => {
-    if (isBlock) return "100%";
-    if (isIconButton) return BUTTON_SIZE[size].size;
-    return void 0;
-  };
-  const baseButtonStyles = {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexShrink: 0,
-    gap: vars.spacing["4"],
-    color: BUTTON_COLOR[type].text,
-    width: getButtonWidth(),
-    height: BUTTON_SIZE[size].size,
-    backgroundColor: BUTTON_COLOR[type][isLoading ? "activeFill" : "defaultFill"],
-    padding: isIconButton ? 0 : BUTTON_SIZE[size].padding,
-    borderRadius: isIconButton && shape === "circle" ? vars["border-radius"]["7"] : vars["border-radius"]["2"],
-    border: "none",
-    cursor: "pointer",
-    transition: "background-color,border 150ms linear",
-    ":focus-visible:not(:disabled)": {
-      backgroundColor: BUTTON_COLOR[type].hoverFill
-    },
-    ":disabled": {
-      opacity: theme.tokens.disabledState.get("default"),
-      cursor: "not-allowed"
-    },
-    ":hover:not(:disabled)": {
-      backgroundColor: BUTTON_COLOR[type].hoverFill
-    },
-    ':active:not(:disabled), &[aria-expanded="true"]': {
-      backgroundColor: BUTTON_COLOR[type].activeFill
-    }
-  };
-  const loadingStyles = isLoading && !isDisabled ? {
-    pointerEvents: "none"
-  } : {};
-  return css`
-      ${generateStylesFromTokens(theme.tokens.typography.get(typographySizes[size]))};
-      ${baseButtonStyles};
-      ${loadingStyles};
-      ${sx?.container};
-    `;
-};
-
-export { buttonBaseStyle, buttonWrapperStyle };

package/dist/vanilla/src/components/ButtonBase/constants.js

@@ -1,34 +0,0 @@
-import { vars } from '@orfium/tokens';
-
-const BUTTON_COLOR = {
-  primary: {
-    defaultFill: vars.color.palette.primary.base,
-    hoverFill: vars.color.palette.primary.muted,
-    activeFill: vars.color.palette.primary.contrast,
-    text: vars.color.text.inverted.primary
-  },
-  secondary: {
-    defaultFill: vars.color.palette.secondary.base,
-    hoverFill: vars.color.palette.secondary.muted,
-    activeFill: vars.color.palette.secondary.contrast,
-    text: vars.color.text.default.active
-  },
-  tertiary: {
-    defaultFill: vars.color.palette.tertiary.base,
-    hoverFill: vars.color.palette.tertiary.muted,
-    activeFill: vars.color.palette.tertiary.contrast,
-    text: vars.color.text.default.active
-  },
-  danger: {
-    defaultFill: vars.color.palette.error.base,
-    hoverFill: vars.color.palette.error.muted,
-    activeFill: vars.color.palette.error.contrast,
-    text: vars.color.text.default.error
-  }
-};
-const typographySizes = {
-  normal: "normal.label02",
-  compact: "normal.label03"
-};
-
-export { BUTTON_COLOR, typographySizes };

package/dist/vanilla/src/components/IconButton/IconButton.js

@@ -1,40 +0,0 @@
-import { jsx } from '@emotion/react/jsx-runtime';
-import React__default from 'react';
-import { vars } from '@orfium/tokens';
-import ButtonBase from '../ButtonBase/ButtonBase.js';
-import { BUTTON_COLOR } from '../ButtonBase/constants.js';
-import Icon from '../Icon/Icon.js';
-
-const IconButton = React__default.forwardRef(
-  ({
-    size = "normal",
-    type = "primary",
-    shape = "circle",
-    iconName,
-    iconColor,
-    dataTestPrefixId,
-    ...props
-  }, ref) => /* @__PURE__ */ jsx(
-    ButtonBase,
-    {
-      ...props,
-      ref,
-      isIconButton: true,
-      shape,
-      size,
-      type,
-      dataTestPrefixId: dataTestPrefixId ? `${dataTestPrefixId}-icon-` : "icon-",
-      children: /* @__PURE__ */ jsx(
-        Icon,
-        {
-          size: vars.sizing[size === "compact" ? "4" : "5"],
-          name: iconName,
-          color: iconColor ?? BUTTON_COLOR[type].text
-        }
-      )
-    }
-  )
-);
-IconButton.displayName = "IconButton";
-
-export { IconButton as default };

package/dist/vanilla/src/theme/functions.js

@@ -1,64 +0,0 @@
-import { css } from '@emotion/react';
-
-css`
-  display: grid;
-
-  grid-auto-columns: 1fr;
-`;
-css`
-  border-radius: 6px;
-  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08);
-  background-color: white;
-`;
-css`
-  position: absolute;
-  margin: auto;
-  top: 0;
-  bottom: 0;
-`;
-const transition = (s, type = "all") => css`
-  -webkit-transition: ${type} ${s}s ease-in-out;
-  -moz-transition: ${type} ${s}s ease-in-out;
-  -ms-transition: ${type} ${s}s ease-in-out;
-  -o-transition: ${type} ${s}s ease-in-out;
-  transition: ${type} ${s}s ease-in-out;
-`;
-css`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-const flex = css`
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: flex;
-`;
-css`
-  ${flex};
-  -webkit-align-items: center;
-  -moz-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  justify-content: center;
-`;
-css`
-  ${flex};
-  -webkit-align-items: center;
-  -moz-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-`;
-css`
-  ${transition(0.1, "color")}
-  border: none;
-  background: transparent;
-  box-shadow: none;
-  text-shadow: none;
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-  cursor: pointer;
-`;
-
-export { flex, transition };