@commercetools-uikit/secondary-icon-button 0.0.0-canary-2021830134526

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 commercetools GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,87 @@
+<!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
+<!-- This file is created by the `yarn generate-readme` script. -->
+
+# SecondaryIconButton
+
+## Description
+
+Secondary Icon Buttons are "icon-only" buttons and a restricted version of the \`\<IconButton>\`. They trigger an action when clicked (\`onClick\` prop). You must also pass a label for accessibility reasons.
+
+## Installation
+
+```
+yarn add @commercetools-uikit/secondary-icon-button
+```
+
+```
+npm --save install @commercetools-uikit/secondary-icon-button
+```
+
+Additionally install the peer dependencies (if not present)
+
+```
+yarn add react
+```
+
+```
+npm --save install react
+```
+
+## Usage
+
+```jsx
+import SecondaryIconButton from '@commercetools-uikit/secondary-icon-button';
+import { InformationIcon } from '@commercetools-uikit/icons';
+
+const Example = () => (
+  <SecondaryIconButton
+    icon={<InformationIcon />}
+    label="A label text"
+    onClick={() => alert('Button clicked')}
+  />
+);
+
+export default Example;
+```
+
+## Properties
+
+| Props        | Type                                                             | Required | Default    | Description                                                                                                                                                                                                                                                                       |
+| ------------ | ---------------------------------------------------------------- | :------: | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `as`         | `TStringOrComponent`                                             |          |            | You may pass in a string like "a" to have the button element render an anchor tag, or&#xA;you could pass in a React Component, like a `Link`.&#xA;<br />&#xA;The `<SecondaryIconButton>` additionally accepts any props or attributes specific to the given element or component. |
+| `type`       | `union`<br/>Possible values:<br/>`'submit' , 'reset' , 'button'` |          | `'button'` | Used as the HTML type attribute.                                                                                                                                                                                                                                                  |
+| `icon`       | `ReactElement`                                                   |          |            | An <Icon /> component.                                                                                                                                                                                                                                                            |
+| `color`      | `union`<br/>Possible values:<br/>`'solid' , 'primary'`           |          | `'solid'`  | Indicates the color scheme of the button.                                                                                                                                                                                                                                         |
+| `label`      | `string`                                                         |    ✅    |            | Should describe what the button does, for accessibility purposes (screen-reader users)                                                                                                                                                                                            |
+| `isDisabled` | `boolean`                                                        |          | `false`    | Tells when the button should present a disabled state.                                                                                                                                                                                                                            |
+| `onClick`    | `Function`<br/>[See signature.](#signature-onClick)              |          |            | Handler when the button is clicked.&#xA;<br />&#xA;Signature: (event: MouseEvent\<HTMLButtonElement) => void                                                                                                                                                                      |
+
+## Signatures
+
+### Signature `onClick`
+
+```ts
+(
+  event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>
+) => void
+```
+
+The component further forwards all valid HTML attributes to the underlying `button` component.
+
+## Note
+
+The size of the button should be adjusted directly on the passed `Icon` component. Example:
+
+```jsx
+<SecondaryIconButton
+  icon={<ArrowRightIcon size="small" />}
+  label="Next"
+  onClick={() => alert('Button clicked')}
+/>
+```
+
+## Examples in the Merchant Center
+
+Mostly in all places where you just need a "clickable" icon, without the complex behaviors of the `IconButton`.
+
+- Pagination list: Go to next page

package/dist/commercetools-uikit-secondary-icon-button.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./declarations/src/index";
+export { default } from "./declarations/src/index";

package/dist/commercetools-uikit-secondary-icon-button.cjs.dev.js

@@ -0,0 +1,124 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _pt = require('prop-types');
+require('react');
+var react = require('@emotion/react');
+var omit = require('lodash/omit');
+var utils = require('@commercetools-uikit/utils');
+var AccessibleButton = require('@commercetools-uikit/accessible-button');
+var designSystem = require('@commercetools-uikit/design-system');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var _pt__default = /*#__PURE__*/_interopDefault(_pt);
+var omit__default = /*#__PURE__*/_interopDefault(omit);
+var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
+
+function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default['default'](_context = ownKeys$1(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context2; _forEachInstanceProperty__default['default'](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var getDisabledStyle = function getDisabledStyle(overwrittenVars) {
+  /* By using the css 'disabled' selector directly, we don't need additional logic to check the isDisabled prop */
+  return /*#__PURE__*/react.css("&:disabled svg{fill:", overwrittenVars.colorNeutral60, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getDisabledStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlY29uZGFyeS1pY29uLWJ1dHRvbi5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBV1kiLCJmaWxlIjoic2Vjb25kYXJ5LWljb24tYnV0dG9uLnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgVGhlbWUgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBjdXN0b21Qcm9wZXJ0aWVzIGFzIHZhcnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB0eXBlIHsgVFNlY29uZGFyeUJ1dHRvblByb3BzIH0gZnJvbSAnLi9zZWNvbmRhcnktaWNvbi1idXR0b24nO1xuXG50eXBlIFRFeHRlbmRlZFRoZW1lID0ge1xuICBba2V5OiBzdHJpbmddOiBzdHJpbmc7XG59ICYgVGhlbWU7XG5cbmNvbnN0IGdldERpc2FibGVkU3R5bGUgPSAob3ZlcndyaXR0ZW5WYXJzOiBURXh0ZW5kZWRUaGVtZSkgPT4ge1xuICAvKiBCeSB1c2luZyB0aGUgY3NzICdkaXNhYmxlZCcgc2VsZWN0b3IgZGlyZWN0bHksIHdlIGRvbid0IG5lZWQgYWRkaXRpb25hbCBsb2dpYyB0byBjaGVjayB0aGUgaXNEaXNhYmxlZCBwcm9wICovXG4gIHJldHVybiBjc3NgXG4gICAgJjpkaXNhYmxlZCBzdmcge1xuICAgICAgZmlsbDogJHtvdmVyd3JpdHRlblZhcnMuY29sb3JOZXV0cmFsNjB9O1xuICAgIH1cbiAgYDtcbn07XG5cbmNvbnN0IGdldENvbG9yU3R5bGUgPSAoXG4gIHByb3BzOiBQaWNrPFRTZWNvbmRhcnlCdXR0b25Qcm9wcywgJ2NvbG9yJz4sXG4gIG92ZXJ3cml0dGVuVmFyczogVEV4dGVuZGVkVGhlbWVcbikgPT4ge1xuICBzd2l0Y2ggKHByb3BzLmNvbG9yKSB7XG4gICAgY2FzZSAnc29saWQnOlxuICAgICAgcmV0dXJuIGNzc2BcbiAgICAgICAgJiBzdmcge1xuICAgICAgICAgIGZpbGw6ICR7b3ZlcndyaXR0ZW5WYXJzLmNvbG9yU29saWR9O1xuICAgICAgICB9XG4gICAgICAgICY6Zm9jdXMsXG4gICAgICAgICY6aG92ZXIgc3ZnIHtcbiAgICAgICAgICBmaWxsOiAke292ZXJ3cml0dGVuVmFycy5jb2xvclByaW1hcnl9O1xuICAgICAgICB9XG4gICAgICBgO1xuICAgIGNhc2UgJ3ByaW1hcnknOlxuICAgICAgcmV0dXJuIGNzc2BcbiAgICAgICAgJiBzdmcge1xuICAgICAgICAgIGZpbGw6ICR7b3ZlcndyaXR0ZW5WYXJzLmNvbG9yUHJpbWFyeX07XG4gICAgICAgIH1cbiAgICAgICAgJjpmb2N1cyxcbiAgICAgICAgJjpob3ZlciBzdmcge1xuICAgICAgICAgIGZpbGw6ICR7b3ZlcndyaXR0ZW5WYXJzLmNvbG9yUHJpbWFyeTI1fTtcbiAgICAgICAgfVxuICAgICAgYDtcbiAgICBkZWZhdWx0OlxuICAgICAgcmV0dXJuIGNzc2BcbiAgICAgICAgc3ZnIHtcbiAgICAgICAgICBmaWxsOiAke292ZXJ3cml0dGVuVmFycy5jb2xvclNvbGlkfTtcbiAgICAgICAgfVxuICAgICAgYDtcbiAgfVxufTtcblxuY29uc3QgZ2V0QmFzZVN0eWxlcyA9IChwcm9wczogVFNlY29uZGFyeUJ1dHRvblByb3BzLCB0aGVtZTogVGhlbWUpID0+IHtcbiAgY29uc3Qgb3ZlcndyaXR0ZW5WYXJzOiBURXh0ZW5kZWRUaGVtZSA9IHtcbiAgICAuLi52YXJzLFxuICAgIC4uLnRoZW1lLFxuICB9O1xuXG4gIHJldHVybiBbXG4gICAgY3NzYFxuICAgICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgYCxcbiAgICBnZXRDb2xvclN0eWxlKHByb3BzLCBvdmVyd3JpdHRlblZhcnMpLFxuICAgIGdldERpc2FibGVkU3R5bGUob3ZlcndyaXR0ZW5WYXJzKSxcbiAgXTtcbn07XG5cbi8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBpbXBvcnQvcHJlZmVyLWRlZmF1bHQtZXhwb3J0XG5leHBvcnQgeyBnZXRCYXNlU3R5bGVzIH07XG4iXX0= */");
+};
+
+var getColorStyle = function getColorStyle(props, overwrittenVars) {
+  switch (props.color) {
+    case 'solid':
+      return /*#__PURE__*/react.css("& svg{fill:", overwrittenVars.colorSolid, ";}&:focus,&:hover svg{fill:", overwrittenVars.colorPrimary, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getColorStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlY29uZGFyeS1pY29uLWJ1dHRvbi5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0JnQiIsImZpbGUiOiJzZWNvbmRhcnktaWNvbi1idXR0b24uc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBUaGVtZSB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGN1c3RvbVByb3BlcnRpZXMgYXMgdmFycyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHR5cGUgeyBUU2Vjb25kYXJ5QnV0dG9uUHJvcHMgfSBmcm9tICcuL3NlY29uZGFyeS1pY29uLWJ1dHRvbic7XG5cbnR5cGUgVEV4dGVuZGVkVGhlbWUgPSB7XG4gIFtrZXk6IHN0cmluZ106IHN0cmluZztcbn0gJiBUaGVtZTtcblxuY29uc3QgZ2V0RGlzYWJsZWRTdHlsZSA9IChvdmVyd3JpdHRlblZhcnM6IFRFeHRlbmRlZFRoZW1lKSA9PiB7XG4gIC8qIEJ5IHVzaW5nIHRoZSBjc3MgJ2Rpc2FibGVkJyBzZWxlY3RvciBkaXJlY3RseSwgd2UgZG9uJ3QgbmVlZCBhZGRpdGlvbmFsIGxvZ2ljIHRvIGNoZWNrIHRoZSBpc0Rpc2FibGVkIHByb3AgKi9cbiAgcmV0dXJuIGNzc2BcbiAgICAmOmRpc2FibGVkIHN2ZyB7XG4gICAgICBmaWxsOiAke292ZXJ3cml0dGVuVmFycy5jb2xvck5ldXRyYWw2MH07XG4gICAgfVxuICBgO1xufTtcblxuY29uc3QgZ2V0Q29sb3JTdHlsZSA9IChcbiAgcHJvcHM6IFBpY2s8VFNlY29uZGFyeUJ1dHRvblByb3BzLCAnY29sb3InPixcbiAgb3ZlcndyaXR0ZW5WYXJzOiBURXh0ZW5kZWRUaGVtZVxuKSA9PiB7XG4gIHN3aXRjaCAocHJvcHMuY29sb3IpIHtcbiAgICBjYXNlICdzb2xpZCc6XG4gICAgICByZXR1cm4gY3NzYFxuICAgICAgICAmIHN2ZyB7XG4gICAgICAgICAgZmlsbDogJHtvdmVyd3JpdHRlblZhcnMuY29sb3JTb2xpZH07XG4gICAgICAgIH1cbiAgICAgICAgJjpmb2N1cyxcbiAgICAgICAgJjpob3ZlciBzdmcge1xuICAgICAgICAgIGZpbGw6ICR7b3ZlcndyaXR0ZW5WYXJzLmNvbG9yUHJpbWFyeX07XG4gICAgICAgIH1cbiAgICAgIGA7XG4gICAgY2FzZSAncHJpbWFyeSc6XG4gICAgICByZXR1cm4gY3NzYFxuICAgICAgICAmIHN2ZyB7XG4gICAgICAgICAgZmlsbDogJHtvdmVyd3JpdHRlblZhcnMuY29sb3JQcmltYXJ5fTtcbiAgICAgICAgfVxuICAgICAgICAmOmZvY3VzLFxuICAgICAgICAmOmhvdmVyIHN2ZyB7XG4gICAgICAgICAgZmlsbDogJHtvdmVyd3JpdHRlblZhcnMuY29sb3JQcmltYXJ5MjV9O1xuICAgICAgICB9XG4gICAgICBgO1xuICAgIGRlZmF1bHQ6XG4gICAgICByZXR1cm4gY3NzYFxuICAgICAgICBzdmcge1xuICAgICAgICAgIGZpbGw6ICR7b3ZlcndyaXR0ZW5WYXJzLmNvbG9yU29saWR9O1xuICAgICAgICB9XG4gICAgICBgO1xuICB9XG59O1xuXG5jb25zdCBnZXRCYXNlU3R5bGVzID0gKHByb3BzOiBUU2Vjb25kYXJ5QnV0dG9uUHJvcHMsIHRoZW1lOiBUaGVtZSkgPT4ge1xuICBjb25zdCBvdmVyd3JpdHRlblZhcnM6IFRFeHRlbmRlZFRoZW1lID0ge1xuICAgIC4uLnZhcnMsXG4gICAgLi4udGhlbWUsXG4gIH07XG5cbiAgcmV0dXJuIFtcbiAgICBjc3NgXG4gICAgICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICBgLFxuICAgIGdldENvbG9yU3R5bGUocHJvcHMsIG92ZXJ3cml0dGVuVmFycyksXG4gICAgZ2V0RGlzYWJsZWRTdHlsZShvdmVyd3JpdHRlblZhcnMpLFxuICBdO1xufTtcblxuLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIGltcG9ydC9wcmVmZXItZGVmYXVsdC1leHBvcnRcbmV4cG9ydCB7IGdldEJhc2VTdHlsZXMgfTtcbiJdfQ== */");
+
+    case 'primary':
+      return /*#__PURE__*/react.css("& svg{fill:", overwrittenVars.colorPrimary, ";}&:focus,&:hover svg{fill:", overwrittenVars.colorPrimary25, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getColorStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlY29uZGFyeS1pY29uLWJ1dHRvbi5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0NnQiIsImZpbGUiOiJzZWNvbmRhcnktaWNvbi1idXR0b24uc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBUaGVtZSB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGN1c3RvbVByb3BlcnRpZXMgYXMgdmFycyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHR5cGUgeyBUU2Vjb25kYXJ5QnV0dG9uUHJvcHMgfSBmcm9tICcuL3NlY29uZGFyeS1pY29uLWJ1dHRvbic7XG5cbnR5cGUgVEV4dGVuZGVkVGhlbWUgPSB7XG4gIFtrZXk6IHN0cmluZ106IHN0cmluZztcbn0gJiBUaGVtZTtcblxuY29uc3QgZ2V0RGlzYWJsZWRTdHlsZSA9IChvdmVyd3JpdHRlblZhcnM6IFRFeHRlbmRlZFRoZW1lKSA9PiB7XG4gIC8qIEJ5IHVzaW5nIHRoZSBjc3MgJ2Rpc2FibGVkJyBzZWxlY3RvciBkaXJlY3RseSwgd2UgZG9uJ3QgbmVlZCBhZGRpdGlvbmFsIGxvZ2ljIHRvIGNoZWNrIHRoZSBpc0Rpc2FibGVkIHByb3AgKi9cbiAgcmV0dXJuIGNzc2BcbiAgICAmOmRpc2FibGVkIHN2ZyB7XG4gICAgICBmaWxsOiAke292ZXJ3cml0dGVuVmFycy5jb2xvck5ldXRyYWw2MH07XG4gICAgfVxuICBgO1xufTtcblxuY29uc3QgZ2V0Q29sb3JTdHlsZSA9IChcbiAgcHJvcHM6IFBpY2s8VFNlY29uZGFyeUJ1dHRvblByb3BzLCAnY29sb3InPixcbiAgb3ZlcndyaXR0ZW5WYXJzOiBURXh0ZW5kZWRUaGVtZVxuKSA9PiB7XG4gIHN3aXRjaCAocHJvcHMuY29sb3IpIHtcbiAgICBjYXNlICdzb2xpZCc6XG4gICAgICByZXR1cm4gY3NzYFxuICAgICAgICAmIHN2ZyB7XG4gICAgICAgICAgZmlsbDogJHtvdmVyd3JpdHRlblZhcnMuY29sb3JTb2xpZH07XG4gICAgICAgIH1cbiAgICAgICAgJjpmb2N1cyxcbiAgICAgICAgJjpob3ZlciBzdmcge1xuICAgICAgICAgIGZpbGw6ICR7b3ZlcndyaXR0ZW5WYXJzLmNvbG9yUHJpbWFyeX07XG4gICAgICAgIH1cbiAgICAgIGA7XG4gICAgY2FzZSAncHJpbWFyeSc6XG4gICAgICByZXR1cm4gY3NzYFxuICAgICAgICAmIHN2ZyB7XG4gICAgICAgICAgZmlsbDogJHtvdmVyd3JpdHRlblZhcnMuY29sb3JQcmltYXJ5fTtcbiAgICAgICAgfVxuICAgICAgICAmOmZvY3VzLFxuICAgICAgICAmOmhvdmVyIHN2ZyB7XG4gICAgICAgICAgZmlsbDogJHtvdmVyd3JpdHRlblZhcnMuY29sb3JQcmltYXJ5MjV9O1xuICAgICAgICB9XG4gICAgICBgO1xuICAgIGRlZmF1bHQ6XG4gICAgICByZXR1cm4gY3NzYFxuICAgICAgICBzdmcge1xuICAgICAgICAgIGZpbGw6ICR7b3ZlcndyaXR0ZW5WYXJzLmNvbG9yU29saWR9O1xuICAgICAgICB9XG4gICAgICBgO1xuICB9XG59O1xuXG5jb25zdCBnZXRCYXNlU3R5bGVzID0gKHByb3BzOiBUU2Vjb25kYXJ5QnV0dG9uUHJvcHMsIHRoZW1lOiBUaGVtZSkgPT4ge1xuICBjb25zdCBvdmVyd3JpdHRlblZhcnM6IFRFeHRlbmRlZFRoZW1lID0ge1xuICAgIC4uLnZhcnMsXG4gICAgLi4udGhlbWUsXG4gIH07XG5cbiAgcmV0dXJuIFtcbiAgICBjc3NgXG4gICAgICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICBgLFxuICAgIGdldENvbG9yU3R5bGUocHJvcHMsIG92ZXJ3cml0dGVuVmFycyksXG4gICAgZ2V0RGlzYWJsZWRTdHlsZShvdmVyd3JpdHRlblZhcnMpLFxuICBdO1xufTtcblxuLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIGltcG9ydC9wcmVmZXItZGVmYXVsdC1leHBvcnRcbmV4cG9ydCB7IGdldEJhc2VTdHlsZXMgfTtcbiJdfQ== */");
+
+    default:
+      return /*#__PURE__*/react.css("svg{fill:", overwrittenVars.colorSolid, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getColorStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlY29uZGFyeS1pY29uLWJ1dHRvbi5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNENnQiIsImZpbGUiOiJzZWNvbmRhcnktaWNvbi1idXR0b24uc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBUaGVtZSB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGN1c3RvbVByb3BlcnRpZXMgYXMgdmFycyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHR5cGUgeyBUU2Vjb25kYXJ5QnV0dG9uUHJvcHMgfSBmcm9tICcuL3NlY29uZGFyeS1pY29uLWJ1dHRvbic7XG5cbnR5cGUgVEV4dGVuZGVkVGhlbWUgPSB7XG4gIFtrZXk6IHN0cmluZ106IHN0cmluZztcbn0gJiBUaGVtZTtcblxuY29uc3QgZ2V0RGlzYWJsZWRTdHlsZSA9IChvdmVyd3JpdHRlblZhcnM6IFRFeHRlbmRlZFRoZW1lKSA9PiB7XG4gIC8qIEJ5IHVzaW5nIHRoZSBjc3MgJ2Rpc2FibGVkJyBzZWxlY3RvciBkaXJlY3RseSwgd2UgZG9uJ3QgbmVlZCBhZGRpdGlvbmFsIGxvZ2ljIHRvIGNoZWNrIHRoZSBpc0Rpc2FibGVkIHByb3AgKi9cbiAgcmV0dXJuIGNzc2BcbiAgICAmOmRpc2FibGVkIHN2ZyB7XG4gICAgICBmaWxsOiAke292ZXJ3cml0dGVuVmFycy5jb2xvck5ldXRyYWw2MH07XG4gICAgfVxuICBgO1xufTtcblxuY29uc3QgZ2V0Q29sb3JTdHlsZSA9IChcbiAgcHJvcHM6IFBpY2s8VFNlY29uZGFyeUJ1dHRvblByb3BzLCAnY29sb3InPixcbiAgb3ZlcndyaXR0ZW5WYXJzOiBURXh0ZW5kZWRUaGVtZVxuKSA9PiB7XG4gIHN3aXRjaCAocHJvcHMuY29sb3IpIHtcbiAgICBjYXNlICdzb2xpZCc6XG4gICAgICByZXR1cm4gY3NzYFxuICAgICAgICAmIHN2ZyB7XG4gICAgICAgICAgZmlsbDogJHtvdmVyd3JpdHRlblZhcnMuY29sb3JTb2xpZH07XG4gICAgICAgIH1cbiAgICAgICAgJjpmb2N1cyxcbiAgICAgICAgJjpob3ZlciBzdmcge1xuICAgICAgICAgIGZpbGw6ICR7b3ZlcndyaXR0ZW5WYXJzLmNvbG9yUHJpbWFyeX07XG4gICAgICAgIH1cbiAgICAgIGA7XG4gICAgY2FzZSAncHJpbWFyeSc6XG4gICAgICByZXR1cm4gY3NzYFxuICAgICAgICAmIHN2ZyB7XG4gICAgICAgICAgZmlsbDogJHtvdmVyd3JpdHRlblZhcnMuY29sb3JQcmltYXJ5fTtcbiAgICAgICAgfVxuICAgICAgICAmOmZvY3VzLFxuICAgICAgICAmOmhvdmVyIHN2ZyB7XG4gICAgICAgICAgZmlsbDogJHtvdmVyd3JpdHRlblZhcnMuY29sb3JQcmltYXJ5MjV9O1xuICAgICAgICB9XG4gICAgICBgO1xuICAgIGRlZmF1bHQ6XG4gICAgICByZXR1cm4gY3NzYFxuICAgICAgICBzdmcge1xuICAgICAgICAgIGZpbGw6ICR7b3ZlcndyaXR0ZW5WYXJzLmNvbG9yU29saWR9O1xuICAgICAgICB9XG4gICAgICBgO1xuICB9XG59O1xuXG5jb25zdCBnZXRCYXNlU3R5bGVzID0gKHByb3BzOiBUU2Vjb25kYXJ5QnV0dG9uUHJvcHMsIHRoZW1lOiBUaGVtZSkgPT4ge1xuICBjb25zdCBvdmVyd3JpdHRlblZhcnM6IFRFeHRlbmRlZFRoZW1lID0ge1xuICAgIC4uLnZhcnMsXG4gICAgLi4udGhlbWUsXG4gIH07XG5cbiAgcmV0dXJuIFtcbiAgICBjc3NgXG4gICAgICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICBgLFxuICAgIGdldENvbG9yU3R5bGUocHJvcHMsIG92ZXJ3cml0dGVuVmFycyksXG4gICAgZ2V0RGlzYWJsZWRTdHlsZShvdmVyd3JpdHRlblZhcnMpLFxuICBdO1xufTtcblxuLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIGltcG9ydC9wcmVmZXItZGVmYXVsdC1leHBvcnRcbmV4cG9ydCB7IGdldEJhc2VTdHlsZXMgfTtcbiJdfQ== */");
+  }
+};
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "pl708y",
+  styles: "display:inline-flex;align-items:center;justify-content:center"
+} : {
+  name: "1gb1goj-getBaseStyles",
+  styles: "display:inline-flex;align-items:center;justify-content:center;label:getBaseStyles;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlY29uZGFyeS1pY29uLWJ1dHRvbi5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMkRPIiwiZmlsZSI6InNlY29uZGFyeS1pY29uLWJ1dHRvbi5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IFRoZW1lIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgY3VzdG9tUHJvcGVydGllcyBhcyB2YXJzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgdHlwZSB7IFRTZWNvbmRhcnlCdXR0b25Qcm9wcyB9IGZyb20gJy4vc2Vjb25kYXJ5LWljb24tYnV0dG9uJztcblxudHlwZSBURXh0ZW5kZWRUaGVtZSA9IHtcbiAgW2tleTogc3RyaW5nXTogc3RyaW5nO1xufSAmIFRoZW1lO1xuXG5jb25zdCBnZXREaXNhYmxlZFN0eWxlID0gKG92ZXJ3cml0dGVuVmFyczogVEV4dGVuZGVkVGhlbWUpID0+IHtcbiAgLyogQnkgdXNpbmcgdGhlIGNzcyAnZGlzYWJsZWQnIHNlbGVjdG9yIGRpcmVjdGx5LCB3ZSBkb24ndCBuZWVkIGFkZGl0aW9uYWwgbG9naWMgdG8gY2hlY2sgdGhlIGlzRGlzYWJsZWQgcHJvcCAqL1xuICByZXR1cm4gY3NzYFxuICAgICY6ZGlzYWJsZWQgc3ZnIHtcbiAgICAgIGZpbGw6ICR7b3ZlcndyaXR0ZW5WYXJzLmNvbG9yTmV1dHJhbDYwfTtcbiAgICB9XG4gIGA7XG59O1xuXG5jb25zdCBnZXRDb2xvclN0eWxlID0gKFxuICBwcm9wczogUGljazxUU2Vjb25kYXJ5QnV0dG9uUHJvcHMsICdjb2xvcic+LFxuICBvdmVyd3JpdHRlblZhcnM6IFRFeHRlbmRlZFRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChwcm9wcy5jb2xvcikge1xuICAgIGNhc2UgJ3NvbGlkJzpcbiAgICAgIHJldHVybiBjc3NgXG4gICAgICAgICYgc3ZnIHtcbiAgICAgICAgICBmaWxsOiAke292ZXJ3cml0dGVuVmFycy5jb2xvclNvbGlkfTtcbiAgICAgICAgfVxuICAgICAgICAmOmZvY3VzLFxuICAgICAgICAmOmhvdmVyIHN2ZyB7XG4gICAgICAgICAgZmlsbDogJHtvdmVyd3JpdHRlblZhcnMuY29sb3JQcmltYXJ5fTtcbiAgICAgICAgfVxuICAgICAgYDtcbiAgICBjYXNlICdwcmltYXJ5JzpcbiAgICAgIHJldHVybiBjc3NgXG4gICAgICAgICYgc3ZnIHtcbiAgICAgICAgICBmaWxsOiAke292ZXJ3cml0dGVuVmFycy5jb2xvclByaW1hcnl9O1xuICAgICAgICB9XG4gICAgICAgICY6Zm9jdXMsXG4gICAgICAgICY6aG92ZXIgc3ZnIHtcbiAgICAgICAgICBmaWxsOiAke292ZXJ3cml0dGVuVmFycy5jb2xvclByaW1hcnkyNX07XG4gICAgICAgIH1cbiAgICAgIGA7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBjc3NgXG4gICAgICAgIHN2ZyB7XG4gICAgICAgICAgZmlsbDogJHtvdmVyd3JpdHRlblZhcnMuY29sb3JTb2xpZH07XG4gICAgICAgIH1cbiAgICAgIGA7XG4gIH1cbn07XG5cbmNvbnN0IGdldEJhc2VTdHlsZXMgPSAocHJvcHM6IFRTZWNvbmRhcnlCdXR0b25Qcm9wcywgdGhlbWU6IFRoZW1lKSA9PiB7XG4gIGNvbnN0IG92ZXJ3cml0dGVuVmFyczogVEV4dGVuZGVkVGhlbWUgPSB7XG4gICAgLi4udmFycyxcbiAgICAuLi50aGVtZSxcbiAgfTtcblxuICByZXR1cm4gW1xuICAgIGNzc2BcbiAgICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgIGAsXG4gICAgZ2V0Q29sb3JTdHlsZShwcm9wcywgb3ZlcndyaXR0ZW5WYXJzKSxcbiAgICBnZXREaXNhYmxlZFN0eWxlKG92ZXJ3cml0dGVuVmFycyksXG4gIF07XG59O1xuXG4vLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgaW1wb3J0L3ByZWZlci1kZWZhdWx0LWV4cG9ydFxuZXhwb3J0IHsgZ2V0QmFzZVN0eWxlcyB9O1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var getBaseStyles = function getBaseStyles(props, theme) {
+  var overwrittenVars = _objectSpread$1(_objectSpread$1({}, designSystem.customProperties), theme);
+
+  return [_ref, getColorStyle(props, overwrittenVars), getDisabledStyle(overwrittenVars)];
+}; // eslint-disable-next-line import/prefer-default-export
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default['default'](_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context2; _forEachInstanceProperty__default['default'](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+var propsToOmit = ['type'];
+
+var SecondaryIconButton = function SecondaryIconButton(props) {
+  var buttonAttributes = _objectSpread(_objectSpread({}, utils.filterInvalidAttributes(omit__default['default'](props, propsToOmit))), {}, {
+    'data-track-component': 'SecondaryIconButton',
+    // if there is a divergence between `isDisabled` and `disabled`,
+    // we fall back to `isDisabled`
+    disabled: props.isDisabled
+  });
+
+  var theme = react.useTheme();
+  return jsxRuntime.jsx(AccessibleButton__default['default'], {
+    as: props.as,
+    type: props.type,
+    buttonAttributes: buttonAttributes,
+    label: props.label,
+    onClick: props.onClick,
+    isDisabled: props.isDisabled,
+    css: getBaseStyles(props, theme),
+    children: props.icon
+  });
+};
+
+SecondaryIconButton.propTypes = process.env.NODE_ENV !== "production" ? {
+  as: _pt__default['default'].any,
+  type: _pt__default['default'].oneOf(['submit', 'reset', 'button']),
+  icon: _pt__default['default'].element,
+  color: _pt__default['default'].oneOf(['solid', 'primary']),
+  label: _pt__default['default'].string.isRequired,
+  isDisabled: _pt__default['default'].bool,
+  onClick: _pt__default['default'].func
+} : {};
+SecondaryIconButton.displayName = 'SecondaryIconButton';
+SecondaryIconButton.defaultProps = {
+  color: 'solid',
+  type: 'button',
+  isDisabled: false
+};
+var SecondaryIconButton$1 = SecondaryIconButton;
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+exports['default'] = SecondaryIconButton$1;
+exports.version = version;

package/dist/commercetools-uikit-secondary-icon-button.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./commercetools-uikit-secondary-icon-button.cjs.prod.js");
+} else {
+  module.exports = require("./commercetools-uikit-secondary-icon-button.cjs.dev.js");
+}

package/dist/commercetools-uikit-secondary-icon-button.cjs.prod.js

@@ -0,0 +1,108 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+require('prop-types');
+require('react');
+var react = require('@emotion/react');
+var omit = require('lodash/omit');
+var utils = require('@commercetools-uikit/utils');
+var AccessibleButton = require('@commercetools-uikit/accessible-button');
+var designSystem = require('@commercetools-uikit/design-system');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var omit__default = /*#__PURE__*/_interopDefault(omit);
+var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
+
+function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default['default'](_context = ownKeys$1(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context2; _forEachInstanceProperty__default['default'](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+
+var getDisabledStyle = function getDisabledStyle(overwrittenVars) {
+  /* By using the css 'disabled' selector directly, we don't need additional logic to check the isDisabled prop */
+  return /*#__PURE__*/react.css("&:disabled svg{fill:", overwrittenVars.colorNeutral60, ";}" + ("" ), "" );
+};
+
+var getColorStyle = function getColorStyle(props, overwrittenVars) {
+  switch (props.color) {
+    case 'solid':
+      return /*#__PURE__*/react.css("& svg{fill:", overwrittenVars.colorSolid, ";}&:focus,&:hover svg{fill:", overwrittenVars.colorPrimary, ";}" + ("" ), "" );
+
+    case 'primary':
+      return /*#__PURE__*/react.css("& svg{fill:", overwrittenVars.colorPrimary, ";}&:focus,&:hover svg{fill:", overwrittenVars.colorPrimary25, ";}" + ("" ), "" );
+
+    default:
+      return /*#__PURE__*/react.css("svg{fill:", overwrittenVars.colorSolid, ";}" + ("" ), "" );
+  }
+};
+
+var _ref = {
+  name: "pl708y",
+  styles: "display:inline-flex;align-items:center;justify-content:center"
+} ;
+
+var getBaseStyles = function getBaseStyles(props, theme) {
+  var overwrittenVars = _objectSpread$1(_objectSpread$1({}, designSystem.customProperties), theme);
+
+  return [_ref, getColorStyle(props, overwrittenVars), getDisabledStyle(overwrittenVars)];
+}; // eslint-disable-next-line import/prefer-default-export
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default['default'](_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context2; _forEachInstanceProperty__default['default'](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+var propsToOmit = ['type'];
+
+var SecondaryIconButton = function SecondaryIconButton(props) {
+  var buttonAttributes = _objectSpread(_objectSpread({}, utils.filterInvalidAttributes(omit__default['default'](props, propsToOmit))), {}, {
+    'data-track-component': 'SecondaryIconButton',
+    // if there is a divergence between `isDisabled` and `disabled`,
+    // we fall back to `isDisabled`
+    disabled: props.isDisabled
+  });
+
+  var theme = react.useTheme();
+  return jsxRuntime.jsx(AccessibleButton__default['default'], {
+    as: props.as,
+    type: props.type,
+    buttonAttributes: buttonAttributes,
+    label: props.label,
+    onClick: props.onClick,
+    isDisabled: props.isDisabled,
+    css: getBaseStyles(props, theme),
+    children: props.icon
+  });
+};
+
+SecondaryIconButton.propTypes = {};
+SecondaryIconButton.displayName = 'SecondaryIconButton';
+SecondaryIconButton.defaultProps = {
+  color: 'solid',
+  type: 'button',
+  isDisabled: false
+};
+var SecondaryIconButton$1 = SecondaryIconButton;
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+exports['default'] = SecondaryIconButton$1;
+exports.version = version;

package/dist/commercetools-uikit-secondary-icon-button.esm.js

@@ -0,0 +1,105 @@
+import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
+import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
+import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
+import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
+import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
+import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
+import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
+import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
+import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
+import _pt from 'prop-types';
+import 'react';
+import { css, useTheme } from '@emotion/react';
+import omit from 'lodash/omit';
+import { filterInvalidAttributes } from '@commercetools-uikit/utils';
+import AccessibleButton from '@commercetools-uikit/accessible-button';
+import { customProperties } from '@commercetools-uikit/design-system';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys$1(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var getDisabledStyle = function getDisabledStyle(overwrittenVars) {
+  /* By using the css 'disabled' selector directly, we don't need additional logic to check the isDisabled prop */
+  return /*#__PURE__*/css("&:disabled svg{fill:", overwrittenVars.colorNeutral60, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getDisabledStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlY29uZGFyeS1pY29uLWJ1dHRvbi5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBV1kiLCJmaWxlIjoic2Vjb25kYXJ5LWljb24tYnV0dG9uLnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgVGhlbWUgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBjdXN0b21Qcm9wZXJ0aWVzIGFzIHZhcnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB0eXBlIHsgVFNlY29uZGFyeUJ1dHRvblByb3BzIH0gZnJvbSAnLi9zZWNvbmRhcnktaWNvbi1idXR0b24nO1xuXG50eXBlIFRFeHRlbmRlZFRoZW1lID0ge1xuICBba2V5OiBzdHJpbmddOiBzdHJpbmc7XG59ICYgVGhlbWU7XG5cbmNvbnN0IGdldERpc2FibGVkU3R5bGUgPSAob3ZlcndyaXR0ZW5WYXJzOiBURXh0ZW5kZWRUaGVtZSkgPT4ge1xuICAvKiBCeSB1c2luZyB0aGUgY3NzICdkaXNhYmxlZCcgc2VsZWN0b3IgZGlyZWN0bHksIHdlIGRvbid0IG5lZWQgYWRkaXRpb25hbCBsb2dpYyB0byBjaGVjayB0aGUgaXNEaXNhYmxlZCBwcm9wICovXG4gIHJldHVybiBjc3NgXG4gICAgJjpkaXNhYmxlZCBzdmcge1xuICAgICAgZmlsbDogJHtvdmVyd3JpdHRlblZhcnMuY29sb3JOZXV0cmFsNjB9O1xuICAgIH1cbiAgYDtcbn07XG5cbmNvbnN0IGdldENvbG9yU3R5bGUgPSAoXG4gIHByb3BzOiBQaWNrPFRTZWNvbmRhcnlCdXR0b25Qcm9wcywgJ2NvbG9yJz4sXG4gIG92ZXJ3cml0dGVuVmFyczogVEV4dGVuZGVkVGhlbWVcbikgPT4ge1xuICBzd2l0Y2ggKHByb3BzLmNvbG9yKSB7XG4gICAgY2FzZSAnc29saWQnOlxuICAgICAgcmV0dXJuIGNzc2BcbiAgICAgICAgJiBzdmcge1xuICAgICAgICAgIGZpbGw6ICR7b3ZlcndyaXR0ZW5WYXJzLmNvbG9yU29saWR9O1xuICAgICAgICB9XG4gICAgICAgICY6Zm9jdXMsXG4gICAgICAgICY6aG92ZXIgc3ZnIHtcbiAgICAgICAgICBmaWxsOiAke292ZXJ3cml0dGVuVmFycy5jb2xvclByaW1hcnl9O1xuICAgICAgICB9XG4gICAgICBgO1xuICAgIGNhc2UgJ3ByaW1hcnknOlxuICAgICAgcmV0dXJuIGNzc2BcbiAgICAgICAgJiBzdmcge1xuICAgICAgICAgIGZpbGw6ICR7b3ZlcndyaXR0ZW5WYXJzLmNvbG9yUHJpbWFyeX07XG4gICAgICAgIH1cbiAgICAgICAgJjpmb2N1cyxcbiAgICAgICAgJjpob3ZlciBzdmcge1xuICAgICAgICAgIGZpbGw6ICR7b3ZlcndyaXR0ZW5WYXJzLmNvbG9yUHJpbWFyeTI1fTtcbiAgICAgICAgfVxuICAgICAgYDtcbiAgICBkZWZhdWx0OlxuICAgICAgcmV0dXJuIGNzc2BcbiAgICAgICAgc3ZnIHtcbiAgICAgICAgICBmaWxsOiAke292ZXJ3cml0dGVuVmFycy5jb2xvclNvbGlkfTtcbiAgICAgICAgfVxuICAgICAgYDtcbiAgfVxufTtcblxuY29uc3QgZ2V0QmFzZVN0eWxlcyA9IChwcm9wczogVFNlY29uZGFyeUJ1dHRvblByb3BzLCB0aGVtZTogVGhlbWUpID0+IHtcbiAgY29uc3Qgb3ZlcndyaXR0ZW5WYXJzOiBURXh0ZW5kZWRUaGVtZSA9IHtcbiAgICAuLi52YXJzLFxuICAgIC4uLnRoZW1lLFxuICB9O1xuXG4gIHJldHVybiBbXG4gICAgY3NzYFxuICAgICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgYCxcbiAgICBnZXRDb2xvclN0eWxlKHByb3BzLCBvdmVyd3JpdHRlblZhcnMpLFxuICAgIGdldERpc2FibGVkU3R5bGUob3ZlcndyaXR0ZW5WYXJzKSxcbiAgXTtcbn07XG5cbi8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBpbXBvcnQvcHJlZmVyLWRlZmF1bHQtZXhwb3J0XG5leHBvcnQgeyBnZXRCYXNlU3R5bGVzIH07XG4iXX0= */");
+};
+
+var getColorStyle = function getColorStyle(props, overwrittenVars) {
+  switch (props.color) {
+    case 'solid':
+      return /*#__PURE__*/css("& svg{fill:", overwrittenVars.colorSolid, ";}&:focus,&:hover svg{fill:", overwrittenVars.colorPrimary, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getColorStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlY29uZGFyeS1pY29uLWJ1dHRvbi5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0JnQiIsImZpbGUiOiJzZWNvbmRhcnktaWNvbi1idXR0b24uc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBUaGVtZSB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGN1c3RvbVByb3BlcnRpZXMgYXMgdmFycyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHR5cGUgeyBUU2Vjb25kYXJ5QnV0dG9uUHJvcHMgfSBmcm9tICcuL3NlY29uZGFyeS1pY29uLWJ1dHRvbic7XG5cbnR5cGUgVEV4dGVuZGVkVGhlbWUgPSB7XG4gIFtrZXk6IHN0cmluZ106IHN0cmluZztcbn0gJiBUaGVtZTtcblxuY29uc3QgZ2V0RGlzYWJsZWRTdHlsZSA9IChvdmVyd3JpdHRlblZhcnM6IFRFeHRlbmRlZFRoZW1lKSA9PiB7XG4gIC8qIEJ5IHVzaW5nIHRoZSBjc3MgJ2Rpc2FibGVkJyBzZWxlY3RvciBkaXJlY3RseSwgd2UgZG9uJ3QgbmVlZCBhZGRpdGlvbmFsIGxvZ2ljIHRvIGNoZWNrIHRoZSBpc0Rpc2FibGVkIHByb3AgKi9cbiAgcmV0dXJuIGNzc2BcbiAgICAmOmRpc2FibGVkIHN2ZyB7XG4gICAgICBmaWxsOiAke292ZXJ3cml0dGVuVmFycy5jb2xvck5ldXRyYWw2MH07XG4gICAgfVxuICBgO1xufTtcblxuY29uc3QgZ2V0Q29sb3JTdHlsZSA9IChcbiAgcHJvcHM6IFBpY2s8VFNlY29uZGFyeUJ1dHRvblByb3BzLCAnY29sb3InPixcbiAgb3ZlcndyaXR0ZW5WYXJzOiBURXh0ZW5kZWRUaGVtZVxuKSA9PiB7XG4gIHN3aXRjaCAocHJvcHMuY29sb3IpIHtcbiAgICBjYXNlICdzb2xpZCc6XG4gICAgICByZXR1cm4gY3NzYFxuICAgICAgICAmIHN2ZyB7XG4gICAgICAgICAgZmlsbDogJHtvdmVyd3JpdHRlblZhcnMuY29sb3JTb2xpZH07XG4gICAgICAgIH1cbiAgICAgICAgJjpmb2N1cyxcbiAgICAgICAgJjpob3ZlciBzdmcge1xuICAgICAgICAgIGZpbGw6ICR7b3ZlcndyaXR0ZW5WYXJzLmNvbG9yUHJpbWFyeX07XG4gICAgICAgIH1cbiAgICAgIGA7XG4gICAgY2FzZSAncHJpbWFyeSc6XG4gICAgICByZXR1cm4gY3NzYFxuICAgICAgICAmIHN2ZyB7XG4gICAgICAgICAgZmlsbDogJHtvdmVyd3JpdHRlblZhcnMuY29sb3JQcmltYXJ5fTtcbiAgICAgICAgfVxuICAgICAgICAmOmZvY3VzLFxuICAgICAgICAmOmhvdmVyIHN2ZyB7XG4gICAgICAgICAgZmlsbDogJHtvdmVyd3JpdHRlblZhcnMuY29sb3JQcmltYXJ5MjV9O1xuICAgICAgICB9XG4gICAgICBgO1xuICAgIGRlZmF1bHQ6XG4gICAgICByZXR1cm4gY3NzYFxuICAgICAgICBzdmcge1xuICAgICAgICAgIGZpbGw6ICR7b3ZlcndyaXR0ZW5WYXJzLmNvbG9yU29saWR9O1xuICAgICAgICB9XG4gICAgICBgO1xuICB9XG59O1xuXG5jb25zdCBnZXRCYXNlU3R5bGVzID0gKHByb3BzOiBUU2Vjb25kYXJ5QnV0dG9uUHJvcHMsIHRoZW1lOiBUaGVtZSkgPT4ge1xuICBjb25zdCBvdmVyd3JpdHRlblZhcnM6IFRFeHRlbmRlZFRoZW1lID0ge1xuICAgIC4uLnZhcnMsXG4gICAgLi4udGhlbWUsXG4gIH07XG5cbiAgcmV0dXJuIFtcbiAgICBjc3NgXG4gICAgICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICBgLFxuICAgIGdldENvbG9yU3R5bGUocHJvcHMsIG92ZXJ3cml0dGVuVmFycyksXG4gICAgZ2V0RGlzYWJsZWRTdHlsZShvdmVyd3JpdHRlblZhcnMpLFxuICBdO1xufTtcblxuLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIGltcG9ydC9wcmVmZXItZGVmYXVsdC1leHBvcnRcbmV4cG9ydCB7IGdldEJhc2VTdHlsZXMgfTtcbiJdfQ== */");
+
+    case 'primary':
+      return /*#__PURE__*/css("& svg{fill:", overwrittenVars.colorPrimary, ";}&:focus,&:hover svg{fill:", overwrittenVars.colorPrimary25, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getColorStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlY29uZGFyeS1pY29uLWJ1dHRvbi5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0NnQiIsImZpbGUiOiJzZWNvbmRhcnktaWNvbi1idXR0b24uc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBUaGVtZSB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGN1c3RvbVByb3BlcnRpZXMgYXMgdmFycyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHR5cGUgeyBUU2Vjb25kYXJ5QnV0dG9uUHJvcHMgfSBmcm9tICcuL3NlY29uZGFyeS1pY29uLWJ1dHRvbic7XG5cbnR5cGUgVEV4dGVuZGVkVGhlbWUgPSB7XG4gIFtrZXk6IHN0cmluZ106IHN0cmluZztcbn0gJiBUaGVtZTtcblxuY29uc3QgZ2V0RGlzYWJsZWRTdHlsZSA9IChvdmVyd3JpdHRlblZhcnM6IFRFeHRlbmRlZFRoZW1lKSA9PiB7XG4gIC8qIEJ5IHVzaW5nIHRoZSBjc3MgJ2Rpc2FibGVkJyBzZWxlY3RvciBkaXJlY3RseSwgd2UgZG9uJ3QgbmVlZCBhZGRpdGlvbmFsIGxvZ2ljIHRvIGNoZWNrIHRoZSBpc0Rpc2FibGVkIHByb3AgKi9cbiAgcmV0dXJuIGNzc2BcbiAgICAmOmRpc2FibGVkIHN2ZyB7XG4gICAgICBmaWxsOiAke292ZXJ3cml0dGVuVmFycy5jb2xvck5ldXRyYWw2MH07XG4gICAgfVxuICBgO1xufTtcblxuY29uc3QgZ2V0Q29sb3JTdHlsZSA9IChcbiAgcHJvcHM6IFBpY2s8VFNlY29uZGFyeUJ1dHRvblByb3BzLCAnY29sb3InPixcbiAgb3ZlcndyaXR0ZW5WYXJzOiBURXh0ZW5kZWRUaGVtZVxuKSA9PiB7XG4gIHN3aXRjaCAocHJvcHMuY29sb3IpIHtcbiAgICBjYXNlICdzb2xpZCc6XG4gICAgICByZXR1cm4gY3NzYFxuICAgICAgICAmIHN2ZyB7XG4gICAgICAgICAgZmlsbDogJHtvdmVyd3JpdHRlblZhcnMuY29sb3JTb2xpZH07XG4gICAgICAgIH1cbiAgICAgICAgJjpmb2N1cyxcbiAgICAgICAgJjpob3ZlciBzdmcge1xuICAgICAgICAgIGZpbGw6ICR7b3ZlcndyaXR0ZW5WYXJzLmNvbG9yUHJpbWFyeX07XG4gICAgICAgIH1cbiAgICAgIGA7XG4gICAgY2FzZSAncHJpbWFyeSc6XG4gICAgICByZXR1cm4gY3NzYFxuICAgICAgICAmIHN2ZyB7XG4gICAgICAgICAgZmlsbDogJHtvdmVyd3JpdHRlblZhcnMuY29sb3JQcmltYXJ5fTtcbiAgICAgICAgfVxuICAgICAgICAmOmZvY3VzLFxuICAgICAgICAmOmhvdmVyIHN2ZyB7XG4gICAgICAgICAgZmlsbDogJHtvdmVyd3JpdHRlblZhcnMuY29sb3JQcmltYXJ5MjV9O1xuICAgICAgICB9XG4gICAgICBgO1xuICAgIGRlZmF1bHQ6XG4gICAgICByZXR1cm4gY3NzYFxuICAgICAgICBzdmcge1xuICAgICAgICAgIGZpbGw6ICR7b3ZlcndyaXR0ZW5WYXJzLmNvbG9yU29saWR9O1xuICAgICAgICB9XG4gICAgICBgO1xuICB9XG59O1xuXG5jb25zdCBnZXRCYXNlU3R5bGVzID0gKHByb3BzOiBUU2Vjb25kYXJ5QnV0dG9uUHJvcHMsIHRoZW1lOiBUaGVtZSkgPT4ge1xuICBjb25zdCBvdmVyd3JpdHRlblZhcnM6IFRFeHRlbmRlZFRoZW1lID0ge1xuICAgIC4uLnZhcnMsXG4gICAgLi4udGhlbWUsXG4gIH07XG5cbiAgcmV0dXJuIFtcbiAgICBjc3NgXG4gICAgICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICBgLFxuICAgIGdldENvbG9yU3R5bGUocHJvcHMsIG92ZXJ3cml0dGVuVmFycyksXG4gICAgZ2V0RGlzYWJsZWRTdHlsZShvdmVyd3JpdHRlblZhcnMpLFxuICBdO1xufTtcblxuLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIGltcG9ydC9wcmVmZXItZGVmYXVsdC1leHBvcnRcbmV4cG9ydCB7IGdldEJhc2VTdHlsZXMgfTtcbiJdfQ== */");
+
+    default:
+      return /*#__PURE__*/css("svg{fill:", overwrittenVars.colorSolid, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getColorStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlY29uZGFyeS1pY29uLWJ1dHRvbi5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNENnQiIsImZpbGUiOiJzZWNvbmRhcnktaWNvbi1idXR0b24uc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBUaGVtZSB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGN1c3RvbVByb3BlcnRpZXMgYXMgdmFycyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHR5cGUgeyBUU2Vjb25kYXJ5QnV0dG9uUHJvcHMgfSBmcm9tICcuL3NlY29uZGFyeS1pY29uLWJ1dHRvbic7XG5cbnR5cGUgVEV4dGVuZGVkVGhlbWUgPSB7XG4gIFtrZXk6IHN0cmluZ106IHN0cmluZztcbn0gJiBUaGVtZTtcblxuY29uc3QgZ2V0RGlzYWJsZWRTdHlsZSA9IChvdmVyd3JpdHRlblZhcnM6IFRFeHRlbmRlZFRoZW1lKSA9PiB7XG4gIC8qIEJ5IHVzaW5nIHRoZSBjc3MgJ2Rpc2FibGVkJyBzZWxlY3RvciBkaXJlY3RseSwgd2UgZG9uJ3QgbmVlZCBhZGRpdGlvbmFsIGxvZ2ljIHRvIGNoZWNrIHRoZSBpc0Rpc2FibGVkIHByb3AgKi9cbiAgcmV0dXJuIGNzc2BcbiAgICAmOmRpc2FibGVkIHN2ZyB7XG4gICAgICBmaWxsOiAke292ZXJ3cml0dGVuVmFycy5jb2xvck5ldXRyYWw2MH07XG4gICAgfVxuICBgO1xufTtcblxuY29uc3QgZ2V0Q29sb3JTdHlsZSA9IChcbiAgcHJvcHM6IFBpY2s8VFNlY29uZGFyeUJ1dHRvblByb3BzLCAnY29sb3InPixcbiAgb3ZlcndyaXR0ZW5WYXJzOiBURXh0ZW5kZWRUaGVtZVxuKSA9PiB7XG4gIHN3aXRjaCAocHJvcHMuY29sb3IpIHtcbiAgICBjYXNlICdzb2xpZCc6XG4gICAgICByZXR1cm4gY3NzYFxuICAgICAgICAmIHN2ZyB7XG4gICAgICAgICAgZmlsbDogJHtvdmVyd3JpdHRlblZhcnMuY29sb3JTb2xpZH07XG4gICAgICAgIH1cbiAgICAgICAgJjpmb2N1cyxcbiAgICAgICAgJjpob3ZlciBzdmcge1xuICAgICAgICAgIGZpbGw6ICR7b3ZlcndyaXR0ZW5WYXJzLmNvbG9yUHJpbWFyeX07XG4gICAgICAgIH1cbiAgICAgIGA7XG4gICAgY2FzZSAncHJpbWFyeSc6XG4gICAgICByZXR1cm4gY3NzYFxuICAgICAgICAmIHN2ZyB7XG4gICAgICAgICAgZmlsbDogJHtvdmVyd3JpdHRlblZhcnMuY29sb3JQcmltYXJ5fTtcbiAgICAgICAgfVxuICAgICAgICAmOmZvY3VzLFxuICAgICAgICAmOmhvdmVyIHN2ZyB7XG4gICAgICAgICAgZmlsbDogJHtvdmVyd3JpdHRlblZhcnMuY29sb3JQcmltYXJ5MjV9O1xuICAgICAgICB9XG4gICAgICBgO1xuICAgIGRlZmF1bHQ6XG4gICAgICByZXR1cm4gY3NzYFxuICAgICAgICBzdmcge1xuICAgICAgICAgIGZpbGw6ICR7b3ZlcndyaXR0ZW5WYXJzLmNvbG9yU29saWR9O1xuICAgICAgICB9XG4gICAgICBgO1xuICB9XG59O1xuXG5jb25zdCBnZXRCYXNlU3R5bGVzID0gKHByb3BzOiBUU2Vjb25kYXJ5QnV0dG9uUHJvcHMsIHRoZW1lOiBUaGVtZSkgPT4ge1xuICBjb25zdCBvdmVyd3JpdHRlblZhcnM6IFRFeHRlbmRlZFRoZW1lID0ge1xuICAgIC4uLnZhcnMsXG4gICAgLi4udGhlbWUsXG4gIH07XG5cbiAgcmV0dXJuIFtcbiAgICBjc3NgXG4gICAgICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICBgLFxuICAgIGdldENvbG9yU3R5bGUocHJvcHMsIG92ZXJ3cml0dGVuVmFycyksXG4gICAgZ2V0RGlzYWJsZWRTdHlsZShvdmVyd3JpdHRlblZhcnMpLFxuICBdO1xufTtcblxuLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIGltcG9ydC9wcmVmZXItZGVmYXVsdC1leHBvcnRcbmV4cG9ydCB7IGdldEJhc2VTdHlsZXMgfTtcbiJdfQ== */");
+  }
+};
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "pl708y",
+  styles: "display:inline-flex;align-items:center;justify-content:center"
+} : {
+  name: "1gb1goj-getBaseStyles",
+  styles: "display:inline-flex;align-items:center;justify-content:center;label:getBaseStyles;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlY29uZGFyeS1pY29uLWJ1dHRvbi5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMkRPIiwiZmlsZSI6InNlY29uZGFyeS1pY29uLWJ1dHRvbi5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IFRoZW1lIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgY3VzdG9tUHJvcGVydGllcyBhcyB2YXJzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgdHlwZSB7IFRTZWNvbmRhcnlCdXR0b25Qcm9wcyB9IGZyb20gJy4vc2Vjb25kYXJ5LWljb24tYnV0dG9uJztcblxudHlwZSBURXh0ZW5kZWRUaGVtZSA9IHtcbiAgW2tleTogc3RyaW5nXTogc3RyaW5nO1xufSAmIFRoZW1lO1xuXG5jb25zdCBnZXREaXNhYmxlZFN0eWxlID0gKG92ZXJ3cml0dGVuVmFyczogVEV4dGVuZGVkVGhlbWUpID0+IHtcbiAgLyogQnkgdXNpbmcgdGhlIGNzcyAnZGlzYWJsZWQnIHNlbGVjdG9yIGRpcmVjdGx5LCB3ZSBkb24ndCBuZWVkIGFkZGl0aW9uYWwgbG9naWMgdG8gY2hlY2sgdGhlIGlzRGlzYWJsZWQgcHJvcCAqL1xuICByZXR1cm4gY3NzYFxuICAgICY6ZGlzYWJsZWQgc3ZnIHtcbiAgICAgIGZpbGw6ICR7b3ZlcndyaXR0ZW5WYXJzLmNvbG9yTmV1dHJhbDYwfTtcbiAgICB9XG4gIGA7XG59O1xuXG5jb25zdCBnZXRDb2xvclN0eWxlID0gKFxuICBwcm9wczogUGljazxUU2Vjb25kYXJ5QnV0dG9uUHJvcHMsICdjb2xvcic+LFxuICBvdmVyd3JpdHRlblZhcnM6IFRFeHRlbmRlZFRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChwcm9wcy5jb2xvcikge1xuICAgIGNhc2UgJ3NvbGlkJzpcbiAgICAgIHJldHVybiBjc3NgXG4gICAgICAgICYgc3ZnIHtcbiAgICAgICAgICBmaWxsOiAke292ZXJ3cml0dGVuVmFycy5jb2xvclNvbGlkfTtcbiAgICAgICAgfVxuICAgICAgICAmOmZvY3VzLFxuICAgICAgICAmOmhvdmVyIHN2ZyB7XG4gICAgICAgICAgZmlsbDogJHtvdmVyd3JpdHRlblZhcnMuY29sb3JQcmltYXJ5fTtcbiAgICAgICAgfVxuICAgICAgYDtcbiAgICBjYXNlICdwcmltYXJ5JzpcbiAgICAgIHJldHVybiBjc3NgXG4gICAgICAgICYgc3ZnIHtcbiAgICAgICAgICBmaWxsOiAke292ZXJ3cml0dGVuVmFycy5jb2xvclByaW1hcnl9O1xuICAgICAgICB9XG4gICAgICAgICY6Zm9jdXMsXG4gICAgICAgICY6aG92ZXIgc3ZnIHtcbiAgICAgICAgICBmaWxsOiAke292ZXJ3cml0dGVuVmFycy5jb2xvclByaW1hcnkyNX07XG4gICAgICAgIH1cbiAgICAgIGA7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBjc3NgXG4gICAgICAgIHN2ZyB7XG4gICAgICAgICAgZmlsbDogJHtvdmVyd3JpdHRlblZhcnMuY29sb3JTb2xpZH07XG4gICAgICAgIH1cbiAgICAgIGA7XG4gIH1cbn07XG5cbmNvbnN0IGdldEJhc2VTdHlsZXMgPSAocHJvcHM6IFRTZWNvbmRhcnlCdXR0b25Qcm9wcywgdGhlbWU6IFRoZW1lKSA9PiB7XG4gIGNvbnN0IG92ZXJ3cml0dGVuVmFyczogVEV4dGVuZGVkVGhlbWUgPSB7XG4gICAgLi4udmFycyxcbiAgICAuLi50aGVtZSxcbiAgfTtcblxuICByZXR1cm4gW1xuICAgIGNzc2BcbiAgICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgIGAsXG4gICAgZ2V0Q29sb3JTdHlsZShwcm9wcywgb3ZlcndyaXR0ZW5WYXJzKSxcbiAgICBnZXREaXNhYmxlZFN0eWxlKG92ZXJ3cml0dGVuVmFycyksXG4gIF07XG59O1xuXG4vLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgaW1wb3J0L3ByZWZlci1kZWZhdWx0LWV4cG9ydFxuZXhwb3J0IHsgZ2V0QmFzZVN0eWxlcyB9O1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var getBaseStyles = function getBaseStyles(props, theme) {
+  var overwrittenVars = _objectSpread$1(_objectSpread$1({}, customProperties), theme);
+
+  return [_ref, getColorStyle(props, overwrittenVars), getDisabledStyle(overwrittenVars)];
+}; // eslint-disable-next-line import/prefer-default-export
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var propsToOmit = ['type'];
+
+var SecondaryIconButton = function SecondaryIconButton(props) {
+  var buttonAttributes = _objectSpread(_objectSpread({}, filterInvalidAttributes(omit(props, propsToOmit))), {}, {
+    'data-track-component': 'SecondaryIconButton',
+    // if there is a divergence between `isDisabled` and `disabled`,
+    // we fall back to `isDisabled`
+    disabled: props.isDisabled
+  });
+
+  var theme = useTheme();
+  return jsx(AccessibleButton, {
+    as: props.as,
+    type: props.type,
+    buttonAttributes: buttonAttributes,
+    label: props.label,
+    onClick: props.onClick,
+    isDisabled: props.isDisabled,
+    css: getBaseStyles(props, theme),
+    children: props.icon
+  });
+};
+
+SecondaryIconButton.propTypes = process.env.NODE_ENV !== "production" ? {
+  as: _pt.any,
+  type: _pt.oneOf(['submit', 'reset', 'button']),
+  icon: _pt.element,
+  color: _pt.oneOf(['solid', 'primary']),
+  label: _pt.string.isRequired,
+  isDisabled: _pt.bool,
+  onClick: _pt.func
+} : {};
+SecondaryIconButton.displayName = 'SecondaryIconButton';
+SecondaryIconButton.defaultProps = {
+  color: 'solid',
+  type: 'button',
+  isDisabled: false
+};
+var SecondaryIconButton$1 = SecondaryIconButton;
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+export { SecondaryIconButton$1 as default, version };

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './secondary-icon-button';
+export { default as version } from './version';

package/dist/declarations/src/secondary-icon-button.d.ts

@@ -0,0 +1,20 @@
+import { MouseEvent, KeyboardEvent, ElementType, ReactElement, ComponentPropsWithRef } from 'react';
+export declare type TSecondaryButtonProps<TStringOrComponent extends ElementType = 'button'> = {
+    as?: TStringOrComponent;
+    type?: 'submit' | 'reset' | 'button';
+    icon?: ReactElement;
+    color?: 'solid' | 'primary';
+    label: string;
+    isDisabled?: boolean;
+    onClick?: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
+} & ComponentPropsWithRef<TStringOrComponent>;
+declare const SecondaryIconButton: {
+    <TStringOrComponent extends ElementType<any> = "button">(props: TSecondaryButtonProps<TStringOrComponent>): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+    defaultProps: {
+        color: string;
+        type: string;
+        isDisabled: boolean;
+    };
+};
+export default SecondaryIconButton;

package/dist/declarations/src/secondary-icon-button.styles.d.ts

@@ -0,0 +1,4 @@
+import type { Theme } from '@emotion/react';
+import type { TSecondaryButtonProps } from './secondary-icon-button';
+declare const getBaseStyles: (props: TSecondaryButtonProps, theme: Theme) => import("@emotion/utils").SerializedStyles[];
+export { getBaseStyles };

package/dist/declarations/src/version.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "0.0.0-canary-2021830134526";
+export default _default;

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@commercetools-uikit/secondary-icon-button",
+  "description": "Secondary Icon Buttons are \"icon-only\" buttons and a restricted version of the `<IconButton>`. They trigger an action when clicked (`onClick` prop). You must also pass a label for accessibility reasons.",
+  "version": "0.0.0-canary-2021830134526",
+  "bugs": "https://github.com/commercetools/ui-kit/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/commercetools/ui-kit.git",
+    "directory": "packages/components/buttons/secondary-icon-button"
+  },
+  "homepage": "https://uikit.commercetools.com",
+  "keywords": [
+    "javascript",
+    "design system",
+    "react",
+    "uikit"
+  ],
+  "license": "MIT",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "main": "dist/commercetools-uikit-secondary-icon-button.cjs.js",
+  "module": "dist/commercetools-uikit-secondary-icon-button.esm.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepare": "../../../../scripts/version.js replace"
+  },
+  "dependencies": {
+    "@babel/runtime": "7.14.8",
+    "@babel/runtime-corejs3": "7.14.9",
+    "@commercetools-uikit/accessible-button": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/design-system": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/spacings": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/text": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/utils": "12.2.0",
+    "@emotion/react": "^11.4.0",
+    "@emotion/styled": "^11.3.0",
+    "common-tags": "1.8.0",
+    "lodash": "4.17.21",
+    "prop-types": "15.7.2"
+  },
+  "devDependencies": {
+    "react": "17.0.2"
+  },
+  "peerDependencies": {
+    "react": "17.x"
+  }
+}