@strapi/content-type-builder 5.12.1 → 5.12.3

package/dist/admin/components/CustomRadioGroup/CustomRadioGroup.mjs

@@ -0,0 +1,77 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Flex, Typography, Box } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { Wrapper } from './Styles.mjs';
+
+const CustomRadioGroup = ({ intlLabel, name, onChange, radios = [], value })=>{
+    const { formatMessage } = useIntl();
+    return /*#__PURE__*/ jsxs(Flex, {
+        direction: "column",
+        alignItems: "stretch",
+        gap: 2,
+        children: [
+            /*#__PURE__*/ jsx(Typography, {
+                variant: "pi",
+                fontWeight: "bold",
+                textColor: "neutral800",
+                htmlFor: name,
+                tag: "label",
+                children: formatMessage(intlLabel)
+            }),
+            /*#__PURE__*/ jsx(Wrapper, {
+                gap: 4,
+                alignItems: "stretch",
+                children: radios.map((radio)=>{
+                    return /*#__PURE__*/ jsxs("label", {
+                        htmlFor: radio.value.toString(),
+                        className: "container",
+                        children: [
+                            /*#__PURE__*/ jsx("input", {
+                                id: radio.value.toString(),
+                                name: name,
+                                className: "option-input",
+                                checked: radio.value === value,
+                                value: radio.value,
+                                onChange: onChange,
+                                type: "radio"
+                            }, radio.value),
+                            /*#__PURE__*/ jsx(Box, {
+                                className: "option",
+                                padding: 4,
+                                children: /*#__PURE__*/ jsxs(Flex, {
+                                    children: [
+                                        /*#__PURE__*/ jsx(Box, {
+                                            paddingRight: 4,
+                                            children: /*#__PURE__*/ jsx("span", {
+                                                className: "checkmark"
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsxs(Flex, {
+                                            direction: "column",
+                                            alignItems: "stretch",
+                                            gap: 2,
+                                            children: [
+                                                /*#__PURE__*/ jsx(Typography, {
+                                                    fontWeight: "bold",
+                                                    children: formatMessage(radio.title)
+                                                }),
+                                                /*#__PURE__*/ jsx(Typography, {
+                                                    variant: "pi",
+                                                    textColor: "neutral600",
+                                                    children: formatMessage(radio.description)
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            })
+                        ]
+                    }, radio.value);
+                })
+            })
+        ]
+    });
+};
+
+export { CustomRadioGroup };
+//# sourceMappingURL=CustomRadioGroup.mjs.map

package/dist/admin/components/CustomRadioGroup/CustomRadioGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomRadioGroup.mjs","sources":["../../../../admin/src/components/CustomRadioGroup/CustomRadioGroup.tsx"],"sourcesContent":["import { Box, Flex, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { Wrapper } from './Styles';\n\nimport type { IntlLabel } from '../../types';\n\ninterface Radio {\n  title: IntlLabel;\n  description: IntlLabel;\n  value: any;\n}\n\ninterface CustomRadioGroupProps {\n  intlLabel: IntlLabel;\n  name: string;\n  onChange: (value: any) => void;\n  radios?: Radio[];\n  value?: string | boolean;\n}\n\nexport const CustomRadioGroup = ({\n  intlLabel,\n  name,\n  onChange,\n  radios = [],\n  value,\n}: CustomRadioGroupProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={2}>\n      <Typography variant=\"pi\" fontWeight=\"bold\" textColor=\"neutral800\" htmlFor={name} tag=\"label\">\n        {formatMessage(intlLabel)}\n      </Typography>\n      <Wrapper gap={4} alignItems=\"stretch\">\n        {radios.map((radio) => {\n          return (\n            <label htmlFor={radio.value.toString()} key={radio.value} className=\"container\">\n              <input\n                id={radio.value.toString()}\n                name={name}\n                className=\"option-input\"\n                checked={radio.value === value}\n                value={radio.value}\n                key={radio.value}\n                onChange={onChange}\n                type=\"radio\"\n              />\n              <Box className=\"option\" padding={4}>\n                <Flex>\n                  <Box paddingRight={4}>\n                    <span className=\"checkmark\" />\n                  </Box>\n                  <Flex direction=\"column\" alignItems=\"stretch\" gap={2}>\n                    <Typography fontWeight=\"bold\">{formatMessage(radio.title)}</Typography>\n                    <Typography variant=\"pi\" textColor=\"neutral600\">\n                      {formatMessage(radio.description)}\n                    </Typography>\n                  </Flex>\n                </Flex>\n              </Box>\n            </label>\n          );\n        })}\n      </Wrapper>\n    </Flex>\n  );\n};\n"],"names":["CustomRadioGroup","intlLabel","name","onChange","radios","value","formatMessage","useIntl","_jsxs","Flex","direction","alignItems","gap","_jsx","Typography","variant","fontWeight","textColor","htmlFor","tag","Wrapper","map","radio","label","toString","className","input","id","checked","type","Box","padding","paddingRight","span","title","description"],"mappings":";;;;;AAqBaA,MAAAA,gBAAAA,GAAmB,CAAC,EAC/BC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,MAAAA,GAAS,EAAE,EACXC,KAAK,EACiB,GAAA;IACtB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,qBACEC,IAACC,CAAAA,IAAAA,EAAAA;QAAKC,SAAU,EAAA,QAAA;QAASC,UAAW,EAAA,SAAA;QAAUC,GAAK,EAAA,CAAA;;0BACjDC,GAACC,CAAAA,UAAAA,EAAAA;gBAAWC,OAAQ,EAAA,IAAA;gBAAKC,UAAW,EAAA,MAAA;gBAAOC,SAAU,EAAA,YAAA;gBAAaC,OAAShB,EAAAA,IAAAA;gBAAMiB,GAAI,EAAA,OAAA;0BAClFb,aAAcL,CAAAA,SAAAA;;0BAEjBY,GAACO,CAAAA,OAAAA,EAAAA;gBAAQR,GAAK,EAAA,CAAA;gBAAGD,UAAW,EAAA,SAAA;0BACzBP,MAAOiB,CAAAA,GAAG,CAAC,CAACC,KAAAA,GAAAA;AACX,oBAAA,qBACEd,IAACe,CAAAA,OAAAA,EAAAA;wBAAML,OAASI,EAAAA,KAAAA,CAAMjB,KAAK,CAACmB,QAAQ,EAAA;wBAAsBC,SAAU,EAAA,WAAA;;0CAClEZ,GAACa,CAAAA,OAAAA,EAAAA;gCACCC,EAAIL,EAAAA,KAAAA,CAAMjB,KAAK,CAACmB,QAAQ,EAAA;gCACxBtB,IAAMA,EAAAA,IAAAA;gCACNuB,SAAU,EAAA,cAAA;gCACVG,OAASN,EAAAA,KAAAA,CAAMjB,KAAK,KAAKA,KAAAA;AACzBA,gCAAAA,KAAAA,EAAOiB,MAAMjB,KAAK;gCAElBF,QAAUA,EAAAA,QAAAA;gCACV0B,IAAK,EAAA;AAFAP,6BAAAA,EAAAA,KAAAA,CAAMjB,KAAK,CAAA;0CAIlBQ,GAACiB,CAAAA,GAAAA,EAAAA;gCAAIL,SAAU,EAAA,QAAA;gCAASM,OAAS,EAAA,CAAA;AAC/B,gCAAA,QAAA,gBAAAvB,IAACC,CAAAA,IAAAA,EAAAA;;sDACCI,GAACiB,CAAAA,GAAAA,EAAAA;4CAAIE,YAAc,EAAA,CAAA;AACjB,4CAAA,QAAA,gBAAAnB,GAACoB,CAAAA,MAAAA,EAAAA;gDAAKR,SAAU,EAAA;;;sDAElBjB,IAACC,CAAAA,IAAAA,EAAAA;4CAAKC,SAAU,EAAA,QAAA;4CAASC,UAAW,EAAA,SAAA;4CAAUC,GAAK,EAAA,CAAA;;8DACjDC,GAACC,CAAAA,UAAAA,EAAAA;oDAAWE,UAAW,EAAA,MAAA;AAAQV,oDAAAA,QAAAA,EAAAA,aAAAA,CAAcgB,MAAMY,KAAK;;8DACxDrB,GAACC,CAAAA,UAAAA,EAAAA;oDAAWC,OAAQ,EAAA,IAAA;oDAAKE,SAAU,EAAA,YAAA;AAChCX,oDAAAA,QAAAA,EAAAA,aAAAA,CAAcgB,MAAMa,WAAW;;;;;;;;AAnBGb,qBAAAA,EAAAA,KAAAA,CAAMjB,KAAK,CAAA;AA0B5D,iBAAA;;;;AAIR;;;;"}

package/dist/admin/components/CustomRadioGroup/Styles.js

@@ -0,0 +1,77 @@
+'use strict';
+
+var designSystem = require('@strapi/design-system');
+var styledComponents = require('styled-components');
+
+const Wrapper = styledComponents.styled(designSystem.Flex)`
+  position: relative;
+  align-items: stretch;
+
+  label {
+    border-radius: 4px;
+    max-width: 50%;
+    cursor: pointer;
+    user-select: none;
+    flex: 1;
+    border-radius: 4px;
+    border: 1px solid ${({ theme })=>theme.colors.neutral200};
+
+    ${designSystem.inputFocusStyle()}
+  }
+
+  input {
+    position: absolute;
+    opacity: 0;
+  }
+
+  .option {
+    height: 100%;
+    border-radius: 4px;
+    will-change: transform, opacity;
+    background: ${({ theme })=>theme.colors.neutral0};
+
+    .checkmark {
+      position: relative;
+      display: block;
+      will-change: transform;
+      background: ${({ theme })=>theme.colors.neutral0};
+      width: ${({ theme })=>theme.spaces[5]};
+      height: ${({ theme })=>theme.spaces[5]};
+      border: solid 1px ${({ theme })=>theme.colors.neutral300};
+      border-radius: 50%;
+
+      &:before,
+      &:after {
+        content: '';
+        display: block;
+        border-radius: 50%;
+        width: ${({ theme })=>theme.spaces[3]};
+        height: ${({ theme })=>theme.spaces[3]};
+        position: absolute;
+        top: 3px;
+        left: 3px;
+      }
+
+      &:after {
+        transform: scale(0);
+        transition: inherit;
+        will-change: transform;
+      }
+    }
+  }
+
+  .container input:checked ~ div {
+    background: ${({ theme })=>theme.colors.primary100};
+    color: ${({ theme })=>theme.colors.primary600};
+    .checkmark {
+      border: solid 1px ${({ theme })=>theme.colors.primary600};
+      &::after {
+        background: ${({ theme })=>theme.colors.primary600};
+        transform: scale(1);
+      }
+    }
+  }
+`;
+
+exports.Wrapper = Wrapper;
+//# sourceMappingURL=Styles.js.map

package/dist/admin/components/CustomRadioGroup/Styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.js","sources":["../../../../admin/src/components/CustomRadioGroup/Styles.tsx"],"sourcesContent":["import { Flex, inputFocusStyle } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nconst Wrapper = styled(Flex)`\n  position: relative;\n  align-items: stretch;\n\n  label {\n    border-radius: 4px;\n    max-width: 50%;\n    cursor: pointer;\n    user-select: none;\n    flex: 1;\n    border-radius: 4px;\n    border: 1px solid ${({ theme }) => theme.colors.neutral200};\n\n    ${inputFocusStyle()}\n  }\n\n  input {\n    position: absolute;\n    opacity: 0;\n  }\n\n  .option {\n    height: 100%;\n    border-radius: 4px;\n    will-change: transform, opacity;\n    background: ${({ theme }) => theme.colors.neutral0};\n\n    .checkmark {\n      position: relative;\n      display: block;\n      will-change: transform;\n      background: ${({ theme }) => theme.colors.neutral0};\n      width: ${({ theme }) => theme.spaces[5]};\n      height: ${({ theme }) => theme.spaces[5]};\n      border: solid 1px ${({ theme }) => theme.colors.neutral300};\n      border-radius: 50%;\n\n      &:before,\n      &:after {\n        content: '';\n        display: block;\n        border-radius: 50%;\n        width: ${({ theme }) => theme.spaces[3]};\n        height: ${({ theme }) => theme.spaces[3]};\n        position: absolute;\n        top: 3px;\n        left: 3px;\n      }\n\n      &:after {\n        transform: scale(0);\n        transition: inherit;\n        will-change: transform;\n      }\n    }\n  }\n\n  .container input:checked ~ div {\n    background: ${({ theme }) => theme.colors.primary100};\n    color: ${({ theme }) => theme.colors.primary600};\n    .checkmark {\n      border: solid 1px ${({ theme }) => theme.colors.primary600};\n      &::after {\n        background: ${({ theme }) => theme.colors.primary600};\n        transform: scale(1);\n      }\n    }\n  }\n`;\n\nexport { Wrapper };\n"],"names":["Wrapper","styled","Flex","theme","colors","neutral200","inputFocusStyle","neutral0","spaces","neutral300","primary100","primary600"],"mappings":";;;;;AAGMA,MAAAA,OAAAA,GAAUC,uBAAOC,CAAAA,iBAAAA,CAAK;;;;;;;;;;;sBAWN,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;AAE3D,IAAA,EAAEC,4BAAkB,EAAA;;;;;;;;;;;;gBAYR,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACG,QAAQ,CAAC;;;;;;kBAMrC,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACG,QAAQ,CAAC;aAC5C,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAMK,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;cAChC,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAMK,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;wBACvB,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACK,UAAU,CAAC;;;;;;;;eAQlD,EAAE,CAAC,EAAEN,KAAK,EAAE,GAAKA,KAAMK,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;gBAChC,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAMK,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;;;;;;;;;;;gBAejC,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACM,UAAU,CAAC;WAC9C,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACO,UAAU,CAAC;;wBAE5B,EAAE,CAAC,EAAER,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACO,UAAU,CAAC;;oBAE7C,EAAE,CAAC,EAAER,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACO,UAAU,CAAC;;;;;AAK7D;;;;"}

package/dist/admin/components/CustomRadioGroup/Styles.mjs

@@ -0,0 +1,75 @@
+import { Flex, inputFocusStyle } from '@strapi/design-system';
+import { styled } from 'styled-components';
+
+const Wrapper = styled(Flex)`
+  position: relative;
+  align-items: stretch;
+
+  label {
+    border-radius: 4px;
+    max-width: 50%;
+    cursor: pointer;
+    user-select: none;
+    flex: 1;
+    border-radius: 4px;
+    border: 1px solid ${({ theme })=>theme.colors.neutral200};
+
+    ${inputFocusStyle()}
+  }
+
+  input {
+    position: absolute;
+    opacity: 0;
+  }
+
+  .option {
+    height: 100%;
+    border-radius: 4px;
+    will-change: transform, opacity;
+    background: ${({ theme })=>theme.colors.neutral0};
+
+    .checkmark {
+      position: relative;
+      display: block;
+      will-change: transform;
+      background: ${({ theme })=>theme.colors.neutral0};
+      width: ${({ theme })=>theme.spaces[5]};
+      height: ${({ theme })=>theme.spaces[5]};
+      border: solid 1px ${({ theme })=>theme.colors.neutral300};
+      border-radius: 50%;
+
+      &:before,
+      &:after {
+        content: '';
+        display: block;
+        border-radius: 50%;
+        width: ${({ theme })=>theme.spaces[3]};
+        height: ${({ theme })=>theme.spaces[3]};
+        position: absolute;
+        top: 3px;
+        left: 3px;
+      }
+
+      &:after {
+        transform: scale(0);
+        transition: inherit;
+        will-change: transform;
+      }
+    }
+  }
+
+  .container input:checked ~ div {
+    background: ${({ theme })=>theme.colors.primary100};
+    color: ${({ theme })=>theme.colors.primary600};
+    .checkmark {
+      border: solid 1px ${({ theme })=>theme.colors.primary600};
+      &::after {
+        background: ${({ theme })=>theme.colors.primary600};
+        transform: scale(1);
+      }
+    }
+  }
+`;
+
+export { Wrapper };
+//# sourceMappingURL=Styles.mjs.map

package/dist/admin/components/CustomRadioGroup/Styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.mjs","sources":["../../../../admin/src/components/CustomRadioGroup/Styles.tsx"],"sourcesContent":["import { Flex, inputFocusStyle } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nconst Wrapper = styled(Flex)`\n  position: relative;\n  align-items: stretch;\n\n  label {\n    border-radius: 4px;\n    max-width: 50%;\n    cursor: pointer;\n    user-select: none;\n    flex: 1;\n    border-radius: 4px;\n    border: 1px solid ${({ theme }) => theme.colors.neutral200};\n\n    ${inputFocusStyle()}\n  }\n\n  input {\n    position: absolute;\n    opacity: 0;\n  }\n\n  .option {\n    height: 100%;\n    border-radius: 4px;\n    will-change: transform, opacity;\n    background: ${({ theme }) => theme.colors.neutral0};\n\n    .checkmark {\n      position: relative;\n      display: block;\n      will-change: transform;\n      background: ${({ theme }) => theme.colors.neutral0};\n      width: ${({ theme }) => theme.spaces[5]};\n      height: ${({ theme }) => theme.spaces[5]};\n      border: solid 1px ${({ theme }) => theme.colors.neutral300};\n      border-radius: 50%;\n\n      &:before,\n      &:after {\n        content: '';\n        display: block;\n        border-radius: 50%;\n        width: ${({ theme }) => theme.spaces[3]};\n        height: ${({ theme }) => theme.spaces[3]};\n        position: absolute;\n        top: 3px;\n        left: 3px;\n      }\n\n      &:after {\n        transform: scale(0);\n        transition: inherit;\n        will-change: transform;\n      }\n    }\n  }\n\n  .container input:checked ~ div {\n    background: ${({ theme }) => theme.colors.primary100};\n    color: ${({ theme }) => theme.colors.primary600};\n    .checkmark {\n      border: solid 1px ${({ theme }) => theme.colors.primary600};\n      &::after {\n        background: ${({ theme }) => theme.colors.primary600};\n        transform: scale(1);\n      }\n    }\n  }\n`;\n\nexport { Wrapper };\n"],"names":["Wrapper","styled","Flex","theme","colors","neutral200","inputFocusStyle","neutral0","spaces","neutral300","primary100","primary600"],"mappings":";;;AAGMA,MAAAA,OAAAA,GAAUC,MAAOC,CAAAA,IAAAA,CAAK;;;;;;;;;;;sBAWN,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;AAE3D,IAAA,EAAEC,eAAkB,EAAA;;;;;;;;;;;;gBAYR,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACG,QAAQ,CAAC;;;;;;kBAMrC,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACG,QAAQ,CAAC;aAC5C,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAMK,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;cAChC,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAMK,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;wBACvB,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACK,UAAU,CAAC;;;;;;;;eAQlD,EAAE,CAAC,EAAEN,KAAK,EAAE,GAAKA,KAAMK,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;gBAChC,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAMK,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;;;;;;;;;;;gBAejC,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACM,UAAU,CAAC;WAC9C,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACO,UAAU,CAAC;;wBAE5B,EAAE,CAAC,EAAER,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACO,UAAU,CAAC;;oBAE7C,EAAE,CAAC,EAAER,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACO,UAAU,CAAC;;;;;AAK7D;;;;"}