@storybook/design-system
Version:
Storybook design system
253 lines (242 loc) • 8.43 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var React = _interopRequireWildcard(require("react"));
var _excluded = ["title", "titleId"];
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var SvgControls = function SvgControls(_ref) {
var title = _ref.title,
titleId = _ref.titleId,
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
viewBox: "0 0 140 140",
xmlns: "http://www.w3.org/2000/svg",
xmlnsXlink: "http://www.w3.org/1999/xlink",
role: "img",
"aria-labelledby": titleId
}, props), title ? /*#__PURE__*/React.createElement("title", {
id: titleId
}, title) : null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
x: "-25%",
y: "-20.8%",
width: "150%",
height: "150%",
filterUnits: "objectBoundingBox",
id: "controls_svg__c"
}, /*#__PURE__*/React.createElement("feMorphology", {
radius: 1,
operator: "dilate",
"in": "SourceAlpha",
result: "shadowSpreadOuter1"
}), /*#__PURE__*/React.createElement("feOffset", {
dy: 1,
"in": "shadowSpreadOuter1",
result: "shadowOffsetOuter1"
}), /*#__PURE__*/React.createElement("feGaussianBlur", {
stdDeviation: 1.5,
"in": "shadowOffsetOuter1",
result: "shadowBlurOuter1"
}), /*#__PURE__*/React.createElement("feComposite", {
"in": "shadowBlurOuter1",
in2: "SourceAlpha",
operator: "out",
result: "shadowBlurOuter1"
}), /*#__PURE__*/React.createElement("feColorMatrix", {
values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0",
"in": "shadowBlurOuter1"
})), /*#__PURE__*/React.createElement("filter", {
x: "-25%",
y: "-20.8%",
width: "150%",
height: "150%",
filterUnits: "objectBoundingBox",
id: "controls_svg__g"
}, /*#__PURE__*/React.createElement("feMorphology", {
radius: 1,
operator: "dilate",
"in": "SourceAlpha",
result: "shadowSpreadOuter1"
}), /*#__PURE__*/React.createElement("feOffset", {
dy: 1,
"in": "shadowSpreadOuter1",
result: "shadowOffsetOuter1"
}), /*#__PURE__*/React.createElement("feGaussianBlur", {
stdDeviation: 1.5,
"in": "shadowOffsetOuter1",
result: "shadowBlurOuter1"
}), /*#__PURE__*/React.createElement("feComposite", {
"in": "shadowBlurOuter1",
in2: "SourceAlpha",
operator: "out",
result: "shadowBlurOuter1"
}), /*#__PURE__*/React.createElement("feColorMatrix", {
values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0",
"in": "shadowBlurOuter1"
})), /*#__PURE__*/React.createElement("filter", {
x: "-25%",
y: "-20.8%",
width: "150%",
height: "150%",
filterUnits: "objectBoundingBox",
id: "controls_svg__k"
}, /*#__PURE__*/React.createElement("feMorphology", {
radius: 1,
operator: "dilate",
"in": "SourceAlpha",
result: "shadowSpreadOuter1"
}), /*#__PURE__*/React.createElement("feOffset", {
dy: 1,
"in": "shadowSpreadOuter1",
result: "shadowOffsetOuter1"
}), /*#__PURE__*/React.createElement("feGaussianBlur", {
stdDeviation: 1.5,
"in": "shadowOffsetOuter1",
result: "shadowBlurOuter1"
}), /*#__PURE__*/React.createElement("feComposite", {
"in": "shadowBlurOuter1",
in2: "SourceAlpha",
operator: "out",
result: "shadowBlurOuter1"
}), /*#__PURE__*/React.createElement("feColorMatrix", {
values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0",
"in": "shadowBlurOuter1"
})), /*#__PURE__*/React.createElement("circle", {
id: "controls_svg__d",
cx: 32,
cy: 12,
r: 12
}), /*#__PURE__*/React.createElement("circle", {
id: "controls_svg__h",
cx: 70,
cy: 12,
r: 12
}), /*#__PURE__*/React.createElement("circle", {
id: "controls_svg__l",
cx: 108,
cy: 12,
r: 12
}), /*#__PURE__*/React.createElement("rect", {
id: "controls_svg__a",
x: 0,
y: 6,
width: 140,
height: 12,
rx: 6
}), /*#__PURE__*/React.createElement("rect", {
id: "controls_svg__e",
x: 0,
y: 6,
width: 140,
height: 12,
rx: 6
}), /*#__PURE__*/React.createElement("rect", {
id: "controls_svg__i",
x: 0,
y: 6,
width: 140,
height: 12,
rx: 6
})), /*#__PURE__*/React.createElement("g", {
fill: "none",
fillRule: "evenodd"
}, /*#__PURE__*/React.createElement("g", {
transform: "translate(0 12)"
}, /*#__PURE__*/React.createElement("mask", {
id: "controls_svg__b",
fill: "#fff"
}, /*#__PURE__*/React.createElement("use", {
xlinkHref: "#controls_svg__a"
})), /*#__PURE__*/React.createElement("use", {
fill: "#D7EEFE",
xlinkHref: "#controls_svg__a"
}), /*#__PURE__*/React.createElement("rect", {
fill: "#FC521F",
opacity: 0.8,
mask: "url(#controls_svg__b)",
x: -13,
y: 6,
width: 45,
height: 12,
rx: 6
}), /*#__PURE__*/React.createElement("use", {
fill: "#000",
filter: "url(#controls_svg__c)",
xlinkHref: "#controls_svg__d"
}), /*#__PURE__*/React.createElement("circle", {
strokeOpacity: 0.05,
stroke: "#000",
fill: "#FFF",
cx: 32,
cy: 12,
r: 12.5
})), /*#__PURE__*/React.createElement("g", {
transform: "translate(0 58)"
}, /*#__PURE__*/React.createElement("mask", {
id: "controls_svg__f",
fill: "#fff"
}, /*#__PURE__*/React.createElement("use", {
xlinkHref: "#controls_svg__e"
})), /*#__PURE__*/React.createElement("use", {
fill: "#D7EEFE",
xlinkHref: "#controls_svg__e"
}), /*#__PURE__*/React.createElement("rect", {
fill: "#FFAE00",
opacity: 0.8,
mask: "url(#controls_svg__f)",
x: -26.5,
y: 6,
width: 96,
height: 12,
rx: 6
}), /*#__PURE__*/React.createElement("use", {
fill: "#000",
filter: "url(#controls_svg__g)",
xlinkHref: "#controls_svg__h"
}), /*#__PURE__*/React.createElement("circle", {
strokeOpacity: 0.05,
stroke: "#000",
fill: "#FFF",
cx: 70,
cy: 12,
r: 12.5
})), /*#__PURE__*/React.createElement("g", {
transform: "translate(0 104)"
}, /*#__PURE__*/React.createElement("mask", {
id: "controls_svg__j",
fill: "#fff"
}, /*#__PURE__*/React.createElement("use", {
xlinkHref: "#controls_svg__i"
})), /*#__PURE__*/React.createElement("use", {
fill: "#D7EEFE",
xlinkHref: "#controls_svg__i"
}), /*#__PURE__*/React.createElement("rect", {
fill: "#66BF3C",
opacity: 0.8,
mask: "url(#controls_svg__j)",
x: -84,
y: 6,
width: 192,
height: 12,
rx: 6
}), /*#__PURE__*/React.createElement("use", {
fill: "#000",
filter: "url(#controls_svg__k)",
xlinkHref: "#controls_svg__l"
}), /*#__PURE__*/React.createElement("circle", {
strokeOpacity: 0.05,
stroke: "#000",
fill: "#FFF",
cx: 108,
cy: 12,
r: 12.5
}))));
};
var _default = SvgControls;
exports["default"] = _default;