fictoan-react 0.41.17 → 0.41.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/dist/cjs/components/Tabs/Tabs.js +1 -1
- package/dist/cjs/components/Tabs/Tabs.js.map +1 -1
- package/dist/cjs/components/Tabs/Tabs.styled.js +1 -1
- package/dist/cjs/components/Tabs/Tabs.styled.js.map +1 -1
- package/dist/es/components/Tabs/Tabs.js +1 -1
- package/dist/es/components/Tabs/Tabs.js.map +1 -1
- package/dist/es/components/Tabs/Tabs.styled.js +1 -1
- package/dist/es/components/Tabs/Tabs.styled.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../external/Element.js"),t=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../external/Element.js"),t=require("react"),a=require("../HRule/HRule.js"),l=require("../Typography/Text.js"),n=require("./Tabs.styled.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../HRule/HRule.styled.js"),require("styled-components");var s=/*#__PURE__*/r(t);const u=s.default.forwardRef(((r,u)=>{var{tabs:i}=r,o=e.__rest(r,["tabs"]);const[c,d]=s.default.useState(i.length>0?i[0]:void 0),[f,m]=s.default.useState(!1),y=e=>{m(!0),setTimeout((()=>{m(!1),d(e)}),120)};return t.useEffect((()=>{if(i.length>0){const e=i.find((e=>e.key===(null==c?void 0:c.key)));y(e||i[0])}else d(void 0)}),[i]),s.default.createElement(e.Element,Object.assign({as:n.TabsStyled,ref:u},o),i.length>0&&c?s.default.createElement(s.default.Fragment,null,s.default.createElement("nav",null,i.map((e=>s.default.createElement(l.Text,{key:e.key,className:"is-clickable "+(e.key===c.key?"is-active":""),onClick:()=>y(e),marginBottom:"none"},e.label)))),s.default.createElement(a.HRule,{kind:"secondary",marginTop:"none",marginBottom:"micro"}),s.default.createElement(e.Element,{as:"div",className:"tabs-content "+(f?"exiting":"")},c.content)):s.default.createElement(s.default.Fragment,null))}));exports.Tabs=u;
|
|
2
2
|
//# sourceMappingURL=Tabs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\n\nimport { Element } from \"../Element/Element\";\nimport { CommonAndHTMLProps } from \"../Element/constants\";\nimport { HRule } from \"../HRule/HRule\";\nimport { Text } from \"../Typography/Text\";\n\nimport { TabsStyled } from \"./Tabs.styled\";\n\n// prettier-ignore\ninterface TabType {\n key : string;\n label : string;\n content : React.ReactNode;\n}\n\n// prettier-ignore\nexport interface TabsCustomProps {\n tabs : TabType[];\n}\n\nexport type TabsElementType = HTMLDivElement;\nexport type TabsProps = Omit<CommonAndHTMLProps<TabsElementType>, keyof TabsCustomProps> & TabsCustomProps;\n\nexport const Tabs = React.forwardRef(({ tabs, ...props }: TabsProps, ref: React.Ref<TabsElementType>) => {\n const [activeTab, setActiveTab] = React.useState<TabType | undefined>(tabs.length > 0 ? tabs[0] : undefined);\n const [isExiting, setIsExiting] = React.useState<boolean>(false);\n\n const handleTabChange = (tab: TabType) => {\n setIsExiting(true);\n setTimeout(() => {\n setIsExiting(false);\n setActiveTab(tab);\n }, 120);\n };\n\n useEffect(() => {\n if (tabs.length > 0) {\n const matchingTab = tabs.find((tab) => tab.key === activeTab?.key);\n if (matchingTab) {\n handleTabChange(matchingTab);\n } else {\n handleTabChange(tabs[0]);\n }\n } else {\n setActiveTab(undefined);\n }\n }, [tabs]);\n\n return (\n <Element<TabsElementType> as={TabsStyled} ref={ref} {...props}>\n {tabs.length > 0 && activeTab ? (\n <>\n <nav>\n {tabs.map((tab) => (\n <Text\n key={tab.key}\n className={`is-clickable ${tab.key === activeTab.key ? \"is-active\" : \"\"}`}\n onClick={() => handleTabChange(tab)}\n >\n {tab.label}\n </Text>\n ))}\n </nav>\n <HRule kind=\"secondary\" marginTop=\"
|
|
1
|
+
{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\n\nimport { Element } from \"../Element/Element\";\nimport { CommonAndHTMLProps } from \"../Element/constants\";\nimport { HRule } from \"../HRule/HRule\";\nimport { Text } from \"../Typography/Text\";\n\nimport { TabsStyled } from \"./Tabs.styled\";\n\n// prettier-ignore\ninterface TabType {\n key : string;\n label : string;\n content : React.ReactNode;\n}\n\n// prettier-ignore\nexport interface TabsCustomProps {\n tabs : TabType[];\n}\n\nexport type TabsElementType = HTMLDivElement;\nexport type TabsProps = Omit<CommonAndHTMLProps<TabsElementType>, keyof TabsCustomProps> & TabsCustomProps;\n\nexport const Tabs = React.forwardRef(({ tabs, ...props }: TabsProps, ref: React.Ref<TabsElementType>) => {\n const [activeTab, setActiveTab] = React.useState<TabType | undefined>(tabs.length > 0 ? tabs[0] : undefined);\n const [isExiting, setIsExiting] = React.useState<boolean>(false);\n\n const handleTabChange = (tab: TabType) => {\n setIsExiting(true);\n setTimeout(() => {\n setIsExiting(false);\n setActiveTab(tab);\n }, 120);\n };\n\n useEffect(() => {\n if (tabs.length > 0) {\n const matchingTab = tabs.find((tab) => tab.key === activeTab?.key);\n if (matchingTab) {\n handleTabChange(matchingTab);\n } else {\n handleTabChange(tabs[0]);\n }\n } else {\n setActiveTab(undefined);\n }\n }, [tabs]);\n\n return (\n <Element<TabsElementType> as={TabsStyled} ref={ref} {...props}>\n {tabs.length > 0 && activeTab ? (\n <>\n <nav>\n {tabs.map((tab) => (\n <Text\n key={tab.key}\n className={`is-clickable ${tab.key === activeTab.key ? \"is-active\" : \"\"}`}\n onClick={() => handleTabChange(tab)}\n marginBottom=\"none\"\n >\n {tab.label}\n </Text>\n ))}\n </nav>\n <HRule kind=\"secondary\" marginTop=\"none\" marginBottom=\"micro\" />\n <Element as=\"div\" className={`tabs-content ${isExiting ? \"exiting\" : \"\"}`}>\n {activeTab.content}\n </Element>\n </>\n ) : (\n <></>\n )}\n </Element>\n );\n});\n"],"names":["Tabs","React","forwardRef","_a","ref","tabs","props","activeTab","setActiveTab","useState","length","undefined","isExiting","setIsExiting","handleTabChange","tab","setTimeout","useEffect","matchingTab","find","key","Element","as","TabsStyled","map","Text","className","onClick","marginBottom","label","HRule","kind","marginTop","content"],"mappings":"yYAwBaA,EAAOC,UAAMC,YAAW,CAACC,EAA+BC,SAA/BC,KAAEA,KAASC,aAAX,gBAC3BC,EAAWC,GAAgBP,UAAMQ,SAA8BJ,EAAKK,OAAS,EAAIL,EAAK,QAAKM,IAC3FC,EAAWC,GAAgBZ,UAAMQ,UAAkB,GAEpDK,EAAmBC,IACrBF,GAAa,GACbG,YAAW,KACPH,GAAa,GACbL,EAAaO,KACd,aAGPE,aAAU,QACFZ,EAAKK,OAAS,EAAG,OACXQ,EAAcb,EAAKc,MAAMJ,GAAQA,EAAIK,OAAQb,MAAAA,SAAAA,EAAWa,OAE1DN,EADAI,GAGgBb,EAAK,SAGzBG,OAAaG,KAElB,CAACN,IAGAJ,wBAACoB,yBAAyBC,GAAIC,aAAYnB,IAAKA,GAASE,GACnDD,EAAKK,OAAS,GAAKH,EAChBN,gDACIA,mCACKI,EAAKmB,KAAKT,GACPd,wBAACwB,QACGL,IAAKL,EAAIK,IACTM,2BAA2BX,EAAIK,MAAQb,EAAUa,IAAM,YAAc,IACrEO,QAAS,IAAMb,EAAgBC,GAC/Ba,aAAa,QAEZb,EAAIc,UAIjB5B,wBAAC6B,SAAMC,KAAK,YAAYC,UAAU,OAAOJ,aAAa,UACtD3B,wBAACoB,WAAQC,GAAG,MAAMI,2BAA2Bd,EAAY,UAAY,KAChEL,EAAU0B,UAInBhC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}Object.defineProperty(exports,"__esModule",{value:!0});const e=/*#__PURE__*/t(require("styled-components")).default.section.withConfig({displayName:"TabsStyled",componentId:"-13r6bqg"})`nav{width:100%;display:flex;p{position:relative;}p:not(last-child){margin-right:24px;color:${t=>t.theme.tabs.label.default.text};font-weight:400;padding:16px 0;border-bottom:2px solid transparent;}p:hover{color:${t=>t.theme.tabs.label.onHover.text};}p.is-active{color:${t=>t.theme.tabs.label.isActive.text};}p.is-right-aligned{margin-left:auto;margin-right:0;}p.is-active::after{display:block;position:absolute;width:100%;height:3px;bottom:-3px;left:0;content:"";border-top-left-radius:3px;border-top-right-radius:3px;background-color:${t=>t.theme.tabs.label.isActive.border};}p.has-alert::after{position:absolute;top:12px;left:94%;border:3px solid ${t=>t.theme.tabs.label.hasAlert.circle.border};width:14px;height:14px;background-color:${t=>t.theme.tabs.label.hasAlert.circle.bg};border-radius:50%;}p.disabled-navlink{color:${t=>t.theme.tabs.label.isDisabled.text};;cursor:not-allowed;}}
|
|
1
|
+
"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}Object.defineProperty(exports,"__esModule",{value:!0});const e=/*#__PURE__*/t(require("styled-components")).default.section.withConfig({displayName:"TabsStyled",componentId:"-13r6bqg"})`nav{width:100%;display:flex;p{position:relative;}p:not(last-child){margin-right:24px;color:${t=>t.theme.tabs.label.default.text};font-weight:400;padding:16px 0;border-bottom:2px solid transparent;}p:hover{color:${t=>t.theme.tabs.label.onHover.text};}p.is-active{color:${t=>t.theme.tabs.label.isActive.text};}p.is-right-aligned{margin-left:auto;margin-right:0;}p.is-active::after{display:block;position:absolute;width:100%;height:3px;bottom:-3px;left:0;content:"";border-top-left-radius:3px;border-top-right-radius:3px;background-color:${t=>t.theme.tabs.label.isActive.border};}p.has-alert::after{position:absolute;top:12px;left:94%;border:3px solid ${t=>t.theme.tabs.label.hasAlert.circle.border};width:14px;height:14px;background-color:${t=>t.theme.tabs.label.hasAlert.circle.bg};border-radius:50%;}p.disabled-navlink{color:${t=>t.theme.tabs.label.isDisabled.text};;cursor:not-allowed;}}.tabs-content{opacity:1;transition:opacity 0.4s ease-in-out;&.exiting{opacity:0;}}`;exports.TabsStyled=e;
|
|
2
2
|
//# sourceMappingURL=Tabs.styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.styled.js","sources":["../../../../src/components/Tabs/Tabs.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nexport const TabsStyled = styled.section`\n nav {\n width : 100%;\n display : flex;\n\n p { position : relative; }\n\n p:not(last-child) {\n margin-right : 24px;\n color : ${props => props.theme.tabs.label.default.text};\n font-weight : 400;\n padding : 16px 0;\n border-bottom : 2px solid transparent;\n }\n \n p:hover { color : ${props => props.theme.tabs.label.onHover.text}; }\n\n p.is-active { color : ${props => props.theme.tabs.label.isActive.text}; }\n \n p.is-right-aligned {\n margin-left : auto;\n margin-right : 0;\n }\n\n p.is-active::after {\n display : block;\n position : absolute;\n width : 100%;\n height : 3px;\n bottom : -3px;\n left : 0;\n content : \"\";\n border-top-left-radius : 3px;\n border-top-right-radius : 3px;\n background-color : ${props => props.theme.tabs.label.isActive.border};\n }\n \n p.has-alert::after {\n position : absolute;\n top : 12px;\n left : 94%;\n border : 3px solid ${props => props.theme.tabs.label.hasAlert.circle.border};\n width : 14px;\n height : 14px;\n background-color : ${props => props.theme.tabs.label.hasAlert.circle.bg};\n border-radius : 50%;\n }\n \n p.disabled-navlink {\n color : ${props => props.theme.tabs.label.isDisabled.text};;\n cursor : not-allowed;\n }\n }\n\n
|
|
1
|
+
{"version":3,"file":"Tabs.styled.js","sources":["../../../../src/components/Tabs/Tabs.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nexport const TabsStyled = styled.section`\n nav {\n width : 100%;\n display : flex;\n\n p { position : relative; }\n\n p:not(last-child) {\n margin-right : 24px;\n color : ${props => props.theme.tabs.label.default.text};\n font-weight : 400;\n padding : 16px 0;\n border-bottom : 2px solid transparent;\n }\n \n p:hover { color : ${props => props.theme.tabs.label.onHover.text}; }\n\n p.is-active { color : ${props => props.theme.tabs.label.isActive.text}; }\n \n p.is-right-aligned {\n margin-left : auto;\n margin-right : 0;\n }\n\n p.is-active::after {\n display : block;\n position : absolute;\n width : 100%;\n height : 3px;\n bottom : -3px;\n left : 0;\n content : \"\";\n border-top-left-radius : 3px;\n border-top-right-radius : 3px;\n background-color : ${props => props.theme.tabs.label.isActive.border};\n }\n \n p.has-alert::after {\n position : absolute;\n top : 12px;\n left : 94%;\n border : 3px solid ${props => props.theme.tabs.label.hasAlert.circle.border};\n width : 14px;\n height : 14px;\n background-color : ${props => props.theme.tabs.label.hasAlert.circle.bg};\n border-radius : 50%;\n }\n \n p.disabled-navlink {\n color : ${props => props.theme.tabs.label.isDisabled.text};;\n cursor : not-allowed;\n }\n }\n\n .tabs-content {\n opacity : 1;\n transition : opacity 0.4s ease-in-out;\n\n &.exiting { opacity: 0; }\n }\n`;\n"],"names":["TabsStyled","section","props","theme","tabs","label","default","text","onHover","isActive","border","hasAlert","circle","bg","isDisabled"],"mappings":"kJAEaA,uDAAoBC,mKASHC,GAASA,EAAMC,MAAMC,KAAKC,MAAMC,QAAQC,0FAM1CL,GAASA,EAAMC,MAAMC,KAAKC,MAAMG,QAAQD,2BAEpCL,GAASA,EAAMC,MAAMC,KAAKC,MAAMI,SAASF,4OAiBjCL,GAASA,EAAMC,MAAMC,KAAKC,MAAMI,SAASC,mFAOtCR,GAASA,EAAMC,MAAMC,KAAKC,MAAMM,SAASC,OAAOF,kDAG1DR,GAASA,EAAMC,MAAMC,KAAKC,MAAMM,SAASC,OAAOC,kDAK1DX,GAASA,EAAMC,MAAMC,KAAKC,MAAMS,WAAWP"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,E as t}from"../../external/Element.js";import
|
|
1
|
+
import{_ as e,E as t}from"../../external/Element.js";import n,{useEffect as a}from"react";import{HRule as o}from"../HRule/HRule.js";import{Text as r}from"../Typography/Text.js";import{TabsStyled as l}from"./Tabs.styled.js";import"../HRule/HRule.styled.js";import"styled-components";const m=/*#__PURE__*/n.forwardRef(((m,s)=>{var{tabs:i}=m,c=e(m,["tabs"]);const[p,u]=n.useState(i.length>0?i[0]:void 0),[y,d]=n.useState(!1),g=e=>{d(!0),setTimeout((()=>{d(!1),u(e)}),120)};return a((()=>{if(i.length>0){const e=i.find((e=>e.key===(null==p?void 0:p.key)));g(e||i[0])}else u(void 0)}),[i]),/*#__PURE__*/n.createElement(t,Object.assign({as:l,ref:s},c),i.length>0&&p?/*#__PURE__*/n.createElement(n.Fragment,null,/*#__PURE__*/n.createElement("nav",null,i.map((e=>/*#__PURE__*/n.createElement(r,{key:e.key,className:"is-clickable "+(e.key===p.key?"is-active":""),onClick:()=>g(e),marginBottom:"none"},e.label)))),/*#__PURE__*/n.createElement(o,{kind:"secondary",marginTop:"none",marginBottom:"micro"}),/*#__PURE__*/n.createElement(t,{as:"div",className:"tabs-content "+(y?"exiting":"")},p.content)):/*#__PURE__*/n.createElement(n.Fragment,null))}));export{m as Tabs};
|
|
2
2
|
//# sourceMappingURL=Tabs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\n\nimport { Element } from \"../Element/Element\";\nimport { CommonAndHTMLProps } from \"../Element/constants\";\nimport { HRule } from \"../HRule/HRule\";\nimport { Text } from \"../Typography/Text\";\n\nimport { TabsStyled } from \"./Tabs.styled\";\n\n// prettier-ignore\ninterface TabType {\n key : string;\n label : string;\n content : React.ReactNode;\n}\n\n// prettier-ignore\nexport interface TabsCustomProps {\n tabs : TabType[];\n}\n\nexport type TabsElementType = HTMLDivElement;\nexport type TabsProps = Omit<CommonAndHTMLProps<TabsElementType>, keyof TabsCustomProps> & TabsCustomProps;\n\nexport const Tabs = React.forwardRef(({ tabs, ...props }: TabsProps, ref: React.Ref<TabsElementType>) => {\n const [activeTab, setActiveTab] = React.useState<TabType | undefined>(tabs.length > 0 ? tabs[0] : undefined);\n const [isExiting, setIsExiting] = React.useState<boolean>(false);\n\n const handleTabChange = (tab: TabType) => {\n setIsExiting(true);\n setTimeout(() => {\n setIsExiting(false);\n setActiveTab(tab);\n }, 120);\n };\n\n useEffect(() => {\n if (tabs.length > 0) {\n const matchingTab = tabs.find((tab) => tab.key === activeTab?.key);\n if (matchingTab) {\n handleTabChange(matchingTab);\n } else {\n handleTabChange(tabs[0]);\n }\n } else {\n setActiveTab(undefined);\n }\n }, [tabs]);\n\n return (\n <Element<TabsElementType> as={TabsStyled} ref={ref} {...props}>\n {tabs.length > 0 && activeTab ? (\n <>\n <nav>\n {tabs.map((tab) => (\n <Text\n key={tab.key}\n className={`is-clickable ${tab.key === activeTab.key ? \"is-active\" : \"\"}`}\n onClick={() => handleTabChange(tab)}\n >\n {tab.label}\n </Text>\n ))}\n </nav>\n <HRule kind=\"secondary\" marginTop=\"
|
|
1
|
+
{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\n\nimport { Element } from \"../Element/Element\";\nimport { CommonAndHTMLProps } from \"../Element/constants\";\nimport { HRule } from \"../HRule/HRule\";\nimport { Text } from \"../Typography/Text\";\n\nimport { TabsStyled } from \"./Tabs.styled\";\n\n// prettier-ignore\ninterface TabType {\n key : string;\n label : string;\n content : React.ReactNode;\n}\n\n// prettier-ignore\nexport interface TabsCustomProps {\n tabs : TabType[];\n}\n\nexport type TabsElementType = HTMLDivElement;\nexport type TabsProps = Omit<CommonAndHTMLProps<TabsElementType>, keyof TabsCustomProps> & TabsCustomProps;\n\nexport const Tabs = React.forwardRef(({ tabs, ...props }: TabsProps, ref: React.Ref<TabsElementType>) => {\n const [activeTab, setActiveTab] = React.useState<TabType | undefined>(tabs.length > 0 ? tabs[0] : undefined);\n const [isExiting, setIsExiting] = React.useState<boolean>(false);\n\n const handleTabChange = (tab: TabType) => {\n setIsExiting(true);\n setTimeout(() => {\n setIsExiting(false);\n setActiveTab(tab);\n }, 120);\n };\n\n useEffect(() => {\n if (tabs.length > 0) {\n const matchingTab = tabs.find((tab) => tab.key === activeTab?.key);\n if (matchingTab) {\n handleTabChange(matchingTab);\n } else {\n handleTabChange(tabs[0]);\n }\n } else {\n setActiveTab(undefined);\n }\n }, [tabs]);\n\n return (\n <Element<TabsElementType> as={TabsStyled} ref={ref} {...props}>\n {tabs.length > 0 && activeTab ? (\n <>\n <nav>\n {tabs.map((tab) => (\n <Text\n key={tab.key}\n className={`is-clickable ${tab.key === activeTab.key ? \"is-active\" : \"\"}`}\n onClick={() => handleTabChange(tab)}\n marginBottom=\"none\"\n >\n {tab.label}\n </Text>\n ))}\n </nav>\n <HRule kind=\"secondary\" marginTop=\"none\" marginBottom=\"micro\" />\n <Element as=\"div\" className={`tabs-content ${isExiting ? \"exiting\" : \"\"}`}>\n {activeTab.content}\n </Element>\n </>\n ) : (\n <></>\n )}\n </Element>\n );\n});\n"],"names":["Tabs","React","forwardRef","_a","ref","tabs","props","activeTab","setActiveTab","useState","length","undefined","isExiting","setIsExiting","handleTabChange","tab","setTimeout","useEffect","matchingTab","find","key","Element","as","TabsStyled","map","Text","className","onClick","marginBottom","label","HRule","kind","marginTop","content"],"mappings":"gSAwBaA,eAAOC,EAAMC,YAAW,CAACC,EAA+BC,SAA/BC,KAAEA,KAASC,MAAX,gBAC3BC,EAAWC,GAAgBP,EAAMQ,SAA8BJ,EAAKK,OAAS,EAAIL,EAAK,QAAKM,IAC3FC,EAAWC,GAAgBZ,EAAMQ,UAAkB,GAEpDK,EAAmBC,IACrBF,GAAa,GACbG,YAAW,KACPH,GAAa,GACbL,EAAaO,KACd,aAGPE,GAAU,QACFZ,EAAKK,OAAS,EAAG,OACXQ,EAAcb,EAAKc,MAAMJ,GAAQA,EAAIK,OAAQb,MAAAA,SAAAA,EAAWa,OAE1DN,EADAI,GAGgBb,EAAK,SAGzBG,OAAaG,KAElB,CAACN,iBAGAJ,gBAACoB,iBAAyBC,GAAIC,EAAYnB,IAAKA,GAASE,GACnDD,EAAKK,OAAS,GAAKH,eAChBN,6CACIA,2BACKI,EAAKmB,KAAKT,gBACPd,gBAACwB,GACGL,IAAKL,EAAIK,IACTM,2BAA2BX,EAAIK,MAAQb,EAAUa,IAAM,YAAc,IACrEO,QAAS,IAAMb,EAAgBC,GAC/Ba,aAAa,QAEZb,EAAIc,uBAIjB5B,gBAAC6B,GAAMC,KAAK,YAAYC,UAAU,OAAOJ,aAAa,uBACtD3B,gBAACoB,GAAQC,GAAG,MAAMI,2BAA2Bd,EAAY,UAAY,KAChEL,EAAU0B,uBAInBhC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import t from"styled-components";const e=t.section.withConfig({displayName:"TabsStyled",componentId:"-13r6bqg"})`nav{width:100%;display:flex;p{position:relative;}p:not(last-child){margin-right:24px;color:${t=>t.theme.tabs.label.default.text};font-weight:400;padding:16px 0;border-bottom:2px solid transparent;}p:hover{color:${t=>t.theme.tabs.label.onHover.text};}p.is-active{color:${t=>t.theme.tabs.label.isActive.text};}p.is-right-aligned{margin-left:auto;margin-right:0;}p.is-active::after{display:block;position:absolute;width:100%;height:3px;bottom:-3px;left:0;content:"";border-top-left-radius:3px;border-top-right-radius:3px;background-color:${t=>t.theme.tabs.label.isActive.border};}p.has-alert::after{position:absolute;top:12px;left:94%;border:3px solid ${t=>t.theme.tabs.label.hasAlert.circle.border};width:14px;height:14px;background-color:${t=>t.theme.tabs.label.hasAlert.circle.bg};border-radius:50%;}p.disabled-navlink{color:${t=>t.theme.tabs.label.isDisabled.text};;cursor:not-allowed;}}
|
|
1
|
+
import t from"styled-components";const e=t.section.withConfig({displayName:"TabsStyled",componentId:"-13r6bqg"})`nav{width:100%;display:flex;p{position:relative;}p:not(last-child){margin-right:24px;color:${t=>t.theme.tabs.label.default.text};font-weight:400;padding:16px 0;border-bottom:2px solid transparent;}p:hover{color:${t=>t.theme.tabs.label.onHover.text};}p.is-active{color:${t=>t.theme.tabs.label.isActive.text};}p.is-right-aligned{margin-left:auto;margin-right:0;}p.is-active::after{display:block;position:absolute;width:100%;height:3px;bottom:-3px;left:0;content:"";border-top-left-radius:3px;border-top-right-radius:3px;background-color:${t=>t.theme.tabs.label.isActive.border};}p.has-alert::after{position:absolute;top:12px;left:94%;border:3px solid ${t=>t.theme.tabs.label.hasAlert.circle.border};width:14px;height:14px;background-color:${t=>t.theme.tabs.label.hasAlert.circle.bg};border-radius:50%;}p.disabled-navlink{color:${t=>t.theme.tabs.label.isDisabled.text};;cursor:not-allowed;}}.tabs-content{opacity:1;transition:opacity 0.4s ease-in-out;&.exiting{opacity:0;}}`;export{e as TabsStyled};
|
|
2
2
|
//# sourceMappingURL=Tabs.styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.styled.js","sources":["../../../../src/components/Tabs/Tabs.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nexport const TabsStyled = styled.section`\n nav {\n width : 100%;\n display : flex;\n\n p { position : relative; }\n\n p:not(last-child) {\n margin-right : 24px;\n color : ${props => props.theme.tabs.label.default.text};\n font-weight : 400;\n padding : 16px 0;\n border-bottom : 2px solid transparent;\n }\n \n p:hover { color : ${props => props.theme.tabs.label.onHover.text}; }\n\n p.is-active { color : ${props => props.theme.tabs.label.isActive.text}; }\n \n p.is-right-aligned {\n margin-left : auto;\n margin-right : 0;\n }\n\n p.is-active::after {\n display : block;\n position : absolute;\n width : 100%;\n height : 3px;\n bottom : -3px;\n left : 0;\n content : \"\";\n border-top-left-radius : 3px;\n border-top-right-radius : 3px;\n background-color : ${props => props.theme.tabs.label.isActive.border};\n }\n \n p.has-alert::after {\n position : absolute;\n top : 12px;\n left : 94%;\n border : 3px solid ${props => props.theme.tabs.label.hasAlert.circle.border};\n width : 14px;\n height : 14px;\n background-color : ${props => props.theme.tabs.label.hasAlert.circle.bg};\n border-radius : 50%;\n }\n \n p.disabled-navlink {\n color : ${props => props.theme.tabs.label.isDisabled.text};;\n cursor : not-allowed;\n }\n }\n\n
|
|
1
|
+
{"version":3,"file":"Tabs.styled.js","sources":["../../../../src/components/Tabs/Tabs.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nexport const TabsStyled = styled.section`\n nav {\n width : 100%;\n display : flex;\n\n p { position : relative; }\n\n p:not(last-child) {\n margin-right : 24px;\n color : ${props => props.theme.tabs.label.default.text};\n font-weight : 400;\n padding : 16px 0;\n border-bottom : 2px solid transparent;\n }\n \n p:hover { color : ${props => props.theme.tabs.label.onHover.text}; }\n\n p.is-active { color : ${props => props.theme.tabs.label.isActive.text}; }\n \n p.is-right-aligned {\n margin-left : auto;\n margin-right : 0;\n }\n\n p.is-active::after {\n display : block;\n position : absolute;\n width : 100%;\n height : 3px;\n bottom : -3px;\n left : 0;\n content : \"\";\n border-top-left-radius : 3px;\n border-top-right-radius : 3px;\n background-color : ${props => props.theme.tabs.label.isActive.border};\n }\n \n p.has-alert::after {\n position : absolute;\n top : 12px;\n left : 94%;\n border : 3px solid ${props => props.theme.tabs.label.hasAlert.circle.border};\n width : 14px;\n height : 14px;\n background-color : ${props => props.theme.tabs.label.hasAlert.circle.bg};\n border-radius : 50%;\n }\n \n p.disabled-navlink {\n color : ${props => props.theme.tabs.label.isDisabled.text};;\n cursor : not-allowed;\n }\n }\n\n .tabs-content {\n opacity : 1;\n transition : opacity 0.4s ease-in-out;\n\n &.exiting { opacity: 0; }\n }\n`;\n"],"names":["TabsStyled","styled","section","props","theme","tabs","label","default","text","onHover","isActive","border","hasAlert","circle","bg","isDisabled"],"mappings":"uCAEaA,EAAaC,EAAOC,mKASHC,GAASA,EAAMC,MAAMC,KAAKC,MAAMC,QAAQC,0FAM1CL,GAASA,EAAMC,MAAMC,KAAKC,MAAMG,QAAQD,2BAEpCL,GAASA,EAAMC,MAAMC,KAAKC,MAAMI,SAASF,4OAiBjCL,GAASA,EAAMC,MAAMC,KAAKC,MAAMI,SAASC,mFAOtCR,GAASA,EAAMC,MAAMC,KAAKC,MAAMM,SAASC,OAAOF,kDAG1DR,GAASA,EAAMC,MAAMC,KAAKC,MAAMM,SAASC,OAAOC,kDAK1DX,GAASA,EAAMC,MAAMC,KAAKC,MAAMS,WAAWP"}
|