cozy-ui 74.0.0 → 74.3.0

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+# [74.3.0](https://github.com/cozy/cozy-ui/compare/v74.2.0...v74.3.0) (2022-09-02)
+
+
+### Features
+
+* Add copy icon ([f6c9275](https://github.com/cozy/cozy-ui/commit/f6c9275))
+
+# [74.2.0](https://github.com/cozy/cozy-ui/compare/v74.1.0...v74.2.0) (2022-09-02)
+
+
+### Bug Fixes
+
+* **BottomSheet:** Adjust height when content changes ([1c0ad64](https://github.com/cozy/cozy-ui/commit/1c0ad64))
+* **BottomSheet:** Force modal zindex value for BottomSheet ([a22405d](https://github.com/cozy/cozy-ui/commit/a22405d))
+* **BottomSheet:** Remove container if no backdrop ([3830e52](https://github.com/cozy/cozy-ui/commit/3830e52))
+* **BottomSheet:** Remove fragment prop if no portal ([cc49949](https://github.com/cozy/cozy-ui/commit/cc49949))
+
+
+### Features
+
+* **BottomSheet:** Upgrade mui-bottom-sheet to 1.0.9 ([59484ae](https://github.com/cozy/cozy-ui/commit/59484ae))
+
+# [74.1.0](https://github.com/cozy/cozy-ui/compare/v74.0.0...v74.1.0) (2022-09-02)
+
+
+### Features
+
+* Add help-outlined and refresh icons ([b33458c](https://github.com/cozy/cozy-ui/commit/b33458c))
+
 # [74.0.0](https://github.com/cozy/cozy-ui/compare/v73.3.0...v74.0.0) (2022-09-01)
 
 

package/assets/icons/ui/copy.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 0a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2v2a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2V2a2 2 0 0 1 2-2h7Zm-4 6H3v8h7V6Zm4-4H7v2h3a2 2 0 0 1 2 2v4h2V2Z"/></svg>

package/assets/icons/ui/help-outlined.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M9 8.802C10.122 8.355 11 7.21 11 6c0-1.552-1.448-3-3-3S5 4.448 5 6h2c0-.448.552-1 1-1 .448 0 1 .552 1 1 0 .448-.552 1-1 1a1 1 0 0 0-1 1v2h2V8.802ZM7 11v2h2v-2H7ZM1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8ZM0 8a8 8 0 1 0 16 0A8 8 0 0 0 0 8Z"/></svg>

package/assets/icons/ui/refresh.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0C3.589 0 0 3.589 0 8s3.589 8 8 8a8.039 8.039 0 0 0 7.229-4.571 1 1 0 1 0-1.806-.858A6.031 6.031 0 0 1 8 14c-3.309 0-6-2.691-6-6s2.691-6 6-6c1.482 0 2.866.571 3.938 1.507a.989.989 0 0 0-.706.353 1 1 0 0 0 .128 1.408l3 2.5A1 1 0 0 0 16 7V3a1 1 0 0 0-1-1 .987.987 0 0 0-.96.801C12.548 1.08 10.364 0 8 0Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "74.0.0",
+  "version": "74.3.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -163,7 +163,7 @@
     "hammerjs": "^2.0.8",
     "intersection-observer": "0.11.0",
     "mime-types": "2.1.35",
-    "mui-bottom-sheet": "https://github.com/cozy/mui-bottom-sheet.git#v1.0.8",
+    "mui-bottom-sheet": "https://github.com/cozy/mui-bottom-sheet.git#v1.0.9",
     "node-polyglot": "^2.2.2",
     "normalize.css": "^8.0.0",
     "piwik-react-router": "0.12.1",

package/react/BottomSheet/BottomSheet.jsx

@@ -30,12 +30,25 @@ import {
 } from './helpers'
 import { ANIMATION_DURATION } from './constants'
 
-const createStyles = ({ squared, hasToolbarProps }) => ({
+const createContainerWrapperStyles = () => ({
   container: {
     position: 'fixed',
     zIndex: 'var(--zIndex-modal)',
     inset: 0
-  },
+  }
+})
+
+const ContainerWrapper = ({ showBackdrop, children }) => {
+  const styles = createContainerWrapperStyles()
+
+  if (showBackdrop) {
+    return <div style={styles.container}>{children}</div>
+  }
+
+  return children
+}
+
+const createStyles = ({ squared, hasToolbarProps }) => ({
   root: {
     borderTopLeftRadius: '1rem',
     borderTopRightRadius: '1rem',
@@ -43,6 +56,7 @@ const createStyles = ({ squared, hasToolbarProps }) => ({
     boxShadow:
       '0 -0.5px 0px 0 rgba(0, 0, 0, 0.10), 0 -2px 2px 0 rgba(0, 0, 0, 0.02), 0 -4px 4px 0 rgba(0, 0, 0, 0.02), 0 -8px 8px 0 rgba(0, 0, 0, 0.02), 0 -16px 16px 0 rgba(0, 0, 0, 0.02)',
     backgroundColor: 'var(--paperBackgroundColor)',
+    zIndex: 'var(--zIndex-modal)',
     ...(squared && {
       borderTopLeftRadius: 0,
       borderTopRightRadius: 0,
@@ -161,10 +175,10 @@ const BottomSheet = memo(
       ANIMATION_DURATION,
       isClosable && isBottomPosition
     )
-    const innerContentHeight = innerContentRef?.current?.offsetHeight ?? 0
 
     useEffect(() => {
       const headerContent = headerContentRef.current
+      const innerContentHeight = innerContentRef.current.offsetHeight
       const actionButtonsHeight = headerContent
         ? parseFloat(getComputedStyle(headerContent).getPropertyValue('height'))
         : 0
@@ -198,17 +212,18 @@ const BottomSheet = memo(
       // Used so that the BottomSheet can be opened to the top without stopping at the content height
       setBottomSpacerHeight(bottomSpacerHeight)
     }, [
-      innerContentHeight,
+      innerContentRef,
       toolbarProps,
       mediumHeightRatio,
       mediumHeight,
       showBackdrop,
       backdrop,
-      isClosable
+      isClosable,
+      children // to recompute data if content changes
     ])
 
     return (
-      <div style={styles.container}>
+      <ContainerWrapper showBackdrop={showBackdrop}>
         {getFlagshipMetadata().immersive && (
           <span style={styles.flagshipImmersive} />
         )}
@@ -269,7 +284,7 @@ const BottomSheet = memo(
             <div style={styles.bounceSafer} />
           </Fade>
         )}
-      </div>
+      </ContainerWrapper>
     )
   }
 )
@@ -306,12 +321,15 @@ BottomSheet.propTypes = {
 }
 
 const BottomSheetPortal = forwardRef(({ portalProps, ...props }, ref) => {
-  const CozyThemeWrapper = portalProps?.disablePortal ? Fragment : CozyTheme
   const cozyTheme = useCozyTheme()
+  const CozyThemeWrapper = portalProps?.disablePortal ? Fragment : CozyTheme
+  const wrapperProps = portalProps?.disablePortal
+    ? undefined
+    : { variant: cozyTheme }
 
   return (
     <Portal {...portalProps}>
-      <CozyThemeWrapper variant={cozyTheme}>
+      <CozyThemeWrapper {...wrapperProps}>
         <BottomSheet ref={ref} {...props} />
       </CozyThemeWrapper>
     </Portal>

package/react/BottomSheet/README.md

@@ -51,11 +51,14 @@ const initialVariants = [{
 }]
 const initialState = {
   isBottomSheetDisplayed: isTesting(),
+  isSecondBottomSheetDisplayed: false,
   mediumHeight: isTesting() ? 450 : undefined,
   mediumHeightRatio: undefined
 }
 const showBottomSheet = () => setState({ isBottomSheetDisplayed: true })
 const hideBottomSheet = () => setState({ isBottomSheetDisplayed: false })
+const showSecondBottomSheet = () => setState({ isSecondBottomSheetDisplayed: true })
+const hideSecondBottomSheet = () => setState({ isSecondBottomSheetDisplayed: false })
 
 const handleChangeMediumHeight = el => {
   setState({ mediumHeight: Number(el.target.value) })
@@ -112,8 +115,22 @@ const settings = state.mediumHeight === undefined && state.mediumHeightRatio ===
         >
           {variant.withHeader && (
             <BottomSheetHeader className="u-ph-1 u-pb-1">
-              <Button className="u-mr-half" variant="secondary" label="Button 1" fullWidth />
+              <Button
+                className="u-mr-half"
+                variant="secondary"
+                label="Open BottomSheet"
+                fullWidth
+                onClick={showSecondBottomSheet}
+              />
               <Button variant="secondary" label="Button 2" fullWidth />
+
+              {state.isSecondBottomSheetDisplayed && (
+                <BottomSheet backdrop onClose={hideSecondBottomSheet}>
+                  <BottomSheetItem>
+                    {content.ada.short}
+                  </BottomSheetItem>
+                </BottomSheet>
+              )}
             </BottomSheetHeader>
           )}
           {!variant.withListContent && (

package/react/Icon/Readme.md

@@ -74,6 +74,7 @@ import Compass from 'cozy-ui/transpiled/react/Icons/Compass'
 import Connector from 'cozy-ui/transpiled/react/Icons/Connector'
 import Contract from 'cozy-ui/transpiled/react/Icons/Contract'
 import Contrast from 'cozy-ui/transpiled/react/Icons/Contrast'
+import Copy from 'cozy-ui/transpiled/react/Icons/Copy'
 import CozyCircle from 'cozy-ui/transpiled/react/Icons/CozyCircle'
 import CozyLaugh from 'cozy-ui/transpiled/react/Icons/CozyLaugh'
 import CozyText from 'cozy-ui/transpiled/react/Icons/CozyText'
@@ -132,6 +133,7 @@ import Groups from 'cozy-ui/transpiled/react/Icons/Groups'
 import Hand from 'cozy-ui/transpiled/react/Icons/Hand'
 import Heart from 'cozy-ui/transpiled/react/Icons/Heart'
 import Help from 'cozy-ui/transpiled/react/Icons/Help'
+import HelpOutlined from 'cozy-ui/transpiled/react/Icons/HelpOutlined'
 import History from 'cozy-ui/transpiled/react/Icons/History'
 import Home from 'cozy-ui/transpiled/react/Icons/Home'
 import Hourglass from 'cozy-ui/transpiled/react/Icons/Hourglass'
@@ -190,6 +192,7 @@ import Printer from 'cozy-ui/transpiled/react/Icons/Printer'
 import Qualify from 'cozy-ui/transpiled/react/Icons/Qualify'
 import RadioChecked from 'cozy-ui/transpiled/react/Icons/RadioChecked'
 import RadioUnchecked from 'cozy-ui/transpiled/react/Icons/RadioUnchecked'
+import Refresh from 'cozy-ui/transpiled/react/Icons/Refresh'
 import Rename from 'cozy-ui/transpiled/react/Icons/Rename'
 import Repare from 'cozy-ui/transpiled/react/Icons/Repare'
 import Reply from 'cozy-ui/transpiled/react/Icons/Reply'
@@ -290,6 +293,7 @@ const icons = [
   Connector,
   Contract,
   Contrast,
+  Copy,
   CozyCircle,
   CozyLaugh,
   CozyText,
@@ -348,6 +352,7 @@ const icons = [
   Hand,
   Heart,
   Help,
+  HelpOutlined,
   History,
   Home,
   Hourglass,
@@ -406,6 +411,7 @@ const icons = [
   Qualify,
   RadioChecked,
   RadioUnchecked,
+  Refresh,
   Rename,
   Repare,
   Reply,
@@ -844,7 +850,7 @@ import Typography from 'cozy-ui/transpiled/react/Typography'
 
 const colors = ['#297EF2', '#08b442', '#B449E7', '#F52D2D', '#FF962F']
 let i = 0
-const availableIcons = ['album-add','album-remove','album','answer','apple','archive','attachment','attention','bank','banking-add','banking','bell','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','categories','certified','check-circle','check-list','check-square','check',  'checkbox','circle-filled','clock','cloud-happy','cloud','collect','comment','company','compass','connector','contract','contrast','cozy-circle','cozy-laugh','cozy-text','credit-card-add','credit-card','credit','crop','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','devices','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','email-notification','email','eu','euro','exchange','eye-closed','eye','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder','forbidden','from-user','gear','globe','graph-circle','grid','group-list','groups','hand','heart','help','history','home','hourglass','image','info-outlined','info','key','laptop','left','lightbulb','link-out','link','list','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','merge','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','offline','online', 'openapp', 'openwith','palette','paper','paperplane','password','pen','people','percent-circle','percent','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','plus-small','plus','previous','printer','qualify','radio-checked','radio-unchecked','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','select-all','setting','share-circle','share','shield','shop','sound','spinner','stack','star','stats','subway','sync-cozy','sync','tag','target','team','telephone','to-the-cloud','top','train','trash','trophy','unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','wrench-circle']
+const availableIcons = ['album-add','album-remove','album','answer','apple','archive','attachment','attention','bank','banking-add','banking','bell','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','categories','certified','check-circle','check-list','check-square','check',  'checkbox','circle-filled','clock','cloud-happy','cloud','collect','comment','company','compass','connector','contract','contrast','copy','cozy-circle','cozy-laugh','cozy-text','credit-card-add','credit-card','credit','crop','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','devices','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','email-notification','email','eu','euro','exchange','eye-closed','eye','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder','forbidden','from-user','gear','globe','graph-circle','grid','group-list','groups','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','key','laptop','left','lightbulb','link-out','link','list','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','merge','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','offline','online', 'openapp', 'openwith','palette','paper','paperplane','password','pen','people','percent-circle','percent','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','plus-small','plus','previous','printer','qualify','radio-checked','radio-unchecked','refresh','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','select-all','setting','share-circle','share','shield','shop','sound','spinner','stack','star','stats','subway','sync-cozy','sync','tag','target','team','telephone','to-the-cloud','top','train','trash','trophy','unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','wrench-circle']
 ;
 <div style={{ fontSize: '2rem', display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)' }}>
   <Sprite />

package/react/Icon/icons-sprite.js

@@ -205,7 +205,7 @@ module.exports = `<svg><defs>
     <path fill-rule="evenodd" d="M12.5 4h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1zm0 3h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1zm0 3h-9a.5.5 0 0 1 0-1h9a.5.5 0 0 1 0 1zm0 3h-9a.5.5 0 0 1 0-1h9a.5.5 0 0 1 0 1zM3 5V2h4v6L5 6 3 8V5zm11-5H2c-.55 0-1 .45-1 1v14c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1z"/>
 </symbol><symbol id="contrast" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M12.444 11.111H8v1.333h4.444v-1.333zM14 14H2L14 2v12zM2.222 4H4V2.222h1.333V4h1.778v1.333H5.333v1.778H4V5.333H2.222V4zm12-4H1.778C.79 0 0 .791 0 1.778v12.444C0 15.204.796 16 1.778 16h12.444c.982 0 1.778-.796 1.778-1.778V1.778C16 .79 15.2 0 14.222 0z"/>
-</symbol><symbol id="cozy-circle" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm2 0c0 5.523-4.477 10-10 10S0 15.523 0 10 4.477 0 10 0s10 4.477 10 10Zm-8.59 1.206c.134.086.33.046.417-.085a.28.28 0 0 0-.087-.396c-.116-.073-.125-.223-.125-.223a.296.296 0 0 0-.3-.282h-.006a.306.306 0 0 0-.21.087.283.283 0 0 0-.085.21.895.895 0 0 0 .029.183 1.682 1.682 0 0 1-2.087.004c.03-.11.03-.189.03-.191a.294.294 0 0 0-.291-.292.285.285 0 0 0-.213.076.289.289 0 0 0-.098.204s-.008.15-.126.225a.282.282 0 0 0-.085.396.315.315 0 0 0 .442.068l.007-.005c.392.295.874.455 1.375.455a2.29 2.29 0 0 0 1.379-.456l.033.022Zm.766-5.313c.521.502.845 1.153.932 1.856C14.726 7.892 16 9.236 16 10.869 16 12.594 14.574 14 12.822 14H7.177C5.425 14 4 12.595 4 10.868c0-.823.322-1.601.906-2.19a3.179 3.179 0 0 1 1.893-.92c.085-.707.41-1.36.933-1.865A3.18 3.18 0 0 1 9.954 5c.835 0 1.625.316 2.222.893Z"/></symbol><symbol id="cozy-laugh" viewBox="0 0 16 16">
+</symbol><symbol id="copy" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 0a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2v2a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2V2a2 2 0 0 1 2-2h7Zm-4 6H3v8h7V6Zm4-4H7v2h3a2 2 0 0 1 2 2v4h2V2Z"/></symbol><symbol id="cozy-circle" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm2 0c0 5.523-4.477 10-10 10S0 15.523 0 10 4.477 0 10 0s10 4.477 10 10Zm-8.59 1.206c.134.086.33.046.417-.085a.28.28 0 0 0-.087-.396c-.116-.073-.125-.223-.125-.223a.296.296 0 0 0-.3-.282h-.006a.306.306 0 0 0-.21.087.283.283 0 0 0-.085.21.895.895 0 0 0 .029.183 1.682 1.682 0 0 1-2.087.004c.03-.11.03-.189.03-.191a.294.294 0 0 0-.291-.292.285.285 0 0 0-.213.076.289.289 0 0 0-.098.204s-.008.15-.126.225a.282.282 0 0 0-.085.396.315.315 0 0 0 .442.068l.007-.005c.392.295.874.455 1.375.455a2.29 2.29 0 0 0 1.379-.456l.033.022Zm.766-5.313c.521.502.845 1.153.932 1.856C14.726 7.892 16 9.236 16 10.869 16 12.594 14.574 14 12.822 14H7.177C5.425 14 4 12.595 4 10.868c0-.823.322-1.601.906-2.19a3.179 3.179 0 0 1 1.893-.92c.085-.707.41-1.36.933-1.865A3.18 3.18 0 0 1 9.954 5c.835 0 1.625.316 2.222.893Z"/></symbol><symbol id="cozy-laugh" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M4 6a4 4 0 1 1 8 0 4 4 0 1 1 0 8H4a4 4 0 1 1 0-8zm1 3s0 2 3 2 3-2 3-2H5z"/>
 </symbol><symbol id="cozy-text" viewBox="0 0 52 19"><path d="M10.277 3.262c-.067.084-.143.16-.227.227a.516.516 0 01-.319.085.756.756 0 01-.436-.162 5.113 5.113 0 00-1.404-.702c-.325-.109-.725-.163-1.202-.163-.624 0-1.174.113-1.651.338-.47.219-.878.55-1.19.962-.316.416-.556.923-.721 1.521a7.592 7.592 0 00-.247 2.015c0 .771.087 1.458.26 2.06.173.603.42 1.11.741 1.521.32.412.71.724 1.17.937.46.212.97.318 1.534.318.546 0 .997-.067 1.352-.202.355-.134.65-.279.884-.435a5.93 5.93 0 00.585-.436c.156-.134.316-.201.481-.201.208 0 .368.078.481.234l.728.936a4.903 4.903 0 01-1.02.949 5.85 5.85 0 01-1.203.637c-.43.166-.877.288-1.332.364a8.488 8.488 0 01-1.411.117 5.846 5.846 0 01-2.308-.455 5.228 5.228 0 01-1.858-1.326c-.525-.58-.939-1.293-1.242-2.139C.419 9.417.267 8.458.267 7.383c0-.98.136-1.885.41-2.717a6.046 6.046 0 011.209-2.151 5.588 5.588 0 011.969-1.418C4.635.755 5.528.584 6.533.584c.945 0 1.777.152 2.496.455.72.303 1.36.732 1.924 1.287l-.676.936zM19.091.584c.97 0 1.848.158 2.633.474.76.3 1.444.767 2.001 1.366.55.593.973 1.308 1.268 2.145.295.836.442 1.774.442 2.814s-.147 1.98-.442 2.821c-.295.84-.717 1.556-1.267 2.145a5.527 5.527 0 01-2.002 1.358c-.785.317-1.662.475-2.633.475-.98 0-1.861-.158-2.645-.474a5.59 5.59 0 01-2.009-1.359c-.555-.59-.981-1.304-1.28-2.145-.3-.84-.449-1.781-.449-2.821 0-1.04.15-1.978.449-2.814a6.11 6.11 0 011.28-2.146 5.55 5.55 0 012.008-1.365c.785-.316 1.667-.474 2.646-.474zm0 11.622c1.248 0 2.18-.42 2.795-1.261.615-.84.923-2.024.923-3.549s-.308-2.71-.923-3.556c-.615-.845-1.547-1.267-2.795-1.267-1.265 0-2.208.422-2.828 1.267-.62.846-.929 2.03-.929 3.556 0 1.525.31 2.708.93 3.549.62.84 1.562 1.261 2.827 1.261zM37.46 1.858c0 .182-.032.36-.097.533-.066.173-.15.32-.254.442l-6.929 9.178h7.046V14H27.203v-1.066c0-.121.03-.266.091-.436.06-.169.147-.327.26-.474l6.968-9.243h-6.916V.792h9.854v1.066zM51.604.792l-7.332 17.043a1.07 1.07 0 01-.312.442c-.13.104-.32.156-.572.156h-1.885l2.418-5.265L38.5.792h2.21c.217 0 .386.052.507.156a.906.906 0 01.26.351l3.354 7.93c.07.2.136.4.201.605.064.199.118.4.163.604.12-.413.26-.821.416-1.222l3.237-7.917a.84.84 0 01.286-.364.73.73 0 01.442-.143h2.028z" fill-rule="nonzero"/></symbol><symbol id="credit-card-add" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M2 11.003l3-.001c0 .702.127 1.372.35 1.998H1.996A2.003 2.003 0 0 1 0 11.003V1.997C0 .898.9 0 1.997 0h12.006C15.101 0 16 .898 16 1.997v5.689a6.031 6.031 0 0 0-1.999-1.876V6H1.998L2 11.003zM1.997 2v1H14V2H1.997zM11 8h2v3h3v2h-3v3h-2v-3H8v-2h3V8z"/>
@@ -345,7 +345,7 @@ module.exports = `<svg><defs>
      <path d="M14.992 8V5a1.001 1.001 0 0 0-2 0v3h-1V2a1.001 1.001 0 0 0-2 0v5h-1V1a1.001 1.001 0 0 0-2 0v6h-1V2c0-.551-.45-1-1-1-.551 0-1 .449-1 1v6.5a.5.5 0 0 1-.88.325L1.1 6.125c-.222-.182-.64-.166-.897.091a.7.7 0 0 0-.075.898c.064.117 1.542 4.144 3.227 6.798A4.486 4.486 0 0 0 7.156 16h3.336c2.48 0 4.5-2.019 4.5-4.5V8Z"/>
  </symbol><symbol id="heart" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M1.467 8.096a4.023 4.023 0 0 1-.699-.738L.724 7.31l.007-.006a4 4 0 1 1 7.21-2.994 6.685 6.685 0 0 1 .118 0 4.001 4.001 0 1 1 7.21 2.995l.005.005-.036.038a4.023 4.023 0 0 1-.713.753L8 15 1.467 8.096z"/>
-</symbol><symbol id="help" viewBox="0 0 16 16">
+</symbol><symbol id="help-outlined" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M9 8.802C10.122 8.355 11 7.21 11 6c0-1.552-1.448-3-3-3S5 4.448 5 6h2c0-.448.552-1 1-1 .448 0 1 .552 1 1 0 .448-.552 1-1 1a1 1 0 0 0-1 1v2h2V8.802ZM7 11v2h2v-2H7ZM1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8ZM0 8a8 8 0 1 0 16 0A8 8 0 0 0 0 8Z"/></symbol><symbol id="help" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm1-7.198C10.122 8.355 11 7.21 11 6c0-1.552-1.448-3-3-3S5 4.448 5 6h2c0-.448.552-1 1-1 .448 0 1 .552 1 1 0 .448-.552 1-1 1a1 1 0 0 0-1 1v2h2V8.802zM7 11v2h2v-2H7z"/>
 </symbol><symbol id="history" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M8 0c4.411 0 8 3.589 8 8s-3.589 8-8 8a8.039 8.039 0 0 1-7.229-4.571 1 1 0 1 1 1.806-.858A6.031 6.031 0 0 0 8 14c3.309 0 6-2.691 6-6s-2.691-6-6-6c-1.482 0-2.866.571-3.938 1.507a.989.989 0 0 1 .706.353 1 1 0 0 1-.128 1.408l-3 2.5A1 1 0 0 1 0 7V3a1 1 0 0 1 1-1c.481 0 .865.348.96.801C3.452 1.08 5.636 0 8 0zm0 4a1 1 0 0 1 1 1v2.586l1.707 1.707a.999.999 0 1 1-1.414 1.414l-2-1.999A1.025 1.025 0 0 1 7 8V5a1 1 0 0 1 1-1z"/>
@@ -471,7 +471,7 @@ module.exports = `<svg><defs>
   <path fill-rule="evenodd" d="M8 16A8 8 0 108 0a8 8 0 000 16zm0-6a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
 </symbol><symbol id="radio-unchecked" viewBox="0 0 16 16">
   <path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zm0 14A6 6 0 108 2a6 6 0 000 12z" clip-rule="evenodd"/>
-</symbol><symbol id="rename" viewBox="0 0 16 16">
+</symbol><symbol id="refresh" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0C3.589 0 0 3.589 0 8s3.589 8 8 8a8.039 8.039 0 0 0 7.229-4.571 1 1 0 1 0-1.806-.858A6.031 6.031 0 0 1 8 14c-3.309 0-6-2.691-6-6s2.691-6 6-6c1.482 0 2.866.571 3.938 1.507a.989.989 0 0 0-.706.353 1 1 0 0 0 .128 1.408l3 2.5A1 1 0 0 0 16 7V3a1 1 0 0 0-1-1 .987.987 0 0 0-.96.801C12.548 1.08 10.364 0 8 0Z"/></symbol><symbol id="rename" viewBox="0 0 16 16">
   <path fill-rule="evenodd" d="M201.5,99.5 L192,109.025391 L192,112 L195.03772,112 L204.5,102.5 L201.5,99.5 Z M206.912154,96.9121541 C206.132243,96.1322429 204.869144,96.1308556 204.089264,96.9107361 L203,98 L206.030762,101 L207.092271,99.9252663 C207.869738,99.1381134 207.863777,97.8637772 207.087846,97.0878459 L206.912154,96.9121541 Z M199,110 L204.997071,110 C205.550973,110 206,110.443865 206,111 C206,111.552285 205.553689,112 205.002455,112 L197,112 L199,110 Z" transform="translate(-192 -96)"/>
 </symbol><symbol id="repare" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M15.493 2.49L13 5h-2V3L13.556.501c-1.722-.88-3.914-.601-5.356.84a4.587 4.587 0 0 0-.854 5.327l-6.93 6.926a1.408 1.408 0 1 0 1.989 1.993l6.922-6.924a4.582 4.582 0 0 0 6.166-6.173z"/>

package/react/Icons/Copy.jsx

@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/copy.svg` to regenerate;
+import React from 'react'
+
+function SvgCopy(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14 0a2 2 0 012 2v8a2 2 0 01-2 2h-2v2a2 2 0 01-2 2H3a2 2 0 01-2-2V6a2 2 0 012-2h2V2a2 2 0 012-2h7zm-4 6H3v8h7V6zm4-4H7v2h3a2 2 0 012 2v4h2V2z"
+      />
+    </svg>
+  )
+}
+
+export default SvgCopy

package/react/Icons/HelpOutlined.jsx

@@ -0,0 +1,15 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/help-outlined.svg` to regenerate;
+import React from 'react'
+
+function SvgHelpOutlined(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path
+        fillRule="evenodd"
+        d="M9 8.802C10.122 8.355 11 7.21 11 6c0-1.552-1.448-3-3-3S5 4.448 5 6h2c0-.448.552-1 1-1 .448 0 1 .552 1 1 0 .448-.552 1-1 1a1 1 0 00-1 1v2h2V8.802zM7 11v2h2v-2H7zM1 8a7 7 0 1014 0A7 7 0 001 8zM0 8a8 8 0 1016 0A8 8 0 000 8z"
+      />
+    </svg>
+  )
+}
+
+export default SvgHelpOutlined

package/react/Icons/Refresh.jsx

@@ -0,0 +1,15 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/refresh.svg` to regenerate;
+import React from 'react'
+
+function SvgRefresh(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path
+        fillRule="evenodd"
+        d="M8 0C3.589 0 0 3.589 0 8s3.589 8 8 8a8.039 8.039 0 007.229-4.571 1 1 0 10-1.806-.858A6.031 6.031 0 018 14c-3.309 0-6-2.691-6-6s2.691-6 6-6c1.482 0 2.866.571 3.938 1.507a.989.989 0 00-.706.353 1 1 0 00.128 1.408l3 2.5A1 1 0 0016 7V3a1 1 0 00-1-1 .987.987 0 00-.96.801C12.548 1.08 10.364 0 8 0z"
+      />
+    </svg>
+  )
+}
+
+export default SvgRefresh