@lifesg/react-design-system 3.5.0-canary.3 → 3.5.0-canary.4

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.
Files changed (15) hide show
  1. package/cjs/file-upload/file-list-item/file-list-item.styles.js +4 -3
  2. package/cjs/file-upload/file-list-item/file-list-item.styles.js.map +1 -1
  3. package/cjs/form/form-textarea.style.js +1 -1
  4. package/cjs/form/form-textarea.style.js.map +1 -1
  5. package/cjs/input-textarea/textarea.style.js +1 -0
  6. package/cjs/input-textarea/textarea.style.js.map +1 -1
  7. package/codemods/data.ts +33 -1
  8. package/codemods/index.ts +140 -55
  9. package/file-upload/file-list-item/file-list-item.styles.js +1 -0
  10. package/file-upload/file-list-item/file-list-item.styles.js.map +1 -1
  11. package/form/form-textarea.style.js +1 -1
  12. package/form/form-textarea.style.js.map +1 -1
  13. package/input-textarea/textarea.style.js +19 -18
  14. package/input-textarea/textarea.style.js.map +1 -1
  15. package/package.json +1 -1
package/cjs/file-upload/file-list-item/file-list-item.styles.js CHANGED
@@ -131,6 +131,7 @@
131
131
  margin-top: ${r.Spacing["spacing-16"]};
132
132
  `,y=s.default(x)`
133
133
  margin-top: ${r.Spacing["spacing-4"]};
134
+ overflow-wrap: anywhere;
134
135
  `,b=s.default(o.ExclamationCircleFillIcon)`
135
136
  height: 1lh;
136
137
  width: 1em;
@@ -138,7 +139,7 @@
138
139
  color: ${r.Colour["icon-error-strong"]};
139
140
  `,S=s.default(n.Typography.BodySM)`
140
141
  color: ${r.Colour["text-error"]};
141
- `,M=s.default(S)`
142
+ `,w=s.default(S)`
142
143
  margin-top: ${r.Spacing["spacing-4"]};
143
144
  display: flex;
144
145
  gap: ${r.Spacing["spacing-4"]};
@@ -147,7 +148,7 @@
147
148
  display: none;
148
149
  visibility: hidden;
149
150
  }
150
- `,w=s.default(S)`
151
+ `,M=s.default(S)`
151
152
  display: none;
152
153
  visibility: hidden;
153
154
 
@@ -190,5 +191,5 @@
190
191
  &:not(:last-child) {
191
192
  margin-right: ${r.Spacing["spacing-8"]};
192
193
  }
193
- `;exports.ActionContainer=v,exports.BaseErrorMessage=S,exports.Box=c,exports.ContentSection=p,exports.DescriptionFileSizeText=m,exports.DesktopErrorMessage=M,exports.DragHandleIcon=d,exports.ErrorIcon=b,exports.ExtendedNameSection=u,exports.FileSizeSection=$,exports.FileSizeText=f,exports.IconButton=C,exports.Item=l,exports.ItemDescriptionLabel=h,exports.ItemDescriptionText=y,exports.ItemText=x,exports.MobileErrorMessage=w,exports.NameSection=g;
194
+ `;exports.ActionContainer=v,exports.BaseErrorMessage=S,exports.Box=c,exports.ContentSection=p,exports.DescriptionFileSizeText=m,exports.DesktopErrorMessage=w,exports.DragHandleIcon=d,exports.ErrorIcon=b,exports.ExtendedNameSection=u,exports.FileSizeSection=$,exports.FileSizeText=f,exports.IconButton=C,exports.Item=l,exports.ItemDescriptionLabel=h,exports.ItemDescriptionText=y,exports.ItemText=x,exports.MobileErrorMessage=M,exports.NameSection=g;
194
195
  //# sourceMappingURL=file-list-item.styles.js.map
package/cjs/file-upload/file-list-item/file-list-item.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"file-list-item.styles.js","sources":["../../../../src/file-upload/file-list-item/file-list-item.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { DragHandleIcon as DSDragHandleIcon } from \"@lifesg/react-icons/drag-handle\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { IconButton as DSIconButton } from \"../../icon-button\";\nimport {\n Border,\n Colour,\n Font,\n MediaQuery,\n Radius,\n Shadow,\n Spacing,\n} from \"../../theme\";\nimport { Typography } from \"../../typography\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\nexport type ItemFocusType = \"self\" | \"others\" | \"none\";\ninterface ItemStyleProps {\n $sortable: boolean;\n $disabled?: boolean | undefined;\n $focusType: ItemFocusType;\n}\n\ninterface DragHandleIconStyleProps {\n $disabled?: boolean | undefined;\n $active?: boolean | undefined;\n}\n\ninterface BoxStyleProps {\n $error?: boolean | undefined;\n $disabled?: boolean | undefined;\n $focused?: boolean | undefined;\n $loading?: boolean | undefined;\n $editable?: boolean | undefined;\n $hasDescription?: boolean | undefined;\n}\n\ninterface ContentSectionStyleProps {\n $hasThumbnail?: boolean | undefined;\n}\n\ninterface ActionContainerStyleProps {\n $editable?: boolean | undefined;\n $error?: boolean | undefined;\n $loading?: boolean | undefined;\n $hasDescription?: boolean | undefined;\n}\n\ninterface FileSizeSectionStyleProps {\n $hideInMobile?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Item = styled.li<ItemStyleProps>`\n display: flex;\n align-items: center;\n width: 100%;\n border: none;\n\n &:not(:last-child) {\n margin-bottom: ${Spacing[\"spacing-16\"]};\n }\n\n ${(props) => {\n if (props.$disabled && props.$focusType === \"none\") {\n // Show disabled cursor only if no dragging is happening\n return css`\n cursor: not-allowed;\n `;\n } else if (props.$sortable && props.$focusType === \"self\") {\n return css`\n cursor: grabbing;\n // Following recommendation by the library for touch events\n // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n touch-action: manipulation;\n `;\n } else if (props.$sortable) {\n return css`\n &:hover {\n cursor: grab;\n }\n // Following recommendation by the library for touch events\n // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n touch-action: manipulation;\n `;\n }\n }}\n`;\n\nexport const DragHandleIcon = styled(\n DSDragHandleIcon\n)<DragHandleIconStyleProps>`\n margin-right: ${Spacing[\"spacing-16\"]};\n height: 1.5rem;\n width: 1.5rem;\n color: ${Colour[\"icon\"]};\n\n ${(props) => {\n if (props.$active) {\n return css`\n color: ${Colour[\"icon-primary\"]};\n `;\n }\n\n if (props.$disabled) {\n return css`\n color: ${Colour[\"icon-disabled\"]};\n `;\n }\n }};\n`;\n\nexport const Box = styled.div<BoxStyleProps>`\n background: ${Colour[\"bg-primary-subtlest\"]};\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"sm\"]};\n padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n display: flex;\n align-items: center;\n width: 100%;\n\n ${MediaQuery.MaxWidth.md} {\n padding: ${Spacing[\"spacing-16\"]};\n }\n\n ${(props) => {\n if (props.$focused) {\n return css`\n border-color: ${Colour[\"border-focus\"]};\n box-shadow: ${Shadow[\"xs-focus-strong\"]};\n `;\n } else if (props.$disabled) {\n return css`\n border-color: ${Colour[\"border-disabled\"]};\n `;\n } else if (props.$error) {\n return css`\n background: ${Colour[\"bg-error\"]};\n border-color: ${Colour[\"border-error\"]};\n `;\n }\n }}\n\n ${(props) => {\n if (!props.$error && (props.$loading || props.$editable)) {\n return css`\n ${MediaQuery.MaxWidth.md} {\n flex-direction: column;\n align-items: flex-start;\n }\n `;\n }\n }}\n`;\n\nexport const ContentSection = styled.div<ContentSectionStyleProps>`\n display: flex;\n flex: 1;\n align-items: center;\n\n ${MediaQuery.MaxWidth.md} {\n flex-direction: column;\n width: 100%;\n align-items: flex-start;\n }\n\n ${(props) => {\n if (props.$hasThumbnail) {\n return css`\n ${MediaQuery.MaxWidth.md} {\n flex-direction: row;\n align-items: center;\n }\n `;\n }\n }}\n`;\n\nexport const NameSection = styled.div`\n display: flex;\n flex: 1;\n flex-direction: column;\n width: 100%;\n`;\n\nexport const ExtendedNameSection = styled.div`\n display: flex;\n flex: 1;\n flex-direction: column;\n align-items: flex-start;\n\n ${MediaQuery.MaxWidth.md} {\n width: 100%;\n }\n`;\n\nexport const FileSizeSection = styled.div<FileSizeSectionStyleProps>`\n display: flex;\n width: 5rem;\n margin-left: ${Spacing[\"spacing-8\"]};\n justify-content: flex-end;\n\n ${ExtendedNameSection} > & {\n width: auto;\n margin-left: 0;\n margin-top: ${Spacing[\"spacing-16\"]};\n justify-content: flex-start;\n }\n\n ${MediaQuery.MaxWidth.md} {\n ${(props) => {\n if (props.$hideInMobile) {\n return css`\n display: none;\n visibility: hidden;\n `;\n } else {\n return css`\n width: 100%;\n margin-left: 0;\n margin-top: ${Spacing[\"spacing-8\"]};\n justify-content: flex-start;\n `;\n }\n }}\n }\n`;\n\nexport const FileSizeText = styled(Typography.BodyMD)`\n color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const DescriptionFileSizeText = styled(Typography.BodyMD)`\n color: ${Colour[\"text-subtler\"]};\n margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const ItemText = styled(Typography.BodyMD)``;\n\nexport const ItemDescriptionLabel = styled.span`\n ${Font[\"form-label\"]}\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n color: ${Colour[\"text-subtle\"]};\n display: block;\n margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const ItemDescriptionText = styled(ItemText)`\n margin-top: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const ErrorIcon = styled(ExclamationCircleFillIcon)`\n height: 1lh;\n width: 1em;\n flex-shrink: 0;\n color: ${Colour[\"icon-error-strong\"]};\n`;\n\nexport const BaseErrorMessage = styled(Typography.BodySM)`\n color: ${Colour[\"text-error\"]};\n`;\n\nexport const DesktopErrorMessage = styled(BaseErrorMessage)`\n margin-top: ${Spacing[\"spacing-4\"]};\n display: flex;\n gap: ${Spacing[\"spacing-4\"]};\n\n ${MediaQuery.MaxWidth.md} {\n display: none;\n visibility: hidden;\n }\n`;\n\nexport const MobileErrorMessage = styled(BaseErrorMessage)`\n display: none;\n visibility: hidden;\n\n ${MediaQuery.MaxWidth.md} {\n display: flex;\n gap: ${Spacing[\"spacing-4\"]};\n visibility: visible;\n margin-top: ${Spacing[\"spacing-8\"]};\n }\n`;\n\nexport const ActionContainer = styled.div<ActionContainerStyleProps>`\n width: 6rem;\n margin-left: ${Spacing[\"spacing-32\"]};\n display: flex;\n justify-content: flex-end;\n align-items: center;\n\n ${(props) => {\n if (\n props.$hasDescription &&\n props.$editable &&\n !props.$error &&\n !props.$loading\n ) {\n return css`\n width: 100%;\n margin-left: 0;\n margin-top: ${Spacing[\"spacing-16\"]};\n justify-content: flex-end;\n `;\n }\n }}\n\n ${MediaQuery.MaxWidth.md} {\n width: fit-content;\n\n ${(props) => {\n if (props.$loading && !props.$error) {\n return css`\n margin-left: 0;\n margin-top: ${Spacing[\"spacing-16\"]};\n width: 100%;\n `;\n } else if (props.$editable && !props.$error) {\n return css`\n margin-left: 0;\n margin-top: ${Spacing[\"spacing-16\"]};\n align-self: flex-end;\n `;\n }\n }}\n }\n`;\n\nexport const IconButton = styled(DSIconButton)`\n min-width: unset;\n\n &:not(:last-child) {\n margin-right: ${Spacing[\"spacing-8\"]};\n }\n`;\n"],"names":["Item","styled","li","Spacing","props","$disabled","$focusType","css","$sortable","DragHandleIcon","DSDragHandleIcon","Colour","$active","Box","div","Border","Radius","MediaQuery","MaxWidth","md","$focused","Shadow","$error","$loading","$editable","ContentSection","$hasThumbnail","NameSection","ExtendedNameSection","FileSizeSection","$hideInMobile","FileSizeText","Typography","BodyMD","DescriptionFileSizeText","ItemText","ItemDescriptionLabel","span","Font","Spec","ItemDescriptionText","ErrorIcon","ExclamationCircleFillIcon","BaseErrorMessage","BodySM","DesktopErrorMessage","MobileErrorMessage","ActionContainer","$hasDescription","IconButton","DSIconButton"],"mappings":"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"}
1
+ {"version":3,"file":"file-list-item.styles.js","sources":["../../../../src/file-upload/file-list-item/file-list-item.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { DragHandleIcon as DSDragHandleIcon } from \"@lifesg/react-icons/drag-handle\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { IconButton as DSIconButton } from \"../../icon-button\";\nimport {\n Border,\n Colour,\n Font,\n MediaQuery,\n Radius,\n Shadow,\n Spacing,\n} from \"../../theme\";\nimport { Typography } from \"../../typography\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\nexport type ItemFocusType = \"self\" | \"others\" | \"none\";\ninterface ItemStyleProps {\n $sortable: boolean;\n $disabled?: boolean | undefined;\n $focusType: ItemFocusType;\n}\n\ninterface DragHandleIconStyleProps {\n $disabled?: boolean | undefined;\n $active?: boolean | undefined;\n}\n\ninterface BoxStyleProps {\n $error?: boolean | undefined;\n $disabled?: boolean | undefined;\n $focused?: boolean | undefined;\n $loading?: boolean | undefined;\n $editable?: boolean | undefined;\n $hasDescription?: boolean | undefined;\n}\n\ninterface ContentSectionStyleProps {\n $hasThumbnail?: boolean | undefined;\n}\n\ninterface ActionContainerStyleProps {\n $editable?: boolean | undefined;\n $error?: boolean | undefined;\n $loading?: boolean | undefined;\n $hasDescription?: boolean | undefined;\n}\n\ninterface FileSizeSectionStyleProps {\n $hideInMobile?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Item = styled.li<ItemStyleProps>`\n display: flex;\n align-items: center;\n width: 100%;\n border: none;\n\n &:not(:last-child) {\n margin-bottom: ${Spacing[\"spacing-16\"]};\n }\n\n ${(props) => {\n if (props.$disabled && props.$focusType === \"none\") {\n // Show disabled cursor only if no dragging is happening\n return css`\n cursor: not-allowed;\n `;\n } else if (props.$sortable && props.$focusType === \"self\") {\n return css`\n cursor: grabbing;\n // Following recommendation by the library for touch events\n // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n touch-action: manipulation;\n `;\n } else if (props.$sortable) {\n return css`\n &:hover {\n cursor: grab;\n }\n // Following recommendation by the library for touch events\n // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n touch-action: manipulation;\n `;\n }\n }}\n`;\n\nexport const DragHandleIcon = styled(\n DSDragHandleIcon\n)<DragHandleIconStyleProps>`\n margin-right: ${Spacing[\"spacing-16\"]};\n height: 1.5rem;\n width: 1.5rem;\n color: ${Colour[\"icon\"]};\n\n ${(props) => {\n if (props.$active) {\n return css`\n color: ${Colour[\"icon-primary\"]};\n `;\n }\n\n if (props.$disabled) {\n return css`\n color: ${Colour[\"icon-disabled\"]};\n `;\n }\n }};\n`;\n\nexport const Box = styled.div<BoxStyleProps>`\n background: ${Colour[\"bg-primary-subtlest\"]};\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"sm\"]};\n padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n display: flex;\n align-items: center;\n width: 100%;\n\n ${MediaQuery.MaxWidth.md} {\n padding: ${Spacing[\"spacing-16\"]};\n }\n\n ${(props) => {\n if (props.$focused) {\n return css`\n border-color: ${Colour[\"border-focus\"]};\n box-shadow: ${Shadow[\"xs-focus-strong\"]};\n `;\n } else if (props.$disabled) {\n return css`\n border-color: ${Colour[\"border-disabled\"]};\n `;\n } else if (props.$error) {\n return css`\n background: ${Colour[\"bg-error\"]};\n border-color: ${Colour[\"border-error\"]};\n `;\n }\n }}\n\n ${(props) => {\n if (!props.$error && (props.$loading || props.$editable)) {\n return css`\n ${MediaQuery.MaxWidth.md} {\n flex-direction: column;\n align-items: flex-start;\n }\n `;\n }\n }}\n`;\n\nexport const ContentSection = styled.div<ContentSectionStyleProps>`\n display: flex;\n flex: 1;\n align-items: center;\n\n ${MediaQuery.MaxWidth.md} {\n flex-direction: column;\n width: 100%;\n align-items: flex-start;\n }\n\n ${(props) => {\n if (props.$hasThumbnail) {\n return css`\n ${MediaQuery.MaxWidth.md} {\n flex-direction: row;\n align-items: center;\n }\n `;\n }\n }}\n`;\n\nexport const NameSection = styled.div`\n display: flex;\n flex: 1;\n flex-direction: column;\n width: 100%;\n`;\n\nexport const ExtendedNameSection = styled.div`\n display: flex;\n flex: 1;\n flex-direction: column;\n align-items: flex-start;\n\n ${MediaQuery.MaxWidth.md} {\n width: 100%;\n }\n`;\n\nexport const FileSizeSection = styled.div<FileSizeSectionStyleProps>`\n display: flex;\n width: 5rem;\n margin-left: ${Spacing[\"spacing-8\"]};\n justify-content: flex-end;\n\n ${ExtendedNameSection} > & {\n width: auto;\n margin-left: 0;\n margin-top: ${Spacing[\"spacing-16\"]};\n justify-content: flex-start;\n }\n\n ${MediaQuery.MaxWidth.md} {\n ${(props) => {\n if (props.$hideInMobile) {\n return css`\n display: none;\n visibility: hidden;\n `;\n } else {\n return css`\n width: 100%;\n margin-left: 0;\n margin-top: ${Spacing[\"spacing-8\"]};\n justify-content: flex-start;\n `;\n }\n }}\n }\n`;\n\nexport const FileSizeText = styled(Typography.BodyMD)`\n color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const DescriptionFileSizeText = styled(Typography.BodyMD)`\n color: ${Colour[\"text-subtler\"]};\n margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const ItemText = styled(Typography.BodyMD)``;\n\nexport const ItemDescriptionLabel = styled.span`\n ${Font[\"form-label\"]}\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n color: ${Colour[\"text-subtle\"]};\n display: block;\n margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const ItemDescriptionText = styled(ItemText)`\n margin-top: ${Spacing[\"spacing-4\"]};\n overflow-wrap: anywhere;\n`;\n\nexport const ErrorIcon = styled(ExclamationCircleFillIcon)`\n height: 1lh;\n width: 1em;\n flex-shrink: 0;\n color: ${Colour[\"icon-error-strong\"]};\n`;\n\nexport const BaseErrorMessage = styled(Typography.BodySM)`\n color: ${Colour[\"text-error\"]};\n`;\n\nexport const DesktopErrorMessage = styled(BaseErrorMessage)`\n margin-top: ${Spacing[\"spacing-4\"]};\n display: flex;\n gap: ${Spacing[\"spacing-4\"]};\n\n ${MediaQuery.MaxWidth.md} {\n display: none;\n visibility: hidden;\n }\n`;\n\nexport const MobileErrorMessage = styled(BaseErrorMessage)`\n display: none;\n visibility: hidden;\n\n ${MediaQuery.MaxWidth.md} {\n display: flex;\n gap: ${Spacing[\"spacing-4\"]};\n visibility: visible;\n margin-top: ${Spacing[\"spacing-8\"]};\n }\n`;\n\nexport const ActionContainer = styled.div<ActionContainerStyleProps>`\n width: 6rem;\n margin-left: ${Spacing[\"spacing-32\"]};\n display: flex;\n justify-content: flex-end;\n align-items: center;\n\n ${(props) => {\n if (\n props.$hasDescription &&\n props.$editable &&\n !props.$error &&\n !props.$loading\n ) {\n return css`\n width: 100%;\n margin-left: 0;\n margin-top: ${Spacing[\"spacing-16\"]};\n justify-content: flex-end;\n `;\n }\n }}\n\n ${MediaQuery.MaxWidth.md} {\n width: fit-content;\n\n ${(props) => {\n if (props.$loading && !props.$error) {\n return css`\n margin-left: 0;\n margin-top: ${Spacing[\"spacing-16\"]};\n width: 100%;\n `;\n } else if (props.$editable && !props.$error) {\n return css`\n margin-left: 0;\n margin-top: ${Spacing[\"spacing-16\"]};\n align-self: flex-end;\n `;\n }\n }}\n }\n`;\n\nexport const IconButton = styled(DSIconButton)`\n min-width: unset;\n\n &:not(:last-child) {\n margin-right: ${Spacing[\"spacing-8\"]};\n }\n`;\n"],"names":["Item","styled","li","Spacing","props","$disabled","$focusType","css","$sortable","DragHandleIcon","DSDragHandleIcon","Colour","$active","Box","div","Border","Radius","MediaQuery","MaxWidth","md","$focused","Shadow","$error","$loading","$editable","ContentSection","$hasThumbnail","NameSection","ExtendedNameSection","FileSizeSection","$hideInMobile","FileSizeText","Typography","BodyMD","DescriptionFileSizeText","ItemText","ItemDescriptionLabel","span","Font","Spec","ItemDescriptionText","ErrorIcon","ExclamationCircleFillIcon","BaseErrorMessage","BodySM","DesktopErrorMessage","MobileErrorMessage","ActionContainer","$hasDescription","IconButton","DSIconButton"],"mappings":"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"}
package/cjs/form/form-textarea.style.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use strict";var e=require("styled-components"),r=require("../theme/index.js"),t=require("./form-label.style.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=a(e);const n=i.default.div`
2
2
  display: flex;
3
3
  justify-content: flex-end;
4
- margin-top: ${r.Spacing["spacing-4"]};
4
+ margin-top: ${r.Spacing["spacing-8"]};
5
5
  `,s=i.default.div`
6
6
  ${r.Font["body-sm-semibold"]}
7
7
  display: flex;
package/cjs/form/form-textarea.style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"form-textarea.style.js","sources":["../../../src/form/form-textarea.style.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Font, Spacing } from \"../theme\";\nimport { ErrorMessage } from \"./form-label.style\";\n\nexport const LabelContainer = styled.div`\n display: flex;\n justify-content: flex-end;\n margin-top: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const ErrorMessageContainer = styled.div`\n ${Font[\"body-sm-semibold\"]}\n display: flex;\n flex: 1;\n margin-right: ${Spacing[\"spacing-12\"]};\n gap: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const ErrorMessageLabel = styled(ErrorMessage)`\n margin-top: 0;\n`;\n"],"names":["LabelContainer","styled","div","Spacing","ErrorMessageContainer","Font","ErrorMessageLabel","ErrorMessage"],"mappings":"qMAIO,MAAMA,EAAiBC,EAAAA,QAAOC,GAAG;;;kBAGtBC,EAAAA,QAAQ;EAGbC,EAAwBH,EAAAA,QAAOC,GAAG;MACzCG,EAAAA,KAAK;;;oBAGSF,EAAAA,QAAQ;WACjBA,EAAAA,QAAQ;EAGNG,EAAoBL,EAAAA,QAAOM,EAAAA,aAAa;;"}
1
+ {"version":3,"file":"form-textarea.style.js","sources":["../../../src/form/form-textarea.style.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Font, Spacing } from \"../theme\";\nimport { ErrorMessage } from \"./form-label.style\";\n\nexport const LabelContainer = styled.div`\n display: flex;\n justify-content: flex-end;\n margin-top: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const ErrorMessageContainer = styled.div`\n ${Font[\"body-sm-semibold\"]}\n display: flex;\n flex: 1;\n margin-right: ${Spacing[\"spacing-12\"]};\n gap: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const ErrorMessageLabel = styled(ErrorMessage)`\n margin-top: 0;\n`;\n"],"names":["LabelContainer","styled","div","Spacing","ErrorMessageContainer","Font","ErrorMessageLabel","ErrorMessage"],"mappings":"qMAIO,MAAMA,EAAiBC,EAAAA,QAAOC,GAAG;;;kBAGtBC,EAAAA,QAAQ;EAGbC,EAAwBH,EAAAA,QAAOC,GAAG;MACzCG,EAAAA,KAAK;;;oBAGSF,EAAAA,QAAQ;WACjBA,EAAAA,QAAQ;EAGNG,EAAoBL,EAAAA,QAAOM,EAAAA,aAAa;;"}
package/cjs/input-textarea/textarea.style.js CHANGED
@@ -1,6 +1,7 @@
1
1
  "use strict";var r=require("styled-components"),o=require("../theme/index.js");function e(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var l=e(r);const t=l.default.div`
2
2
  display: flex;
3
3
  flex-direction: column;
4
+ gap: ${o.Spacing["spacing-8"]};
4
5
  `,d=l.default.textarea`
5
6
  border: ${o.Border["width-010"]} ${o.Border.solid} ${o.Colour.border};
6
7
  border-radius: ${o.Radius.sm};
package/cjs/input-textarea/textarea.style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"textarea.style.js","sources":["../../../src/input-textarea/textarea.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface StyleProps {\n $error?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nexport const Element = styled.textarea<StyleProps>`\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"sm\"]};\n background: ${Colour[\"bg\"]};\n outline: none;\n overflow: auto;\n\n display: block;\n padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n width: 100%;\n\n ${Font[\"body-baseline-regular\"]}\n color: ${Colour[\"text\"]};\n\n &:focus,\n &:active {\n outline-offset: -1px;\n outline: ${Border[\"width-020\"]} ${Border[\"solid\"]}\n ${Colour[\"border-focus\"]};\n }\n\n &::placeholder,\n &::-webkit-input-placeholder {\n color: ${Colour[\"text-subtler\"]};\n }\n\n &::-webkit-scrollbar {\n width: 14px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: ${Colour[\"bg-inverse-subtlest\"]};\n border: 5px solid transparent;\n border-radius: ${Radius[\"full\"]};\n background-clip: padding-box;\n }\n\n ${(props) => {\n if (props.readOnly) {\n return css`\n border-color: transparent;\n background: transparent !important;\n padding: ${Spacing[\"spacing-12\"]} 0;\n\n &:focus,\n &:active {\n outline-color: ${Colour[\"border-focus\"]};\n }\n `;\n } else if (props.disabled) {\n return css`\n background: ${Colour[\"bg-disabled\"]};\n cursor: not-allowed;\n\n &:focus,\n &:active {\n outline-color: ${Colour[\"border-disabled\"]};\n }\n `;\n } else if (props.$error) {\n return css`\n border-color: ${Colour[\"border-error\"]};\n\n &:focus,\n &:active {\n outline-color: ${Colour[\"border-error-focus\"]};\n }\n `;\n }\n }}\n`;\n"],"names":["Wrapper","styled","div","Element","textarea","Border","Colour","Radius","Spacing","Font","props","readOnly","css","disabled","$error"],"mappings":"kKAcO,MAAMA,EAAUC,EAAAA,QAAOC,GAAG;;;EAKpBC,EAAUF,EAAAA,QAAOG,QAAoB;cACpCC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKC,SAAe;qBAClDC,EAAAA,OAAW;kBACdD,EAAAA,OAAW;;;;;eAKdE,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;;MAG1CC,EAAAA,KAAK;aACEH,EAAAA,OAAa;;;;;mBAKPD,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc;cAC1CC,EAAAA,OAAO;;;;;iBAKJA,EAAAA,OAAO;;;;;;;;;;;;sBAYFA,EAAAA,OAAO;;yBAEJC,EAAAA,OAAa;;;;MAI/BG,GACKA,EAAMC,SACCC,KAAG;;;2BAGKJ,EAAAA,QAAQ;;;;qCAIEF,EAAAA,OAAO;;cAGzBI,EAAMG,SACND,KAAG;8BACQN,EAAAA,OAAO;;;;;qCAKAA,EAAAA,OAAO;;cAGzBI,EAAMI,OACNF,KAAG;gCACUN,EAAAA,OAAO;;;;qCAIFA,EAAAA,OAAO;;mBAN7B;"}
1
+ {"version":3,"file":"textarea.style.js","sources":["../../../src/input-textarea/textarea.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface StyleProps {\n $error?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const Element = styled.textarea<StyleProps>`\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"sm\"]};\n background: ${Colour[\"bg\"]};\n outline: none;\n overflow: auto;\n\n display: block;\n padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n width: 100%;\n\n ${Font[\"body-baseline-regular\"]}\n color: ${Colour[\"text\"]};\n\n &:focus,\n &:active {\n outline-offset: -1px;\n outline: ${Border[\"width-020\"]} ${Border[\"solid\"]}\n ${Colour[\"border-focus\"]};\n }\n\n &::placeholder,\n &::-webkit-input-placeholder {\n color: ${Colour[\"text-subtler\"]};\n }\n\n &::-webkit-scrollbar {\n width: 14px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: ${Colour[\"bg-inverse-subtlest\"]};\n border: 5px solid transparent;\n border-radius: ${Radius[\"full\"]};\n background-clip: padding-box;\n }\n\n ${(props) => {\n if (props.readOnly) {\n return css`\n border-color: transparent;\n background: transparent !important;\n padding: ${Spacing[\"spacing-12\"]} 0;\n\n &:focus,\n &:active {\n outline-color: ${Colour[\"border-focus\"]};\n }\n `;\n } else if (props.disabled) {\n return css`\n background: ${Colour[\"bg-disabled\"]};\n cursor: not-allowed;\n\n &:focus,\n &:active {\n outline-color: ${Colour[\"border-disabled\"]};\n }\n `;\n } else if (props.$error) {\n return css`\n border-color: ${Colour[\"border-error\"]};\n\n &:focus,\n &:active {\n outline-color: ${Colour[\"border-error-focus\"]};\n }\n `;\n }\n }}\n`;\n"],"names":["Wrapper","styled","div","Spacing","Element","textarea","Border","Colour","Radius","Font","props","readOnly","css","disabled","$error"],"mappings":"kKAcO,MAAMA,EAAUC,EAAAA,QAAOC,GAAG;;;WAGtBC,EAAAA,QAAQ;EAGNC,EAAUH,EAAAA,QAAOI,QAAoB;cACpCC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKC,SAAe;qBAClDC,EAAAA,OAAW;kBACdD,EAAAA,OAAW;;;;;eAKdJ,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;;MAG1CM,EAAAA,KAAK;aACEF,EAAAA,OAAa;;;;;mBAKPD,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc;cAC1CC,EAAAA,OAAO;;;;;iBAKJA,EAAAA,OAAO;;;;;;;;;;;;sBAYFA,EAAAA,OAAO;;yBAEJC,EAAAA,OAAa;;;;MAI/BE,GACKA,EAAMC,SACCC,KAAG;;;2BAGKT,EAAAA,QAAQ;;;;qCAIEI,EAAAA,OAAO;;cAGzBG,EAAMG,SACND,KAAG;8BACQL,EAAAA,OAAO;;;;;qCAKAA,EAAAA,OAAO;;cAGzBG,EAAMI,OACNF,KAAG;gCACUL,EAAAA,OAAO;;;;qCAIFA,EAAAA,OAAO;;mBAN7B;"}
package/codemods/data.ts CHANGED
@@ -1,4 +1,23 @@
1
- export const sizePropMapping = {
1
+ export const textComponentMap = {
2
+ D1: "HeadingXXL",
3
+ D2: "HeadingXL",
4
+ D3: "HeadingMD",
5
+ D4: "HeadingSM",
6
+ H1: "HeadingLG",
7
+ H2: "HeadingMD",
8
+ H3: "HeadingSM",
9
+ H4: "HeadingXS",
10
+ H5: "BodyMD",
11
+ H6: "BodySM",
12
+ DBody: "HeadingSM",
13
+ Body: "BodyBL",
14
+ BodySmall: "BodyMD",
15
+ XSmall: "BodyXS",
16
+ "Hyperlink.Default": "LinkBL",
17
+ "Hyperlink.Small": "LinkMD",
18
+ };
19
+
20
+ export const textStyleFontMap = {
2
21
  D1: "heading-xxl",
3
22
  D2: "heading-xl",
4
23
  D3: "heading-md",
@@ -14,3 +33,16 @@ export const sizePropMapping = {
14
33
  BodySmall: "body-md",
15
34
  XSmall: "body-xs",
16
35
  };
36
+
37
+ export const weightMap = {
38
+ regular: "regular",
39
+ semibold: "semibold",
40
+ bold: "bold",
41
+ light: "light",
42
+ black: "bold",
43
+ 400: "regular",
44
+ 600: "semibold",
45
+ 700: "bold",
46
+ 300: "light",
47
+ 900: "bold",
48
+ };
package/codemods/index.ts CHANGED
@@ -1,23 +1,36 @@
1
- import { API, FileInfo, JSCodeshift } from "jscodeshift";
1
+ import {
2
+ API,
3
+ ASTPath,
4
+ FileInfo,
5
+ JSCodeshift,
6
+ MemberExpression,
7
+ } from "jscodeshift";
2
8
  import { CodemodUtils } from "../codemod-utils";
3
- import { sizePropMapping } from "./data";
9
+ import { textComponentMap, textStyleFontMap, weightMap } from "./data";
4
10
 
5
11
  // ======= Constants ======= //
6
12
 
7
13
  const IMPORT_PATHS = {
8
- TEXT_LIST: "@lifesg/react-design-system/text-list",
9
- V2_TEXT_LIST: "@lifesg/react-design-system/v2_text-list",
14
+ V2_TEXT: "@lifesg/react-design-system/v2_text",
10
15
  DESIGN_SYSTEM: "@lifesg/react-design-system",
16
+ TYPOGRAPHY: "@lifesg/react-design-system/typography",
17
+ THEME: "@lifesg/react-design-system/theme",
11
18
  };
12
19
 
13
20
  const IMPORT_SPECIFIERS = {
14
- TEXT_LIST: "TextList",
15
- V2_TEXT_LIST: "V2_TextList",
21
+ V2_TEXT: "V2_Text",
22
+ V2_TEXT_STYLE_HELPER: "V2_TextStyleHelper",
23
+ TYPOGRAPHY: "Typography",
24
+ FONT: "Font",
16
25
  };
17
26
 
18
27
  const JSX_IDENTIFIERS = {
19
- TEXT_LIST: "TextList",
20
- V2_TEXT_LIST: "V2_TextList",
28
+ V2_TEXT: "V2_Text",
29
+ TYPOGRAPHY: "Typography",
30
+ };
31
+
32
+ const IDENTIFIERS = {
33
+ V2_GET_TEXT_STYLE: "getTextStyle",
21
34
  };
22
35
 
23
36
  // ======= Transformer Function ======= //
@@ -26,84 +39,156 @@ export default function transformer(file: FileInfo, api: API) {
26
39
  const j: JSCodeshift = api.jscodeshift;
27
40
  const source = j(file.source);
28
41
 
29
- const isV2TextListImport = CodemodUtils.hasImport(
42
+ const importsText = CodemodUtils.hasImport(
43
+ source,
44
+ api,
45
+ [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_TEXT],
46
+ IMPORT_SPECIFIERS.V2_TEXT
47
+ );
48
+ const importsTextStyleHelper = CodemodUtils.hasImport(
30
49
  source,
31
50
  api,
32
- [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_TEXT_LIST],
33
- IMPORT_SPECIFIERS.V2_TEXT_LIST
51
+ [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_TEXT],
52
+ IMPORT_SPECIFIERS.V2_TEXT_STYLE_HELPER
34
53
  );
35
54
 
36
- if (isV2TextListImport) {
55
+ const replaceWithTypography = (
56
+ path: ASTPath<MemberExpression>,
57
+ newComponentValue: string
58
+ ) => {
59
+ path.replace(
60
+ j.memberExpression(
61
+ j.identifier(JSX_IDENTIFIERS.TYPOGRAPHY),
62
+ j.identifier(newComponentValue)
63
+ )
64
+ );
65
+ };
66
+
67
+ if (importsText) {
37
68
  CodemodUtils.addImport(
38
69
  source,
39
70
  api,
40
- IMPORT_PATHS.TEXT_LIST,
41
- IMPORT_SPECIFIERS.TEXT_LIST
71
+ IMPORT_PATHS.TYPOGRAPHY,
72
+ IMPORT_SPECIFIERS.TYPOGRAPHY
42
73
  );
43
74
 
44
75
  CodemodUtils.removeImport(
45
76
  source,
46
77
  api,
47
- [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_TEXT_LIST],
48
- IMPORT_SPECIFIERS.V2_TEXT_LIST
78
+ [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_TEXT],
79
+ IMPORT_SPECIFIERS.V2_TEXT
49
80
  );
50
81
 
51
82
  source
52
- .find(j.Identifier, { name: JSX_IDENTIFIERS.V2_TEXT_LIST })
83
+ .find(j.Identifier, { name: JSX_IDENTIFIERS.V2_TEXT })
53
84
  .forEach((path) => {
54
- path.node.name = JSX_IDENTIFIERS.TEXT_LIST;
85
+ // Replace V2_Text with Typography
86
+ path.node.name = JSX_IDENTIFIERS.TYPOGRAPHY;
55
87
  });
56
88
 
89
+ // Map to respective V3 Typography component usage
57
90
  source.find(j.MemberExpression).forEach((path) => {
58
- if (
59
- j.Identifier.check(path.node.object) &&
60
- path.node.object.name === JSX_IDENTIFIERS.V2_TEXT_LIST
61
- ) {
62
- path.node.object.name = JSX_IDENTIFIERS.TEXT_LIST;
91
+ const propertyNameParts: string[] = [];
92
+ let currentPath = path.node;
93
+ let startsWithTypography = false;
94
+
95
+ while (j.MemberExpression.check(currentPath)) {
96
+ const property = currentPath.property;
97
+ const object = currentPath.object;
98
+
99
+ if (j.Identifier.check(property)) {
100
+ propertyNameParts.unshift(property.name);
101
+ }
102
+
103
+ if (j.MemberExpression.check(object)) {
104
+ currentPath = object;
105
+ } else if (j.Identifier.check(object)) {
106
+ if (object.name === JSX_IDENTIFIERS.TYPOGRAPHY) {
107
+ startsWithTypography = true;
108
+ }
109
+ break;
110
+ } else {
111
+ break;
112
+ }
63
113
  }
64
- });
65
114
 
66
- source.find(j.JSXMemberExpression).forEach((path) => {
67
- if (
68
- j.JSXIdentifier.check(path.node.object) &&
69
- path.node.object.name === JSX_IDENTIFIERS.V2_TEXT_LIST
70
- ) {
71
- path.node.object.name = JSX_IDENTIFIERS.TEXT_LIST;
115
+ if (startsWithTypography) {
116
+ const propertyName = propertyNameParts.join(
117
+ "."
118
+ ) as keyof typeof textComponentMap;
119
+ const newTypographyValue = textComponentMap[propertyName];
120
+ if (newTypographyValue) {
121
+ replaceWithTypography(path, newTypographyValue);
122
+ }
72
123
  }
73
124
  });
125
+ }
74
126
 
75
- source.find(j.JSXOpeningElement).forEach((path) => {
76
- const openingElement = path.node;
77
- let isTextListElement = false;
127
+ if (importsTextStyleHelper) {
128
+ let usesTextStyleHelper = false;
78
129
 
130
+ source.find(j.CallExpression).forEach((path) => {
79
131
  if (
80
- j.JSXMemberExpression.check(openingElement.name) &&
81
- j.JSXIdentifier.check(openingElement.name.object) &&
82
- openingElement.name.object.name === JSX_IDENTIFIERS.TEXT_LIST
132
+ !j.CallExpression.check(path.node) ||
133
+ !j.MemberExpression.check(path.node.callee) ||
134
+ !j.Identifier.check(path.node.callee.object) ||
135
+ path.node.callee.object.name !==
136
+ IMPORT_SPECIFIERS.V2_TEXT_STYLE_HELPER ||
137
+ !j.Identifier.check(path.node.callee.property) ||
138
+ path.node.callee.property.name !== IDENTIFIERS.V2_GET_TEXT_STYLE
83
139
  ) {
84
- isTextListElement = true;
140
+ return;
85
141
  }
86
142
 
87
- if (isTextListElement) {
88
- const attributes = openingElement.attributes;
89
-
90
- attributes?.forEach((attribute) => {
91
- if (
92
- j.JSXAttribute.check(attribute) &&
93
- attribute.name.name === "size" &&
94
- j.StringLiteral.check(attribute.value)
95
- ) {
96
- const sizeValue = attribute.value
97
- .value as keyof typeof sizePropMapping;
98
- if (sizePropMapping[sizeValue]) {
99
- attribute.value = j.literal(
100
- sizePropMapping[sizeValue]
101
- );
102
- }
103
- }
104
- });
143
+ const style = j.Literal.check(path.node.arguments[0])
144
+ ? path.node.arguments[0].value
145
+ : undefined;
146
+ const weight = j.Literal.check(path.node.arguments[1])
147
+ ? path.node.arguments[1].value
148
+ : "regular";
149
+
150
+ if (!style) {
151
+ return;
105
152
  }
153
+
154
+ const mappedType =
155
+ textStyleFontMap[style as keyof typeof textStyleFontMap];
156
+ const mappedWeight = weightMap[weight as keyof typeof weightMap];
157
+
158
+ j(path).replaceWith(() => {
159
+ return j.memberExpression(
160
+ j.identifier("Font"),
161
+ j.literal(`${mappedType}-${mappedWeight}`)
162
+ );
163
+ });
164
+
165
+ usesTextStyleHelper = true;
106
166
  });
167
+
168
+ if (usesTextStyleHelper) {
169
+ CodemodUtils.addImport(
170
+ source,
171
+ api,
172
+ IMPORT_PATHS.THEME,
173
+ IMPORT_SPECIFIERS.FONT
174
+ );
175
+ }
176
+
177
+ if (
178
+ !CodemodUtils.hasReferences(
179
+ source,
180
+ api,
181
+ [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_TEXT],
182
+ IMPORT_SPECIFIERS.V2_TEXT_STYLE_HELPER
183
+ )
184
+ ) {
185
+ CodemodUtils.removeImport(
186
+ source,
187
+ api,
188
+ [IMPORT_PATHS.DESIGN_SYSTEM, IMPORT_PATHS.V2_TEXT],
189
+ IMPORT_SPECIFIERS.V2_TEXT_STYLE_HELPER
190
+ );
191
+ }
107
192
  }
108
193
 
109
194
  return source.toSource();
package/file-upload/file-list-item/file-list-item.styles.js CHANGED
@@ -131,6 +131,7 @@ import i,{css as t}from"styled-components";import{DragHandleIcon as o}from"@life
131
131
  margin-top: ${n["spacing-16"]};
132
132
  `,W=i(v)`
133
133
  margin-top: ${n["spacing-4"]};
134
+ overflow-wrap: anywhere;
134
135
  `,j=i(e)`
135
136
  height: 1lh;
136
137
  width: 1em;
package/file-upload/file-list-item/file-list-item.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"file-list-item.styles.js","sources":["../../../src/file-upload/file-list-item/file-list-item.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { DragHandleIcon as DSDragHandleIcon } from \"@lifesg/react-icons/drag-handle\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { IconButton as DSIconButton } from \"../../icon-button\";\nimport {\n Border,\n Colour,\n Font,\n MediaQuery,\n Radius,\n Shadow,\n Spacing,\n} from \"../../theme\";\nimport { Typography } from \"../../typography\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\nexport type ItemFocusType = \"self\" | \"others\" | \"none\";\ninterface ItemStyleProps {\n $sortable: boolean;\n $disabled?: boolean | undefined;\n $focusType: ItemFocusType;\n}\n\ninterface DragHandleIconStyleProps {\n $disabled?: boolean | undefined;\n $active?: boolean | undefined;\n}\n\ninterface BoxStyleProps {\n $error?: boolean | undefined;\n $disabled?: boolean | undefined;\n $focused?: boolean | undefined;\n $loading?: boolean | undefined;\n $editable?: boolean | undefined;\n $hasDescription?: boolean | undefined;\n}\n\ninterface ContentSectionStyleProps {\n $hasThumbnail?: boolean | undefined;\n}\n\ninterface ActionContainerStyleProps {\n $editable?: boolean | undefined;\n $error?: boolean | undefined;\n $loading?: boolean | undefined;\n $hasDescription?: boolean | undefined;\n}\n\ninterface FileSizeSectionStyleProps {\n $hideInMobile?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Item = styled.li<ItemStyleProps>`\n display: flex;\n align-items: center;\n width: 100%;\n border: none;\n\n &:not(:last-child) {\n margin-bottom: ${Spacing[\"spacing-16\"]};\n }\n\n ${(props) => {\n if (props.$disabled && props.$focusType === \"none\") {\n // Show disabled cursor only if no dragging is happening\n return css`\n cursor: not-allowed;\n `;\n } else if (props.$sortable && props.$focusType === \"self\") {\n return css`\n cursor: grabbing;\n // Following recommendation by the library for touch events\n // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n touch-action: manipulation;\n `;\n } else if (props.$sortable) {\n return css`\n &:hover {\n cursor: grab;\n }\n // Following recommendation by the library for touch events\n // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n touch-action: manipulation;\n `;\n }\n }}\n`;\n\nexport const DragHandleIcon = styled(\n DSDragHandleIcon\n)<DragHandleIconStyleProps>`\n margin-right: ${Spacing[\"spacing-16\"]};\n height: 1.5rem;\n width: 1.5rem;\n color: ${Colour[\"icon\"]};\n\n ${(props) => {\n if (props.$active) {\n return css`\n color: ${Colour[\"icon-primary\"]};\n `;\n }\n\n if (props.$disabled) {\n return css`\n color: ${Colour[\"icon-disabled\"]};\n `;\n }\n }};\n`;\n\nexport const Box = styled.div<BoxStyleProps>`\n background: ${Colour[\"bg-primary-subtlest\"]};\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"sm\"]};\n padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n display: flex;\n align-items: center;\n width: 100%;\n\n ${MediaQuery.MaxWidth.md} {\n padding: ${Spacing[\"spacing-16\"]};\n }\n\n ${(props) => {\n if (props.$focused) {\n return css`\n border-color: ${Colour[\"border-focus\"]};\n box-shadow: ${Shadow[\"xs-focus-strong\"]};\n `;\n } else if (props.$disabled) {\n return css`\n border-color: ${Colour[\"border-disabled\"]};\n `;\n } else if (props.$error) {\n return css`\n background: ${Colour[\"bg-error\"]};\n border-color: ${Colour[\"border-error\"]};\n `;\n }\n }}\n\n ${(props) => {\n if (!props.$error && (props.$loading || props.$editable)) {\n return css`\n ${MediaQuery.MaxWidth.md} {\n flex-direction: column;\n align-items: flex-start;\n }\n `;\n }\n }}\n`;\n\nexport const ContentSection = styled.div<ContentSectionStyleProps>`\n display: flex;\n flex: 1;\n align-items: center;\n\n ${MediaQuery.MaxWidth.md} {\n flex-direction: column;\n width: 100%;\n align-items: flex-start;\n }\n\n ${(props) => {\n if (props.$hasThumbnail) {\n return css`\n ${MediaQuery.MaxWidth.md} {\n flex-direction: row;\n align-items: center;\n }\n `;\n }\n }}\n`;\n\nexport const NameSection = styled.div`\n display: flex;\n flex: 1;\n flex-direction: column;\n width: 100%;\n`;\n\nexport const ExtendedNameSection = styled.div`\n display: flex;\n flex: 1;\n flex-direction: column;\n align-items: flex-start;\n\n ${MediaQuery.MaxWidth.md} {\n width: 100%;\n }\n`;\n\nexport const FileSizeSection = styled.div<FileSizeSectionStyleProps>`\n display: flex;\n width: 5rem;\n margin-left: ${Spacing[\"spacing-8\"]};\n justify-content: flex-end;\n\n ${ExtendedNameSection} > & {\n width: auto;\n margin-left: 0;\n margin-top: ${Spacing[\"spacing-16\"]};\n justify-content: flex-start;\n }\n\n ${MediaQuery.MaxWidth.md} {\n ${(props) => {\n if (props.$hideInMobile) {\n return css`\n display: none;\n visibility: hidden;\n `;\n } else {\n return css`\n width: 100%;\n margin-left: 0;\n margin-top: ${Spacing[\"spacing-8\"]};\n justify-content: flex-start;\n `;\n }\n }}\n }\n`;\n\nexport const FileSizeText = styled(Typography.BodyMD)`\n color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const DescriptionFileSizeText = styled(Typography.BodyMD)`\n color: ${Colour[\"text-subtler\"]};\n margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const ItemText = styled(Typography.BodyMD)``;\n\nexport const ItemDescriptionLabel = styled.span`\n ${Font[\"form-label\"]}\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n color: ${Colour[\"text-subtle\"]};\n display: block;\n margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const ItemDescriptionText = styled(ItemText)`\n margin-top: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const ErrorIcon = styled(ExclamationCircleFillIcon)`\n height: 1lh;\n width: 1em;\n flex-shrink: 0;\n color: ${Colour[\"icon-error-strong\"]};\n`;\n\nexport const BaseErrorMessage = styled(Typography.BodySM)`\n color: ${Colour[\"text-error\"]};\n`;\n\nexport const DesktopErrorMessage = styled(BaseErrorMessage)`\n margin-top: ${Spacing[\"spacing-4\"]};\n display: flex;\n gap: ${Spacing[\"spacing-4\"]};\n\n ${MediaQuery.MaxWidth.md} {\n display: none;\n visibility: hidden;\n }\n`;\n\nexport const MobileErrorMessage = styled(BaseErrorMessage)`\n display: none;\n visibility: hidden;\n\n ${MediaQuery.MaxWidth.md} {\n display: flex;\n gap: ${Spacing[\"spacing-4\"]};\n visibility: visible;\n margin-top: ${Spacing[\"spacing-8\"]};\n }\n`;\n\nexport const ActionContainer = styled.div<ActionContainerStyleProps>`\n width: 6rem;\n margin-left: ${Spacing[\"spacing-32\"]};\n display: flex;\n justify-content: flex-end;\n align-items: center;\n\n ${(props) => {\n if (\n props.$hasDescription &&\n props.$editable &&\n !props.$error &&\n !props.$loading\n ) {\n return css`\n width: 100%;\n margin-left: 0;\n margin-top: ${Spacing[\"spacing-16\"]};\n justify-content: flex-end;\n `;\n }\n }}\n\n ${MediaQuery.MaxWidth.md} {\n width: fit-content;\n\n ${(props) => {\n if (props.$loading && !props.$error) {\n return css`\n margin-left: 0;\n margin-top: ${Spacing[\"spacing-16\"]};\n width: 100%;\n `;\n } else if (props.$editable && !props.$error) {\n return css`\n margin-left: 0;\n margin-top: ${Spacing[\"spacing-16\"]};\n align-self: flex-end;\n `;\n }\n }}\n }\n`;\n\nexport const IconButton = styled(DSIconButton)`\n min-width: unset;\n\n &:not(:last-child) {\n margin-right: ${Spacing[\"spacing-8\"]};\n }\n`;\n"],"names":["Item","styled","li","Spacing","props","$disabled","$focusType","css","$sortable","DragHandleIcon","DSDragHandleIcon","Colour","$active","Box","div","Border","Radius","MediaQuery","MaxWidth","md","$focused","Shadow","$error","$loading","$editable","ContentSection","$hasThumbnail","NameSection","ExtendedNameSection","FileSizeSection","$hideInMobile","FileSizeText","Typography","BodyMD","DescriptionFileSizeText","ItemText","ItemDescriptionLabel","span","Font","Spec","ItemDescriptionText","ErrorIcon","ExclamationCircleFillIcon","BaseErrorMessage","BodySM","DesktopErrorMessage","MobileErrorMessage","ActionContainer","$hasDescription","IconButton","DSIconButton"],"mappings":"ubAyDO,MAAMA,EAAOC,EAAOC,EAAkB;;;;;;;yBAOpBC,EAAQ;;;MAG1BC,GACKA,EAAMC,WAAkC,SAArBD,EAAME,WAElBC,CAAG;;cAGHH,EAAMI,WAAkC,SAArBJ,EAAME,WACzBC,CAAG;;;;;cAMHH,EAAMI,UACND,CAAG;;;;;;;mBADP;EAaFE,EAAiBR,EAC1BS,EACuB;oBACPP,EAAQ;;;aAGfQ,EAAa;;MAEnBP,GACKA,EAAMQ,QACCL,CAAG;yBACGI,EAAO;cAIpBP,EAAMC,UACCE,CAAG;yBACGI,EAAO;mBAFxB;EAQKE,EAAMZ,EAAOa,GAAkB;kBAC1BH,EAAO;cACXI,EAAO,gBAAgBA,EAAc,SAAKJ,EAAe;qBAClDK,EAAW;eACjBb,EAAQ,iBAAiBA,EAAQ;;;;;MAK1Cc,EAAWC,SAASC;mBACPhB,EAAQ;;;MAGpBC,GACKA,EAAMgB,SACCb,CAAG;gCACUI,EAAO;8BACTU,EAAO;cAElBjB,EAAMC,UACNE,CAAG;gCACUI,EAAO;cAEpBP,EAAMkB,OACNf,CAAG;8BACQI,EAAO;gCACLA,EAAO;mBAHxB;;MAQRP,IACC,IAAKA,EAAMkB,SAAWlB,EAAMmB,UAAYnB,EAAMoB,WAC1C,OAAOjB,CAAG;kBACJU,EAAWC,SAASC;;;;aAK9B;EAIKM,EAAiBxB,EAAOa,GAA6B;;;;;MAK5DG,EAAWC,SAASC;;;;;;MAMnBf,IACC,GAAIA,EAAMsB,cACN,OAAOnB,CAAG;kBACJU,EAAWC,SAASC;;;;aAK9B;EAIKQ,EAAc1B,EAAOa,GAAG;;;;;EAOxBc,EAAsB3B,EAAOa,GAAG;;;;;;MAMvCG,EAAWC,SAASC;;;EAKbU,EAAkB5B,EAAOa,GAA8B;;;mBAGjDX,EAAQ;;;MAGrByB;;;sBAGgBzB,EAAQ;;;;MAIxBc,EAAWC,SAASC;UACff,GACKA,EAAM0B,cACCvB,CAAG;;;kBAKHA,CAAG;;;kCAGQJ,EAAQ;;;;EAQ7B4B,EAAe9B,EAAO+B,EAAWC,OAAO;aACxCtB,EAAO;EAGPuB,EAA0BjC,EAAO+B,EAAWC,OAAO;aACnDtB,EAAO;kBACFR,EAAQ;EAGbgC,EAAWlC,EAAO+B,EAAWC,OAAO,GAEpCG,EAAuBnC,EAAOoC,IAAI;MACzCC,EAAK;mBACQA,EAAKC,KAAK;aAChB5B,EAAO;;kBAEFR,EAAQ;EAGbqC,EAAsBvC,EAAOkC,EAAS;kBACjChC,EAAQ;EAGbsC,EAAYxC,EAAOyC,EAA0B;;;;aAI7C/B,EAAO;EAGPgC,EAAmB1C,EAAO+B,EAAWY,OAAO;aAC5CjC,EAAO;EAGPkC,EAAsB5C,EAAO0C,EAAiB;kBACzCxC,EAAQ;;WAEfA,EAAQ;;MAEbc,EAAWC,SAASC;;;;EAMb2B,EAAqB7C,EAAO0C,EAAiB;;;;MAIpD1B,EAAWC,SAASC;;eAEXhB,EAAQ;;sBAEDA,EAAQ;;EAIjB4C,EAAkB9C,EAAOa,GAA8B;;mBAEjDX,EAAQ;;;;;MAKpBC,IACC,GACIA,EAAM4C,iBACN5C,EAAMoB,YACLpB,EAAMkB,SACNlB,EAAMmB,SAEP,OAAOhB,CAAG;;;8BAGQJ,EAAQ;;aAG9B;;MAGFc,EAAWC,SAASC;;;UAGff,GACKA,EAAMmB,WAAanB,EAAMkB,OAClBf,CAAG;;kCAEQJ,EAAQ;;kBAGnBC,EAAMoB,YAAcpB,EAAMkB,OAC1Bf,CAAG;;kCAEQJ,EAAQ;;uBAHvB;;EAWN8C,EAAahD,EAAOiD,EAAa;;;;wBAItB/C,EAAQ;;"}
1
+ {"version":3,"file":"file-list-item.styles.js","sources":["../../../src/file-upload/file-list-item/file-list-item.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { DragHandleIcon as DSDragHandleIcon } from \"@lifesg/react-icons/drag-handle\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { IconButton as DSIconButton } from \"../../icon-button\";\nimport {\n Border,\n Colour,\n Font,\n MediaQuery,\n Radius,\n Shadow,\n Spacing,\n} from \"../../theme\";\nimport { Typography } from \"../../typography\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\nexport type ItemFocusType = \"self\" | \"others\" | \"none\";\ninterface ItemStyleProps {\n $sortable: boolean;\n $disabled?: boolean | undefined;\n $focusType: ItemFocusType;\n}\n\ninterface DragHandleIconStyleProps {\n $disabled?: boolean | undefined;\n $active?: boolean | undefined;\n}\n\ninterface BoxStyleProps {\n $error?: boolean | undefined;\n $disabled?: boolean | undefined;\n $focused?: boolean | undefined;\n $loading?: boolean | undefined;\n $editable?: boolean | undefined;\n $hasDescription?: boolean | undefined;\n}\n\ninterface ContentSectionStyleProps {\n $hasThumbnail?: boolean | undefined;\n}\n\ninterface ActionContainerStyleProps {\n $editable?: boolean | undefined;\n $error?: boolean | undefined;\n $loading?: boolean | undefined;\n $hasDescription?: boolean | undefined;\n}\n\ninterface FileSizeSectionStyleProps {\n $hideInMobile?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Item = styled.li<ItemStyleProps>`\n display: flex;\n align-items: center;\n width: 100%;\n border: none;\n\n &:not(:last-child) {\n margin-bottom: ${Spacing[\"spacing-16\"]};\n }\n\n ${(props) => {\n if (props.$disabled && props.$focusType === \"none\") {\n // Show disabled cursor only if no dragging is happening\n return css`\n cursor: not-allowed;\n `;\n } else if (props.$sortable && props.$focusType === \"self\") {\n return css`\n cursor: grabbing;\n // Following recommendation by the library for touch events\n // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n touch-action: manipulation;\n `;\n } else if (props.$sortable) {\n return css`\n &:hover {\n cursor: grab;\n }\n // Following recommendation by the library for touch events\n // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n touch-action: manipulation;\n `;\n }\n }}\n`;\n\nexport const DragHandleIcon = styled(\n DSDragHandleIcon\n)<DragHandleIconStyleProps>`\n margin-right: ${Spacing[\"spacing-16\"]};\n height: 1.5rem;\n width: 1.5rem;\n color: ${Colour[\"icon\"]};\n\n ${(props) => {\n if (props.$active) {\n return css`\n color: ${Colour[\"icon-primary\"]};\n `;\n }\n\n if (props.$disabled) {\n return css`\n color: ${Colour[\"icon-disabled\"]};\n `;\n }\n }};\n`;\n\nexport const Box = styled.div<BoxStyleProps>`\n background: ${Colour[\"bg-primary-subtlest\"]};\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"sm\"]};\n padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n display: flex;\n align-items: center;\n width: 100%;\n\n ${MediaQuery.MaxWidth.md} {\n padding: ${Spacing[\"spacing-16\"]};\n }\n\n ${(props) => {\n if (props.$focused) {\n return css`\n border-color: ${Colour[\"border-focus\"]};\n box-shadow: ${Shadow[\"xs-focus-strong\"]};\n `;\n } else if (props.$disabled) {\n return css`\n border-color: ${Colour[\"border-disabled\"]};\n `;\n } else if (props.$error) {\n return css`\n background: ${Colour[\"bg-error\"]};\n border-color: ${Colour[\"border-error\"]};\n `;\n }\n }}\n\n ${(props) => {\n if (!props.$error && (props.$loading || props.$editable)) {\n return css`\n ${MediaQuery.MaxWidth.md} {\n flex-direction: column;\n align-items: flex-start;\n }\n `;\n }\n }}\n`;\n\nexport const ContentSection = styled.div<ContentSectionStyleProps>`\n display: flex;\n flex: 1;\n align-items: center;\n\n ${MediaQuery.MaxWidth.md} {\n flex-direction: column;\n width: 100%;\n align-items: flex-start;\n }\n\n ${(props) => {\n if (props.$hasThumbnail) {\n return css`\n ${MediaQuery.MaxWidth.md} {\n flex-direction: row;\n align-items: center;\n }\n `;\n }\n }}\n`;\n\nexport const NameSection = styled.div`\n display: flex;\n flex: 1;\n flex-direction: column;\n width: 100%;\n`;\n\nexport const ExtendedNameSection = styled.div`\n display: flex;\n flex: 1;\n flex-direction: column;\n align-items: flex-start;\n\n ${MediaQuery.MaxWidth.md} {\n width: 100%;\n }\n`;\n\nexport const FileSizeSection = styled.div<FileSizeSectionStyleProps>`\n display: flex;\n width: 5rem;\n margin-left: ${Spacing[\"spacing-8\"]};\n justify-content: flex-end;\n\n ${ExtendedNameSection} > & {\n width: auto;\n margin-left: 0;\n margin-top: ${Spacing[\"spacing-16\"]};\n justify-content: flex-start;\n }\n\n ${MediaQuery.MaxWidth.md} {\n ${(props) => {\n if (props.$hideInMobile) {\n return css`\n display: none;\n visibility: hidden;\n `;\n } else {\n return css`\n width: 100%;\n margin-left: 0;\n margin-top: ${Spacing[\"spacing-8\"]};\n justify-content: flex-start;\n `;\n }\n }}\n }\n`;\n\nexport const FileSizeText = styled(Typography.BodyMD)`\n color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const DescriptionFileSizeText = styled(Typography.BodyMD)`\n color: ${Colour[\"text-subtler\"]};\n margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const ItemText = styled(Typography.BodyMD)``;\n\nexport const ItemDescriptionLabel = styled.span`\n ${Font[\"form-label\"]}\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n color: ${Colour[\"text-subtle\"]};\n display: block;\n margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const ItemDescriptionText = styled(ItemText)`\n margin-top: ${Spacing[\"spacing-4\"]};\n overflow-wrap: anywhere;\n`;\n\nexport const ErrorIcon = styled(ExclamationCircleFillIcon)`\n height: 1lh;\n width: 1em;\n flex-shrink: 0;\n color: ${Colour[\"icon-error-strong\"]};\n`;\n\nexport const BaseErrorMessage = styled(Typography.BodySM)`\n color: ${Colour[\"text-error\"]};\n`;\n\nexport const DesktopErrorMessage = styled(BaseErrorMessage)`\n margin-top: ${Spacing[\"spacing-4\"]};\n display: flex;\n gap: ${Spacing[\"spacing-4\"]};\n\n ${MediaQuery.MaxWidth.md} {\n display: none;\n visibility: hidden;\n }\n`;\n\nexport const MobileErrorMessage = styled(BaseErrorMessage)`\n display: none;\n visibility: hidden;\n\n ${MediaQuery.MaxWidth.md} {\n display: flex;\n gap: ${Spacing[\"spacing-4\"]};\n visibility: visible;\n margin-top: ${Spacing[\"spacing-8\"]};\n }\n`;\n\nexport const ActionContainer = styled.div<ActionContainerStyleProps>`\n width: 6rem;\n margin-left: ${Spacing[\"spacing-32\"]};\n display: flex;\n justify-content: flex-end;\n align-items: center;\n\n ${(props) => {\n if (\n props.$hasDescription &&\n props.$editable &&\n !props.$error &&\n !props.$loading\n ) {\n return css`\n width: 100%;\n margin-left: 0;\n margin-top: ${Spacing[\"spacing-16\"]};\n justify-content: flex-end;\n `;\n }\n }}\n\n ${MediaQuery.MaxWidth.md} {\n width: fit-content;\n\n ${(props) => {\n if (props.$loading && !props.$error) {\n return css`\n margin-left: 0;\n margin-top: ${Spacing[\"spacing-16\"]};\n width: 100%;\n `;\n } else if (props.$editable && !props.$error) {\n return css`\n margin-left: 0;\n margin-top: ${Spacing[\"spacing-16\"]};\n align-self: flex-end;\n `;\n }\n }}\n }\n`;\n\nexport const IconButton = styled(DSIconButton)`\n min-width: unset;\n\n &:not(:last-child) {\n margin-right: ${Spacing[\"spacing-8\"]};\n }\n`;\n"],"names":["Item","styled","li","Spacing","props","$disabled","$focusType","css","$sortable","DragHandleIcon","DSDragHandleIcon","Colour","$active","Box","div","Border","Radius","MediaQuery","MaxWidth","md","$focused","Shadow","$error","$loading","$editable","ContentSection","$hasThumbnail","NameSection","ExtendedNameSection","FileSizeSection","$hideInMobile","FileSizeText","Typography","BodyMD","DescriptionFileSizeText","ItemText","ItemDescriptionLabel","span","Font","Spec","ItemDescriptionText","ErrorIcon","ExclamationCircleFillIcon","BaseErrorMessage","BodySM","DesktopErrorMessage","MobileErrorMessage","ActionContainer","$hasDescription","IconButton","DSIconButton"],"mappings":"ubAyDO,MAAMA,EAAOC,EAAOC,EAAkB;;;;;;;yBAOpBC,EAAQ;;;MAG1BC,GACKA,EAAMC,WAAkC,SAArBD,EAAME,WAElBC,CAAG;;cAGHH,EAAMI,WAAkC,SAArBJ,EAAME,WACzBC,CAAG;;;;;cAMHH,EAAMI,UACND,CAAG;;;;;;;mBADP;EAaFE,EAAiBR,EAC1BS,EACuB;oBACPP,EAAQ;;;aAGfQ,EAAa;;MAEnBP,GACKA,EAAMQ,QACCL,CAAG;yBACGI,EAAO;cAIpBP,EAAMC,UACCE,CAAG;yBACGI,EAAO;mBAFxB;EAQKE,EAAMZ,EAAOa,GAAkB;kBAC1BH,EAAO;cACXI,EAAO,gBAAgBA,EAAc,SAAKJ,EAAe;qBAClDK,EAAW;eACjBb,EAAQ,iBAAiBA,EAAQ;;;;;MAK1Cc,EAAWC,SAASC;mBACPhB,EAAQ;;;MAGpBC,GACKA,EAAMgB,SACCb,CAAG;gCACUI,EAAO;8BACTU,EAAO;cAElBjB,EAAMC,UACNE,CAAG;gCACUI,EAAO;cAEpBP,EAAMkB,OACNf,CAAG;8BACQI,EAAO;gCACLA,EAAO;mBAHxB;;MAQRP,IACC,IAAKA,EAAMkB,SAAWlB,EAAMmB,UAAYnB,EAAMoB,WAC1C,OAAOjB,CAAG;kBACJU,EAAWC,SAASC;;;;aAK9B;EAIKM,EAAiBxB,EAAOa,GAA6B;;;;;MAK5DG,EAAWC,SAASC;;;;;;MAMnBf,IACC,GAAIA,EAAMsB,cACN,OAAOnB,CAAG;kBACJU,EAAWC,SAASC;;;;aAK9B;EAIKQ,EAAc1B,EAAOa,GAAG;;;;;EAOxBc,EAAsB3B,EAAOa,GAAG;;;;;;MAMvCG,EAAWC,SAASC;;;EAKbU,EAAkB5B,EAAOa,GAA8B;;;mBAGjDX,EAAQ;;;MAGrByB;;;sBAGgBzB,EAAQ;;;;MAIxBc,EAAWC,SAASC;UACff,GACKA,EAAM0B,cACCvB,CAAG;;;kBAKHA,CAAG;;;kCAGQJ,EAAQ;;;;EAQ7B4B,EAAe9B,EAAO+B,EAAWC,OAAO;aACxCtB,EAAO;EAGPuB,EAA0BjC,EAAO+B,EAAWC,OAAO;aACnDtB,EAAO;kBACFR,EAAQ;EAGbgC,EAAWlC,EAAO+B,EAAWC,OAAO,GAEpCG,EAAuBnC,EAAOoC,IAAI;MACzCC,EAAK;mBACQA,EAAKC,KAAK;aAChB5B,EAAO;;kBAEFR,EAAQ;EAGbqC,EAAsBvC,EAAOkC,EAAS;kBACjChC,EAAQ;;EAIbsC,EAAYxC,EAAOyC,EAA0B;;;;aAI7C/B,EAAO;EAGPgC,EAAmB1C,EAAO+B,EAAWY,OAAO;aAC5CjC,EAAO;EAGPkC,EAAsB5C,EAAO0C,EAAiB;kBACzCxC,EAAQ;;WAEfA,EAAQ;;MAEbc,EAAWC,SAASC;;;;EAMb2B,EAAqB7C,EAAO0C,EAAiB;;;;MAIpD1B,EAAWC,SAASC;;eAEXhB,EAAQ;;sBAEDA,EAAQ;;EAIjB4C,EAAkB9C,EAAOa,GAA8B;;mBAEjDX,EAAQ;;;;;MAKpBC,IACC,GACIA,EAAM4C,iBACN5C,EAAMoB,YACLpB,EAAMkB,SACNlB,EAAMmB,SAEP,OAAOhB,CAAG;;;8BAGQJ,EAAQ;;aAG9B;;MAGFc,EAAWC,SAASC;;;UAGff,GACKA,EAAMmB,WAAanB,EAAMkB,OAClBf,CAAG;;kCAEQJ,EAAQ;;kBAGnBC,EAAMoB,YAAcpB,EAAMkB,OAC1Bf,CAAG;;kCAEQJ,EAAQ;;uBAHvB;;EAWN8C,EAAahD,EAAOiD,EAAa;;;;wBAItB/C,EAAQ;;"}
package/form/form-textarea.style.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import i from"styled-components";import{Spacing as o,Font as e}from"../theme/index.js";import{ErrorMessage as t}from"./form-label.style.js";const m=i.div`
2
2
  display: flex;
3
3
  justify-content: flex-end;
4
- margin-top: ${o["spacing-4"]};
4
+ margin-top: ${o["spacing-8"]};
5
5
  `,s=i.div`
6
6
  ${e["body-sm-semibold"]}
7
7
  display: flex;
package/form/form-textarea.style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"form-textarea.style.js","sources":["../../src/form/form-textarea.style.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Font, Spacing } from \"../theme\";\nimport { ErrorMessage } from \"./form-label.style\";\n\nexport const LabelContainer = styled.div`\n display: flex;\n justify-content: flex-end;\n margin-top: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const ErrorMessageContainer = styled.div`\n ${Font[\"body-sm-semibold\"]}\n display: flex;\n flex: 1;\n margin-right: ${Spacing[\"spacing-12\"]};\n gap: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const ErrorMessageLabel = styled(ErrorMessage)`\n margin-top: 0;\n`;\n"],"names":["LabelContainer","styled","div","Spacing","ErrorMessageContainer","Font","ErrorMessageLabel","ErrorMessage"],"mappings":"4IAIO,MAAMA,EAAiBC,EAAOC,GAAG;;;kBAGtBC,EAAQ;EAGbC,EAAwBH,EAAOC,GAAG;MACzCG,EAAK;;;oBAGSF,EAAQ;WACjBA,EAAQ;EAGNG,EAAoBL,EAAOM,EAAa;;"}
1
+ {"version":3,"file":"form-textarea.style.js","sources":["../../src/form/form-textarea.style.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Font, Spacing } from \"../theme\";\nimport { ErrorMessage } from \"./form-label.style\";\n\nexport const LabelContainer = styled.div`\n display: flex;\n justify-content: flex-end;\n margin-top: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const ErrorMessageContainer = styled.div`\n ${Font[\"body-sm-semibold\"]}\n display: flex;\n flex: 1;\n margin-right: ${Spacing[\"spacing-12\"]};\n gap: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const ErrorMessageLabel = styled(ErrorMessage)`\n margin-top: 0;\n`;\n"],"names":["LabelContainer","styled","div","Spacing","ErrorMessageContainer","Font","ErrorMessageLabel","ErrorMessage"],"mappings":"4IAIO,MAAMA,EAAiBC,EAAOC,GAAG;;;kBAGtBC,EAAQ;EAGbC,EAAwBH,EAAOC,GAAG;MACzCG,EAAK;;;oBAGSF,EAAQ;WACjBA,EAAQ;EAGNG,EAAoBL,EAAOM,EAAa;;"}
package/input-textarea/textarea.style.js CHANGED
@@ -1,30 +1,31 @@
1
- import r,{css as o}from"styled-components";import{Border as e,Colour as d,Radius as t,Spacing as l,Font as i}from"../theme/index.js";const a=r.div`
1
+ import r,{css as o}from"styled-components";import{Spacing as e,Border as d,Colour as t,Radius as a,Font as i}from"../theme/index.js";const l=r.div`
2
2
  display: flex;
3
3
  flex-direction: column;
4
+ gap: ${e["spacing-8"]};
4
5
  `,c=r.textarea`
5
- border: ${e["width-010"]} ${e.solid} ${d.border};
6
- border-radius: ${t.sm};
7
- background: ${d.bg};
6
+ border: ${d["width-010"]} ${d.solid} ${t.border};
7
+ border-radius: ${a.sm};
8
+ background: ${t.bg};
8
9
  outline: none;
9
10
  overflow: auto;
10
11
 
11
12
  display: block;
12
- padding: ${l["spacing-12"]} ${l["spacing-16"]};
13
+ padding: ${e["spacing-12"]} ${e["spacing-16"]};
13
14
  width: 100%;
14
15
 
15
16
  ${i["body-baseline-regular"]}
16
- color: ${d.text};
17
+ color: ${t.text};
17
18
 
18
19
  &:focus,
19
20
  &:active {
20
21
  outline-offset: -1px;
21
- outline: ${e["width-020"]} ${e.solid}
22
- ${d["border-focus"]};
22
+ outline: ${d["width-020"]} ${d.solid}
23
+ ${t["border-focus"]};
23
24
  }
24
25
 
25
26
  &::placeholder,
26
27
  &::-webkit-input-placeholder {
27
- color: ${d["text-subtler"]};
28
+ color: ${t["text-subtler"]};
28
29
  }
29
30
 
30
31
  &::-webkit-scrollbar {
@@ -36,36 +37,36 @@ import r,{css as o}from"styled-components";import{Border as e,Colour as d,Radius
36
37
  }
37
38
 
38
39
  &::-webkit-scrollbar-thumb {
39
- background: ${d["bg-inverse-subtlest"]};
40
+ background: ${t["bg-inverse-subtlest"]};
40
41
  border: 5px solid transparent;
41
- border-radius: ${t.full};
42
+ border-radius: ${a.full};
42
43
  background-clip: padding-box;
43
44
  }
44
45
 
45
46
  ${r=>r.readOnly?o`
46
47
  border-color: transparent;
47
48
  background: transparent !important;
48
- padding: ${l["spacing-12"]} 0;
49
+ padding: ${e["spacing-12"]} 0;
49
50
 
50
51
  &:focus,
51
52
  &:active {
52
- outline-color: ${d["border-focus"]};
53
+ outline-color: ${t["border-focus"]};
53
54
  }
54
55
  `:r.disabled?o`
55
- background: ${d["bg-disabled"]};
56
+ background: ${t["bg-disabled"]};
56
57
  cursor: not-allowed;
57
58
 
58
59
  &:focus,
59
60
  &:active {
60
- outline-color: ${d["border-disabled"]};
61
+ outline-color: ${t["border-disabled"]};
61
62
  }
62
63
  `:r.$error?o`
63
- border-color: ${d["border-error"]};
64
+ border-color: ${t["border-error"]};
64
65
 
65
66
  &:focus,
66
67
  &:active {
67
- outline-color: ${d["border-error-focus"]};
68
+ outline-color: ${t["border-error-focus"]};
68
69
  }
69
70
  `:void 0}
70
- `;export{c as Element,a as Wrapper};
71
+ `;export{c as Element,l as Wrapper};
71
72
  //# sourceMappingURL=textarea.style.js.map
package/input-textarea/textarea.style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"textarea.style.js","sources":["../../src/input-textarea/textarea.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface StyleProps {\n $error?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nexport const Element = styled.textarea<StyleProps>`\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"sm\"]};\n background: ${Colour[\"bg\"]};\n outline: none;\n overflow: auto;\n\n display: block;\n padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n width: 100%;\n\n ${Font[\"body-baseline-regular\"]}\n color: ${Colour[\"text\"]};\n\n &:focus,\n &:active {\n outline-offset: -1px;\n outline: ${Border[\"width-020\"]} ${Border[\"solid\"]}\n ${Colour[\"border-focus\"]};\n }\n\n &::placeholder,\n &::-webkit-input-placeholder {\n color: ${Colour[\"text-subtler\"]};\n }\n\n &::-webkit-scrollbar {\n width: 14px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: ${Colour[\"bg-inverse-subtlest\"]};\n border: 5px solid transparent;\n border-radius: ${Radius[\"full\"]};\n background-clip: padding-box;\n }\n\n ${(props) => {\n if (props.readOnly) {\n return css`\n border-color: transparent;\n background: transparent !important;\n padding: ${Spacing[\"spacing-12\"]} 0;\n\n &:focus,\n &:active {\n outline-color: ${Colour[\"border-focus\"]};\n }\n `;\n } else if (props.disabled) {\n return css`\n background: ${Colour[\"bg-disabled\"]};\n cursor: not-allowed;\n\n &:focus,\n &:active {\n outline-color: ${Colour[\"border-disabled\"]};\n }\n `;\n } else if (props.$error) {\n return css`\n border-color: ${Colour[\"border-error\"]};\n\n &:focus,\n &:active {\n outline-color: ${Colour[\"border-error-focus\"]};\n }\n `;\n }\n }}\n`;\n"],"names":["Wrapper","styled","div","Element","textarea","Border","Colour","Radius","Spacing","Font","props","readOnly","css","disabled","$error"],"mappings":"qIAcO,MAAMA,EAAUC,EAAOC,GAAG;;;EAKpBC,EAAUF,EAAOG,QAAoB;cACpCC,EAAO,gBAAgBA,EAAc,SAAKC,EAAe;qBAClDC,EAAW;kBACdD,EAAW;;;;;eAKdE,EAAQ,iBAAiBA,EAAQ;;;MAG1CC,EAAK;aACEH,EAAa;;;;;mBAKPD,EAAO,gBAAgBA,EAAc;cAC1CC,EAAO;;;;;iBAKJA,EAAO;;;;;;;;;;;;sBAYFA,EAAO;;yBAEJC,EAAa;;;;MAI/BG,GACKA,EAAMC,SACCC,CAAG;;;2BAGKJ,EAAQ;;;;qCAIEF,EAAO;;cAGzBI,EAAMG,SACND,CAAG;8BACQN,EAAO;;;;;qCAKAA,EAAO;;cAGzBI,EAAMI,OACNF,CAAG;gCACUN,EAAO;;;;qCAIFA,EAAO;;mBAN7B;"}
1
+ {"version":3,"file":"textarea.style.js","sources":["../../src/input-textarea/textarea.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface StyleProps {\n $error?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const Element = styled.textarea<StyleProps>`\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"sm\"]};\n background: ${Colour[\"bg\"]};\n outline: none;\n overflow: auto;\n\n display: block;\n padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n width: 100%;\n\n ${Font[\"body-baseline-regular\"]}\n color: ${Colour[\"text\"]};\n\n &:focus,\n &:active {\n outline-offset: -1px;\n outline: ${Border[\"width-020\"]} ${Border[\"solid\"]}\n ${Colour[\"border-focus\"]};\n }\n\n &::placeholder,\n &::-webkit-input-placeholder {\n color: ${Colour[\"text-subtler\"]};\n }\n\n &::-webkit-scrollbar {\n width: 14px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: ${Colour[\"bg-inverse-subtlest\"]};\n border: 5px solid transparent;\n border-radius: ${Radius[\"full\"]};\n background-clip: padding-box;\n }\n\n ${(props) => {\n if (props.readOnly) {\n return css`\n border-color: transparent;\n background: transparent !important;\n padding: ${Spacing[\"spacing-12\"]} 0;\n\n &:focus,\n &:active {\n outline-color: ${Colour[\"border-focus\"]};\n }\n `;\n } else if (props.disabled) {\n return css`\n background: ${Colour[\"bg-disabled\"]};\n cursor: not-allowed;\n\n &:focus,\n &:active {\n outline-color: ${Colour[\"border-disabled\"]};\n }\n `;\n } else if (props.$error) {\n return css`\n border-color: ${Colour[\"border-error\"]};\n\n &:focus,\n &:active {\n outline-color: ${Colour[\"border-error-focus\"]};\n }\n `;\n }\n }}\n`;\n"],"names":["Wrapper","styled","div","Spacing","Element","textarea","Border","Colour","Radius","Font","props","readOnly","css","disabled","$error"],"mappings":"qIAcO,MAAMA,EAAUC,EAAOC,GAAG;;;WAGtBC,EAAQ;EAGNC,EAAUH,EAAOI,QAAoB;cACpCC,EAAO,gBAAgBA,EAAc,SAAKC,EAAe;qBAClDC,EAAW;kBACdD,EAAW;;;;;eAKdJ,EAAQ,iBAAiBA,EAAQ;;;MAG1CM,EAAK;aACEF,EAAa;;;;;mBAKPD,EAAO,gBAAgBA,EAAc;cAC1CC,EAAO;;;;;iBAKJA,EAAO;;;;;;;;;;;;sBAYFA,EAAO;;yBAEJC,EAAa;;;;MAI/BE,GACKA,EAAMC,SACCC,CAAG;;;2BAGKT,EAAQ;;;;qCAIEI,EAAO;;cAGzBG,EAAMG,SACND,CAAG;8BACQL,EAAO;;;;;qCAKAA,EAAO;;cAGzBG,EAAMI,OACNF,CAAG;gCACUL,EAAO;;;;qCAIFA,EAAO;;mBAN7B;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lifesg/react-design-system",
3
- "version": "3.5.0-canary.3",
3
+ "version": "3.5.0-canary.4",
4
4
  "description": "A component design system for LifeSG web apps",
5
5
  "keywords": [
6
6
  "design-system"