w-design-system 0.0.45 → 0.0.47

package/dist/components/InputTag/index.d.ts

@@ -0,0 +1,20 @@
+import React, { HTMLAttributes, ReactNode } from 'react';
+export interface InputProps extends HTMLAttributes<HTMLDivElement> {
+    placeholder?: string;
+    rightIcon?: ReactNode;
+    leftIcon?: ReactNode;
+    label?: string;
+    readonly?: boolean;
+    disabled?: boolean;
+    value?: string;
+    tags: string[];
+    setTags: (tags: string[]) => void;
+}
+export interface Position {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare const InputTag: React.FC<InputProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/InputTag/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/InputTag/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,SAAS,EAAmD,MAAM,OAAO,CAAA;AAKzG,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CAClC;AAED,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAuHzC,CAAA"}

package/dist/components/InputTag/index.js

@@ -0,0 +1,95 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { InputWrapper, StyledInput, StyledInputBorder, StyledInputContent, StyledLabel } from './styles';
+import { Paragraph } from '../Paragraph';
+import { theme } from '../Themes';
+export const InputTag = (_a) => {
+    var { label, readonly, disabled, leftIcon, rightIcon, tags, setTags, placeholder } = _a, props = __rest(_a, ["label", "readonly", "disabled", "leftIcon", "rightIcon", "tags", "setTags", "placeholder"]);
+    const id = useId();
+    const contentRef = useRef(null);
+    const labelRef = useRef(null);
+    const inputRef = useRef(null);
+    const [inputValue, setInputValue] = useState('');
+    const [labelPosition, setLabelPosition] = useState({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+    });
+    const [contentPosition, setContentPosition] = useState({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+    });
+    const updatePositions = useCallback(() => {
+        const margin = 30;
+        if (contentRef.current) {
+            setContentPosition({
+                x: contentRef.current.offsetLeft - margin,
+                y: contentRef.current.offsetTop - margin,
+                width: contentRef.current.offsetWidth + margin * 2,
+                height: contentRef.current.offsetHeight + margin * 2,
+            });
+        }
+        if (labelRef.current) {
+            setLabelPosition({
+                x: labelRef.current.offsetLeft,
+                y: labelRef.current.offsetTop,
+                width: labelRef.current.offsetWidth,
+                height: labelRef.current.offsetHeight,
+            });
+        }
+    }, []);
+    useEffect(() => {
+        updatePositions();
+    }, [label, updatePositions]);
+    const addTag = (e) => {
+        var _a;
+        if (e)
+            e.stopPropagation();
+        if (inputValue.trim() && !tags.includes(inputValue.trim())) {
+            setTags([...tags, inputValue.trim()]);
+            setInputValue('');
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
+    const removeTag = (tagToRemove) => {
+        setTags(tags.filter(tag => tag !== tagToRemove));
+    };
+    const handleContainerClick = (e) => {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        e.stopPropagation();
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(InputWrapper, Object.assign({}, props),
+            React.createElement(StyledInputContent, { disabled: disabled, ref: contentRef, onClick: e => handleContainerClick(e) },
+                React.createElement(StyledInputBorder, { content: contentPosition, label: labelPosition }),
+                React.createElement(StyledLabel, { htmlFor: id, ref: labelRef }, label),
+                leftIcon,
+                React.createElement(StyledInput, { id: id, disabled: disabled, ref: inputRef, value: inputValue, onChange: e => setInputValue(e.target.value), placeholder: placeholder, onKeyDown: e => {
+                        if (e.key === 'Enter') {
+                            e.preventDefault();
+                            addTag();
+                        }
+                    }, readOnly: readonly }),
+                rightIcon),
+            React.createElement("button", { className: 'button-action', onClick: e => addTag(e) },
+                React.createElement(Paragraph, { color: theme.colors.cyan30 }, "add")),
+            React.createElement("div", { className: 'container-input-tag' }, tags.map((tag, index) => (React.createElement("button", { className: 'wrapper-tag', key: index },
+                React.createElement(Paragraph, { color: theme.colors.cyan30 }, tag),
+                React.createElement("button", { onClick: () => removeTag(tag) },
+                    React.createElement(Paragraph, { color: theme.colors.shade40 }, "x")))))))));
+};
+//# sourceMappingURL=index.js.map

package/dist/components/InputTag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/InputTag/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/InputTag/stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { InputTag } from './index';
+declare const meta: Meta<typeof InputTag>;
+export default meta;
+type Story = StoryObj<typeof InputTag>;
+export declare const Playground: Story;
+//# sourceMappingURL=stories.d.ts.map

package/dist/components/InputTag/stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../../src/components/InputTag/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAGlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAS/B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAA;AAQtC,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAA"}

package/dist/components/InputTag/stories.js

@@ -0,0 +1,25 @@
+import { InputTag } from './index';
+import React, { useState } from 'react';
+const meta = {
+    title: 'Components/InputTag',
+    component: InputTag,
+    argTypes: {
+        placeholder: { control: 'text' },
+        label: { control: 'text' },
+        readonly: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+    },
+};
+export default meta;
+const Template = (args) => {
+    const [tags, setTags] = useState(['Tag1', 'Tag2']);
+    return React.createElement(InputTag, Object.assign({}, args, { tags: tags, setTags: setTags }));
+};
+export const Playground = {
+    render: args => React.createElement(Template, Object.assign({}, args)),
+    args: {
+        label: 'Label',
+        placeholder: 'Digite uma tag',
+    },
+};
+//# sourceMappingURL=stories.js.map

package/dist/components/InputTag/stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/InputTag/stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,MAAM,IAAI,GAA0B;IAClC,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAED,eAAe,IAAI,CAAA;AAGnB,MAAM,QAAQ,GAAG,CAAC,IAAS,EAAE,EAAE;IAC7B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IAE5D,OAAO,oBAAC,QAAQ,oBAAK,IAAI,IAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,IAAI,CAAA;AAC7D,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,oBAAC,QAAQ,oBAAK,IAAI,EAAI;IACtC,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO;QACd,WAAW,EAAE,gBAAgB;KAC9B;CACF,CAAA"}

package/dist/components/InputTag/styles.d.ts

@@ -0,0 +1,19 @@
+import type { Position } from '.';
+export declare const InputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export declare const StyledLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
+export interface StyledInputContentProps {
+    disabled?: boolean;
+}
+export declare const StyledInputContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledInputContentProps>> & string;
+export interface StyledInputBorderProps {
+    label: Position;
+    content: Position;
+}
+/**
+ * O clip-path faz com que o elemento fique transparente na região do label
+ * @see https://stackoverflow.com/questions/3742479/how-to-cut-a-hole-in-an-svg-rectangle
+ * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
+ */
+export declare const StyledInputBorder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledInputBorderProps>> & string;
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/InputTag/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/InputTag/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAA;AAEjC,eAAO,MAAM,YAAY,6NA4CxB,CAAA;AAED,eAAO,MAAM,WAAW,sOA4BvB,CAAA;AAED,eAAO,MAAM,WAAW,sOAavB,CAAA;AAED,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,kBAAkB,4PAiB9B,CAAA;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,QAAQ,CAAA;IACf,OAAO,EAAE,QAAQ,CAAA;CAClB;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,2PAc7B,CAAA"}

package/dist/components/InputTag/styles.js

@@ -0,0 +1,127 @@
+import styled from 'styled-components';
+import { theme } from '../Themes';
+export const InputWrapper = styled.div `
+  position: relative;
+  border-radius: 4px;
+  .button-action {
+    position: absolute;
+    right: 0;
+    top: 1px;
+    display: flex;
+    align-items: center;
+    padding: 18px;
+    height: 52px;
+    border-radius: 4px;
+    background: ${theme.colors.shade10};
+    border: none;
+    cursor: pointer;
+  }
+  .container-input-tag {
+    display: flex;
+    gap: 16px;
+    margin-top: 8px;
+
+    button {
+      background: none;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      gap: 8px;
+
+      p {
+        margin-top: 2px;
+      }
+    }
+
+    .wrapper-tag {
+      background: ${theme.colors.cyan10};
+      display: flex;
+
+      gap: 8px;
+      flex-wrap: wrap;
+      border-radius: 4px;
+      padding: 4px 8px;
+    }
+  }
+`;
+export const StyledInput = styled.input `
+  width: 100%;
+
+  background-color: transparent;
+  border: none;
+  outline: none;
+
+  color: ${theme.colors.shade50};
+
+  font-family: ${theme.fonts.join(', ')};
+  font-size: ${theme.paragraph.medium};
+
+  &:active,
+  &:focus {
+    outline: none;
+    border: none;
+  }
+
+  &::placeholder {
+    color: ${theme.colors.shade30};
+    font-size: ${theme.paragraph.medium};
+    opacity: 1;
+  }
+
+  &:disabled {
+    background-color: transparent;
+    cursor: not-allowed;
+  }
+`;
+export const StyledLabel = styled.label `
+  position: absolute;
+  color: ${theme.colors.shade50};
+
+  box-sizing: content-box;
+  left: 15px;
+  top: -8px;
+  padding: 0 1px;
+
+  font-family: 'Nunito Sans', sans-serif;
+  font-size: ${theme.paragraph.small};
+  font-weight: 600;
+  text-wrap: nowrap;
+`;
+export const StyledInputContent = styled.div `
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  box-sizing: content-box;
+  padding: 18px 16px 14px 16px;
+  height: 22px;
+  gap: 8px;
+  border-radius: 4px;
+
+  background-color: ${({ disabled }) => disabled ? theme.colors.shade10 : theme.colors.white};
+
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+`;
+/**
+ * O clip-path faz com que o elemento fique transparente na região do label
+ * @see https://stackoverflow.com/questions/3742479/how-to-cut-a-hole-in-an-svg-rectangle
+ * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
+ */
+export const StyledInputBorder = styled.div `
+  position: absolute;
+
+  box-sizing: content-box;
+  inset: 0px;
+  border-radius: 4px;
+  border: 1px solid ${theme.colors.shade20};
+  clip-rule: evenodd;
+  clip-path: path(
+    '${({ label, content }) => label.height !== 0 && label.width !== 0
+    ? `M ${content.x} ${content.y} l ${content.width} 0 l 0 ${content.height} l -${content.width} 0z M ${label.x} ${label.y} l 0 ${label.height} l ${label.width} 0 l 0 -${label.height}z`
+    : ''}'
+  );
+`;
+//# sourceMappingURL=styles.js.map

package/dist/components/InputTag/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/InputTag/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAGjC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;kBAYpB,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;oBAuBlB,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;;;;;CAStC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;WAO5B,KAAK,CAAC,MAAM,CAAC,OAAO;;iBAEd,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;eACxB,KAAK,CAAC,SAAS,CAAC,MAAM;;;;;;;;;aASxB,KAAK,CAAC,MAAM,CAAC,OAAO;iBAChB,KAAK,CAAC,SAAS,CAAC,MAAM;;;;;;;;CAQtC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;;WAE5B,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;;;;eAQhB,KAAK,CAAC,SAAS,CAAC,KAAK;;;CAGnC,CAAA;AAMD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAyB;;;;;;;;;;;;;sBAa/C,CAAC,EAAE,QAAQ,EAA2B,EAAE,EAAE,CAC5D,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;YAE5C,CAAC,EAAE,QAAQ,EAA2B,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;CAC5F,CAAA;AAOD;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAwB;;;;;;sBAM7C,KAAK,CAAC,MAAM,CAAC,OAAO;;;OAGnC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CACxB,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,CAAC,KAAK,KAAK,CAAC;IACrC,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,MAAM,OAAO,CAAC,KAAK,UAAU,OAAO,CAAC,MAAM,OAAO,OAAO,CAAC,KAAK,SAAS,KAAK,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,QAAQ,KAAK,CAAC,MAAM,MAAM,KAAK,CAAC,KAAK,WAAW,KAAK,CAAC,MAAM,GAAG;IACtL,CAAC,CAAC,EAAE;;CAEX,CAAA"}

package/dist/components/PortalSelect/index.d.ts

@@ -18,6 +18,7 @@ export interface PortalSelectProps extends HTMLAttributes<HTMLDivElement> {
     dropDownWidth?: string;
     disableSearch?: boolean;
     dropDownMaxHeight?: string;
+    allPortalsOption?: boolean;
 }
 export declare const PortalSelect: (props: PropsWithChildren<PortalSelectProps> & {
     ref?: React.ForwardedRef<SelectRef>;

package/dist/components/PortalSelect/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PortalSelect/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC3E,OAAO,EAAuB,SAAS,EAAE,MAAM,WAAW,CAAA;AA+C1D,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAChD,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAuFD,eAAO,MAAM,YAAY,EAA8C,CACrE,KAAK,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAA;CAAE,KAClF,KAAK,CAAC,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PortalSelect/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC3E,OAAO,EAAuB,SAAS,EAAE,MAAM,WAAW,CAAA;AA+C1D,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAChD,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAoGD,eAAO,MAAM,YAAY,EAA8C,CACrE,KAAK,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAA;CAAE,KAClF,KAAK,CAAC,YAAY,CAAA"}

package/dist/components/PortalSelect/index.js

@@ -102,27 +102,36 @@ const portalIcons = {
     49: portalImg49,
 };
 const PortalSelectFowardRef = (_a, ref) => {
-    var _b;
-    var { children, portals } = _a, props = __rest(_a, ["children", "portals"]);
-    const selectProps = Object.assign(Object.assign({}, props), { leftIcon: React.createElement(PortalIcon, { src: props.selectedOption ? portalIcons[props.selectedOption.id] : defaultIcon }), options: portals.map(portal => {
-            var _a;
-            const imageUrl = ((_a = portalIcons[portal.id]) !== null && _a !== void 0 ? _a : defaultIcon);
+    var { children, portals, allPortalsOption } = _a, props = __rest(_a, ["children", "portals", "allPortalsOption"]);
+    const allPortalsValue = allPortalsOption !== false;
+    const portalsValue = allPortalsValue ? [{ id: 0, name: 'Todos os portais' }, ...portals] : portals;
+    const selectProps = Object.assign(Object.assign({}, props), { leftIcon: props.selectedOption != null && portalIcons[props.selectedOption.id] && (React.createElement(PortalIcon, { src: props.selectedOption ? portalIcons[props.selectedOption.id] : defaultIcon })), options: portalsValue.map(portal => {
+            const imageUrl = portalIcons[portal.id];
             return {
                 id: portal.id,
                 text: portal.name,
-                icon: React.createElement(PortalIcon, { src: imageUrl, alt: portal.name }),
+                icon: imageUrl && React.createElement(PortalIcon, { src: imageUrl, alt: portal.name }),
                 portal,
             };
         }), onOptionChange: option => {
             var _a;
             if (props.onOptionChange) {
-                props.onOptionChange((_a = option === null || option === void 0 ? void 0 : option.portal) !== null && _a !== void 0 ? _a : null);
+                if (allPortalsValue && !option) {
+                    props.onOptionChange({
+                        id: 0,
+                        name: 'Todos os portais',
+                    });
+                    return;
+                }
+                else {
+                    props.onOptionChange((_a = option === null || option === void 0 ? void 0 : option.portal) !== null && _a !== void 0 ? _a : null);
+                }
             }
         }, selectedOption: props.selectedOption
             ? {
                 id: props.selectedOption.id,
                 text: props.selectedOption.name,
-                icon: (React.createElement(PortalIcon, { src: (_b = portalIcons[props.selectedOption.id]) !== null && _b !== void 0 ? _b : defaultIcon, alt: props.selectedOption.name })),
+                icon: portalIcons[props.selectedOption.id] && (React.createElement(PortalIcon, { src: portalIcons[props.selectedOption.id], alt: props.selectedOption.name })),
                 portal: props.selectedOption,
             }
             : null });

package/dist/components/PortalSelect/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PortalSelect/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PortalSelect/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/PortalSelect/stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../../src/components/PortalSelect/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,YAAY,EAAqB,MAAM,SAAS,CAAA;AAGzD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAYC,CAAA;AAErC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAA;AA6D1C,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAA"}
+{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../../src/components/PortalSelect/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,YAAY,EAAqB,MAAM,SAAS,CAAA;AAGzD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAaC,CAAA;AAErC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAA;AA6D1C,eAAO,MAAM,OAAO,EAAE,KASrB,CAAA"}

package/dist/components/PortalSelect/stories.js

@@ -22,6 +22,7 @@ const meta = {
         selectedOption: { control: 'number' },
         onOptionChange: { action: 'selectedOptionChange' },
         dropDownTop: { control: 'boolean' },
+        allPortalsOption: { control: 'boolean' },
     },
 };
 export default meta;
@@ -73,9 +74,9 @@ const portals = {
 const ComponentWrapper = (_a) => {
     var { portals } = _a, args = __rest(_a, ["portals"]);
     const [selectedOption, setSelectOption] = React.useState(null);
-    return (React.createElement(PortalSelect, Object.assign({ selectedOption: selectedOption, onOptionChange: option => setSelectOption(option), portals: portals }, args)));
+    return (React.createElement(PortalSelect, Object.assign({}, args, { selectedOption: selectedOption, onOptionChange: option => setSelectOption(option), portals: portals })));
 };
 export const Default = {
-    render: () => (React.createElement(ComponentWrapper, { label: "Label", placeholder: "Placeholder", portals: Object.entries(portals).map(([id, name]) => ({ id: Number(id), name })) })),
+    render: args => (React.createElement(ComponentWrapper, Object.assign({}, args, { label: "Label", placeholder: "Placeholder", portals: Object.entries(portals).map(([id, name]) => ({ id: Number(id), name })) }))),
 };
 //# sourceMappingURL=stories.js.map

package/dist/components/PortalSelect/stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/PortalSelect/stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/PortalSelect/stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/index.d.ts

@@ -12,4 +12,5 @@ export { Paginate } from './Paginate/index';
 export { Table } from './Table/index';
 export { Input } from './Input/index';
 export { EmptyState } from './EmptyState/index';
+export { InputTag } from './InputTag/index';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/components/index.js

@@ -12,4 +12,5 @@ export { Paginate } from './Paginate/index';
 export { Table } from './Table/index';
 export { Input } from './Input/index';
 export { EmptyState } from './EmptyState/index';
+export { InputTag } from './InputTag/index';
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export { Tabs } from './components/Tabs/index';
 export { theme } from './components/Themes/index';
 export { Title } from './components/Title/index';
 export { EmptyState } from './components/EmptyState/index';
+export { InputTag } from './components/InputTag/index';
 export * from './components/Types/index';
 export { alertSVG, appsSVG, bellSVG, bindSVG, bookmarkSVG, calendarSVG, checkSVG, chevronDownSVG, chevronLeftSVG, chevronRightSVG, closeSVG, commentSVG, dashboardSVG, docCheckSVG, docDownloadSVG, docSVG, docUploadSVG, dumpSVG, editSVG, editalSVG, eyesSVG, fileSVG, financeSVG, gearSVG, grid2PlusSVG, imageSVG, moneySVG, monitoringSVG, orderSVG, portalSVG, settingSVG, spinSVG, spreadsheetSVG, wavePulseSVG, } from './assets/icon/index';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAA;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAA;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAC1D,cAAc,0BAA0B,CAAA;AAExC,OAAO,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,OAAO,EACP,WAAW,EACX,WAAW,EACX,QAAQ,EACR,cAAc,EACd,cAAc,EACd,eAAe,EACf,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,WAAW,EACX,cAAc,EACd,MAAM,EACN,YAAY,EACZ,OAAO,EACP,OAAO,EACP,SAAS,EACT,OAAO,EACP,OAAO,EACP,UAAU,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,SAAS,EACT,UAAU,EACV,OAAO,EACP,cAAc,EACd,YAAY,GACb,MAAM,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAA;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAA;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,cAAc,0BAA0B,CAAA;AAExC,OAAO,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,OAAO,EACP,WAAW,EACX,WAAW,EACX,QAAQ,EACR,cAAc,EACd,cAAc,EACd,eAAe,EACf,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,WAAW,EACX,cAAc,EACd,MAAM,EACN,YAAY,EACZ,OAAO,EACP,OAAO,EACP,SAAS,EACT,OAAO,EACP,OAAO,EACP,UAAU,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,SAAS,EACT,UAAU,EACV,OAAO,EACP,cAAc,EACd,YAAY,GACb,MAAM,qBAAqB,CAAA"}

package/dist/index.js

@@ -17,6 +17,7 @@ export { Tabs } from './components/Tabs/index';
 export { theme } from './components/Themes/index';
 export { Title } from './components/Title/index';
 export { EmptyState } from './components/EmptyState/index';
+export { InputTag } from './components/InputTag/index';
 export * from './components/Types/index';
 export { alertSVG, appsSVG, bellSVG, bindSVG, bookmarkSVG, calendarSVG, checkSVG, chevronDownSVG, chevronLeftSVG, chevronRightSVG, closeSVG, commentSVG, dashboardSVG, docCheckSVG, docDownloadSVG, docSVG, docUploadSVG, dumpSVG, editSVG, editalSVG, eyesSVG, fileSVG, financeSVG, gearSVG, grid2PlusSVG, imageSVG, moneySVG, monitoringSVG, orderSVG, portalSVG, settingSVG, spinSVG, spreadsheetSVG, wavePulseSVG, } from './assets/icon/index';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAA;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAA;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAC1D,cAAc,0BAA0B,CAAA;AAExC,OAAO,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,OAAO,EACP,WAAW,EACX,WAAW,EACX,QAAQ,EACR,cAAc,EACd,cAAc,EACd,eAAe,EACf,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,WAAW,EACX,cAAc,EACd,MAAM,EACN,YAAY,EACZ,OAAO,EACP,OAAO,EACP,SAAS,EACT,OAAO,EACP,OAAO,EACP,UAAU,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,SAAS,EACT,UAAU,EACV,OAAO,EACP,cAAc,EACd,YAAY,GACb,MAAM,qBAAqB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAA;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAA;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,cAAc,0BAA0B,CAAA;AAExC,OAAO,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,OAAO,EACP,WAAW,EACX,WAAW,EACX,QAAQ,EACR,cAAc,EACd,cAAc,EACd,eAAe,EACf,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,WAAW,EACX,cAAc,EACd,MAAM,EACN,YAAY,EACZ,OAAO,EACP,OAAO,EACP,SAAS,EACT,OAAO,EACP,OAAO,EACP,UAAU,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,SAAS,EACT,UAAU,EACV,OAAO,EACP,cAAc,EACd,YAAY,GACb,MAAM,qBAAqB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "w-design-system",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {

package/src/components/InputTag/index.tsx

@@ -0,0 +1,144 @@
+import React, { HTMLAttributes, ReactNode, useCallback, useEffect, useId, useRef, useState } from 'react'
+import { InputWrapper, StyledInput, StyledInputBorder, StyledInputContent, StyledLabel } from './styles'
+import { Paragraph } from '../Paragraph'
+import { theme } from '../Themes'
+
+export interface InputProps extends HTMLAttributes<HTMLDivElement> {
+  placeholder?: string
+  rightIcon?: ReactNode
+  leftIcon?: ReactNode
+  label?: string
+  readonly?: boolean
+  disabled?: boolean
+  value?: string
+  tags: string[]
+  setTags: (tags: string[]) => void
+}
+
+export interface Position {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export const InputTag: React.FC<InputProps> = ({
+  label,
+  readonly,
+  disabled,
+  leftIcon,
+  rightIcon,
+  tags,
+  setTags,
+  placeholder,
+  ...props
+}) => {
+  const id = useId()
+  const contentRef = useRef<HTMLDivElement>(null)
+  const labelRef = useRef<HTMLLabelElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [inputValue, setInputValue] = useState('')
+
+  const [labelPosition, setLabelPosition] = useState<Position>({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+  })
+  const [contentPosition, setContentPosition] = useState<Position>({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+  })
+
+  const updatePositions = useCallback(() => {
+    const margin = 30
+    if (contentRef.current) {
+      setContentPosition({
+        x: contentRef.current.offsetLeft - margin,
+        y: contentRef.current.offsetTop - margin,
+        width: contentRef.current.offsetWidth + margin * 2,
+        height: contentRef.current.offsetHeight + margin * 2,
+      })
+    }
+    if (labelRef.current) {
+      setLabelPosition({
+        x: labelRef.current.offsetLeft,
+        y: labelRef.current.offsetTop,
+        width: labelRef.current.offsetWidth,
+        height: labelRef.current.offsetHeight,
+      })
+    }
+  }, [])
+
+  useEffect(() => {
+    updatePositions()
+  }, [label, updatePositions])
+
+  const addTag = (e?: React.MouseEvent<HTMLButtonElement>) => {
+    if (e) e.stopPropagation()
+    if (inputValue.trim() && !tags.includes(inputValue.trim())) {
+      setTags([...tags, inputValue.trim()])
+      setInputValue('')
+      inputRef.current?.focus()
+    }
+  }
+
+  const removeTag = (tagToRemove: string) => {
+    setTags(tags.filter(tag => tag !== tagToRemove))
+  }
+
+  const handleContainerClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    inputRef.current?.focus()
+    e.stopPropagation()
+  }
+
+  return (
+    <>
+      {/* ✅ Mantendo a borda dinâmica com ref */}
+      <InputWrapper {...props}>
+        <StyledInputContent disabled={disabled} ref={contentRef} onClick={e => handleContainerClick(e)}>
+          {/* ✅ Mantendo a borda dinâmica */}
+          <StyledInputBorder content={contentPosition} label={labelPosition} />
+          <StyledLabel htmlFor={id} ref={labelRef}>
+            {label}
+          </StyledLabel>
+          {leftIcon}
+
+          {/* ✅ Input controlado e foco garantido */}
+          <StyledInput
+            id={id}
+            disabled={disabled}
+            ref={inputRef}
+            value={inputValue}
+            onChange={e => setInputValue(e.target.value)}
+            placeholder={placeholder}
+            onKeyDown={e => {
+              if (e.key === 'Enter') {
+                e.preventDefault()
+                addTag()
+              }
+            }}
+            readOnly={readonly}
+          />
+
+          {rightIcon}
+        </StyledInputContent>
+        <button className={'button-action'} onClick={e => addTag(e)}>
+          <Paragraph color={theme.colors.cyan30}>add</Paragraph>
+        </button>
+        <div className={'container-input-tag'}>
+          {tags.map((tag, index) => (
+            <button className={'wrapper-tag'} key={index}>
+              <Paragraph color={theme.colors.cyan30}>{tag}</Paragraph>
+              <button onClick={() => removeTag(tag)}>
+                <Paragraph color={theme.colors.shade40}>x</Paragraph>
+              </button>
+            </button>
+          ))}
+        </div>
+      </InputWrapper>
+    </>
+  )
+}

package/src/components/InputTag/stories.tsx

@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { InputTag } from './index'
+import React, { useState } from 'react'
+
+const meta: Meta<typeof InputTag> = {
+  title: 'Components/InputTag',
+  component: InputTag,
+  argTypes: {
+    placeholder: { control: 'text' },
+    label: { control: 'text' },
+    readonly: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof InputTag>
+
+const Template = (args: any) => {
+  const [tags, setTags] = useState<string[]>(['Tag1', 'Tag2'])
+
+  return <InputTag {...args} tags={tags} setTags={setTags} />
+}
+
+export const Playground: Story = {
+  render: args => <Template {...args} />,
+  args: {
+    label: 'Label',
+    placeholder: 'Digite uma tag',
+  },
+}

package/src/components/InputTag/styles.ts

@@ -0,0 +1,143 @@
+import styled from 'styled-components'
+import { theme } from '../Themes'
+import type { Position } from '.'
+
+export const InputWrapper = styled.div`
+  position: relative;
+  border-radius: 4px;
+  .button-action {
+    position: absolute;
+    right: 0;
+    top: 1px;
+    display: flex;
+    align-items: center;
+    padding: 18px;
+    height: 52px;
+    border-radius: 4px;
+    background: ${theme.colors.shade10};
+    border: none;
+    cursor: pointer;
+  }
+  .container-input-tag {
+    display: flex;
+    gap: 16px;
+    margin-top: 8px;
+
+    button {
+      background: none;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      gap: 8px;
+
+      p {
+        margin-top: 2px;
+      }
+    }
+
+    .wrapper-tag {
+      background: ${theme.colors.cyan10};
+      display: flex;
+
+      gap: 8px;
+      flex-wrap: wrap;
+      border-radius: 4px;
+      padding: 4px 8px;
+    }
+  }
+`
+
+export const StyledInput = styled.input`
+  width: 100%;
+
+  background-color: transparent;
+  border: none;
+  outline: none;
+
+  color: ${theme.colors.shade50};
+
+  font-family: ${theme.fonts.join(', ')};
+  font-size: ${theme.paragraph.medium};
+
+  &:active,
+  &:focus {
+    outline: none;
+    border: none;
+  }
+
+  &::placeholder {
+    color: ${theme.colors.shade30};
+    font-size: ${theme.paragraph.medium};
+    opacity: 1;
+  }
+
+  &:disabled {
+    background-color: transparent;
+    cursor: not-allowed;
+  }
+`
+
+export const StyledLabel = styled.label`
+  position: absolute;
+  color: ${theme.colors.shade50};
+
+  box-sizing: content-box;
+  left: 15px;
+  top: -8px;
+  padding: 0 1px;
+
+  font-family: 'Nunito Sans', sans-serif;
+  font-size: ${theme.paragraph.small};
+  font-weight: 600;
+  text-wrap: nowrap;
+`
+
+export interface StyledInputContentProps {
+  disabled?: boolean
+}
+
+export const StyledInputContent = styled.div<StyledInputContentProps>`
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  box-sizing: content-box;
+  padding: 18px 16px 14px 16px;
+  height: 22px;
+  gap: 8px;
+  border-radius: 4px;
+
+  background-color: ${({ disabled }: StyledInputContentProps) =>
+    disabled ? theme.colors.shade10 : theme.colors.white};
+
+  cursor: ${({ disabled }: StyledInputContentProps) => (disabled ? 'not-allowed' : 'pointer')};
+`
+
+export interface StyledInputBorderProps {
+  label: Position
+  content: Position
+}
+
+/**
+ * O clip-path faz com que o elemento fique transparente na região do label
+ * @see https://stackoverflow.com/questions/3742479/how-to-cut-a-hole-in-an-svg-rectangle
+ * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
+ */
+export const StyledInputBorder = styled.div<StyledInputBorderProps>`
+  position: absolute;
+
+  box-sizing: content-box;
+  inset: 0px;
+  border-radius: 4px;
+  border: 1px solid ${theme.colors.shade20};
+  clip-rule: evenodd;
+  clip-path: path(
+    '${({ label, content }) =>
+      label.height !== 0 && label.width !== 0
+        ? `M ${content.x} ${content.y} l ${content.width} 0 l 0 ${content.height} l -${content.width} 0z M ${label.x} ${label.y} l 0 ${label.height} l ${label.width} 0 l 0 -${label.height}z`
+        : ''}'
+  );
+`

package/src/components/PortalSelect/index.tsx

@@ -65,6 +65,7 @@ export interface PortalSelectProps extends HTMLAttributes<HTMLDivElement> {
   dropDownWidth?: string
   disableSearch?: boolean
   dropDownMaxHeight?: string
+  allPortalsOption?: boolean
 }
 
 const portalIcons: Record<number, string> = {
@@ -113,32 +114,45 @@ const portalIcons: Record<number, string> = {
   49: portalImg49,
 }
 const PortalSelectFowardRef = (
-  { children, portals, ...props }: PropsWithChildren<PortalSelectProps>,
+  { children, portals, allPortalsOption, ...props }: PropsWithChildren<PortalSelectProps>,
   ref: React.ForwardedRef<SelectRef>,
 ) => {
+  const allPortalsValue = allPortalsOption !== false
+  const portalsValue = allPortalsValue ? [{ id: 0, name: 'Todos os portais' }, ...portals] : portals
+
   const selectProps: SelectProps<{ text: string; id: number; icon?: ReactNode; portal: Portal }> = {
     ...props,
-    leftIcon: <PortalIcon src={props.selectedOption ? portalIcons[props.selectedOption.id] : defaultIcon} />,
-    options: portals.map(portal => {
-      const imageUrl = (portalIcons[portal.id] ?? defaultIcon) as unknown as string
+    leftIcon: props.selectedOption != null && portalIcons[props.selectedOption.id] && (
+      <PortalIcon src={props.selectedOption ? portalIcons[props.selectedOption.id] : defaultIcon} />
+    ),
+    options: portalsValue.map(portal => {
+      const imageUrl = portalIcons[portal.id] as unknown as string
       return {
         id: portal.id,
         text: portal.name,
-        icon: <PortalIcon src={imageUrl} alt={portal.name} />,
+        icon: imageUrl && <PortalIcon src={imageUrl} alt={portal.name} />,
         portal,
       }
     }),
     onOptionChange: option => {
       if (props.onOptionChange) {
-        props.onOptionChange(option?.portal ?? null)
+        if (allPortalsValue && !option) {
+          props.onOptionChange({
+            id: 0,
+            name: 'Todos os portais',
+          })
+          return
+        } else {
+          props.onOptionChange(option?.portal ?? null)
+        }
       }
     },
     selectedOption: props.selectedOption
       ? {
           id: props.selectedOption.id,
           text: props.selectedOption.name,
-          icon: (
-            <PortalIcon src={portalIcons[props.selectedOption.id] ?? defaultIcon} alt={props.selectedOption.name} />
+          icon: portalIcons[props.selectedOption.id] && (
+            <PortalIcon src={portalIcons[props.selectedOption.id]} alt={props.selectedOption.name} />
           ),
           portal: props.selectedOption,
         }

package/src/components/PortalSelect/stories.tsx

@@ -13,6 +13,7 @@ const meta: Meta<typeof PortalSelect> = {
     selectedOption: { control: 'number' },
     onOptionChange: { action: 'selectedOptionChange' },
     dropDownTop: { control: 'boolean' },
+    allPortalsOption: { control: 'boolean' },
   },
 } satisfies Meta<typeof PortalSelect>
 
@@ -70,17 +71,18 @@ const ComponentWrapper = ({ portals, ...args }: PortalSelectProps) => {
 
   return (
     <PortalSelect
+      {...args}
       selectedOption={selectedOption}
       onOptionChange={option => setSelectOption(option)}
       portals={portals}
-      {...args}
     />
   )
 }
 
 export const Default: Story = {
-  render: () => (
+  render: args => (
     <ComponentWrapper
+      {...args}
       label="Label"
       placeholder="Placeholder"
       portals={Object.entries(portals).map(([id, name]) => ({ id: Number(id), name }))}

package/src/components/index.tsx

@@ -12,3 +12,4 @@ export { Paginate } from './Paginate/index'
 export { Table } from './Table/index'
 export { Input } from './Input/index'
 export { EmptyState } from './EmptyState/index'
+export { InputTag } from './InputTag/index'

package/src/index.tsx

@@ -17,6 +17,7 @@ export { Tabs } from './components/Tabs/index'
 export { theme } from './components/Themes/index'
 export { Title } from './components/Title/index'
 export { EmptyState } from './components/EmptyState/index'
+export { InputTag } from './components/InputTag/index'
 export * from './components/Types/index'
 
 export {