@semcore/icon 4.63.0-prerelease.0 → 4.63.0-prerelease.4

package/lib/cjs/Icon.js

@@ -1,83 +1,92 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 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 _core = require("@semcore/core");
-var _indentStyles = require("@semcore/core/lib/utils/indentStyles");
-var _propsForElement = _interopRequireDefault(require("@semcore/core/lib/utils/propsForElement"));
-var _useColorResolver = require("@semcore/core/lib/utils/use/useColorResolver");
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _index = require("@semcore/utils/lib/core/index");
 var _react = _interopRequireDefault(require("react"));
-var _excluded = ["width", "height", "viewBox", "color", "scaleIndent", "m", "mt", "mb", "my", "ml", "mr", "mx"];
+var _classnames = _interopRequireDefault(require("classnames"));
+var _core = require("@semcore/core");
+var _flexBox = require("@semcore/flex-box");
+var _keyboardFocusEnhance2 = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
+var _propsForElement = _interopRequireDefault(require("@semcore/utils/lib/propsForElement"));
+var _logger = _interopRequireDefault(require("@semcore/utils/lib/logger"));
+var _ref = require("@semcore/utils/lib/ref");
+var _hasLabels = _interopRequireDefault(require("@semcore/utils/lib/hasLabels"));
+var _useColorResolver = require("@semcore/utils/lib/use/useColorResolver");
+var _excluded = ["keyboardFocused"];
 /*!__reshadow-styles__:"./style/icon.shadow.css"*/
-var styles = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SIcon_wpxlh_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:0;color:var(--color_wpxlh)}", /*__inner_css_end__*/"wpxlh_gg_"),
+var styles = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SIcon_1bds3_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:0;color:var(--color_1bds3)}.___SIcon_1bds3_gg_.__keyboardFocused_1bds3_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469))}@supports (color:color(display-p3 0 0 0)){.___SIcon_1bds3_gg_.__keyboardFocused_1bds3_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469))}@media (color-gamut:p3){.___SIcon_1bds3_gg_.__keyboardFocused_1bds3_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}.___SIcon_1bds3_gg_.__interactive_1bds3_gg_{cursor:pointer}@media (hover:hover){.___SIcon_1bds3_gg_.__interactive_1bds3_gg_:hover{filter:brightness(.8)}}", /*__inner_css_end__*/"1bds3_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SIcon": "___SIcon_wpxlh_gg_",
-  "--color": "--color_wpxlh"
+  "__SIcon": "___SIcon_1bds3_gg_",
+  "--color": "--color_1bds3",
+  "_keyboardFocused": "__keyboardFocused_1bds3_gg_",
+  "_interactive": "__interactive_1bds3_gg_"
 });
-function calculateIndentStyles(props, scaleIndent) {
-  return (0, _indentStyles.removeUndefinedKeys)({
-    margin: (0, _indentStyles.getAutoOrScaleIndent)(props['m'], scaleIndent),
-    marginTop: (0, _indentStyles.getAutoOrScaleIndent)(props['mt'], scaleIndent) || (0, _indentStyles.getAutoOrScaleIndent)(props['my'], scaleIndent),
-    marginBottom: (0, _indentStyles.getAutoOrScaleIndent)(props['mb'], scaleIndent) || (0, _indentStyles.getAutoOrScaleIndent)(props['my'], scaleIndent),
-    marginLeft: (0, _indentStyles.getAutoOrScaleIndent)(props['ml'], scaleIndent) || (0, _indentStyles.getAutoOrScaleIndent)(props['mx'], scaleIndent),
-    marginRight: (0, _indentStyles.getAutoOrScaleIndent)(props['mr'], scaleIndent) || (0, _indentStyles.getAutoOrScaleIndent)(props['mx'], scaleIndent)
-  });
-}
-function Icon(_ref, ref) {
-  var _props$className;
-  var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 16 : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? 16 : _ref$height,
-    _ref$viewBox = _ref.viewBox,
-    viewBox = _ref$viewBox === void 0 ? '0 0 16 16' : _ref$viewBox,
-    colorProps = _ref.color,
-    _ref$scaleIndent = _ref.scaleIndent,
-    scaleIndent = _ref$scaleIndent === void 0 ? 4 : _ref$scaleIndent,
-    m = _ref.m,
-    mt = _ref.mt,
-    mb = _ref.mb,
-    my = _ref.my,
-    ml = _ref.ml,
-    mr = _ref.mr,
-    mx = _ref.mx,
-    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var SIcon = 'svg';
+function Icon(props, ref) {
+  var _useBox = (0, _flexBox.useBox)((0, _objectSpread2["default"])({
+      tag: 'svg',
+      'data-ui-name': 'Icon',
+      width: 16,
+      height: 16,
+      viewBox: '0 0 16 16',
+      focusable: props.interactive
+    }, props), ref),
+    _useBox2 = (0, _slicedToArray2["default"])(_useBox, 2),
+    SIcon = _useBox2[0],
+    other = _useBox2[1];
+  var interactive = props.interactive,
+    colorProps = props.color;
   var resolveColor = (0, _useColorResolver.useColorResolver)();
   var color = resolveColor(colorProps);
+  var _keyboardFocusEnhance = (0, _keyboardFocusEnhance2["default"])()((0, _objectSpread2["default"])({
+      disabled: !interactive
+    }, other)),
+    keyboardFocused = _keyboardFocusEnhance.keyboardFocused,
+    propsEnhance = (0, _objectWithoutProperties2["default"])(_keyboardFocusEnhance, _excluded);
   var sstyles = (0, _core.sstyled)(styles);
   var _sstyles$cn = sstyles.cn('SIcon', {
-      'use:color': color
+      'use:color': color,
+      interactive: interactive,
+      keyboardFocused: keyboardFocused
     }),
     className = _sstyles$cn.className,
     style = _sstyles$cn.style;
-  var indentStyles = _react["default"].useMemo(function () {
-    return calculateIndentStyles({
-      m: m,
-      mt: mt,
-      mb: mb,
-      my: my,
-      ml: ml,
-      mr: mr,
-      mx: mx
-    }, scaleIndent);
-  }, [scaleIndent, m, mt, mb, my, ml, mr, mx]);
+  function onKeyDown(event) {
+    if (propsEnhance.onKeyDown) {
+      return propsEnhance.onKeyDown(event);
+    }
+    if (interactive && propsEnhance.onClick && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      propsEnhance.onClick(event);
+    }
+  }
+  var labelCheckRef = _react["default"].useRef();
+  _react["default"].useEffect(function () {
+    if (!interactive) return;
+    if (process.env.NODE_ENV !== 'production') {
+      _logger["default"].warn(labelCheckRef.current && !(0, _hasLabels["default"])(labelCheckRef.current), "'aria-label' or 'aria-labelledby' are required props for interactive icons", props['data-ui-name'] || Icon.displayName);
+    }
+  }, [interactive]);
+  var forkedRef = (0, _ref.useForkRef)(ref, labelCheckRef);
   return /*#__PURE__*/_react["default"].createElement(SIcon, (0, _extends2["default"])({
-    width: width,
-    height: height,
-    viewBox: viewBox,
-    "aria-hidden": "true"
-  }, (0, _propsForElement["default"])(props), {
-    style: Object.assign({}, style, props.style, indentStyles),
-    className: "".concat(className, " ").concat((_props$className = props.className) !== null && _props$className !== void 0 ? _props$className : ''),
-    ref: ref
+    role: interactive ? 'button' : undefined,
+    "aria-hidden": interactive ? undefined : 'true'
+  }, (0, _propsForElement["default"])(propsEnhance), {
+    style: Object.assign({}, style, propsEnhance.style),
+    className: (0, _classnames["default"])(className, propsEnhance.className) || undefined,
+    onKeyDown: onKeyDown,
+    ref: forkedRef
   }));
 }
-var _default = exports["default"] = (0, _core.createBaseComponent)(Icon);
+Icon.displayName = 'Icon';
+var _default = (0, _core.createBaseComponent)(Icon);
+exports["default"] = _default;
 //# sourceMappingURL=Icon.js.map

package/lib/cjs/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["_core","require","_indentStyles","_propsForElement","_interopRequireDefault","_useColorResolver","_react","_excluded","styles","sstyled","insert","calculateIndentStyles","props","scaleIndent","removeUndefinedKeys","margin","getAutoOrScaleIndent","marginTop","marginBottom","marginLeft","marginRight","Icon","_ref","ref","_props$className","_ref$width","width","_ref$height","height","_ref$viewBox","viewBox","colorProps","color","_ref$scaleIndent","m","mt","mb","my","ml","mr","mx","_objectWithoutProperties2","SIcon","resolveColor","useColorResolver","sstyles","_sstyles$cn","cn","className","style","indentStyles","React","useMemo","createElement","_extends2","propsForElement","Object","assign","concat","_default","exports","createBaseComponent"],"sources":["../../src/Icon.tsx"],"sourcesContent":["import { createBaseComponent, sstyled } from '@semcore/core';\nimport { removeUndefinedKeys, getAutoOrScaleIndent } from '@semcore/core/lib/utils/indentStyles';\nimport propsForElement from '@semcore/core/lib/utils/propsForElement';\nimport { useColorResolver } from '@semcore/core/lib/utils/use/useColorResolver';\nimport React from 'react';\n\nimport styles from './style/icon.shadow.css';\n\nexport type IconProps = {\n  /**\n   * Icon width\n   * @internal\n   */\n  width?: string | number;\n  /**\n   * Icon height\n   * @internal\n   */\n  height?: string | number;\n  /**\n   * SVG viewBox attribute\n   * @internal\n   */\n  viewBox?: string;\n  /** Icon color */\n  color?: string;\n\n  /** CSS `margin` property */\n  m?: number | string;\n\n  /** CSS `margin-top` property */\n  mt?: number | string;\n\n  /** CSS `margin-right` property */\n  mr?: number | string;\n\n  /** CSS `margin-bottom` property */\n  mb?: number | string;\n\n  /** CSS `margin-left` property */\n  ml?: number | string;\n\n  /** CSS `margin-left` and `margin-right` property */\n  mx?: number | string;\n\n  /** CSS `margin-top` and `margin-bottom` property */\n  my?: number | string;\n\n  /**\n   * Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).\n   * @default 4\n   */\n  scaleIndent?: number;\n};\n\nfunction calculateIndentStyles(props: IconProps, scaleIndent: number) {\n  return removeUndefinedKeys({\n    margin: getAutoOrScaleIndent(props['m'], scaleIndent),\n    marginTop:\n      getAutoOrScaleIndent(props['mt'], scaleIndent) ||\n      getAutoOrScaleIndent(props['my'], scaleIndent),\n    marginBottom:\n      getAutoOrScaleIndent(props['mb'], scaleIndent) ||\n      getAutoOrScaleIndent(props['my'], scaleIndent),\n    marginLeft:\n      getAutoOrScaleIndent(props['ml'], scaleIndent) ||\n      getAutoOrScaleIndent(props['mx'], scaleIndent),\n    marginRight:\n      getAutoOrScaleIndent(props['mr'], scaleIndent) ||\n      getAutoOrScaleIndent(props['mx'], scaleIndent),\n  });\n}\n\nfunction Icon({\n  width = 16,\n  height = 16,\n  viewBox = '0 0 16 16',\n  color: colorProps,\n  scaleIndent = 4,\n  m,\n  mt,\n  mb,\n  my,\n  ml,\n  mr,\n  mx,\n  ...props\n}: React.SVGProps<SVGSVGElement> & IconProps, ref: React.ForwardedRef<SVGSVGElement>) {\n  const SIcon = 'svg';\n\n  const resolveColor = useColorResolver();\n  const color = resolveColor(colorProps);\n\n  const sstyles = sstyled(styles);\n  const { className, style } = sstyles.cn('SIcon', {\n    'use:color': color,\n  });\n\n  const indentStyles: React.CSSProperties = React.useMemo(() => {\n    return calculateIndentStyles({ m, mt, mb, my, ml, mr, mx }, scaleIndent);\n  }, [\n    scaleIndent,\n    m,\n    mt,\n    mb,\n    my,\n    ml,\n    mr,\n    mx,\n  ]);\n\n  return (\n    <SIcon\n      width={width}\n      height={height}\n      viewBox={viewBox}\n      aria-hidden='true'\n      {...propsForElement(props)}\n      style={Object.assign({}, style, props.style, indentStyles)}\n      className={`${className} ${props.className ?? ''}`}\n      ref={ref}\n    />\n  );\n}\n\nexport default createBaseComponent<'svg', IconProps>(Icon);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Icon.js","names":["_react","_interopRequireDefault","require","_classnames","_core","_flexBox","_keyboardFocusEnhance2","_propsForElement","_logger","_ref","_hasLabels","_useColorResolver","_excluded","styles","_index","sstyled","insert","Icon","props","ref","_useBox","useBox","_objectSpread2","tag","width","height","viewBox","focusable","interactive","_useBox2","_slicedToArray2","SIcon","other","colorProps","color","resolveColor","useColorResolver","_keyboardFocusEnhance","keyboardFocusEnhance","disabled","keyboardFocused","propsEnhance","_objectWithoutProperties2","sstyles","_sstyles$cn","cn","className","style","onKeyDown","event","onClick","key","preventDefault","labelCheckRef","React","useRef","useEffect","process","env","NODE_ENV","logger","warn","current","hasLabels","displayName","forkedRef","useForkRef","createElement","_extends2","role","undefined","propsForElement","Object","assign","_default","createBaseComponent","exports"],"sources":["../../src/Icon.jsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { createBaseComponent, sstyled } from '@semcore/core';\nimport { useBox } from '@semcore/flex-box';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport propsForElement from '@semcore/utils/lib/propsForElement';\nimport logger from '@semcore/utils/lib/logger';\nimport { useForkRef } from '@semcore/utils/lib/ref';\nimport hasLabels from '@semcore/utils/lib/hasLabels';\nimport { useColorResolver } from '@semcore/utils/lib/use/useColorResolver';\n\nimport styles from './style/icon.shadow.css';\n\nfunction Icon(props, ref) {\n  const [SIcon, other] = useBox(\n    {\n      tag: 'svg',\n      'data-ui-name': 'Icon',\n      width: 16,\n      height: 16,\n      viewBox: '0 0 16 16',\n      focusable: props.interactive,\n      ...props,\n    },\n    ref,\n  );\n\n  const { interactive, color: colorProps } = props;\n  const resolveColor = useColorResolver();\n  const color = resolveColor(colorProps);\n  const { keyboardFocused, ...propsEnhance } = keyboardFocusEnhance()({\n    disabled: !interactive,\n    ...other,\n  });\n  const sstyles = sstyled(styles);\n  const { className, style } = sstyles.cn('SIcon', {\n    'use:color': color,\n    interactive: interactive,\n    keyboardFocused: keyboardFocused,\n  });\n\n  function onKeyDown(event) {\n    if (propsEnhance.onKeyDown) {\n      return propsEnhance.onKeyDown(event);\n    }\n\n    if (interactive && propsEnhance.onClick && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      propsEnhance.onClick(event);\n    }\n  }\n\n  const labelCheckRef = React.useRef();\n  React.useEffect(() => {\n    if (!interactive) return;\n    if (process.env.NODE_ENV !== 'production') {\n      logger.warn(\n        labelCheckRef.current && !hasLabels(labelCheckRef.current),\n        `'aria-label' or 'aria-labelledby' are required props for interactive icons`,\n        props['data-ui-name'] || Icon.displayName,\n      );\n    }\n  }, [interactive]);\n  const forkedRef = useForkRef(ref, labelCheckRef);\n\n  return (\n    <SIcon\n      role={interactive ? 'button' : undefined}\n      aria-hidden={interactive ? undefined : 'true'}\n      {...propsForElement(propsEnhance)}\n      style={Object.assign({}, style, propsEnhance.style)}\n      className={cn(className, propsEnhance.className) || undefined}\n      onKeyDown={onKeyDown}\n      ref={forkedRef}\n    />\n  );\n}\n\nIcon.displayName = 'Icon';\n\nexport default createBaseComponent(Icon);\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,sBAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,gBAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,OAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,IAAA,GAAAP,OAAA;AACA,IAAAQ,UAAA,GAAAT,sBAAA,CAAAC,OAAA;AACA,IAAAS,iBAAA,GAAAT,OAAA;AAA2E,IAAAU,SAAA;AAAA;AAAA,IAAAC,MAAA,+BAAAC,MAAA,CAAAC,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAI3E,SAASC,IAAIA,CAACC,KAAK,EAAEC,GAAG,EAAE;EACxB,IAAAC,OAAA,GAAuB,IAAAC,eAAM,MAAAC,cAAA;MAEzBC,GAAG,EAAE,KAAK;MACV,cAAc,EAAE,MAAM;MACtBC,KAAK,EAAE,EAAE;MACTC,MAAM,EAAE,EAAE;MACVC,OAAO,EAAE,WAAW;MACpBC,SAAS,EAAET,KAAK,CAACU;IAAW,GACzBV,KAAK,GAEVC,GAAG,CACJ;IAAAU,QAAA,OAAAC,eAAA,aAAAV,OAAA;IAXMW,KAAK,GAAAF,QAAA;IAAEG,KAAK,GAAAH,QAAA;EAanB,IAAQD,WAAW,GAAwBV,KAAK,CAAxCU,WAAW;IAASK,UAAU,GAAKf,KAAK,CAA3BgB,KAAK;EAC1B,IAAMC,YAAY,GAAG,IAAAC,kCAAgB,GAAE;EACvC,IAAMF,KAAK,GAAGC,YAAY,CAACF,UAAU,CAAC;EACtC,IAAAI,qBAAA,GAA6C,IAAAC,iCAAoB,GAAE,KAAAhB,cAAA;MACjEiB,QAAQ,EAAE,CAACX;IAAW,GACnBI,KAAK,EACR;IAHMQ,eAAe,GAAAH,qBAAA,CAAfG,eAAe;IAAKC,YAAY,OAAAC,yBAAA,aAAAL,qBAAA,EAAAzB,SAAA;EAIxC,IAAM+B,OAAO,GAAG,IAAA5B,aAAO,EAACF,MAAM,CAAC;EAC/B,IAAA+B,WAAA,GAA6BD,OAAO,CAACE,EAAE,CAAC,OAAO,EAAE;MAC/C,WAAW,EAAEX,KAAK;MAClBN,WAAW,EAAEA,WAAW;MACxBY,eAAe,EAAEA;IACnB,CAAC,CAAC;IAJMM,SAAS,GAAAF,WAAA,CAATE,SAAS;IAAEC,KAAK,GAAAH,WAAA,CAALG,KAAK;EAMxB,SAASC,SAASA,CAACC,KAAK,EAAE;IACxB,IAAIR,YAAY,CAACO,SAAS,EAAE;MAC1B,OAAOP,YAAY,CAACO,SAAS,CAACC,KAAK,CAAC;IACtC;IAEA,IAAIrB,WAAW,IAAIa,YAAY,CAACS,OAAO,KAAKD,KAAK,CAACE,GAAG,KAAK,OAAO,IAAIF,KAAK,CAACE,GAAG,KAAK,GAAG,CAAC,EAAE;MACvFF,KAAK,CAACG,cAAc,EAAE;MACtBX,YAAY,CAACS,OAAO,CAACD,KAAK,CAAC;IAC7B;EACF;EAEA,IAAMI,aAAa,GAAGC,iBAAK,CAACC,MAAM,EAAE;EACpCD,iBAAK,CAACE,SAAS,CAAC,YAAM;IACpB,IAAI,CAAC5B,WAAW,EAAE;IAClB,IAAI6B,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;MACzCC,kBAAM,CAACC,IAAI,CACTR,aAAa,CAACS,OAAO,IAAI,CAAC,IAAAC,qBAAS,EAACV,aAAa,CAACS,OAAO,CAAC,gFAE1D5C,KAAK,CAAC,cAAc,CAAC,IAAID,IAAI,CAAC+C,WAAW,CAC1C;IACH;EACF,CAAC,EAAE,CAACpC,WAAW,CAAC,CAAC;EACjB,IAAMqC,SAAS,GAAG,IAAAC,eAAU,EAAC/C,GAAG,EAAEkC,aAAa,CAAC;EAEhD,oBACErD,MAAA,YAAAmE,aAAA,CAACpC,KAAK,MAAAqC,SAAA;IACJC,IAAI,EAAEzC,WAAW,GAAG,QAAQ,GAAG0C,SAAU;IACzC,eAAa1C,WAAW,GAAG0C,SAAS,GAAG;EAAO,GAC1C,IAAAC,2BAAe,EAAC9B,YAAY,CAAC;IACjCM,KAAK,EAAEyB,MAAM,CAACC,MAAM,CAAC,CAAC,CAAC,EAAE1B,KAAK,EAAEN,YAAY,CAACM,KAAK,CAAE;IACpDD,SAAS,EAAE,IAAAD,sBAAE,EAACC,SAAS,EAAEL,YAAY,CAACK,SAAS,CAAC,IAAIwB,SAAU;IAC9DtB,SAAS,EAAEA,SAAU;IACrB7B,GAAG,EAAE8C;EAAU,GACf;AAEN;AAEAhD,IAAI,CAAC+C,WAAW,GAAG,MAAM;AAAC,IAAAU,QAAA,GAEX,IAAAC,yBAAmB,EAAC1D,IAAI,CAAC;AAAA2D,OAAA,cAAAF,QAAA"}

package/lib/cjs/index.d.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=index.d.js.map

package/lib/cjs/index.d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { BoxProps } from '@semcore/flex-box';\nimport { Intergalactic, UnknownProperties } from '@semcore/core';\nimport { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\n/** @deprecated */\nexport interface IIconProps extends IconProps, UnknownProperties {}\nexport type IconProps = BoxProps &\n  KeyboardFocusProps & {\n    width?: string | number;\n    height?: string | number;\n    viewBox?: string;\n    /** Make an icon interactive */\n    interactive?: boolean;\n    /** Icon color */\n    color?: string;\n  };\n\ndeclare const Icon: Intergalactic.Component<'svg', IconProps>;\n\nexport default Icon;\n"],"mappings":""}

package/lib/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_Icon","_interopRequireDefault","require"],"sources":["../../src/index.ts"],"sourcesContent":["import type { IconProps } from './Icon';\n\nexport { default } from './Icon';\n\nexport type {\n  IconProps,\n};\n"],"mappings":";;;;;;;;;;;;AAEA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_Icon","_interopRequireDefault","require"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './Icon';\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA"}

package/lib/cjs/style/icon.shadow.css

@@ -8,3 +8,15 @@ SIcon {
   outline: none;
   color: var(--color);
 }
+
+SIcon[keyboardFocused] {
+  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.424 0.269 264.2 / 0.469));
+}
+
+SIcon[interactive] {
+  cursor: pointer;
+
+  &:hover {
+    filter: brightness(0.8);
+  }
+}

package/lib/es6/Icon.js

@@ -1,77 +1,84 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import { sstyled as _sstyled } from "@semcore/core";
-var _excluded = ["width", "height", "viewBox", "color", "scaleIndent", "m", "mt", "mb", "my", "ml", "mr", "mx"];
-import { createBaseComponent, sstyled } from '@semcore/core';
-import { removeUndefinedKeys, getAutoOrScaleIndent } from '@semcore/core/lib/utils/indentStyles';
-import propsForElement from '@semcore/core/lib/utils/propsForElement';
-import { useColorResolver } from '@semcore/core/lib/utils/use/useColorResolver';
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { sstyled as _sstyled } from "@semcore/utils/lib/core/index";
+var _excluded = ["keyboardFocused"];
 import React from 'react';
+import cn from 'classnames';
+import { createBaseComponent, sstyled } from '@semcore/core';
+import { useBox } from '@semcore/flex-box';
+import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
+import propsForElement from '@semcore/utils/lib/propsForElement';
+import logger from '@semcore/utils/lib/logger';
+import { useForkRef } from '@semcore/utils/lib/ref';
+import hasLabels from '@semcore/utils/lib/hasLabels';
+import { useColorResolver } from '@semcore/utils/lib/use/useColorResolver';
 /*!__reshadow-styles__:"./style/icon.shadow.css"*/
-var styles = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SIcon_wpxlh_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:0;color:var(--color_wpxlh)}", /*__inner_css_end__*/"wpxlh_gg_"),
+var styles = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SIcon_1bds3_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:0;color:var(--color_1bds3)}.___SIcon_1bds3_gg_.__keyboardFocused_1bds3_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469))}@supports (color:color(display-p3 0 0 0)){.___SIcon_1bds3_gg_.__keyboardFocused_1bds3_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469))}@media (color-gamut:p3){.___SIcon_1bds3_gg_.__keyboardFocused_1bds3_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}.___SIcon_1bds3_gg_.__interactive_1bds3_gg_{cursor:pointer}@media (hover:hover){.___SIcon_1bds3_gg_.__interactive_1bds3_gg_:hover{filter:brightness(.8)}}", /*__inner_css_end__*/"1bds3_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SIcon": "___SIcon_wpxlh_gg_",
-  "--color": "--color_wpxlh"
+  "__SIcon": "___SIcon_1bds3_gg_",
+  "--color": "--color_1bds3",
+  "_keyboardFocused": "__keyboardFocused_1bds3_gg_",
+  "_interactive": "__interactive_1bds3_gg_"
 });
-function calculateIndentStyles(props, scaleIndent) {
-  return removeUndefinedKeys({
-    margin: getAutoOrScaleIndent(props['m'], scaleIndent),
-    marginTop: getAutoOrScaleIndent(props['mt'], scaleIndent) || getAutoOrScaleIndent(props['my'], scaleIndent),
-    marginBottom: getAutoOrScaleIndent(props['mb'], scaleIndent) || getAutoOrScaleIndent(props['my'], scaleIndent),
-    marginLeft: getAutoOrScaleIndent(props['ml'], scaleIndent) || getAutoOrScaleIndent(props['mx'], scaleIndent),
-    marginRight: getAutoOrScaleIndent(props['mr'], scaleIndent) || getAutoOrScaleIndent(props['mx'], scaleIndent)
-  });
-}
-function Icon(_ref, ref) {
-  var _props$className;
-  var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 16 : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? 16 : _ref$height,
-    _ref$viewBox = _ref.viewBox,
-    viewBox = _ref$viewBox === void 0 ? '0 0 16 16' : _ref$viewBox,
-    colorProps = _ref.color,
-    _ref$scaleIndent = _ref.scaleIndent,
-    scaleIndent = _ref$scaleIndent === void 0 ? 4 : _ref$scaleIndent,
-    m = _ref.m,
-    mt = _ref.mt,
-    mb = _ref.mb,
-    my = _ref.my,
-    ml = _ref.ml,
-    mr = _ref.mr,
-    mx = _ref.mx,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var SIcon = 'svg';
+function Icon(props, ref) {
+  var _useBox = useBox(_objectSpread({
+      tag: 'svg',
+      'data-ui-name': 'Icon',
+      width: 16,
+      height: 16,
+      viewBox: '0 0 16 16',
+      focusable: props.interactive
+    }, props), ref),
+    _useBox2 = _slicedToArray(_useBox, 2),
+    SIcon = _useBox2[0],
+    other = _useBox2[1];
+  var interactive = props.interactive,
+    colorProps = props.color;
   var resolveColor = useColorResolver();
   var color = resolveColor(colorProps);
+  var _keyboardFocusEnhance = keyboardFocusEnhance()(_objectSpread({
+      disabled: !interactive
+    }, other)),
+    keyboardFocused = _keyboardFocusEnhance.keyboardFocused,
+    propsEnhance = _objectWithoutProperties(_keyboardFocusEnhance, _excluded);
   var sstyles = sstyled(styles);
   var _sstyles$cn = sstyles.cn('SIcon', {
-      'use:color': color
+      'use:color': color,
+      interactive: interactive,
+      keyboardFocused: keyboardFocused
     }),
     className = _sstyles$cn.className,
     style = _sstyles$cn.style;
-  var indentStyles = React.useMemo(function () {
-    return calculateIndentStyles({
-      m: m,
-      mt: mt,
-      mb: mb,
-      my: my,
-      ml: ml,
-      mr: mr,
-      mx: mx
-    }, scaleIndent);
-  }, [scaleIndent, m, mt, mb, my, ml, mr, mx]);
+  function onKeyDown(event) {
+    if (propsEnhance.onKeyDown) {
+      return propsEnhance.onKeyDown(event);
+    }
+    if (interactive && propsEnhance.onClick && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      propsEnhance.onClick(event);
+    }
+  }
+  var labelCheckRef = React.useRef();
+  React.useEffect(function () {
+    if (!interactive) return;
+    if (process.env.NODE_ENV !== 'production') {
+      logger.warn(labelCheckRef.current && !hasLabels(labelCheckRef.current), "'aria-label' or 'aria-labelledby' are required props for interactive icons", props['data-ui-name'] || Icon.displayName);
+    }
+  }, [interactive]);
+  var forkedRef = useForkRef(ref, labelCheckRef);
   return /*#__PURE__*/React.createElement(SIcon, _extends({
-    width: width,
-    height: height,
-    viewBox: viewBox,
-    "aria-hidden": "true"
-  }, propsForElement(props), {
-    style: Object.assign({}, style, props.style, indentStyles),
-    className: "".concat(className, " ").concat((_props$className = props.className) !== null && _props$className !== void 0 ? _props$className : ''),
-    ref: ref
+    role: interactive ? 'button' : undefined,
+    "aria-hidden": interactive ? undefined : 'true'
+  }, propsForElement(propsEnhance), {
+    style: Object.assign({}, style, propsEnhance.style),
+    className: cn(className, propsEnhance.className) || undefined,
+    onKeyDown: onKeyDown,
+    ref: forkedRef
   }));
 }
+Icon.displayName = 'Icon';
 export default createBaseComponent(Icon);
 //# sourceMappingURL=Icon.js.map

package/lib/es6/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["createBaseComponent","sstyled","removeUndefinedKeys","getAutoOrScaleIndent","propsForElement","useColorResolver","React","styles","_sstyled","insert","calculateIndentStyles","props","scaleIndent","margin","marginTop","marginBottom","marginLeft","marginRight","Icon","_ref","ref","_props$className","_ref$width","width","_ref$height","height","_ref$viewBox","viewBox","colorProps","color","_ref$scaleIndent","m","mt","mb","my","ml","mr","mx","_objectWithoutProperties","_excluded","SIcon","resolveColor","sstyles","_sstyles$cn","cn","className","style","indentStyles","useMemo","createElement","_extends","Object","assign","concat"],"sources":["../../src/Icon.tsx"],"sourcesContent":["import { createBaseComponent, sstyled } from '@semcore/core';\nimport { removeUndefinedKeys, getAutoOrScaleIndent } from '@semcore/core/lib/utils/indentStyles';\nimport propsForElement from '@semcore/core/lib/utils/propsForElement';\nimport { useColorResolver } from '@semcore/core/lib/utils/use/useColorResolver';\nimport React from 'react';\n\nimport styles from './style/icon.shadow.css';\n\nexport type IconProps = {\n  /**\n   * Icon width\n   * @internal\n   */\n  width?: string | number;\n  /**\n   * Icon height\n   * @internal\n   */\n  height?: string | number;\n  /**\n   * SVG viewBox attribute\n   * @internal\n   */\n  viewBox?: string;\n  /** Icon color */\n  color?: string;\n\n  /** CSS `margin` property */\n  m?: number | string;\n\n  /** CSS `margin-top` property */\n  mt?: number | string;\n\n  /** CSS `margin-right` property */\n  mr?: number | string;\n\n  /** CSS `margin-bottom` property */\n  mb?: number | string;\n\n  /** CSS `margin-left` property */\n  ml?: number | string;\n\n  /** CSS `margin-left` and `margin-right` property */\n  mx?: number | string;\n\n  /** CSS `margin-top` and `margin-bottom` property */\n  my?: number | string;\n\n  /**\n   * Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).\n   * @default 4\n   */\n  scaleIndent?: number;\n};\n\nfunction calculateIndentStyles(props: IconProps, scaleIndent: number) {\n  return removeUndefinedKeys({\n    margin: getAutoOrScaleIndent(props['m'], scaleIndent),\n    marginTop:\n      getAutoOrScaleIndent(props['mt'], scaleIndent) ||\n      getAutoOrScaleIndent(props['my'], scaleIndent),\n    marginBottom:\n      getAutoOrScaleIndent(props['mb'], scaleIndent) ||\n      getAutoOrScaleIndent(props['my'], scaleIndent),\n    marginLeft:\n      getAutoOrScaleIndent(props['ml'], scaleIndent) ||\n      getAutoOrScaleIndent(props['mx'], scaleIndent),\n    marginRight:\n      getAutoOrScaleIndent(props['mr'], scaleIndent) ||\n      getAutoOrScaleIndent(props['mx'], scaleIndent),\n  });\n}\n\nfunction Icon({\n  width = 16,\n  height = 16,\n  viewBox = '0 0 16 16',\n  color: colorProps,\n  scaleIndent = 4,\n  m,\n  mt,\n  mb,\n  my,\n  ml,\n  mr,\n  mx,\n  ...props\n}: React.SVGProps<SVGSVGElement> & IconProps, ref: React.ForwardedRef<SVGSVGElement>) {\n  const SIcon = 'svg';\n\n  const resolveColor = useColorResolver();\n  const color = resolveColor(colorProps);\n\n  const sstyles = sstyled(styles);\n  const { className, style } = sstyles.cn('SIcon', {\n    'use:color': color,\n  });\n\n  const indentStyles: React.CSSProperties = React.useMemo(() => {\n    return calculateIndentStyles({ m, mt, mb, my, ml, mr, mx }, scaleIndent);\n  }, [\n    scaleIndent,\n    m,\n    mt,\n    mb,\n    my,\n    ml,\n    mr,\n    mx,\n  ]);\n\n  return (\n    <SIcon\n      width={width}\n      height={height}\n      viewBox={viewBox}\n      aria-hidden='true'\n      {...propsForElement(props)}\n      style={Object.assign({}, style, props.style, indentStyles)}\n      className={`${className} ${props.className ?? ''}`}\n      ref={ref}\n    />\n  );\n}\n\nexport default createBaseComponent<'svg', IconProps>(Icon);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Icon.js","names":["React","cn","createBaseComponent","sstyled","useBox","keyboardFocusEnhance","propsForElement","logger","useForkRef","hasLabels","useColorResolver","styles","_sstyled","insert","Icon","props","ref","_useBox","_objectSpread","tag","width","height","viewBox","focusable","interactive","_useBox2","_slicedToArray","SIcon","other","colorProps","color","resolveColor","_keyboardFocusEnhance","disabled","keyboardFocused","propsEnhance","_objectWithoutProperties","_excluded","sstyles","_sstyles$cn","className","style","onKeyDown","event","onClick","key","preventDefault","labelCheckRef","useRef","useEffect","process","env","NODE_ENV","warn","current","displayName","forkedRef","createElement","_extends","role","undefined","Object","assign"],"sources":["../../src/Icon.jsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { createBaseComponent, sstyled } from '@semcore/core';\nimport { useBox } from '@semcore/flex-box';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport propsForElement from '@semcore/utils/lib/propsForElement';\nimport logger from '@semcore/utils/lib/logger';\nimport { useForkRef } from '@semcore/utils/lib/ref';\nimport hasLabels from '@semcore/utils/lib/hasLabels';\nimport { useColorResolver } from '@semcore/utils/lib/use/useColorResolver';\n\nimport styles from './style/icon.shadow.css';\n\nfunction Icon(props, ref) {\n  const [SIcon, other] = useBox(\n    {\n      tag: 'svg',\n      'data-ui-name': 'Icon',\n      width: 16,\n      height: 16,\n      viewBox: '0 0 16 16',\n      focusable: props.interactive,\n      ...props,\n    },\n    ref,\n  );\n\n  const { interactive, color: colorProps } = props;\n  const resolveColor = useColorResolver();\n  const color = resolveColor(colorProps);\n  const { keyboardFocused, ...propsEnhance } = keyboardFocusEnhance()({\n    disabled: !interactive,\n    ...other,\n  });\n  const sstyles = sstyled(styles);\n  const { className, style } = sstyles.cn('SIcon', {\n    'use:color': color,\n    interactive: interactive,\n    keyboardFocused: keyboardFocused,\n  });\n\n  function onKeyDown(event) {\n    if (propsEnhance.onKeyDown) {\n      return propsEnhance.onKeyDown(event);\n    }\n\n    if (interactive && propsEnhance.onClick && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      propsEnhance.onClick(event);\n    }\n  }\n\n  const labelCheckRef = React.useRef();\n  React.useEffect(() => {\n    if (!interactive) return;\n    if (process.env.NODE_ENV !== 'production') {\n      logger.warn(\n        labelCheckRef.current && !hasLabels(labelCheckRef.current),\n        `'aria-label' or 'aria-labelledby' are required props for interactive icons`,\n        props['data-ui-name'] || Icon.displayName,\n      );\n    }\n  }, [interactive]);\n  const forkedRef = useForkRef(ref, labelCheckRef);\n\n  return (\n    <SIcon\n      role={interactive ? 'button' : undefined}\n      aria-hidden={interactive ? undefined : 'true'}\n      {...propsForElement(propsEnhance)}\n      style={Object.assign({}, style, propsEnhance.style)}\n      className={cn(className, propsEnhance.className) || undefined}\n      onKeyDown={onKeyDown}\n      ref={forkedRef}\n    />\n  );\n}\n\nIcon.displayName = 'Icon';\n\nexport default createBaseComponent(Icon);\n"],"mappings":"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"}

package/lib/es6/index.d.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.js.map

package/lib/es6/index.d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { BoxProps } from '@semcore/flex-box';\nimport { Intergalactic, UnknownProperties } from '@semcore/core';\nimport { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\n/** @deprecated */\nexport interface IIconProps extends IconProps, UnknownProperties {}\nexport type IconProps = BoxProps &\n  KeyboardFocusProps & {\n    width?: string | number;\n    height?: string | number;\n    viewBox?: string;\n    /** Make an icon interactive */\n    interactive?: boolean;\n    /** Icon color */\n    color?: string;\n  };\n\ndeclare const Icon: Intergalactic.Component<'svg', IconProps>;\n\nexport default Icon;\n"],"mappings":""}

package/lib/es6/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.ts"],"sourcesContent":["import type { IconProps } from './Icon';\n\nexport { default } from './Icon';\n\nexport type {\n  IconProps,\n};\n"],"mappings":"AAEA,SAASA,OAAO,QAAQ,QAAQ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './Icon';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,QAAQ"}

package/lib/es6/style/icon.shadow.css

@@ -8,3 +8,15 @@ SIcon {
   outline: none;
   color: var(--color);
 }
+
+SIcon[keyboardFocused] {
+  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.424 0.269 264.2 / 0.469));
+}
+
+SIcon[interactive] {
+  cursor: pointer;
+
+  &:hover {
+    filter: brightness(0.8);
+  }
+}