@common-origin/design-system 3.2.0 → 3.3.0

package/dist/client.js

@@ -814,7 +814,10 @@ var IconStyled = /*#__PURE__*/styled__default.default.span.withConfig({
   },
   displayName: "Icon__IconStyled",
   componentId: "sc-1105czq-0"
-})(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"])), function (_a) {
+})(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"
+// How each paint draws, in currentColor. Lines are 2px on the 24px grid, so they scale with the
+// icon (decision 0058).
+])), function (_a) {
   var $size = _a.$size;
   return tokens.semantic.size.icon[$size];
 }, function (_a) {
@@ -847,6 +850,25 @@ var IconStyled = /*#__PURE__*/styled__default.default.span.withConfig({
       return tokens.semantic.color.icon["default"];
   }
 });
+// How each paint draws, in currentColor. Lines are 2px on the 24px grid, so they scale with the
+// icon (decision 0058).
+var LINE = {
+  stroke: 'currentColor',
+  strokeWidth: 2,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round'
+};
+var PAINT = {
+  stroke: __assign({
+    fill: 'none'
+  }, LINE),
+  fill: {
+    fill: 'currentColor'
+  },
+  both: __assign({
+    fill: 'currentColor'
+  }, LINE)
+};
 var Icon = function Icon(_a) {
   var name = _a.name,
     _b = _a.size,
@@ -858,10 +880,9 @@ var Icon = function Icon(_a) {
     dataTestId = _a["data-testid"];
   // Decorative unless it's given a name. A blank name is no name, so the icon stays hidden
   var label = (ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.trim()) || (title === null || title === void 0 ? void 0 : title.trim()) || undefined;
-  // Get the icon data from the JSON file
-  var iconData = data.iconsJson[name];
-  if (!iconData) {
-    console.warn("Icon \"".concat(name, "\" not found in icons.json"));
+  var icon = data.iconSet[name];
+  if (!icon) {
+    console.warn("Icon \"".concat(name, "\" not found in iconSet"));
     return jsxRuntime.jsx(IconStyled, {
       "$size": size,
       "$iconColor": iconColor,
@@ -874,9 +895,8 @@ var Icon = function Icon(_a) {
     "data-testid": dataTestId,
     children: jsxRuntime.jsxs("svg", __assign({
       viewBox: "0 0 24 24",
-      fill: "currentColor",
       xmlns: "http://www.w3.org/2000/svg"
-    }, label ? {
+    }, PAINT[icon.paint], label ? {
       role: 'img',
       'aria-label': label
     } : {
@@ -885,8 +905,12 @@ var Icon = function Icon(_a) {
     }, {
       children: [(title === null || title === void 0 ? void 0 : title.trim()) && jsxRuntime.jsx("title", {
         children: title
-      }), jsxRuntime.jsx("path", {
-        d: iconData.path
+      }), icon.elements.map(function (_a, index) {
+        var tag = _a[0],
+          attributes = _a[1];
+        return /*#__PURE__*/React__default.default.createElement(tag, __assign({
+          key: index
+        }, attributes));
       })]
     }))
   });
@@ -2272,7 +2296,7 @@ var Stack = function Stack(_a) {
 var templateObject_1$E;
 
 // Shape indicators for the six coloured statuses (decision 0045): filled silhouettes on the
-// 24px grid, each the same outline as its status icon. Internal: they aren't public icons, so a
+// 24px grid. Each status icon draws its outline along the same path as a 2px line (decision 0058). Internal: they aren't public icons, so a
 // bare shape can't be shown without its label. The shape indicator (#264) and the small
 // StatusLabel and InlineAlert sizes render them at 12px or more, with a darker edge.
 var statusShapes = {