intergalactic 15.106.0-prerelease.0 → 15.107.0-prerelease.0

package/color-picker/lib/cjs/PaletteManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaletteManager.js","names":["_react","_interopRequireDefault","require","_core","_divider","_intergalacticDynamicLocales","_i18nEnhance","style","_index","sstyled","insert","PaletteManagerRoot","_Component","_inherits2","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","React","createRef","focus","value","event","stopPropagation","handlers","colors","filter","color","includes","_this$refInput$curren","refInput","current","onFocus","setState","_createClass2","key","uncontrolledProps","get","props","undefined","asProps","_colors","getColorsProps","editable","onPlusButtonClick","bindHandlerButtonClick","getI18nText","getItemProps","_ref2","push","onRemove","bindHandlerItemRemove","getInputColorProps","ref","onAdd","bindHandlerItemAdd","state","onBlur","render","_ref","_this$asProps","styles","Children","PaletteManager","CORE_INSTANCE","createElement","Fragment","cn","origin","Colors","InputColor","Component","i18nEnhance","localizedMessages","defaultColors","i18n","locale","_default","exports"],"sources":["../../src/PaletteManager.tsx"],"sourcesContent":["import React from 'react';\nimport { Component, sstyled, CORE_INSTANCE } from '@semcore/core';\nimport Divider from '@semcore/divider';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\n\nimport style from './style/color-picker.shadow.css';\n\ntype RootAsProps = {\n  defaultColors?: string[];\n  colors?: string[];\n  onColorsChange?: (value: string, event: React.ChangeEvent) => void;\n  styles?: React.CSSProperties;\n  Children: React.FC;\n  getI18nText: (messageId: string, values?: { [key: string]: string | number }) => string;\n};\n\ntype State = { focus: boolean };\n\nclass PaletteManagerRoot extends Component<RootAsProps, State> {\n  static displayName = 'PaletteManager';\n\n  static style = style;\n  static enhance = [i18nEnhance(localizedMessages)];\n\n  static defaultProps = {\n    defaultColors: [],\n    i18n: localizedMessages,\n    locale: 'en',\n  };\n\n  _colors: string[] = [];\n  refInput = React.createRef<HTMLInputElement>();\n\n  state: State = {\n    focus: false,\n  };\n\n  uncontrolledProps() {\n    return {\n      colors: [],\n    };\n  }\n\n  get colors(): string[] {\n    return this.props.colors !== undefined ? this.asProps.colors! : this._colors;\n  }\n\n  bindHandlerItemRemove = (value: string) => (event: React.MouseEvent) => {\n    event.stopPropagation();\n    this.handlers.colors(\n      this.colors.filter((color: string) => color !== value),\n      event,\n    );\n  };\n\n  bindHandlerItemAdd = () => (value: string, event: React.MouseEvent) => {\n    if (!this.colors.includes(value)) {\n      this.handlers.colors(this.colors.concat(value), event);\n    }\n  };\n\n  bindHandlerButtonClick = () => () => {\n    this.refInput.current?.focus();\n    this.onFocus();\n  };\n\n  getColorsProps() {\n    const { colors } = this.asProps;\n\n    return {\n      colors,\n      editable: true,\n      onPlusButtonClick: this.bindHandlerButtonClick(),\n      getI18nText: this.asProps.getI18nText,\n    };\n  }\n\n  getItemProps({ value }: any) {\n    this._colors.push(value);\n\n    return {\n      editable: true,\n      onRemove: this.bindHandlerItemRemove(value),\n      getI18nText: this.asProps.getI18nText,\n    };\n  }\n\n  onFocus = () => this.setState({ focus: true });\n\n  onBlur = () => this.setState({ focus: false });\n\n  getInputColorProps() {\n    return {\n      ref: this.refInput,\n      onAdd: this.bindHandlerItemAdd(),\n      focus: this.state.focus,\n      onFocus: this.onFocus,\n      onBlur: this.onBlur,\n      getI18nText: this.asProps.getI18nText,\n    };\n  }\n\n  render(this: any) {\n    const { styles, Children } = this.asProps;\n\n    this._colors = [];\n\n    const PaletteManager = this[CORE_INSTANCE];\n\n    return sstyled(styles)(\n      <>\n        <Divider mt={3} mb={3} />\n        {Children.origin ? (\n          <Children />\n        ) : (\n          <>\n            <PaletteManager.Colors />\n            <PaletteManager.InputColor />\n          </>\n        )}\n      </>,\n    );\n  }\n}\n\nexport default PaletteManagerRoot;\n"],"mappings":"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"}
+{"version":3,"file":"PaletteManager.js","names":["_react","_interopRequireDefault","require","_core","_divider","_intergalacticDynamicLocales","_i18nEnhance","_uniqueID","style","_index","sstyled","insert","enhance","getI18nText","i18nEnhance","localizedMessages","uid","uniqueIdEnhance","PaletteManagerRoot","_Component","_inherits2","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","React","createRef","focus","value","event","stopPropagation","_this$asProps$colors","asProps","colors","handlers","filter","color","_this$asProps$colors2","includes","_this$refInput$curren","refInput","current","onFocus","setState","_createClass2","key","uncontrolledProps","getColorsProps","editable","onPlusButtonClick","bindHandlerButtonClick","getItemProps","_ref2","onRemove","bindHandlerItemRemove","getInputColorProps","ref","onAdd","bindHandlerItemAdd","state","onBlur","render","_ref","_this$asProps","styles","Children","PaletteManager","CORE_INSTANCE","createElement","Fragment","cn","origin","Colors","InputColor","Component","Object","values","defaultColors","i18n","locale","_default","exports"],"sources":["../../src/PaletteManager.tsx"],"sourcesContent":["import React from 'react';\nimport { Component, sstyled, CORE_INSTANCE } from '@semcore/core';\nimport Divider from '@semcore/divider';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\n\nimport style from './style/color-picker.shadow.css';\nimport uniqueIdEnhance from '@semcore/utils/lib/uniqueID';\n\ntype RootAsProps = {\n  defaultColors?: string[];\n  colors?: string[];\n  onColorsChange?: (value: string, event: React.ChangeEvent) => void;\n  styles?: React.CSSProperties;\n  Children: React.FC;\n  getI18nText: (messageId: string, values?: { [key: string]: string | number }) => string;\n};\n\ntype State = { focus: boolean };\n\nconst enhance = {\n  getI18nText: i18nEnhance(localizedMessages),\n  uid: uniqueIdEnhance(),\n};\n\nclass PaletteManagerRoot extends Component<RootAsProps, {}, State, typeof enhance> {\n  static displayName = 'PaletteManager';\n\n  static style = style;\n  static enhance = Object.values(enhance);\n\n  static defaultProps = {\n    defaultColors: [],\n    i18n: localizedMessages,\n    locale: 'en',\n  };\n\n  refInput = React.createRef<HTMLInputElement>();\n\n  state: State = {\n    focus: false,\n  };\n\n  uncontrolledProps() {\n    return {\n      colors: [],\n    };\n  }\n\n  bindHandlerItemRemove = (value: string) => (event: React.MouseEvent) => {\n    event.stopPropagation();\n    const { colors = [] } = this.asProps;\n    this.handlers.colors(\n      colors.filter((color: string) => color !== value),\n      event,\n    );\n  };\n\n  bindHandlerItemAdd = () => (value: string, event: React.MouseEvent) => {\n    const { colors = [] } = this.asProps;\n    if (!colors.includes(value)) {\n      this.handlers.colors(colors.concat(value), event);\n    }\n  };\n\n  bindHandlerButtonClick = () => () => {\n    this.refInput.current?.focus();\n    this.onFocus();\n  };\n\n  getColorsProps() {\n    const { colors } = this.asProps;\n\n    return {\n      colors,\n      editable: true,\n      onPlusButtonClick: this.bindHandlerButtonClick(),\n      getI18nText: this.asProps.getI18nText,\n    };\n  }\n\n  getItemProps({ value }: any) {\n    const { uid } = this.asProps;\n\n    return {\n      uid,\n      editable: true,\n      onRemove: this.bindHandlerItemRemove(value),\n      getI18nText: this.asProps.getI18nText,\n    };\n  }\n\n  onFocus = () => this.setState({ focus: true });\n\n  onBlur = () => this.setState({ focus: false });\n\n  getInputColorProps() {\n    return {\n      ref: this.refInput,\n      onAdd: this.bindHandlerItemAdd(),\n      focus: this.state.focus,\n      onFocus: this.onFocus,\n      onBlur: this.onBlur,\n      getI18nText: this.asProps.getI18nText,\n    };\n  }\n\n  render(this: any) {\n    const { styles, Children } = this.asProps;\n\n    const PaletteManager = this[CORE_INSTANCE];\n\n    return sstyled(styles)(\n      <>\n        <Divider mt={3} mb={3} />\n        {Children.origin ? (\n          <Children />\n        ) : (\n          <>\n            <PaletteManager.Colors />\n            <PaletteManager.InputColor />\n          </>\n        )}\n      </>,\n    );\n  }\n}\n\nexport default PaletteManagerRoot;\n"],"mappings":";;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,4BAAA,GAAAH,OAAA;AACA,IAAAI,YAAA,GAAAL,sBAAA,CAAAC,OAAA;AAGA,IAAAK,SAAA,GAAAN,sBAAA,CAAAC,OAAA;AAA0D;AAAA,IAAAM,KAAA,+BAAAC,MAAA,CAAAC,OAAA,CAAAC,MAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAa1D,IAAMC,OAAO,GAAG;EACdC,WAAW,EAAE,IAAAC,uBAAW,EAACC,8CAAiB,CAAC;EAC3CC,GAAG,EAAE,IAAAC,oBAAe;AACtB,CAAC;AAAC,IAEIC,kBAAkB,0BAAAC,UAAA;EAAA,IAAAC,UAAA,aAAAF,kBAAA,EAAAC,UAAA;EAAA,IAAAE,MAAA,OAAAC,aAAA,aAAAJ,kBAAA;EAAA,SAAAA,mBAAA;IAAA,IAAAK,KAAA;IAAA,IAAAC,gBAAA,mBAAAN,kBAAA;IAAA,SAAAO,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;MAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;IAAA;IAAAP,KAAA,GAAAF,MAAA,CAAAU,IAAA,CAAAC,KAAA,CAAAX,MAAA,SAAAY,MAAA,CAAAL,IAAA;IAAA,IAAAM,gBAAA,iBAAAC,uBAAA,aAAAZ,KAAA,4BAYXa,iBAAK,CAACC,SAAS,EAAoB;IAAA,IAAAH,gBAAA,iBAAAC,uBAAA,aAAAZ,KAAA,YAE/B;MACbe,KAAK,EAAE;IACT,CAAC;IAAA,IAAAJ,gBAAA,iBAAAC,uBAAA,aAAAZ,KAAA,4BAQuB,UAACgB,KAAa;MAAA,OAAK,UAACC,KAAuB,EAAK;QACtEA,KAAK,CAACC,eAAe,EAAE;QACvB,IAAAC,oBAAA,GAAwBnB,KAAA,CAAKoB,OAAO,CAA5BC,MAAM;UAANA,MAAM,GAAAF,oBAAA,cAAG,EAAE,GAAAA,oBAAA;QACnBnB,KAAA,CAAKsB,QAAQ,CAACD,MAAM,CAClBA,MAAM,CAACE,MAAM,CAAC,UAACC,KAAa;UAAA,OAAKA,KAAK,KAAKR,KAAK;QAAA,EAAC,EACjDC,KAAK,CACN;MACH,CAAC;IAAA;IAAA,IAAAN,gBAAA,iBAAAC,uBAAA,aAAAZ,KAAA,yBAEoB;MAAA,OAAM,UAACgB,KAAa,EAAEC,KAAuB,EAAK;QACrE,IAAAQ,qBAAA,GAAwBzB,KAAA,CAAKoB,OAAO,CAA5BC,MAAM;UAANA,MAAM,GAAAI,qBAAA,cAAG,EAAE,GAAAA,qBAAA;QACnB,IAAI,CAACJ,MAAM,CAACK,QAAQ,CAACV,KAAK,CAAC,EAAE;UAC3BhB,KAAA,CAAKsB,QAAQ,CAACD,MAAM,CAACA,MAAM,CAACX,MAAM,CAACM,KAAK,CAAC,EAAEC,KAAK,CAAC;QACnD;MACF,CAAC;IAAA;IAAA,IAAAN,gBAAA,iBAAAC,uBAAA,aAAAZ,KAAA,6BAEwB;MAAA,OAAM,YAAM;QAAA,IAAA2B,qBAAA;QACnC,CAAAA,qBAAA,GAAA3B,KAAA,CAAK4B,QAAQ,CAACC,OAAO,cAAAF,qBAAA,uBAArBA,qBAAA,CAAuBZ,KAAK,EAAE;QAC9Bf,KAAA,CAAK8B,OAAO,EAAE;MAChB,CAAC;IAAA;IAAA,IAAAnB,gBAAA,iBAAAC,uBAAA,aAAAZ,KAAA,cAwBS;MAAA,OAAMA,KAAA,CAAK+B,QAAQ,CAAC;QAAEhB,KAAK,EAAE;MAAK,CAAC,CAAC;IAAA;IAAA,IAAAJ,gBAAA,iBAAAC,uBAAA,aAAAZ,KAAA,aAErC;MAAA,OAAMA,KAAA,CAAK+B,QAAQ,CAAC;QAAEhB,KAAK,EAAE;MAAM,CAAC,CAAC;IAAA;IAAA,OAAAf,KAAA;EAAA;EAAA,IAAAgC,aAAA,aAAArC,kBAAA;IAAAsC,GAAA;IAAAjB,KAAA,EAnD9C,SAAAkB,kBAAA,EAAoB;MAClB,OAAO;QACLb,MAAM,EAAE;MACV,CAAC;IACH;EAAC;IAAAY,GAAA;IAAAjB,KAAA,EAuBD,SAAAmB,eAAA,EAAiB;MACf,IAAQd,MAAM,GAAK,IAAI,CAACD,OAAO,CAAvBC,MAAM;MAEd,OAAO;QACLA,MAAM,EAANA,MAAM;QACNe,QAAQ,EAAE,IAAI;QACdC,iBAAiB,EAAE,IAAI,CAACC,sBAAsB,EAAE;QAChDhD,WAAW,EAAE,IAAI,CAAC8B,OAAO,CAAC9B;MAC5B,CAAC;IACH;EAAC;IAAA2C,GAAA;IAAAjB,KAAA,EAED,SAAAuB,aAAAC,KAAA,EAA6B;MAAA,IAAdxB,KAAK,GAAAwB,KAAA,CAALxB,KAAK;MAClB,IAAQvB,GAAG,GAAK,IAAI,CAAC2B,OAAO,CAApB3B,GAAG;MAEX,OAAO;QACLA,GAAG,EAAHA,GAAG;QACH2C,QAAQ,EAAE,IAAI;QACdK,QAAQ,EAAE,IAAI,CAACC,qBAAqB,CAAC1B,KAAK,CAAC;QAC3C1B,WAAW,EAAE,IAAI,CAAC8B,OAAO,CAAC9B;MAC5B,CAAC;IACH;EAAC;IAAA2C,GAAA;IAAAjB,KAAA,EAMD,SAAA2B,mBAAA,EAAqB;MACnB,OAAO;QACLC,GAAG,EAAE,IAAI,CAAChB,QAAQ;QAClBiB,KAAK,EAAE,IAAI,CAACC,kBAAkB,EAAE;QAChC/B,KAAK,EAAE,IAAI,CAACgC,KAAK,CAAChC,KAAK;QACvBe,OAAO,EAAE,IAAI,CAACA,OAAO;QACrBkB,MAAM,EAAE,IAAI,CAACA,MAAM;QACnB1D,WAAW,EAAE,IAAI,CAAC8B,OAAO,CAAC9B;MAC5B,CAAC;IACH;EAAC;IAAA2C,GAAA;IAAAjB,KAAA,EAED,SAAAiC,OAAA,EAAkB;MAAA,IAAAC,IAAA;MAChB,IAAAC,aAAA,GAA6B,IAAI,CAAC/B,OAAO;QAAjCgC,MAAM,GAAAD,aAAA,CAANC,MAAM;QAAEC,QAAQ,GAAAF,aAAA,CAARE,QAAQ;MAExB,IAAMC,cAAc,GAAG,IAAI,CAACC,mBAAa,CAAC;MAE1C,OAAAL,IAAA,GAAO,IAAA/D,aAAO,EAACiE,MAAM,CAAC,eACpB3E,MAAA,YAAA+E,aAAA,CAAA/E,MAAA,YAAAgF,QAAA,qBACEhF,MAAA,YAAA+E,aAAA,CAAC3E,QAAA,WAAO,EAAAqE,IAAA,CAAAQ,EAAA;QAAA,MAAK,CAAC;QAAA,MAAM;MAAC,GAAI,EACxBL,QAAQ,CAACM,MAAM,gBACdlF,MAAA,YAAA+E,aAAA,CAACH,QAAQ,EAAAH,IAAA,CAAAQ,EAAA,iBAAG,gBAEZjF,MAAA,YAAA+E,aAAA,CAAA/E,MAAA,YAAAgF,QAAA,qBACEhF,MAAA,YAAA+E,aAAA,CAACF,cAAc,CAACM,MAAM,OAAG,eACzBnF,MAAA,YAAA+E,aAAA,CAACF,cAAc,CAACO,UAAU,OAAG,CAEhC,CACA;IAEP;EAAC;EAAA,OAAAlE,kBAAA;AAAA,EApG8BmE,eAAS;AAAA,IAAAnD,gBAAA,aAApChB,kBAAkB,iBACD,gBAAgB;AAAA,IAAAgB,gBAAA,aADjChB,kBAAkB,WAGPV,KAAK;AAAA,IAAA0B,gBAAA,aAHhBhB,kBAAkB,aAILoE,MAAM,CAACC,MAAM,CAAC3E,OAAO,CAAC;AAAA,IAAAsB,gBAAA,aAJnChB,kBAAkB,kBAMA;EACpBsE,aAAa,EAAE,EAAE;EACjBC,IAAI,EAAE1E,8CAAiB;EACvB2E,MAAM,EAAE;AACV,CAAC;AAAA,IAAAC,QAAA,GA6FYzE,kBAAkB;AAAA0E,OAAA,cAAAD,QAAA"}

package/color-picker/lib/cjs/components/InputColor.js

@@ -21,29 +21,30 @@ var _input = _interopRequireDefault(require("intergalactic/input"));
 var _m = _interopRequireDefault(require("intergalactic/icon/Check/m"));
 var _m2 = _interopRequireDefault(require("intergalactic/icon/Close/m"));
 /*__reshadow-styles__:"../style/color-picker.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SColorPickerPopper_1bl34_gg_{max-width:calc(var(--intergalactic-spacing-4x, 16px)*2 + 28px*6 + 4px*6);padding:var(--intergalactic-spacing-4x, 16px)}.___SItemContainer_1bl34_gg_{position:relative;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1px solid transparent;outline:0;cursor:pointer}@media (hover:hover){.___SItemContainer_1bl34_gg_:hover{border:1px solid var(--intergalactic-border-secondary, #e0e1e9)}}.___SItemContainer_1bl34_gg_::after{content:\"\";position:absolute;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 1px var(--intergalactic-border-secondary, #e0e1e9);background:var(--value_1bl34)}@media (hover:hover){.___SItemContainer_1bl34_gg_:hover>.___SCloseIcon_1bl34_gg_{opacity:1}}.___SItemContainer_1bl34_gg_.__keyboardFocused_1bl34_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SItemContainer_1bl34_gg_.__selected_1bl34_gg_{border:1px solid var(--intergalactic-border-info-active, #006dca)}.___SItemContainer_1bl34_gg_.__displayLabel_1bl34_gg_::after{background:var(--value_1bl34);opacity:.15}.___SItemContainer_1bl34_gg_:not(.__value_1bl34_gg_)::after{border:.9px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColors_1bl34_gg_{display:flex;flex-wrap:wrap;align-items:center;gap:var(--intergalactic-spacing-1x, 4px)}.___SPaletteManager_1bl34_gg_{justify-content:space-between;margin-top:var(--intergalactic-spacing-3x, 12px);margin-left:calc(var(--intergalactic-spacing-1x, 4px) - 1px)}.___SInputContainer_1bl34_gg_,.___SPaletteManager_1bl34_gg_,.___SPlusButton_1bl34_gg_{display:flex;align-items:center}.___SPlusButton_1bl34_gg_{justify-content:center;width:28px;height:28px;border-radius:50%;cursor:pointer}@media (hover:hover){.___SPlusButton_1bl34_gg_:hover{background-color:var(--intergalactic-bg-secondary-neutral-hover, #e0e1e9)}}.___SDefaultTrigger_1bl34_gg_{display:inline-flex;align-items:center;outline:0;cursor:pointer;border:0;background:0 0;padding:0}.___SDefaultTrigger_1bl34_gg_.__keyboardFocused_1bl34_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STriggerCircle_1bl34_gg_{position:relative;width:12px;height:12px;margin-right:calc(var(--intergalactic-spacing-1x, 4px) + 1px);border-radius:50%;background-color:var(--data-value_1bl34);border:1px solid transparent}.___STriggerCircle_1bl34_gg_:not([data-value]){border:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___STriggerCircleLine_1bl34_gg_{position:absolute;top:1px;left:1px}.___SCloseIcon_1bl34_gg_{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:12px;height:12px;border-radius:50%;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);opacity:0;z-index:1}.___SLine_1bl34_gg_{position:absolute}.___SLabel_1bl34_gg_{z-index:1;color:var(--data-value_1bl34);font-size:calc(var(--intergalactic-fs-100, 12px) + 1px);font-weight:var(--intergalactic-bold, 700)}.___SItemColor_1bl34_gg_{width:20px;height:20px;border-radius:50%;border:1px solid var(--intergalactic-border-secondary, #e0e1e9);background:var(--data-value_1bl34)}.___SClearConfirm_1bl34_gg_.__hidden_1bl34_gg_,.___SConfirmColor_1bl34_gg_.__hidden_1bl34_gg_{display:none}" /*__inner_css_end__*/, "1bl34_gg_") /*__reshadow_css_end__*/, {
-  "__SColorPickerPopper": "___SColorPickerPopper_1bl34_gg_",
-  "__SItemContainer": "___SItemContainer_1bl34_gg_",
-  "__SCloseIcon": "___SCloseIcon_1bl34_gg_",
-  "_keyboardFocused": "__keyboardFocused_1bl34_gg_",
-  "_selected": "__selected_1bl34_gg_",
-  "__SColors": "___SColors_1bl34_gg_",
-  "__SPaletteManager": "___SPaletteManager_1bl34_gg_",
-  "__SInputContainer": "___SInputContainer_1bl34_gg_",
-  "__SDefaultTrigger": "___SDefaultTrigger_1bl34_gg_",
-  "__STriggerCircle": "___STriggerCircle_1bl34_gg_",
-  "--data-value": "--data-value_1bl34",
-  "__STriggerCircleLine": "___STriggerCircleLine_1bl34_gg_",
-  "__SLine": "___SLine_1bl34_gg_",
-  "__SLabel": "___SLabel_1bl34_gg_",
-  "__SItemColor": "___SItemColor_1bl34_gg_",
-  "__SConfirmColor": "___SConfirmColor_1bl34_gg_",
-  "_hidden": "__hidden_1bl34_gg_",
-  "__SClearConfirm": "___SClearConfirm_1bl34_gg_",
-  "--value": "--value_1bl34",
-  "_displayLabel": "__displayLabel_1bl34_gg_",
-  "_value": "__value_1bl34_gg_",
-  "__SPlusButton": "___SPlusButton_1bl34_gg_"
+var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SColorPickerPopper_5jq0m_gg_{max-width:calc(var(--intergalactic-spacing-4x, 16px)*2 + 28px*6 + 4px*6);padding:var(--intergalactic-spacing-4x, 16px)}.___SItemContainer_5jq0m_gg_{position:relative;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1px solid transparent;outline:0;cursor:pointer}@media (hover:hover){.___SItemContainer_5jq0m_gg_:hover{border:1px solid var(--intergalactic-border-secondary, #e0e1e9)}}.___SItemContainer_5jq0m_gg_::after{content:\"\";position:absolute;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 1px var(--intergalactic-border-secondary, #e0e1e9);background:var(--value_5jq0m)}@media (hover:hover){.___SItemContainer_5jq0m_gg_:hover>.___SCloseIcon_5jq0m_gg_{opacity:1}}.___SItemContainer_5jq0m_gg_.__keyboardFocused_5jq0m_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SItemContainer_5jq0m_gg_.__selected_5jq0m_gg_{border:1px solid var(--intergalactic-border-info-active, #006dca)}.___SItemContainer_5jq0m_gg_.__displayLabel_5jq0m_gg_::after{background:var(--value_5jq0m);opacity:.15}.___SItemContainer_5jq0m_gg_:not(.__value_5jq0m_gg_)::after{border:.9px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColorsContainer_5jq0m_gg_,.___SColors_5jq0m_gg_{display:flex;flex-wrap:wrap;align-items:center;gap:var(--intergalactic-spacing-1x, 4px)}.___SPaletteManager_5jq0m_gg_{justify-content:space-between;margin-top:var(--intergalactic-spacing-3x, 12px);margin-left:calc(var(--intergalactic-spacing-1x, 4px) - 1px)}.___SInputContainer_5jq0m_gg_,.___SPaletteManager_5jq0m_gg_,.___SPlusButton_5jq0m_gg_{display:flex;align-items:center}.___SPlusButton_5jq0m_gg_{justify-content:center;width:28px;height:28px;border-radius:50%;cursor:pointer}@media (hover:hover){.___SPlusButton_5jq0m_gg_:hover{background-color:var(--intergalactic-bg-secondary-neutral-hover, #e0e1e9)}}.___SDefaultTrigger_5jq0m_gg_{display:inline-flex;align-items:center;outline:0;cursor:pointer;border:0;background:0 0;padding:0}.___SDefaultTrigger_5jq0m_gg_.__keyboardFocused_5jq0m_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STriggerCircle_5jq0m_gg_{position:relative;width:16px;height:16px;margin-right:calc(var(--intergalactic-spacing-1x, 4px) + 1px);border-radius:50%;background-color:var(--data-value_5jq0m);border:1px solid transparent}.___STriggerCircle_5jq0m_gg_:not([data-value]){border:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___STriggerCircleLine_5jq0m_gg_{position:absolute;top:1px;left:1px}.___SCloseIcon_5jq0m_gg_{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:12px;height:12px;border-radius:50%;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);opacity:0;z-index:1}.___SLine_5jq0m_gg_{position:absolute}.___SLabel_5jq0m_gg_{z-index:1;color:var(--data-value_5jq0m);font-size:calc(var(--intergalactic-fs-100, 12px) + 1px);font-weight:var(--intergalactic-bold, 700)}.___SItemColor_5jq0m_gg_{width:20px;height:20px;border-radius:50%;border:1px solid var(--intergalactic-border-secondary, #e0e1e9);background:var(--data-value_5jq0m)}.___SClearConfirm_5jq0m_gg_.__hidden_5jq0m_gg_,.___SConfirmColor_5jq0m_gg_.__hidden_5jq0m_gg_{display:none}" /*__inner_css_end__*/, "5jq0m_gg_") /*__reshadow_css_end__*/, {
+  "__SColorPickerPopper": "___SColorPickerPopper_5jq0m_gg_",
+  "__SItemContainer": "___SItemContainer_5jq0m_gg_",
+  "__SCloseIcon": "___SCloseIcon_5jq0m_gg_",
+  "_keyboardFocused": "__keyboardFocused_5jq0m_gg_",
+  "_selected": "__selected_5jq0m_gg_",
+  "__SColorsContainer": "___SColorsContainer_5jq0m_gg_",
+  "__SColors": "___SColors_5jq0m_gg_",
+  "__SPaletteManager": "___SPaletteManager_5jq0m_gg_",
+  "__SInputContainer": "___SInputContainer_5jq0m_gg_",
+  "__SDefaultTrigger": "___SDefaultTrigger_5jq0m_gg_",
+  "__STriggerCircle": "___STriggerCircle_5jq0m_gg_",
+  "--data-value": "--data-value_5jq0m",
+  "__STriggerCircleLine": "___STriggerCircleLine_5jq0m_gg_",
+  "__SLine": "___SLine_5jq0m_gg_",
+  "__SLabel": "___SLabel_5jq0m_gg_",
+  "__SItemColor": "___SItemColor_5jq0m_gg_",
+  "__SConfirmColor": "___SConfirmColor_5jq0m_gg_",
+  "_hidden": "__hidden_5jq0m_gg_",
+  "__SClearConfirm": "___SClearConfirm_5jq0m_gg_",
+  "--value": "--value_5jq0m",
+  "_displayLabel": "__displayLabel_5jq0m_gg_",
+  "_value": "__value_5jq0m_gg_",
+  "__SPlusButton": "___SPlusButton_5jq0m_gg_"
 });
 function isValidHex(hex) {
   if (hex[0] !== '#' && hex.length === 7) return false;

package/color-picker/lib/cjs/components/InputColor.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputColor.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_input","_m","_m2","style","_index","sstyled","insert","isValidHex","hex","length","reg","test","concat","debounce","func","timeout","_this","timer","_len","arguments","args","Array","_key","clearTimeout","setTimeout","apply","InputColorRoot","_Component","_inherits2","_super","_createSuper2","_this2","_classCallCheck2","_len2","_key2","call","_defineProperty2","_assertThisInitialized2","event","_ref3","asProps","value","state","_this2$asProps","_this2$asProps$onAdd","onAdd","toLowerCase","_this2$asProps2","_this2$asProps2$onAdd","handlers","key","preventDefault","handlerAdd","_createClass2","uncontrolledProps","render","_ref","_ref2","_this$asProps","styles","onFocus","onBlur","focus","getI18nText","SPaletteManager","Box","SInputValue","Input","Value","SInput","SInputContainer","SConfirmColor","Addon","SClearConfirm","SItemColor","valueColor","createElement","cn","handlekeyDown","_objectSpread2","assignProps","handlerChange","handlerCancel","Component","defaultValue","defaultState","InputColor","createComponent","exports"],"sources":["../../../src/components/InputColor.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport Input from '@semcore/input';\nimport CheckM from '@semcore/icon/Check/m';\nimport CloseM from '@semcore/icon/Close/m';\nimport style from '../style/color-picker.shadow.css';\n\ntype InputColorAsProps = {\n  styles?: React.CSSProperties;\n  defaultValue?: string;\n  defaultState?: string;\n  value?: string;\n  state?: 'normal' | 'valid' | 'invalid';\n  colors?: string[];\n  onAdd?: (value: string, event: React.MouseEvent | React.KeyboardEvent) => void;\n  focus?: boolean;\n  Children: any;\n  getI18nText: (messageId: string, values?: { [key: string]: string | number }) => string;\n};\n\nfunction isValidHex(hex: string) {\n  if (hex[0] !== '#' && hex.length === 7) return false;\n\n  const reg = /^#([0-9a-f]{3,4}){1,2}$/i;\n  return hex[0] === '#' ? reg.test(hex) : reg.test(`#${hex}`);\n}\n\nfunction debounce(this: any, func: (...args: any[]) => void, timeout: number) {\n  let timer: any;\n  return (...args: any[]) => {\n    clearTimeout(timer);\n    timer = setTimeout(() => {\n      func.apply(this, args);\n    }, timeout);\n  };\n}\n\nclass InputColorRoot extends Component<InputColorAsProps> {\n  static displayName = 'InputColor';\n\n  static style = style;\n\n  static defaultProps = {\n    defaultValue: '',\n    defaultState: 'normal',\n  };\n\n  uncontrolledProps() {\n    return {\n      value: '',\n      state: null,\n    };\n  }\n\n  handlerAdd = (event: React.MouseEvent | React.KeyboardEvent) => {\n    const { value, state } = this.asProps as any;\n\n    if (value.length !== 0 && state === 'normal') {\n      if (value[0] === '#') {\n        this.asProps?.onAdd?.(value.toLowerCase(), event);\n      } else {\n        this.asProps?.onAdd?.(`#${value.toLowerCase()}`, event);\n      }\n      this.handlers.value('', event);\n    }\n  };\n\n  handlerCancel = (event: React.MouseEvent) => {\n    this.handlers.value('', event);\n  };\n\n  handlerChange = debounce((value: string) => {\n    if (value.length !== 0) {\n      if (isValidHex(value)) {\n        this.handlers.state('normal');\n      } else {\n        this.handlers.state('invalid');\n      }\n    } else {\n      this.handlers.state('normal');\n    }\n  }, 300);\n\n  handlekeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      this.handlerAdd(event);\n    }\n  };\n\n  render() {\n    const { styles, state, value, onFocus, onBlur, focus, getI18nText } = this.asProps;\n\n    const SPaletteManager = Box;\n    const SInputValue = Root;\n    const SInput = 'div';\n    const SInputContainer = 'div';\n    const SConfirmColor = Input.Addon;\n    const SClearConfirm = Input.Addon;\n    const SItemColor = Box;\n    const valueColor = value?.[0] === '#' ? value : value ? `#${value}` : null;\n\n    return sstyled(styles)(\n      <SPaletteManager>\n        <SItemColor data-value={valueColor} />\n        <SInputContainer>\n          <span aria-hidden='true'>#</span>\n          <SInput>\n            <Input ml={1} w={135} state={state} onKeyDown={this.handlekeyDown}>\n              <SInputValue\n                render={Input.Value}\n                placeholder='FFFFFF'\n                aria-label={getI18nText('colorField')}\n                onChange={this.handlerChange}\n                maxLength={7}\n                onFocus={onFocus}\n                onBlur={onBlur}\n              />\n              <SConfirmColor\n                aria-hidden='true'\n                aria-label={getI18nText('colorFieldConfirm')}\n                role='button'\n                interactive\n                onClick={this.handlerAdd}\n                pr='4px'\n                hidden={!focus}\n              >\n                <CheckM color='green-300' />\n              </SConfirmColor>\n              <SClearConfirm\n                aria-hidden='true'\n                aria-label={getI18nText('colorFieldClear')}\n                role='button'\n                interactive\n                onClick={this.handlerCancel}\n                pl='4px'\n                hidden={!focus}\n              >\n                <CloseM color='gray-300' />\n              </SClearConfirm>\n            </Input>\n          </SInput>\n        </SInputContainer>\n      </SPaletteManager>,\n    ) as React.ReactElement;\n  }\n}\n\nexport const InputColor = createComponent(InputColorRoot);\n"],"mappings":"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"}
+{"version":3,"file":"InputColor.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_input","_m","_m2","style","_index","sstyled","insert","isValidHex","hex","length","reg","test","concat","debounce","func","timeout","_this","timer","_len","arguments","args","Array","_key","clearTimeout","setTimeout","apply","InputColorRoot","_Component","_inherits2","_super","_createSuper2","_this2","_classCallCheck2","_len2","_key2","call","_defineProperty2","_assertThisInitialized2","event","_ref3","asProps","value","state","_this2$asProps","_this2$asProps$onAdd","onAdd","toLowerCase","_this2$asProps2","_this2$asProps2$onAdd","handlers","key","preventDefault","handlerAdd","_createClass2","uncontrolledProps","render","_ref","_ref2","_this$asProps","styles","onFocus","onBlur","focus","getI18nText","SPaletteManager","Box","SInputValue","Input","Value","SInput","SInputContainer","SConfirmColor","Addon","SClearConfirm","SItemColor","valueColor","createElement","cn","handlekeyDown","_objectSpread2","assignProps","handlerChange","handlerCancel","Component","defaultValue","defaultState","InputColor","createComponent","exports"],"sources":["../../../src/components/InputColor.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport Input from '@semcore/input';\nimport CheckM from '@semcore/icon/Check/m';\nimport CloseM from '@semcore/icon/Close/m';\nimport style from '../style/color-picker.shadow.css';\n\ntype InputColorAsProps = {\n  styles?: React.CSSProperties;\n  defaultValue?: string;\n  defaultState?: string;\n  value?: string;\n  state?: 'normal' | 'valid' | 'invalid';\n  colors?: string[];\n  onAdd?: (value: string, event: React.MouseEvent | React.KeyboardEvent) => void;\n  focus?: boolean;\n  Children: any;\n  getI18nText: (messageId: string, values?: { [key: string]: string | number }) => string;\n};\n\nfunction isValidHex(hex: string) {\n  if (hex[0] !== '#' && hex.length === 7) return false;\n\n  const reg = /^#([0-9a-f]{3,4}){1,2}$/i;\n  return hex[0] === '#' ? reg.test(hex) : reg.test(`#${hex}`);\n}\n\nfunction debounce(this: any, func: (...args: any[]) => void, timeout: number) {\n  let timer: any;\n  return (...args: any[]) => {\n    clearTimeout(timer);\n    timer = setTimeout(() => {\n      func.apply(this, args);\n    }, timeout);\n  };\n}\n\nclass InputColorRoot extends Component<InputColorAsProps> {\n  static displayName = 'InputColor';\n\n  static style = style;\n\n  static defaultProps = {\n    defaultValue: '',\n    defaultState: 'normal',\n  };\n\n  uncontrolledProps() {\n    return {\n      value: '',\n      state: null,\n    };\n  }\n\n  handlerAdd = (event: React.MouseEvent | React.KeyboardEvent) => {\n    const { value, state } = this.asProps as any;\n\n    if (value.length !== 0 && state === 'normal') {\n      if (value[0] === '#') {\n        this.asProps?.onAdd?.(value.toLowerCase(), event);\n      } else {\n        this.asProps?.onAdd?.(`#${value.toLowerCase()}`, event);\n      }\n      this.handlers.value('', event);\n    }\n  };\n\n  handlerCancel = (event: React.MouseEvent) => {\n    this.handlers.value('', event);\n  };\n\n  handlerChange = debounce((value: string) => {\n    if (value.length !== 0) {\n      if (isValidHex(value)) {\n        this.handlers.state('normal');\n      } else {\n        this.handlers.state('invalid');\n      }\n    } else {\n      this.handlers.state('normal');\n    }\n  }, 300);\n\n  handlekeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      this.handlerAdd(event);\n    }\n  };\n\n  render() {\n    const { styles, state, value, onFocus, onBlur, focus, getI18nText } = this.asProps;\n\n    const SPaletteManager = Box;\n    const SInputValue = Root;\n    const SInput = 'div';\n    const SInputContainer = 'div';\n    const SConfirmColor = Input.Addon;\n    const SClearConfirm = Input.Addon;\n    const SItemColor = Box;\n    const valueColor = value?.[0] === '#' ? value : value ? `#${value}` : null;\n\n    return sstyled(styles)(\n      <SPaletteManager>\n        <SItemColor data-value={valueColor} />\n        <SInputContainer>\n          <span aria-hidden='true'>#</span>\n          <SInput>\n            <Input ml={1} w={135} state={state} onKeyDown={this.handlekeyDown}>\n              <SInputValue\n                render={Input.Value}\n                placeholder='FFFFFF'\n                aria-label={getI18nText('colorField')}\n                onChange={this.handlerChange}\n                maxLength={7}\n                onFocus={onFocus}\n                onBlur={onBlur}\n              />\n              <SConfirmColor\n                aria-hidden='true'\n                aria-label={getI18nText('colorFieldConfirm')}\n                role='button'\n                interactive\n                onClick={this.handlerAdd}\n                pr='4px'\n                hidden={!focus}\n              >\n                <CheckM color='green-300' />\n              </SConfirmColor>\n              <SClearConfirm\n                aria-hidden='true'\n                aria-label={getI18nText('colorFieldClear')}\n                role='button'\n                interactive\n                onClick={this.handlerCancel}\n                pl='4px'\n                hidden={!focus}\n              >\n                <CloseM color='gray-300' />\n              </SClearConfirm>\n            </Input>\n          </SInput>\n        </SInputContainer>\n      </SPaletteManager>,\n    ) as React.ReactElement;\n  }\n}\n\nexport const InputColor = createComponent(InputColorRoot);\n"],"mappings":"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"}

package/color-picker/lib/cjs/components/Item.js

@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 var _flexBox = require("intergalactic/flex-box");
 var _keyboardFocusEnhance = _interopRequireDefault(require("intergalactic/utils/lib/enhances/keyboardFocusEnhance"));
 var _m = _interopRequireDefault(require("intergalactic/icon/Close/m"));
+var _ScreenReaderOnly = require("intergalactic/utils/lib/ScreenReaderOnly");
+var _tooltip = require("intergalactic/tooltip");
 function Item(props) {
   var _ref = arguments[0],
     _ref2;
@@ -22,20 +24,29 @@ function Item(props) {
     editable = _ref3.editable,
     selected = _ref3.selected,
     onRemove = _ref3.onRemove,
-    getI18nText = _ref3.getI18nText;
-  var SItemContainer = _flexBox.Box;
+    getI18nText = _ref3.getI18nText,
+    uid = _ref3.uid;
+  var SItemContainer = _tooltip.Hint;
   var SLabel = _flexBox.Box;
   var SCloseIcon = _flexBox.Box;
   var SLine = 'svg';
+  var deleteDescriber = "delete_".concat(value, "_").concat(uid);
+  var handleKeydown = _react["default"].useCallback(function (event) {
+    if (event.key === 'Backspace') {
+      onRemove === null || onRemove === void 0 ? void 0 : onRemove(event);
+    }
+  }, []);
   return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SItemContainer, _ref2.cn("SItemContainer", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
     "selected": selected,
     "value": value,
     "displayLabel": displayLabel,
-    "role": 'listitem',
-    "aria-atomic": 'true',
-    "aria-label": value ? getI18nText('itemColor', {
-      color: value
-    }) : getI18nText('clearColor')
+    "role": 'option',
+    "aria-selected": selected,
+    "title": value !== null && value !== void 0 ? value : getI18nText('clearColor'),
+    "aria-describedby": editable ? deleteDescriber : undefined,
+    "onKeyDown": handleKeydown,
+    "__excludeProps": ['title'],
+    "timeout": [250, 50]
   }, _ref))), !value && /*#__PURE__*/_react["default"].createElement(SLine, _ref2.cn("SLine", {
     "width": '17',
     "height": '17',
@@ -49,13 +60,18 @@ function Item(props) {
     "fill": '#e0e1e9'
   }))), displayLabel && /*#__PURE__*/_react["default"].createElement(SLabel, _ref2.cn("SLabel", {
     "data-value": value || '#6C6E79'
-  }), "A"), /*#__PURE__*/_react["default"].createElement(Children, _ref2.cn("Children", {})), editable && /*#__PURE__*/_react["default"].createElement(SCloseIcon, _ref2.cn("SCloseIcon", {
+  }), "A"), /*#__PURE__*/_react["default"].createElement(Children, _ref2.cn("Children", {})), editable && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(SCloseIcon, _ref2.cn("SCloseIcon", {
+    "tabIndex": -1,
+    "aria-hidden": true,
     "onClick": onRemove
   }), /*#__PURE__*/_react["default"].createElement(_m["default"], _ref2.cn("CloseM", {
-    "color": 'gray-500',
+    "color": 'icon-primary-neutral',
     "w": 10,
     "h": 10
-  }))));
+  }))), /*#__PURE__*/_react["default"].createElement(_ScreenReaderOnly.ScreenReaderOnly, _ref2.cn("ScreenReaderOnly", {
+    "aria-hidden": true,
+    "id": deleteDescriber
+  }), getI18nText('deleteColorDescriber'))));
 }
 Item.enhance = [(0, _keyboardFocusEnhance["default"])()];
 //# sourceMappingURL=Item.js.map

package/color-picker/lib/cjs/components/Item.js.map

@@ -1 +1 @@
-{"version":3,"file":"Item.js","names":["_core","require","_react","_interopRequireDefault","_flexBox","_keyboardFocusEnhance","_m","Item","props","_ref","arguments[0]","_ref2","_ref3","Children","styles","value","displayLabel","editable","selected","onRemove","getI18nText","SItemContainer","Box","SLabel","SCloseIcon","SLine","sstyled","createElement","cn","_objectSpread2","assignProps","color","enhance","keyboardFocusEnhance"],"sources":["../../../src/components/Item.tsx"],"sourcesContent":["import React from 'react';\nimport { Root, sstyled } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport CloseM from '@semcore/icon/Close/m';\n\ntype ItemAsProps = {\n  styles?: React.CSSProperties;\n  value?: string;\n  displayLabel?: boolean;\n  editable?: boolean;\n  selected?: boolean;\n  onRemove?: React.MouseEventHandler;\n  Children?: React.FC;\n  getI18nText: (messageId: string, values?: { [key: string]: string | number }) => string;\n};\n\nexport function Item(props: ItemAsProps) {\n  const { Children, styles, value, displayLabel, editable, selected, onRemove, getI18nText } =\n    props as any;\n  const SItemContainer = Root;\n  const SLabel = Box;\n  const SCloseIcon = Box;\n  const SLine = 'svg';\n\n  return sstyled(styles)(\n    <SItemContainer\n      render={Box}\n      selected={selected}\n      value={value}\n      displayLabel={displayLabel}\n      role='listitem'\n      aria-atomic='true'\n      aria-label={value ? getI18nText('itemColor', { color: value }) : getI18nText('clearColor')}\n    >\n      {!value && (\n        <SLine\n          width='17'\n          height='17'\n          viewBox='0 0 17 17'\n          fill='none'\n          xmlns='http://www.w3.org/2000/svg'\n        >\n          <rect\n            width='1'\n            height='22'\n            transform='matrix(-0.707107 -0.707107 -0.707107 0.707107 16.4854 0.928925)'\n            fill='#e0e1e9'\n          />\n        </SLine>\n      )}\n      {displayLabel && <SLabel data-value={value || '#6C6E79'}>A</SLabel>}\n      <Children />\n      {editable && (\n        <SCloseIcon onClick={onRemove}>\n          <CloseM color='gray-500' w={10} h={10} />\n        </SCloseIcon>\n      )}\n    </SItemContainer>,\n  ) as React.ReactElement;\n}\n\nItem.enhance = [keyboardFocusEnhance()];\n"],"mappings":";;;;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AADA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,qBAAA,GAAAF,sBAAA,CAAAF,OAAA;AACA,IAAAK,EAAA,GAAAH,sBAAA,CAAAF,OAAA;AAaO,SAASM,IAAIA,CAACC,KAAkB,EAAE;EAAA,IAAAC,IAAA,GAAAC,YAAA;IAAAC,KAAA;EACvC,IAAAC,KAAA,GACEJ,KAAK;IADCK,QAAQ,GAAAD,KAAA,CAARC,QAAQ;IAAEC,MAAM,GAAAF,KAAA,CAANE,MAAM;IAAEC,KAAK,GAAAH,KAAA,CAALG,KAAK;IAAEC,YAAY,GAAAJ,KAAA,CAAZI,YAAY;IAAEC,QAAQ,GAAAL,KAAA,CAARK,QAAQ;IAAEC,QAAQ,GAAAN,KAAA,CAARM,QAAQ;IAAEC,QAAQ,GAAAP,KAAA,CAARO,QAAQ;IAAEC,WAAW,GAAAR,KAAA,CAAXQ,WAAW;EAExF,IAAMC,cAAc,GAORC,YAAG;EANf,IAAMC,MAAM,GAAGD,YAAG;EAClB,IAAME,UAAU,GAAGF,YAAG;EACtB,IAAMG,KAAK,GAAG,KAAK;EAEnB,OAAAd,KAAA,GAAO,IAAAe,aAAO,EAACZ,MAAM,CAAC,eACpBZ,MAAA,YAAAyB,aAAA,CAACN,cAAc,EAAAV,KAAA,CAAAiB,EAAA,uBAAAC,cAAA,qBAAA7B,KAAA,CAAA8B,WAAA;IAAA,YAEHZ,QAAQ;IAAA,SACXH,KAAK;IAAA,gBACEC,YAAY;IAAA,QACrB,UAAU;IAAA,eACH,MAAM;IAAA,cACND,KAAK,GAAGK,WAAW,CAAC,WAAW,EAAE;MAAEW,KAAK,EAAEhB;IAAM,CAAC,CAAC,GAAGK,WAAW,CAAC,YAAY;EAAC,GAAAX,IAAA,KAEzF,CAACM,KAAK,iBACLb,MAAA,YAAAyB,aAAA,CAACF,KAAK,EAAAd,KAAA,CAAAiB,EAAA;IAAA,SACE,IAAI;IAAA,UACH,IAAI;IAAA,WACH,WAAW;IAAA,QACd,MAAM;IAAA,SACL;EAA4B,iBAElC1B,MAAA,YAAAyB,aAAA,SAAAhB,KAAA,CAAAiB,EAAA;IAAA,SACQ,GAAG;IAAA,UACF,IAAI;IAAA,aACD,iEAAiE;IAAA,QACtE;EAAS,GACd,CAEL,EACAZ,YAAY,iBAAId,MAAA,YAAAyB,aAAA,CAACJ,MAAM,EAAAZ,KAAA,CAAAiB,EAAA;IAAA,cAAab,KAAK,IAAI;EAAS,IAAE,GAAC,CAAS,eACnEb,MAAA,YAAAyB,aAAA,CAACd,QAAQ,EAAAF,KAAA,CAAAiB,EAAA,iBAAG,EACXX,QAAQ,iBACPf,MAAA,YAAAyB,aAAA,CAACH,UAAU,EAAAb,KAAA,CAAAiB,EAAA;IAAA,WAAUT;EAAQ,iBAC3BjB,MAAA,YAAAyB,aAAA,CAACrB,EAAA,WAAM,EAAAK,KAAA,CAAAiB,EAAA;IAAA,SAAO,UAAU;IAAA,KAAI,EAAE;IAAA,KAAK;EAAE,GAAI,CAE5C,CACc;AAErB;AAEArB,IAAI,CAACyB,OAAO,GAAG,CAAC,IAAAC,gCAAoB,GAAE,CAAC"}
+{"version":3,"file":"Item.js","names":["_core","require","_react","_interopRequireDefault","_flexBox","_keyboardFocusEnhance","_m","_ScreenReaderOnly","_tooltip","Item","props","_ref","arguments[0]","_ref2","_ref3","Children","styles","value","displayLabel","editable","selected","onRemove","getI18nText","uid","SItemContainer","Hint","SLabel","Box","SCloseIcon","SLine","deleteDescriber","concat","handleKeydown","React","useCallback","event","key","sstyled","createElement","cn","_objectSpread2","assignProps","undefined","Fragment","ScreenReaderOnly","enhance","keyboardFocusEnhance"],"sources":["../../../src/components/Item.tsx"],"sourcesContent":["import React from 'react';\nimport { Root, sstyled } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport CloseM from '@semcore/icon/Close/m';\nimport { ScreenReaderOnly } from '@semcore/utils/lib/ScreenReaderOnly';\nimport { Hint } from '@semcore/tooltip';\n\ntype ItemAsProps = {\n  styles?: React.CSSProperties;\n  value?: string;\n  displayLabel?: boolean;\n  editable?: boolean;\n  selected?: boolean;\n  onRemove?: React.MouseEventHandler | React.KeyboardEventHandler;\n  Children?: React.FC;\n  getI18nText: (messageId: string, values?: { [key: string]: string | number }) => string;\n  uid: string;\n};\n\nexport function Item(props: ItemAsProps) {\n  const { Children, styles, value, displayLabel, editable, selected, onRemove, getI18nText, uid } =\n    props as any;\n  const SItemContainer = Root;\n  const SLabel = Box;\n  const SCloseIcon = Box;\n  const SLine = 'svg';\n  const deleteDescriber = `delete_${value}_${uid}`;\n\n  const handleKeydown = React.useCallback((event: React.KeyboardEvent) => {\n    if (event.key === 'Backspace') {\n      onRemove?.(event);\n    }\n  }, []);\n\n  return sstyled(styles)(\n    <SItemContainer\n      render={Hint}\n      selected={selected}\n      value={value}\n      displayLabel={displayLabel}\n      role='option'\n      aria-selected={selected}\n      title={value ?? getI18nText('clearColor')}\n      aria-describedby={editable ? deleteDescriber : undefined}\n      onKeyDown={handleKeydown}\n      __excludeProps={['title']}\n      timeout={[250, 50]}\n    >\n      {!value && (\n        <SLine\n          width='17'\n          height='17'\n          viewBox='0 0 17 17'\n          fill='none'\n          xmlns='http://www.w3.org/2000/svg'\n        >\n          <rect\n            width='1'\n            height='22'\n            transform='matrix(-0.707107 -0.707107 -0.707107 0.707107 16.4854 0.928925)'\n            fill='#e0e1e9'\n          />\n        </SLine>\n      )}\n      {displayLabel && <SLabel data-value={value || '#6C6E79'}>A</SLabel>}\n      <Children />\n      {editable && (\n        <>\n          <SCloseIcon tabIndex={-1} aria-hidden={true} onClick={onRemove}>\n            <CloseM color='icon-primary-neutral' w={10} h={10} />\n          </SCloseIcon>\n          <ScreenReaderOnly aria-hidden={true} id={deleteDescriber}>\n            {getI18nText('deleteColorDescriber')}\n          </ScreenReaderOnly>\n        </>\n      )}\n    </SItemContainer>,\n  ) as React.ReactElement;\n}\n\nItem.enhance = [keyboardFocusEnhance()];\n"],"mappings":"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"}

package/color-picker/lib/cjs/components/colors.js

@@ -22,7 +22,8 @@ function Colors(props) {
     getI18nText = props.getI18nText;
   var SColors = _flexBox.Box;
   return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SColors, _ref3.cn("SColors", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "role": 'list',
+    "role": 'listbox',
+    "aria-orientation": 'horizontal',
     "aria-label": getI18nText('presetColors')
   }, _ref))), Children.origin ? /*#__PURE__*/_react["default"].createElement(Children, _ref3.cn("Children", {})) : colors === null || colors === void 0 ? void 0 : colors.map(function (color) {
     return /*#__PURE__*/_react["default"].createElement(_ColorPicker["default"].Item, {
@@ -40,20 +41,23 @@ function ColorsCustom(props) {
     onPlusButtonClick = props.onPlusButtonClick,
     getI18nText = props.getI18nText;
   var SColors = _flexBox.Box;
+  var SColorsContainer = _flexBox.Flex;
   var SPlusButton = 'div';
-  return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SColors, _ref4.cn("SColors", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "role": 'list',
+  return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SColorsContainer, _ref4.cn("SColorsContainer", {}), /*#__PURE__*/_react["default"].createElement(SColors, _ref4.cn("SColors", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+    "role": 'listbox',
+    "aria-orientation": 'horizontal',
     "aria-label": getI18nText('customColors')
   }, _ref2))), Children.origin ? /*#__PURE__*/_react["default"].createElement(Children, _ref4.cn("Children", {})) : colors === null || colors === void 0 ? void 0 : colors.map(function (color) {
     return /*#__PURE__*/_react["default"].createElement(_ColorPicker.PaletteManager.Item, {
       value: color,
       key: color
     });
-  }), /*#__PURE__*/_react["default"].createElement(SPlusButton, _ref4.cn("SPlusButton", {
+  })), /*#__PURE__*/_react["default"].createElement(SPlusButton, _ref4.cn("SPlusButton", {
     "onClick": onPlusButtonClick,
-    "aria-hidden": 'true'
+    "role": 'button',
+    "aria-label": getI18nText('addColor')
   }), /*#__PURE__*/_react["default"].createElement(_m["default"], _ref4.cn("MathPlusM", {
-    "color": 'gray-500'
+    "color": 'icon-primary-neutral'
   }))));
 }
 //# sourceMappingURL=colors.js.map

package/color-picker/lib/cjs/components/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","names":["_core","require","_react","_interopRequireDefault","_flexBox","_m","_ColorPicker","_interopRequireWildcard","Colors","props","_ref","arguments[0]","_ref3","Children","styles","colors","getI18nText","SColors","Box","sstyled","createElement","cn","_objectSpread2","assignProps","origin","map","color","Item","value","key","ColorsCustom","_ref2","_ref4","onPlusButtonClick","SPlusButton","PaletteManager"],"sources":["../../../src/components/colors.tsx"],"sourcesContent":["import React from 'react';\nimport { Root, sstyled } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport MathPlusM from '@semcore/icon/MathPlus/m';\nimport ColorPicker, { PaletteManager } from '../ColorPicker';\n\ntype ColorsAsProps = {\n  styles?: React.CSSProperties;\n  colors?: string[];\n  Children: any;\n  getI18nText: (messageId: string, values?: { [key: string]: string | number }) => string;\n};\n\ntype ColorsCustomAsProps = ColorsAsProps & {\n  onPlusButtonClick?: React.MouseEventHandler;\n};\n\nexport function Colors(props: ColorsAsProps) {\n  const { Children, styles, colors, getI18nText } = props;\n  const SColors = Root;\n\n  return sstyled(styles)(\n    <SColors render={Box} role='list' aria-label={getI18nText('presetColors')}>\n      {Children.origin ? (\n        <Children />\n      ) : (\n        colors?.map((color) => <ColorPicker.Item value={color} key={color} />)\n      )}\n    </SColors>,\n  ) as React.ReactElement;\n}\n\nexport function ColorsCustom(props: ColorsCustomAsProps) {\n  const { Children, styles, colors, onPlusButtonClick, getI18nText } = props;\n  const SColors = Root;\n  const SPlusButton = 'div';\n\n  return sstyled(styles)(\n    <SColors render={Box} role='list' aria-label={getI18nText('customColors')}>\n      {Children.origin ? (\n        <Children />\n      ) : (\n        colors?.map((color) => <PaletteManager.Item value={color} key={color} />)\n      )}\n      <SPlusButton onClick={onPlusButtonClick} aria-hidden='true'>\n        <MathPlusM color='gray-500' />\n      </SPlusButton>\n    </SColors>,\n  ) as React.ReactElement;\n}\n"],"mappings":";;;;;;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AADA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,EAAA,GAAAF,sBAAA,CAAAF,OAAA;AACA,IAAAK,YAAA,GAAAC,uBAAA,CAAAN,OAAA;AAaO,SAASO,MAAMA,CAACC,KAAoB,EAAE;EAAA,IAAAC,IAAA,GAAAC,YAAA;IAAAC,KAAA;EAC3C,IAAQC,QAAQ,GAAkCJ,KAAK,CAA/CI,QAAQ;IAAEC,MAAM,GAA0BL,KAAK,CAArCK,MAAM;IAAEC,MAAM,GAAkBN,KAAK,CAA7BM,MAAM;IAAEC,WAAW,GAAKP,KAAK,CAArBO,WAAW;EAC7C,IAAMC,OAAO,GAGMC,YAAG;EADtB,OAAAN,KAAA,GAAO,IAAAO,aAAO,EAACL,MAAM,CAAC,eACpBZ,MAAA,YAAAkB,aAAA,CAACH,OAAO,EAAAL,KAAA,CAAAS,EAAA,gBAAAC,cAAA,qBAAAtB,KAAA,CAAAuB,WAAA;IAAA,QAAmB,MAAM;IAAA,cAAaP,WAAW,CAAC,cAAc;EAAC,GAAAN,IAAA,KACtEG,QAAQ,CAACW,MAAM,gBACdtB,MAAA,YAAAkB,aAAA,CAACP,QAAQ,EAAAD,KAAA,CAAAS,EAAA,iBAAG,GAEZN,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEU,GAAG,CAAC,UAACC,KAAK;IAAA,oBAAKxB,MAAA,YAAAkB,aAAA,CAACd,YAAA,WAAW,CAACqB,IAAI;MAACC,KAAK,EAAEF,KAAM;MAACG,GAAG,EAAEH;IAAM,EAAG;EAAA,EACtE,CACO;AAEd;AAEO,SAASI,YAAYA,CAACrB,KAA0B,EAAE;EAAA,IAAAsB,KAAA,GAAApB,YAAA;IAAAqB,KAAA;EACvD,IAAQnB,QAAQ,GAAqDJ,KAAK,CAAlEI,QAAQ;IAAEC,MAAM,GAA6CL,KAAK,CAAxDK,MAAM;IAAEC,MAAM,GAAqCN,KAAK,CAAhDM,MAAM;IAAEkB,iBAAiB,GAAkBxB,KAAK,CAAxCwB,iBAAiB;IAAEjB,WAAW,GAAKP,KAAK,CAArBO,WAAW;EAChE,IAAMC,OAAO,GAIMC,YAAG;EAHtB,IAAMgB,WAAW,GAAG,KAAK;EAEzB,OAAAF,KAAA,GAAO,IAAAb,aAAO,EAACL,MAAM,CAAC,eACpBZ,MAAA,YAAAkB,aAAA,CAACH,OAAO,EAAAe,KAAA,CAAAX,EAAA,gBAAAC,cAAA,qBAAAtB,KAAA,CAAAuB,WAAA;IAAA,QAAmB,MAAM;IAAA,cAAaP,WAAW,CAAC,cAAc;EAAC,GAAAe,KAAA,KACtElB,QAAQ,CAACW,MAAM,gBACdtB,MAAA,YAAAkB,aAAA,CAACP,QAAQ,EAAAmB,KAAA,CAAAX,EAAA,iBAAG,GAEZN,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEU,GAAG,CAAC,UAACC,KAAK;IAAA,oBAAKxB,MAAA,YAAAkB,aAAA,CAACd,YAAA,CAAA6B,cAAc,CAACR,IAAI;MAACC,KAAK,EAAEF,KAAM;MAACG,GAAG,EAAEH;IAAM,EAAG;EAAA,EACzE,eACDxB,MAAA,YAAAkB,aAAA,CAACc,WAAW,EAAAF,KAAA,CAAAX,EAAA;IAAA,WAAUY,iBAAiB;IAAA,eAAc;EAAM,iBACzD/B,MAAA,YAAAkB,aAAA,CAACf,EAAA,WAAS,EAAA2B,KAAA,CAAAX,EAAA;IAAA,SAAO;EAAU,GAAG,CAClB,CACN;AAEd"}
+{"version":3,"file":"colors.js","names":["_core","require","_react","_interopRequireDefault","_flexBox","_m","_ColorPicker","_interopRequireWildcard","Colors","props","_ref","arguments[0]","_ref3","Children","styles","colors","getI18nText","SColors","Box","sstyled","createElement","cn","_objectSpread2","assignProps","origin","map","color","Item","value","key","ColorsCustom","_ref2","_ref4","onPlusButtonClick","SColorsContainer","Flex","SPlusButton","PaletteManager"],"sources":["../../../src/components/colors.tsx"],"sourcesContent":["import React from 'react';\nimport { Root, sstyled } from '@semcore/core';\nimport { Box, Flex } from '@semcore/flex-box';\nimport MathPlusM from '@semcore/icon/MathPlus/m';\nimport ColorPicker, { PaletteManager } from '../ColorPicker';\n\ntype ColorsAsProps = {\n  styles?: React.CSSProperties;\n  colors?: string[];\n  Children: any;\n  getI18nText: (messageId: string, values?: { [key: string]: string | number }) => string;\n};\n\ntype ColorsCustomAsProps = ColorsAsProps & {\n  onPlusButtonClick?: React.MouseEventHandler;\n};\n\nexport function Colors(props: ColorsAsProps) {\n  const { Children, styles, colors, getI18nText } = props;\n  const SColors = Root;\n\n  return sstyled(styles)(\n    <SColors\n      render={Box}\n      role='listbox'\n      aria-orientation='horizontal'\n      aria-label={getI18nText('presetColors')}\n    >\n      {Children.origin ? (\n        <Children />\n      ) : (\n        colors?.map((color) => <ColorPicker.Item value={color} key={color} />)\n      )}\n    </SColors>,\n  ) as React.ReactElement;\n}\n\nexport function ColorsCustom(props: ColorsCustomAsProps) {\n  const { Children, styles, colors, onPlusButtonClick, getI18nText } = props;\n  const SColors = Root;\n  const SColorsContainer = Flex;\n  const SPlusButton = 'div';\n\n  return sstyled(styles)(\n    <SColorsContainer>\n      <SColors\n        render={Box}\n        role='listbox'\n        aria-orientation='horizontal'\n        aria-label={getI18nText('customColors')}\n      >\n        {Children.origin ? (\n          <Children />\n        ) : (\n          colors?.map((color) => <PaletteManager.Item value={color} key={color} />)\n        )}\n      </SColors>\n      <SPlusButton onClick={onPlusButtonClick} role='button' aria-label={getI18nText('addColor')}>\n        <MathPlusM color='icon-primary-neutral' />\n      </SPlusButton>\n    </SColorsContainer>,\n  ) as React.ReactElement;\n}\n"],"mappings":"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"}

package/color-picker/lib/cjs/style/color-picker.shadow.css

@@ -55,7 +55,7 @@ SItemContainer:not([value]) {
   }
 }
 
-SColors {
+SColorsContainer, SColors {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -106,8 +106,8 @@ SDefaultTrigger[keyboardFocused] {
 
 STriggerCircle {
   position: relative;
-  width: 12px;
-  height: 12px;
+  width: 16px;
+  height: 16px;
   /* disable-tokens-validator */
   margin-right: calc(var(--intergalactic-spacing-1x, 4px) + 1px);
   border-radius: 50%;
@@ -163,4 +163,4 @@ SItemColor {
 SConfirmColor[hidden],
 SClearConfirm[hidden] {
   display: none;
-}
+}

package/color-picker/lib/cjs/translations/de.json

@@ -1,13 +1,13 @@
 {
   "currentColor": "Farbfeld, aktuelle Farbe ist {color}",
-  "emptyColor": "Farbfeld, leer",
-  "goToPaletteHint": "{currentColor}, drücken Sie Tab, um zur Palette zu gehen, oder klicken Sie, um die Palette auszublenden",
-  "palette": "Farbpalette, drücken Sie Tab+Umschalt, um zum Farbfeld zurückzukehren",
+  "emptyColor": "Feld für Farbe",
+  "palette": "Farbpalette",
   "presetColors": "Voreingestellte Farben",
-  "customColors": "Container für Feld für benutzerdefinierte Farbe",
-  "itemColor": "Farbe {color}",
+  "customColors": "Benutzerdefinierte voreingestellte Farben",
+  "addColor": "Farbe hinzufügen",
   "clearColor": "Farbe löschen",
-  "colorField": "Feld für benutzerdefinierte Farbe, HEX-Format",
+  "colorField": "Benutzerdefinierte Farbe, HEX-Format",
   "colorFieldConfirm": "Farbe zur Liste benutzerdefinierter Farben hinzufügen",
-  "colorFieldClear": "Feld für benutzerdefinierte Farbe leeren"
+  "colorFieldClear": "Feld für benutzerdefinierte Farbe leeren",
+  "deleteColorDescriber": "Farbe mit Rücktaste löschen"
 }

package/color-picker/lib/cjs/translations/en.json

@@ -1,13 +1,13 @@
 {
   "currentColor": "Color field, current color is {color}",
-  "emptyColor": "Color field, empty",
-  "goToPaletteHint": "{currentColor}, press Tab to go to palette or click to hide palette",
-  "palette": "Colors palette, press Tab+Shift to go back to color field",
+  "emptyColor": "Color field",
+  "palette": "Colors palette",
   "presetColors": "Preset colors",
-  "customColors": "Custom color field container",
-  "itemColor": "Color {color}",
+  "customColors": "Custom preset colors",
+  "addColor": "Add color",
   "clearColor": "Clear color",
-  "colorField": "Custom color field, HEX format",
+  "colorField": "Custom color, HEX format",
   "colorFieldConfirm": "Add color to the list of custom colors",
-  "colorFieldClear": "Clear custom color field"
+  "colorFieldClear": "Clear custom color field",
+  "deleteColorDescriber": "Delete color with backspace"
 }

package/color-picker/lib/cjs/translations/es.json

@@ -1,13 +1,13 @@
 {
   "currentColor": "Campo color, el color actual es {color}",
-  "emptyColor": "Campo color, vacío",
-  "goToPaletteHint": "{currentColor}, presiona Tab para ir a la paleta o clic para ocultar la paleta",
-  "palette": "Color de la paleta, presiona Tab+Shift para volver al color de campo",
+  "emptyColor": "Color field",
+  "palette": "Colors palette",
   "presetColors": "Colores predefinidos",
-  "customColors": "Contenedor de campo de color personalizado",
-  "itemColor": "Color {color}",
+  "customColors": "Custom preset colors",
+  "addColor": "Add color",
   "clearColor": "Borar color",
-  "colorField": "Campo de color personalizado, formato HEX",
+  "colorField": "Custom color, HEX format",
   "colorFieldConfirm": "Añadir color a la lista de colores personalizados",
-  "colorFieldClear": "Borrar campo de color personalizado"
+  "colorFieldClear": "Borrar campo de color personalizado",
+  "deleteColorDescriber": "Delete color with backspace"
 }

package/color-picker/lib/cjs/translations/fr.json

@@ -1,13 +1,13 @@
 {
   "currentColor": "Champ couleur, la couleur actuelle est le {color}",
-  "emptyColor": "Champ couleur, vide",
-  "goToPaletteHint": "{currentColor}, appuyez sur la touche Tab pour accéder à la palette ou cliquez pour masquer la palette",
-  "palette": "Palette de couleurs, appuyez sur Tab+Shift pour revenir au champ couleur",
+  "emptyColor": "Color field",
+  "palette": "Colors palette",
   "presetColors": "Couleurs prédéfinies",
-  "customColors": "Conteneur du champ couleurs personnalisées",
-  "itemColor": "Coleur {color}",
+  "customColors": "Custom preset colors",
+  "addColor": "Add color",
   "clearColor": "Supprimer la couleur",
-  "colorField": "Champ couleurs personnalisées, format HEX",
+  "colorField": "Custom color, HEX format",
   "colorFieldConfirm": "Ajouter une couleur à la liste des couleurs personnalisées",
-  "colorFieldClear": "Vider le champ couleurs personnalisées"
+  "colorFieldClear": "Vider le champ couleurs personnalisées",
+  "deleteColorDescriber": "Delete color with backspace"
 }

package/color-picker/lib/cjs/translations/it.json

@@ -1,13 +1,13 @@
 {
   "currentColor": "Campo colore, il colore attuale è {color}",
-  "emptyColor": "Campo colore, vuoto",
-  "goToPaletteHint": "{currentColor}, premi Tab per tornare alla palette o clicca per nascondere la palette",
-  "palette": "Palette dei colori, premi Tab+Shift per tornare al campo colore",
+  "emptyColor": "Color field",
+  "palette": "Colors palette",
   "presetColors": "Colori predefiniti",
-  "customColors": "Contenitore del campo colore personalizzato",
-  "itemColor": "Colore {color}",
+  "customColors": "Custom preset colors",
+  "addColor": "Add color",
   "clearColor": "Svuota il campo colore",
-  "colorField": "Campo colore personalizzato, formato HEX",
+  "colorField": "Custom color, HEX format",
   "colorFieldConfirm": "Aggiungi il colore alla lista dei colori personalizzati",
-  "colorFieldClear": "Svuota il campo colore personalizzato"
+  "colorFieldClear": "Svuota il campo colore personalizzato",
+  "deleteColorDescriber": "Delete color with backspace"
 }

package/color-picker/lib/cjs/translations/ja.json

@@ -1,13 +1,13 @@
 {
   "currentColor": "カラーフィールド、現在のカラーは{color}です",
-  "emptyColor": "カラーフィールド、空欄",
-  "goToPaletteHint": "{currentColor}、Tabキーでパレットに移動、またはクリックでパレット非表示",
-  "palette": "カラーパレット、Tab+Shiftキーでカラーフィールドに戻る",
+  "emptyColor": "Color field",
+  "palette": "Colors palette",
   "presetColors": "プリセットカラー",
-  "customColors": "カラーフィールドコンテナをカスタマイズ",
-  "itemColor": "カラー{color}",
+  "customColors": "Custom preset colors",
+  "addColor": "Add color",
   "clearColor": "カラーをクリア",
-  "colorField": "カラーフィールドをカスタマイズ、HEXフォーマット",
+  "colorField": "Custom color, HEX format",
   "colorFieldConfirm": "カスタムカラーリストに色を追加",
-  "colorFieldClear": "カスタムカラーフィールドをクリア"
+  "colorFieldClear": "カスタムカラーフィールドをクリア",
+  "deleteColorDescriber": "Delete color with backspace"
 }

package/color-picker/lib/cjs/translations/ko.json

@@ -1,13 +1,13 @@
 {
   "currentColor": "색상 필드, 현재 색상은 {color}",
-  "emptyColor": "색상 필드, 비어 있음",
-  "goToPaletteHint": "{currentColor}, 팔레트로 이동하려면 Tab 키를 누르고, 팔레트를 숨기려면 클릭하세요",
-  "palette": "색상 팔레트, 색상 필드로 돌아가려면 Tab+Shift 키를 누르세요",
+  "emptyColor": "Color field",
+  "palette": "Colors palette",
   "presetColors": "색상 프리셋",
-  "customColors": "맞춤 색상 필드 컨테이너",
-  "itemColor": "{color} 색상",
+  "customColors": "Custom preset colors",
+  "addColor": "Add color",
   "clearColor": "색상 지우기",
-  "colorField": "맞춤 색상 필드, HEX 형식",
+  "colorField": "Custom color, HEX format",
   "colorFieldConfirm": "색상을 맞춤 색상 목록에 추가합니다",
-  "colorFieldClear": "맞춤 색상 필드 지우기"
+  "colorFieldClear": "맞춤 색상 필드 지우기",
+  "deleteColorDescriber": "Delete color with backspace"
 }

package/color-picker/lib/cjs/translations/nl.json

@@ -1,13 +1,13 @@
 {
   "currentColor": "Kleurveld, huidige kleur is {color}",
-  "emptyColor": "Kleurveld, leeg",
-  "goToPaletteHint": "{currentColor}, druk op Tab om naar het kleurenpalet te gaan of klik om het kleurenpalet te verbergen",
-  "palette": "Kleurenpalet, druk op Tab+Shift om terug te gaan naar het kleurveld",
+  "emptyColor": "Color field",
+  "palette": "Colors palette",
   "presetColors": "Vooraf ingestelde kleuren",
-  "customColors": "Container voor aangepast kleurveld",
-  "itemColor": "Kleur {color}",
+  "customColors": "Custom preset colors",
+  "addColor": "Add color",
   "clearColor": "Wis kleur",
-  "colorField": "Aangepast kleurveld, HEX-indeling",
+  "colorField": "Custom color, HEX format",
   "colorFieldConfirm": "Voeg kleur toe aan overzicht van aangepaste kleuren",
-  "colorFieldClear": "Wis aangepast kleurveld"
+  "colorFieldClear": "Wis aangepast kleurveld",
+  "deleteColorDescriber": "Delete color with backspace"
 }

package/color-picker/lib/cjs/translations/pl.json

@@ -1,13 +1,13 @@
 {
   "currentColor": "Pole koloru, bieżący kolor to {color}",
-  "emptyColor": "Pole koloru, puste",
-  "goToPaletteHint": "{currentColor}, naciśnij Tab, aby przejść do palety, lub kliknij, aby ukryć paletę",
-  "palette": "Paleta kolorów, naciśnij Tab+Shift, aby wrócić do pola koloru",
+  "emptyColor": "Color field",
+  "palette": "Colors palette",
   "presetColors": "Gotowe kolory",
-  "customColors": "Kontener pola koloru niestandardowego",
-  "itemColor": "Kolor {color}",
+  "customColors": "Custom preset colors",
+  "addColor": "Add color",
   "clearColor": "Wyczyść kolor",
-  "colorField": "Pole koloru niestandardowego, format szesnastkowy",
+  "colorField": "Custom color, HEX format",
   "colorFieldConfirm": "Dodaj kolor do listy kolorów niestandardowych",
-  "colorFieldClear": "Wyczyść pole koloru niestandardowego"
+  "colorFieldClear": "Wyczyść pole koloru niestandardowego",
+  "deleteColorDescriber": "Delete color with backspace"
 }