@atlaskit/dropdown-menu/dist/cjs/internal/components/checkbox-icon.js

A dropdown menu displays a list of actions or options to a user.

/* checkbox-icon.tsx generated by @compiled/babel-plugin v3.0.2 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("./checkbox-icon.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _react = _interopRequireDefault(require("react"));
var _fg = require("@atlaskit/platform-feature-flags/fg");
var svgStyles = null;
var styles = {
  svg: "_lcxvglyw"
};
function getFillColor(checked, disabled) {
  if (disabled) {
    if (checked) {
      return "var(--ds-icon-disabled, #080F214A)";
    } else {
      return "var(--ds-background-input, #FFFFFF)";
    }
  }
  if (checked) {
    return "var(--ds-background-selected-bold, #1868DB)";
  }
  return "var(--ds-background-input, #FFFFFF)";
}
function getStrokeColor(checked, disabled) {
  if (disabled) {
    return "var(--ds-border-disabled, #0515240F)";
  }
  if (checked) {
    return "var(--ds-border-selected, #1868DB)";
  }
  return "var(--ds-border-input, #8C8F97)";
}

/**
 * __Checkbox icon__
 *
 * Used to visually represent the selected state in DropdownItemCheckbox
 *
 * @internal
 */
var CheckboxIcon = function CheckboxIcon(_ref) {
  var checked = _ref.checked,
    disabled = _ref.disabled;
  if ((0, _fg.fg)('platform-dst-new-menu')) {
    return /*#__PURE__*/_react.default.createElement("svg", {
      width: "16",
      height: "16",
      viewBox: "0 0 16 16",
      fill: "none",
      className: (0, _runtime.ax)([styles.svg])
    }, /*#__PURE__*/_react.default.createElement("path", {
      d: "M3 1.5H13C13.8284 1.5 14.5 2.17157 14.5 3V13C14.5 13.8284 13.8284 14.5 13 14.5H3C2.17157 14.5 1.5 13.8284 1.5 13V3C1.5 2.17157 2.17157 1.5 3 1.5Z",
      fill: getFillColor(checked, disabled),
      stroke: getStrokeColor(checked, disabled)
    }), /*#__PURE__*/_react.default.createElement("path", {
      d: "M12.3223 5.4803L11.1699 4.52002L6.74609 9.82862L4.82225 7.52002L3.66992 8.4803L6.16992 11.4803C6.31242 11.6513 6.5235 11.7502 6.74609 11.7502C6.96867 11.7502 7.17976 11.6513 7.32225 11.4803L12.3223 5.4803Z",
      fillRule: "evenodd",
      clipRule: "evenodd",
      fill: checked ? "var(--ds-icon-inverse, #FFFFFF)" : 'transparent'
    }));
  }
  return /*#__PURE__*/_react.default.createElement("svg", {
    width: 24,
    height: 24,
    viewBox: "0 0 24 24",
    style: {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
      color: checked ? "var(--ds-background-selected-bold, #1868DB)" : "var(--ds-background-input, #FFFFFF)",
      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
      fill: checked ? "var(--ds-icon-inverse, #FFFFFF)" : 'transparent'
    },
    role: "presentation",
    className: (0, _runtime.ax)(["_1reo15vq _18m915vq _lswuvuon _lcxvglyw"])
  }, /*#__PURE__*/_react.default.createElement("g", {
    fillRule: "evenodd"
  }, /*#__PURE__*/_react.default.createElement("rect", {
    stroke: checked ? "var(--ds-border-selected, #1868DB)" : "var(--ds-border-input, #8C8F97)",
    x: "5.5",
    y: "5.5",
    width: "13",
    height: "13",
    rx: "1.5",
    fill: "currentColor"
  }), /*#__PURE__*/_react.default.createElement("path", {
    fillRule: "evenodd",
    clipRule: "evenodd",
    d: "M16.3262 9.48011L15.1738 8.51984L10.75 13.8284L8.82616 11.5198L7.67383 12.4801L10.1738 15.4801C10.3163 15.6511 10.5274 15.75 10.75 15.75C10.9726 15.75 11.1837 15.6511 11.3262 15.4801L16.3262 9.48011Z",
    fill: "inherit"
  })));
};
var _default = exports.default = CheckboxIcon;