@dxc-technology/halstack-react 0.0.0-f77ec3a → 0.0.0-f7f591a

package/README.md

@@ -1,66 +0,0 @@
-# Halstack React CDK 
-
-Halstack React CDK is a npm library of reusable React components, made with the purpose of helping React developers with the task of implementing User Interfaces following the DXC Design Guidelines.
-
-- It increases visual and behavioral consistency across the applications using the library.
-
-- It cuts down development efforts, taking the responsability of following the Design Guidelines away from the developer, and allowing him to focus on providing business value.
-
-## Usage
-
-Halstack React CDK is a set of reusable components distributed as a npm library. See the [documentation site](https://developer.dxc.com/tools/react/) for details on how to use it.
-
-## Contributing
-
-Before opening new issues or pull requests, please refer to [CONTRIBUTING.MD](https://github.com/dxc-technology/halstack-react/blob/master/CONTRIBUTING.md).
-
-## Development Setup
-
-These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. 
-
-
-The project is divided in two main folders. One is for the actual library, and the other one is a React application using the library.
-
-### Library
-
-Contained in the `lib` folder.
-
-```bash
-cd lib
-```
-
-Install the library dependencies.
-
-```bash
-npm install
-```
-
-Run the build process into `dist` folder, detecting and automatically building changes in src. 
-
-```bash
-npm run build:watch #'npm run build' if there is no need to watch for changes
-```
-
-### Example Application
-
-Contained in the `app` folder.
-
-```bash
-cd app # from the root folder
-```
-
-Install the application dependencies. The Halstack React CDK dependency is linked to the local `lib` folder. This one must have been previously built.
-
-```bash
-npm install
-```
-
-Start the application.
-
-```bash
-npm start # runs create-react-app dev server
-```
-
-Now, anytime you make a change to the library or the app, `create-react-app` will live-reload your local dev server so you can iterate on your component in real-time.
-
-## Running the tests

package/babel.config.js

@@ -1,7 +0,0 @@
-module.exports = {
-  presets: ["@babel/react", "@babel/env"],
-  plugins: [
-    "@babel/plugin-proposal-optional-chaining",
-    "@babel/plugin-proposal-nullish-coalescing-operator",
-  ],
-};

package/dist/select/index.d.ts

@@ -1,53 +0,0 @@
-type SVG = string | (HTMLElement & SVGElement);
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin = {
-  top?: Space;
-  bottom?: Space;
-  left?: Space;
-  right?: Space;
-};
-
-type OptionGroup = {
-  label: string;
-  options: Option[];
-};
-type Option = {
-  icon?: string | SVG;
-  label: string;
-  value: string;
-};
-
-type Props = {
-  label?: string;
-  name?: string;
-  value?: string | string[];
-  options?: Option[] | OptionGroup[];
-  helperText?: string;
-  placeholder?: string;
-  disabled?: boolean;
-  optional?: boolean;
-  searchable?: boolean;
-  multiple?: boolean;
-  onChange?: (value: string | string[]) => void;
-  onBlur?: (val: { value: string | string[]; error: string }) => void;
-  error?: string;
-  /**
-   * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
-   * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
-   */
-  margin?: Space | Margin;
-  /**
-   * Size of the component ('small' | 'medium' | 'large' | 'fillParent').
-   */
-  size?: "small" | "medium" | "large" | "fillParent";
-  /**
-   * Value of the tabindex attribute.
-   */
-  tabIndex?: number;
-  /**
-   * Reference to the component.
-   */
-  ref?: React.RefObject<HTMLDivElement>;
-};
-
-export default function DxcSelect(props: Props): JSX.Element;

package/dist/stories/Button.js

@@ -1,71 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Button = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-require("./button.css");
-
-/**
- * Primary UI component for user interaction
- */
-var Button = function Button(_ref) {
-  var primary = _ref.primary,
-      backgroundColor = _ref.backgroundColor,
-      size = _ref.size,
-      label = _ref.label,
-      props = (0, _objectWithoutProperties2["default"])(_ref, ["primary", "backgroundColor", "size", "label"]);
-  var mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-  return _react["default"].createElement("button", (0, _extends2["default"])({
-    type: "button",
-    className: ['storybook-button', "storybook-button--".concat(size), mode].join(' '),
-    style: backgroundColor && {
-      backgroundColor: backgroundColor
-    }
-  }, props), label);
-};
-
-exports.Button = Button;
-Button.propTypes = {
-  /**
-   * Is this the principal call to action on the page?
-   */
-  primary: _propTypes["default"].bool,
-
-  /**
-   * What background color to use
-   */
-  backgroundColor: _propTypes["default"].string,
-
-  /**
-   * How large should the button be?
-   */
-  size: _propTypes["default"].oneOf(['small', 'medium', 'large']),
-
-  /**
-   * Button contents
-   */
-  label: _propTypes["default"].string.isRequired,
-
-  /**
-   * Optional click handler
-   */
-  onClick: _propTypes["default"].func
-};
-Button.defaultProps = {
-  backgroundColor: null,
-  primary: false,
-  size: 'medium',
-  onClick: undefined
-};

package/dist/stories/Button.stories.js

@@ -1,55 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Small = exports.Large = exports.Secondary = exports.Primary = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Button = require("./Button");
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-var _default = {
-  title: 'Example/Button',
-  component: _Button.Button,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {
-    backgroundColor: {
-      control: 'color'
-    }
-  }
-}; // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-
-exports["default"] = _default;
-
-var Template = function Template(args) {
-  return _react["default"].createElement(_Button.Button, args);
-};
-
-var Primary = Template.bind({}); // More on args: https://storybook.js.org/docs/react/writing-stories/args
-
-exports.Primary = Primary;
-Primary.args = {
-  primary: true,
-  label: 'Button'
-};
-var Secondary = Template.bind({});
-exports.Secondary = Secondary;
-Secondary.args = {
-  label: 'Button'
-};
-var Large = Template.bind({});
-exports.Large = Large;
-Large.args = {
-  size: 'large',
-  label: 'Button'
-};
-var Small = Template.bind({});
-exports.Small = Small;
-Small.args = {
-  size: 'small',
-  label: 'Button'
-};

package/dist/stories/Header.js

@@ -1,67 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Header = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _Button = require("./Button");
-
-require("./header.css");
-
-var Header = function Header(_ref) {
-  var user = _ref.user,
-      onLogin = _ref.onLogin,
-      onLogout = _ref.onLogout,
-      onCreateAccount = _ref.onCreateAccount;
-  return _react["default"].createElement("header", null, _react["default"].createElement("div", {
-    className: "wrapper"
-  }, _react["default"].createElement("div", null, _react["default"].createElement("svg", {
-    width: "32",
-    height: "32",
-    viewBox: "0 0 32 32",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, _react["default"].createElement("g", {
-    fill: "none",
-    fillRule: "evenodd"
-  }, _react["default"].createElement("path", {
-    d: "M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z",
-    fill: "#FFF"
-  }), _react["default"].createElement("path", {
-    d: "M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z",
-    fill: "#555AB9"
-  }), _react["default"].createElement("path", {
-    d: "M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z",
-    fill: "#91BAF8"
-  }))), _react["default"].createElement("h1", null, "Acme")), _react["default"].createElement("div", null, user ? _react["default"].createElement(_Button.Button, {
-    size: "small",
-    onClick: onLogout,
-    label: "Log out"
-  }) : _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_Button.Button, {
-    size: "small",
-    onClick: onLogin,
-    label: "Log in"
-  }), _react["default"].createElement(_Button.Button, {
-    primary: true,
-    size: "small",
-    onClick: onCreateAccount,
-    label: "Sign up"
-  })))));
-};
-
-exports.Header = Header;
-Header.propTypes = {
-  user: _propTypes["default"].shape({}),
-  onLogin: _propTypes["default"].func.isRequired,
-  onLogout: _propTypes["default"].func.isRequired,
-  onCreateAccount: _propTypes["default"].func.isRequired
-};
-Header.defaultProps = {
-  user: null
-};

package/dist/stories/Header.stories.js

@@ -1,31 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LoggedOut = exports.LoggedIn = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Header = require("./Header");
-
-var _default = {
-  title: 'Example/Header',
-  component: _Header.Header
-};
-exports["default"] = _default;
-
-var Template = function Template(args) {
-  return _react["default"].createElement(_Header.Header, args);
-};
-
-var LoggedIn = Template.bind({});
-exports.LoggedIn = LoggedIn;
-LoggedIn.args = {
-  user: {}
-};
-var LoggedOut = Template.bind({});
-exports.LoggedOut = LoggedOut;
-LoggedOut.args = {};

package/dist/stories/Introduction.stories.mdx

@@ -1,211 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import Code from './assets/code-brackets.svg';
-import Colors from './assets/colors.svg';
-import Comments from './assets/comments.svg';
-import Direction from './assets/direction.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
-import Repo from './assets/repo.svg';
-import StackAlt from './assets/stackalt.svg';
-
-<Meta title="Example/Introduction" />
-
-<style>{`
-  .subheading {
-    --mediumdark: '#999999';
-    font-weight: 900;
-    font-size: 13px;
-    color: #999;
-    letter-spacing: 6px;
-    line-height: 24px;
-    text-transform: uppercase;
-    margin-bottom: 12px;
-    margin-top: 40px;
-  }
-
-  .link-list {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr;
-    row-gap: 10px;
-  }
-
-  @media (min-width: 620px) {
-    .link-list {
-      row-gap: 20px;
-      column-gap: 20px;
-      grid-template-columns: 1fr 1fr;
-    }
-  }
-
-  @media all and (-ms-high-contrast:none) {
-  .link-list {
-      display: -ms-grid;
-      -ms-grid-columns: 1fr 1fr;
-      -ms-grid-rows: 1fr 1fr;
-    }
-  }
-
-  .link-item {
-    display: block;
-    padding: 20px 30px 20px 15px;
-    border: 1px solid #00000010;
-    border-radius: 5px;
-    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
-    color: #333333;
-    display: flex;
-    align-items: flex-start;
-  }
-
-  .link-item:hover {
-    border-color: #1EA7FD50;
-    transform: translate3d(0, -3px, 0);
-    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
-  }
-
-  .link-item:active {
-    border-color: #1EA7FD;
-    transform: translate3d(0, 0, 0);
-  }
-
-  .link-item strong {
-    font-weight: 700;
-    display: block;
-    margin-bottom: 2px;
-  }
-  
-  .link-item img {
-    height: 40px;
-    width: 40px;
-    margin-right: 15px;
-    flex: none;
-  }
-
-  .link-item span {
-    font-size: 14px;
-    line-height: 20px;
-  }
-
-  .tip {
-    display: inline-block;
-    border-radius: 1em;
-    font-size: 11px;
-    line-height: 12px;
-    font-weight: 700;
-    background: #E7FDD8;
-    color: #66BF3C;
-    padding: 4px 12px;
-    margin-right: 10px;
-    vertical-align: top;
-  }
-
-  .tip-wrapper {
-    font-size: 13px;
-    line-height: 20px;
-    margin-top: 40px;
-    margin-bottom: 40px;
-  }
-
-  .tip-wrapper code {
-    font-size: 12px;
-    display: inline-block;
-  }
-
-  
-`}</style>
-
-# Welcome to Storybook
-
-Storybook helps you build UI components in isolation from your app's business logic, data, and context.
-That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
-
-Browse example stories now by navigating to them in the sidebar.
-View their code in the `src/stories` directory to learn how they work.
-We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
-
-<div className="subheading">Configure</div>
-
-<div className="link-list">
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/addons/addon-types"
-    target="_blank"
-  >
-    <img src={Plugin} alt="plugin" />
-    <span>
-      <strong>Presets for popular tools</strong>
-      Easy setup for TypeScript, SCSS and more.
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/webpack"
-    target="_blank"
-  >
-    <img src={StackAlt} alt="Build" />
-    <span>
-      <strong>Build configuration</strong>
-      How to customize webpack and Babel
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/styling-and-css"
-    target="_blank"
-  >
-    <img src={Colors} alt="colors" />
-    <span>
-      <strong>Styling</strong>
-      How to load and configure CSS libraries
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
-    target="_blank"
-  >
-    <img src={Flow} alt="flow" />
-    <span>
-      <strong>Data</strong>
-      Providers and mocking for data libraries
-    </span>
-  </a>
-</div>
-
-<div className="subheading">Learn</div>
-
-<div className="link-list">
-  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
-    <img src={Repo} alt="repo" />
-    <span>
-      <strong>Storybook documentation</strong>
-      Configure, customize, and extend
-    </span>
-  </a>
-  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
-    <img src={Direction} alt="direction" />
-    <span>
-      <strong>In-depth guides</strong>
-      Best practices from leading teams
-    </span>
-  </a>
-  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
-    <img src={Code} alt="code" />
-    <span>
-      <strong>GitHub project</strong>
-      View the source and add issues
-    </span>
-  </a>
-  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
-    <img src={Comments} alt="comments" />
-    <span>
-      <strong>Discord chat</strong>
-      Chat with maintainers and the community
-    </span>
-  </a>
-</div>
-
-<div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{' '}
-  <code>src/stories/Introduction.stories.mdx</code>
-</div>

package/dist/stories/Page.js

@@ -1,68 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Page = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _Header = require("./Header");
-
-require("./page.css");
-
-var Page = function Page(_ref) {
-  var user = _ref.user,
-      onLogin = _ref.onLogin,
-      onLogout = _ref.onLogout,
-      onCreateAccount = _ref.onCreateAccount;
-  return _react["default"].createElement("article", null, _react["default"].createElement(_Header.Header, {
-    user: user,
-    onLogin: onLogin,
-    onLogout: onLogout,
-    onCreateAccount: onCreateAccount
-  }), _react["default"].createElement("section", null, _react["default"].createElement("h2", null, "Pages in Storybook"), _react["default"].createElement("p", null, "We recommend building UIs with a", ' ', _react["default"].createElement("a", {
-    href: "https://componentdriven.org",
-    target: "_blank",
-    rel: "noopener noreferrer"
-  }, _react["default"].createElement("strong", null, "component-driven")), ' ', "process starting with atomic components and ending with pages."), _react["default"].createElement("p", null, "Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:"), _react["default"].createElement("ul", null, _react["default"].createElement("li", null, "Use a higher-level connected component. Storybook helps you compose such data from the \"args\" of child component stories"), _react["default"].createElement("li", null, "Assemble data in the page component from your services. You can mock these services out using Storybook.")), _react["default"].createElement("p", null, "Get a guided tutorial on component-driven development at", ' ', _react["default"].createElement("a", {
-    href: "https://storybook.js.org/tutorials/",
-    target: "_blank",
-    rel: "noopener noreferrer"
-  }, "Storybook tutorials"), ". Read more in the", ' ', _react["default"].createElement("a", {
-    href: "https://storybook.js.org/docs",
-    target: "_blank",
-    rel: "noopener noreferrer"
-  }, "docs"), "."), _react["default"].createElement("div", {
-    className: "tip-wrapper"
-  }, _react["default"].createElement("span", {
-    className: "tip"
-  }, "Tip"), " Adjust the width of the canvas with the", ' ', _react["default"].createElement("svg", {
-    width: "10",
-    height: "10",
-    viewBox: "0 0 12 12",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, _react["default"].createElement("g", {
-    fill: "none",
-    fillRule: "evenodd"
-  }, _react["default"].createElement("path", {
-    d: "M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z",
-    id: "a",
-    fill: "#999"
-  }))), "Viewports addon in the toolbar")));
-};
-
-exports.Page = Page;
-Page.propTypes = {
-  user: _propTypes["default"].shape({}),
-  onLogin: _propTypes["default"].func.isRequired,
-  onLogout: _propTypes["default"].func.isRequired,
-  onCreateAccount: _propTypes["default"].func.isRequired
-};
-Page.defaultProps = {
-  user: null
-};

package/dist/stories/Page.stories.js

@@ -1,39 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LoggedOut = exports.LoggedIn = exports["default"] = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Page = require("./Page");
-
-var HeaderStories = _interopRequireWildcard(require("./Header.stories"));
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(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) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-var _default = {
-  title: 'Example/Page',
-  component: _Page.Page
-};
-exports["default"] = _default;
-
-var Template = function Template(args) {
-  return _react["default"].createElement(_Page.Page, args);
-};
-
-var LoggedIn = Template.bind({});
-exports.LoggedIn = LoggedIn;
-LoggedIn.args = _objectSpread({}, HeaderStories.LoggedIn.args);
-var LoggedOut = Template.bind({});
-exports.LoggedOut = LoggedOut;
-LoggedOut.args = _objectSpread({}, HeaderStories.LoggedOut.args);

package/dist/stories/assets/code-brackets.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/code-brackets</title><g id="illustration/code-brackets" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#87E6E5" d="M11.4139325,12 C11.7605938,12 12,12.5059743 12,13.3779712 L12,17.4951758 L6.43502246,23.3839989 C5.85499251,23.9978337 5.85499251,25.0021663 6.43502246,25.6160011 L12,31.5048242 L12,35.6220288 C12,36.4939606 11.7605228,37 11.4139325,37 C11.2725831,37 11.1134406,36.9158987 10.9453839,36.7379973 L0.435022463,25.6160011 C-0.145007488,25.0021663 -0.145007488,23.9978337 0.435022463,23.3839989 L10.9453839,12.2620027 C11.1134051,12.0841663 11.2725831,12 11.4139325,12 Z M36.5860675,12 C36.7274169,12 36.8865594,12.0841013 37.0546161,12.2620027 L47.5649775,23.3839989 C48.1450075,23.9978337 48.1450075,25.0021663 47.5649775,25.6160011 L37.0546161,36.7379973 C36.8865949,36.9158337 36.7274169,37 36.5860675,37 C36.2394062,37 36,36.4940257 36,35.6220288 L36,31.5048242 L41.5649775,25.6160011 C42.1450075,25.0021663 42.1450075,23.9978337 41.5649775,23.3839989 L36,17.4951758 L36,13.3779712 C36,12.5060394 36.2394772,12 36.5860675,12 Z"/><rect id="Rectangle-7-Copy-5" width="35.57" height="4" x="5.009" y="22.662" fill="#A0DB77" rx="2" transform="translate(22.793959, 24.662305) rotate(-75.000000) translate(-22.793959, -24.662305)"/></g></svg>