@commonsku/styles 1.17.8 → 1.17.9

package/dist/index.cjs

@@ -2810,6 +2810,45 @@ function SlideInIcon(_a) {
         React__default.default.createElement("path", { d: "M3 20.99L21 20.99C22.1 20.99 23 20.09 23 18.99L23 15L21 15L21 19.01L3 19.01L3 4.97999L21 4.97999L21 8.99999L23 8.99999L23 4.98999C23 3.88999 22.1 3.00999 21 3.00999L3 3.00999C1.9 3.00999 1 3.88999 1 4.98999L1 18.99C1 20.1 1.9 20.99 3 20.99ZM13 7.99999L9 12L13 16L13 13L23 13L23 11L13 11L13 7.99999ZM3 20.99L21 20.99C22.1 20.99 23 20.09 23 18.99L23 15L21 15L21 19.01L3 19.01L3 4.97999L21 4.97999L21 8.99999L23 8.99999L23 4.98999C23 3.88999 22.1 3.00999 21 3.00999L3 3.00999C1.9 3.00999 1 3.88999 1 4.98999L1 18.99C1 20.1 1.9 20.99 3 20.99ZM13 7.99999L9 12L13 16L13 13L23 13L23 11L13 11L13 7.99999Z", fill: color }));
 }
 
+function EmptyStateArrowIcon(_a) {
+    var _b = _a.direction, direction = _b === void 0 ? "Up" : _b; _a.altText; var props = __rest(_a, ["direction", "altText"]);
+    var d1, d2, x1, x2, y1, y2;
+    var arrowColor = teal['30'];
+    switch (direction) {
+        case "down":
+            d1 = "m9.239 20.009 2.704.784c.037.011.077.011.114 0l2.704-.784c.164-.048.304.114.207.24l-2.818 3.68a.196.196 0 0 1-.3 0l-2.818-3.68c-.097-.125.043-.288.207-.24Z";
+            d2 = "M5.15 0c5.411 2.2 6.084 16.033 6.084 21h1.57c0-5.275 0-18.5 6.246-21H5.15Z";
+            x1 = 12.636;
+            x2 = 12.636;
+            y1 = 19.98;
+            y2 = 0;
+            break;
+        case "up":
+            d1 = "m14.761 3.991-2.704-.784a.205.205 0 0 0-.114 0L9.24 3.99c-.164.048-.304-.115-.207-.24L11.85.07a.196.196 0 0 1 .3 0l2.818 3.68c.097.126-.043.288-.207.24Z";
+            d2 = "M18.85 24c-5.411-2.2-6.084-16.033-6.084-21h-1.57c0 5.276 0 18.5-6.246 21h13.9Z";
+            x1 = 11.364;
+            x2 = 11.364;
+            y1 = 4.02;
+            y2 = 24;
+            break;
+        case "up-right":
+            d1 = "m22.406 2.203-1.173-.394a.145.145 0 0 0-.092 0l-1.173.394c-.134.044-.247-.108-.169-.227l1.266-1.91a.146.146 0 0 1 .244 0l1.265 1.91c.079.119-.035.271-.168.227Z";
+            d2 = "M6.389 23.515C16.608 15.176 21.225 7.772 21.657 1.721l-.877-.064c.357 2.992-8.819 10.581-19.247 15.372l4.856 6.486Z";
+            x1 = 21.05;
+            x2 = 14.656;
+            y1 = 2.11;
+            y2 = 12.611;
+            break;
+    }
+    return React__default.default.createElement(SVG$1, __assign({ height: 500, width: 500, viewBox: "0 0 633 633", "aria-labelledby": "Arrow" }, props),
+        React__default.default.createElement("path", { fill: arrowColor, d: d1 }),
+        React__default.default.createElement("path", { fill: "url(#a)", d: d2 }),
+        React__default.default.createElement("defs", null,
+            React__default.default.createElement("linearGradient", { id: "a", x1: x1, x2: x2, y1: y1, y2: y2, gradientUnits: "userSpaceOnUse" },
+                React__default.default.createElement("stop", { stopColor: arrowColor }),
+                React__default.default.createElement("stop", { offset: 1, stopColor: arrowColor, stopOpacity: 0 }))));
+}
+
 function TagIcon(_a) {
     var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c; _a.altText; var props = __rest(_a, ["color", "size", "altText"]);
     return React__default.default.createElement(SVG$1, __assign({ size: size, "aria-labelledby": "TagIcon" }, props),
@@ -3653,7 +3692,7 @@ var LabeledIconInput = React__default.default.forwardRef(function (_a, ref) {
             }, style: __assign(__assign(__assign(__assign({}, activeStyles), errorStyles), disabledStyles), (props.style || {})), onMouseOver: function () { return setIsHovering(true); }, onMouseLeave: function () { return setIsHovering(false); } }),
             iconPosition !== 'right' ? React__default.default.createElement(InputIconLabel, { style: __assign({ marginBottom: 0 }, iconLabelStyles), isActive: isActive, isDisabled: disabled, isHover: isHovering }, NewIcon) : null,
             React__default.default.createElement(Input, { hasIcon: true, ref: ref, name: name, value: value, defaultValue: defaultValue, placeholder: placeholder, readOnly: readOnly, required: required, style: { marginBottom: 0, }, noMargin: noMargin, error: error, disabled: disabled, onFocus: onFocus, onChange: onChange, onBlur: onBlur }),
-            iconPosition === 'right' ? React__default.default.createElement(InputIconLabel, { style: { marginBottom: 0, padding: 6, }, isActive: isActive, isDisabled: disabled, isHover: isHovering, iconPosition: iconPosition }, NewIcon) : null)));
+            iconPosition === 'right' ? React__default.default.createElement(InputIconLabel, { style: __assign({ marginBottom: 0, padding: 6 }, iconLabelStyles), isActive: isActive, isDisabled: disabled, isHover: isHovering, iconPosition: iconPosition }, NewIcon) : null)));
 });
 var CheckboxLabel = styled__default.default.label(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n  &&& {\n    display: inline-flex;\n    position: relative;\n    margin-bottom: 12px;\n    margin-right: 24px;\n    cursor: ", ";\n    font-size: ", ";\n    color: ", ";\n    font-family: ", ";\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    font-weight: normal;\n    line-height: ", ";\n    box-sizing: border-box;\n    opacity: ", ";\n    &:focus {\n      outline: 0;\n    }\n  }\n"], ["\n  &&& {\n    display: inline-flex;\n    position: relative;\n    margin-bottom: 12px;\n    margin-right: 24px;\n    cursor: ", ";\n    font-size: ", ";\n    color: ", ";\n    font-family: ", ";\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    font-weight: normal;\n    line-height: ", ";\n    box-sizing: border-box;\n    opacity: ", ";\n    &:focus {\n      outline: 0;\n    }\n  }\n"])), function (props) { return props.disabled ? 'default' : 'pointer'; }, fontStyles.label.fontSize, neutrals.darkest, fontStyles.label.fontFamily, fontStyles.label.lineHeight, function (props) { return props.disabled ? 0.7 : 1; });
 var RadioLabel = styled__default.default(CheckboxLabel)(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n  &&& {\n    padding-left: 32px;\n  }\n"], ["\n  &&& {\n    padding-left: 32px;\n  }\n"])));
@@ -7973,6 +8012,7 @@ exports.DropzonedPreviews = DropzonedPreviews;
 exports.EPOIcon = EPOIcon;
 exports.EditIcon = EditIcon;
 exports.EllipsisIcon = EllipsisIcon;
+exports.EmptyStateArrow = EmptyStateArrowIcon;
 exports.EpsIcon = EpsIcon;
 exports.ErrorBoundary = ErrorBoundary;
 exports.EstimateCircleIcon = EstimateCircleIcon;